/* ── Counters Studio – Sidebar Navigation ──────────────────────────
   Vertical accordion nav inside the left sidebar.
   Hover opens a panel that slides DOWN, indented right for depth.
   ─────────────────────────────────────────────────────────────────── */

/* ─── Sidebar brand ──────────────────────────────────────────────── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-brand-logo { width: 32px; height: 32px; display: block; flex-shrink: 0; }

/* Hide-sidebar button (small ‹ at the right edge of the brand row).
   Clicking it sets the sidebar's display to none and reveals the
   re-expand tab on the left edge of the viewport. */
.sidebar-hide-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .12s, border-color .12s, background .12s;
}
.sidebar-hide-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--surface2);
}

/* Re-expand tab — fixed to the left edge of the viewport, shown only
   while the sidebar is hidden. Vertical "Counters Studio" logotype +
   small chevron pointing right. Independent of the sidebar layout so
   toggling can't shift it around. */
.sidebar-show-tab {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 100;
  width: 38px;
  min-height: 260px;
  background: var(--surface, #161b22);
  border: 1px solid var(--border, #30363d);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  color: var(--text-muted, #7d8590);
  box-shadow: 2px 0 8px rgba(0,0,0,0.35);
  transition: color .12s, background .12s, border-color .12s;
}
.sidebar-show-tab[hidden] { display: none; }
.sidebar-show-tab:hover {
  color: var(--text, #e6edf3);
  background: var(--surface2, #0d1117);
  border-color: var(--text-muted, #7d8590);
}
.sst-logo { width: 24px; height: 24px; display: block; flex-shrink: 0; }
.sst-name {
  font: 600 12px ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* Vertical text reading top-to-bottom (rotate the whole writing
     direction, then flip 180° so it reads bottom-up like book spines). */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sst-arrow {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.sidebar-brand-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ─── Nav container ──────────────────────────────────────────────── */
.sidebar-nav { flex-shrink: 0; }

/* ─── Top-level item ─────────────────────────────────────────────── */
.snav-item {
  border-bottom: 1px solid var(--border);
  position: relative;   /* anchor for absolute dropdown */
}

/* Hover label */
.snav-label {
  display: flex;
  text-decoration: none;       /* on v2 the label is an <a>; kill browser underline */
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  user-select: none;
  transition: color .12s, background .12s;
}
.snav-label-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  opacity: .9;
}
.snav-label-text {
  flex: 1;
}
.snav-item.is-open > .snav-label {
  color: var(--text);
  background: rgba(88,166,255,.06);
}

/* Chevron rotates when open */
.snav-chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .22s cubic-bezier(.2,.8,.4,1), color .12s;
}
.snav-item.is-open > .snav-label .snav-chevron {
  transform: rotate(90deg);
  color: var(--accent);
}

/* ─── Dropdown panel – slides down when .is-open, stays until mouse hits canvas */
.snav-dropdown {
  position: absolute;
  top: 100%;
  left: 10px;
  right: 4px;
  z-index: 200;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  list-style: none;
  padding: 0 0 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
}
.snav-item.is-open > .snav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .2s ease, transform .2s ease, visibility 0s 0s;
}

/* ─── Dropdown row ───────────────────────────────────────────────── */
.snav-dd-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  text-decoration: none;       /* kill browser <a> underline on submenu rows */
  transition: background .1s, color .1s;
}
.snav-dd-row:hover {
  background: rgba(88,166,255,.08);
  color: var(--accent);
}
.snav-dd-row:hover .nav-num { color: var(--accent); opacity: 1; }

/* ─── Separator ──────────────────────────────────────────────────── */
.snav-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ─── Sub-menu trigger ───────────────────────────────────────────── */
.snav-sub-trigger { position: relative; }
.snav-sub-arrow {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  padding-left: 8px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .18s, color .1s;
}
.snav-sub-trigger.is-open > .snav-dd-row .snav-sub-arrow {
  transform: rotate(90deg);
  color: var(--accent);
}

/* ─── Sub-dropdown – opens on hover of its row, closes with parent ───── */
.snav-sub-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s cubic-bezier(.2,.8,.4,1);
  margin-left: 10px;
  border-left: 2px solid var(--accent-dim);
  list-style: none;
  padding: 0;
}
.snav-sub-trigger.is-open > .snav-sub-dropdown { max-height: 220px; }

/* Edge-types panel overrides – taller + scrollable */
.snav-sub-trigger.is-open > .snav-et-panel {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.snav-et-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 5px 12px;
  border-bottom: 1px solid var(--border);
}
.snav-et-hint {
  font-size: 10px;
  color: var(--text-muted);
  padding: 3px 12px 5px;
}
.snav-sub-dropdown .snav-dd-row {
  font-size: 12px;
  padding: 7px 10px;
  color: var(--text-muted);
}
.snav-sub-dropdown .snav-dd-row:hover {
  background: rgba(88,166,255,.08);
  color: var(--accent);
}

/* Edge Types trigger: highlight when paint mode is on (an edge type
   is the active painter, OR the Erase sentinel is active). Driven by
   draw.js → updatePaintButton(). The accent ring makes the trigger
   visible at a glance even when the submenu is closed. */
.snav-sub-trigger.et-active > .snav-dd-row {
  color: var(--accent);
  background: rgba(88,166,255,.10);
  box-shadow: inset 2px 0 0 var(--accent);
}
.snav-sub-trigger.et-active > .snav-dd-row .snav-sub-arrow {
  color: var(--accent);
}

/* ─── Icon slot (was a numeric badge) ─────────────────────────────── */
.nav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  min-width: 22px;
  width: 22px;
  height: 16px;
  flex-shrink: 0;
  opacity: .75;
  margin-right: 4px;
}
.nav-num svg {
  width: 14px;
  height: 14px;
  display: block;
  pointer-events: none;
}

/* ─── Radio checkmark ────────────────────────────────────────────── */
.nav-check {
  width: 14px;
  font-size: 10px;
  color: var(--accent);
  flex-shrink: 0;
  text-align: center;
  margin-right: 4px;
}

/* ─── Color picker widget ────────────────────────────────────────── */
.snav-color-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: default;
}
.snav-color-widget input[type="color"] {
  width: 28px; height: 20px;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0; cursor: pointer; background: none; flex-shrink: 0;
}
.snav-color-widget input[type="color"]:hover { border-color: var(--accent); }


