/*
 * FlavorVault – Design "Liquid Glass"
 * ---------------------------------------------------------------
 * Alternatives Design nach dem Home-Assistant-Theme "Liquid Glass Custom":
 * milchig durchscheinende, unscharfe Karten mit hellem Innenschimmer,
 * große Rundungen und orange Akzentfarbe auf einem Farbverlauf-Hintergrund.
 *
 * Aktiv, sobald <html data-design="glass"> gesetzt ist (glass.js, Einstellung
 * "Design" in ⚙ Einstellungen). Ohne das Attribut ändert sich nichts.
 * Muss NACH den seiteneigenen Styles (und in der App nach material*.css)
 * geladen werden. Liegt identisch im Add-on (www/glass.css) und in der App
 * (www/app/glass.css).
 *
 * Bewusst ohne Blur im Kochmodus (.cook): Dort führen Überlagerungen mit
 * backdrop-filter in manchen Android-WebViews zu Darstellungsfehlern.
 */

/* ------------------------------------------------------------------
 * 1. Farben (hell / dunkel wie im HA-Theme)
 * ------------------------------------------------------------------ */
html[data-design="glass"] {
  color-scheme: light dark;

  --glass-blur: blur(12px) saturate(1.3);
  --glass-radius: 24px;
  --glass-radius-sm: 16px;

  --glass-bg: rgba(245, 245, 247, .6);
  --glass-bg-solid: rgba(245, 245, 247, .92);
  --glass-hover: rgba(255, 255, 255, .55);
  --glass-edge: rgba(0, 0, 0, .1);
  --glass-shadow:
    3px 3px .5px -3.5px rgba(255, 255, 255, .7) inset,
    -2px -2px .5px -2px rgba(255, 255, 255, .55) inset,
    0 0 8px 1px rgba(255, 255, 255, .18) inset,
    0 0 0 .5px var(--glass-edge),
    0 .5px 1px 0 rgba(0, 0, 0, .12);
  --glass-field: rgba(0, 0, 0, .06);
  --glass-orange: #FF9500;

  --text: rgba(0, 0, 0, .85);
  --text-dim: rgba(60, 60, 67, .6);
  --muted: rgba(60, 60, 67, .6);
  --accent: #C77700;
  --accent-hover: #A86400;
  --accent-rgb: 199, 119, 0;
  --accent-soft: rgba(255, 149, 0, .16);
  --danger: #FF3B30;
  --success: #34C759;
  --warn: #FF9500;

  --bg: rgb(242, 242, 247);
  --bg-top: rgb(242, 242, 247);
  --bg-bottom: rgb(242, 242, 247);
  --card: var(--glass-bg);
  --card-alt: rgba(255, 255, 255, .45);
  --card-hover: var(--glass-hover);
  --card-line: rgba(60, 60, 67, .2);
  --border: rgba(60, 60, 67, .2);
  --border-strong: rgba(60, 60, 67, .35);
  --input: var(--glass-field);
  --overlay-soft: rgba(255, 255, 255, .25);
  --panel-translucent: var(--glass-bg-solid);
  --toast-bg: rgba(245, 245, 247, .92);
}

@media (prefers-color-scheme: dark) {
  html[data-design="glass"] {
    --glass-bg: rgba(58, 58, 60, .6);
    --glass-bg-solid: rgba(44, 44, 46, .92);
    --glass-hover: rgba(255, 255, 255, .12);
    --glass-edge: rgba(0, 0, 0, .15);
    --glass-field: rgba(255, 255, 255, .1);

    --text: rgba(255, 255, 255, .96);
    --text-dim: rgba(235, 235, 245, .6);
    --muted: rgba(235, 235, 245, .6);
    --accent: #FF9F0A;
    --accent-hover: #FFB340;
    --accent-rgb: 255, 159, 10;
    --accent-soft: rgba(255, 159, 10, .2);
    --danger: #FF453A;
    --success: #32D74B;
    --warn: #FFD60A;

    --bg: rgb(28, 28, 30);
    --bg-top: rgb(28, 28, 30);
    --bg-bottom: rgb(28, 28, 30);
    --card-alt: rgba(255, 255, 255, .08);
    --card-line: rgba(152, 152, 157, .3);
    --border: rgba(152, 152, 157, .3);
    --border-strong: rgba(152, 152, 157, .5);
    --overlay-soft: rgba(255, 255, 255, .05);
    --toast-bg: rgba(58, 58, 60, .92);
  }
}

