/*
 * Einsatzbuch: Stil "Liquid Glass"
 * Klares, lichtbrechendes Glas nach Apple-Vorbild. Gleicher Aufbau wie "Klassisch",
 * nur die Oberflächen ändern sich. Alles ist auf html[data-style="liquid"] begrenzt.
 */

/* ---------- Tokens ---------- */

html[data-style="liquid"] {
  /* Glas */
  --lg-bg-primary: rgba(255, 255, 255, 0.40);
  --lg-bg-elevated: rgba(255, 255, 255, 0.60);
  --lg-bg-toolbar: rgba(255, 255, 255, 0.62);
  --lg-bg-interactive: rgba(255, 255, 255, 0.34);
  --lg-bg-pressed: rgba(255, 255, 255, 0.55);
  --lg-bg-inset: rgba(255, 255, 255, 0.30);
  --lg-bg-scrim: rgba(12, 18, 32, 0.16);
  --lg-tint-accent: rgba(255, 92, 72, 0.20);
  --lg-tint-amber: rgba(255, 168, 40, 0.24);

  --lg-blur-sm: 8px;
  --lg-blur-md: 16px;
  --lg-blur-lg: 22px;
  --lg-blur-xl: 34px;
  --lg-saturate: 200%;

  /* Kanten und Lichtreflexe */
  --lg-border-color: rgba(255, 255, 255, 0.65);
  --lg-border-subtle: rgba(255, 255, 255, 0.28);
  --lg-highlight: rgba(255, 255, 255, 0.95);
  --lg-highlight-soft: rgba(255, 255, 255, 0.45);
  --lg-edge-dark: rgba(30, 40, 70, 0.10);
  --lg-specular: radial-gradient(130% 70% at 18% -10%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);

  --lg-shadow-elevated: 0 8px 26px rgba(24, 34, 66, 0.12), 0 1px 3px rgba(24, 34, 66, 0.08);
  --lg-shadow-high: 0 20px 56px rgba(24, 34, 66, 0.22), 0 2px 8px rgba(24, 34, 66, 0.10);

  --lg-radius-sm: 14px;
  --lg-radius-md: 20px;
  --lg-radius-lg: 28px;
  --lg-radius-xl: 38px;

  --lg-duration-fast: 180ms;
  --lg-duration-normal: 420ms;
  --lg-duration-slow: 700ms;
  --lg-easing-spring: cubic-bezier(0.34, 1.42, 0.64, 1);
  --lg-easing-out: cubic-bezier(0.2, 0.9, 0.25, 1);

  /* Grundfarben des Stils */
  --bg: #dde4ef;
  --text: #0c111c;
  --muted: #4a5466;
  --faint: #7d879a;
  --line: rgba(12, 17, 28, 0.08);
  --fill: rgba(255, 255, 255, 0.34);
  --fill-strong: rgba(255, 255, 255, 0.55);
  --accent: #c8352a;
  --accent-soft: rgba(200, 53, 42, 0.12);
  --amber: #b86e00;

  --radius-xl: var(--lg-radius-xl);
  --radius-l: var(--lg-radius-lg);
  --radius-m: var(--lg-radius-md);
  --radius-s: var(--lg-radius-sm);
}

html[data-style="liquid"][data-theme="dark"] {
  --lg-bg-primary: rgba(28, 34, 52, 0.36);
  --lg-bg-elevated: rgba(26, 32, 50, 0.66);
  --lg-bg-toolbar: rgba(30, 36, 56, 0.62);
  --lg-bg-interactive: rgba(255, 255, 255, 0.09);
  --lg-bg-pressed: rgba(255, 255, 255, 0.18);
  --lg-bg-inset: rgba(0, 0, 0, 0.22);
  --lg-bg-scrim: rgba(0, 0, 0, 0.30);
  --lg-tint-accent: rgba(255, 92, 72, 0.18);
  --lg-tint-amber: rgba(255, 176, 60, 0.18);

  --lg-blur-md: 22px;
  --lg-blur-lg: 28px;
  --lg-blur-xl: 40px;

  --lg-border-color: rgba(255, 255, 255, 0.20);
  --lg-border-subtle: rgba(255, 255, 255, 0.08);
  --lg-highlight: rgba(255, 255, 255, 0.42);
  --lg-highlight-soft: rgba(255, 255, 255, 0.14);
  --lg-edge-dark: rgba(0, 0, 0, 0.35);
  --lg-specular: radial-gradient(130% 70% at 18% -10%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%);

  --lg-shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.38), 0 1px 3px rgba(0, 0, 0, 0.30);
  --lg-shadow-high: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);

  --bg: #0a0f1f;
  --text: #f2f4fa;
  --muted: #a3acbf;
  --faint: #737d92;
  --line: rgba(255, 255, 255, 0.08);
  --fill: rgba(255, 255, 255, 0.08);
  --fill-strong: rgba(255, 255, 255, 0.15);
  --accent: #ff5a4e;
  --accent-soft: rgba(255, 90, 78, 0.16);
  --amber: #ffb547;
}

