/* SLE-T7-sidebar — canonical sidebar primitive per .sb-* API.
 *
 * Used by all three apps (campscout / matos / secretariat). The shell,
 * header, nav-list, item, and suite app-launcher blocks are canonical.
 * Per-app extensions stay in each app's local CSS:
 *
 *   campscout  — .sb-camp-item, .sb-badge, .sb-cmdk-item, .sb-new-camp,
 *                .sb-collapsed (collapse-button behavior), mobile drawer
 *   matos      — .btn-icon-dark, .app-shell overrides (avatar 32px, tighter
 *                padding), mobile hide
 *   secretariat — .sb-icon-btn, .sb-collapsed,
 *                 .sb-mobile-open drawer, responsive breakpoint
 *
 * Active state supports both .on (campscout / matos convention) and
 * .active (secretariat alias) for safety.
 *
 * Depends on tokens.css (--bk, --bk3, --y, --y-rgb, --wh, --g1..g4,
 * --sp-*, --fs-*, --fw-*, --radius-*, --dur-*, --shadow-*, --sb-w,
 * --sp-1h, --focus-ring).
 */

/* ── Shell ────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sb-w);
  min-width: var(--sb-w);
  background: var(--bk);
  color: var(--white);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  /* The sidebar always renders on the dark `--bk` surface regardless of
   * prefers-color-scheme. Light-mode `--g3` (#b8b5ab) / `--g4` (#6e6b62)
   * are hairline + body-on-light tones — both fail WCAG AA on the dark
   * background (group-label + copyright land at 3.45:1). Re-anchor the
   * tokens inside the sidebar scope to the dark-mode pair so axe-core's
   * desktop pass is clean. Mirrors tokens.css's dark-mode block. */
  --g3: #9c9c9c;
  --g4: #c8c8c8;
}

/* ── Header (applauncher + logo + title + actions) ────────────── */

.sb-header {
  padding: 0.55rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-bottom: 1px solid var(--bk3);
  flex-shrink: 0;
  position: relative;
}

.sb-header-info {
  flex: 1;
  min-width: 0;
}

.sb-header-title {
  color: var(--white);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-header-group {
  font-size: var(--fs-xs);
  color: #b5b3aa;
  margin-top: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb-header-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}

/* ── App launcher (9-dot) ─────────────────────────────────────── */

.sb-applauncher {
  width: 28px;
  height: 28px;
  background: var(--bk3);
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--dur-normal);
}

.sb-applauncher:hover {
  background: #3a3a3a;
}

.sb-applauncher:active {
  transform: scale(0.96);
}

.sb-applauncher:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.sb-applauncher-dots {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 2px;
}

.sb-applauncher-dots i {
  background: var(--y);
  border-radius: 1px;
  display: block;
}

/* ── App launcher dropdown ────────────────────────────────────── */

.sb-app-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 200;
  width: 300px;
  background: var(--wh);
  color: var(--bk);
  border: 1px solid var(--g2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sb-app-menu[hidden] {
  display: none;
}

.sb-app-menu-hd {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g4);
  padding: 0 var(--sp-1);
}

.sb-app-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.sb-app-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--bk);
  background: var(--g1);
  border: 1px solid transparent;
  transition: background var(--dur-normal), border-color var(--dur-normal);
}

.sb-app-tile:hover {
  background: var(--g2);
}

.sb-app-tile.on {
  border-color: var(--y);
  background: var(--wh);
}

.sb-app-tile .ic {
  font-size: 1.1rem;
  line-height: 1;
}

.sb-app-tile b {
  font-size: var(--fs-md);
  font-weight: 700;
}

.sb-app-tile .m {
  font-size: var(--fs-xs);
  color: var(--g4);
}

/* ── Nav list ─────────────────────────────────────────────────── */

.sb-nav {
  padding: 0.25rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sb-nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.sb-nav-group-label {
  padding: 0.625rem 0.5rem 0.25rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g3);
  margin-top: 0.25rem;
}

/* ── Divider ──────────────────────────────────────────────────── */

.sb-divider {
  height: 1px;
  background: var(--bk3);
  margin: 0.25rem 0.75rem;
}

/* ── Item — link / button base ────────────────────────────────── */

.sb-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1h);
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-radius: 7px;
  border: none;
  background: none;
  color: var(--white);
  font-size: 0.84rem;
  font-weight: var(--fw-regular);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-normal), color var(--dur-normal);
}

.sb-item:hover {
  background: #222;
  color: var(--white);
}

/* Active state: tinted yellow + yellow left border (style-guide canonical).
 * Both .on (campscout / matos) and .active (secretariat) are supported. */
.sb-item.on,
.sb-item.active {
  background: rgb(var(--y-rgb) / 10%);
  color: var(--y);
  border-left: 2px solid var(--y);
  padding-left: calc(0.65rem - 2px);
  font-weight: var(--fw-semibold);
}

.sb-item .ic {
  flex-shrink: 0;
  width: 1.1rem;
  text-align: center;
  font-size: 0.95rem;
}

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

/* focus-visible: handled globally by focus-rings.css (outline-based). */

/* ── Footer chrome (sticks to bottom of sidebar via margin-top:auto) ──── */

/* User block — flex row with avatar + name (or .sb-user-info link wrapper).
 * Sits at the very bottom of .sb-nav or directly in the sidebar flex column. */
.sb-user {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--bk3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* Avatar circle — yellow background, dark text, ~28px. */
.u-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--y);
  color: var(--bk);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  text-decoration: none;
}

/* Name text — ellipsis on overflow. */
.u-name {
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Copyright block at the very bottom. Uses --g4 (re-anchored to the
 * dark palette by the .sidebar scope above) so the small-text WCAG AA
 * threshold (4.5:1) is met without per-rule color tweaks. */
.sb-copyright {
  padding: 0.5rem 1rem 0.6rem;
  font-size: var(--fs-xs);
  color: var(--g4);
  line-height: var(--lh-normal, 1.4);
  flex-shrink: 0;
}
.sb-copyright a {
  color: var(--g4);
  text-decoration: none;
}
.sb-copyright a:hover {
  color: var(--y);
  text-decoration: underline;
}