/* Systemfarben der App (Material You) gelten im Glass-Design nicht. */
html[data-design="glass"] {
  --md-primary: var(--accent);
  --md-on-primary: #1a1206;
  --md-primary-rgb: var(--accent-rgb);
}

/* ------------------------------------------------------------------
 * 2. Hintergrund: weicher Farbverlauf statt Hintergrundbild
 * ------------------------------------------------------------------ */
html[data-design="glass"],
html[data-design="glass"] body {
  background-color: var(--bg) !important;
}

html[data-design="glass"] body {
  background-image:
    radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .45), transparent 60%),
    radial-gradient(55vmax 55vmax at 92% 22%, rgba(94, 92, 230, .4), transparent 62%),
    radial-gradient(60vmax 50vmax at 30% 96%, rgba(50, 173, 230, .4), transparent 60%),
    radial-gradient(45vmax 45vmax at 95% 92%, rgba(255, 55, 95, .3), transparent 60%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

@media (prefers-color-scheme: dark) {
  html[data-design="glass"] body {
    background-image:
      radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .28), transparent 60%),
      radial-gradient(55vmax 55vmax at 92% 22%, rgba(94, 92, 230, .34), transparent 62%),
      radial-gradient(60vmax 50vmax at 30% 96%, rgba(50, 173, 230, .26), transparent 60%),
      radial-gradient(45vmax 45vmax at 95% 92%, rgba(255, 55, 95, .2), transparent 60%) !important;
  }
}

/* ------------------------------------------------------------------
 * 3. Glas-Flächen: Karten, Panels, Gruppen
 * ------------------------------------------------------------------ */
html[data-design="glass"] :is(
  .recipe-card, .group, .step, .notes, .servings-bar, .load-fallback,
  .panel, .login-form, .step-card, .stat, .diff-recipe,
  .shop-card, .sl-login-card, .share-menu, .offline-banner
) {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 0 !important;
  box-shadow: var(--glass-shadow) !important;
}

html[data-design="glass"] :is(.recipe-card, .group, .step, .notes, .servings-bar, .panel, .login-form, .shop-card, .sl-login-card) {
  border-radius: var(--glass-radius) !important;
}

html[data-design="glass"] :is(.step-card, .stat, .diff-recipe, .share-menu, .load-fallback, .offline-banner) {
  border-radius: var(--glass-radius-sm) !important;
}

/* Meldungen (Sync-Hinweis): heller/dunkler Glas-Hintergrund braucht die normale Textfarbe,
   sonst bleibt die helle Snackbar-Schrift auf hellem Glas unlesbar. */
html[data-design="glass"] .offline-banner {
  background: var(--glass-bg-solid) !important;
  color: var(--text) !important;
}

/* Verschachtelte Flächen bekommen keinen zweiten Blur/Rand. */
html[data-design="glass"] :is(.group-body .recipe-card, .panel .step-card, .panel .stat) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--card-alt) !important;
}

html[data-design="glass"] .recipe-card:hover,
html[data-design="glass"] .recipe-card:active {
  background: var(--glass-hover) !important;
  transform: none;
}

/* ------------------------------------------------------------------
 * 4. Dialoge und Menüs
 * ------------------------------------------------------------------ */
html[data-design="glass"] dialog {
  background: var(--glass-bg-solid);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--text);
  border: 0;
  border-radius: 34px;
  box-shadow: var(--glass-shadow), 0 24px 60px rgba(0, 0, 0, .3);
}

html[data-design="glass"] dialog::backdrop {
  background: rgba(0, 0, 0, .25);
}

html[data-design="glass"] :is(.shop-backdrop, .sl-login-backdrop) {
  background: rgba(0, 0, 0, .25);
}

