/* ============================================================================
   villastudio-light.css — „Soft Glass Light" im VillaStudio-Look
   ----------------------------------------------------------------------------
   Überträgt das helle Designkonzept der VillaStudio-Desktop-App auf Life Studio:
   cremeweißer warmer Untergrund, weiße Glas-Pillen mit klaren Hairline-Rändern,
   einheitlich *präsente* weiche Schatten, edles Oliv-Braun als Signal-Akzent für
   CTAs, Serif-Headlines, große Rundungen.

   WICHTIG / Wiederherstellbarkeit:
   - Diese Datei wird in index.html NACH styles.css geladen und greift AUSSCHLIESSLICH
     im hellen Theme (alle Regeln unter `body.theme-light`). Der Dark-Mode bleibt damit
     100 % unverändert.
   - Zum Zurücksetzen auf das alte Design genügt es, die eine <link>-Zeile zu dieser
     Datei aus index.html (und den Capacitor-Kopien) zu entfernen. styles.css ist
     unangetastet; zusätzlich liegt eine Sicherung unter styles.css.backup-pre-villastudio.

   Farbwerte 1:1 aus VillaStudios glass.py (Soft Glass Light, Variante A):
     BG #F4F2EC · TEXT #1E1F1C · TEXT_MUTED #5E5C53 · ACCENT(Oliv) #45442A
     HAIRLINE rgba(30,31,28,.20) · HAIRLINE_STRONG rgba(30,31,28,.34)
   ============================================================================ */

/* ============================================================================
   1) Tokens — zentrale Umstellung (re-themt alle token-basierten Flächen)
   ============================================================================ */
body.theme-light {
  /* Flächen: helles, neutrales Weiß-Schema (statt Creme) – weiße Karten auf hellgrauem Grund */
  --bg: #EDF0F4;            /* heller, kühl-neutraler Untergrund (Basis) */
  --bg-elev: #FFFFFF;       /* solide weiße Karte */
  --bg-elev-2: #F4F6F9;     /* sehr helles, neutrales Grau */
  --border: rgba(20, 26, 36, 0.16);   /* neutrale, sichtbare Hairline */
  --text: #16191F;          /* fast-schwarz, neutral */
  --text-muted: #5A6473;    /* neutrales Grau, kräftiger Kontrast */
  --brand: #2563EB;         /* Marken-Blau */
  --brand-muted: #64748B;
  /* Akzentfarbe: bewusst durchgehend Türkis (#14b8a6) – in beiden Themes identisch (Wunsch). */
  --accent: #14b8a6;
  --accent-hover: #0d9488;
  --accent-pressed: #0f766e;
  --accent-2: #3b82f6;   /* Sekundär-Akzent (Blau) – wie die +-Buttons (z. B. To-Do-Liste), Kalender-Kontext & Navigations-Links */
  --input-bg: #FFFFFF;
  --radius: 18px;
  --radius-sm: 12px;

  /* VillaStudio-Eigenwerte (Präfix vsl = VillaStudio Light) */
  --vsl-cream: #EDF0F4;     /* = Basis-Untergrund (neutral statt creme) */
  --vsl-cream-2: #E4E9F0;
  --vsl-glass: rgba(255, 255, 255, 0.72);
  --vsl-glass-strong: rgba(255, 255, 255, 0.9);
  --vsl-hairline: rgba(20, 26, 36, 0.14);
  --vsl-hairline-strong: rgba(20, 26, 36, 0.28);
  --vsl-text-faint: #AAB2BE;

  /* Akzent durchgehend Türkis (#14b8a6) – identisch zum dunklen Design (Wunsch: überall dasselbe Türkis). */
  --vsl-accent: #14b8a6;
  --vsl-accent-hover: #0d9488;
  --vsl-accent-pressed: #0f766e;

  /* Einheitlich *präsenter* weicher Schatten (wie VillaStudios apply_soft_shadow:
     konzentriert, klar – nicht der dezente 0.06-0.08-Schimmer). Überall derselbe Wert. */
  --vsl-shadow: 0 6px 18px rgba(30, 31, 28, 0.16);
  --vsl-shadow-lg: 0 10px 28px rgba(30, 31, 28, 0.16);
  --vsl-lightedge: inset 0 1px 0 rgba(255, 255, 255, 0.7);  /* obere Lichtkante */

  --shadow: var(--vsl-shadow-lg);

  /* Serif-Display für Headlines (plattformübergreifender System-Stack, offline-fähig) */
  --vsl-serif: "New York", "Georgia", "Palatino Linotype", "Palatino",
               "Times New Roman", serif;
}