/* ---------- Hintergrund: lebendiger Verlauf, durch den das Glas bricht ---------- */

html[data-style="liquid"] .backdrop {
  background:
    radial-gradient(60% 45% at 85% 8%, rgba(255, 96, 70, 0.55), transparent 70%),
    radial-gradient(55% 40% at 8% 38%, rgba(70, 120, 255, 0.40), transparent 70%),
    radial-gradient(60% 45% at 75% 78%, rgba(255, 170, 60, 0.38), transparent 70%),
    radial-gradient(50% 40% at 15% 95%, rgba(150, 90, 255, 0.28), transparent 70%),
    var(--bg);
}
html[data-style="liquid"][data-theme="dark"] .backdrop {
  background:
    radial-gradient(60% 45% at 85% 6%, rgba(255, 70, 50, 0.40), transparent 70%),
    radial-gradient(55% 40% at 6% 40%, rgba(50, 100, 255, 0.36), transparent 70%),
    radial-gradient(60% 45% at 78% 80%, rgba(255, 140, 40, 0.22), transparent 70%),
    radial-gradient(50% 40% at 15% 96%, rgba(120, 70, 255, 0.26), transparent 70%),
    var(--bg);
}
html[data-style="liquid"] .glow {
  filter: blur(60px);
  animation: lg-drift 48s ease-in-out infinite alternate;
}
html[data-style="liquid"] .glow-red { background: radial-gradient(circle, rgba(255, 90, 60, 0.45), transparent 62%); }
html[data-style="liquid"] .glow-blue { background: radial-gradient(circle, rgba(60, 110, 255, 0.40), transparent 62%); animation-duration: 62s; animation-direction: alternate-reverse; }
@keyframes lg-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8vmax, 6vmax) scale(1.08); }
  100% { transform: translate(4vmax, 12vmax) scale(0.96); }
}

/* ---------- Glasflächen ---------- */

html[data-style="liquid"] .glass {
  background: var(--lg-specular), var(--lg-bg-primary);
  -webkit-backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  box-shadow:
    inset 0 1px 0.5px var(--lg-highlight),
    inset 0 -1px 1px var(--lg-highlight-soft),
    inset 0 0 0 0.5px var(--lg-border-subtle),
    inset 0 -14px 24px -18px var(--lg-edge-dark),
    var(--lg-shadow-elevated);
}
/* Lichtbrechende Kante: oben links und unten rechts hell, Flanken fast unsichtbar */
html[data-style="liquid"] .glass::after {
  padding: 1.2px;
  background:
    linear-gradient(135deg, var(--lg-highlight) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 70%, var(--lg-highlight-soft) 100%);
  opacity: 0.9;
}

/* ---------- Übersicht ---------- */

html[data-style="liquid"] .tally {
  border-radius: var(--lg-radius-xl);
  background: var(--lg-specular), var(--lg-bg-elevated);
}
html[data-style="liquid"] .tally-num {
  font-weight: 800;
  letter-spacing: -0.05em;
  text-shadow: 0 1px 0 var(--lg-highlight-soft);
}
html[data-style="liquid"] .tally-facts { border-top: 0; padding-top: 6px; gap: 8px; }
html[data-style="liquid"] .fact {
  padding: 10px 12px;
  border-radius: var(--lg-radius-sm);
  background: var(--lg-bg-inset);
  box-shadow: inset 0 1px 2px var(--lg-edge-dark), inset 0 -1px 0 var(--lg-highlight-soft);
}

/* Offene Einsätze: bernsteinfarben getöntes Glas, das langsam aufglimmt */
html[data-style="liquid"] .open-card {
  background:
    linear-gradient(100deg, var(--lg-tint-amber), rgba(255, 168, 40, 0) 55%),
    var(--lg-specular),
    var(--lg-bg-primary);
}
html[data-style="liquid"] .open-card::before {
  left: auto; right: 16px; top: 18px; bottom: auto;
  width: 9px; height: 9px; border-radius: 50%;
}
html[data-style="liquid"] .open-top { padding-right: 18px; }