/* ------------------------------------------------------------------
 * 5. Schaltflächen und Eingabefelder
 * ------------------------------------------------------------------ */
html[data-design="glass"] :is(.btn, button):not(.primary):not(.ghost):not(.recipe-item):not(.fav-btn) {
  background: var(--glass-field);
  color: var(--text);
  border: 0;
  border-radius: 999px;
}

html[data-design="glass"] :is(.btn, button):not(.primary):not(.ghost):not(.recipe-item):not(.fav-btn):hover {
  background: var(--glass-hover);
}

html[data-design="glass"] :is(.btn.primary, button.primary) {
  background: var(--glass-orange);
  color: #1a1206;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 8px 1px rgba(255, 255, 255, .25) inset;
}

html[data-design="glass"] :is(input, textarea, select) {
  background: var(--glass-field) !important;
  color: var(--text);
  border-color: transparent !important;
  border-radius: 14px;
}

html[data-design="glass"] :is(input, textarea, select):focus {
  outline: 2px solid var(--glass-orange);
  outline-offset: 0;
}

html[data-design="glass"] input[type="checkbox"],
html[data-design="glass"] input[type="radio"] {
  accent-color: var(--glass-orange);
}

html[data-design="glass"] .toast {
  background: var(--toast-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

/* ------------------------------------------------------------------
 * 6. Kochmodus: flach, ohne Blur (siehe Kopfkommentar)
 * ------------------------------------------------------------------ */
html[data-design="glass"] .cook {
  background-color: var(--bg);
  background-image:
    radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .3), transparent 60%),
    radial-gradient(55vmax 55vmax at 92% 92%, rgba(94, 92, 230, .3), transparent 62%);
}

html[data-design="glass"] .cook :is(.step, .notes, .cook-chip, .cook-nav button) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-design="glass"] .cook-bar-fill {
  background: var(--glass-orange);
}

/* ------------------------------------------------------------------
 * 7. Feinschliff nach dem Vorbild des HA-Dashboards
 * ------------------------------------------------------------------ */

/* Hintergrundbild aus dem HA-Theme (hell/dunkel); ohne Netz bleibt der
   Farbverlauf aus Abschnitt 2 darunter sichtbar. */
html[data-design="glass"] body {
  background-image:
    url('wallpaper-light.webp'),
    radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .45), transparent 60%),
    radial-gradient(55vmax 55vmax at 92% 22%, rgba(94, 92, 230, .4), transparent 62%),
    radial-gradient(60vmax 50vmax at 30% 96%, rgba(50, 173, 230, .4), transparent 60%) !important;
  background-size: cover, auto, auto, auto !important;
  background-position: center, 0 0, 0 0, 0 0 !important;
}

@media (prefers-color-scheme: dark) {
  html[data-design="glass"] body {
    background-image:
      url('wallpaper-dark.webp'),
      radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .28), transparent 60%),
      radial-gradient(55vmax 55vmax at 92% 22%, rgba(94, 92, 230, .34), transparent 62%),
      radial-gradient(60vmax 50vmax at 30% 96%, rgba(50, 173, 230, .26), transparent 60%) !important;
  }
}

/* Keine Glas-Fläche in der Glas-Fläche: Innenkarten sind flach. */
html[data-design="glass"] :is(.panel .panel, .panel .step-card, .panel .stat, .panel .diff-recipe, .dlg-section, .group-body .recipe-card) {
  background: var(--card-alt) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none !important;
  border-radius: var(--glass-radius-sm) !important;
}

html[data-design="glass"] .group-body {
  background: transparent !important;
}

/* Listen im Admin: durchgehende Zeilen mit feiner Trennlinie */
html[data-design="glass"] .recipe-item {
  border-radius: 12px;
  border-bottom: 1px solid var(--card-line);
  padding: 10px 14px;
}

html[data-design="glass"] .recipe-item:last-child {
  border-bottom: 0;
}

html[data-design="glass"] .group-head {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--accent);
}

/* Kleine Bedienelemente ruhiger: keine zusätzlichen Kanten */
html[data-design="glass"] :is(input, textarea, select) {
  box-shadow: none !important;
}

