/* Sidebar nav reorder — Phase 4 of mockup H rollout (2026-06-26).
 *
 * Copied verbatim from:
 *   docs/mockups/dashboard/mockup_h_dashboard_warm.html
 *   lines 39-76 (.sidebar-nav, .sidebar-nav a, .soon-pill, .soon-nav,
 *                .sidebar-section-label)
 *
 * 2026-06-27: refactored to use --sidebar-* theme tokens from
 * static/styles.css so the nav adapts per theme. The mockup's
 * `--sidebar-active` differs per theme (Pro/Slate: white-rgba alpha;
 * Dark: violet-rgba alpha) so a single hardcoded value would only look
 * right in one theme.
 *
 * IMPORTANT: these selectors intentionally collide with the legacy
 * `.sidebar-nav` rules in static/styles.css. The template rewrites the
 * `<nav class="sidebar-nav">` markup to match the mockup (with .nav-icon
 * / .nav-label / .soon-pill children), and this file loads AFTER
 * styles.css so its rules win. Keep the load order in base.html
 * (sidebar_nav.css after styles.css).
 *
 * Fix 3 (2026-06-27): `overflow-x: hidden` added to .sidebar-nav so a
 * long nav label or pill never produces a horizontal scrollbar inside
 * the 220px sidebar column. The outer .sidebar (static/styles.css)
 * already has overflow-x: hidden but this inner scroll container is
 * what actually overflowed on long org names.
 */

/* ============ SIDEBAR NAV ============ */
.sidebar-nav {
  padding: 10px 0;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background 0.1s;
  min-width: 0;
}
.sidebar-nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.sidebar-nav a.active {
  background: var(--sidebar-active);
  border-left-color: var(--sidebar-accent);
  color: var(--sidebar-text-strong);
}
.sidebar-nav a .nav-icon { font-size: 14px; opacity: 0.85; }
.sidebar-nav a .nav-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-nav a .soon-pill {
  background: var(--sidebar-soon-bg);
  color: var(--sidebar-soon-text);
  font-size: 8px; font-weight: 700;
  padding: 1px 5px; border-radius: 6px;
  margin-left: auto;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--sidebar-soon-border);
  flex-shrink: 0;
}
.sidebar-nav a.soon-nav { opacity: 0.7; }
.sidebar-nav a.soon-nav:hover { opacity: 1; }

/* 2026-07-22 (fix): Measure/Estimate/Email "coming soon" placeholders
   (templates/base.html, `.sidebar-nav-soon` <span>s — no href, so
   there's nothing to click into) were styled in the legacy
   static/styles.css instead of here, so they never picked up this
   file's `.sidebar-nav a` rules (font-size 13px/weight 500, the
   var(--sidebar-*) color tokens, border-left placeholder, and the
   .nav-icon/.nav-label sizing below — all scoped to an `a` ancestor)
   and rendered visibly different from the real nav rows above them.
   Mirrors `.sidebar-nav a` + `.soon-nav`'s 0.7 opacity exactly, minus
   the active/hover states a non-interactive span doesn't need.

   `margin: 0 -12px` and `border-radius: 6px` are carried over from
   the LEGACY static/styles.css `.sidebar-nav a` rule too — that file
   loads before this one, so cascade rules it doesn't override (it
   never sets margin/border-radius) still apply to the real `<a>`
   rows on top of this file's rules. Without matching them here the
   soon placeholders sit 12px right of the real rows' left edge. */
.sidebar-nav-soon {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  margin: 0 -12px;
  border-radius: 6px;
  color: var(--sidebar-text);
  font-size: 13px; font-weight: 500;
  border-left: 3px solid transparent;
  min-width: 0;
  opacity: 0.7;
  cursor: not-allowed;
}
.sidebar-nav-soon .nav-icon { font-size: 14px; opacity: 0.85; }
.sidebar-nav-soon .nav-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-section-label {
  padding: 18px 20px 6px;
  font-size: 10px; color: var(--sidebar-section-label);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
}

/* --- Additions outside the mockup CSS, kept minimal and segregated ---
 *
 * Defense-in-depth role gate for the TOOLS section. The server-side
 * template already omits the TOOLS items entirely for non-owner/admin
 * users (gated by sidebar_identity.is_admin_role); when that gate ever
 * leaks, the `.sidebar-nav-tools-hidden` class on the sidebar root
 * CSS-hides any element class-tagged `.tools-only`. Belt + suspenders.
 */
.sidebar-nav-tools-hidden .tools-only { display: none; }