/* ════════════════════════════════════════════════════════════════════════════
   iPii.TV — Unified Header System CSS  (Pass #157k · rebuilt 2026-06-09)
   Single source of truth for all redesign-module topbars.
   Rebuilt after the 2026-06-09 night Vite-deploy wiped /assets/topbar-shared.css.
   Markup lives in /topbar-preview.html (4 variants) + each module index.html.
   Brand tokens are canonical (4-bar logo · #b3362f · #FDF3F3).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --ipii-brand:        #b3362f;
  --ipii-brand-bright: #e63a3a;
  --ipii-brand-dark:   #8a1d1d;
  --ipii-ink:          #FDF3F3;
  --ipii-bg-ultra:     #050506;

  /* Topbar */
  --topbar-h-desktop: 68px;
  --topbar-h-mobile:  58px;
  --topbar-bg:        rgba(5,5,6,.92);
  --topbar-blur:      blur(22px) saturate(140%);
  --topbar-z:         100;
  --topbar-pad-x:     22px;
  --topbar-hairline:  linear-gradient(90deg, transparent, rgba(179,54,47,.55), transparent);
}

/* ─── TOPBAR SHELL ──────────────────────────────────────────────────────── */
.ipii-topbar{
  position: sticky; top: 0; z-index: var(--topbar-z);
  display: flex; align-items: center; gap: 18px;
  height: var(--topbar-h-desktop);
  padding: 0 var(--topbar-pad-x);
  background: var(--topbar-bg);
  -webkit-backdrop-filter: var(--topbar-blur);
  backdrop-filter: var(--topbar-blur);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.ipii-topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: var(--topbar-hairline); opacity:.7; pointer-events:none;
}

/* ─── BRAND BLOCK (Logo + Wordmark + Tagline) ───────────────────────────── */
.ipii-brand{
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; flex-shrink: 0;
  transition: transform .14s ease;
}
.ipii-brand:hover{ transform: translateY(-1px); }

/* THE CRITICAL RULE — without it the SVG (viewBox 545.76×500, no width/height attrs)
   expands to its container and fills the whole viewport. */
.ipii-logo-mark{
  width: 30.5px; height: 28px;
  flex-shrink: 0; display: block;
  filter: drop-shadow(0 2px 8px rgba(179,54,47,.28));
}
.ipii-logo-mark rect{ transition: opacity .3s ease; }

.ipii-brand-text{ display: flex; flex-direction: column; gap: 1px; line-height: 1; }
.ipii-brand-wordmark{
  font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: #fff;
}
.ipii-brand-wordmark .dot{ color: var(--ipii-brand-bright); }
.ipii-brand-sub{
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.42);
}
.ipii-brand-sub .accent{ color: var(--ipii-brand); }

/* ─── CENTER SLOT (search / breadcrumb / empty) ─────────────────────────── */
.ipii-center{ flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; }

.ipii-search{
  display: flex; align-items: center; gap: 9px;
  width: 100%; max-width: 460px;
  padding: 9px 14px; border-radius: 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .15s, background .15s;
}
.ipii-search:focus-within{ border-color: var(--ipii-brand); background: rgba(179,54,47,.06); }
.ipii-search svg{ width: 17px; height: 17px; color: rgba(255,255,255,.5); flex-shrink: 0; }
.ipii-search input{
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  color: #fff; font: 500 14px/1.2 'Inter', system-ui, sans-serif;
}
.ipii-search input::placeholder{ color: rgba(255,255,255,.38); }

.ipii-breadcrumb{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.55); }
.ipii-breadcrumb .crumb-sep{ color: rgba(255,255,255,.25); }
.ipii-breadcrumb .crumb-current{ color: #fff; font-weight: 600; }

/* ─── IDENTITY (chips + user + clock + hamburger) ───────────────────────── */
.ipii-identity{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.ipii-chip{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s;
}
.ipii-chip:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.ipii-chip:active{ transform: scale(.96); }
.ipii-chip-icon{ font-size: 13px; line-height: 1; }
.ipii-chip-label{ letter-spacing: .01em; }
.ipii-chip-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.3); flex-shrink: 0;
}
.ipii-chip-dot[data-state="on"]{
  background: #34d27b; box-shadow: 0 0 8px rgba(52,210,123,.7);
}
.ipii-chip-dot[data-state="off"]{ background: rgba(255,255,255,.25); box-shadow: none; }

