/* ==========================================================================
   canopy. — Navigation: Tab-Bar, FAB, Hamburger-Slide-in
   ========================================================================== */

/* -- Kopfzeile: Hamburger links, Sonne/Mond rechts -- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  /* 1fr/auto/1fr statt flex+space-between: bei space-between rutscht die
     Marke optisch zur schmaleren Seite (Hamburger ist schmaler als die
     Sonne/Mond-Anzeige), dadurch sitzt "canopy." nicht wirklich mittig auf
     dem Bildschirm, sondern nur mittig ZWISCHEN den beiden Icons
     (s. Absprache). Mit gleich breiten äußeren Spalten ist die mittlere
     Spalte (und damit die Marke) unabhängig von der Icon-Breite echt
     zentriert. */
  grid-template-columns: 1fr auto 1fr;
  align-items: start; /* nicht center: die Sonne/Mond-Anzeige ist als
    Ganzes (Pille + Countdown darunter) höher als die einzeilige
    Überschrift und ragt beim Zentrieren über deren Oberkante hinaus,
    s. Absprache */
  padding: calc(var(--space-3) + var(--safe-top)) var(--space-4) var(--space-3);
  background: linear-gradient(var(--bg-base) 70%, transparent);
}

.topbar .brand {
  grid-column: 2;
  justify-self: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.topbar #menu-btn {
  grid-column: 1;
  justify-self: start;
  margin-top: -2px; /* Hamburger-Icon saß gegenüber Sonne/Mond einen Tick
    zu tief, s. Absprache */
}

.topbar .light-indicator {
  /* Absolut statt im Grid-Fluss: die Sonne/Mond-Anzeige ist inkl.
     Countdown-Text deutlich höher als Hamburger/Marke -- im Grid-Fluss
     bestimmte ihre Höhe die Höhe der GANZEN Kopfzeile, wodurch der Inhalt
     darunter viel zu weit runtergedrückt wurde (Bug, auf dem echten Gerät
     gefunden -- im Testbrowser durch die simulierte, aber falsch platzierte
     Notch nicht aufgefallen). Absolut positioniert "hängt" sie stattdessen
     einfach über den nachfolgenden Inhalt, ohne dessen Position zu
     beeinflussen, s. Absprache ("Mond soll ungefähr auf Höhe von Run #4
     sein"). */
  position: absolute;
  top: calc(var(--space-3) + var(--safe-top));
  right: var(--space-4);
}

.icon-btn {
  background: none;
  border: none;
  padding: var(--space-2);
  min-width: 44px; /* Apple-Mindest-Tastziel -- X/Plus-Buttons in Overlay-
    Headern waren zu klein, s. Absprache */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 22px; /* betrifft die Buttons, die ✕/+ als reines Textzeichen
    nutzen (nicht die SVG-Icon-Buttons, die ignorieren font-size) -- das
    Tastziel war schon vergrößert, aber das sichtbare Zeichen selbst blieb
    winzig, s. Absprache */
  line-height: 1;
}

.icon-btn svg {
  width: 22px;
  height: 22px;
}

/* -- Backup-Erinnerung: schwebender, leicht wegwischbarer Hinweis --
   erscheint app-weit (nicht an Dashboard gebunden), schließt sich per X
   oder Klick irgendwo anders auf der Seite (s. Absprache). */
.backup-reminder {
  position: fixed;
  top: calc(var(--safe-top) + 60px);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 45;
  background: var(--bg-elevated-2);
  border: 1px solid rgba(216, 138, 95, 0.35);
  border-radius: var(--radius-tile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.backup-reminder[hidden] {
  display: none;
}

.backup-reminder-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  text-align: left;
  font-size: 13px;
  color: var(--text-primary);
}

.backup-reminder-text svg {
  width: 18px;
  height: 18px;
  color: var(--status-warn);
  flex-shrink: 0;
}

/* -- Untere Tab-Bar -- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--tabbar-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--bg-elevated);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 30;
}

.tab-item {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-body);
  flex: 1;
  padding: var(--space-2) 0;
}

.tab-item svg {
  width: 22px;
  height: 22px;
}

.tab-item.active {
  color: var(--accent-green);
}

/* Mittlerer Dashboard-Tab: prominenter, angehoben */
.tab-item.tab-main {
  position: relative;
}

.tab-item.tab-main .tab-main-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated-2);
  border: 1px solid rgba(95, 214, 138, 0.25);
  margin-bottom: 2px;
  transform: translateY(-6px);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tab-item.tab-main.active .tab-main-circle {
  /* Undurchsichtiges Grün statt --accent-green-dim (rgba, 14% Deckkraft):
     der Kreis ragt per translateY über die Tab-Leiste hinaus in den
     Content-Bereich, der einen anderen Hintergrund hat als die Tab-Leiste
     selbst -- bei einer durchsichtigen Füllung schimmerten dort zwei
     unterschiedliche Grüntöne durch (s. Absprache). Fester Wert ist
     --accent-green-dim vorgerechnet auf --bg-elevated (dem Hintergrund,
     über dem der Kreis größtenteils liegt), damit der Look identisch
     bleibt, nur eben blickdicht. */
  background: #253932;
  border-color: var(--accent-green);
}

