/* ============================================
   ADMIN SIGN-IN ALLOWLIST (/admin/allowlist)
   ============================================
   Same layering convention as workspaces.css / members-page:
   - @layer components: structural rules only — sizing, positioning,
     grid/flex, padding/margin, font-size/weight.
   - @layer theme: all color / surface / border-color / background /
     box-shadow / text-color rules. Theme runs later in the cascade
     than components (see base.css `@layer reset, base, components,
     utilities, theme, overrides`) so dark-mode palettes win without
     specificity wars.

   Shared `.page` / `.page-bg` / `.page-header` chrome lives in
   shared/css/base.css; this file only adds the screen-specific bits
   (entries table + add-entry form + status / kind chips).
   ============================================ */

@layer components {
  .admin-allowlist-page {
    padding-block: var(--space-xl);
    position: relative;
    overflow: hidden;

    & > section {
      /* Wider than the workspace pages because this table has 8 columns —
         narrower than the page chrome (~1440px in the layout) so the
         glass surface still feels like a card rather than a page wash. */
      max-inline-size: 1280px;
      margin-inline: auto;
      margin-block-end: var(--space-xl);
      padding: var(--space-lg);
      border-radius: var(--wire-radius);
      position: relative;
      z-index: 1;

      h2 {
        margin-block-end: var(--space-md);
        font-size: var(--fs-large);
      }
    }

    .entries-table {
      inline-size: 100%;
      border-collapse: collapse;
      font-size: var(--fs-small);

      th,
      td {
        padding: var(--space-sm) var(--space-md);
        text-align: start;
        vertical-align: middle;
        /* Default: don't break words. The Value column gets its own
           override below because long emails / domains DO need to wrap
           or they'll force a horizontal scrollbar on narrow viewports.
           Without this default, `overflow-wrap: anywhere` on every cell
           was breaking the chip text mid-word ("EMAI / L"). */
        white-space: normal;
      }

      th {
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        font-size: var(--fs-xsmall);
        letter-spacing: 0.04em;
      }

      /* Long emails / domains in Value only — wrap on any character so a
         pathological address can't push the layout sideways. Other
         columns stay on word boundaries. */
      td code {
        font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
        font-size: var(--fs-small);
        overflow-wrap: anywhere;
      }
    }

    /* Belt-and-braces: even with cell-level wrapping, give the section
       its own horizontal scroll so a runaway row can't force a
       horizontal scrollbar on the whole page. */
    .entries-section {
      overflow-x: auto;
    }

    .add-allowlist-form {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
      gap: var(--space-md);
      align-items: end;

      label {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
      }

      input,
      select {
        padding: var(--space-sm) var(--space-md);
      }
    }

    .allowlist-banner {
      margin-block-start: var(--space-md);
      padding: var(--space-sm) var(--space-md);
      border-radius: var(--wire-radius);
      font-size: var(--fs-small);
    }

    .kind-chip,
    .status-chip {
      display: inline-block;
      padding: var(--space-3xs) var(--space-sm);
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      /* Pin chip text to a single line so a narrow Kind/Status column
         doesn't render the label as "EMAI / L" or "ACTIV / E". */
      white-space: nowrap;
    }

    /* Subtle text button used inside the entries table for "Revoke". */
    .allowlist-revoke-form .text-button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: var(--fs-small);
      padding: var(--space-xs) var(--space-sm);
      border-radius: var(--wire-radius);
    }
  }

  /* 720px is where the table gets uncomfortably packed at the chip + code
     widths; below this we collapse the form to a single column rather than
     watch the inputs squeeze together. Matches the breakpoint used elsewhere
     for "table-bearing screens go vertical". */
  @media (max-width: 720px) {
    .admin-allowlist-page .add-allowlist-form {
      grid-template-columns: 1fr;
    }
  }
}

@layer theme {
  .admin-allowlist-page {
    & > section {
      background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
      backdrop-filter: blur(12px);
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.08);
    }

    .entries-table {
      th,
      td {
        border-block-end: 1px solid var(--border-color);
      }

      th {
        color: var(--text-secondary);
      }

      tbody tr:last-child td {
        border-block-end: none;
      }

      code {
        color: var(--text-primary);
      }
    }

    .add-allowlist-form label {
      color: var(--text-secondary);
    }

    .allowlist-banner {
      &[data-kind='warn'] {
        background: oklch(from var(--color-warning) l c h / 0.15);
        color: var(--color-warning);
      }
      &[data-kind='error'] {
        background: oklch(from var(--color-error) l c h / 0.15);
        color: var(--color-error);
      }
    }

    /* Kind = what the entry admits. EMAIL is a single address (narrower
       scope, lower-key colour); DOMAIN admits a whole organisation. */
    .kind-chip {
      &.kind-chip--email {
        background: oklch(from var(--accent-secondary, var(--accent-primary)) l c h / 0.15);
        color: var(--accent-secondary, var(--accent-primary));
      }
      &.kind-chip--domain {
        background: oklch(from var(--accent-primary) l c h / 0.15);
        color: var(--accent-primary);
      }
    }

    /* Status = lifecycle state of the row. Active → green; expired →
       neutral grey (informational, not a problem); revoked → red. */
    .status-chip {
      &.status-chip--active {
        background: oklch(from var(--color-success) l c h / 0.15);
        color: var(--color-success);
      }
      &.status-chip--expired {
        background: oklch(from var(--text-secondary) l c h / 0.15);
        color: var(--text-secondary);
      }
      &.status-chip--revoked {
        background: oklch(from var(--color-error) l c h / 0.15);
        color: var(--color-error);
      }
    }

    .allowlist-revoke-form .text-button {
      color: var(--accent-primary);

      &:hover {
        background: oklch(from var(--accent-primary) l c h / 0.1);
      }
    }
  }
}