/**
 * TEMPLATE: split-pane — Sidebar + Main mit Resizer
 * Prefix: .tpl-sp-*
 * @version 1.0.0
 */

.tpl-sp {
  /* ⚠ DER VORGABEWERT MUSS HIER STEHEN (23.08.2026). `--sp-sidebar-width`
     war NIRGENDS definiert — der Prototyp nannte «default 260px», aber
     niemand setzte ihn. Eine ungueltige `var()` macht die GANZE Deklaration
     ungueltig, das Raster fiel also auf eine einzige Spalte zusammen und die
     Seitenspalte lag unter dem Inhalt. Dieselbe Bauart wie `--color-border`,
     das portalweit undefiniert war und unsichtbare Rahmen zeichnete.
     Das ist KEINE Fallback-Kette: hier wird der Token DEKLARIERT: ein
     Verwender ueberschreibt ihn an seiner Wurzel. */
  --sp-sidebar-width: 260px;
  display: grid;
  --sp-handle-width: 4px;
  grid-template-columns: var(--sp-sidebar-width) var(--sp-handle-width) 1fr;
  min-height: 100%;
  background: var(--color-bg-primary);
}

.tpl-sp-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border-primary);
  overflow-y: auto;
}
.tpl-sp-sidebar-header {
  padding: 12px 16px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-border-primary);
  color: var(--color-text-primary);
}
.tpl-sp-sidebar-body {
  flex: 1;
  padding: 8px;
}
.tpl-sp-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 120ms ease;
}
.tpl-sp-sidebar-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}
.tpl-sp-sidebar-item--active {
  background: var(--color-primary-alpha);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.tpl-sp-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
}
.tpl-sp-main-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-bg-secondary);
}
.tpl-sp-main-body {
  flex: 1;
  padding: 16px;
  min-height: 0;
}

/* Responsive: unter 900px sidebar als Top-Bar */
@media (max-width: 900px) {
  .tpl-sp {
    grid-template-columns: 1fr;
  }
  .tpl-sp-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--color-border-primary);
    max-height: 200px;
  }
}


/* ─── Spaltentrenner (26.08.2026) ──────────────────────────────────────── */
/*
 * ⚠ ES GAB KEINEN. Die Seitenleiste stand auf festen 260 px, und wer sie
 *   breiter brauchte — eine Rezeptliste mit langen Titeln, eine Akte mit
 *   Nummern —, konnte nichts tun. Markus, 26.08.2026: «Die Zeilen muessen
 *   manuell in der Horizontale vergroesser- und verkleinerbar sein, indem
 *   man den Spaltentrenner mit der Maus fassen und verschieben kann.»
 *
 * ⚠ DIE LOGIK KOMMT VOM 3-PANE. `workspace-3pane/griffe.js` loest dieselbe
 *   Aufgabe seit dem 23.08.2026 — mit Mindestbreiten, Tastatur, Doppelklick
 *   zum Zuruecksetzen und einem Gedaechtnis. Eine zweite Umsetzung hier
 *   waere die zweite Wahrheit ueber dasselbe Verhalten; der Baustein nimmt
 *   die Klassennamen deshalb als Argument.
 *
 * ⚠ DIE GREIFFLAECHE IST BREITER ALS DER STRICH — 4 px im Raster, rund
 *   12 px zum Anfassen. VS Code horcht auf 8, macOS auf rund 9 pt.
 */
.tpl-sp-handle {
  width: var(--sp-handle-width);
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 3;
  touch-action: none;
  transition: background 200ms ease;
}

.tpl-sp-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  right: -4px;
  cursor: col-resize;
}

.tpl-sp-handle:hover,
.tpl-sp-handle--dragging {
  background: var(--color-primary-alpha);
}

.tpl-sp-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: var(--color-border-secondary);
  opacity: 0;
  transition: opacity 200ms ease;
}

.tpl-sp-handle:hover::after,
.tpl-sp-handle--dragging::after {
  opacity: 1;
}

@media (max-width: 900px) {
  .tpl-sp-handle { display: none; }
}