/* ══════════════════════════════════════════════════════════
   Trustomat Unified Top-Nav · topnav.js
   EIN Balken für alle Mitarbeiter-Dashboards (ersetzt .topbar + Portal-Launcher-FAB).
   Eingebunden via <link rel="stylesheet" href="topnav.css"> + <script defer src="topnav.js">.
   Navy-Chrome in beiden Farbmodi (Marken-Identität) — bewusst eigene Farben, kein theme.css.
   ══════════════════════════════════════════════════════════ */
:root{ --tnav-h:52px; }

.tnav{
  position:fixed; top:0; left:0; right:0; height:var(--tnav-h); z-index:1200;
  background:#12234F; color:#fff;
  display:flex; align-items:center; gap:14px; padding:0 16px; box-sizing:border-box;
  font-family:'Poppins','Montserrat','Segoe UI',Arial,sans-serif;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
/* Seiteninhalt unter die fixe Leiste schieben. tnav-fixed = Vollbild-Flex-Seiten (ki/whatsapp). */
body.tnav-on{ padding-top:var(--tnav-h); }
body.tnav-on.tnav-flex{ padding-top:0; }
body.tnav-on.tnav-flex .tnav{ position:static; flex:none; }

/* Alte Per-Seite-Kopfzeile ausblenden — der Unified-Header ersetzt sie (Weg Y).
   Elemente bleiben im DOM (kein JS-Bruch durch fehlende #topbarUser etc.), nur unsichtbar.
   Wichtige Seiten-Buttons werden vorher via window.TOPNAV.adopt in den Header geholt. */
body.tnav-on .topbar{ display:none !important; }
/* Alten Portal-Launcher-FAB + Overlay neutralisieren (Markup bleibt → kein plOpen-Bruch). */
body.tnav-on .pl-fab,
body.tnav-on .pl-overlay{ display:none !important; }

.tnav-brand{ display:flex; align-items:center; gap:8px; white-space:nowrap; color:#fff; text-decoration:none; flex:none; }
.tnav-brand .tnav-logo{ width:24px; height:24px; border-radius:6px; background:#2d599f; display:flex; align-items:center; justify-content:center; font-size:13px; }
.tnav-brand .tnav-word{ font-weight:700; font-size:14px; letter-spacing:.5px; }
.tnav-brand .tnav-page{ font-weight:500; font-size:13px; color:#9fb3d6; border-left:1px solid rgba(255,255,255,0.18); padding-left:10px; margin-left:2px; }

.tnav-tabs{ display:flex; align-items:center; gap:2px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.tnav-tabs::-webkit-scrollbar{ display:none; }
.tnav-tab{ color:#cbd5e1; font-size:13px; padding:7px 11px; border-radius:7px; text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:background .12s,color .12s; }
.tnav-tab:hover{ color:#fff; background:rgba(255,255,255,0.08); }
.tnav-tab.active{ color:#fff; background:rgba(255,255,255,0.14); font-weight:600; }
.tnav-badge{ background:#2d599f; color:#fff; font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:5px; letter-spacing:.4px; }
.tnav-badge.beta{ background:rgba(255,193,7,0.2); color:#ffd766; }
.tnav-sep{ width:1px; height:20px; background:rgba(255,255,255,0.16); margin:0 4px; flex:none; }

.tnav-right{ display:flex; align-items:center; gap:10px; flex:none; }
.tnav-actions{ display:flex; align-items:center; gap:8px; }
.tnav-bell{ position:relative; background:none; border:none; color:#cbd5e1; cursor:pointer; font-size:18px; line-height:1; padding:4px; display:flex; }
.tnav-bell:hover{ color:#fff; }
.tnav-bell .tnav-dot{ position:absolute; top:1px; right:1px; width:7px; height:7px; border-radius:50%; background:#e24b4a; display:none; }
.tnav-bell.has-unread .tnav-dot{ display:block; }
.tnav-user{ width:30px; height:30px; border-radius:50%; background:#2d599f; color:#fff; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* User-Menü (Avatar → Abmelden) */
.tnav-umenu{ position:relative; flex:none; }
.tnav-umenu-pop{ position:absolute; top:calc(100% + 8px); right:0; background:#16284f; border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:6px; min-width:172px; display:none; flex-direction:column; gap:2px; box-shadow:0 12px 32px rgba(0,0,0,0.42); z-index:1300; }
.tnav-umenu.open .tnav-umenu-pop{ display:flex; }
.tnav-umenu-name{ color:#9fb3d6; font-size:12px; padding:7px 11px 7px; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:4px; white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.tnav-umenu-pop a{ color:#e2e8f0; font-size:13px; padding:8px 11px; border-radius:7px; text-decoration:none; }
.tnav-umenu-pop a:hover{ background:rgba(255,255,255,0.09); color:#fff; }

/* Adoptierte Seiten-Buttons im Header — :where() = 0 Spezifität, damit
   farbcodierte Buttons (Status-Ampel etc.) ihre eigene Farbe behalten,
   nackte Buttons (Wiki Bearbeiten/Neu) aber ein Navy-Pill bekommen. */
.tnav-actions{ gap:6px; flex-wrap:nowrap; }
.tnav-actions :where(button){ font-family:inherit; font-size:12px; font-weight:500; color:#fff; background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.16); padding:6px 11px; border-radius:7px; cursor:pointer; white-space:nowrap; line-height:1.3; height:auto; margin:0; }
.tnav-actions :where(button:hover){ background:rgba(255,255,255,0.18); }
.tnav-actions :where(span){ color:#cbd5e1; font-size:12px; white-space:nowrap; }
.tnav-actions :where(input[type=file]){ display:none; }
@media (max-width:920px){ .tnav-actions{ display:none; } }

/* Admin-Dropdown */
.tnav-adm{ position:relative; flex:none; }
.tnav-adm-btn{ color:#a8c1e8; font-size:13px; padding:7px 11px; border-radius:7px; background:none; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; font-family:inherit; }
.tnav-adm-btn:hover{ color:#fff; background:rgba(255,255,255,0.08); }
.tnav-adm-menu{ position:absolute; top:calc(100% + 8px); right:0; background:#16284f; border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:6px; min-width:180px; display:none; flex-direction:column; gap:2px; box-shadow:0 12px 32px rgba(0,0,0,0.42); }
.tnav-adm.open .tnav-adm-menu{ display:flex; }
.tnav-adm-menu a{ color:#cbd5e1; font-size:13px; padding:8px 11px; border-radius:7px; text-decoration:none; display:flex; align-items:center; gap:8px; }
.tnav-adm-menu a:hover{ background:rgba(255,255,255,0.09); color:#fff; }
.tnav-adm-menu a.active{ background:rgba(255,255,255,0.12); color:#fff; }

/* Burger (mobil) */
.tnav-burger{ display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:4px 6px; flex:none; }
.tnav-mob{ position:fixed; top:var(--tnav-h); left:0; right:0; bottom:0; z-index:1199; background:rgba(10,14,28,0.96);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:14px; display:none; flex-direction:column; gap:4px; overflow-y:auto; }
.tnav-mob.open{ display:flex; }
.tnav-mob a{ color:#e2e8f0; font-size:15px; padding:13px 14px; border-radius:10px; text-decoration:none; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.04); }
.tnav-mob a.active{ background:rgba(45,89,159,0.45); color:#fff; }
.tnav-mob .tnav-mob-grp{ color:#7d93b8; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:14px 14px 4px; }

@media (max-width:920px){
  .tnav-tabs, .tnav-adm{ display:none; }
  .tnav-burger{ display:flex; }
  .tnav-brand{ flex:1; }
}
@media print{ .tnav, .tnav-mob{ display:none !important; } body.tnav-on{ padding-top:0 !important; } }