/* ============================================================
   buch-sidebar.css — Single Source of Truth für ALLE Buch-Sidebars
   --------------------------------------------------------------
   Wird von ALLEN sieben Büchern (Vertragsbuch, Steuerbuch, Budgetbuch,
   Reisebuch, Zeitbuch, Wanderbuch, Finanzbuch) NACH der jeweiligen
   tool-shell.css geladen.

   WICHTIG: Alle Werte in PIXEL — bewusst keine rem-Werte, weil
   Reisebuch html/body font-size 14.5px hat und andere Bücher 16px.
   Mit rem wären die Sidebars unterschiedlich gross. Mit px sind
   sie pixelgenau identisch in allen 6 Büchern.

   Markup-Pattern (identisch in allen Büchern):
     <aside class="<prefix>-sidebar" id="<prefix>-sidebar">
       <div class="nav-group">
         <div class="nav-label">Übersicht</div>
         <a class="nav-item is-active" href="...">
           <span class="nav-item-icon"><svg>...</svg></span>
           <span class="nav-item-label">Dashboard</span>
         </a>
       </div>
       <div class="<prefix>-sidebar-footer">
         <a class="nav-item is-footer" href="...">...</a>
       </div>
     </aside>
   ============================================================ */

/* ---------- Container (alle 7 Bücher gleiche Optik) ---------- */
.vb-sidebar,
.sb-sidebar,
.bb-sidebar,
.rb-sidebar,
.wb-sidebar,
.fb-sidebar,
.zb-sidebar,
.slot-sidebar,
#zb-sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid #E5E7EB;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* Explizite font-size am Container, damit Vererbung von body
     (Reisebuch hat 14.5px, andere 16px) keinen Einfluss hat. */
  font-size: 14px;
  line-height: 1.3;
}

/* Footer-Container: Prefix bleibt, weil Layout pro Buch identisch ist */
.vb-sidebar-footer,
.sb-sidebar-footer,
.bb-sidebar-footer,
.rb-sidebar-footer,
.wb-sidebar-footer,
.fb-sidebar-footer,
.zb-sidebar-footer,
.slot-sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #F3F4F6;
}

/* ---------- Nav-Gruppen ---------- */
.nav-group {
  margin-bottom: 20px;
}
.nav-group:last-of-type {
  margin-bottom: 0;
}

.nav-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6B7280;
  padding: 0 20px 8px;
  margin: 0;
  line-height: 1.3;
}

/* ---------- Nav-Item (Standard) ---------- */
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px;
  margin: 2px 8px;
  border-radius: 6px;
  color: #1A1A2E;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  background: none;
  border: none;
  text-align: left;
  width: calc(100% - 16px);
  cursor: pointer;
  font-family: inherit;
  position: relative;
  line-height: 1.3;
}

.nav-item:hover {
  background: #F3F4F6;
  color: #162039;
}

/* Active-State: Navy-Background, weisser Text, gold svg-Stroke */
.nav-item.is-active {
  background: #162039;
  color: #fff;
}
.nav-item.is-active .nav-item-icon svg {
  stroke: #F5C518;
}

/* Disabled (z.B. "Bald"-Items im Zeitbuch) */
.nav-item.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.nav-item.is-disabled:hover {
  background: transparent;
  color: #1A1A2E;
}

/* ---------- Icons ---------- */
.nav-item-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.nav-item-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.nav-item-label {
  flex: 1;
  min-width: 0;
}

/* ---------- Badge (z.B. "Bald", "Pro") ---------- */
.nav-item-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: #F5C518;
  color: #162039;
  flex-shrink: 0;
  line-height: 1.2;
}
.nav-item-badge.bald {
  background: #F3F4F6;
  color: #6B7280;
}

/* ---------- Cockpit-Link (Finanzbuch von Quell-Büchern aus) ---------- */
.nav-item.is-cockpit {
  background: linear-gradient(135deg, rgba(245,197,24,0.10) 0%, rgba(245,197,24,0.04) 100%);
  border: 1px solid rgba(245,197,24,0.30);
  color: #162039;
  font-weight: 600;
  margin-bottom: 0.5rem;
  position: relative;
}
.nav-item.is-cockpit:hover {
  background: linear-gradient(135deg, rgba(245,197,24,0.18) 0%, rgba(245,197,24,0.08) 100%);
  border-color: rgba(245,197,24,0.55);
  color: #162039;
}
.nav-item.is-cockpit .nav-item-icon { color: #D4A017; }
.nav-item.is-cockpit .nav-item-icon svg { stroke: #D4A017; }
.nav-item.is-cockpit .nav-item-label { flex: 1; }
.nav-item.is-cockpit .nav-item-badge {
  background: #162039;
  color: #F5C518;
  font-size: 9px;
}

/* ---------- Footer-Items ---------- */
.nav-item.is-footer {
  color: #6B7280;
  font-weight: 500;
  font-size: 13.5px;
}
.nav-item.is-footer:hover {
  color: #1A1A2E;
  background: #F3F4F6;
}
.nav-item.is-footer.is-active {
  background: #162039;
  color: #fff;
}
.nav-item.is-footer.is-active .nav-item-icon svg {
  stroke: #F5C518;
}

/* ---------- Reisebuch-Sonderfall: Trip-Items in Sidebar ---------- */
/* Reisen-Liste in der Sidebar zeigt aktuelle/kommende Trips.
   Active-State markiert den GERADE GEÖFFNETEN Trip — nicht die Page.
   Wir nutzen das gleiche .nav-item mit Modifier .is-trip. */
.nav-item.is-trip {
  font-size: 13.5px;
  padding-left: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.nav-item.is-trip.is-active {
  background: #162039;
  color: #fff;
  font-weight: 600;
}
.nav-item.is-trip.is-active::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: #F5C518;
  border-radius: 2px;
}

/* ---------- Mobile (≤640px): nur kosmetischer Box-Shadow.
   Slide-In-Verhalten bleibt buch-spezifisch in der jeweiligen
   tool-shell.css (wegen unterschiedlicher Header-Höhen-Variablen). */
@media (max-width: 640px) {
  .vb-sidebar.is-open,
  .sb-sidebar.is-open,
  .bb-sidebar.is-open,
  .rb-sidebar.is-open,
  .wb-sidebar.is-open,
  .fb-sidebar.is-open,
  .zb-sidebar.is-open,
  #zb-sidebar.is-open {
    box-shadow: 2px 0 12px rgba(22,32,57,0.18);
  }
}