/* Neutraler heller Untergrund mit einem sehr zarten, kühlen Glow (Tiefe ohne Farbstich) */
body.theme-light {
  background:
    radial-gradient(62% 38% at 16% 8%, rgba(59, 130, 246, 0.06), transparent 70%),
    radial-gradient(66% 42% at 86% 94%, rgba(100, 116, 139, 0.05), transparent 72%),
    var(--vsl-cream);
  color: var(--text);
  color-scheme: light;
}

/* ============================================================================
   2) Globale Komponenten
   ============================================================================ */

/* --- Serif-Headlines (edler Magazin-/Wellness-Ton) --- */
body.theme-light .app-header h1,
body.theme-light .dialog-header h2 {
  font-family: var(--vsl-serif);
  font-weight: 600;
  letter-spacing: 0.2px;
}
body.theme-light .app-header h1 { font-size: 20px; }
body.theme-light .dialog-header h2 { font-size: 17px; }

/* --- Header (nicht auf Home): cremefarbenes Glas + Hairline + präsenter Schatten --- */
body.theme-light:not(.on-home) .app-header {
  background: rgba(247, 244, 238, 0.82);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid var(--vsl-hairline);
  box-shadow: 0 4px 16px rgba(30, 31, 28, 0.06);
  color: var(--text);
}
body.theme-light .header-app-name,
body.theme-light .header-brand,
body.theme-light .home-byline { color: var(--brand); }
body.theme-light .app-header .icon-btn { color: var(--text-muted); }
body.theme-light .app-header .icon-btn:hover { background: rgba(30, 31, 28, 0.06); color: var(--text); }

