/* ============================================================================
   TRACKER PRO — Nocturne
   ============================================================================

   Diese Datei liegt hinter app.css und formt die gemeinsamen Bauteile um:
   Karten, Knöpfe, Eingaben, Leisten, Kennzahlen. Die Ansichten selbst bleiben
   unangetastet — sie benutzen dieselben Klassen und ziehen automatisch mit.

   Fünf Regeln, an denen sich alles hier orientiert:

     1. Gehoben wird durch Licht an der Oberkante, nicht durch Schatten
        darunter. Schatten sind für Dinge, die tatsächlich schweben (Dialoge,
        Menüs), nicht für Karten, die auf der Seite liegen.

     2. Bernstein heißt Aktion. Nichts anderes ist bernsteinfarben, und keine
        Aktion ist es nicht.

     3. Bereichsfarben stehen an der Kante, nicht auf der Fläche. Ein
        farbiger Strich links am Rand sagt „Depot", ohne dass die Karte
        violett wird.

     4. Zahlen laufen weit, Etiketten laufen weit gesperrt, Fließtext läuft
        eng. Drei Register, eine Familie.

     5. Bewegung hat einen schnellen Anfang und ein langes Ende. Man nimmt das
        Ende wahr.
   ============================================================================ */

/* ══════════════════════════════════════════════════════ Grundfläche ═══ */

body {
  background: var(--bg);
  color: var(--text);
}

/* Ein sehr schwacher Lichtkegel oben — nimmt der Fläche das Tote, ohne als
   Verlauf aufzufallen. Fest an der Seite, nicht mitscrollend. */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 420px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 100% at 50% 0%, rgba(123, 156, 255, 0.055), transparent 70%),
    radial-gradient(60% 80% at 82% 0%, rgba(255, 196, 107, 0.035), transparent 70%);
}
body.light::before { opacity: 0.5; }

/* ══════════════════════════════════════════════════════════ Karten ═══ */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--edge);
  position: relative;
  transition: border-color var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}

@media (hover: hover) and (min-width: 1024px) {
  .card:hover { border-color: var(--border-strong); }
}

/* Bereichsfarbe als Kante links. Wird über data-tint gesetzt, damit die
   Ansichten nichts anderes tun müssen als das Attribut zu schreiben. */
.card[data-tint]::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--tint, var(--accent));
  opacity: 0.85;
}
.card[data-tint="time"]   { --tint: var(--primary); }
.card[data-tint="money"]  { --tint: var(--success); }
.card[data-tint="invest"] { --tint: var(--invest); }
.card[data-tint="crypto"] { --tint: var(--crypto); }

.card-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ═════════════════════════════════════════════════ Zahlen und Etiketten ═══ */

/* Die Kennzahlen im Kopf jeder Ansicht. Etikett klein und weit gesperrt
   darüber, Wert groß und weit laufend darunter — die Anordnung eines
   beschrifteten Messgeräts. */
.stat-lbl,
.fg label,
.field-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Die großen Anzeigen laufen in Archivo weit, nicht in der Schreibmaschine:
   eine 36-px-Zahl in Mono sieht aus wie eine Protokollzeile, nicht wie ein
   Messwert. Kleine Werte in Listen bleiben Mono — dort zählt die Spalte. */
.big-val,
.stat-val,
.timer-display,
.ins-hero-val,
.big-num,
.readout {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'wdth' var(--wdth-wide);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text);
  font-feature-settings: normal;
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'wdth' var(--wdth-tight);
  letter-spacing: var(--track-display);
}

h2, h3, .page-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--track-tight);
}

/* ══════════════════════════════════════════════════════════ Knöpfe ═══ */

.btn {
  font-family: var(--font);
  font-weight: 600;
  font-variation-settings: 'wdth' var(--wdth-normal);
  letter-spacing: var(--track-tight);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}

