/* app-theme.css  —  Modern Finance Look (Blue/Green)  */
/* CSP-freundlich: keine externen Fonts, keine inline <style> nötig */

:root {
  /* Core palette (WCAG-kontraststark auf Weiß & Dunkel) */
  --fin-navy-950: #0a1b2b;
  --fin-navy-900: #0e2740;
  --fin-navy-800: #123355;

  --fin-blue-600: #2563eb;  /* Primary Blue */
  --fin-blue-500: #3b82f6;
  --fin-blue-400: #60a5fa;

  --fin-emerald-600: #059669; /* Primary Green */
  --fin-emerald-500: #10b981;
  --fin-emerald-400: #34d399;

  --fin-cyan-400: #22d3ee;   /* Liquid accent */
  --fin-teal-400: #2dd4bf;

  --fin-amber-500: #f59e0b;  /* Warning/Accent */
  --fin-rose-500:  #f43f5e;  /* Danger */

  /* Neutrals */
  --fin-gray-900: #0f172a;
  --fin-gray-800: #1e293b;
  --fin-gray-700: #334155;
  --fin-gray-600: #475569;
  --fin-gray-500: #64748b;
  --fin-gray-400: #94a3b8;
  --fin-gray-300: #cbd5e1;
  --fin-gray-200: #e2e8f0;
  --fin-gray-100: #f1f5f9;
  --fin-white:     #ffffff;

  /* Surfaces */
  --fin-bg:      var(--fin-white);
  --fin-card:    var(--fin-white);
  --fin-border:  var(--fin-gray-200);
  --fin-text:    var(--fin-gray-900);

  /* Brand tokens */
  --fin-primary:   var(--fin-blue-600);
  --fin-primary-2: var(--fin-emerald-600);
  --fin-accent:    var(--fin-cyan-400);

  /* Shadows */
  --fin-shadow-sm: 0 1px 2px rgba(2,8,23,0.05);
  --fin-shadow-md: 0 6px 16px rgba(2,8,23,0.08);
  --fin-shadow-lg: 0 14px 28px rgba(2,8,23,0.12);

  /* === Liquid Background: Mobile/Tablet Defaults === */
  --liq-b1: 32rem; --liq-b2: 28rem; --liq-b3: 24rem;     /* Blob-Radien */
  --liq-p1: 20% 20%; --liq-p2: 80% 10%; --liq-p3: 70% 80%; /* Positionen */
  --liq-blue: .16; --liq-emerald: .16; --liq-cyan: .14;     /* Opazitäten */

  /* === Topbar Glass Controls === */
  --topbar-alpha-light: 0.70;   /* 0.60–0.80: Deckkraft Light */
  --topbar-alpha-dark:  0.65;   /* 0.55–0.70: Deckkraft Dark */
  --topbar-blur: 12px;          /* 8–14px: Unschärfe */
  --topbar-saturate: 1.25;      /* 1.1–1.35: Sättigung */
}

/* Desktop/LG – kleinere Radien & leicht versetzte Positionen,
   damit die Tupfer sichtbar bleiben (nicht flächig „auswaschen“) */
@media (min-width: 1024px){
  :root{
    --liq-b1: 22rem; --liq-b2: 20rem; --liq-b3: 18rem;
    --liq-p1: 22% 24%; --liq-p2: 78% 18%; --liq-p3: 58% 78%;
    --liq-blue: .20; --liq-emerald: .18; --liq-cyan: .18;
  }
}

/* Dark mode (opt-in mit data-theme="dark" am <html> oder <body>) */
[data-theme="dark"] {
  --fin-bg:     #0b1220;
  --fin-card:   #0f172a;
  --fin-border: #1f2a44;
  --fin-text:   #e5ecff;
}

