/* ============================================================
   buch-header.css — Single Source of Truth für ALLE Buch-Header
   --------------------------------------------------------------
   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 Header in Reisebuch ~9% kleiner. Mit px sind
   sie pixelgenau identisch in allen 6 Büchern.

   Vier Klassen-Schemata werden via Multi-Selektor angesprochen:
     - Vertragsbuch:  .vb-user-chip,    .vb-user-avatar,    .vb-user-name
     - Reisebuch:     .rb-user-chip,    .rb-user-avatar,    .rb-user-name
     - Wanderbuch:    .wb-user-chip,    .wb-user-avatar,    .wb-user-name
     - SB/BB/ZB:      .user-chip-trigger, .user-avatar,     .user-name

   Container-Klassen (.vb-header, .sb-header, .rb-header, #zb-header, .wb-header)
   bleiben buch-spezifisch für Layout (fixed/sticky/relative).

   Beim Anlegen eines neuen Buches:
     1. Eigenen Prefix in alle Multi-Selektoren hier ergänzen
     2. In buch-sidebar.css das gleiche tun
     3. tool-shell.css nur noch Layout-Spezifika (position, top, etc.)

   Referenz-Werte: Vertragsbuch (Pascal's Design-Referenz)
   ============================================================ */

/* ---------- Header Container (Höhe + Hintergrund + Shadow) ---------- */
.vb-header,
.sb-header,
.rb-header,
.wb-header,
.fb-header,
.slot-header,
.ib-header,
#zb-header {
  background: #162039;
  box-shadow: 0 1px 3px rgba(22,32,57,0.08);
  color: #fff;
  /* font-size am Container, damit Vererbung von body egal ist */
  font-size: 14px;
  line-height: 1.3;
}

/* Header-Inner (Vertragsbuch, Steuerbuch, Budgetbuch, Zeitbuch, Wanderbuch, Finanzbuch) */
.vb-header-inner,
.sb-header-inner,
.wb-header-inner,
.fb-header-inner,
.zb-header-inner {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

/* Reisebuch hat keinen .rb-header-inner — Inhalte sind direkt im .rb-header.
   Daher gilt das Padding direkt am Container. */
.rb-header {
  padding-left: 24px;
  padding-right: 24px;
  gap: 16px;
}

/* ---------- Logo-Stack (Logo + Beta-Badge gestapelt) ---------- */
.vb-logo-stack,
.sb-logo-stack,
.rb-logo-stack,
.wb-logo-stack,
.fb-logo-stack,
.zb-logo-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 3px;
  flex-shrink: 0;
  min-width: 0;
}

/* ---------- Logo (Buchname.) ---------- */
.vb-logo,
.sb-logo,
.rb-brand,
.wb-logo,
.fb-logo,
.zb-logo {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.vb-logo .dot,
.sb-logo .dot,
.rb-brand-dot,
.wb-logo .dot,
.fb-logo .dot,
.zb-logo .dot {
  color: #F5C518;
}

/* ---------- Beta-Badge ---------- */
.vb-beta-badge,
.sb-beta-badge,
.rb-beta-badge,
.wb-beta-badge,
.fb-beta-badge,
.zb-beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: rgba(245,197,24,0.22);
  color: #FFD449;
  border: 1px solid rgba(245,197,24,0.5);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}
.vb-beta-badge:hover,
.sb-beta-badge:hover,
.rb-beta-badge:hover,
.wb-beta-badge:hover,
.fb-beta-badge:hover,
.zb-beta-badge:hover {
  background: rgba(245,197,24,0.32);
  color: #FFE066;
  border-color: rgba(245,197,24,0.7);
}

/* Beta-Pulse-Dot */
.vb-beta-dot,
.sb-beta-dot,
.rb-beta-dot,
.wb-beta-dot,
.fb-beta-dot,
.zb-beta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F5C518;
  flex-shrink: 0;
  animation: buch-beta-pulse 2.4s ease-in-out infinite;
}
@keyframes buch-beta-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* ---------- Trennstrich (zwischen Logo-Stack und Tenant-Switcher/etc.) ---------- */
.vb-header-divider,
.sb-header-divider,
.rb-header-divider,
.wb-header-divider,
.fb-header-divider,
.zb-header-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* ---------- Tenant-Switcher (Vertragsbuch + Steuerbuch + Budgetbuch + Wanderbuch + Finanzbuch) ---------- */
.vb-tenant-switcher,
.wb-tenant-switcher,
.fb-tenant-switcher,
.tenant-switcher-trigger,
.rb-person-pill,
.zb-person-pill {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 10px 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.rb-person-pill,
.zb-person-pill { cursor: default; }
.vb-tenant-switcher:hover:not(:disabled),
.wb-tenant-switcher:hover:not(:disabled),
.fb-tenant-switcher:hover:not(:disabled),
.tenant-switcher-trigger:hover:not(:disabled) {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}
.vb-tenant-switcher:disabled,
.wb-tenant-switcher:disabled,
.fb-tenant-switcher:disabled,
.tenant-switcher-trigger:disabled {
  cursor: default;
}
.vb-tenant-avatar,
.wb-tenant-avatar,
.fb-tenant-avatar,
.tenant-avatar,
.tenant-logo-placeholder,
.rb-person-avatar,
.zb-person-avatar {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: #F5C518;
  color: #162039;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 10px;
  flex-shrink: 0;
  overflow: hidden;
}
.rb-person-avatar.has-image,
.zb-person-avatar.has-image {
  background: #fff;
  padding: 1px;
}
.rb-person-avatar img,
.zb-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tenant-logo-mini,
.vb-tenant-logo,
.wb-tenant-logo,
.fb-tenant-logo {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: contain;
  background: #fff;
  padding: 1px;
  flex-shrink: 0;
}
.vb-tenant-name,
.wb-tenant-name,
.fb-tenant-name,
.tenant-name,
.rb-person-name,
.zb-person-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  font-weight: 600;
  font-size: 14px;
}
.vb-tenant-switcher svg,
.wb-tenant-switcher svg,
.fb-tenant-switcher svg,
.tenant-switcher-trigger svg {
  opacity: 0.6;
  flex-shrink: 0;
}