/* Die eine Aktionsfarbe. */
.btn-primary,
.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover,
.btn-accent:hover { background: var(--accent-hot); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

/* Die frühere Fassung gab jedem Bereich seinen eigenen Knopf: „+ Asset"
   violett, „+ Hinzufügen" grün, und so weiter. Damit stand auf jedem
   Bildschirm eine andere Farbe für dieselbe Sache — und der Bernstein hatte
   keine Bedeutung mehr.
   Jetzt: alles, was etwas anlegt oder auslöst, ist bernsteinfarben. Egal in
   welchem Bereich. Der Bereich steht in der Überschrift und in den Daten. */
.btn-invest, .btn-crypto, .btn-success, .btn-warning, .btn-bitget {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}
.btn-invest:hover, .btn-crypto:hover, .btn-success:hover,
.btn-warning:hover, .btn-bitget:hover { background: var(--accent-hot); }

/* Eine Ausnahme, und die ist verdient: Löschen bleibt rot. Das ist keine
   Bereichsfarbe, das ist eine Warnung. */
.btn-danger {
  background: color-mix(in srgb, var(--danger) 13%, transparent);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  box-shadow: none;
}
.btn-danger:hover {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  border-color: color-mix(in srgb, var(--danger) 52%, transparent);
}

.btn:active, .btn-icon:active { transform: scale(0.975); transition-duration: 60ms; }

.btn-icon {
  border-radius: var(--radius-sm);
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}

/* ═══════════════════════════════════════════════════════ Eingaben ═══ */

input, textarea, select, .input {
  font-family: var(--font);
  letter-spacing: var(--track-tight);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
input:focus, textarea:focus, select:focus, .input:focus {
  border-color: var(--accent);
  background: var(--bg-hover);
  box-shadow: 0 0 0 3px var(--accent-dim);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-ghost); }

/* Zahleneingaben bekommen Tabellenziffern, damit sie beim Tippen nicht
   springen. */
input[type="number"], input[inputmode="decimal"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════ Die Spur (Signatur) ═══ */

/*
   Ein Streifen aus Strichen: jeder Strich ein Tag, seine Höhe der Wert.
   Zeit, Geld und Depot sind im Kern dasselbe — etwas, das über Tage läuft —
   und dieser Streifen ist die Stelle, an der man das sieht. Deshalb überall
   gleich, nur in der jeweiligen Bereichsfarbe.

   Erwartetes Markup:
     <div class="trace" style="--tint:var(--invest)">
       <i style="--h:.4"></i><i style="--h:.8"></i>…
     </div>
*/
.trace {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
  --tint: var(--accent);
}
.trace i {
  flex: 1 1 0;
  min-width: 2px;
  height: calc(var(--h, 0.1) * 100%);
  border-radius: 1px;
  background: var(--tint);
  opacity: 0.28;
  transform-origin: bottom;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}
/* Der jüngste Tag rechts ist der, der zählt. */
.trace i:last-child { opacity: 1; }
.trace i:nth-last-child(-n+3) { opacity: 0.62; }
.trace:hover i { opacity: 0.5; }
.trace:hover i:hover { opacity: 1; transform: scaleY(1.12); }

/* Beim Einlaufen wachsen die Striche von unten. */
.trace.grow i {
  animation: trace-grow var(--t-slow) var(--ease-out) both;
  animation-delay: calc(var(--n, 0) * 14ms);
}
@keyframes trace-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ═══════════════════════════════════════════════════ Navigation ═══ */

.nav {
  background: var(--bg-glass);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
  border-top: 1px solid var(--border);
  box-shadow: var(--edge);
}

.nav-btn {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Der wandernde Hintergrund bekommt einen Hauch der Bereichsfarbe statt
   neutralem Grau — dadurch trägt die Bewegung selbst schon Bedeutung. */
.nav-glider {
  background: var(--bg-hover);
  box-shadow: var(--edge);
}
body[data-tab="dashboard"] .nav-glider,
body[data-tab="folders"] .nav-glider   { background: color-mix(in srgb, var(--primary) 14%, var(--bg-hover)); }
body[data-tab="todo"] .nav-glider      { background: color-mix(in srgb, var(--success) 14%, var(--bg-hover)); }
body[data-tab="invest"] .nav-glider,
body[data-tab="crypto"] .nav-glider,
body[data-tab="markets"] .nav-glider,
body[data-tab="bitget"] .nav-glider    { background: color-mix(in srgb, var(--invest) 14%, var(--bg-hover)); }

.nav-brand .mark {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-max);
}
.nav-brand .sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════ Unterleiste ═══ */

.view-tabs {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--edge);
}

.view-tab {
  font-family: var(--font);
  font-weight: 550;
  font-size: 12.5px;
  letter-spacing: var(--track-tight);
}
.view-tab.active {
  background: var(--bg-lift);
  color: var(--text);
  box-shadow: var(--edge);
}

/* Höhere Spezifität nötig: app.css setzt `.subnav .view-tab.active` auf
   Bernstein. Reiter sind aber keine Aktionen — sie zeigen, wo man ist. */
.subnav .view-tab.active,
.view-tabs .view-tab.active {
  background: var(--bg-lift);
  color: var(--text);
  box-shadow: var(--edge);
}

/* Aus demselben Grund: Filter und Pillen sind Zustände, keine Auslöser. */
.filter-tabs .filter-tab.active,
.pill.active {
  background: var(--bg-lift);
  color: var(--text);
  box-shadow: var(--edge);
}
.todo-sub-btn.active .todo-sub-count {
  background: var(--bg-lift);
  color: var(--text);
}

/* Der aktive Unterreiter trägt seine Bereichsfarbe im Symbol, nicht in der
   Fläche — die Fläche bleibt neutral, damit alle Reiter gleich schwer wiegen. */
.view-tab.active[data-subnav-item="invest"]  .tab-ico { color: var(--invest); }
.view-tab.active[data-subnav-item="crypto"]  .tab-ico { color: var(--crypto); }
.view-tab.active[data-subnav-item="bitget"]  .tab-ico { color: var(--bitget); }
.view-tab.active[data-subnav-item="markets"] .tab-ico { color: var(--warning); }
.view-tab.active[data-subnav-item="finances"].tab-ico,
.view-tab.active[data-subnav-item="finances"] .tab-ico { color: var(--success); }
.view-tab.active[data-subnav-item="folders"] .tab-ico { color: var(--primary); }

/* ═════════════════════════════════════════════════════ Filter ═══ */

.filter-tabs { gap: 2px; }
.filter-tab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  transition: color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.filter-tab.active { background: var(--bg-lift); color: var(--text); }

/* ═════════════════════════════════════════════════════ Dialoge ═══ */

dialog, .modal, .modal-box, .sheet {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--edge);
}
dialog::backdrop, .modal-backdrop {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(6px);
}

