/* O4W-Intranet — Bereichs-Navigation (Sidebar), Vorbild EyeNet-"Käpt'n".
   Dark-Theme + Gold-Akzent (O4W-Styleguide), Geometrie 1:1 aus kaeptn.css.
   Volle Höhe links: Marke oben, Navigation, User-Chip + Logout unten.
   Sichtbar ab 900px; darunter bleibt die Kachel-Navigation der Hub.
   Reine Navigation auf ohnehin sichtbare Ziele — Server-RBAC unberührt. */

/* Fixe Full-Bleed-Topbar (72px) reserviert Platz oben — gilt auf allen Breiten,
   auch mobil ohne Sidebar. */
body.has-osb { padding-top: 72px; }

/* ── Sidebar-Fläche ────────────────────────────────────────────────────── */
.osb { position: fixed; left: 0; top: 72px; bottom: 0; width: 212px; background: var(--o4w-bg-soft, #141414);
  border-right: 1px solid var(--o4w-border-soft, rgba(255,255,255,.12)); z-index: 110;
  display: none; flex-direction: column; padding: 0 10px 10px; overflow-y: auto;
  font-family: var(--o4w-font-body, 'Montserrat', system-ui, sans-serif); }
.osb, .osb * { font-family: var(--o4w-font-body, 'Montserrat', system-ui, sans-serif); }

.osb__brand { flex-shrink: 0; height: 56px; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  color: #FFFFFF; font-family: var(--o4w-font-head, 'Montserrat', sans-serif); font-size: 11px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.osb__brand span { color: var(--o4w-gold, #EA9D17); }
.osb__brand small { font-size: 8px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.4);
  border: 1px solid var(--o4w-gold, #EA9D17); border-radius: 2px; padding: 2px 5px; text-transform: uppercase; }

/* Sidebar-Logo entfernt (lebt in der Topbar). Sidebar startet physisch unter der
   60px-Topbar (top:60px) — kein zusätzlicher Offset mehr nötig. */
.osb__label { margin-top: 8px; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.35); padding: 8px 10px; }

/* Umschalter Club | Admin — nur Admins bekommen ihn ueberhaupt gerendert.
   Steht bewusst AUSSERHALB von .osb__nav (dem Scroll-Bereich), damit er beim
   Blaettern in der Liste stehen bleibt. */
.osb__tabbar { flex-shrink: 0; display: flex; gap: 4px; margin: 0 0 8px; }
.osb__tab { flex: 1; min-width: 0; height: 28px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  background: transparent; color: rgba(255,255,255,.55); font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--o4w-font-head, 'Montserrat', sans-serif); }
.osb__tab:hover { background: rgba(255,255,255,.06); color: #FFFFFF; }
.osb__tab--on { background: rgba(234,157,23,.14); border-color: var(--o4w-gold, #EA9D17);
  color: var(--o4w-gold, #EA9D17); }

.osb__nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
/* Eine Sicht (Club oder Admin) als eigener Container — die Tab-Leiste blendet
   den jeweils anderen per hidden-Attribut aus. Das display:flex WUERDE das
   hidden-Attribut schlagen (in EyeNet genau diese Falle), deshalb explizit. */
.osb__view { display: flex; flex-direction: column; gap: 2px; }
.osb__view[hidden] { display: none; }
/* Gruppen-Trenner (z. B. Taeglich starten): Linie + Label, als Button zum
   Auf-/Zuklappen der Gruppe darunter (.osb__group-items). */
.osb__sep { width: 100%; margin: 12px 0 4px; padding: 8px 10px 6px; border: 0; border-top: 1px solid rgba(255,255,255,.10);
  background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.osb__sep:hover { color: rgba(255,255,255,.6); }
.osb__sep-label { text-align: left; }
.osb__sep-chev { flex-shrink: 0; display: flex; }
.osb__sep-chev svg { width: 11px; height: 11px; transition: transform .15s; transform: rotate(90deg); }
.osb__sep--zu .osb__sep-chev svg { transform: rotate(0deg); }
.osb__group-items { display: flex; flex-direction: column; gap: 2px; }
.osb__group-items[hidden] { display: none; }
.osb__item { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 6px; background: transparent;
  color: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.osb__item:hover { background: rgba(255,255,255,.06); color: #FFFFFF; }
.osb__item--on { background: rgba(234,157,23,.14); color: var(--o4w-gold, #EA9D17); }
.osb__item svg { width: 15px; height: 15px; flex-shrink: 0; }

.osb__user { flex-shrink: 0; margin-top: auto; padding: 10px 6px 4px; border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 8px; }
.osb__ava { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; background: var(--o4w-gold, #EA9D17); color: var(--o4w-bg, #0A0A0A); flex-shrink: 0; }
/* Klickbarer Chip (Admins) → eigenes Profil */
.osb__user--link { cursor: pointer; border-radius: 8px; padding: 8px 6px 6px; margin: 0 -4px;
  transition: background .12s; }
.osb__user--link:hover { background: rgba(234,157,23,.1); }
.osb__uname { min-width: 0; flex: 1; }
.osb__uname b { display: block; font-size: 11px; font-weight: 600; color: #FFFFFF; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.osb__uname span { display: block; font-size: 10px; color: rgba(255,255,255,.4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

.osb__logout { flex-shrink: 0; margin-top: 8px; height: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 6px;
  background: transparent; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer; font-family: var(--o4w-font-head, 'Montserrat', sans-serif); }
.osb__logout:hover { background: rgba(234,157,23,.12); border-color: var(--o4w-gold, #EA9D17); color: var(--o4w-gold, #EA9D17); }

/* ── Ab 900px: Sidebar sichtbar, Seiteninhalt rückt nach rechts ────────── */
@media (min-width: 900px) {
  .osb { display: flex; }
  body.has-osb { padding-left: 212px; }
  /* O4W-Topbar beginnt rechts der Sidebar; die Marke lebt jetzt in der Sidebar */
  body.has-osb .topbar__brand { display: none; }
}

/* ── Unter 900px: dieselbe Sidebar als Overlay, geöffnet vom Menü-Knopf ────
   Vorher war unter 900px GAR kein Menü da. Gedacht war die Kachel-Navigation
   auf /club als Ersatz — die kennt aber nur Mitgliederseiten, also war das
   halbe Admin-Menü (Aushang, Rundmail, Benutzer, Statistik …) auf dem Handy
   über keinen Weg mehr erreichbar. Bewusst dieselbe Liste wie am Desktop:
   eine Quelle (page_catalog.py → /api/nav), keine zweite Pflegestelle.
   Kein Ein-/Ausblend-Effekt: von display:none aus liefe keine Transition,
   halb funktionierende Animation wäre schlechter als gar keine. */
@media (max-width: 899px) {
  .osb--offen { display: flex; width: min(280px, 86vw); z-index: 130;
    box-shadow: 0 18px 40px rgba(0,0,0,.55); }
  /* Beginnt unter der Topbar, damit der Menü-Knopf zum Schließen erreichbar
     bleibt, während das Overlay offen ist. */
  .osb-backdrop { position: fixed; left: 0; right: 0; top: 72px; bottom: 0;
    background: rgba(0,0,0,.55); z-index: 125; }
}

/* Anker-Sprünge (#sec-…) sauber unter die Topbar-Kante fallen lassen */
html { scroll-behavior: smooth; }

/* Touch-Geräte: größere Ziele */
@media (pointer: coarse) {
  .osb__item { padding: 13px 10px; }
}