/* avsidebar.css — Optik der Seitenleiste für Dashboard UND Scout aus EINER Quelle (Chris 2026-10-16: „1 zu 1 gleich“).
   Vorher führte der Scout eine eigene Kopie mit .side-*-Klassen, die über die Zeit auseinanderlief.
   Hier steht alles INNERHALB der Leiste (Marke, Punkte, Projektliste, Versionszeile, Nutzerbox, eingeklappt).
   Der Behälter selbst (Breite, Drawer am Handy, Ziehgriff) bleibt je Seite: .sidebar (index.html) / .room-side (avorge.css).
   Bausteine dazu in avsidebar.js. Geladen nach avtokens.css, vor den seiteneigenen Stilen. */

/* Hover/Aktiv der Leiste NEUTRAL (seit 2026-10-21, Menü nach SEPP): Textfarbe gemischt, folgt jedem Thema; nur das Symbol des aktiven
   Punkts trägt den Akzent. Die Leiste selbst bleibt weiß (--bg-p, Behälter je Seite) — „auf dem Grund“ hat Chris am selben Tag zurückgenommen. */
.sidebar,.room-side{--nav-hl:color-mix(in srgb,var(--txt) 6%,transparent);--nav-hl-on:color-mix(in srgb,var(--txt) 9%,transparent);}

/* ── Marke ── */
.brand{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-2);border-bottom:.5px solid var(--bdr);flex-shrink:0;overflow:hidden;box-sizing:border-box;height:62px;}
.brand-logo{height:28px;width:auto;flex-shrink:0;object-fit:contain;}
.brand .brand-name{font-size:var(--fs-l);font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;}
.brand .brand-name span{color:var(--acc);}

/* Navigation = EINE Rollfläche (2026-10-05, Chris: „Balken zuckt hin und her"): .nav-scroll ist eine Flex-Spalte, die
   Projektliste .nav-sub nimmt den Rest und rollt allein (flex 0 1 auto, min-height 0) — die alte max-height
   (100vh − 310) ließ bei ausgereizter Höhe ZWEI Rollbalken (innen und außen) kommen und gehen. Der Platz für den
   Balken ist fest reserviert (scrollbar-gutter:stable, 6 px schmal wie im Raumplan), damit die Zeilen beim Klappen
   nicht seitlich springen; padding-right 2 px + 6 px Rinne = die früheren 8 px. */
.nav-scroll{flex:1;overflow-y:auto;min-height:0;padding:var(--sp-1) 0;display:flex;flex-direction:column;}
.nav-scroll>.nav-item{flex-shrink:0;}
.nav-section{font-size:var(--fs-s);font-weight:500;color:var(--txt3);padding:var(--sp-3) var(--sp-3) var(--sp-1);white-space:nowrap;overflow:hidden;}
.nav-konto-section{padding-top:var(--sp-2);flex-shrink:0;}
.nav-item{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-s);font-size:var(--fs-m);font-weight:400;color:var(--txt2);cursor:pointer;margin-bottom:1px;border:none;background:none;width:100%;text-align:left;text-decoration:none;white-space:nowrap;overflow:hidden;box-sizing:border-box;height:32px;flex-shrink:0;position:relative;}
.nav-item i:first-child{font-size:var(--fs-l);width:18px;text-align:center;flex-shrink:0;}
.nav-item:hover{background:var(--nav-hl);color:var(--txt);}
.nav-item.active{background:var(--nav-hl-on);color:var(--txt);font-weight:500;}
.nav-item.active i:first-child{color:var(--acc);}
.nav-badge{margin-left:auto;display:inline-flex;align-items:center;height:var(--ctl-h-xs);font-size:var(--fs-2xs);font-weight:600;color:var(--acc-t);background:var(--acc-l);padding:0 var(--sp-2);border-radius:var(--r-pill);flex-shrink:0;}
.nav-item.active .nav-badge{background:var(--bg-p);}
.nav-badge.warn,.nav-item.active .nav-badge.warn{background:var(--warn-fill);color:var(--warn-ink);}
.nav-caret{margin-left:auto;font-size:var(--fs-xs);transition:transform .18s;color:var(--txt3);flex-shrink:0;padding:var(--sp-1) var(--sp-2);margin-right:calc(-1 * var(--sp-2));border-radius:var(--r-s);}
.nav-proj-open .nav-caret{transform:rotate(180deg);}

