/* ============================================================
   shared-nav.css v1.0 — Sidebar für FPV/Funk-Unterseiten
   Standalone (kein base.html). Opera/Chrome/FF/Safari/Edge.
   ============================================================ */

.shared-sidenav {
  position: fixed; top: 0; left: 0;
  width: 260px; height: 100vh; max-height: 100vh;
  background: #10151f;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column;
  z-index: 1000; overflow-y: auto; overflow-x: hidden;
  -webkit-transition: width .28s ease, -webkit-transform .28s ease;
  transition: width .28s ease, transform .28s ease;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.ssn-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px; min-height: 58px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.ssn-logo {
  display: flex; align-items: center;
  font-size: 16px; font-weight: 700; letter-spacing: 1.5px;
  color: #fff; text-decoration: none; white-space: nowrap;
  cursor: pointer; pointer-events: auto;
  -webkit-transition: opacity .2s; transition: opacity .2s;
}
.ssn-logo:hover { opacity: .85; }


.ssn-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 0 24px; }

.ssn-home-link {
  display: block; padding: 9px 16px; font-size: 11.5px;
  color: rgba(255,255,255,.4); text-decoration: none; white-space: nowrap;
  -webkit-transition: color .2s; transition: color .2s;
}
.ssn-home-link:hover { color: rgba(255,255,255,.75); }

/* ── Accordion groups ── */
.sb-acc-group { border-bottom: 1px solid rgba(255,255,255,.04); }
.sb-acc-header {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; cursor: pointer; user-select: none;
  color: rgba(255,255,255,.62); font-size: 13px; font-weight: 600;
  -webkit-transition: color .2s, background .2s;
  transition: color .2s, background .2s;
}
.sb-acc-header:hover { color: #fff; background: rgba(255,255,255,.05); }
.sb-acc-header .sb-icon { width: 22px; text-align: center; font-size: 15px; flex-shrink: 0; }
.sb-acc-header .sb-label { flex: 1; white-space: nowrap; overflow: hidden; }
.sb-acc-arrow {
  font-size: 10px; opacity: .45; flex-shrink: 0;
  -webkit-transition: -webkit-transform .25s; transition: transform .25s;
}
.sb-acc-group.open .sb-acc-arrow {
  -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.sb-acc-group.open .sb-acc-header { color: #fff; }


/* Accordion items — collapsed by default */
.sb-acc-items {
  max-height: 0; overflow: hidden;
  -webkit-transition: max-height .3s ease; transition: max-height .3s ease;
}
.sb-acc-group.open .sb-acc-items { max-height: 2000px; }

.sb-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px 9px 20px; font-size: 12.5px;
  color: rgba(255,255,255,.55); text-decoration: none;
  border-left: 2px solid transparent; white-space: nowrap;
  -webkit-transition: color .15s, background .15s, border-color .15s;
  transition: color .15s, background .15s, border-color .15s;
}
.sb-link:hover { color: #fff; background: rgba(255,255,255,.04); text-decoration: none; }
.sb-link.sub { padding-left: 40px; }
.sb-link.active { color: #fff; background: rgba(255,255,255,.06); }
.sb-link .sb-icon { width: 18px; text-align: center; font-size: 13px; flex-shrink: 0; }

/* Active link accent colors per section */
#ssn-fpv .sb-link.active  { border-left-color: #2dd4da; }
#ssn-funk .sb-link.active { border-left-color: #4ade80; }

/* ── Body offset ── */
body.has-shared-nav { padding-left: 260px; }

/* Ensure fixed header (if present) shifts too */
body.has-shared-nav > header { left: 260px; width: calc(100% - 260px); }

/* ── Mobile toggle button (hidden on desktop) ── */
.ssn-mob-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 1100;
  background: #10151f; border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.75); border-radius: 7px; padding: 8px 11px;
  font-size: 15px;
}

@media (max-width: 860px) {
  .shared-sidenav {
    -webkit-transform: translateX(-100%); transform: translateX(-100%);
    width: 260px !important;
  }
  .shared-sidenav.ssn-mobile-open {
    -webkit-transform: translateX(0); transform: translateX(0);
    box-shadow: 4px 0 28px rgba(0,0,0,.5);
  }
  .ssn-mob-toggle { display: block; }
  body.has-shared-nav,
  body.has-shared-nav > header,
}

/* [155] Scrollbalken visuell ausblenden (bleibt scrollbar) */
.shared-sidenav, .ssn-nav {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge alt */
}
.shared-sidenav::-webkit-scrollbar,
.ssn-nav::-webkit-scrollbar {
  width: 0; height: 0; display: none;  /* Chrome/Safari/Opera */
}

/* [155] Seite mindestens so hoch wie das maximal aufgeklappte Menü,
   damit die Sidebar nie scrollen muss. */

/* ── Zentrales Content-Layout für Standalone-Seiten ──
   Ersetzt das frühere inline "main { max-width; margin:0 auto }",
   das beim pjax-Wechsel in den <head> leakte und Seiten verschob. */
.page-main { max-width: 880px; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.page-main.w980 { max-width: 980px; }
.page-main.w1080 { max-width: 1080px; padding-top: 3rem; }
.page-main.w920 { max-width: 920px; }

/* ── Aktive Seite im Menü markieren ──
   .active wird gesetzt: server-seitig durch das kleine Skript im sidenav-Include
   (matcht body[data-active] auf den Link mit gleichem data-key), und beim
   pjax-Wechsel zusätzlich durch persistent-nav.js. Hier nur der visuelle Stil. */
.shared-sidenav .sb-link.sub.active { background: var(--accent, #2dd4da); color: #0c1420; }

/* ── Einheitliche Topbar (ssn-topbar) auf ALLEN Seiten ──
   Ersetzt die frühere .flask-topbar (nur Hauptseiten) und die per-Seite
   <header> der Unterseiten. Version links, Aktionen rechts. */
.ssn-topbar {
  position: fixed; top: 0; left: 260px; right: 0; height: 44px; z-index: 999;
  background: #141b28; border-bottom: 1px solid #263143;
  display: flex; align-items: center;
  gap: 12px; padding: 0 16px; transition: left .3s ease;
}
.ssn-topbar-version {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 700; color: var(--accent, #2dd4da); opacity: .9;
  letter-spacing: .02em; flex-shrink: 0;
}
.ssn-topbar .blunaa-nowplaying { margin-right: auto; }
.ssn-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media (max-width: 860px) { .ssn-topbar { left: 0; padding-left: 56px; } }