@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body {
    @apply border-0;
  }
}

/*
 * Resident portal.
 *
 * The resident pages are built from the r-* classes below, which read their
 * colours, radii, borders and type from --r-* variables on body.resident. The
 * values here are the standard Mino look. A tenant's theme (ResidentTheme,
 * config/resident_themes.yml) overrides them from the resident layout. Nothing
 * outside that layout sets or reads these, so the admin UI is unaffected.
 */
@layer components {
  .resident {
    --r-font: theme(fontFamily.sans);
    --r-tracking: normal;
    --r-page-bg: theme(colors.gray.50);

    --r-heading: theme(colors.gray.900);
    --r-body: theme(colors.gray.600);
    --r-hint: theme(colors.gray.500);
    --r-label: theme(colors.gray.700);
    --r-accent: theme(colors.green.500);
    --r-accent-strong: theme(colors.green.600);
    --r-accent-soft: theme(colors.green.50);
    --r-accent-border: theme(colors.green.200);
    --r-divider: theme(colors.gray.100);

    --r-surface: #ffffff;
    --r-border: transparent;
    --r-border-width: 0px;
    --r-radius: theme(borderRadius.md);
    --r-shadow: theme(boxShadow.DEFAULT);

    --r-title-color: var(--r-accent);
    --r-title-size: theme(fontSize.lg);
    --r-title-leading: 1.75rem;
    --r-title-weight: 500;
    --r-title-align: center;
    --r-title-tracking: normal;
    --r-title-divider: var(--r-divider);

    --r-menu-bg: #ffffff;
    --r-menu-text: theme(colors.gray.500);
    --r-menu-hover-bg: theme(colors.gray.50);
    --r-menu-hover-text: var(--r-accent);
    --r-arrow-solid-display: block;
    --r-arrow-outline-display: none;

    --r-back-bg: var(--r-menu-bg);
    --r-back-hover-bg: var(--r-menu-hover-bg);
    --r-back-border-width: var(--r-border-width);
    --r-back-shadow: var(--r-shadow);
    --r-back-padding: 1rem 1.5rem;
    --r-back-direction: row;
    --r-back-justify: space-between;
    --r-back-arrow-flip: 1;

    --r-input-bg: #ffffff;
    --r-input-border: theme(colors.gray.300);
    --r-input-border-width: 1px;
    --r-input-radius: theme(borderRadius.md);
    --r-input-focus: var(--r-accent);
    --r-input-readonly-bg: theme(colors.gray.50);
    --r-input-padding-y: 0.375rem;
    --r-input-padding-x: 0.75rem;
    --r-input-size: theme(fontSize.base);
    --r-input-icon-display: block;
    --r-input-icon-inset: 2.5rem;

    --r-button-bg: var(--r-accent);
    --r-button-text: #ffffff;
    --r-button-border: transparent;
    --r-button-border-width: 0px;
    --r-button-hover-bg: var(--r-accent-strong);
    --r-button-hover-text: #ffffff;
    --r-button-radius: theme(borderRadius.md);
    --r-button-padding: 0.5rem 0.75rem;
    --r-button-size: theme(fontSize.sm);
    --r-button-shadow: theme(boxShadow.sm);
    --r-button-width: 100%;

    --r-link: var(--r-accent);
    --r-link-hover: var(--r-accent-strong);
    --r-link-decoration: none;

    --r-logo-height: 1.75rem;
    --r-logo-align: center;

    background-color: var(--r-page-bg);
    font-family: var(--r-font);
    letter-spacing: var(--r-tracking);
  }

  /* Inputs are a size smaller from the sm breakpoint up, as they were. */
  @media (min-width: theme(screens.sm)) {
    .resident {
      --r-input-size: theme(fontSize.sm);
      --r-input-icon-inset: 2.25rem;
    }
  }

  .r-header {
    display: flex;
    justify-content: var(--r-logo-align);
  }

  .r-logo {
    display: block;
    height: var(--r-logo-height);
    width: auto;
  }

  .r-card {
    overflow: hidden;
    background-color: var(--r-surface);
    border: var(--r-border-width) solid var(--r-border);
    border-radius: var(--r-radius);
    box-shadow: var(--r-shadow);
  }

  .r-menu-item {
    background-color: var(--r-menu-bg);
    color: var(--r-menu-text);
    font-weight: 500;
  }

  .r-menu-item:hover {
    background-color: var(--r-menu-hover-bg);
    color: var(--r-menu-hover-text);
  }

  .r-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.5rem;
  }

  /* The arrow on a menu entry: a solid disc by default, or an outlined circle. */
  .r-arrow-solid {
    display: var(--r-arrow-solid-display);
  }

  .r-arrow-outline {
    display: var(--r-arrow-outline-display);
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border: 1.5px solid currentColor;
    border-radius: 9999px;
  }

  /* The Back entry under a page: a menu entry by default, or a plain link. */
  .r-back {
    background-color: var(--r-back-bg);
    border-width: var(--r-back-border-width);
    box-shadow: var(--r-back-shadow);
  }

  .r-back:hover {
    background-color: var(--r-back-hover-bg);
  }

  .r-back .r-menu-link {
    padding: var(--r-back-padding);
    flex-direction: var(--r-back-direction);
    justify-content: var(--r-back-justify);
  }

  .r-back .r-arrow {
    transform: scaleX(var(--r-back-arrow-flip));
  }

  .r-title-divider {
    margin: 1rem 0;
    border-top: 1px solid var(--r-title-divider);
  }

  .r-title {
    color: var(--r-title-color);
    font-size: var(--r-title-size);
    line-height: var(--r-title-leading);
    font-weight: var(--r-title-weight);
    text-align: var(--r-title-align);
    letter-spacing: var(--r-title-tracking);
  }

  .r-subtitle {
    @apply text-sm font-medium;
    color: var(--r-heading);
    text-align: var(--r-title-align);
  }

  /* Text that follows the title's alignment. */
  .r-align {
    text-align: var(--r-title-align);
  }

  .r-link {
    color: var(--r-link);
    text-decoration-line: var(--r-link-decoration);
  }

  .r-link:hover {
    color: var(--r-link-hover);
  }

  .r-input {
    display: block;
    width: 100%;
    padding: var(--r-input-padding-y) var(--r-input-padding-x);
    font-size: var(--r-input-size);
    line-height: 1.5rem;
    background-color: var(--r-input-bg);
    color: var(--r-heading);
    border-radius: var(--r-input-radius);
    outline: var(--r-input-border-width) solid var(--r-input-border);
    outline-offset: calc(var(--r-input-border-width) * -1);
  }

  .r-input::placeholder {
    color: theme(colors.gray.400);
  }

  .r-input:focus {
    outline: 2px solid var(--r-input-focus);
    outline-offset: -2px;
  }

  .r-input-readonly {
    background-color: var(--r-input-readonly-bg);
  }

  /* An input with an icon laid over its left edge. A theme may hide the icon. */
  .r-input-with-icon {
    padding-left: var(--r-input-icon-inset);
  }

  .r-input-icon {
    display: var(--r-input-icon-display);
  }

  .r-button,
  .r-button-secondary {
    @apply text-center font-medium;
    border-radius: var(--r-button-radius);
    padding: var(--r-button-padding);
    font-size: var(--r-button-size);
    line-height: 1.25rem;
    box-shadow: var(--r-button-shadow);
    cursor: pointer;
  }

  .r-button {
    background-color: var(--r-button-bg);
    color: var(--r-button-text);
    border: var(--r-button-border-width) solid var(--r-button-border);
  }

  .r-button:hover {
    background-color: var(--r-button-hover-bg);
    color: var(--r-button-hover-text);
  }

  .r-button-secondary {
    background-color: var(--r-input-bg);
    color: var(--r-label);
    border: 1px solid var(--r-input-border);
  }

  .r-button-secondary:hover {
    background-color: var(--r-input-readonly-bg);
  }

  .r-button:focus-visible,
  .r-button-secondary:focus-visible {
    outline: 2px solid var(--r-input-focus);
    outline-offset: 2px;
  }

  .r-button-wide {
    width: var(--r-button-width);
  }

  .r-button:disabled {
    @apply cursor-not-allowed opacity-50;
  }
}