/* Erscheinungsbild "Soft Motion".
 *
 * Eine Haut ueber app.css - Aufbau, Raster und Bedeutung bleiben, wie sie sind.
 * Flaechen sind aus einem Material geformt: Bedienelemente stehen erhaben
 * (heller Schatten oben links, dunkler unten rechts), Gewaehltes und Eingaben
 * liegen eingedrueckt. Bewegung federt (Ueberschwingen), statt zu gleiten.
 *
 * AST-Rot bleibt das einzige Signal: nicht verteilt, Minus, heute.
 * Bei "Bewegung reduzieren" laufen keine Dauer-Animationen (siehe unten),
 * bei "Aus" entfernt app.css ohnehin jede Animation.
 *
 * Aktiv, wenn <html data-skin="soft"> - gesetzt aus der Benutzereinstellung.
 */

:root[data-skin="soft"] {
  --paper:   #eef0f3;
  --sheet:   #eef0f3;
  --sheet-2: #e8ebef;
  --ground:  #e2e6ea;
  --ground-2:#d9dee3;
  --rule:    rgba(38, 42, 48, .07);
  --rule-2:  rgba(38, 42, 48, .16);
  --soft-hi: rgba(255, 255, 255, .95);
  --soft-lo: rgba(160, 168, 180, .48);
  --spring:  cubic-bezier(.34, 1.56, .64, 1);
  --raise:   -6px -6px 14px var(--soft-hi), 6px 6px 16px var(--soft-lo);
  --raise-s: -3px -3px 8px var(--soft-hi), 3px 3px 9px var(--soft-lo);
  --press:   inset 3px 3px 7px var(--soft-lo), inset -3px -3px 7px var(--soft-hi);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="soft"]:not([data-theme="light"]) {
    --paper: #1f2329; --sheet: #1f2329; --sheet-2: #23282e;
    --ground: #282d34; --ground-2: #2e343b;
    --rule: rgba(255, 255, 255, .06); --rule-2: rgba(255, 255, 255, .14);
    --soft-hi: rgba(255, 255, 255, .045); --soft-lo: rgba(0, 0, 0, .55);
  }
}
:root[data-skin="soft"][data-theme="dark"] {
  --paper: #1f2329; --sheet: #1f2329; --sheet-2: #23282e;
  --ground: #282d34; --ground-2: #2e343b;
  --rule: rgba(255, 255, 255, .06); --rule-2: rgba(255, 255, 255, .14);
  --soft-hi: rgba(255, 255, 255, .045); --soft-lo: rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------ Kopfleiste */
[data-skin="soft"] .topbar {
  border-bottom: 0;
  box-shadow: 0 10px 18px -14px var(--soft-lo);
  height: 64px;
}
[data-skin="soft"] .tabs {
  flex: 0 1 auto; gap: 4px; padding: 6px; border-radius: 999px;
  box-shadow: var(--raise-s);
}
/* Die Pille ist nur so breit wie ihre Reiter - der rechte Block bleibt trotzdem rechts. */
[data-skin="soft"] .topbar-right { margin-left: auto; }
[data-skin="soft"] .tabs button {
  position: relative; z-index: 1;
  padding: 8px 18px; border-radius: 999px;
}
/* Der gleitende Strich wird zur eingedrueckten Mulde unter dem aktiven Reiter. */
[data-skin="soft"] .tab-bar {
  top: 6px; bottom: 6px; height: auto; z-index: 0;
  background: var(--paper); border-radius: 999px;
  box-shadow: var(--press);
}
[data-skin="soft"] .brand img { border-radius: 10px; }
[data-skin="soft"] .icon-btn {
  width: 40px; height: 40px; border-radius: 999px; box-shadow: var(--raise-s);
  transition: box-shadow .2s var(--ease), transform .35s var(--spring);
}
[data-skin="soft"] .icon-btn:hover { background: var(--paper); transform: translateY(-1px); }
[data-skin="soft"] .icon-btn:active { box-shadow: var(--press); transform: none; }
[data-skin="soft"] #btnSettings svg { animation: softSpin 16s linear infinite; }
@keyframes softSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Seite */
[data-skin="soft"] .page-head { border-bottom: 0; padding-bottom: 4px; }
[data-skin="soft"] .card {
  border: 0; border-radius: 26px; box-shadow: var(--raise);
  overflow: hidden;
}
[data-skin="soft"] .card + .card { margin-top: 26px; }
[data-skin="soft"] .card-head { border-bottom-color: var(--rule); }
/* Das Raster laeuft nicht mehr bis an den Rand - eine erhabene Flaeche
   braucht Luft fuer ihren Schatten. */
[data-skin="soft"] .bleed { margin-inline: 0; }
[data-skin="soft"] .bleed .card, [data-skin="soft"] .card.bleed { border-radius: 26px; }
[data-skin="soft"] .card.notice { box-shadow: var(--raise), inset 0 0 0 1.5px color-mix(in srgb, var(--signal) 45%, transparent); }

/* Kennzahlen: einzelne, erhabene Kacheln, die nacheinander hereinfedern. */
[data-skin="soft"] .stats { gap: 18px; border-bottom: 0; margin-bottom: 26px; }
[data-skin="soft"] .stat {
  flex: 1 1 190px; margin: 0; padding: 16px 20px 16px;
  border: 0; border-radius: 22px; box-shadow: var(--raise);
}
[data-skin="soft"] .stat .v { display: inline-block; }
[data-skin="soft"] .stat.neg .v { animation: softWobble 3.4s 1.2s ease-in-out infinite; transform-origin: 30% 70%; }
@keyframes softWobble {
  0%, 84%, 100% { transform: rotate(0); }
  88% { transform: rotate(-7deg); } 92% { transform: rotate(6deg); } 96% { transform: rotate(-2deg); }
}

/* --------------------------------------------------------------- Knoepfe */
[data-skin="soft"] button.btn, [data-skin="soft"] .btn {
  border: 0; border-radius: 999px; background: var(--paper);
  box-shadow: var(--raise-s);
  transition: box-shadow .2s var(--ease), transform .4s var(--spring), background .2s var(--ease);
}
[data-skin="soft"] .btn:hover:not(:disabled) { background: var(--paper); transform: translateY(-1px); }
[data-skin="soft"] .btn:active:not(:disabled) { box-shadow: var(--press); transform: scale(.97); }
[data-skin="soft"] .btn.primary { background: var(--ink); color: var(--sheet); }
[data-skin="soft"] .btn.primary:hover:not(:disabled) { background: var(--accent-2); }
[data-skin="soft"] .btn.brand { background: var(--signal); color: #fff; }
[data-skin="soft"] .btn.ghost { box-shadow: none; background: transparent; }
[data-skin="soft"] .btn.ghost:hover:not(:disabled) { box-shadow: var(--raise-s); }
[data-skin="soft"] .btn.danger { box-shadow: var(--raise-s), inset 0 0 0 1px color-mix(in srgb, var(--signal) 40%, transparent); }
[data-skin="soft"] .btn:disabled,
[data-skin="soft"] .btn.primary:disabled, [data-skin="soft"] .btn.brand:disabled {
  opacity: 1; background: var(--ground); color: var(--ink-3); box-shadow: var(--press);
}
[data-skin="soft"] .seg { border: 0; border-radius: 999px; box-shadow: var(--press); padding: 3px; }
[data-skin="soft"] .seg-b { border-radius: 999px; border: 0 !important; }
[data-skin="soft"] .seg-b[aria-current="true"] { box-shadow: var(--raise-s); }
[data-skin="soft"] .fold-btn { border-radius: 999px; }

/* -------------------------------------------------------------- Eingaben */
[data-skin="soft"] input:not([type="checkbox"]):not(.cell),
[data-skin="soft"] select, [data-skin="soft"] textarea {
  border: 1px solid transparent; border-radius: 12px; background: var(--paper);
  box-shadow: var(--press);
}
[data-skin="soft"] input:not([type="checkbox"]):not(.cell):focus,
[data-skin="soft"] select:focus, [data-skin="soft"] textarea:focus {
  border-color: var(--ink-3);
}
[data-skin="soft"] input:disabled, [data-skin="soft"] select:disabled { background: var(--ground); }
[data-skin="soft"] .pill { border: 0; border-radius: 999px; padding: 4px 12px; box-shadow: var(--press); }
[data-skin="soft"] .pill.ok, [data-skin="soft"] .pill.brand { box-shadow: var(--raise-s); }

/* ------------------------------------------------------------ Monatsraster */
[data-skin="soft"] .month-grid td.d input.cell { border-radius: 8px; }
[data-skin="soft"] .month-grid td.d input.cell:hover { background: var(--paper); box-shadow: var(--raise-s); border-color: transparent; }
[data-skin="soft"] .month-grid td.d input.cell:focus { outline: 0; background: var(--paper); box-shadow: var(--press); }
[data-skin="soft"] .month-grid td.d input.cell.saved { animation: softSaved .7s var(--spring); }
@keyframes softSaved { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
[data-skin="soft"] .month-grid tr.open-row td { border-bottom-color: var(--ink-2); }
/* Nicht verteilt: eine rote Kapsel, die ab und zu wackelt. */
[data-skin="soft"] .month-grid tr.open-row td.cell-bad {
  background: var(--signal) !important; color: #fff; border-radius: 8px;
  box-shadow: 3px 3px 8px color-mix(in srgb, var(--signal) 38%, transparent);
  animation: softJelly 2.8s 1.4s var(--spring) infinite;
}
@keyframes softJelly {
  0%, 70%, 100% { transform: scale(1); }
  78% { transform: scale(1.22, .82); } 86% { transform: scale(.9, 1.1); } 93% { transform: scale(1.04, .97); }
}
[data-skin="soft"] th.d.today { box-shadow: none; }
[data-skin="soft"] th.d.today .dn {
  display: block; width: fit-content; margin: 0 auto 1px; color: #fff; background: var(--signal);
  border-radius: 8px; padding: 0 6px; animation: softBob 2.4s ease-in-out infinite;
}
@keyframes softBob { 50% { transform: translateY(-3px); } }
[data-skin="soft"] .month-grid tbody tr { transition: background .2s var(--ease); }

/* Jahresraster: die Tage federn beim Darueberfahren. */
[data-skin="soft"] .yd { border-radius: 6px; transition: transform .35s var(--spring), box-shadow .2s var(--ease); }
[data-skin="soft"] .yd:hover { transform: scale(1.3); box-shadow: var(--raise-s); }

/* ---------------------------------------------------------------- Dialog */
[data-skin="soft"] .sheet {
  border: 0; border-radius: 28px; background: var(--paper);
  box-shadow: 0 30px 90px rgba(24, 28, 34, .3), -8px -8px 20px var(--soft-hi);
}
[data-skin="soft"] .sheet-backdrop { backdrop-filter: blur(6px); }
[data-skin="soft"] .toast { border-radius: 999px; }

/* Bewegung reduziert: keine Dauer-Animationen, nichts wackelt. */
.motion-reduced[data-skin="soft"] *,
.motion-reduced[data-skin="soft"] *::before { animation-iteration-count: 1 !important; }
.motion-reduced[data-skin="soft"] #btnSettings svg,
.motion-reduced[data-skin="soft"] .stat.neg .v,
.motion-reduced[data-skin="soft"] td.cell-bad,
.motion-reduced[data-skin="soft"] th.d.today .dn { animation: none !important; }