/**
 * member-dark-theme-2.css v1.3
 * v1.3: + Rezept-Ausgabe des Kuehlschrank-Checks (.gl-fsr-*, eigenes Modul
 *       member-fridge-recipes.js). Accordion-Karten, Zutaten-Chips,
 *       Zubereitungsschritte, "fehlt dir noch"-Hinweis + das
 *       Ernaehrungsform-Select (hartes background:#fff -> brauchte
 *       !important, deshalb blieb es vorher hell).
 * v1.2: + Kurs-Space (.cs-card/.cs-bundle/.cs-tab).
 * v1.1: + Lesbarkeit Kanal-Untertitel + Kuehlschrank-Check (.fs-*).
 * v1.0: Widget-Sidebar (.cw-*) + Spaces-Strip (.wa-strip-*/.wa-sdesk-*).
 * Aktiv nur bei body.dark.
 */

/* ══ LESBARKEIT: Kanal-/Listen-Untertitel ═════════════
   wa-desktop.css setzt .wa-it-msg{opacity:.55} — kombiniert mit
   muted-Farbe im Dark zu dunkel. Opacity neutralisieren, Farbe heller. */
body.dark .wa-it-msg{opacity:1!important;color:#a8b8bf}
body.dark .wa-it-time{opacity:1!important}
body.dark .wa-com-members{opacity:1!important}
body.dark .wa-ct-head-sub{opacity:1!important;color:#a8b8bf}

/* ══ WIDGET-SIDEBAR (rechte Spalte + Drawer) ══════════ */
body.dark #cw-dash-col{
  background:var(--wad-panel)!important;
  border-left:1px solid var(--wad-bdr)!important;
}
body.dark .cw-section-label{color:var(--wad-muted)}

/* Karten */
body.dark .cw-card{
  background:var(--wad-panel-2)!important;
  border:1px solid var(--wad-bdr)!important;
  color:var(--wad-text);
}
body.dark .cw-card.cw-drag-over{box-shadow:0 0 0 2px var(--wad-accent)}
body.dark .cw-h{color:var(--wad-text)}
body.dark .cw-h-handle{color:var(--wad-muted)}
body.dark .cw-h-actions button{color:var(--wad-muted)}
body.dark .cw-h-actions button:hover{background:var(--wad-hover);color:var(--wad-text)}
body.dark .cw-h-actions .cw-rm:hover{background:rgba(239,68,68,.15);color:#f87171}

/* Zeilen / Avatare / Balken */
body.dark .cw-row{color:var(--wad-text)}
body.dark .cw-row .cw-av{background:var(--wad-hover);color:var(--wad-text)}
body.dark .cw-row .cw-meta{color:var(--wad-muted)}
body.dark .cw-bar{background:var(--wad-hover)}
body.dark .cw-empty{color:var(--wad-muted)}

/* "+ Widget"-Button */
body.dark .cw-add-btn{
  background:transparent!important;
  border:2px dashed var(--wad-bdr)!important;
  color:var(--wad-muted)!important;
}
body.dark .cw-add-btn:hover{
  border-color:var(--wad-accent)!important;
  color:var(--wad-accent)!important;
  background:rgba(0,168,132,.08)!important;
}

/* Events */
body.dark .cw-ev-row{color:var(--wad-text)}
body.dark .cw-ev-row:hover{background:var(--wad-hover)}
body.dark .cw-ev-thumb{background-color:var(--wad-hover);color:var(--wad-muted)}
body.dark .cw-ev-title{color:var(--wad-text)}
body.dark .cw-video-title{color:var(--wad-text)}
body.dark .cw-rec-img{background:var(--wad-hover)}

/* Quick-Links */
body.dark .cw-quick-link{
  background:var(--wad-panel)!important;
  border:1px solid var(--wad-bdr)!important;
  color:var(--wad-text)!important;
}
body.dark .cw-quick-link:hover{border-color:var(--wad-accent);color:var(--wad-accent)!important}

/* Referral-Block (inline-styles im JS -> !important noetig) */
body.dark .cw-ref-pts{color:var(--wad-muted)}
body.dark .cw-ref-pts strong{color:var(--wad-text)}
body.dark .cw-ref-pts .cw-old-pts{color:var(--wad-muted)}

/* Drawer (mobil / schmale Viewports) */
body.dark #cw-drawer{
  background:var(--wad-panel)!important;
  color:var(--wad-text)!important;
}
body.dark .cw-drawer-head{border-bottom:1px solid var(--wad-bdr)}
body.dark .cw-drawer-close{color:var(--wad-muted)}
body.dark .cw-tabs{border-bottom:1px solid var(--wad-bdr)}
body.dark .cw-tab{color:var(--wad-muted)}
body.dark .cw-tab.active{
  color:var(--wad-accent);
  border-bottom-color:var(--wad-accent);
  background:rgba(0,168,132,.08);
}

/* Modals (Katalog / Editor) */
body.dark .cw-modal-inner{background:var(--wad-panel)!important;color:var(--wad-text)!important}
body.dark .cw-modal-head{border-bottom:1px solid var(--wad-bdr)}
body.dark .cw-cat-item{
  background:var(--wad-panel-2);
  border:1px solid var(--wad-bdr)!important;
  color:var(--wad-text);
}
body.dark .cw-cat-item:hover{border-color:var(--wad-accent)!important;background:rgba(0,168,132,.08)!important}
body.dark .cw-input{
  background:var(--wad-panel-2)!important;
  border:1px solid var(--wad-bdr)!important;
  color:var(--wad-text)!important;
}
body.dark .cw-input:focus{border-color:var(--wad-accent)!important}
body.dark .cw-input::placeholder{color:var(--wad-muted)}

/* ══ SPACES-STRIP — MOBILE ════════════════════════════ */
@media(max-width:768px){
  body.dark #wa-spaces-strip{
    background:var(--wad-panel)!important;
    border-bottom:1px solid var(--wad-bdr)!important;
  }
  body.dark .wa-strip-av{background:var(--wad-panel-2)}
  body.dark .wa-strip-nm{color:var(--wad-muted)}
  body.dark .wa-strip-it.active .wa-strip-nm{color:var(--wad-accent)}
}