/* Base */
html, body {
  background: var(--fin-bg);
  color: var(--fin-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  text-rendering: optimizeLegibility;
}

/* === Topbar – Glass/Translucent (Variante B, ohne Hover) =============== */
/* Fallback (ohne backdrop-filter): transparenter Navy-Gradient */
.fin-topbar {
  position: relative;
  z-index: 50; /* über dem Liquid-Layer */
  color: #eaf2ff;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--fin-navy-900) calc(var(--topbar-alpha-light)*100%), transparent),
      color-mix(in srgb, var(--fin-navy-800) calc(var(--topbar-alpha-light)*100%), transparent)
    );
  transition: border-color .15s ease, filter .15s ease;
}

/* Dark-Fallback */
[data-theme="dark"] .fin-topbar{
  color: #eaf2ff;
  border-bottom-color: rgba(255,255,255,0.08);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--fin-navy-900) calc(var(--topbar-alpha-dark)*100%), transparent),
      color-mix(in srgb, var(--fin-navy-800) calc(var(--topbar-alpha-dark)*100%), transparent)
    );
}

/* Blur & Sättigung, wenn unterstützt */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .fin-topbar{
    backdrop-filter: blur(var(--topbar-blur)) saturate(var(--topbar-saturate));
    -webkit-backdrop-filter: blur(var(--topbar-blur)) saturate(var(--topbar-saturate));
    border-bottom-color: rgba(255,255,255,0.12);
  }
  [data-theme="dark"] .fin-topbar{
    border-bottom-color: rgba(255,255,255,0.10);
  }
}

/* Cards */
.fin-card {
  background: var(--fin-card);
  border: 1px solid var(--fin-border);
  border-radius: 16px;
  box-shadow: var(--fin-shadow-sm);
}
.fin-card:hover { box-shadow: var(--fin-shadow-md); }

/* Buttons */
.fin-btn {
  --_bg: var(--fin-primary);
  --_bg-hover: #1d4ed8;
  --_txt: #fff;
  --_ring: rgba(37, 99, 235, .45);
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; padding: .6rem 1.1rem;
  font-weight: 600; border: 1px solid transparent;
  color: var(--_txt); background: var(--_bg);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 14px rgba(37,99,235,.18);
}
.fin-btn:hover { background: var(--_bg-hover); transform: translateY(-1px); }
.fin-btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--_ring); }
.fin-btn--secondary {
  --_bg: var(--fin-emerald-600);
  --_bg-hover: #047857;
  box-shadow: 0 6px 14px rgba(16,185,129,.18);
}
.fin-btn--ghost {
  --_bg: transparent; --_bg-hover: rgba(2,8,23, .04);
  color: var(--fin-gray-700); border-color: var(--fin-border); box-shadow: none;
}

/* >>> Outline-Variante für neutrale/„Abbrechen“-Buttons <<< */
.fin-btn--outline{
  --_txt: var(--fin-text);
  color: var(--_txt);
  background: transparent;
  border: 1px solid var(--fin-border);
  box-shadow: none;
}
[data-theme="dark"] .fin-btn--outline{
  color: #e5ecff;
  border-color: rgba(255,255,255,.22);
}
.fin-btn--outline:hover{
  background: rgba(2,8,23,.04);
}
[data-theme="dark"] .fin-btn--outline:hover{
  background: rgba(255,255,255,.06);
}

/* Danger (rot, weisser Text) */
.fin-btn--danger{
  --_bg: var(--fin-rose-500);      /* rot */
  --_bg-hover: #dc2626;            /* dunkleres Rot */
  box-shadow: 0 6px 14px rgba(244,63,94,.18);
}