/* ── Projektliste ── */
.nav-sub{padding:2px 2px var(--sp-1) var(--sp-2);flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-gutter:stable;}
.nav-scroll::-webkit-scrollbar,.nav-sub::-webkit-scrollbar{width:6px;}
.nav-scroll::-webkit-scrollbar-track,.nav-sub::-webkit-scrollbar-track{background:transparent;}
.nav-scroll::-webkit-scrollbar-thumb,.nav-sub::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:var(--r-pill);}
.nav-scroll::-webkit-scrollbar-thumb:hover,.nav-sub::-webkit-scrollbar-thumb:hover{background:var(--txt3);}
/* Während der Ordner-Klappe (AVSidebar.toggleFolder) bleibt der Daumen unsichtbar, wenn er dabei erst erscheinen oder
   verschwinden würde — er kommt erst mit dem Endzustand (Chris 2026-10-06: „Balken kurz eingeblendet“). Rinne bleibt. */
.nav-sub.av-busy::-webkit-scrollbar-thumb,.nav-sub.av-busy::-webkit-scrollbar-thumb:hover{background:transparent;}
@supports not selector(::-webkit-scrollbar){.nav-scroll,.nav-sub{scrollbar-width:thin;scrollbar-color:var(--bdr2) transparent;}.nav-sub.av-busy{scrollbar-color:transparent transparent;}}
.nav-sub-item{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:5px var(--sp-2);border-radius:var(--r-s);font-size:var(--fs-m);font-weight:400;color:var(--txt2);background:none;border:none;cursor:pointer;text-align:left;text-decoration:none;box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}   /* langes Drücken = Ziehen, kein Markieren (2026-11-04) */
.nav-sub-item:hover{background:var(--nav-hl);color:var(--txt);}
.nav-sub-item.active{background:var(--nav-hl-on);color:var(--txt);font-weight:500;}
.nav-sub-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.35;}
.nav-sub-item.active .nav-sub-dot{opacity:1;}
/* Zeichen bei Handlungsbedarf (seit 2026-10-21, wie SEPP .st): rot × = Frist überschritten, gelb ! = Frist in ≤ 7 Tagen
   (AVSidebar.need); ohne Handlungsbedarf kein Zeichen. Der Phasenpunkt steht nicht mehr in der Leiste (.nav-sub-dot bleibt für
   Filter und Pipeline im Dashboard). */
.nav-sub-st{margin-left:auto;width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font:700 9.5px/1 var(--f-body);}
.nav-sub-st.gelb{background:color-mix(in srgb,var(--warn-fill) 24%,transparent);color:var(--warn);}
.nav-sub-st.rot{background:var(--danger-fill);color:var(--danger);}
.nav-sub-st + .nav-sub-pin{margin-left:0;}
/* Statusfarbe am Punkt — dieselben Tripel wie die .status-Pillen (eine Quelle,
   deshalb rgb(var(--st-…)) statt eigener Hexwerte; „begehung" folgt dem Akzent). */
