/* ============================================
   MEMBERS PAGE (/companies/{id}/members)
   ============================================
   Workspace settings: members table, pending invites, invite form,
   danger zone (typed-confirmation delete dialog), and a side panel
   with workspace details + access explainer.

   Split out of workspaces.css (which keeps the switcher, role chips,
   and /companies) when this page moved to the two-column settings
   layout — same convention as the rest of the per-page CSS:
   - @layer components: structural rules only — sizing, positioning,
     grid/flex, padding/margin, transitions, font-size/weight.
   - @layer theme: all color / surface / border-color / background /
     box-shadow / text-color rules. Theme is later in the cascade than
     components, so palette overrides win without specificity wars.
   ============================================ */

/* --- COMPONENTS --- */
@layer components {
  .members-page {
    padding-block: var(--space-xl);
    position: relative;
    /* clip, not hidden: overflow:hidden makes the page root a scroll
       container, which would silently disable the sticky side panel
       (sticky pins to the nearest scroll container, and this box never
       scrolls — the document does). clip clips without that side effect. */
    overflow: clip;

    .detail-back-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      margin-block-end: var(--space-md);
      font-size: var(--fs-small);
      text-decoration: none;
      transition: color 0.15s ease-out;
      position: relative;
      z-index: 1;

      svg {
        flex-shrink: 0;
      }
    }

    .settings-body {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 300px;
      align-items: start;
      gap: var(--space-xl);
      max-inline-size: 1280px;
    }

    .settings-main {
      display: flex;
      flex-direction: column;
      gap: var(--space-xl);
      min-inline-size: 0;
    }

    .settings-side {
      position: sticky;
      inset-block-start: var(--space-xl);
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);

      .card {
        padding: var(--space-md);
      }
    }

    .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;
    }

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

    .members-table,
    .invites-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;
      }

      th {
        font-weight: var(--fw-medium);
        white-space: nowrap;
      }

      /* Long emails without natural break points (e.g.
         very.long.address@subdomain.example.com) would otherwise push the
         table past its container on narrow viewports. */
      td {
        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);
      }
    }

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

    .invite-form {
      display: grid;
      grid-template-columns: 2fr 1fr 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);
        }
      }
    }

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

    .role-legend {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: var(--space-xs) var(--space-md);
      margin-block-start: var(--space-md);
      padding-block-start: var(--space-md);
      font-size: var(--fs-xsmall);

      dt {
        font-weight: var(--fw-semibold);
      }

      dd {
        margin: 0;
      }
    }

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

    /* Subtle text button used inside the pending-invites table for "Revoke".
       The background/border resets live in the theme layer (color concern). */
    .text-button {
      cursor: pointer;
      font-size: var(--fs-small);
      padding: var(--space-xs) var(--space-sm);
      border-radius: var(--wire-radius);
    }

    /* Member row: role chip + inline role editor share one cell (only one is
       visible at a time — JS toggles `hidden`). */
    .member-role-cell {
      .member-role-select {
        padding: var(--space-2xs) var(--space-xs);
        border-radius: 8px;
        font-size: var(--fs-small);
      }
    }

    /* Per-row action buttons sit at the end of the row with a small gap. */
    .member-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--space-2xs);
    }

    .side-kv {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: var(--space-sm) var(--space-md);
      margin: 0;
      font-size: var(--fs-small);

      dt {
        font-weight: var(--fw-medium);
      }

      dd {
        margin: 0;
        min-inline-size: 0;
        overflow-wrap: anywhere;
      }
    }

    .access-notes {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      font-size: var(--fs-xsmall);

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

    .danger-zone-section {
      .card--danger p {
        margin-block-end: var(--space-md);
      }
    }

    .danger-button {
      padding: var(--space-sm) var(--space-lg);
      border-radius: 100px;
      font-size: var(--fs-small);
      font-weight: var(--fw-semibold);
      cursor: pointer;
      transition: background-color 0.15s ease-out;

      &:disabled {
        cursor: not-allowed;
      }
    }

    /* Typed-confirmation dialog for workspace deletion. showModal() puts it
       in the top layer, so the page's overflow:hidden doesn't clip it. */
    .delete-workspace-dialog {
      /* base.css resets every element's margin, which also wipes the UA
         stylesheet's `margin: auto` that centers a top-layer dialog —
         without this the dialog renders pinned to the viewport's top-left. */
      margin: auto;
      max-inline-size: 28rem;
      padding: var(--space-lg);
      border-width: 1px;
      border-style: solid;
      border-radius: var(--wire-radius);

      p {
        margin-block-end: var(--space-md);
      }

      label {
        display: block;
        font-size: var(--fs-small);
        margin-block-end: var(--space-md);

        input {
          display: block;
          inline-size: 100%;
          margin-block-start: var(--space-xs);
          padding: var(--space-sm);
          border-width: 1px;
          border-style: solid;
          border-radius: var(--wire-radius);
          font-size: var(--fs-small);
        }
      }

      .dialog-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-sm);
      }
    }

    @media (max-width: 1100px) {
      .settings-body {
        grid-template-columns: 1fr;
      }

      .settings-side {
        position: static;
      }
    }

    @media (max-width: 640px) {
      .members-table,
      .invites-table {
        font-size: var(--fs-xsmall);

        th,
        td {
          padding: var(--space-xs) var(--space-sm);
        }
      }

      .invite-form {
        grid-template-columns: 1fr;
      }
    }
  }
}