/* ══════════════════════════════════════════════════ Kleinkram ═══ */

.chip, .badge, .tag, .pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
}

.toast {
  background: var(--bg-lift);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), var(--edge);
}

.cmdk-panel {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), var(--edge);
}
.cmdk-input { font-family: var(--font); letter-spacing: var(--track-tight); }
.cmdk-esc, .cmdk-foot {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmdk-fab {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  box-shadow: var(--shadow-accent), var(--shadow-md);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out);
}
.cmdk-fab:hover { transform: scale(1.06); }
.cmdk-fab:active { transform: scale(0.94); }
.cmdk-fab svg { fill: currentColor; }

/* Der Knopf für die Kursaktualisierung. */
.btn-live { position: relative; }
.btn-live svg { width: 16px; height: 16px; display: block; }
.btn-live .live-dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim);
  transition: background var(--t-base) var(--ease-out);
}
.btn-live.busy svg { animation: live-spin 1.4s linear infinite; }
@keyframes live-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════ Zugänglichkeit ═══ */

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

button, a, [role="button"], .nav-btn, .filter-tab, .view-tab {
  -webkit-tap-highlight-color: transparent;
}

/* Ausgewählter Text bekommt die Aktionsfarbe — an dieser Stelle ist sie
   tatsächlich eine Handlung. */
::selection { background: var(--accent-glow); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════ Anmeldevorhang ═══ */

/* auth-ui.js bringt sein CSS selbst mit; hier wird nur nachgezogen, was die
   neue Richtung betrifft. */
.auth-veil {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 196, 107, 0.06), transparent 70%),
    var(--bg);
}
.auth-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'wdth' var(--wdth-tight);
  letter-spacing: var(--track-display);
  font-size: 26px;
}
.auth-f label {
  font-family: var(--font-mono);
  letter-spacing: var(--track-mono);
}
.auth-btn {
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-accent);
  transition: background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.auth-btn:hover { background: var(--accent-hot); opacity: 1; }
.auth-btn:active { transform: scale(0.985); }
.auth-f input:focus { border-color: var(--accent); }
.auth-card { max-width: 400px; }