/* ============================================================
   FinanzHub — UX Polish Layer
   Konsolidiert die 10 wichtigsten UX-Verbesserungen aus dem
   YouTube-UX-Audit (Kole Jain, Kevin Kwok, Tim Gabe).
   Geladen NACH allen anderen Stylesheets — überschreibt punktuell.
   ============================================================ */

/* ── F5: 8px-Spacing-Grid + F8: Typografie-Tokens
   Globale Tokens für konsistente Abstände und Schriftgrößen.
   Vorhandene Komponenten ziehen sie schrittweise rein. */
:root {
  /* Spacing — alles ist Vielfaches von 4/8 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;

  /* Typo — 5 kanonische Größen */
  --text-hero:  28px;
  --text-title: 18px;
  --text-body:  14px;
  --text-small: 12px;
  --text-micro: 11px;

  /* Hierarchie-Helfer für F6 — Hero-Element dominiert */
  --hero-weight: 800;
  --hero-letter-spacing: -0.5px;
}

@media (min-width: 1024px) {
  :root {
    --text-hero: 36px;
  }
}

/* ── F4: Touch-Targets ≥ 44×44 px auf Mobile
   Daumen-freundlich für alle klickbaren Elemente. Greift nur unter
   768px damit Desktop-Layouts unberührt bleiben. */
@media (max-width: 768px) {
  .mobile-bnav-item,
  .mobile-drawer-item,
  .mobile-drawer-close,
  .mobile-hamburger,
  .mobile-customize,
  .heat-sidebar [data-side-route],
  .empty-cta,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .anpassen-trigger,
  .bt-tab,
  .tab {
    min-height: 44px;
  }

  /* Inline-Links in Listen brauchen separate Behandlung — nur Touch-Bereich,
     keine Höhen-Reservierung, damit das Layout nicht zerreißt. */
  .card-empty a,
  .row-insights a,
  a[data-route] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
  }
}

/* ── F6: Visuelle Hierarchie — Hero-Element auf Dashboard
   Die Vermögens-Zahl ist das wichtigste Element. Größer, fetter,
   weniger Konkurrenz von daneben liegenden Cards. */
.dash-hero-amount,
.heat-hero-amount,
.networth-hero-num,
[data-hero-num] {
  font-size: var(--text-hero);
  font-weight: var(--hero-weight);
  letter-spacing: var(--hero-letter-spacing);
  line-height: 1.05;
}

@media (min-width: 1024px) {
  .dash-hero-amount,
  .heat-hero-amount,
  .networth-hero-num,
  [data-hero-num] {
    font-size: clamp(36px, 4vw, 56px);
  }
}

/* Secondary Cards optisch leicht zurücknehmen damit die Hierarchie greift. */
.dashboard-charts-row .chart-card .card-title-text,
.dashboard-bottom-row .chart-card .card-title-text {
  font-size: var(--text-title);
  font-weight: 700;
}

/* ── F7: Empty States — visueller Boost (Icon-Opacity + Spacing).
   Empty-CTA-Buttons werden klarer als CTA erkennbar. */
.empty-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--accent-soft, rgba(232, 105, 10, 0.14));
  color: var(--accent, #FFFFFF);
  border: 1px dashed var(--accent, #FFFFFF);
  border-radius: 12px;
  font-weight: 600;
  font-size: var(--text-body);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.empty-cta:hover {
  background: var(--accent, #FFFFFF);
  color: var(--accent-contrast, #fff);
  border-style: solid;
}

.empty-cta:active {
  transform: scale(0.97);
}

.empty-cta-plus {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

.empty-cta-hint {
  font-size: var(--text-small);
  opacity: 0.7;
  margin-left: var(--space-2);
}

/* ── F9: Toast-Notifications — globales System.
   Verwendet von js/toast.js. Stacked unten rechts, 3s sichtbar,
   slide-up Animation. Mobile: zentriert oben. */
.fh-toast-host {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}

@media (max-width: 768px) {
  .fh-toast-host {
    bottom: auto;
    top: calc(64px + env(safe-area-inset-top, 0));
    left: 16px;
    right: 16px;
    max-width: none;
    align-items: stretch;
  }
}

.fh-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface, #1a1a1a);
  color: var(--text, #fff);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2);
  font-size: var(--text-body);
  font-weight: 500;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  min-height: 44px;
}

.fh-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fh-toast.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
}

.fh-toast-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fh-toast.is-success { border-color: rgba(52, 211, 153, 0.45); }
.fh-toast.is-success .fh-toast-ico { color: #34D399; }
.fh-toast.is-error   { border-color: rgba(248, 113, 113, 0.45); }
.fh-toast.is-error   .fh-toast-ico { color: #F87171; }
.fh-toast.is-info    { border-color: var(--accent, rgba(232,105,10,0.45)); }
.fh-toast.is-info    .fh-toast-ico { color: var(--accent, #FFFFFF); }

.fh-toast-body {
  flex: 1 1 auto;
  line-height: 1.35;
}

.fh-toast-close {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.fh-toast-close:hover { opacity: 1; }

/* Respektiert reduce-motion — Toasts erscheinen ohne Slide. */
@media (prefers-reduced-motion: reduce) {
  .fh-toast {
    transition: opacity .15s ease;
    transform: none;
  }
  .fh-toast.is-visible,
  .fh-toast.is-leaving {
    transform: none;
  }
}