/* ---------- User-Chip (Avatar + Vorname rechts) ---------- */
.vb-user-chip,
.rb-user-chip,
.wb-user-chip,
.fb-user-chip,
.user-chip-trigger {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 11px 6px 6px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.vb-user-chip:hover,
.rb-user-chip:hover,
.wb-user-chip:hover,
.fb-user-chip:hover,
.user-chip-trigger:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
}

/* User-Avatar (Goldener Kreis mit Initialen) */
.vb-user-avatar,
.rb-user-avatar,
.wb-user-avatar,
.fb-user-avatar,
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F5C518;
  color: #162039;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11.5px;
  flex-shrink: 0;
  line-height: 1;
  overflow: hidden;
}
/* Image-Variante: User hat profile.avatar_url */
.vb-user-avatar.has-image,
.rb-user-avatar.has-image,
.wb-user-avatar.has-image,
.fb-user-avatar.has-image,
.user-avatar.has-image {
  background: rgba(255,255,255,0.08);
}
.vb-user-avatar img,
.rb-user-avatar img,
.wb-user-avatar img,
.fb-user-avatar img,
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* User-Name (Vorname, Desktop only) */
.vb-user-name,
.rb-user-name,
.wb-user-name,
.fb-user-name,
.user-name {
  font-size: 14px;
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Super-Badge (für Admin) ---------- */
.vb-super-badge,
.sb-super-badge,
.rb-super-badge,
.wb-super-badge,
.fb-super-badge,
.zb-super-badge,
.user-super-badge {
  background: #F5C518;
  color: #162039;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.2;
  flex-shrink: 0;
}

/* ---------- Changelog "Was ist neu" Trigger — unified dark override für alle Buch-Header --- */
/* Überschreibt die gold-pill-Basis aus changelog-widget.js via höhere Spezifizität (.header .cl-trigger).
   Gilt für alle 6 Bücher. VB/WB hatten eigene Overrides in der jeweiligen shell.css — diese
   sind weiterhin gültig, werden aber durch diese zentrale Regel redundant. */
.vb-header .cl-trigger,
.sb-header .cl-trigger,
.rb-header .cl-trigger,
.wb-header .cl-trigger,
.fb-header .cl-trigger,
.slot-header .cl-trigger,
.ib-header .cl-trigger,
#zb-header .cl-trigger {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
}
.vb-header .cl-trigger:hover,
.sb-header .cl-trigger:hover,
.rb-header .cl-trigger:hover,
.wb-header .cl-trigger:hover,
.fb-header .cl-trigger:hover,
.slot-header .cl-trigger:hover,
.ib-header .cl-trigger:hover,
#zb-header .cl-trigger:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.2);
  transform: none; /* baseline override: gold version macht translateY(-1px) */
}
.vb-header .cl-trigger-dot,
.sb-header .cl-trigger-dot,
.rb-header .cl-trigger-dot,
.wb-header .cl-trigger-dot,
.fb-header .cl-trigger-dot,
.slot-header .cl-trigger-dot,
.ib-header .cl-trigger-dot,
#zb-header .cl-trigger-dot {
  background: #F5C518; /* gold dot auf dunklem bg statt navy-dot auf gold bg */
}

@media (max-width: 640px) {
  .vb-user-name,
  .rb-user-name,
  .wb-user-name,
  .fb-user-name,
  .user-name {
    display: none;
  }
  .vb-user-chip,
  .rb-user-chip,
  .wb-user-chip,
  .fb-user-chip,
  .user-chip-trigger {
    padding: 4px;
  }
  .vb-tenant-name,
  .wb-tenant-name,
  .fb-tenant-name,
  .tenant-name {
    display: none;
  }
  .vb-tenant-switcher,
  .wb-tenant-switcher,
  .fb-tenant-switcher,
  .tenant-switcher-trigger {
    padding: 4px;
  }
  /* Logo bleibt sichtbar, leicht kleiner */
  .vb-logo,
  .sb-logo,
  .rb-brand,
  .wb-logo,
  .fb-logo,
  .zb-logo {
    font-size: 15px;
  }
  .vb-beta-badge,
  .sb-beta-badge,
  .rb-beta-badge,
  .wb-beta-badge,
  .fb-beta-badge,
  .zb-beta-badge {
    font-size: 8px;
    padding: 1px 6px;
  }
  .vb-header-divider,
  .sb-header-divider,
  .rb-header-divider,
  .wb-header-divider,
  .fb-header-divider,
  .zb-header-divider {
    display: none;
  }
  .vb-header-inner,
  .sb-header-inner,
  .wb-header-inner,
  .fb-header-inner,
  .zb-header-inner,
  .rb-header {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }
}