/* Badges */
.fin-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem; border-radius:9999px;
  font-size:.75rem; font-weight:600; letter-spacing:.01em;
  background: rgba(16,185,129,.12); color: #0b7a58; border:1px solid rgba(16,185,129,.24);
}
.fin-badge--warn { background: rgba(245,158,11,.12); color:#9a6700; border-color: rgba(245,158,11,.24); }
.fin-badge--err  { background: rgba(244,63,94,.12);  color:#8f1a2b; border-color: rgba(244,63,94,.24); }

/* === Badges: bessere Lesbarkeit im Darkmode ============================ */
html[data-theme="dark"] .fin-badge{
  /* satter, weniger transparent */
  background: rgba(16,185,129,.28);
  border-color: rgba(16,185,129,.42);
  color: #f8fafc;

  /* „steht“ auf dunklen Cards */
  box-shadow:
    0 6px 14px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.06);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

html[data-theme="dark"] .fin-badge--warn{
  background: rgba(245,158,11,.28);
  border-color: rgba(245,158,11,.42);
  color: #fff7ed;
}

html[data-theme="dark"] .fin-badge--err{
  background: rgba(244,63,94,.26);
  border-color: rgba(244,63,94,.40);
  color: #fff1f2;
}

/* Tables */
.fin-table { width:100%; border-collapse: separate; border-spacing:0; }
.fin-table thead th {
  font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--fin-gray-600); background: var(--fin-gray-100);
  border-bottom:1px solid var(--fin-border); padding:.75rem .9rem;
  text-align: left; /* global: Header linksbündig */
}
.fin-table tbody td {
  border-top: 1px solid var(--fin-border);
  padding: 9px 12px;
}
.fin-table tr:hover td { background: rgba(2,8,23,.02); }

/* Inputs */
.fin-input {
  width:100%; border:1px solid var(--fin-border); border-radius:12px;
  padding:.55rem .75rem; background: #fff; color: var(--fin-text);
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* Dark mode: inputs readable */
[data-theme="dark"] .fin-input {
  background: var(--fin-bg);
  color: var(--fin-text);
  border-color: var(--fin-border);
}
[data-theme="dark"] .fin-input::placeholder {
  color: rgba(229, 236, 255, .55);
}
.fin-input:focus { outline:0; border-color: var(--fin-blue-400); box-shadow: 0 0 0 4px rgba(59,130,246,.18); }

/* === Liquid Background (sichtbar über Body-Background) ==================== */
/* Responsive Tupfer per Variablen, Layering über z-index:0 */
.fin-liquid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;              /* Sichtbar über dem Body, unter Content */
  pointer-events: none;
  background:
    radial-gradient(var(--liq-b1) var(--liq-b1) at var(--liq-p1), rgba(59,130,246, var(--liq-blue)), transparent 60%),
    radial-gradient(var(--liq-b2) var(--liq-b2) at var(--liq-p2), rgba(16,185,129, var(--liq-emerald)), transparent 60%),
    radial-gradient(var(--liq-b3) var(--liq-b3) at var(--liq-p3), rgba(34,211,238, var(--liq-cyan)), transparent 60%);
  filter: saturate(120%);
}

/* === Login/Auth: dezentes Background-Pattern (CSP-safe, sehr subtil) === */
.tm-page-auth .fin-liquid-bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* feines Wave+Dot Pattern */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27320%27%20viewBox%3D%270%200%20320%20320%27%3E%0A%3Cg%20fill%3D%27none%27%20stroke%3D%27%2360a5fa%27%20stroke-opacity%3D%270.10%27%20stroke-width%3D%271.2%27%3E%0A%20%20%3Cpath%20d%3D%27M-40%2064%20C%2040%2020%2C%20120%20108%2C%20200%2064%20S%20360%20108%2C%20440%2064%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M-40%20128%20C%2040%2084%2C%20120%20172%2C%20200%20128%20S%20360%20172%2C%20440%20128%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M-40%20192%20C%2040%20148%2C%20120%20236%2C%20200%20192%20S%20360%20236%2C%20440%20192%27%2F%3E%0A%20%20%3Cpath%20d%3D%27M-40%20256%20C%2040%20212%2C%20120%20300%2C%20200%20256%20S%20360%20300%2C%20440%20256%27%2F%3E%0A%3C%2Fg%3E%0A%3Cg%20fill%3D%27%2322d3ee%27%20fill-opacity%3D%270.10%27%3E%0A%20%20%3Ccircle%20cx%3D%2736%27%20cy%3D%2736%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%27150%27%20cy%3D%2748%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27270%27%20cy%3D%2728%27%20r%3D%272%27%2F%3E%0A%20%20%3Ccircle%20cx%3D%2782%27%20cy%3D%27150%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27240%27%20cy%3D%27170%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%27300%27%20cy%3D%27140%27%20r%3D%271.6%27%2F%3E%0A%20%20%3Ccircle%20cx%3D%2740%27%20cy%3D%27270%27%20r%3D%272%27%2F%3E%3Ccircle%20cx%3D%27180%27%20cy%3D%27260%27%20r%3D%271.6%27%2F%3E%3Ccircle%20cx%3D%27292%27%20cy%3D%27286%27%20r%3D%272%27%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 720px 720px;

  /* Gesamtstärke: ultra-dezent */
  opacity: .55;
}

