/* ============================================
   WORKSPACES PAGES (/companies + /companies/{id}/members)
   ============================================
   Convention (matches the rest of the per-page CSS in this project):
   - @layer components: structural rules only — sizing, positioning, grid/
     flex, padding/margin, transitions, hover transforms, font-size/weight.
   - @layer theme: all color / surface / border-color / background /
     box-shadow / text-color rules. Theme is later in the cascade than
     components (see base.css `@layer reset, base, components, utilities,
     theme, overrides`), so dark-mode and other palette overrides win
     without selector specificity wars.
   ============================================ */

/* --- COMPONENTS --- */
@layer components {
  /* Workspace switcher — popover anchored under the trigger button. The
     shared `.profile-button` class applies `anchor-name: --profile-btn` to
     both buttons; the id selector below wins specificity to give this one
     its own anchor. Without this the popover defaults to the viewport's
     top-left corner.
     Markup lives in nav.html and lands in a follow-up commit
     ("Add workspace switcher to nav"); these rules are dead until then. */
  #ws-btn {
    anchor-name: --ws-btn;
  }

  #ws-menu {
    position-anchor: --ws-btn;
    position: fixed;
    inset: unset;
    inset-block-start: anchor(bottom);
    inset-inline-end: anchor(right);
    margin-block-start: var(--space-sm);
    padding: var(--space-md);
    border-radius: 12px;
    min-inline-size: 240px;

    /* Animation */
    opacity: 0;
    scale: 0.95;
    transform-origin: top right;
    transition:
      opacity 0.15s ease-out,
      scale 0.15s ease-out,
      display 0.15s allow-discrete;

    &:popover-open {
      opacity: 1;
      scale: 1;

      @starting-style {
        opacity: 0;
        scale: 0.95;
      }
    }

    hr {
      border: none;
      margin-block: var(--space-xs);
    }

    .profile-menu-item {
      display: block;
      padding: var(--space-sm) var(--space-md);
      border-radius: 8px;
      text-decoration: none;
      transition: background 0.15s ease-out;
    }
  }

  /* Shared role chip — small pill used on both pages. */
  .role-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;
  }

  /* /companies — workspace cards as a vertical stack */
  .companies-page {
    padding-block: var(--space-xl);
    position: relative;
    overflow: hidden;

    .workspace-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      max-inline-size: 720px;
      margin-inline: auto;
      position: relative;
      z-index: 1;
    }

    .workspace-card {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: var(--space-md);
      align-items: center;
      padding: var(--space-md) var(--space-lg);
      border-radius: var(--wire-radius);
      transition: border-color 0.15s ease-out;
    }

    .workspace-card-main {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      min-inline-size: 0;
    }

    .workspace-card-title {
      font-size: var(--fs-medium);
      font-weight: var(--fw-semibold);
      text-decoration: none;
    }

    .workspace-domain {
      font-size: var(--fs-xsmall);
    }

    .workspace-members-link {
      font-size: var(--fs-small);
      text-decoration: none;
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-md);
      padding: var(--space-xl);
      text-align: center;
    }
  }

  /* /companies/{id}/members — sectioned vertical layout */
  .members-page {
    padding-block: var(--space-xl);
    position: relative;
    overflow: hidden;

    & > section {
      max-inline-size: 720px;
      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);
      }
    }

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

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

      /* Long emails without natural break points (e.g.
         very.long.address@subdomain.example.com) would otherwise push the
         table past the section bounds on narrow viewports. */
      td {
        overflow-wrap: anywhere;
      }
    }

    /* Belt-and-braces: even with cell-level wrapping, give the
       table-bearing sections a horizontal scroll fallback so a runaway row
       can never force a horizontal scrollbar on the whole page. */
    .members-section,
    .invites-section {
      overflow-x: auto;
    }

    .empty-invites {
      font-style: italic;
      margin-block-start: var(--space-sm);
    }

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

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

    .danger-zone-section 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;
    }
  }

  /* Mobile collapse — fixed grid columns get cramped on narrow viewports.
     640px matches the breakpoint used by company-intel.css, eval-criteria.css,
     and position-brief.css. */
  @media (max-width: 640px) {
    .companies-page .workspace-card {
      grid-template-columns: 1fr;
      gap: var(--space-sm);
    }

    .members-page {
      & > section {
        padding: var(--space-md);
      }

      .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 {
  /* Workspace switcher dropdown */
  #ws-menu {
    background: light-dark(oklch(100% 0 0 / 0.95), oklch(15% 0.02 280 / 0.95));
    backdrop-filter: blur(12px);
    border: 1px solid oklch(from var(--glass-tint) l c h / 0.15);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);

    hr {
      border-top: 1px solid var(--border-color);
    }

    .profile-menu-item {
      color: var(--text-primary);

      &:hover {
        background: var(--surface-elevated);
      }

      &.profile-menu-item--current {
        background: oklch(from var(--accent-primary) l c h / 0.1);
        color: var(--accent-primary);
        font-weight: var(--fw-semibold);
      }
    }
  }

  /* Role chip — base + per-role color variants */
  .role-chip {
    border: 1px solid var(--border-color);
    background: var(--surface-base);
    color: var(--text-primary);

    &.role-chip--owner {
      background: oklch(from var(--accent-warm) l c h / 0.15);
      border-color: oklch(from var(--accent-warm) l c h / 0.4);
      color: oklch(from var(--accent-warm) calc(l + 0.1) c h);
    }
    &.role-chip--admin {
      background: oklch(from var(--accent-primary) l c h / 0.15);
      border-color: oklch(from var(--accent-primary) l c h / 0.4);
      color: oklch(from var(--accent-primary) calc(l + 0.1) c h);
    }
    &.role-chip--editor {
      background: oklch(from var(--color-info) l c h / 0.15);
      border-color: oklch(from var(--color-info) l c h / 0.3);
      color: oklch(from var(--color-info) calc(l + 0.1) c h);
    }
    &.role-chip--viewer {
      background: var(--surface-elevated);
      color: var(--text-secondary);
    }
  }

  /* /companies — workspace card glass + hover glow */
  .companies-page {
    .workspace-card {
      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);
      box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 oklch(from var(--glass-tint) l c h / 0.05);
      color: var(--text-primary);

      /* Glow on hover of any link inside the card — title or "Members →" —
         so the affordance is consistent across both click targets. */
      &:has(a:hover) {
        border-color: oklch(from var(--accent-primary) l c h / 0.5);
        box-shadow: 0 0 16px oklch(from var(--accent-primary) l c h / 0.15);
      }
    }

    .workspace-card-title {
      color: var(--text-primary);

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

    .workspace-domain {
      color: var(--text-secondary);
    }

    .workspace-members-link {
      color: var(--text-secondary);

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

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

  /* /companies/{id}/members — section glass + tables + form colors */
  .members-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);
    }

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

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

    .invite-form label {
      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 {
      color: var(--accent-primary);

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

    /* Danger zone — red-tinted section + button. 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 {
      border-color: oklch(from var(--color-error) l c h / 0.3);
      background: oklch(from var(--color-error) l c h / 0.04);

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

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