/* ============================================================================
   osp-seitenleiste.v2.css — Seitenleiste in jeder App (Plan Kopf und Seitenleiste global AP-03, Zielbild 3.2)
   ----------------------------------------------------------------------------
   Gehört zu /shared/osp-seitenleiste.v2.js; steht im Rumpf (.osp-rumpf, osp-kopf.v2.css) neben dem Inhalt und scrollt nicht mit.
   Breite nach Inhalt im Band 176–216 px (width: max-content, begrenzt): Auch zugeklappte Gruppen bleiben im Layout
   (Höhe 0, unsichtbar), damit ihre Namen die Breite mitbestimmen. Eingeklappt: Schiene 56 px mit Tooltip.
   Pflichtmaß: kein Scrollbalken bei 1640 × 650 (Rumpf 606 px): Zeilen 34 px, Start 40 px, Rest siehe Abschnitt „Höhen“.

   Höhen (typisch): Kopfzeile 42 + 4 Arbeitsansichten 136 + 3 Gruppenköpfe 102 + 1 offene Gruppe (3) 102 + Verwaltung 4 × 34 = 136
                    + SiegAI 32 + Polster 16 = 566 px < 606 px.
   Kontrast (WCAG 2.2, Text mindestens 4,5 : 1):
     hell    #1F2937 auf #F8FAFC 14,03 : 1 · #4B5563 auf #F8FAFC 7,22 : 1 · weiß auf #0070B0 (aktiv) 5,32 : 1
     dunkel  #E5E7EB auf #111C2E 13,80 : 1 · #CBD5E1 auf #111C2E 11,51 : 1 · weiß auf #0070B0 5,32 : 1
     Ampelpunkte (Zeichen, mindestens 3 : 1 gegen #F8FAFC): grün #1E7B34 · gelb #8A6A00 · rot #B53F0B · grau #64748B;
                  dunkel gegen #111C2E: #4ADE80 · #FBBF24 · #FB923C · #94A3B8. Der Zustand steht zusätzlich als Text daneben.
   ============================================================================ */

:root {
  --osl-bg: #F8FAFC;
  --osl-text: #1F2937;
  --osl-text2: #4B5563;
  --osl-hover: #E2EEF7;                  /* #1F2937 darauf 12,45 : 1 */
  --osl-aktiv-bg: #0070B0;
  --osl-aktiv-text: #FFFFFF;
  --osl-rand: #CBD5E1;
  --osl-fokus: #0070B0;
  --osl-chip-bg: #E6F2FA;
  --osl-chip-text: #0A2F4D;
  --osl-ampel-gruen: #1E7B34;
  --osl-ampel-gelb: #8A6A00;
  --osl-ampel-rot: #B53F0B;
  --osl-ampel-grau: #64748B;
}
:root[data-theme="dark"], html.dark {
  --osl-bg: #111C2E;
  --osl-text: #E5E7EB;
  --osl-text2: #CBD5E1;
  --osl-hover: #1B2A42;
  --osl-rand: #334155;
  --osl-fokus: #7CC4F2;
  --osl-chip-bg: #D6E6F2;
  --osl-ampel-gruen: #4ADE80;
  --osl-ampel-gelb: #FBBF24;
  --osl-ampel-rot: #FB923C;
  --osl-ampel-grau: #94A3B8;
}

.osl {
  position: relative; z-index: 2; flex: 0 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column;
  width: max-content; min-width: 176px; max-width: 216px; height: 100%;
  background: var(--osl-bg); color: var(--osl-text); border-right: 1px solid var(--osl-rand);
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.25;
}
.osl *, .osl *::before, .osl *::after { box-sizing: border-box; }
.osl [hidden] { display: none !important; }
.osl-nav { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 6px 8px 0; }

/* Oberste Zeile: Start + Umschalter, in beiden Zuständen an derselben Stelle (FB-043) */
.osl-kopfzeile { position: relative; flex: none; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.osl-kopfzeile .osl-item { flex: 1 1 auto; min-height: 40px; }
.osl-umschalter {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  background: var(--osl-bg); color: var(--osl-text2); border: 1px solid var(--osl-rand); border-radius: 8px; cursor: pointer;
}
.osl-umschalter:hover { color: var(--osl-text); background: var(--osl-hover); }
.osl-umschalter svg { width: 18px; height: 18px; }

/* Punkte */
.osl-item, .osl-gruppenkopf {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; margin-bottom: 1px; padding: 6px 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--osl-text); font: inherit; text-align: left;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.osl-item:hover, .osl-gruppenkopf:hover { background: var(--osl-hover); }
.osl-item[aria-current="page"] { background: var(--osl-aktiv-bg); color: var(--osl-aktiv-text); font-weight: 600; }
.osl-ikon { display: inline-flex; flex: 0 0 auto; }
.osl-ikon svg { width: 18px; height: 18px; }
.osl-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }       /* Auslassung nur als Notbremse; Namen kürzer benennen */
.osl-zahl {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; text-align: center; font-size: 12px; font-weight: 600; line-height: 20px;
  background: var(--osl-chip-bg); color: var(--osl-chip-text);
}
.osl a:focus-visible, .osl button:focus-visible { outline: 3px solid var(--osl-fokus); outline-offset: -2px; }