html[data-theme="dark"] .tm-page-auth .fin-liquid-bg::before{
  opacity: .35;
}

/* Dark: leicht mehr Sättigung/Helligkeit, damit Tupfer sichtbar bleiben */
[data-theme="dark"] .fin-liquid-bg { filter: saturate(125%) brightness(1.03); }
@media (min-width: 1024px){
  [data-theme="dark"] .fin-liquid-bg { filter: saturate(130%) brightness(1.05); }
}

/* Content-Schicht über Liquid-Background */
.fin-topbar, main, footer {
  position: relative;
  z-index: 1;
}

/* Animierte Blobs (optional, wenn in HTML vorhanden) */
@media (prefers-reduced-motion: no-preference) {
  .fin-liquid-blob {
    position:absolute;
    width:44rem; height:44rem;
    border-radius:50%;
    filter: blur(50px);
    opacity:.16;
    mix-blend-mode: screen;
    animation: blobMove 22s ease-in-out infinite alternate;
  }
  .fin-liquid-blob--1 { background: radial-gradient(circle at 30% 30%, var(--fin-blue-500), transparent 60%); left:-10rem; top:-6rem; }
  .fin-liquid-blob--2 { background: radial-gradient(circle at 60% 40%, var(--fin-emerald-500), transparent 60%); right:-12rem; top:-8rem; animation-delay: -6s; }
  .fin-liquid-blob--3 { background: radial-gradient(circle at 40% 60%, var(--fin-cyan-400), transparent 60%); left:30%; bottom:-10rem; animation-delay: -12s; }

  @keyframes blobMove {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(2rem,-1rem,0) scale(1.06); }
    100% { transform: translate3d(-1rem,1rem,0) scale(1.02); }
  }

  /* Desktop: etwas kleiner & sichtbarer */
  @media (min-width: 1024px){
    .fin-liquid-blob { width:36rem; height:36rem; opacity:.22; }
    .fin-liquid-blob--1{ left:-6rem; top:-4rem; }
    .fin-liquid-blob--2{ right:-8rem; top:-2rem; }
    .fin-liquid-blob--3{ left:28%; bottom:-8rem; }
  }
}

/* Icon helpers */
.fin-icon { width:1.1em; height:1.1em; display:inline-block; vertical-align:-.2em; fill: currentColor; }

/* Topbar-Brand-Badge: Lesbarkeit erhöhen */
.fin-topbar .fin-badge{
  background: color-mix(in srgb, var(--fin-emerald-500) 26%, transparent);
  border-color: color-mix(in srgb, var(--fin-emerald-500) 46%, transparent);
  color: #ffffff;
}
[data-theme="dark"] .fin-topbar .fin-badge{
  background: color-mix(in srgb, var(--fin-emerald-500) 32%, transparent);
  border-color: color-mix(in srgb, var(--fin-emerald-500) 52%, transparent);
  color: #f8fafc;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .fin-topbar .fin-badge{
    backdrop-filter: saturate(1.05) blur(2px);
    -webkit-backdrop-filter: saturate(1.05) blur(2px);
  }
}