/* --- THEME --- */
@layer theme {
  .members-page {
    .detail-back-link {
      color: var(--text-secondary);

      &:hover {
        color: var(--accent-primary);
      }
    }

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

      .section-icon--danger {
        background: light-dark(
          oklch(from var(--color-error) l c h / 0.06),
          oklch(from var(--color-error) l c h / 0.1)
        );
        color: var(--color-error);
      }

      .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);
    }

    .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);
    }

    .members-table,
    .invites-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;
      }

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

    .section-hint,
    .invite-hint {
      color: var(--text-secondary);
    }

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

    .role-legend {
      border-block-start: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

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

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

    .invite-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);
      }
    }

    .text-button {
      background: none;
      border: none;
      color: var(--accent-primary);

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

    /* Destructive variant for the per-row "Remove" action. */
    .text-button--danger {
      color: var(--color-error);

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

    .member-role-cell .member-role-select {
      background: var(--surface-base);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }

    .side-kv dt {
      color: var(--text-secondary);
    }

    .access-notes {
      color: var(--text-secondary);

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

    /* Danger zone — red-tinted card. CSS here is purely presentational; the
       template's `hidden` attribute hides the section by default and the
       members-page web component un-hides it for OWNERs. Authorization is
       enforced server-side: the delete endpoint rejects non-OWNER callers
       with 403 regardless of what the DOM looks like. */
    .danger-zone-section {
      .card--danger {
        border-color: oklch(from var(--color-error) l c h / 0.3);
        background: oklch(from var(--color-error) l c h / 0.04);

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

    .danger-button {
      background: var(--color-error);
      border: 1px solid var(--color-error);
      color: white;

      &:hover {
        background: oklch(from var(--color-error) calc(l - 0.05) c h);
      }

      /* After :hover so the muted state wins on a disabled-but-hovered
         button (same specificity, later in source). */
      &:disabled {
        background: oklch(from var(--color-error) l c h / 0.45);
        border-color: transparent;
      }
    }

    .delete-workspace-dialog {
      background: var(--surface-elevated);
      border-color: oklch(from var(--color-error) l c h / 0.3);
      color: var(--text-primary);

      &::backdrop {
        background: oklch(0% 0 0 / 0.45);
      }

      h2 {
        color: var(--color-error);
      }

      p,
      label {
        color: var(--text-secondary);
      }

      input {
        background: var(--surface-base);
        border-color: var(--border-color);
        color: var(--text-primary);
      }
    }
  }
}