/* === RUDI App-Header — geteilte Header-Komponente (2026-05-25) ===
 * Einheitlicher Header für ALLE Seiten. Markup wird von app-header.js injiziert.
 * Alles unter #rudi-app-header gescoped → gewinnt per Spezifität gegen
 * seiteneigene nav{}-Regeln, ohne die per-Seite-CSS anfassen zu müssen.
 * Theming über lokale Variablen mit Fallbacks (funktioniert auch ohne Seiten-CSS).
 */

#rudi-app-header {
  --h-nav-bg: var(--nav-bg, rgba(255,255,255,0.55));
  --h-nav-border: var(--nav-border, rgba(0,0,0,0.08));
  --h-text: var(--text-primary, #1c1c1e);
  --h-text2: var(--text-secondary, #636366);
  --h-toggle-bg: var(--toggle-bg, rgba(0,0,0,0.06));
  --h-border: var(--card-border, rgba(0,0,0,0.1));
  --h-hover: var(--card-hover-bg, rgba(0,0,0,0.05));
  --h-accent: var(--accent, #04b3d6);
  --h-knob: var(--toggle-knob, #ffffff);
}
[data-theme="dark"] #rudi-app-header {
  --h-nav-bg: var(--nav-bg, rgba(20,20,30,0.55));
  --h-nav-border: var(--nav-border, rgba(255,255,255,0.1));
  --h-text: var(--text-primary, #f5f5f7);
  --h-text2: var(--text-secondary, #a1a1a6);
  --h-toggle-bg: var(--toggle-bg, rgba(255,255,255,0.1));
  --h-border: var(--card-border, rgba(255,255,255,0.12));
  --h-hover: var(--card-hover-bg, rgba(255,255,255,0.08));
  --h-knob: var(--toggle-knob, #f5f5f7);
}

#rudi-app-header nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--h-nav-bg);
  backdrop-filter: blur(44px) saturate(180%);
  -webkit-backdrop-filter: blur(44px) saturate(180%);
  border-bottom: 1px solid var(--h-nav-border);
  padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.3s;
}

#rudi-app-header .nav-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; overflow: hidden; }
#rudi-app-header .nav-logo { height: 28px; width: auto; flex-shrink: 0; }
[data-theme="dark"] #rudi-app-header .nav-logo { filter: brightness(2.2) contrast(0.85); }
#rudi-app-header .nav-brand { font-size: 16px; font-weight: 700; color: var(--h-text); letter-spacing: -0.4px; transition: color 0.3s; }
#rudi-app-header .nav-divider { width: 1px; height: 18px; background: var(--h-nav-border); margin: 0 2px; flex-shrink: 0; }
#rudi-app-header .nav-subtitle { font-size: 12px; color: var(--h-text2); font-weight: 500; transition: color 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#rudi-app-header .nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

#rudi-app-header .user-info { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--h-text2); transition: color 0.3s; }
#rudi-app-header .user-dot { width: 7px; height: 7px; border-radius: 50%; background: #30d158; flex-shrink: 0; }

#rudi-app-header .nav-bell {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--h-text); text-decoration: none; transition: all 0.2s;
  border: 1px solid var(--h-border); background: var(--h-toggle-bg);
}
#rudi-app-header .nav-bell:hover { background: var(--h-hover); color: var(--h-accent); }

#rudi-app-header .logout-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--h-border); background: var(--h-toggle-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--h-text2); font-size: 12.5px; font-weight: 500;
  font-family: inherit; cursor: pointer; text-decoration: none;
  transition: all 0.2s; -webkit-tap-highlight-color: transparent;
}
#rudi-app-header .logout-btn:hover { background: var(--h-hover); color: var(--h-text); }

#rudi-app-header .theme-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#rudi-app-header .toggle-icon { font-size: 14px; line-height: 1; }
#rudi-app-header .toggle-track {
  width: 44px; height: 26px; border-radius: 13px;
  background: var(--h-toggle-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--h-border); position: relative; transition: all 0.3s;
}
#rudi-app-header .toggle-knob {
  width: 20px; height: 20px; border-radius: 10px; background: var(--h-knob);
  position: absolute; top: 2px; left: 3px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
[data-theme="dark"] #rudi-app-header .toggle-knob { left: 21px; }

/* Mobile: Text-Labels raus (nur Icons) → kein horizontaler Overflow */
@media (max-width: 600px) {
  #rudi-app-header nav { padding: 0 12px; }
  #rudi-app-header .nav-subtitle,
  #rudi-app-header .nav-divider,
  #rudi-app-header .user-info { display: none; }
  #rudi-app-header .nav-right { gap: 8px; }
  #rudi-app-header .nav-home-text,
  #rudi-app-header .logout-text { display: none; }
  #rudi-app-header .logout-btn { padding: 7px; }
}

/* Modul-Unternavigation (optional, aus <a>-Kindern des Platzhalters) */
#rudi-app-header .rudi-subnav { display:flex; align-items:center; gap:4px; margin:0 12px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
#rudi-app-header .rudi-subnav::-webkit-scrollbar { display:none; }
#rudi-app-header .rudi-subnav-link { white-space:nowrap; padding:6px 12px; border-radius:8px; font-size:13px; font-weight:500; color:var(--h-text2); text-decoration:none; transition:all 0.2s; display:inline-flex; align-items:center; gap:5px; }
#rudi-app-header .rudi-subnav-link:hover { background:var(--h-toggle-bg); color:var(--h-text); }
#rudi-app-header .rudi-subnav-link.active { background:var(--h-toggle-bg); color:var(--h-accent); }
@media (max-width:600px) { #rudi-app-header .rudi-subnav { margin:0 6px; } }