/* css/app-chrome.css — die Pille unten
 *
 * Gehoert zu js/app-chrome.js. Nur Tokens aus css/keeva-ui.css (--k-*), keine
 * festen Farben — sonst stimmt einer der beiden Modi nicht, und man merkt es
 * erst, wenn jemand umschaltet.
 *
 * REIHENFOLGE DER EINBINDUNG: nach keeva-ui.css und style.css, damit die
 * Regeln hier gewinnen, ohne dass ueberall `!important` stehen muss.
 *
 * VERLINKUNGEN: js/app-chrome.js, js/home-admin.js (baut die Huelle),
 * docs/DEVLOG.md 2026-08-01.
 */

/* ══ KEINE Kopfzeile ════════════════════════════════════════════════════
   Bis 2026-08-02 stand hier eine app-weite Kopfzeile mit „+" links und
   Menue rechts. Sie ist entfallen (Stefan: „oben plus und hamburger weg
   stattdessen in pill einbauen"), weil an derselben Kante bereits die
   Navigationsleiste des Moduls sitzt — Zurueck, Titel, Aktionen. Zwei
   Navigationen uebereinander, mit verschiedenen Aufgaben.

   Apple trennt genau das: Navigationsleiste OBEN gehoert dem Bildschirm,
   Tab-Leiste UNTEN gehoert der App. Deshalb steht oben jetzt nur noch
   `.k-module-header` (css/style.css) und unten diese Pille.

   Damit entfaellt auch jede Polsterung nach oben. `body.k-ui` in
   css/style.css rechnet weiterhin mit `var(--nv-kopf-hoehe, 0px)` — die
   Variable wird nirgends mehr gesetzt und ist deshalb 0. Der Term bleibt
   stehen, damit eine spaetere feste Kopfzeile an genau einer Stelle
   wieder Platz bekommt. */
body.hat-chrome { padding-bottom: var(--ch-inhalt-sockel, var(--ch-nav-platz, 0px)); }

/* ══ Feste Bottom-Nav mit FAB (Rosé Atelier §9, Stefan-Freigabe 2026-08-25:
   «mach es unten fix rein solange wir keine app haben. plus in mitte») ═══

   EINE Zahl fuer alle Verwender: `--ch-nav-platz` ist der Raum, den die
   Leiste am unteren Rand belegt (Hoehe + Abstand + Safe-Area). Der Inhalt
   (body-Polster) und die Kalender-Datumsleiste rechnen beide damit — zwei
   eigene Zahlen liefen auseinander (Praezedenzfall --kal-pille, §7540
   style.css). */
/* Abstand zum Rand: auf Geraeten mit Home-Indikator sitzt die Leiste IN der
   Safe-Area (der Indikator schwebt ueber ihrem unteren Drittel, wie bei
   nativen Tab-Bars) — Stefans Befund «menu steht zu hoch». Ohne Indikator
   schlicht 12 px ueber dem Rand. */
body.hat-chrome {
  --ch-nav-hoehe: 66px;
  --ch-nav-unten: max(12px, calc(var(--nv-sockel-unten) - 14px));
  --ch-nav-platz: calc(var(--ch-nav-unten) + var(--ch-nav-hoehe) + 12px);
  /* GERECHNET statt geschaetzt (Befund 2026-08-26: die 90px-Schaetzung
     verdeckte in 7 von 8 Modulen die untersten Knoepfe). Der FAB ragt um
     diesen Betrag ueber die Leisten-Oberkante (.ch-fab margin nutzt
     DENSELBEN Token — eine Zahl, eine Stelle). Inhalt braucht deshalb
     mehr Sockel (--ch-inhalt-sockel) als die Leiste belegt
     (--ch-nav-platz); die Kalender-Datumsleiste sitzt dagegen direkt AUF
     der Leiste und rechnet weiter mit --ch-nav-platz. */
  --ch-fab-ueberstand: 30px;
  --ch-inhalt-sockel: calc(var(--ch-nav-platz) + var(--ch-fab-ueberstand));
}