/* ══ SPACES-STRIP — DESKTOP ═══════════════════════════ */
@media(min-width:769px){
  body.dark #wa-spaces-strip-desk{
    background:var(--wad-panel-2)!important;
    border-bottom:1px solid var(--wad-bdr)!important;
  }
  body.dark .wa-sdesk-it{
    background:var(--wad-panel)!important;
    color:var(--wad-muted)!important;
    border:1px solid transparent!important;
  }
  body.dark .wa-sdesk-it:hover{background:var(--wad-hover)!important}
  body.dark .wa-sdesk-it.active{
    background:rgba(0,168,132,.15)!important;
    color:var(--wad-accent)!important;
    border-color:var(--wad-accent)!important;
  }
  body.dark .wa-sdesk-arr{color:var(--wad-muted)}
  body.dark .wa-sdesk-arr:hover{color:var(--wad-accent)}
  /* Fade-Gradients: Quelle nutzt hartes #fff -> im Dark ueberschreiben */
  body.dark .wa-sdesk-arr-r{
    background:linear-gradient(to left,var(--wad-panel-2) 55%,rgba(32,44,51,0))!important;
  }
  body.dark .wa-sdesk-arr-l{
    background:linear-gradient(to right,var(--wad-panel-2) 55%,rgba(32,44,51,0))!important;
  }
}

/* ══ KUEHLSCHRANK-CHECK (.fs-*) ═══════════════════════
   member-fridge-scan.js nutzt CSS-Variablen mit hellen Fallbacks:
   var(--card-bg,#fff), var(--text,#1e293b), var(--text-muted,#64748b),
   var(--border,#e5e7eb). Unter body.dark hier definieren -> Kamera-Box,
   Ampel-Karten und Texte werden automatisch dunkel. Rest: Overrides. */