/* ---------- Knöpfe ---------- */

html[data-style="liquid"] .btn {
  background: var(--lg-specular), var(--lg-bg-interactive);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  box-shadow: inset 0 1px 0.5px var(--lg-highlight), inset 0 0 0 0.5px var(--lg-border-subtle), 0 2px 8px var(--lg-edge-dark);
  transition: transform var(--lg-duration-fast) var(--lg-easing-spring), background var(--lg-duration-fast) ease;
}
html[data-style="liquid"] .btn:active { transform: scale(0.95); background: var(--lg-bg-pressed); }
/* Hauptknopf wie im Stil "Klassisch": flaches Feuerrot */
html[data-style="liquid"] .btn-primary {
  color: var(--accent-ink);
  background: var(--accent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 6px 18px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-shadow: none;
}
html[data-style="liquid"] .btn-primary:active { background: var(--accent); }
html[data-style="liquid"] .btn-ghost,
html[data-style="liquid"] .btn-danger {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-style="liquid"] .icon-btn {
  background: var(--lg-specular), var(--lg-bg-interactive);
  box-shadow: inset 0 1px 0.5px var(--lg-highlight), 0 2px 8px var(--lg-edge-dark);
  transition: transform var(--lg-duration-fast) var(--lg-easing-spring);
}
html[data-style="liquid"] .icon-btn:active { transform: scale(0.9); }

/* ---------- Listen ---------- */

html[data-style="liquid"] .row:active,
html[data-style="liquid"] .cell:active { background: var(--lg-bg-pressed); }
html[data-style="liquid"] .row + .row::before { left: 72px; right: 16px; }
html[data-style="liquid"] .nr {
  border-radius: 50%;
  background: var(--lg-specular), var(--lg-bg-interactive);
  box-shadow: inset 0 1px 0.5px var(--lg-highlight), inset 0 -1px 1px var(--lg-edge-dark), 0 1px 4px var(--lg-edge-dark);
}
html[data-style="liquid"] .nr::after { border-color: transparent; box-shadow: 0 0 0 2px var(--lg-bg-elevated); }

/* ---------- Segmente, Suche, Chips ---------- */

html[data-style="liquid"] .seg {
  background: var(--lg-bg-inset);
  box-shadow: inset 0 1px 3px var(--lg-edge-dark), inset 0 -1px 0 var(--lg-highlight-soft);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
}
html[data-style="liquid"] .seg::after { display: none; }
html[data-style="liquid"] .seg button {
  transition: background var(--lg-duration-fast) ease, transform var(--lg-duration-fast) var(--lg-easing-spring), color var(--lg-duration-fast) ease;
}
html[data-style="liquid"] .seg button[aria-pressed="true"] {
  color: var(--text);
  background: var(--lg-specular), var(--lg-bg-elevated);
  box-shadow: inset 0 1px 0.5px var(--lg-highlight), 0 3px 10px var(--lg-edge-dark);
}
html[data-style="liquid"] .seg button:active { transform: scale(0.94); }

html[data-style="liquid"] .search {
  background: var(--lg-bg-inset);
  box-shadow: inset 0 1px 3px var(--lg-edge-dark), inset 0 -1px 0 var(--lg-highlight-soft);
}
html[data-style="liquid"] .search::after { display: none; }

html[data-style="liquid"] .chip {
  border: 0;
  background: var(--lg-specular), var(--lg-bg-interactive);
  box-shadow: inset 0 1px 0.5px var(--lg-highlight), inset 0 0 0 0.5px var(--lg-border-subtle), 0 1px 4px var(--lg-edge-dark);
  transition: transform var(--lg-duration-fast) var(--lg-easing-spring), background var(--lg-duration-fast) ease;
}
html[data-style="liquid"] .chip:active { transform: scale(0.93); }
html[data-style="liquid"] .chip[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  box-shadow: 0 4px 12px var(--accent-soft), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
html[data-style="liquid"] .chip.suggested:not([aria-pressed="true"]) {
  background: linear-gradient(var(--lg-tint-accent), var(--lg-tint-accent)), var(--lg-specular), var(--lg-bg-interactive);
}
html[data-style="liquid"] .chip-add {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--lg-border-color);
}

/* ---------- Formular ---------- */

html[data-style="liquid"] .input,
html[data-style="liquid"] .textarea,
html[data-style="liquid"] .select {
  border: 0;
  background: var(--lg-bg-inset);
  box-shadow: inset 0 1px 3px var(--lg-edge-dark), inset 0 -1px 0 var(--lg-highlight-soft);
}
html[data-style="liquid"] .input:focus,
html[data-style="liquid"] .textarea:focus {
  background: var(--lg-bg-elevated);
  box-shadow: inset 0 1px 2px var(--lg-edge-dark), 0 0 0 3px rgba(70, 120, 255, 0.30);
}
html[data-style="liquid"] .toggle-row,
html[data-style="liquid"] .info-box {
  background: var(--lg-bg-inset);
  box-shadow: inset 0 1px 2px var(--lg-edge-dark), inset 0 -1px 0 var(--lg-highlight-soft);
}
html[data-style="liquid"] .quick button {
  background: var(--lg-specular), var(--lg-bg-interactive);
  box-shadow: inset 0 1px 0.5px var(--lg-highlight), 0 1px 4px var(--lg-edge-dark);
  transition: transform var(--lg-duration-fast) var(--lg-easing-spring);
}
html[data-style="liquid"] .quick button:active { transform: scale(0.92); }

/* Schalter mit gläsernem Knopf, der beim Antippen breiter wird */
html[data-style="liquid"] .switch span { background: var(--lg-bg-inset); box-shadow: inset 0 1px 3px var(--lg-edge-dark); }
html[data-style="liquid"] .switch input:checked + span { background: #2fb565; box-shadow: inset 0 1px 3px rgba(0, 60, 20, 0.35); }
html[data-style="liquid"] .switch span::after {
  background: radial-gradient(120% 90% at 30% 0%, #fff, rgba(255, 255, 255, 0.85));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), inset 0 -1px 2px rgba(0, 0, 0, 0.08);
  transition: transform var(--lg-duration-normal) var(--lg-easing-spring), width var(--lg-duration-fast) var(--lg-easing-spring);
}
html[data-style="liquid"] .switch input:active + span::after { width: 33px; }
html[data-style="liquid"] .switch input:checked:active + span::after { transform: translateX(14px); }

/* ---------- Statistik ---------- */

html[data-style="liquid"] .kpi { background: var(--lg-specular), var(--lg-bg-primary); }
html[data-style="liquid"] .mbar i {
  border-radius: 8px 8px 4px 4px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #f0604b, #c92c1f);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.6), 0 3px 8px rgba(217, 58, 43, 0.22);
  opacity: 1;
}
html[data-style="liquid"] .mbar.zero i { background: var(--lg-bg-inset); box-shadow: none; }
html[data-style="liquid"] .hbar-track { background: var(--lg-bg-inset); box-shadow: inset 0 1px 2px var(--lg-edge-dark); }
html[data-style="liquid"] .hbar-fill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%), var(--bar, var(--accent));
}
html[data-style="liquid"] .split { gap: 3px; border-radius: 7px; height: 16px; }
html[data-style="liquid"] .split i { box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.5); }