.nav-sub-dot.st-entwurf{background:rgb(var(--st-entwurf));opacity:.9;}
.nav-sub-dot.st-begehung{background:var(--acc);opacity:.9;}
.nav-sub-dot.st-angebot{background:rgb(var(--st-angebot));opacity:.9;}
.nav-sub-dot.st-beauftragt{background:rgb(var(--st-beauftragt));opacity:.9;}
.nav-sub-dot.st-abgeschlossen{background:rgb(var(--st-abgeschlossen));opacity:.9;}
.nav-sub-dot.st-kein_auftrag{background:rgb(var(--st-kein));opacity:.9;}
.nav-sub-dot.st-keine_rueckmeldung{background:rgb(var(--st-keine-rueck));opacity:.9;}
.nav-sub-more{display:flex;align-items:center;gap:var(--sp-1);width:100%;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-s);font-size:var(--fs-s);font-weight:400;color:var(--txt3);background:none;border:none;cursor:pointer;text-align:left;}
.nav-sub-more:hover{background:var(--nav-hl);color:var(--txt);}
.nav-sub-more .ti{font-size:var(--fs-s);}
.nav-sub-more-cnt{margin-left:auto;font-size:var(--fs-2xs);font-weight:500;color:var(--txt3);}
.nav-sub-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;text-align:left;}
.nav-sub-pin{font-size:var(--fs-2xs);color:var(--acc);margin-left:auto;flex-shrink:0;}
.nav-sub-item.is-new{color:var(--txt);font-weight:600;}
.nav-sub-item.is-new::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);margin-left:auto;flex-shrink:0;}
/* Ordner-Gruppen — Variante A (2026-10-05, docs/mockup-sidebar.html): der Ordner ist ein Abschnitts-Etikett wie „Konto"
   (versal), Zahl rechts. Ordnersymbol und Pfeil liegen ÜBEREINANDER in .nav-fold-ic (Chris 2026-10-05, Nachtrag): in Ruhe
   das Ordnersymbol, beim Überfahren/Fokus blendet es aus und der Pfeil ein — gedreht nach Zustand (zu = nach rechts).
   Auf Touch gibt es kein Hover, dort bleibt das Ordnersymbol. Die Projekte liegen in .nav-fold-body (AVSidebar.toggleFolder). */
.nav-sub-folder{display:flex;align-items:center;gap:6px;width:100%;padding:var(--sp-3) var(--sp-1) 3px;border-radius:var(--r-s);font-size:var(--fs-s);font-weight:500;color:var(--txt);background:none;border:none;cursor:pointer;text-align:left;}   /* Ordnername in Textfarbe (Chris 2026-10-21; Teal am selben Tag zurückgenommen) */
.nav-sub-folder:hover{color:var(--acc-t);}
.nav-fold-ic{position:relative;width:16px;height:16px;flex-shrink:0;display:inline-block;}
.nav-fold-ic i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .15s,transform .2s cubic-bezier(.2,.8,.2,1);}
.nav-fold-f{font-size:var(--fs-m);color:var(--acc);}
.nav-fold-caret{font-size:var(--fs-xs);color:var(--txt3);opacity:0;transform:scale(.6);}
.nav-sub-folder:not(.open) .nav-fold-caret{transform:rotate(-90deg) scale(.6);}
.nav-sub-folder:hover .nav-fold-f,.nav-sub-folder:focus-visible .nav-fold-f{opacity:0;transform:scale(.6);}
.nav-sub-folder:hover .nav-fold-caret,.nav-sub-folder:focus-visible .nav-fold-caret{opacity:1;transform:none;}
.nav-sub-folder:not(.open):hover .nav-fold-caret,.nav-sub-folder:not(.open):focus-visible .nav-fold-caret{transform:rotate(-90deg);}
.nav-fold-cnt{margin-left:auto;font-size:var(--fs-xs);font-weight:500;color:var(--txt3);flex-shrink:0;letter-spacing:0;}
.nav-fold-body{position:relative;}
.nav-fold-body[hidden]{display:none;}
.nav-sub-item.in-folder{padding-left:26px;}   /* fluchtet mit dem Ordnernamen (Symbol 16 + Abstand 6 + Rand 4) */
.nav-sub-empty{font-size:var(--fs-xs);color:var(--txt3);padding:3px var(--sp-2) 3px 26px;}

/* ── Fuß: Version als Menüpunkt (wie Einstellungen/Feedback, Chris 2026-10-16), darunter die Nutzerbox ── */
.nav-ver{position:relative;}
.nav-ver-num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-s);}
.nav-ver .ver-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);margin-left:auto;flex-shrink:0;}
.user-box{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-top:.5px solid var(--bdr);flex-shrink:0;overflow:hidden;box-sizing:border-box;height:48px;cursor:pointer;}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--acc-l);color:var(--acc-t);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;flex-shrink:0;}
.user-name{font-size:var(--fs-s);font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;}
.user-role{font-size:var(--fs-2xs);color:var(--txt3);white-space:nowrap;}
/* Abgleich-Wolke (avsync.js mountIndicator) rechts an der Nutzerbox */
.user-box .avs-ind{margin-left:auto;}

