/* ============================================
   ADMIN SIGN-IN ALLOWLIST (/admin/allowlist)
   ============================================
   Same layering convention as members.css / workspaces.css:
   - @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
   (sign-in tiers explainer + entries table + add-entry form +
   status / kind chips).
   ============================================ */

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

    & > section,
    & > aside {
      /* Wider than the workspace pages because this table has 8 columns —
         narrower than the page chrome (~1440px in the layout) so the
         content still reads as a column rather than a page wash. */
      max-inline-size: 1280px;
      margin-block-end: var(--space-xl);
      position: relative;
      z-index: 1;
    }

    .section-head {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-block-end: var(--space-md);

      h2 {
        font-size: var(--fs-body);
        margin: 0;
      }

      .section-icon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        inline-size: 28px;
        block-size: 28px;
        border-radius: 8px;
      }

      .count-pill {
        padding: var(--space-3xs) var(--space-sm);
        border-radius: 100px;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-medium);
      }
    }

    .card {
      padding: var(--space-lg);
      border-radius: 12px;
    }

    .tier-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-lg);
      font-size: var(--fs-xsmall);

      strong {
        display: block;
        font-size: var(--fs-small);
        font-weight: var(--fw-semibold);
        margin-block-end: var(--space-4xs);
      }
    }

    .table-container {
      overflow-x: auto;
      border-radius: 12px;
    }

    .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);
        white-space: nowrap;
      }

      /* 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;
      }

      .actions-cell {
        text-align: end;
        white-space: nowrap;
      }

      .empty-row td {
        text-align: center;
        padding-block: var(--space-lg);
        font-size: var(--fs-small);
      }
    }

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

      .field-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);

        label {
          font-size: var(--fs-small);
          font-weight: var(--fw-medium);
        }

        input,
        select {
          padding: var(--space-sm) var(--space-md);
          border-radius: 10px;
          font-size: var(--fs-small);
        }
      }
    }

    .form-hint {
      margin-block-start: var(--space-md);
      font-size: var(--fs-xsmall);
    }

    .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".
       The background/border resets live in the theme layer (color concern). */
    .allowlist-revoke-form .text-button {
      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 and the tiers 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;
      }

      .tier-list {
        grid-template-columns: 1fr;
      }
    }
  }
}

@layer theme {
  .admin-allowlist-page {
    .section-head {
      .section-icon {
        background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
        color: var(--accent-primary);
      }

      .count-pill {
        background: light-dark(
          oklch(from var(--accent-primary) l c h / 0.08),
          oklch(from var(--accent-primary) l c h / 0.12)
        );
        border: 1px solid
          light-dark(
            oklch(from var(--accent-primary) l c h / 0.2),
            oklch(from var(--accent-primary) l c h / 0.25)
          );
        color: var(--accent-primary);
      }
    }

    .card {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
    }

    .tier-list {
      color: var(--text-secondary);

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

    .table-container {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      backdrop-filter: blur(8px);
    }

    .entries-table {
      th {
        background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
        color: var(--text-secondary);
        border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      }

      td {
        border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.04);
      }

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

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

      /* Revoked / expired rows stay listed for the audit trail but read
         as history, not as live grants. */
      tbody tr:has(.status-chip--revoked) td,
      tbody tr:has(.status-chip--expired) td {
        color: var(--text-secondary);

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

      .empty-row td {
        color: var(--text-secondary);
      }
    }

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

    .form-hint {
      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 {
      background: none;
      border: none;
      color: var(--accent-primary);

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