.ch-tabbar {
  position: fixed;
  left: 14px; right: 14px;
  bottom: var(--ch-nav-unten, 12px);
  z-index: var(--z-navigation, 200);
  height: var(--ch-nav-hoehe, 66px);
  display: grid;
  grid-template-columns: 1fr 1fr 76px 1fr 1fr;
  align-items: center;
  padding: 4px 8px 6px;
  border-radius: var(--nv-r-kapsel, 999px);
  background: var(--nv-glas, rgba(255, 255, 255, .68));
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--nv-glas-line, rgba(58, 36, 42, .06));
  box-shadow: 0 12px 34px rgba(40, 20, 26, .2);
  max-width: 560px;
  margin: 0 auto;
}

.ch-tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: var(--nv-tap, 44px);
  justify-content: center;
  border: none; background: transparent;
  color: var(--k-text3);
  font-family: inherit;
  font-size: 10px; font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--m-schnell, .18s) var(--m-glatt, ease), transform var(--m-schnell, .18s) var(--m-glatt, ease);
}
.ch-tab:active { transform: scale(.94); }
.ch-tab .material-symbols-rounded { font-size: 26px; font-variation-settings: var(--nv-icon-navigation); }
.ch-tab.ist-aktiv { color: var(--k-brand); }
.ch-tab.ist-aktiv .material-symbols-rounded { font-variation-settings: var(--nv-icon-navigation-aktiv); }

/* Login/Logout und Formular-Modus verstecken die Leiste ueber
   `hideBottomNav()` (js/form.js) — die Klasse muss hier greifen. */
.ch-tabbar.hidden { display: none; }

/* Ist ein Blatt offen, bleibt die Leiste SICHTBAR ueber der Abdunkelung
   (abgenommene Demo, Screens «Menü» und «Plus»): ein Tipp auf Home oder
   Kalender schliesst das Blatt und navigiert — navTo raeumt Blaetter selbst
   weg. Nur dann angehoben, sonst laege die Leiste auch ueber ganzseitigen
   Overlays (Ebenen-Skala: Seite 1000 < Blatt 2000). */
body:has(.k-bsheet-backdrop.active) .ch-tabbar {
  z-index: var(--z-tabbar-ueber-blatt, 2102);
}

/* E2.2b (2026-09-01): Liegt ein Blatt-Overlay (`.k-sheet-overlay.open`,
   Admin-Panel, Salon-Menue, Kunden-Blatt) ueber der Leiste, wird die Leiste
   DECKEND — «ein Blatt ueber einer Leiste heisst: Leiste wird opak»
   (Pruefbedingung 2, nie Glas auf Glas). Sonst laegen drei Glasebenen
   uebereinander: Leiste, Abdunklung, Blatt. */
body:has(.k-sheet-overlay.open) .ch-tabbar {
  background: var(--k-surface-solid);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Der FAB — das EINE leuchtende Element des Rahmens (§2). Er ragt ueber die
   Leiste hinaus, traegt den Marken-Verlauf und atmet ruhig. */
.ch-fab {
  width: 64px; height: 64px;
  margin: calc(-1 * var(--ch-fab-ueberstand, 30px)) auto 0;
  border-radius: 50%;
  border: none;
  background: var(--nv-grad, var(--k-brand));
  background-size: 180% 180%;
  color: var(--k-text-on-brand, rgba(255, 255, 255, 1));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(217, 79, 96, .45);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  animation: chAtmen var(--m-atmen, 6s) ease-in-out infinite alternate;
  transition: transform var(--m-schnell, .18s) var(--m-glatt, ease);
}
/* Sichtbarer Puls-Ring (die alte outline-Animation war auf iOS praktisch
   unsichtbar — Stefan 2026-08-25: «das + bewegt sich nicht»). transform +
   opacity laufen auf dem Compositor, also auch auf dem Telefon fluessig. */
.ch-fab::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(var(--k-brand-rgb), .65);
  animation: chPuls var(--m-puls) ease-out infinite;
  pointer-events: none;
}
.ch-fab:active { transform: scale(.92); }
.ch-fab .material-symbols-rounded {
  font-size: 32px; font-variation-settings: var(--nv-icon-invers);
  transition: transform var(--m-standard) var(--m-feder);
}
/* Blatt offen → das «+» dreht sich zum «×» und schliesst (app-chrome.js). */
body:has(.k-bsheet-backdrop.active) .ch-fab .material-symbols-rounded { transform: rotate(45deg); }
body:has(.k-bsheet-backdrop.active) .ch-fab::after { animation: none; opacity: 0; }
@keyframes chAtmen {
  from { background-position: 0% 40%; box-shadow: 0 10px 26px rgba(217, 79, 96, .4); }
  to   { background-position: 100% 60%; box-shadow: 0 16px 40px rgba(217, 79, 96, .62); }
}
@keyframes chPuls {
  0%   { transform: scale(1); opacity: .85; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.ch-zahl {
  position: absolute; top: 2px; right: calc(50% - 22px);
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--k-r-full, 999px);
  background: var(--k-red, rgba(239, 68, 68, 1)); color: var(--k-text-on-brand, rgba(255, 255, 255, 1));
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--k-glass-bg-strong, rgba(255, 255, 255, .9));
}