/* Schaltflächen im gleichen Glas-Look wie die Karten (auch die Kopfzeile) */
html[data-design="glass"] :is(.btn, button, .icon-btn):not(.primary):not(.ghost):not(.recipe-item):not(.fav-btn):not(.cook-nav button):not(.cook button) {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow) !important;
  border: 0 !important;
  border-radius: 999px;
}

html[data-design="glass"] :is(.btn, button, .icon-btn):not(.primary):not(.ghost):not(.recipe-item):not(.fav-btn):not(.cook button):hover,
html[data-design="glass"] :is(.btn, button, .icon-btn):not(.primary):not(.ghost):not(.recipe-item):not(.fav-btn):not(.cook button):active {
  background: var(--glass-hover) !important;
}

/* In flachen Innenkarten und Dialogen kein zweiter Blur */
html[data-design="glass"] :is(.panel .panel, .step-card, .dlg-section, dialog) :is(.btn, button):not(.primary):not(.ghost) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--glass-field) !important;
  box-shadow: none !important;
}

/* Hintergrund auf <html> statt <body>: sonst endet das Bild bei kurzen
   Seiten mit dem Inhalt und darunter erscheint ein einfarbiger Balken. */
html[data-design="glass"] {
  min-height: 100%;
  background-image:
    url('wallpaper-light.webp'),
    radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .45), transparent 60%),
    radial-gradient(55vmax 55vmax at 92% 22%, rgba(94, 92, 230, .4), transparent 62%),
    radial-gradient(60vmax 50vmax at 30% 96%, rgba(50, 173, 230, .4), transparent 60%) !important;
  background-size: cover, auto, auto, auto !important;
  background-position: center, 0 0, 0 0, 0 0 !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

@media (prefers-color-scheme: dark) {
  html[data-design="glass"] {
    background-image:
      url('wallpaper-dark.webp'),
      radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .28), transparent 60%),
      radial-gradient(55vmax 55vmax at 92% 22%, rgba(94, 92, 230, .34), transparent 62%),
      radial-gradient(60vmax 50vmax at 30% 96%, rgba(50, 173, 230, .26), transparent 60%) !important;
  }
}

html[data-design="glass"] body {
  background: transparent !important;
}

/* Favoriten-Stern: schlicht, ohne Glas-Kreis */
html[data-design="glass"] .fav-btn {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 999px;
}

html[data-design="glass"] .fav-btn:hover {
  background: var(--glass-hover);
}

/* Suchleisten: Glas-Pille wie Karten und Schaltflächen */
html[data-design="glass"] :is(.search-bar input, .search-field input, input[type="search"]) {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow) !important;
  border: 0 !important;
  border-radius: 999px;
}

html[data-design="glass"] :is(.search-bar input, .search-field input, input[type="search"]):focus {
  outline: 2px solid var(--glass-orange);
  outline-offset: 0;
}

/* Im Admin liegt die Suche schon in einem Glas-Panel: flach, ohne zweiten Blur */
html[data-design="glass"] .panel input[type="search"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--glass-field) !important;
  box-shadow: none !important;
}

/* Zutatenliste auf eigener Glas-Fläche, damit sie sich vom Hintergrund abhebt */
html[data-design="glass"] .ingredient-list {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-top: 0;
  border-radius: var(--glass-radius);
  padding: 4px 16px;
}

html[data-design="glass"] .ingredient-list li:last-child {
  border-bottom: 0;
}

/* Im Kochmodus bleibt alles flach (kein Blur) */
html[data-design="glass"] .cook .ingredient-list {
  background: var(--glass-field);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* Such-Symbol über dem Feld halten (sonst verdeckt das Feld es) */
html[data-design="glass"] .search-field svg {
  z-index: 1;
}

/* Kochmodus: gleiches Hintergrundbild und Glas-Optik, aber ohne Blur
   (backdrop-filter macht dort in manchen Android-WebViews Probleme) */
html[data-design="glass"] .cook {
  background-color: var(--bg);
  background-image:
    url('wallpaper-light.webp'),
    radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .45), transparent 60%),
    radial-gradient(55vmax 55vmax at 92% 92%, rgba(94, 92, 230, .4), transparent 62%);
  background-size: cover, auto, auto;
  background-position: center, 0 0, 0 0;
  background-repeat: no-repeat;
}