/* ─── Language picker (EN / ES / PT pills with flag) ───────────────
   Used in the sidebar (between user badge and nav) AND in the
   landing-page hero corner. Three pill buttons in a row, each with
   a small inline flag + 2-letter code. Standard app blue accent;
   selected language uses the standard highlight (accent fill).     */
.cs-lang-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  margin: 8px 0;
  flex-shrink: 0;
}
.cs-lang-btn {
  min-width: 60px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #000;
  border: 1px solid var(--accent, #58a6ff);
  color: var(--accent, #58a6ff);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.cs-lang-btn .cs-flag {
  width: 18px;
  height: 12px;
  flex: 0 0 18px;
  border-radius: 2px;
  overflow: hidden;
  display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}
.cs-lang-btn:hover {
  background: #0b1a2e;
  color: var(--accent, #58a6ff);
}
.cs-lang-btn.is-active,
.cs-lang-btn[aria-pressed="true"] {
  background: var(--accent-dim, #1f6feb44);
  border-color: var(--accent, #58a6ff);
  color: #fff;
  box-shadow: 0 0 0 1px var(--accent, #58a6ff) inset, 0 0 6px rgba(88,166,255,.45);
}
.cs-lang-btn.is-active:hover,
.cs-lang-btn[aria-pressed="true"]:hover {
  background: var(--accent-dim, #1f6feb44);
  color: #fff;
}

/* ─── Locked sub-menu state ─────────────────────────────────────────
   Applied to .snav-sub-trigger when the project has shapes and the
   unit can't be changed (would silently mis-interpret coordinates). */
.snav-sub-trigger.snav-locked .snav-dd-row.nav-radio {
  opacity: 0.45;
  pointer-events: none;
}
.snav-sub-trigger.snav-locked .snav-dd-row.nav-radio .nav-check {
  visibility: hidden;
}
.snav-lock-icon {
  font-size: 11px;
  opacity: 0.55;
  margin-left: 4px;
}
.snav-lock-msg {
  display: block;
  padding: 8px 12px 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-muted, #8b949e);
  font-style: italic;
  border-bottom: 1px solid var(--border, #30363d);
  margin-bottom: 4px;
  white-space: normal;
  max-width: 220px;
}

/* ─── Module switch (Draw ↔ Quote) ───────────────────────────────────
 * Two pill buttons that live between the sidebar-brand and the
 * cs-lang-picker. Active module = aria-pressed=true (accent fill).
 * Inactive module = outlined (accent border). Click jumps to the
 * other module's home page.
 *
 * Layout: side-by-side, equal width, share the same accent palette
 * the lang picker uses so the whole strip feels like one control
 * cluster. Wired by cs-user-badge.js.                                */
.cs-module-switch {
  display: flex;
  gap: 6px;
  padding: 0 14px;
  margin: 8px 0 4px;
  flex-shrink: 0;
}
.cs-module-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: #000;
  border: 1px solid var(--accent, #58a6ff);
  color: var(--accent, #58a6ff);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.cs-module-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .9;
}
.cs-module-btn:hover {
  background: #0b1a2e;
}
.cs-module-btn[aria-pressed="true"] {
  background: var(--accent-dim, #1f6feb44);
  border-color: var(--accent, #58a6ff);
  color: #fff;
  box-shadow: 0 0 0 1px var(--accent, #58a6ff) inset, 0 0 6px rgba(88,166,255,.45);
  cursor: default;
}
.cs-module-btn[aria-pressed="true"]:hover {
  background: var(--accent-dim, #1f6feb44);
  color: #fff;
}
.cs-module-btn[aria-pressed="true"] svg {
  opacity: 1;
}

/* ─── Deep-nesting overrides (Quotes → Prices → Catalog → leaf) ──────
 * The base .snav-sub-dropdown caps height at 220 px, which is fine for
 * the existing single-level subs (Import / Edge Types). When a sub-
 * dropdown contains another sub-trigger that's open, the inner panel
 * needs more room — bump the cap and let it scroll if it really
 * overflows.
 * Indent each subsequent level a touch more so the hierarchy reads. */

.snav-sub-trigger.is-open > .snav-sub-dropdown {
  /* Allow taller panels at any nesting depth. The hard cap protects
     against absurd lists; users with > 480 px of nested content can
     scroll the parent dropdown. */
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* Visual cue for 2nd-level (sub-sub) groups: a slightly dimmer
   accent border so the hierarchy reads at a glance. */
.snav-sub-dropdown .snav-sub-trigger > .snav-sub-dropdown {
  border-left-color: var(--text-muted);
  margin-left: 8px;
}

/* Compact font + tighter padding for deep rows so the panel doesn't
   feel cramped or run wide. */
.snav-sub-dropdown .snav-sub-dropdown .snav-dd-row {
  font-size: 11.5px;
  padding: 6px 10px;
}