/* ============================================================
   theme.css - Dark-Mode-Overrides
   Hell ist der Default (unangetastet), nur [data-theme="dunkel"]
   ueberschreibt Farben.
   ============================================================ */

[data-theme="dunkel"] {
  color-scheme: dark;

  /* Standard-Variablen (Hilfe, Chat, Einkauf, Rezepte, Todos, ...) */
  --bg: #0f1720;
  --card: #1a2530;
  --text: #e8eeea;
  --muted: #8a9a92;
  --border: #2a3742;
  --accent: #34d399;
  --accent2: #f97316;

  /* Chat-Bubbles */
  --bubble-me: #1e4a3a;
  --bubble-other: #2a3742;

  /* app.html (Glas-Hintergrund) */
  --bg1: #0f1720;
  --bg2: #1a2530;

  /* call.html */
  --danger: #f87171;
}

/* Dunkle Scrollbars (WebKit) */
[data-theme="dunkel"] ::-webkit-scrollbar {
  width: 8px; height: 8px;
}
[data-theme="dunkel"] ::-webkit-scrollbar-thumb {
  background: #2a3742; border-radius: 4px;
}
[data-theme="dunkel"] ::-webkit-scrollbar-track {
  background: #0f1720;
}

/* Formularfelder im Darkmode */
[data-theme="dunkel"] input,
[data-theme="dunkel"] textarea,
[data-theme="dunkel"] select {
  color-scheme: dark;
}

/* ============================================================
   Eingabefelder im Darkmode: dunkler Hintergrund + helle Schrift
   Wirkt auf alle Text-/Password-/etc.-Felder, nicht auf Checkboxen.
   ============================================================ */
[data-theme="dunkel"] input[type="text"],
[data-theme="dunkel"] input[type="password"],
[data-theme="dunkel"] input[type="email"],
[data-theme="dunkel"] input[type="search"],
[data-theme="dunkel"] input[type="number"],
[data-theme="dunkel"] input[type="tel"],
[data-theme="dunkel"] input[type="url"],
[data-theme="dunkel"] input[type="date"],
[data-theme="dunkel"] input[type="time"],
[data-theme="dunkel"] input[type="datetime-local"],
[data-theme="dunkel"] input:not([type]),
[data-theme="dunkel"] textarea,
[data-theme="dunkel"] select {
  background-color: #1a2530 !important;
  color: #e8eeea !important;
  -webkit-text-fill-color: #e8eeea;
  border-color: #2a3742 !important;
  caret-color: #34d399;
}

[data-theme="dunkel"] input::placeholder,
[data-theme="dunkel"] textarea::placeholder {
  color: #8a9a92 !important;
  -webkit-text-fill-color: #8a9a92;
}

[data-theme="dunkel"] input:focus,
[data-theme="dunkel"] textarea:focus,
[data-theme="dunkel"] select:focus {
  background-color: #223040 !important;
  border-color: #34d399 !important;
  outline: none;
}

/* Suchfeld in der Kopfzeile bleibt transparent (liegt auf gruenem Header) */
[data-theme="dunkel"] .tb-search input {
  background-color: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  border: none !important;
}
[data-theme="dunkel"] .tb-search input::placeholder {
  color: rgba(255,255,255,.7) !important;
  -webkit-text-fill-color: rgba(255,255,255,.7);
}

/* Chat-/Einkauf-Composer: dezenter Hintergrund, nicht zu schwarz */
[data-theme="dunkel"] .composer textarea,
[data-theme="dunkel"] .composer input {
  background-color: #223040 !important;
  color: #e8eeea !important;
  -webkit-text-fill-color: #e8eeea;
  border-color: #2a3742 !important;
}
[data-theme="dunkel"] .composer textarea::placeholder,
[data-theme="dunkel"] .composer input::placeholder {
  color: #8a9a92 !important;
  -webkit-text-fill-color: #8a9a92;
}

/* Rezepte-Suche (hatte gelblichen Hintergrund) */
[data-theme="dunkel"] .suche input {
  background-color: #1a2530 !important;
  color: #e8eeea !important;
  -webkit-text-fill-color: #e8eeea;
  border-color: #2a3742 !important;
}
[data-theme="dunkel"] .suche input:focus {
  background-color: #223040 !important;
}

/* Safari Autofill (sonst weisser/gelber Hintergrund) */
[data-theme="dunkel"] input:-webkit-autofill,
[data-theme="dunkel"] input:-webkit-autofill:hover,
[data-theme="dunkel"] input:-webkit-autofill:focus,
[data-theme="dunkel"] textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #1a2530 inset !important;
  -webkit-text-fill-color: #e8eeea !important;
  caret-color: #34d399;
}

/* Buttons die wie Eingabefelder aussehen (z.B. File-Picker) */
[data-theme="dunkel"] input[type="file"] {
  color: #e8eeea;
}
[data-theme="dunkel"] input[type="file"]::file-selector-button {
  background: #223040;
  color: #e8eeea;
  border: 1px solid #2a3742;
  border-radius: 4px;
  padding: .3rem .6rem;
  cursor: pointer;
}

/* Seiten ohne CSS-Variablen - Body-Fallback */
[data-theme="dunkel"] body {
  background: #0f1720;
  color: #e8eeea;
}