/* Mitte: Arbeitsansichten + Gruppen. Scrollt nur im Notfall, die Leiste selbst steht. */
.osl-mitte { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 2px 0; scrollbar-width: thin; }
.osl-gruppe { margin-top: 2px; }
.osl-gruppenkopf .osl-text { flex: 1 1 auto; text-align: left; }
.osl-pfeil { display: inline-flex; margin-left: auto; flex: 0 0 auto; transition: transform 140ms ease; }
.osl-pfeil svg { width: 16px; height: 16px; }
.osl-gruppe-offen > .osl-gruppenkopf .osl-pfeil { transform: rotate(180deg); }
.osl-gruppenliste { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 140ms ease, visibility 0s linear 140ms; }
.osl-gruppe-offen > .osl-gruppenliste { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 140ms ease, visibility 0s; }
.osl-gruppeninnen { min-height: 0; overflow: hidden; padding-left: 14px; }
.osl-unterpunkt { min-height: 32px; }

/* Unten fest: Verwaltung und ERP-Ampel, abgesetzt */
.osl-unten { flex: none; margin-top: 4px; padding: 6px 0 6px; border-top: 1px solid var(--osl-rand); }
.osl-ampel-punkt::before { content: ""; width: 12px; height: 12px; margin: 3px; border-radius: 50%; background: var(--osl-ampel-grau); }
.osl-ampel[data-zustand="gruen"] .osl-ampel-punkt::before { background: var(--osl-ampel-gruen); }
.osl-ampel[data-zustand="gelb"]  .osl-ampel-punkt::before { background: var(--osl-ampel-gelb); }
.osl-ampel[data-zustand="rot"]   .osl-ampel-punkt::before { background: var(--osl-ampel-rot); }
div.osl-ampel { cursor: default; }
div.osl-ampel:hover { background: transparent; }

/* Ganz unten: development by SiegAI — dezent, 11 px, Zweittext, Ziel ≥ 24 px */
.osl-siegai {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0 8px 6px; padding: 4px 10px; border-radius: 8px;
  color: var(--osl-text2); font-size: 11px; text-decoration: none; white-space: nowrap;
}
.osl-siegai:hover { background: var(--osl-hover); color: var(--osl-text); }
.osl-siegai-marke { display: inline-flex; flex: 0 0 auto; width: 24px; height: 24px; }
.osl-siegai-marke svg { width: 24px; height: 24px; }
/* Knoten der SiegAI-Marke: Farbe aus der Variable (osp-marken.v1.js setzt nur das fill-Attribut, kein style-Attribut: style-src 'self') */
.osl-siegai-marke .osp-marke-knoten { fill: var(--osp-marke-knoten, #11995A); }

/* Eingeklappt: Schiene 56 px (nur ab 761 px) */
@media (min-width: 761px) {
  .osl.osl-schmal { width: 56px; min-width: 56px; max-width: 56px; }
  .osl-schmal .osl-text, .osl-schmal .osl-pfeil, .osl-schmal .osl-gruppenliste { display: none; }
  .osl-schmal .osl-item, .osl-schmal .osl-gruppenkopf { justify-content: center; padding: 6px 0; position: relative; }
  .osl-schmal .osl-nav { padding-left: 6px; padding-right: 6px; }
  .osl-schmal .osl-zahl {                       /* Zahl als kleiner Hinweis an der Ecke; der Wert steht im Tooltip */
    position: absolute; top: 0; right: 0; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; margin: 0;
  }
  /* Umschalter hält denselben Platz oben: halb über der Kante, auf Höhe von „Start“ */
  .osl-schmal .osl-umschalter { position: absolute; top: 4px; right: -20px; width: 24px; height: 32px; z-index: 5; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
  .osl-schmal .osl-kopfzeile .osl-item { flex: 1 1 auto; }
  .osl-schmal .osl-siegai { justify-content: center; padding: 4px 0; margin: 0 6px 6px; }
}

/* Unter 761 px: Überlagerung unter dem Kopf, geöffnet über den Menü-Knopf im Kopf */
.osl-hinten { display: none; }
@media (max-width: 760px) {
  .osl {
    position: fixed; left: 0; top: var(--okopf2-h, 44px); bottom: 0; height: auto; z-index: 950;
    transform: translateX(-100%); visibility: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    transition: transform 160ms ease, visibility 0s linear 160ms;
  }
  .osl.osl-mobil-offen { transform: none; visibility: visible; transition: transform 160ms ease, visibility 0s; }
  .osl-umschalter { display: none; }
  .osl-hinten:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--okopf2-h, 44px); z-index: 940; background: rgba(0, 0, 0, .45); }
}

/* Niedrige Fenster (z. B. 1640 × 650 bei 150 % Zoom = 433 px): Zeilen dichter, damit die Mitte nicht scrollt.
   Zielflächen bleiben ≥ 24 px (WCAG 2.5.8). Befund BMM/Controller 25.10.2026.
   Die Zeile „development by SiegAI“ bleibt bewusst unverändert (gesonderte Vorgabe AL). */
@media (min-width: 761px) and (max-height: 560px) {
  .osl-nav { padding-top: 4px; }
  .osl-kopfzeile .osl-item { min-height: 30px; }
  .osl-item, .osl-gruppenkopf { min-height: 26px; padding: 2px 10px; }
  .osl-unterpunkt { min-height: 24px; }
  .osl-unten { margin-top: 2px; padding: 3px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .osl, .osl-pfeil, .osl-gruppenliste { transition: none !important; }
}
@media print { .osl, .osl-hinten { display: none !important; } }