/* Collapsible left sidebar (claude.ai-style), shared across every page.
   Superseded the old top-right dropdown (.site-menu / .hud-menu, still
   defined in each page's own <style> block, just unused) — see
   sidebar.js for the open/close/persistence behavior this styles.

   Overlay, not push: collapsed is a permanent 48px rail every page
   reserves space for (see the `body { margin-left: ... }` rule below);
   expanded slides a 240px drawer out on top of the page over a scrim,
   rather than reflowing each page's own layout. z-index 49/50 clears the
   highest z-index already in use (.modal-overlay at 40). */

/* Class-scoped, not a bare `body` selector: every page's own inline
   <style> block sets `html, body { margin: 0; ... }` AFTER this
   stylesheet loads in <head>, which would silently cancel a same-
   specificity `body { margin-left }` rule regardless of source order.
   The class bumps specificity so this reliably wins. */
body.has-sidebar {
  margin-left: 48px;
}

#site-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 48px;
  z-index: 50;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.15s ease;
}

#site-sidebar[data-expanded="true"] {
  width: 240px;
}

#site-sidebar-toggle {
  flex-shrink: 0;
  width: 100%;
  height: 48px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
}

#site-sidebar-toggle:hover {
  color: var(--text-primary);
}

#site-sidebar-links {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 2px;
  white-space: nowrap;
}

#site-sidebar-links a {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 3px;
}

/* Confirmed live: the `display: flex` rule above (same ID+tag specificity)
   beats the browser's default `[hidden] { display: none }` UA rule, so a
   link with the `hidden` attribute (e.g. index.html's admin link, toggled
   client-side since that page can't do a server-side `<?php if`) rendered
   visible anyway until this was added. Every other page's conditional
   sidebar links avoid this by omitting the element from the HTML
   entirely via `<?php if ?>` rather than rendering-then-hiding it. */
#site-sidebar-links a[hidden] {
  display: none;
}

#site-sidebar-links a:hover {
  background: var(--page-plane);
}

.sidebar-icon {
  display: inline-block;
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1;
}

.sidebar-label {
  margin-left: 10px;
}

/* Collapsed: hide the label outright (not clipped via overflow, which was
   cutting words off mid-character against the page content below) and
   center the icon in the 48px rail instead of left-aligning it. */
#site-sidebar[data-expanded="false"] .sidebar-label {
  display: none;
}

/* Plain divider between groups of nav links (e.g. above Visual
   Analysis) -- just the border-top, no text label (removed per Craig's
   request: the "Charts" heading stayed visible in the expanded menu
   too, not just the collapsed rail, so it came out of both instead of
   being fixed for one state only). */
.sidebar-section {
  margin: 6px 6px 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

#site-sidebar[data-expanded="false"] #site-sidebar-links a {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

#site-sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(11, 11, 11, 0.45);
}

#site-sidebar-scrim[hidden] {
  display: none;
}
