/*
 * Sidebar company switcher — a separate component file because the
 * switcher composes two surfaces: a trigger pinned at the top of the
 * sidebar AND an overlay panel that escapes the sidebar's overflow
 * context. Keeping it out of `sidebar.css` keeps each file focused on
 * one DOM subtree.
 *
 * The trigger is a `<button>` driven by a Stimulus controller
 * (`company_switcher_controller.js`). Open / closed state lives on the
 * controller root (`data-company-switcher-open-value`) and on the
 * trigger's `aria-expanded`; CSS reads `[aria-expanded="true"]` on the
 * trigger for the open-state hover treatment and a rotated chevron.
 *
 * The panel uses `position: fixed` with `inset-inline-start: 17rem` so
 * it sits flush against the sidebar's right edge without being clipped
 * by the sidebar's `overflow-y: auto`. On mobile it is hidden — the
 * mobile drawer swaps the drawer's own content to the picker view
 * instead.
 */

@layer components {
  .sidebar__company-switcher {
    /* Width of the floating panel — wider than the sidebar so the
       cards have breathing room. */
    --company-switcher-panel-width: 20rem;

    /* Distance from the page's left edge to the panel's left edge.
       Matches the sidebar's column width so the panel sits flush
       against the sidebar's right edge. Synced manually with
       `--page-with-sidebar-width` in `page-with-sidebar.css`; no
       cross-component CSS-variable inheritance pattern exists yet. */
    --company-switcher-panel-offset: 17rem;

    /* Hairline border around the panel + each card. No system
       border-width scale yet — component-local literal. */
    --company-switcher-border-size: 1px;

    /* Uppercase eyebrow tracking — used by the panel heading and
       the "Current" meta label on the card. No system letter-spacing
       scale yet (matches the sidebar's component-local choice). */
    --company-switcher-eyebrow-tracking: 0.06em;

    margin: 0 0 var(--space-5);
    padding: 0;
    position: relative;
  }

  .sidebar__company-switcher-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    width: 100%;
    padding: var(--space-2) var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-slate-800);
    font: inherit;
    font-size: var(--text-13);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-out);
  }

  /* Hover — slate-200, matching the user-menu trigger pattern at the
   * bottom of the sidebar. Both identity rows (company at the top,
   * user at the bottom) get the same quieter slate-200 hover; the nav
   * links between them get the brighter white hover. The column has a
   * top/bottom = identity vs middle = navigation visual hierarchy. */
  .sidebar__company-switcher-trigger:hover,
  .sidebar__company-switcher-trigger:focus-visible {
    background: var(--color-slate-200);
  }

  .sidebar__company-switcher-trigger:focus-visible {
    outline: var(--focus-ring-size) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  .sidebar__company-switcher-trigger[aria-expanded="true"] {
    background: var(--color-slate-200);
  }

  /* Company avatar — rounded square (workspaces / legal entities,
     not people). The user-menu avatar at the bottom of the sidebar
     stays circular because it represents a user identity. Used by
     both the trigger and the cards inside the panel. */
  .sidebar__company-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-sm);
    background: var(--color-slate-200);
    color: var(--color-slate-800);
    font-size: var(--text-xs);
    font-weight: 600;
  }

  .sidebar__company-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar__company-switcher-chevron {
    flex: 0 0 auto;
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-slate-500);
    transition: transform var(--duration-base) var(--ease-out);
  }

  .sidebar__company-switcher-trigger[aria-expanded="true"] .sidebar__company-switcher-chevron {
    transform: rotate(90deg);
  }

  /* Panel — sits to the right of the sidebar as a fixed overlay so it
     escapes the sidebar's overflow:auto / sticky context. Hidden by
     default; the Stimulus controller toggles the `hidden` attribute. */
  .sidebar__company-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-start: var(--company-switcher-panel-offset);
    width: var(--company-switcher-panel-width);
    padding: var(--space-4);
    background: var(--color-slate-50);
    border-right: var(--company-switcher-border-size) solid var(--color-border);
    overflow-y: auto;
    z-index: var(--z-popup);
  }

  .sidebar__company-panel[hidden] {
    display: none;
  }

  .sidebar__company-panel-heading {
    font-size: var(--text-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--company-switcher-eyebrow-tracking);
    color: var(--color-text-body);
    margin: 0 0 var(--space-3);
    padding: 0 var(--space-2);
  }

  /* Back-arrow row at the top of the panel — visible on mobile only,
     where the picker view takes over the drawer's slot and the user
     needs a way to return to the sidebar nav. Desktop hides it (the
     fixed panel sits next to the sidebar; closing is a re-tap of the
     trigger). */
  .sidebar__company-panel-back {
    display: none;
  }

  .sidebar__company-panel-back-icon {
    flex: 0 0 auto;
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-slate-500);
  }

  .sidebar__company-panel-back-label {
    font-size: var(--text-13);
    font-weight: 600;
  }

  .sidebar__company-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Company card — white surface that pops out of the slate-50
     panel. Cards are visually identical; the current company is
     marked by a single border-colour change to indigo-600, so the
     only visual difference is "selected" not "different design." */
  .sidebar__company-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    background: var(--color-white);
    border: var(--company-switcher-border-size) solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-13);
    text-align: left;
    color: var(--color-slate-800);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-out);
  }

  /* Hover — slate-200 background, matches the user-menu trigger hover.
     The card border stays put so the current-card indigo border is
     not washed out when the user hovers it. */
  .sidebar__company-card:hover,
  .sidebar__company-card:focus-visible {
    background: var(--color-slate-200);
    text-decoration: none;
    color: var(--color-slate-800);
  }

  .sidebar__company-card:focus-visible {
    outline: var(--focus-ring-size) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  .sidebar__company-card--current {
    border-color: var(--color-indigo-600);
  }

  .sidebar__company-card-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }

  .sidebar__company-card-meta {
    flex: 0 0 auto;
    font-size: var(--text-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--company-switcher-eyebrow-tracking);
    color: var(--color-indigo-600);
  }


  /* Mobile — at the same breakpoint the layout shell switches to the
   * off-canvas drawer pattern, the company picker swaps from a side
   * overlay (desktop) to a content-replacement inside the drawer
   * slot. The back-arrow row at the top becomes visible so the user
   * can return to the sidebar nav. Lives here (next to the desktop
   * defaults) so the cascade tie resolves cleanly — sibling rules in
   * `page-with-sidebar.css` load alphabetically EARLIER and would
   * silently lose to these. Keep the breakpoint literal in sync with
   * `page-with-sidebar.css`'s `@media (max-width: 900px)`. */
  @media (max-width: 900px) {
    /* The drawer has `transform: translateX(0)` when open, which
     * establishes a containing block for its fixed-positioned
     * descendants. So `position: fixed` on the panel resolves
     * relative to the drawer's box, NOT the viewport. Fill the
     * drawer exactly: inset:0 + width:100% gives the panel the same
     * dimensions as the drawer (which is itself sized correctly via
     * its own fixed positioning in page-with-sidebar.css). The panel
     * covers the trigger row visually; the back-row at the top of
     * the panel becomes the way to return to the sidebar view. */
    .sidebar__company-panel {
      inset: 0;
      width: 100%;
      max-height: none;
      border-right: 0;
    }

    /* Back-navigation row at the top of the picker on mobile. Sits
     * inside the panel's normal padding (same horizontal alignment as
     * the cards below — no negative margin trick). No hover background
     * and no bottom divider — the row reads as quiet navigation
     * chrome, not a separate card. Focus outline stays for keyboard
     * users. */
    .sidebar__company-panel-back {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      width: 100%;
      padding: var(--space-3);
      margin: 0 0 var(--space-2);
      border: 0;
      background: transparent;
      color: var(--color-slate-800);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .sidebar__company-panel-back:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
      border-radius: var(--radius-sm);
    }

    /* The heading is redundant on mobile (the back-arrow row already
     * says "Switch company"). Hide it to avoid the duplicate label. */
    .sidebar__company-panel-heading {
      display: none;
    }
  }
}