/* index.html (Login) */
[data-theme="dunkel"] #loginForm input {
  background: #1a2530;
  color: #e8eeea;
  border-color: #2a3742;
}

/* admin.html / familie.html / feedback-meine.html / settings.html:
   harter Fallback - weisse Karten werden dunkel */
[data-theme="dunkel"] .card {
  background: #1a2530;
  border-color: #2a3742;
  color: #e8eeea;
}
[data-theme="dunkel"] h1,
[data-theme="dunkel"] h2,
[data-theme="dunkel"] h3 {
  color: #e8eeea;
}

/* app.html: Farbkleckse im Hintergrund dezenter im Darkmode */
[data-theme="dunkel"] body::before {
  opacity: .55;
}

/* Tiles in app.html: etwas abgedunkelt damit der Kontrast passt */
[data-theme="dunkel"] .tile .iconwrap {
  --glass: rgba(26, 37, 48, .55);
  --glass-hi: rgba(26, 37, 48, .8);
  --glass-brd: rgba(255, 255, 255, .12);
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

[data-theme="dunkel"] header h1 {
  background: linear-gradient(135deg, #e8eeea 0%, #8a9a92 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   DARKMODE FIXES - Seiten mit hartcodierten Farben
   ============================================================ */

/* --- Chats-Liste: weiße Chat-Zeilen --- */
[data-theme="dunkel"] .chat-wrap { background: #3b1f1f; }
[data-theme="dunkel"] .chat-wrap .chat {
  background: #1a2530 !important;
  color: #e8eeea !important;
}
[data-theme="dunkel"] .chat-wrap.swiped .chat:active { background: #1a2530 !important; }
[data-theme="dunkel"] .chat-wrap .chat .name { color: #e8eeea; }
[data-theme="dunkel"] .chat-wrap .chat .last { color: #8a9a92; }
[data-theme="dunkel"] .chat-wrap .chat .time { color: #8a9a92; }

/* --- Kalender: Monatsgitter --- */
[data-theme="dunkel"] .kal-day {
  background: #1a2530;
  border-color: #2a3742;
}
[data-theme="dunkel"] .kal-day:hover { background: #223040; }
[data-theme="dunkel"] .kal-day.other-month {
  background: #131c25 !important;
  color: #55656f !important;
}
[data-theme="dunkel"] .kal-day.other-month .kal-day-num { opacity: .35; }
[data-theme="dunkel"] .kal-day.today {
  background: #1e4a3a !important;
}
[data-theme="dunkel"] .kal-day.today .kal-day-num {
  color: #e8eeea;
}
[data-theme="dunkel"] .kal-day.selected {
  background: #1e3a5f !important;
  box-shadow: inset 0 0 0 2px #3b82f6;
}
[data-theme="dunkel"] .kal-day-num { color: #e8eeea; }
[data-theme="dunkel"] .kal-ev.alle { color: #111; }

/* --- Todos: Chips, Checkboxen, Sheet, Quick-Add --- */
[data-theme="dunkel"] .chip {
  background: #223040 !important;
  color: #e8eeea !important;
  border-color: #2a3742 !important;
}
[data-theme="dunkel"] .chip.active {
  background: #34d399 !important;
  color: #0f1720 !important;
  border-color: #34d399 !important;
}
[data-theme="dunkel"] .todo-check,
[data-theme="dunkel"] [class*="checkbox"] {
  background: #223040 !important;
  border-color: #3a4852 !important;
}
[data-theme="dunkel"] .quickadd {
  background: #1a2530 !important;
  border-top-color: #2a3742 !important;
}
[data-theme="dunkel"] .quickadd input,
[data-theme="dunkel"] .quickadd textarea {
  background: #223040 !important;
  color: #e8eeea !important;
  -webkit-text-fill-color: #e8eeea;
}
[data-theme="dunkel"] .sheet {
  background: #1a2530 !important;
}
[data-theme="dunkel"] .sheet-actions .del {
  background: #3b1f1f !important;
  color: #fca5a5 !important;
}
[data-theme="dunkel"] .sheet select,
[data-theme="dunkel"] .sheet input {
  background: #223040 !important;
  color: #e8eeea !important;
  -webkit-text-fill-color: #e8eeea;
}
[data-theme="dunkel"] .todo-item,
[data-theme="dunkel"] .todo {
  background: #1a2530 !important;
  border-color: #2a3742 !important;
  color: #e8eeea;
}
[data-theme="dunkel"] .todo-text { color: #e8eeea; }
[data-theme="dunkel"] .todo.erledigt .todo-text { color: #6b7a72; }

/* --- Generische weiße Hintergründe abfangen --- */
[data-theme="dunkel"] [style*="background:#fff"],
[data-theme="dunkel"] [style*="background: #fff"],
[data-theme="dunkel"] [style*="background:white"],
[data-theme="dunkel"] [style*="background: white"] {
  background: #1a2530 !important;
  color: #e8eeea !important;
}

/* --- err/error-Banner etwas abdunkeln --- */
[data-theme="dunkel"] [style*="background:#fee2e2"],
[data-theme="dunkel"] [style*="background: #fee2e2"] {
  background: #3b1f1f !important;
  color: #fca5a5 !important;
  border-color: #7f1d1d !important;
}