/*
 * base-sidebar.css — Basisklasse: Tree-View-Navigations-Sidebar (.bsb).
 * One Source of Truth für alle Übungs-/Kategorie-Bäume (Grammar-Übungen, Arithmetic).
 * Optik 1:1 aus der Verb-Sidebar (.vsb, Blau #2F5490). Struktur/Inhalt liefert
 * js/base-sidebar.js (self-injecting, i18n über I18n). Kein Inline-CSS auf Seiten.
 *
 * Komponenten-Tokens lokal (component-scoped) — keine Streuung ins globale :root.
 */
.bsb {
  --bsb-blue: #2F5490;
  --bsb-blue-d: #1a3a6e;
  --bsb-brd: #d6deec;
  --bsb-brd2: #c4d0e6;
  --bsb-muted: #8a96ab;
  --bsb-txt: #44546e;
  --bsb-hl-bg: #fffde7;
  --bsb-hl-line: #f0c000;
  --bsb-soon: #aeb7c6;
  --bsb-w: 320px;

  /* Shell-Layout: Sidebar über die volle Höhe links (top:0); die primary-navbar
     rückt via body.bsb-pushed in die rechte Content-Spalte. Kein Leerstreifen
     über dem Sidebar-Kopf. */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--bsb-w);
  background: #f7f9fc;
  border-right: 1px solid var(--bsb-brd);
  display: flex;
  flex-direction: column;
  z-index: 40;
  box-shadow: 2px 0 10px rgba(20, 40, 80, .06);
  transition: transform .2s ease;
}

/* Kopf: Titel + Suche */
.bsb-head { padding: 12px; border-bottom: 1px solid var(--bsb-brd); }
.bsb-title { font-weight: 700; color: var(--bsb-blue-d); font-size: 12pt; margin: 0 0 8px; }
.bsb-search {
  width: 100%; padding: 7px 10px; font-size: 11pt;
  border: 1px solid var(--bsb-brd2); border-radius: 4px;
}

.bsb-tree { flex: 1 1 auto; overflow-y: auto; padding: 6px; }