/* ---------- Einstellungen ---------- */

html[data-style="liquid"] .mono { background: var(--lg-bg-inset); box-shadow: inset 0 1px 2px var(--lg-edge-dark); }
html[data-style="liquid"] .cell + .cell::before { right: 16px; }

/* ---------- Tableiste: schwebende Kapsel mit gleitender Glaslinse ---------- */

html[data-style="liquid"] .tabbar .glass {
  background: var(--lg-specular), var(--lg-bg-toolbar);
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  box-shadow:
    inset 0 1px 0.5px var(--lg-highlight),
    inset 0 -1px 1px var(--lg-highlight-soft),
    inset 0 0 0 0.5px var(--lg-border-subtle),
    var(--lg-shadow-high);
}
html[data-style="liquid"] .tabbar-pill { position: relative; padding: 6px; transition: padding var(--lg-duration-normal) var(--lg-easing-spring); }
html[data-style="liquid"] .tab-lens {
  display: block;
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  border-radius: 999px;
  opacity: 0;
  background: var(--lg-specular), var(--lg-bg-pressed);
  box-shadow: inset 0 1px 0.5px var(--lg-highlight), inset 0 -1px 2px var(--lg-edge-dark), 0 4px 14px var(--lg-edge-dark);
  transition: transform var(--lg-duration-normal) var(--lg-easing-spring), width var(--lg-duration-normal) var(--lg-easing-spring), opacity var(--lg-duration-fast) ease;
  pointer-events: none;
}
html[data-style="liquid"] .tab { position: relative; z-index: 1; transition: color var(--lg-duration-fast) ease, height var(--lg-duration-normal) var(--lg-easing-spring), min-width var(--lg-duration-normal) var(--lg-easing-spring); }
html[data-style="liquid"] .tab.active { background: transparent; color: var(--accent); }
html[data-style="liquid"] .tab:active svg { transform: scale(0.88); }
html[data-style="liquid"] .tab svg { transition: transform var(--lg-duration-fast) var(--lg-easing-spring); }
html[data-style="liquid"] .tab span:not(.tab-badge) { transition: opacity var(--lg-duration-fast) ease; }
html[data-style="liquid"] .fab {
  transition: width var(--lg-duration-normal) var(--lg-easing-spring), height var(--lg-duration-normal) var(--lg-easing-spring), transform var(--lg-duration-fast) var(--lg-easing-spring);
}
html[data-style="liquid"] .fab:active { transform: scale(0.9); }
html[data-style="liquid"] .fab svg { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5)); }

