/* Secretariat-local sidebar extensions.
 *
 * Canonical .sb-* base rules now live in shared/style/sidebar.css,
 * linked in index.html before this file. Only secretariat-specific
 * chrome stays here. All stripped rules are provided by shared.
 *
 * Kept locally:
 *   .sb-logo           — secretariat-specific logo element
 *   .sb-icon-btn       — header action button (26px, secretariat-only)
 *   .sb-divider-strong — heavier divider variant (not in shared)
 *   .sb-item specificity patch — .sidebar .sb-item higher-specificity
 *                         selector overrides legacy .sidebar a rules
 *                         still in style.css; also sets focus-visible
 *   .sb-collapsed — collapse-button label hiding + narrow shell
 *   Mobile drawer      — @media (max-width:960px) fixed drawer +
 *                         .sb-mobile-open + .sb-overlay
 *
 * DEVIATION: .sidebar .sb-item.active uses border-left: 3px (vs
 * shared's 2px). Kept intentionally — secretariat's design spec uses
 * a slightly heavier indicator. The .sidebar prefix specificity also
 * guards against legacy .sidebar a rules in style.css.
 */

/* ── Logo (secretariat-specific element) ─────────────────────── */

/* sb-logo: not provided by shared; keep as-is. */
.sb-logo {
  flex-shrink: 0;
  border-radius: var(--radius-xs);
}

/* ── Header action button (secretariat-only, 26px) ───────────── */

/* KEEP: .sb-icon-btn is secretariat-only chrome (shared API doc lists it
 * under secretariat). */
.sb-icon-btn {
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  color: var(--g3);
  font-size: var(--fs-md);
  cursor: pointer;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--dur-normal), background var(--dur-normal);
  padding: 0;
  flex-shrink: 0;
}
.sb-icon-btn:hover {
  color: var(--y);
  background: rgba(255, 255, 255, 0.1);
}
.sb-icon-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Nav gap override ─────────────────────────────────────────── */

/* Shared .sb-nav has no gap; secretariat adds 0.15rem between items. */
.sb-nav {
  gap: 0.15rem;
}

/* ── Heavier divider variant (not in shared) ──────────────────── */

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

/* ── Collapsed state ──────────────────────────────────────────── */

/* KEEP: .sb-collapsed — secretariat's collapse-button chrome.
 * Shared does not provide a collapsed variant. */
.sidebar.sb-collapsed {
  width: 52px;
  min-width: 52px;
}
.sidebar.sb-collapsed .sb-logo-label {
  display: none;
}
.sidebar.sb-collapsed .sb-nav-group-label {
  display: none;
}
.sidebar.sb-collapsed .sb-item {
  padding: 0.45rem;
  justify-content: center;
  font-size: var(--fs-lg);
}
.sidebar.sb-collapsed .sb-item.active,
.sidebar.sb-collapsed .sb-item.on {
  padding-left: 0.45rem;
  border-left: 0;
  border-right: 3px solid var(--y);
}
.sidebar.sb-collapsed .sb-label {
  display: none;
}
.sidebar.sb-collapsed .sb-divider {
  margin: 0.25rem 0.35rem;
}
.sidebar.sb-collapsed .sb-header {
  justify-content: center;
  padding: 0.55rem 0.4rem;
  overflow: hidden;
}
.sidebar.sb-collapsed .sb-header img.sb-logo {
  display: none;
}
.sidebar.sb-collapsed .sb-header-actions {
  gap: 0;
}
.sidebar.sb-collapsed .sb-user {
  padding: 0.5rem;
  justify-content: center;
}

/* ── Mobile drawer (<960px, secretariat's breakpoint) ─────────── */

/* KEEP: secretariat's drawer mechanism (fixed + transform slide-in)
 * differs from matos+campscout. .sb-mobile-open + .sb-overlay live
 * here, not in shared. */
@media (max-width: 960px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform var(--dur-normal) ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
  }
  .sidebar.sb-mobile-open {
    transform: translateX(0);
  }
  /* In mobile, the collapsed bar is fully hidden — the hamburger toggle
   * (lives in topbar.js) drives sb-mobile-open. */
  .sidebar.sb-collapsed:not(.sb-mobile-open) {
    transform: translateX(-100%);
  }
  .sb-icon-btn {
    width: 44px;
    height: 44px;
  }
}