/*
 * 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 (.is-active or aria-current=page).
 *
 * Sticky on desktop so it stays visible while the main column scrolls.
 * Collapses into a non-sticky block at narrow widths — we'll add a
 * proper mobile disclosure pattern when we build the first real mobile
 * view; for now it just flows above the content.
 */

@layer components {
  .sidebar {
    --sidebar-gutter: 0.5rem;

    box-sizing: border-box;
    padding: 1.5rem 0.75rem;
    font-size: 0.875rem;
    /* 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: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-heading);
    margin: 0 0 1.25rem;
    padding: 0 var(--sidebar-gutter);
  }

  .sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .sidebar__group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .sidebar__group-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sidebar-text);
    margin: 0 0 0.375rem;
    padding: 0 var(--sidebar-gutter);
  }

  .sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4375rem var(--sidebar-gutter);
    border-radius: 0.375rem;
    color: var(--sidebar-text);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
  }

  .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 {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 0.75rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
  }

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

  .sidebar__link-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--sidebar-icon);
    transition: color 120ms ease;
  }

  /* Hover — only the background changes. Text and icon stay. */
  .sidebar__link:hover,
  .sidebar__link:focus-visible {
    background: var(--sidebar-hover-bg);
    text-decoration: none;
  }

  .sidebar__link:focus-visible {
    outline: 2px solid var(--color-blue-500);
    outline-offset: 1px;
  }

  /* Current page — persistent, not transient like :hover. Text and
     icon both go primary (brand indigo). */
  .sidebar__link.is-active,
  .sidebar__link[aria-current="page"] {
    color: var(--color-primary);
  }

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

  /* 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: 1rem;
  }

  /* 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: 0.75rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  /* 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: 0.5rem;
  }

  /* 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: 0.375rem;
  }

  .sidebar__user-trigger {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem var(--sidebar-gutter);
    border-radius: 0.5rem;
    color: var(--sidebar-text);
    transition: background-color 120ms ease;
  }

  .sidebar__user-menu > summary:hover .sidebar__user-trigger,
  .sidebar__user-menu > summary:focus-visible .sidebar__user-trigger {
    background: var(--sidebar-hover-bg);
  }

  .sidebar__user-menu > summary:focus-visible {
    outline: 2px solid var(--color-blue-500);
    outline-offset: 1px;
    border-radius: 0.5rem;
  }

  .sidebar__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.75rem;
    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: 1rem;
    height: 1rem;
    color: var(--sidebar-icon);
  }
}

/* ================================================================== *
 * Page shell that pairs a sidebar with a main column. Kept here (next
 * to the sidebar styles) because the two are always used together.
 * ================================================================== */

@layer components {
  .page-with-sidebar {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    min-height: 100vh;
  }

  .page-with-sidebar > .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--color-border);
    background: var(--color-white);
  }

  .page-with-sidebar__main {
    min-width: 0;
  }

  @media (max-width: 768px) {
    .page-with-sidebar {
      grid-template-columns: 1fr;
    }

    .page-with-sidebar > .sidebar {
      position: static;
      height: auto;
      border-right: 0;
      border-bottom: 1px solid var(--color-border);
    }
  }
}