@media (prefers-color-scheme: dark) {
  html[data-design="glass"] .cook {
    background-image:
      url('wallpaper-dark.webp'),
      radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .28), transparent 60%),
      radial-gradient(55vmax 55vmax at 92% 92%, rgba(94, 92, 230, .34), transparent 62%);
  }
}

html[data-design="glass"] .cook :is(.ingredient-list, .cook-chip) {
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-design="glass"] .cook button:not(.primary) {
  background: var(--glass-bg) !important;
  box-shadow: var(--glass-shadow) !important;
  border: 0 !important;
  border-radius: 999px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-design="glass"] .cook button.primary {
  background: var(--glass-orange);
  color: #1a1206;
  border: 0;
  border-radius: 999px;
}

html[data-design="glass"] .cook :is(.cook-nav, .cook-head) {
  border-color: transparent;
  background: transparent;
}

html[data-design="glass"] .cook .cook-section {
  border-color: var(--card-line);
}

/* ------------------------------------------------------------------
 * 8. Helles Design: bessere Lesbarkeit
 *    Das helle Wallpaper ist unruhig - ein heller Schleier darüber,
 *    kräftigere Schrift, dunkleres Orange und deckendere Glas-Flächen.
 * ------------------------------------------------------------------ */
@media (not (prefers-color-scheme: dark)) {
  html[data-design="glass"] {
    --glass-bg: rgba(255, 255, 255, .68);
    --glass-bg-solid: rgba(250, 250, 252, .95);
    --glass-hover: rgba(255, 255, 255, .85);
    --glass-field: rgba(0, 0, 0, .07);

    --text: rgba(0, 0, 0, .92);
    --text-dim: rgba(28, 28, 30, .72);
    --muted: rgba(28, 28, 30, .72);
    --accent: #B05A00;
    --accent-hover: #944B00;
    --accent-rgb: 176, 90, 0;
    --card-line: rgba(60, 60, 67, .28);
  }

  html[data-design="glass"] {
    background-image:
      linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
      url('wallpaper-light.webp'),
      radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .45), transparent 60%),
      radial-gradient(55vmax 55vmax at 92% 22%, rgba(94, 92, 230, .4), transparent 62%),
      radial-gradient(60vmax 50vmax at 30% 96%, rgba(50, 173, 230, .4), transparent 60%) !important;
    background-size: auto, cover, auto, auto, auto !important;
    background-position: 0 0, center, 0 0, 0 0, 0 0 !important;
  }

  html[data-design="glass"] .cook {
    background-image:
      linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)),
      url('wallpaper-light.webp'),
      radial-gradient(60vmax 50vmax at 12% 8%, rgba(255, 159, 10, .45), transparent 60%);
    background-size: auto, cover, auto;
    background-position: 0 0, center, 0 0;
  }

  html[data-design="glass"] :is(.btn, button, .icon-btn):not(.primary) {
    color: var(--text);
    font-weight: 600;
  }

  html[data-design="glass"] :is(.btn.primary, button.primary, .cook button.primary) {
    color: #000;
  }
}

/* Teilen-Menü: Einträge mit Abstand statt Pille an Pille */
html[data-design="glass"] .share-menu:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

html[data-design="glass"] .share-menu[hidden],
html[data-design="glass"] .share-menu button[hidden] {
  display: none;
}

html[data-design="glass"] .share-menu :is(button, .btn) {
  border-radius: 14px;
  padding: 11px 16px;
  justify-content: flex-start;
}

/* Beschriftung auf Glas-Schaltflächen immer in Textfarbe (z. B. Timer-"Start",
   dessen Originalfarbe --bg auf hellem/dunklem Glas unlesbar wäre) */
html[data-design="glass"] :is(.btn, button, .icon-btn, .timer-btn):not(.primary):not(.fav-btn),
html[data-design="glass"] .cook button:not(.primary) {
  color: var(--text) !important;
}