/* ── Typografie (wie die Typografie-Blöcke der Seiten) ── */
/* Seit 2026-10-21 (Chris, Schritt 2 „Menü links“, Variante B wie SEPP, docs/mockup-menue.html): Menü und Etiketten im Lauftext (Inter),
   normal geschrieben; nur die Marke bleibt Bahnschrift. Die Typografie-Blöcke von index.html führen die Menü-Klassen nicht mehr. */
.brand-name{font-family:var(--f-display);font-stretch:var(--st-disp);letter-spacing:0;}
.nav-item,.nav-sub-item,.nav-sub-more,.nav-section,.nav-sub-folder{font-family:var(--f-body);font-stretch:normal;text-transform:none;letter-spacing:0;}
.nav-fold-cnt,.nav-sub-more-cnt,.nav-badge{font-family:var(--f-mono);font-variant-numeric:tabular-nums;}
.nav-item,.nav-sub-item{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .2s ease;}

/* ── Raumstand als EIN Zeichen mit Wort (Chris 2026-10-21, Vorschlag 2 aus docs/mockup-sepp-auswahl.html, nach SEPP .st) ──
   Gilt in Dashboard UND Scout (diese Datei laden beide): „Heute“ (index.html _roomStHtml), Räume-Reiter (gapCell), Raumliste im Scout.
   ok = vollständig ✓, gelb = Lücken !, zu = abgeschlossen ✓ in Teal, ohne Klasse = nicht begonnen –. .nur = nur das Zeichen (Wort im title).
   Farben mit zwei Klassen, damit sie gegen die Layout-Klassen der Seiten (.cp-state, .room-sub-desk) gewinnen. */
.av-st{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap;color:var(--txt3);}
.av-st::before{content:'–';width:15px;height:15px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font:700 9.5px/1 var(--f-body);background:var(--bg-s);color:var(--txt3);}
.av-st.ok{color:var(--ok);} .av-st.ok::before{content:'✓';background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);}
.av-st.gelb{color:var(--warn);} .av-st.gelb::before{content:'!';background:color-mix(in srgb,var(--warn-fill) 24%,transparent);color:var(--warn);}
.av-st.zu{color:var(--acc-t);} .av-st.zu::before{content:'✓';background:var(--acc-l);color:var(--acc-t);}
.av-st.nur{font-size:0;gap:0;}

/* ── Eingeklappt (nur am Rechner; am Handy ist die Leiste ein Drawer und immer voll) ── */
@media(min-width:900px){
  [data-collapsed] .brand-name,[data-collapsed] .nav-label,[data-collapsed] .nav-caret,[data-collapsed] .nav-badge,[data-collapsed] .nav-section,
  [data-collapsed] .nav-sub,[data-collapsed] .nav-konto-section,[data-collapsed] .user-name,[data-collapsed] .user-role,
  [data-collapsed] .user-box .avs-ind{display:none;}
  /* Version eingeklappt: nur das Symbol wie bei den anderen Punkten, Neues als Punkt am Symbol; Zeilenhöhe bleibt (34 px) */
  [data-collapsed] .nav-ver .ver-dot{position:absolute;top:7px;left:30px;margin:0;}
  /* Offene Punkte eingeklappt: gelber Punkt am Symbol (Zahl = 0 → Inline-display:none bleibt stärker) */
  [data-collapsed] .nav-item>.nav-badge.warn{display:block;position:absolute;top:6px;left:28px;width:7px;height:7px;padding:0;font-size:0;border-radius:50%;}
  /* Beim Überfahren aufgeklappt: liegt über dem Inhalt — der negative Rand (inline, 52 − Breite) hält den Platz in der Zeile */
  .sidebar[data-peek],.room-side[data-peek]{z-index:130;box-shadow:var(--shadow-pop);}
}