/* --- Buttons --- */
body.theme-light .btn {
  background: var(--vsl-glass-strong);
  border: 1px solid var(--vsl-hairline-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: var(--vsl-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.theme-light .btn:active { transform: scale(0.97); }
/* Primär = edle Oliv-Pille (Signal-Akzent) */
body.theme-light .btn-primary {
  background: var(--vsl-accent);
  border-color: var(--vsl-accent);
  color: #fff;
  box-shadow: var(--vsl-shadow);
}
body.theme-light .btn-primary:hover { background: var(--vsl-accent-hover); border-color: var(--vsl-accent-hover); }
body.theme-light .btn-primary:active { background: var(--vsl-accent-pressed); border-color: var(--vsl-accent-pressed); }
body.theme-light .btn-ghost {
  background: var(--vsl-glass);
  color: var(--text);
  border-color: var(--vsl-hairline);
}
body.theme-light .btn-ghost:hover { background: var(--vsl-glass-strong); border-color: var(--vsl-hairline-strong); }
body.theme-light .btn-danger {
  background: rgba(192, 71, 62, 0.06);
  color: #B23A32;
  border-color: rgba(192, 71, 62, 0.40);
  box-shadow: var(--vsl-shadow);
}
body.theme-light .btn-danger:hover { background: rgba(192, 71, 62, 0.12); border-color: #B23A32; }

/* Design-Umschalter (Segment im Einstellungs-Dialog): aktives Segment = Oliv */
body.theme-light .theme-seg-btn { border-color: var(--vsl-hairline-strong); color: var(--text-muted); }
body.theme-light .theme-seg-btn.active {
  background: var(--vsl-accent);
  border-color: var(--vsl-accent);
  color: #fff;
}

/* --- Eingabefelder: weiß, Hairline, oliv-getönter Fokusring --- */
body.theme-light input[type="text"],
body.theme-light input[type="month"],
body.theme-light input[type="search"],
body.theme-light input[type="number"],
body.theme-light textarea,
body.theme-light select {
  background: #FFFFFF;
  border: 1px solid var(--vsl-hairline-strong);
  color: var(--text);
  border-radius: var(--radius-sm);
}
body.theme-light input[type="text"]:focus,
body.theme-light input[type="month"]:focus,
body.theme-light input[type="search"]:focus,
body.theme-light input[type="number"]:focus,
body.theme-light textarea:focus,
body.theme-light select:focus {
  border-color: var(--vsl-accent);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}
/* Freie Minuten-Eingabe im „Dauer schnell setzen"-Chip: kein eigener innerer Rahmen – nur der äußere Chip-Rahmen */
body.theme-light .dp-dur-custom input,
body.theme-light .dp-dur-custom input:focus {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* --- Dialoge: kräftiges Glas, Hairline, präsenter Schatten, große Rundung --- */
body.theme-light .dialog-backdrop { background: rgba(30, 31, 28, 0.34); }
body.theme-light .dialog-panel {
  background: var(--vsl-glass-strong);
  border: 1px solid var(--vsl-hairline-strong);
  border-bottom: none;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 44px rgba(30, 31, 28, 0.18);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
@media (min-width: 600px) {
  body.theme-light .dialog-panel { border-radius: 22px; border-bottom: 1px solid var(--vsl-hairline-strong); }
}
body.theme-light .dialog-header { border-bottom: 1px solid var(--vsl-hairline); }
body.theme-light .dialog-footer { border-top: 1px solid var(--vsl-hairline); }

/* --- Toast: Glas-Pille --- */
body.theme-light .toast {
  background: var(--vsl-glass-strong);
  border: 1px solid var(--vsl-hairline-strong);
  color: var(--text);
  box-shadow: var(--vsl-shadow-lg);
}

/* --- Allgemeine Chips/Tags (Glas, Pastell-tauglich) --- */
body.theme-light .chip,
body.theme-light .filter-chip {
  background: var(--vsl-glass);
  border: 1px solid var(--vsl-hairline);
  color: var(--text);
}
body.theme-light .filter-chip.active {
  background: var(--vsl-accent);
  border-color: var(--vsl-accent);
  color: #fff;
}

/* ============================================================================
   3) Home-Screen
   ============================================================================ */
body.theme-light .home-screen {
  background:
    radial-gradient(ellipse 60% 34% at 18% 20%, rgba(180, 170, 235, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 60% 34% at 82% 80%, rgba(245, 200, 205, 0.20) 0%, transparent 70%);
}

/* Kategorie-Karte: weißes Glas + zarter Kategorie-Hauch + Hairline + präsenter Schatten */
body.theme-light .home-cat-card {
  background:
    linear-gradient(160deg, rgba(var(--cat), 0.12) 0%, rgba(255, 255, 255, 0.74) 70%);
  border: 1px solid var(--vsl-hairline-strong);
  border-radius: 22px;
  box-shadow: var(--vsl-shadow-lg), var(--vsl-lightedge);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
body.theme-light .home-cat-title { color: var(--brand); }
body.theme-light .home-cat-dot { box-shadow: 0 0 6px rgba(var(--cat), 0.55); }

/* App-Chip („Orb"): pastelliges Glas im Kategorie-/App-Ton, Hairline, weicher Schatten */
body.theme-light .home-app-orb {
  background:
    linear-gradient(150deg, rgba(var(--cat, 154,123,87), 0.20) 0%, rgba(var(--cat, 154,123,87), 0.07) 100%);
  border: 1px solid var(--vsl-hairline-strong);
  box-shadow: 0 5px 14px rgba(30, 31, 28, 0.14), var(--vsl-lightedge);
}
body.theme-light .home-app-orb::before { background: radial-gradient(ellipse, rgba(255, 255, 255, 0.55) 0%, transparent 100%); }
body.theme-light .home-app-orb svg {
  stroke: rgba(30, 31, 28, 0.78);
  filter: none;
}
body.theme-light .home-app-btn:active .home-app-orb {
  box-shadow: 0 2px 8px rgba(30, 31, 28, 0.14), var(--vsl-lightedge);
}
body.theme-light .home-app-label { color: rgba(30, 31, 28, 0.80); }
body.theme-light .home-dot { background: rgba(30, 31, 28, 0.18); }
body.theme-light .home-dot.active { background: rgb(var(--cat)); }
body.theme-light .home-byline { opacity: 0.65; }

/* Home-Einstellungskarte */
body.theme-light .home-general-settings {
  background: var(--vsl-glass-strong);
  border: 1px solid var(--vsl-hairline-strong);
  border-radius: var(--radius);
  box-shadow: var(--vsl-shadow);
}

/* ============================================================================
   4) Kern-Views (erste Auswahl): Gefühlsjournal · Habit-Tracker · Tagebuch
   ============================================================================ */

/* ---- Gefühlsjournal (entries) ---- */
body.theme-light #view-entries {
  background:
    radial-gradient(60% 30% at 16% 0%, rgba(180, 170, 235, 0.20), transparent 70%),
    radial-gradient(64% 32% at 86% 100%, rgba(245, 200, 205, 0.18), transparent 72%),
    var(--vsl-cream);
  color: var(--text);
}
body.theme-light .day-card {
  background: var(--vsl-glass-strong);
  border: 1px solid var(--vsl-hairline-strong);
  border-radius: var(--radius);
  box-shadow: var(--vsl-shadow), var(--vsl-lightedge);
}
body.theme-light .day-card.today {
  border-color: var(--vsl-accent);
  box-shadow: var(--vsl-shadow), 0 0 0 1px rgba(20, 184, 166, 0.30), var(--vsl-lightedge);
}
body.theme-light .day-card.today .day-number { color: var(--vsl-accent); }
body.theme-light .day-add {
  background: rgba(20, 184, 166, 0.10);
  color: var(--vsl-accent);
  border: 1px solid rgba(20, 184, 166, 0.34);
}
body.theme-light .day-add:hover { background: rgba(20, 184, 166, 0.18); }
body.theme-light .entry {
  background: var(--vsl-glass);
  border: 1px solid var(--vsl-hairline);
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 10px rgba(30, 31, 28, 0.07);
}
body.theme-light .entry:hover,
body.theme-light .entry:active { background: var(--vsl-glass-strong); }

/* ---- Habit-Tracker (table) ---- */
body.theme-light #view-table {
  background:
    radial-gradient(58% 26% at 14% 0%, rgba(180, 170, 235, 0.16), transparent 70%),
    radial-gradient(58% 26% at 88% 100%, rgba(210, 224, 236, 0.18), transparent 72%),
    var(--vsl-cream);
}
body.theme-light .table-wrap {
  background: var(--vsl-glass-strong);
  border: 1px solid var(--vsl-hairline-strong);
  border-radius: 22px;
  box-shadow: var(--vsl-shadow-lg), var(--vsl-lightedge);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
body.theme-light .habit-table thead th {
  background: #FFFFFF;
  border: 1px solid var(--vsl-hairline);
  box-shadow: 0 3px 10px rgba(30, 31, 28, 0.08);
}
body.theme-light .habit-table thead th.today-col { color: var(--vsl-accent); }

/* ---- Tagebuch (diary) ---- */
body.theme-light #view-diary {
  background:
    radial-gradient(58% 26% at 14% 0%, rgba(210, 232, 224, 0.22), transparent 70%),
    radial-gradient(58% 26% at 88% 100%, rgba(245, 200, 205, 0.16), transparent 72%),
    var(--vsl-cream);
}
body.theme-light .diary-card {
  background: var(--vsl-glass-strong);
  border: 1px solid var(--vsl-hairline-strong);
  border-radius: var(--radius);
  box-shadow: var(--vsl-shadow), var(--vsl-lightedge);
}
body.theme-light .diary-card:hover { border-color: var(--vsl-hairline-strong); }
body.theme-light .diary-card.selected {
  background: rgba(20, 184, 166, 0.08);
  border-color: var(--vsl-accent);
}

/* ============================================================================
   5) Übrige Views — Arbeitszeit · Prio-To-Dos · To-Do · Trainingskalender ·
      Tagesplaner · Timer · Pomodoro · Trainingspläne · Zähler · Geführtes Journal
   ============================================================================ */

/* --- 5a) Warme Creme-Hintergründe (ersetzen die blauen Glows; nur hell) --- */
body.theme-light #view-priotodo,
body.theme-light #view-todo,
body.theme-light #view-traincal,
body.theme-light #view-dayplan,
body.theme-light #view-timer,
body.theme-light #view-plan,
body.theme-light #view-counter,
body.theme-light #view-gjournal {
  background:
    radial-gradient(58% 28% at 14% 0%, rgba(180, 170, 235, 0.18), transparent 70%),
    radial-gradient(60% 30% at 88% 100%, rgba(245, 200, 205, 0.16), transparent 72%),
    var(--vsl-cream);
}

/* --- 5b) Glas-Karten/-Panels: kräftiges Weiß-Glas + Hairline + präsenter Schatten --- */
body.theme-light .prio-card,
body.theme-light .prio-segment,
body.theme-light .todo-card,
body.theme-light .tc-stat,
body.theme-light .tc-entry,
body.theme-light .plan-card,
body.theme-light .preset-item,
body.theme-light .gj-card,
body.theme-light .dp-inbox,
body.theme-light .counter-controls {
  background: var(--vsl-glass-strong);
  border-color: var(--vsl-hairline-strong);
  box-shadow: var(--vsl-shadow), var(--vsl-lightedge);
}
/* Plan-Karte: nutzt im Bestand var(--bg-elev) als Solid – auf Glas heben */
body.theme-light .plan-card { background: var(--vsl-glass-strong); border: 1px solid var(--vsl-hairline-strong); }
body.theme-light .plan-card:hover { border-color: var(--vsl-accent); box-shadow: var(--vsl-shadow-lg), var(--vsl-lightedge); }

/* Habit-Auswertung & Gefühls-Diagramm (Overlay-Panels) */
body.theme-light .habit-stats-panel,
body.theme-light .emotion-chart-panel {
  background:
    radial-gradient(60% 28% at 16% 0%, rgba(180, 170, 235, 0.16), transparent 70%),
    radial-gradient(62% 30% at 86% 100%, rgba(245, 200, 205, 0.14), transparent 72%),
    var(--vsl-cream);
}
body.theme-light .habit-stats-topbar,
body.theme-light .hs-tabs,
body.theme-light .emotion-chart-topbar {
  background: rgba(247, 244, 238, 0.86);
  border-bottom: 1px solid var(--vsl-hairline);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- 5c) Signal-Akzent Oliv: CTAs, FABs, aktive Segmente --- */
/* Schwebende „+"-Buttons (FAB) als edle Oliv-Kugel */
body.theme-light .diary-fab,
body.theme-light .todo-fab,
body.theme-light .plan-tracker-jump-fab {
  background: linear-gradient(135deg, var(--vsl-accent-hover) 0%, var(--vsl-accent) 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(30, 31, 28, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.18);
}
/* Primär-CTAs in Views */
body.theme-light .dp-add-btn,
body.theme-light .plan-tracker-save-btn {
  background: var(--vsl-accent);
  color: #fff;
  border-color: var(--vsl-accent);
}
body.theme-light .dp-add-btn:active,
body.theme-light .plan-tracker-save-btn:active { background: var(--vsl-accent-pressed); }
/* Aktive Segment-/Tab-Pillen → Oliv */
body.theme-light .prio-seg-btn.active,
body.theme-light .hs-tab.active {
  background: var(--vsl-accent);
  border-color: var(--vsl-accent);
  color: #fff;
}

/* ============================================================================
   6) Glas-Picker (Datum/Farbe/Uhrzeit/Monat) — Hairline + präsenter Schatten,
      ausgewählter Tag im Oliv-Signalakzent
   ============================================================================ */
body.theme-light .datepicker,
body.theme-light .colorpicker,
body.theme-light .timepicker,
body.theme-light .datepicker-overlay > .datepicker {
  background: var(--vsl-glass-strong);
  border: 1px solid var(--vsl-hairline-strong);
  box-shadow: var(--vsl-shadow-lg);
}
body.theme-light .datepicker-overlay,
body.theme-light .colorpicker-overlay { background: rgba(30, 31, 28, 0.34); }
body.theme-light .dp-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent-2); color: var(--accent-2); }
body.theme-light .dp-cell.selected { background: var(--vsl-accent); color: #fff; }
body.theme-light .dp-foot-btn { color: var(--vsl-accent); }
body.theme-light .dp-nav { border-color: var(--vsl-hairline-strong); background: var(--vsl-glass); }