/* Branch (Gruppe / Kategorie) */
.bsb-group { margin: 2px 0; }
.bsb-branch {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 8px 8px;
  border-radius: 5px; font-size: 11pt; font-weight: 600; color: #22303f;
  font-family: inherit;
}
.bsb-branch:hover { background: #e3eaf6; }
.bsb-branch:focus-visible { outline: 2px solid var(--bsb-blue-d); outline-offset: -2px; }
.bsb-caret {
  flex: 0 0 auto; width: 14px; height: 14px; transition: transform .12s ease;
  color: var(--bsb-muted); font-size: 10pt; line-height: 1;
}
.bsb-caret.is-hidden { visibility: hidden; }
.bsb-group.is-open > .bsb-branch .bsb-caret { transform: rotate(90deg); }
.bsb-branch .bsb-count { margin-left: auto; color: var(--bsb-muted); font-size: 9pt; font-weight: 400; }

/* „coming soon"-Ast (Entscheidung 0b): sichtbar, deaktiviert/ausgegraut */
.bsb-group.is-soon > .bsb-branch { color: var(--bsb-soon); }
.bsb-group.is-soon.is-flat > .bsb-branch { cursor: default; }
.bsb-group.is-soon.is-flat > .bsb-branch:hover { background: none; }
.bsb-soon-badge {
  margin-left: auto; font-size: 8pt; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: #fff; background: var(--bsb-soon);
  border-radius: 10px; padding: 2px 8px;
}
.bsb-leaf.is-soon > span {
  color: var(--bsb-soon); cursor: default; padding: 6px 8px 6px 30px; display: flex; gap: 8px;
}

/* Leaves (Übungen) */
.bsb-leaves {
  list-style: none; margin: 0; padding: 2px 0 6px 0;
  max-height: 0; overflow: hidden; transition: max-height .18s ease;
}
.bsb-group.is-open > .bsb-leaves { max-height: 640px; }
.bsb-leaf { margin: 1px 0; }
.bsb-leaf a {
  display: flex; align-items: baseline; gap: 8px; text-decoration: none;
  color: var(--bsb-txt); padding: 6px 8px 6px 30px; border-radius: 5px; font-size: 10.5pt;
}
.bsb-leaf a:hover { background: #e9eef7; color: var(--bsb-blue-d); }
.bsb-leaf a:focus-visible { outline: 2px solid var(--bsb-blue-d); outline-offset: -2px; }
.bsb-leaf .bsb-num { flex: 0 0 auto; min-width: 1.6em; text-align: right; color: var(--bsb-muted); font-size: 9pt; }
.bsb-leaf .bsb-name { flex: 1 1 auto; }
/* T3: GER-Niveau je Übung (aus js/exercise-nav-data.js). Dezent, rechtsbündig —
   Orientierung, kein Hauptelement. CEFR-Stufen sind Eigennamen (nicht übersetzt). */
.bsb-leaf .bsb-level {
  flex: 0 0 auto; margin-left: auto; color: var(--bsb-muted);
  font-size: 8.5pt; font-weight: 400; white-space: nowrap;
}

/* Aktueller Branch + aktives Blatt (Highlight wie Verb-Sidebar) */
.bsb-group.is-current > .bsb-branch { color: var(--bsb-blue-d); }
.bsb-leaf.is-current a {
  background: var(--bsb-hl-bg); box-shadow: inset 3px 0 0 var(--bsb-hl-line);
  color: var(--bsb-blue-d); font-weight: 600;
}

/* ── PUSH-Modus (Default, z. B. Hub exercises.html): Sidebar dauerhaft sichtbar,
      Content rückt nach rechts (wie body.vsb-pushed). ── */
body.bsb-pushed { padding-left: var(--bsb-w, 320px); }

/* ── Kantengriff (wie .vsb-handle): blauer Tab am rechten Sidebar-Rand.
      Nur sichtbar, wenn die Sidebar collapsible ist (Drawer-Modus oder < 820px) —
      liegt mittig links, weicht damit der Top-Navbar UND dem unteren FAB-Stack
      (.tfab-stack: left:24px/bottom:24px) aus. ── */
.bsb-handle {
  position: absolute; right: -40px; top: 150px; width: 40px; height: 46px;
  background: #2F5490; color: #fff; border: none; border-radius: 0 8px 8px 0;
  cursor: pointer; display: none; align-items: center; justify-content: center;
  font-size: 16pt; line-height: 1; box-shadow: 2px 2px 8px rgba(6, 15, 28, .18);
}
.bsb-handle:hover { background: #1a3a6e; }
.bsb-handle:focus-visible { outline: 2px solid #1a3a6e; outline-offset: 2px; }
.bsb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Backdrop hinter dem offenen Drawer (dimmt den Content, schließt bei Klick) */
.bsb-backdrop {
  position: fixed; inset: 0; background: rgba(6, 15, 28, .28);
  z-index: 1000; display: none; border: none;
}
body.bsb-open .bsb-backdrop { display: block; }

/* ── DRAWER-Modus (data-mode="drawer", z. B. Übungs-Worksheets / Arithmetic):
      Off-Canvas-Overlay statt Push (kein A4-Shift), Kantengriff, Backdrop. ── */
body.bsb-drawer .bsb { transform: translateX(-100%); z-index: 1001; }
body.bsb-drawer.bsb-open .bsb { transform: translateX(0); }
body.bsb-drawer .bsb-handle { display: flex; }

/* ── Responsive: im PUSH-Modus wird die Sidebar unter 820px zum Off-Canvas-Drawer ── */
@media (max-width: 820px) {
  body.bsb-pushed { padding-left: 0; }
  body.bsb-pushed .bsb { transform: translateX(-100%); z-index: 1001; width: 280px; }
  body.bsb-pushed.bsb-open .bsb { transform: translateX(0); }
  body.bsb-pushed .bsb-handle { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .bsb, .bsb-leaves, .bsb-caret { transition: none; }
}

/* Sidebar/Griff/Backdrop werden nie gedruckt */
@media print {
  .bsb, .bsb-handle, .bsb-backdrop { display: none !important; }
  body.bsb-pushed { padding-left: 0 !important; }
}