/*
 * Sidebar — primary navigation.
 *
 * One CSS, one HTML partial, many contexts (app, settings, identity,
 * staff, styleguide). Visual states: default, hover (:hover), keyboard
 * focus (:focus-visible), and active (aria-current=page).
 *
 * Recessed against a white main column — the sidebar paints `slate-50`
 * so the page reads as the "work surface" and the column reads as a
 * quiet index. Width and recess are owned by the layout shell
 * (`page-with-sidebar.css`); this file owns the column's contents.
 *
 * Sticky on desktop so it stays visible while the main column scrolls;
 * the mobile drawer pattern lives in `page-with-sidebar.css` (the layout
 * shell hosts both the column and the top bar and orchestrates the
 * off-canvas slide).
 */

@layer components {
  .sidebar {
    --sidebar-gutter: var(--space-2);

    /* Component-local tokens reading the system palette. Text leads at
       slate-800; the active state shifts both text and icon to
       indigo-600 with no background tint (the hover→white box pattern
       carries the click affordance). */
    --sidebar-text:        var(--color-slate-800);
    --sidebar-active-text: var(--color-indigo-600);
    --sidebar-eyebrow:     var(--color-text-body);

    /* Uppercase eyebrow tracking — used by group-title. No system
       letter-spacing scale yet; declared component-locally. */
    --sidebar-eyebrow-tracking: 0.06em;

    /* Icon dimensions — 1rem for nav-link / chevron icons, 1.5rem
       for the user-menu avatar. Component-local because icon size
       isn't spacing and there's no system icon-size scale. */
    --sidebar-icon-size:   1rem;
    --sidebar-avatar-size: 1.5rem;

    /* Hairline footer divider — 1px border-width; no system
       border-width scale yet. */
    --sidebar-border-size: 1px;

    box-sizing: border-box;
    padding: var(--space-6) var(--space-3);
    font-size: var(--text-13);
    color: var(--sidebar-text);
    /* Flex column so the footer slot can use `margin-top: auto` to
       stick to the bottom regardless of how tall the nav is. */
    display: flex;
    flex-direction: column;
  }

  .sidebar__title {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sidebar-eyebrow-tracking);
    color: var(--color-text-heading);
    margin: 0 0 var(--space-5);
    padding: 0 var(--sidebar-gutter);
  }

  .sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .sidebar__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }

  .sidebar__group-title {
    font-size: var(--text-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--sidebar-eyebrow-tracking);
    color: var(--sidebar-eyebrow);
    margin: 0 0 var(--space-1-5);
    padding: 0 var(--sidebar-gutter);
  }

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

  .sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--sidebar-gutter);
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
  }

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

  /* Unread-count badge — a small pill pinned to the right of the label.
     The span is always rendered (so Turbo Stream `replace` broadcasts
     always have a target id) but collapses to nothing via `:empty` when
     the count is zero. Uses the indigo primary token so it inherits the
     brand color chosen by the CEO. */
  .sidebar__link-badge {
    /* Badge dimensions — the pill is 1.25rem tall and 1.25rem min-wide
       so a single-digit count reads as a circle; multi-digit counts
       elongate it. Component-local because it's a sidebar-specific
       affordance, not a system pill. */
    --sidebar-badge-size: 1.25rem;

    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sidebar-badge-size);
    height: var(--sidebar-badge-size);
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--text-11);
    font-weight: 600;
    line-height: var(--leading-none);
  }

  .sidebar__link-badge:empty {
    display: none;
  }

  .sidebar__link-icon {
    flex: 0 0 auto;
    width: var(--sidebar-icon-size);
    height: var(--sidebar-icon-size);
    color: var(--color-slate-500);
    transition: color var(--duration-base) var(--ease-out);
  }

  /* Hover — the box brightens to white. Reads as "the row jumps
     forward" against the slate-50 column: a pre-active feel that hints
     at where a click will land. */
  .sidebar__link:hover,
  .sidebar__link:focus-visible {
    background: var(--color-white);
    text-decoration: none;
  }

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

  /* Current page — persistent, not transient like :hover. Text and
     icon both shift to indigo-600 (no background tint). On an
     active+hovered row, the row gets the white hover bg with indigo
     text on top — consistent with how every other row reacts to
     hover. */
  .sidebar__link[aria-current="page"] {
    color: var(--sidebar-active-text);
  }

  .sidebar__link[aria-current="page"] .sidebar__link-icon {
    color: var(--sidebar-active-text);
  }

  /* Top-pinned utility list — single tier of items rendered with no
     group heading, appearing at the very top of the nav. Use for
     "return to…" back-links. */
  .sidebar__list--top {
    margin-bottom: var(--space-4);
  }

  /* Bottom-pinned utility list — single tier of items rendered with no
     group heading, hugging the bottom of the nav just above the footer
     divider. Use for Settings, Help, etc. */
  .sidebar__list--bottom {
    margin-top: auto;
  }

  /* Footer — bottom-anchored slot that holds the user menu and anything
     else that should hug the very bottom. */
  .sidebar__footer {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: var(--sidebar-border-size) solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }

  /* When `bottom_items` is rendered, IT pins to the bottom; the footer
     just follows behind it without competing for the auto margin. */
  .sidebar__list--bottom + .sidebar__footer {
    margin-top: var(--space-2);
  }

  /* User menu — sidebar-specific trigger row styling. The dropdown
     panel + items are inherited from `dropdown.css`; this file only
     owns the trigger appearance (avatar + name + chevron). */
  .sidebar__user-menu {
    margin-top: var(--space-1-5);
  }

  .sidebar__user-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--sidebar-gutter);
    border-radius: var(--radius-md);
    color: var(--sidebar-text);
    transition: background-color var(--duration-base) var(--ease-out);
    cursor: pointer;
    list-style: none;
  }

  /* Hide the native disclosure marker (the small triangle Safari /
     Chrome render on <summary>). Trigger class sits ON the summary
     element so the user-trigger selector itself is the target — the
     prior `> summary:hover .sidebar__user-trigger` shape used a
     descendant selector that never matched. */
  .sidebar__user-trigger::-webkit-details-marker,
  .sidebar__user-trigger::marker {
    display: none;
    content: "";
  }

  /* Hover — slate-200 box. Deliberately different from the nav-link
     hover (which goes to white): the user menu sits at the very
     bottom of the column and gets a quieter, recess-aware hover that
     reads as "this row is interactive" without the same "row jumps
     forward" affordance the nav links use. */
  .sidebar__user-trigger:hover,
  .sidebar__user-trigger:focus-visible {
    background: var(--color-slate-200);
  }

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

  .sidebar__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sidebar-avatar-size);
    height: var(--sidebar-avatar-size);
    /* `50%` is literally circular regardless of size — it doesn't
       map onto the `--radius-full` (9999px pill) token. */
    border-radius: 50%;
    object-fit: cover; /* crop an uploaded photo to the circle */
    background: var(--color-slate-200);
    color: var(--color-slate-800);
    font-size: var(--text-xs);
    font-weight: 600;
  }

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

  .sidebar__user-chevron {
    flex: 0 0 auto;
    width: var(--sidebar-icon-size);
    height: var(--sidebar-icon-size);
    color: var(--color-slate-500);
  }
}