.ipii-user-chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 5px; border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none; color: rgba(255,255,255,.82);
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  transition: background .15s, border-color .15s, transform .12s;
}
.ipii-user-chip:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.ipii-user-chip:active{ transform: scale(.96); }
.ipii-user-avatar{
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ipii-brand), var(--ipii-brand-dark));
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em;
  flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.ipii-user-name{ max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ipii-clock{
  font: 600 13px/1 'JetBrains Mono', ui-monospace, monospace;
  color: rgba(255,255,255,.6); white-space: nowrap; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.ipii-back-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.75); text-decoration: none; flex-shrink: 0;
  transition: background .15s, color .15s, transform .12s;
}
.ipii-back-btn:hover{ background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.14); }
.ipii-back-btn:active{ transform: scale(.94); }
.ipii-back-btn svg{ width: 18px; height: 18px; }

.ipii-hamburger{
  display: none;
  width: 38px; height: 38px; border-radius: 10px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.85); cursor: pointer;
  transition: background .15s, transform .12s;
}
.ipii-hamburger:hover{ background: rgba(255,255,255,.1); }
.ipii-hamburger:active{ transform: scale(.94); }
.ipii-hamburger svg{ width: 20px; height: 20px; }

/* ─── DRAWER (mobile side-panel, injected by topbar-shared.js) ──────────── */
.ipii-drawer-backdrop{
  position: fixed; inset: 0; z-index: 998;
  background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.ipii-drawer-backdrop.open{ opacity: 1; visibility: visible; }
.ipii-drawer{
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 999;
  width: 88vw; max-width: 340px;
  background: linear-gradient(180deg, rgba(12,12,14,.99), rgba(6,6,8,.99));
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255,255,255,.08);
  box-shadow: -24px 0 60px rgba(0,0,0,.55);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; padding: 18px 16px;
  overflow-y: auto;
}
.ipii-drawer.open{ transform: translateX(0); }
.ipii-drawer-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 0 4px; }
.ipii-drawer-close{
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ipii-drawer-close:hover{ background: rgba(255,255,255,.09); }
.ipii-nav-item{
  display: flex; align-items: center; gap: 13px;
  padding: 12px 12px; border-radius: 12px; margin-bottom: 4px;
  text-decoration: none; color: rgba(255,255,255,.78);
  transition: background .14s, color .14s;
}
.ipii-nav-item:hover{ background: rgba(255,255,255,.05); color: #fff; }
.ipii-nav-item.active{
  background: rgba(179,54,47,.16); color: #fff;
  border: 1px solid rgba(179,54,47,.34);
}
.ipii-nav-icon{ width: 22px; height: 22px; flex-shrink: 0; color: inherit; }
.ipii-nav-label{ font-size: 14px; font-weight: 600; line-height: 1.1; }
.ipii-nav-sub{ font-size: 11px; color: rgba(255,255,255,.42); line-height: 1.1; margin-top: 2px; }
.ipii-nav-text{ display: flex; flex-direction: column; }
.ipii-drawer-divider{ height: 1px; background: rgba(255,255,255,.07); margin: 14px 6px; }
.ipii-drawer-foot{ margin-top: auto; padding: 14px 8px 4px; font-size: 11px; color: rgba(255,255,255,.3); }
.ipii-nav-item.logout{ color: #f0a5a5; }
.ipii-nav-item.logout:hover{ background: rgba(179,54,47,.14); color: #ffc9c9; }

/* ─── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 1024px){
  .ipii-chip-label{ display: none; }
  .ipii-chip{ padding: 8px; }
  .ipii-user-name{ max-width: 90px; }
}
@media (max-width: 768px){
  .ipii-topbar{ height: var(--topbar-h-mobile); gap: 10px; padding: 0 14px; }
  .ipii-logo-mark{ width: 24px; height: 22px; }
  .ipii-brand-wordmark{ font-size: 15px; }
  .ipii-brand-sub{ display: none; }
  .ipii-search{ max-width: none; padding: 8px 12px; }
  .ipii-user-name{ display: none; }
  .ipii-user-chip{ padding: 4px; }
  .ipii-clock{ display: none; }
  .ipii-hamburger{ display: inline-flex; }
  .ipii-chip{ display: none; }
}
@media (max-width: 420px){
  .ipii-center .ipii-breadcrumb{ display: none; }
}

/* a11y (2026-06-10): sichtbarer Tastatur-Fokus auf interaktiven Topbar-Elementen */
.ipii-hamburger:focus-visible,
.ipii-user-chip:focus-visible,
.ipii-chip:focus-visible,
.ipii-search:focus-visible,
.ipii-brand:focus-visible{
  outline:2px solid var(--ipii-brand-bright,#c5302f);
  outline-offset:2px;
  border-radius:10px;
}