/* Mein RUDI – Header-Feinschliff (seit 22.07.2026)
   Alle Mein-Seiten nutzen den geteilten RUDI-Standard-Header (app-header.js);
   die frühere Bottom-Nav ist entfallen, ihre Punkte sind die Sub-Nav im Header.
   Diese Datei ergänzt nur, was seitenspezifisch nötig ist — app-header.css bleibt führend. */

/* PWA-Standalone: iOS-Statusleiste überlappt sticky top:0 → Safe-Area in den Header */
#rudi-app-header nav {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(56px + env(safe-area-inset-top, 0px));
}

/* Sub-Nav (Home/Chat/Übersicht/Ideen/Einstellungen) etwas kräftiger als die
   HFX360-Variante — sie ist hier die Haupt-Navigation, nicht nur Beiwerk. */
#rudi-app-header .rudi-subnav-link { font-size: 13.5px; }
#rudi-app-header .rudi-subnav-link.active { font-weight: 600; }
/* Nav-Punkte dürfen nicht gequetscht werden ("Einstellungen" wurde zu "Eins…"):
   die Leiste behält ihre Breite, dafür weicht der Zentrale-Link rechts —
   die Zentrale hängt links am Zurück-Pfeil bzw. am Hub. */
#rudi-app-header .rudi-subnav { flex: 0 0 auto; overflow: visible; }
/* Zentrale-Link und Benutzername weichen: Die Zentrale hängt links am Zurück-Pfeil,
   der Name steht auf jeder Seite gleich — beides kostete nur Platz, den Seitentitel
   und Nav-Punkte brauchen (auf chat.html mit 3 Zusatz-Buttons wurde es sonst eng). */
#rudi-app-header .nav-home,
#rudi-app-header .user-info { display: none; }
#rudi-app-header .nav-left { flex: 1 1 auto; min-width: 0; }
#rudi-app-header .nav-subtitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Modulteil ("Mein RUDI ›") auch am Desktop weglassen: er steht schon im
   Zurück-Button links; ohne ihn passt der Seitentitel neben die Nav-Punkte
   (auf chat.html wurde er sonst auf 0 gequetscht). */
#rudi-app-header .nav-subtitle-mod { display: none; }
/* Abmelden als reines Icon: die gesparte Textbreite braucht der Seitentitel
   (auf chat.html mit Verlauf/Neu/Export war er sonst auf 0 gequetscht). */
#rudi-app-header .rudi-logout .logout-text { display: none; }
#rudi-app-header .rudi-logout { padding: 0 10px; }
/* Seitentitel steht am Desktop doppelt (links + aktiver Nav-Punkt) — links weg.
   Mobil bleibt er: dort ist die Sub-Nav eine eigene Zeile und der Kopf sonst leer. */
@media (min-width: 601px) {
  #rudi-app-header nav.has-subnav .nav-subtitle,
  #rudi-app-header nav.has-subnav .nav-divider { display: none; }
}

/* Slot-Buttons der Seiten (Chat-Verlauf/Neu/Export, Ideen-Plus, Radar-Refresh) */
#rudi-app-header .icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px; border: none; background: transparent;
  color: var(--text-secondary, #636366); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
#rudi-app-header .icon-btn:hover { background: var(--card-hover-bg, rgba(0,0,0,.05)); color: var(--text-primary, #1c1c1e); }

/* Seiten-Container: Die Bottom-Nav ist weg → kein Reserve-Platz mehr unten.
   (uebersicht.css reserviert 140px für .app.has-bottomnav; die Klasse ist entfernt,
   diese Regel fängt Restfälle ab.) */
.app { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 600px) {
  #rudi-app-header .icon-btn { width: 38px; height: 38px; }
  /* Mobil weicht zusätzlich Abmelden (über Zentrale/Desktop erreichbar);
     die Icon-Reihe darf NICHT umbrechen, sonst wird der Header dreizeilig. */
  #rudi-app-header .rudi-logout { display: none; }
  /* Zeile 1 = Zurück + Titel + Icons (Icons dürfen nicht in eine eigene Zeile
     rutschen, sonst wird der Header dreizeilig); Zeile 2 = Sub-Nav. */
  #rudi-app-header .nav-right { flex-wrap: nowrap; flex: 0 0 auto; gap: 2px; }
  #rudi-app-header .nav-back .nav-back-text { display: none; }
  #rudi-app-header .icon-btn { width: 36px; height: 36px; }
  /* Sub-Nav bekommt mobil eine eigene Zeile unter dem Titel — sonst quetscht sie
     sich zwischen Titel und Icons und keiner der drei Blöcke ist lesbar. */
  #rudi-app-header nav {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 4px;
  }
  #rudi-app-header .rudi-subnav {
    order: 3;
    flex: 1 0 100%;
    margin: 0;
    padding: 2px 0 2px;
    gap: 2px;
    overflow-x: auto;
    border-top: 1px solid var(--nav-border, rgba(0,0,0,.06));
  }
  #rudi-app-header .rudi-subnav-link { padding: 6px 10px; font-size: 13px; }
  /* Die Komponente blendet den Seitentitel aus, sobald eine Sub-Nav da ist
     (HFX360-Logik). Hier sitzt die Sub-Nav in einer eigenen Zeile — Titel bleibt
     also sichtbar, sonst steht oben nur ein nackter Zurück-Pfeil.
     display EXPLIZIT setzen (Alt-Seiten-CSS blendet .nav-subtitle mobil aus). */
  #rudi-app-header nav.has-subnav .nav-subtitle { display: inline; }
}