/* Kalender: die fixe Datumsleiste (#kal-tagbar, style.css §7424) rueckt auf
   dem Telefon UEBER die Leiste. `_kalHoeheSetzen` (js/buchungen.js) misst die
   Oberkante der Datumsleiste — das Raster folgt von selbst. NUR am Telefon:
   auf dem Desktop ist die Leiste weg und die Datumsleiste bleibt buendig
   unten (Stefan 2026-08-22: «muss immer fix unten sein»). */
@media (max-width: 768px) {
  body.hat-chrome:not(.has-sidebar) #kal-tagbar {
    bottom: calc(var(--ch-nav-platz, 14px) - 14px);
    padding-bottom: 2px;
  }
}

/* ── Blatt „Schnellzugriff" ─────────────────────────────────────────── */
.ch-blatt-zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ch-blatt-zeile:active { opacity: .6; }
.ch-blatt-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--k-fill, rgba(120, 120, 128, .08));
  color: var(--k-text);
}
.ch-blatt-icon .material-symbols-rounded { font-size: 22px; }
.ch-blatt-text { display: flex; flex-direction: column; min-width: 0; }
.ch-blatt-text b { font-size: .93rem; font-weight: 600; color: var(--k-text); }
.ch-blatt-text small { font-size: .76rem; color: var(--k-text3); margin-top: 1px; }

/* ══ Desktop ════════════════════════════════════════════════════════════
   Ab Tablet uebernimmt die Seitenleiste. Die Leiste unten waere dort
   doppelt — und ein Element, das dieselbe Aufgabe zweimal anbietet, ist
   schlechter als eines, das sie einmal anbietet. Ohne Leiste auch kein
   Platz-Polster am Inhalt. */
@media (min-width: 769px) {
  .ch-tabbar { display: none !important; }
  body.hat-chrome { --ch-nav-platz: 0px; --ch-inhalt-sockel: 0px; }
}
body.has-sidebar .ch-tabbar { display: none !important; }
body.has-sidebar.hat-chrome { --ch-nav-platz: 0px; --ch-inhalt-sockel: 0px; }


/* ══ Raster der Startseite ══════════════════════════════════════════════
   Diese drei Bloecke standen bis 2026-08-01 als inline-Stil im JavaScript
   („display:flex;gap:12px"). Das laesst sich per Stylesheet nur mit
   !important ueberstimmen — und dann liegt die Bildschirm-Regel woanders als
   die Telefon-Regel, was beim naechsten Aendern garantiert auseinanderlaeuft.
   Hier stehen die Telefon-Werte; die Bildschirm-Werte in
   css/desktop-layout.css, direkt daneben im selben Verzeichnis. */
.k-home-duo {
  display: flex;
  gap: 12px;
  padding: 24px 0 0;
  margin: 0;
}
.k-home-duo > * { flex: 1; min-width: 0; }

.k-home-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}

/* Der Hamburger-Knopf (2026-08-22) ist durch die feste Bottom-Nav oben in
   dieser Datei ersetzt (Stefan-Freigabe Rosé Atelier 2026-08-25). */