body.dark{
  --card-bg:    var(--wad-panel-2);
  --text:       var(--wad-text);
  --text-muted: #a8b8bf;
  --border:     var(--wad-bdr);
}
/* Kamera-Box: dashed-Border + Active-State hardcoded */
body.dark .fs-cam{border-color:var(--wad-bdr)}
body.dark .fs-cam:active{background:var(--wad-hover)}
/* Ampel-Karten: Grund-Text hardcoded #475569 */
body.dark .fs-grund{color:#a8b8bf}
/* Alternativen-Box: helles Blau -> dunkles Blau */
body.dark .fs-alt{background:rgba(56,189,248,.12);color:#7dd3fc}
/* Fazit: heller Gruen-Gradient -> dunkles Gruen */
body.dark .fs-fazit{
  background:rgba(16,185,129,.1);
  border-color:rgba(16,185,129,.35);
  color:#6ee7b7;
}
/* Quota-Badges: helle Pastelle -> dunkle Varianten */
body.dark .fs-quota{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#4ade80}
body.dark .fs-quota.fs-quota-off{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#f87171}
body.dark .fs-quota.fs-quota-pro{background:rgba(234,179,8,.12);border-color:rgba(234,179,8,.35);color:#facc15}
/* Ghost-Button + Fehler + Erfolg */
body.dark .fs-btn-ghost{color:var(--wad-text);border-color:var(--wad-bdr)}
body.dark .fs-err{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#f87171}
body.dark .fs-done{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.3)}
body.dark .fs-done h3{color:#6ee7b7}
body.dark .fs-done p{color:#a7f3d0}
/* Ampel-Tags: dunkle Toene aufhellen */
body.dark .fs-g .fs-tag{color:#4ade80}
body.dark .fs-y .fs-tag{color:#facc15}
body.dark .fs-r .fs-tag{color:#f87171}
/* Select-Feld der Ernaehrungsform (Tool-Wrapper, natives select) */
body.dark .fs-wrap select,
body.dark .fs-wrap input[type="text"]{
  background:var(--wad-panel-2);
  color:var(--wad-text);
  border-color:var(--wad-bdr);
}

/* ══ REZEPT-AUSGABE (.gl-fsr-*) ═══════════════════════
   member-fridge-recipes.js — eigenes Modul mit eigenem <style>-Block,
   der spaeter im Head landet. Daher body.dark-Prefix + !important dort,
   wo die Quelle harte Hex-Werte setzt. */

/* Ernaehrungsform-Select: Quelle hat hartes background:#fff */
body.dark .gl-fsr-diet label{color:var(--wad-text)}
body.dark .gl-fsr-diet select{
  background:var(--wad-panel-2)!important;
  border-color:var(--wad-bdr)!important;
  color:var(--wad-text)!important;
}
body.dark .gl-fsr-diet-hint{color:#a8b8bf}

/* Ueberschrift + Untertitel */
body.dark .gl-fsr-h{color:var(--wad-text)}
body.dark .gl-fsr-sub{color:#a8b8bf}

/* Rezept-Karten (Accordion) */
body.dark .gl-fsr-card{
  background:var(--wad-panel-2)!important;
  border-color:var(--wad-bdr)!important;
}
body.dark .gl-fsr-tog:active{background:var(--wad-hover)}
body.dark .gl-fsr-meal{color:#4ade80}
body.dark .gl-fsr-t{color:var(--wad-text)}
body.dark .gl-fsr-dur{color:#a8b8bf}
body.dark .gl-fsr-arr{color:#a8b8bf}

/* Aufgeklappter Bereich */
body.dark .gl-fsr-panel{border-top-color:var(--wad-bdr)!important}
body.dark .gl-fsr-lbl{color:#a8b8bf}

/* Zutaten-Chips: helles Gruen -> dunkles Gruen */
body.dark .gl-fsr-ing span{
  background:rgba(16,185,129,.12)!important;
  border-color:rgba(16,185,129,.3)!important;
  color:#6ee7b7!important;
}

/* Zubereitungsschritte */
body.dark .gl-fsr-step{color:#c3cfd5}

/* "Dafuer fehlt dir noch": helles Gelb -> dunkles Bernstein */
body.dark .gl-fsr-miss{
  background:rgba(234,179,8,.1)!important;
  border-color:rgba(234,179,8,.35)!important;
  color:#fcd34d!important;
}

/* ══ KURS-SPACE (.cs-*) ═══════════════════════════════
   member-wa-space-course-type.js rendert Cards mit INLINE-Styles
   (background:#fff;border:1px solid #e5e7eb etc.). Stylesheet-
   !important schlaegt Inline-Styles ohne !important. */

/* Cards: weiss -> Panel; Titel erbt helle Textfarbe -> lesbar */
body.dark .cs-card,
body.dark .cs-bundle{
  background:var(--wad-panel-2)!important;
  border-color:var(--wad-bdr)!important;
  color:var(--wad-text);
}
/* Graue Subtexte (Headline, Modul-Anzahl, Fortschritt-Label):
   inline color:#6b7280 -> aufhellen. [style*=] trifft nur diese. */
body.dark .cs-card [style*="#6b7280"],
body.dark .cs-bundle [style*="#6b7280"]{color:#a8b8bf!important}
/* Preis (<strong> ohne Inline-Farbe) erbt jetzt hell — Punkte-/
   Kostenlos-Preise haben eigene Inline-Farben (lila/gruen), bleiben. */
/* Fortschritts-Track: inline background:#f0f2f5 -> dunkel */
body.dark .cs-card [style*="#f0f2f5"]{background:var(--wad-hover)!important}
/* Hover-Schatten aus dem JS (rgba schwarz) wirkt auf dunkel kaum —
   stattdessen dezente Aufhellung */
body.dark .cs-card:hover,
body.dark .cs-bundle:hover{box-shadow:0 4px 14px rgba(0,0,0,.45)!important;border-color:#3a4a54!important}

/* Filter-Tabs: inaktive haben inline background:#fff — nur diese
   umfaerben, der aktive Tab (inline #00a884) bleibt unberuehrt. */
body.dark .cs-tab[style*="background:#fff"]{
  background:var(--wad-panel-2)!important;
  color:var(--wad-text)!important;
  border-color:var(--wad-bdr)!important;
}