/* ============================================
   WORKSPACES PAGE (/companies) + shared role chips + workspace switcher
   ============================================
   The members page (/companies/{id}/members) has its own file
   (members.css) since it moved to the two-column settings layout;
   `.role-chip` stays here because both pages render it.
   ============================================
   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: 12px;
      transition:
        border-color 0.15s ease-out,
        background 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;

      .empty-state-hint {
        font-size: var(--fs-small);
        max-inline-size: 44ch;
      }
    }
  }

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

/* --- 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 — flat enterprise card surface (matches the position-detail
     card recipe) with a subtle accent lift on hover */
  .companies-page {
    .workspace-card {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
      backdrop-filter: blur(8px);
      border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
      color: var(--text-primary);

      /* Lift 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.35);
        background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
      }
    }

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