/* Beim Herunterscrollen schrumpft die Leiste, beim Hochscrollen kommt sie zurück */
html[data-style="liquid"] .tabbar.compact .tab { height: 42px; min-width: 56px; }
html[data-style="liquid"] .tabbar.compact .tab span:not(.tab-badge) { opacity: 0; position: absolute; }
html[data-style="liquid"] .tabbar.compact .fab { width: 54px; height: 54px; }
html[data-style="liquid"] .tab-badge { box-shadow: 0 2px 6px rgba(180, 100, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); }

/* ---------- Blatt (Sheet) ---------- */

html[data-style="liquid"] .sheet-backdrop {
  background: var(--lg-bg-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html[data-style="liquid"] .sheet {
  border-radius: var(--lg-radius-xl) var(--lg-radius-xl) 0 0;
  background: var(--lg-specular), var(--lg-bg-elevated);
  -webkit-backdrop-filter: blur(var(--lg-blur-xl)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-xl)) saturate(var(--lg-saturate));
  box-shadow: inset 0 1px 0.5px var(--lg-highlight), var(--lg-shadow-high);
  transition: transform 520ms var(--lg-easing-spring);
}
html[data-style="liquid"] .sheet-grip { background: var(--lg-border-color); width: 42px; }
html[data-style="liquid"] .sheet-foot { border-top: 0; background: linear-gradient(rgba(255, 255, 255, 0), var(--lg-bg-elevated) 30%); }

/* ---------- Anmeldung, Toast ---------- */

html[data-style="liquid"] .login-card { border-radius: var(--lg-radius-xl); background: var(--lg-specular), var(--lg-bg-elevated); }
html[data-style="liquid"] .login-icon { border-radius: 22px; box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.7), 0 10px 30px rgba(217, 58, 43, 0.35); }
html[data-style="liquid"] .toast {
  background: var(--lg-specular), var(--lg-bg-elevated);
  transition: transform 520ms var(--lg-easing-spring);
}

html[data-style="liquid"] .empty-icon {
  background: var(--lg-specular), var(--lg-bg-interactive);
  box-shadow: inset 0 1px 0.5px var(--lg-highlight), 0 2px 8px var(--lg-edge-dark);
}

@media (min-width: 700px) {
  html[data-style="liquid"] .sheet { border-radius: var(--lg-radius-xl); }
}

/* ---------- Barrierefreiheit ---------- */

@media (prefers-reduced-motion: reduce) {
  html[data-style="liquid"] .glow { animation: none; }
}

/* Mehr Kontrast oder weniger Transparenz gewünscht: festes statt durchsichtiges Glas */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  html[data-style="liquid"] {
    --lg-bg-primary: #ffffff;
    --lg-bg-elevated: #ffffff;
    --lg-bg-toolbar: #f4f6fa;
    --lg-bg-interactive: #eef1f6;
    --lg-bg-inset: #e6eaf1;
    --muted: #39414f;
  }
  html[data-style="liquid"][data-theme="dark"] {
    --lg-bg-primary: #171c2b;
    --lg-bg-elevated: #1c2233;
    --lg-bg-toolbar: #161b29;
    --lg-bg-interactive: #252c40;
    --lg-bg-inset: #10141f;
    --muted: #c3cad8;
  }
  html[data-style="liquid"] .glass,
  html[data-style="liquid"] .sheet,
  html[data-style="liquid"] .tabbar .glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}