.tab-item.tab-main svg {
  width: 24px;
  height: 24px;
}

/* -- FAB -- */
.fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--tabbar-height) + var(--safe-bottom) + var(--space-4));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-green);
  color: var(--bg-base);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(95, 214, 138, 0.35);
  z-index: 35;
  transition: transform 0.15s ease;
}

.fab:active {
  transform: scale(0.94);
}

.fab svg {
  width: 26px;
  height: 26px;
}

/* -- Quick-Add-Sheet (Bottom-Sheet, Platzhalter-Struktur) -- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.quick-add-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-elevated);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: var(--space-5) var(--space-4) calc(var(--space-5) + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 41;
}

.sheet-backdrop.open .quick-add-sheet {
  transform: translateY(0);
}

.quick-add-sheet h3 {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  font-weight: 500;
}

.quick-add-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.quick-add-option {
  background: var(--bg-elevated-2);
  border: none;
  border-radius: var(--radius-tile);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: 13px;
}

.quick-add-option svg {
  width: 22px;
  height: 22px;
  color: var(--accent-green);
}

/* -- Chart-Modal (Dashboard-Kacheln: Licht-/Abluft-Verlauf, Liter-pro-
   Woche, Notizen) -- schwebt zentriert über dem Dashboard, das durch den
   geblurrten Backdrop noch sichtbar bleibt. Anders als die Vollbild-
   Overlays der Bibliothek, weil man hier nur kurz eine Kennzahl nachschaut,
   nicht in einen ganzen Bereich reingeht (s. Absprache). */
.chart-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--bg-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.chart-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Bestätigungs-Dialog kann aus jedem Kontext heraus aufgerufen werden
   (auch aus den Vollbild-Overlays der Bibliothek, z-index 60) — muss
   deshalb über allem anderen liegen. */
#confirm-dialog-overlay {
  z-index: 70;
}

.confirm-dialog {
  max-width: 340px;
}

.confirm-dialog .chart-modal-scroll {
  padding: var(--space-5) var(--space-4) var(--space-4);
}

#confirm-dialog-message {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.confirm-dialog-actions {
  display: flex;
  gap: var(--space-2);
}

.confirm-dialog-btn {
  flex: 1;
  border: none;
  border-radius: var(--radius-tile);
  padding: var(--space-3);
  font-size: 14px;
  font-weight: 600;
}

.confirm-dialog-btn-cancel {
  background: var(--bg-elevated-2);
  color: var(--text-secondary);
}

.confirm-dialog-btn-confirm {
  background: var(--status-warn);
  color: var(--bg-base);
}

.chart-modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  width: 100%;
  max-width: 480px;
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transform: scale(0.94);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.chart-modal-backdrop.open .chart-modal {
  transform: scale(1);
}

.chart-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}

.chart-modal-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.chart-modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* -- Slide-in Run-Menü (von links) -- */
.side-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(78vw, 320px);
  background: var(--bg-elevated);
  z-index: 51;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  padding: calc(var(--space-5) + var(--safe-top)) var(--space-4) var(--space-5);
  overflow-y: auto;
}

.side-panel.open {
  transform: translateX(0);
}

.side-panel h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.run-list-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.run-list-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-tile);
  text-align: left;
}

.run-delete-btn {
  background: none;
  border: none;
  padding: 0 var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.run-delete-btn svg {
  width: 18px;
  height: 18px;
}

.run-delete-btn:active {
  color: var(--status-warn);
}

.run-list-item.active {
  background: var(--accent-green-dim);
}

.run-list-item .run-name {
  font-size: 14px;
  font-weight: 500;
}

.run-list-item .run-meta {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.run-compare-entry {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: var(--accent-green);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.side-panel-section {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.side-panel-section #backup-status {
  margin-bottom: var(--space-1);
}

.new-run-btn {
  width: 100%;
  margin-top: var(--space-3);
  background: var(--bg-elevated-2);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-tile);
  padding: var(--space-3);
  color: var(--text-secondary);
  font-size: 13px;
}