/* ══ Redesign "Design perfekt" – App-Rahmen (Sidebar) ════════════════════════
   Wird nur in app.html geladen (nach components.css, vor helper.css) und
   ueberschreibt dort die alten Sidebar-Regeln. Verhalten: js/shell.js. */

/* Sidebar eingeklappt (Desktop) – Recherche Frage 14 */
.nav-subitem .nav-icon:empty { display: none; }
.nav-flyout-head { display: none; }
/* Name/Abo unten: beim Ein-/Ausklappen nicht umbrechen (sonst springt die Karte) */
.sidebar-user-text { overflow: hidden; }
.sidebar-user .u-name, .sidebar-user .u-plan { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

@media (min-width: 761px) {
  .sidebar.collapsed { width: 72px; padding: 16px 12px; }
  .sidebar.collapsed .sidebar-logo { flex-direction: column; align-items: center; gap: 8px; padding: 4px 0 8px; }
  .sidebar.collapsed .sidebar-logo .logo-mark { width: auto; height: 28px; flex-shrink: 0; }
  .sidebar.collapsed .sidebar-logo .logo-word { display: none; }
  .sidebar.collapsed .sidebar-collapse-btn { margin: 0; width: 32px; height: 32px; align-items: center; justify-content: center; }
  .sidebar.collapsed .nav-section-label { font-size: 0; height: 1px; padding: 0; margin: 10px 6px; background: var(--card-border); }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-chevron,
  .sidebar.collapsed .sidebar-user-text,
  .sidebar.collapsed .user-menu-chevron { display: none; }
  .sidebar.collapsed .nav-item { width: 44px; height: 44px; margin: 0 auto 4px; padding: 0; justify-content: center; border-left: none; }
  .sidebar.collapsed .nav-item .nav-icon, .sidebar.collapsed .nav-item .nav-icon svg { width: 22px; height: 22px; }
  .sidebar.collapsed .nav-item.active { box-shadow: inset 3px 0 0 var(--gold); padding-left: 0; }
  /* Unterseite von "Bewerbung" aktiv: Gruppen-Knopf sieht aus wie ein aktiver Punkt (shell.js) */
  .sidebar.collapsed .nav-group-toggle.is-child-active {
    background: var(--gold-light); color: var(--gold-text); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--gold); padding-left: 0;
  }
  .sidebar.collapsed .sidebar-user { justify-content: center; padding: 6px; border: none !important; background: transparent !important; }
  .sidebar.collapsed .sidebar-user .user-avatar { width: 36px; height: 36px; border-radius: 50%; }

  /* Gruppe "Bewerbung" eingeklappt: nur als Flyout, nie als Linie in der Leiste */
  .sidebar.collapsed .nav-group { display: none !important; }
  .sidebar.collapsed .nav-group.is-flyout {
    display: block !important; position: fixed; left: 80px; /* Rueckfall, shell.js setzt die Lage */ width: 240px; margin: 0; padding: 8px;
    border-left: none; border-radius: 16px; z-index: 60;
    /* Hintergrund und Schatten: depth.css (Glas-Ebene) */
  }
  .sidebar.collapsed .nav-group.is-flyout .nav-flyout-head { display: block; padding: 8px 10px 6px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; border-radius: var(--r-small); }
  .sidebar.collapsed .nav-group.is-flyout .nav-flyout-head:hover { color: var(--text); background: var(--bg-second); }
  .sidebar.collapsed .nav-group.is-flyout .nav-item { width: auto; height: 40px; margin: 0 0 2px; padding: 0 10px; justify-content: flex-start; gap: 10px; }
  .sidebar.collapsed .nav-group.is-flyout .nav-label { display: inline; }
  .sidebar.collapsed .nav-group.is-flyout .nav-item.active { box-shadow: none; }

  /* Profilmenue eingeklappt: fest neben der Leiste, volle Breite (left = Rueckfall, shell.js setzt die Lage) */
  .sidebar.collapsed .user-menu { position: fixed; left: 80px; right: auto; bottom: 12px; width: 240px; z-index: 60; }
}

/* Tooltip (ein Element fuer alle, haengt am body, siehe shell.js) */
.shell-tip {
  position: fixed; z-index: 70; pointer-events: none; padding: 6px 10px; border-radius: 8px;
  background: var(--text); color: var(--gold-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateX(-4px);
}
.shell-tip.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .shell-tip { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
}