/* === Account: Cards layout ============================================ */
.tm-account-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 900px){
  .tm-account-cards{ grid-template-columns: 1fr; }
}

/* Ensure account back button is blue */
.account-back.fin-btn--secondary{
  background: var(--fin-blue-600, var(--fin-primary));
  color: #fff;
  border-color: transparent;
}

.account-back.fin-btn--secondary:hover{
  background: var(--fin-blue-600);
}


/* app-ui.css — Tradingmaus UI Kit (CSP-safe, no inline styles) */
/* Nutzt Farb-Variablen aus app-theme.css (z. B. --fin-primary, --fin-border, ...) */

html {
  scrollbar-gutter: stable;
}

/* Utility: Textauswahl unterbinden (mit Prefixes) */
.fin-no-select {
  -webkit-user-select: none; /* Safari / iOS */
  -ms-user-select: none;     /* alte Edge/IE */
  user-select: none;
}

/* ---------- Tabs ---------- */
.fin-tabs { display: grid; gap: .75rem; }
.fin-tabs__list { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.fin-tab {
  appearance: none;
  border: 1px solid var(--fin-border);
  background: var(--fin-card);
  color: var(--fin-gray-700);
  padding: .5rem .9rem;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}

/* ---------- Table Action-Pills (secondary) ---------- */
/* In Listen-Tabellen werden .fin-tab Links als Action-Buttons genutzt.
   Mit fin-btn--secondary sollen sie wie "blaue" Buttons mit weisser Schrift wirken
   (ohne Tab-Navigation ausserhalb von Tabellen zu beeinflussen). */


/* === FX-Konvertierung: Card-Breite ==================================== */
.tm-fx-card{
  width: 50%;
  max-width: none;
}
@media (max-width: 1100px){
  .tm-fx-card{ width: 100%; }
}

/* === Corporate Actions: Card-Breite =================================== */
.tm-ca-card{
  width: 50%;
  max-width: none;
}
@media (max-width: 1100px){
  .tm-ca-card{ width: 100%; }
}



/* === Dividends embed spacing ========================================== */
.tm-div-head{ margin-bottom: 12px; }
.tm-div-tablewrap{ padding-top: 10px; }
.tm-div-section-gap{ margin-top: 40px; }

.fin-table .fin-tab.fin-btn--secondary {
  background: var(--fin-blue-600);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(37,99,235,.18);
}
.fin-table .fin-tab.fin-btn--secondary:hover {
  background: var(--fin-blue-700);
}
.fin-table .fin-tab.fin-btn--secondary:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(59,130,246,.20), 0 8px 18px rgba(37,99,235,.18);
}

.fin-tab[aria-selected="true"], .fin-tab.is-active {
  background: linear-gradient(90deg, var(--fin-blue-600), var(--fin-emerald-600));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(37,99,235,.18);
}

.fin-tab:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(59,130,246,.18); }

.fin-tabpanel {
  border: 1px solid var(--fin-border);
  border-radius: 16px;
  background: var(--fin-card);
  padding: 1rem;
}

.fin-tabpanel[hidden] { display: none !important; }

/* ---------- Modal ---------- */
.fin-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,27,43,.44);
  z-index: 999;
}
.fin-modal.is-open { display: flex; }

.fin-modal__dialog {
  width: min(720px, calc(100% - 48px));
  background: var(--fin-card);
  color: var(--fin-text);
  border: 1px solid var(--fin-border);
  border-radius: 16px;
  box-shadow: var(--fin-shadow-lg);
}

.fin-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--fin-border);
}

.fin-modal__title { font-size: 1.1rem; font-weight: 700; }
.fin-modal__body { padding: 1rem 1.25rem; }

.fin-modal__foot {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--fin-border);
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

/* ---------- Dropdown ---------- */
.fin-dropdown { position: relative; }

.fin-dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  min-width: 200px;
  background: var(--fin-card);
  color: var(--fin-text);
  border: 1px solid var(--fin-border);
  border-radius: 12px;
  box-shadow: var(--fin-shadow-md);
  padding: .35rem;
  display: none;
  z-index: 50;
}

.fin-dropdown.is-open > .fin-dropdown__menu { display: block; }

.fin-dropdown__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  color: var(--fin-gray-800);
  text-decoration: none;
}

.fin-dropdown__item:hover { background: rgba(2,8,23,.04); }
/* Dropdown header (User name) */
.fin-dropdown__menu .fin-dropdown__item--header{
  font-weight: 700 !important;
  cursor: default;
}
.fin-dropdown__menu .fin-dropdown__item--header:hover{ background: transparent; }



/* === Toasts ============================================================ */
.fin-toast-container{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.fin-toast{
  pointer-events: auto;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: start;
  gap: 10px;
  min-width: 280px;
  max-width: 380px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--fin-card);
  color: var(--fin-text);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.15);
}

.fin-toast__icon{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg,#38bdf8,#10b981);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9);
}

.fin-toast__title{ font-weight: 700; font-size: 13.5px; }
.fin-toast__body{ font-size: 12.5px; opacity: .9; }

.fin-toast .fin-btn{
  font-size: 16px;
  background: transparent;
  border: none;
  color: var(--fin-gray-700);
  opacity: .7;
}

.fin-toast .fin-btn:hover{ opacity: 1; }

.fin-toast--success .fin-toast__icon{ background: linear-gradient(135deg,#22c55e,#16a34a); }
.fin-toast--info    .fin-toast__icon{ background: linear-gradient(135deg,#38bdf8,#0ea5e9); }
.fin-toast--warning .fin-toast__icon{ background: linear-gradient(135deg,#fbbf24,#f59e0b); }
.fin-toast--error   .fin-toast__icon{ background: linear-gradient(135deg,#f97316,#ef4444); }

html[data-theme="dark"] .fin-toast{
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* ==== Switch (Toggle) ===================================================== */
.fin-switch {
  --w: 42px;
  --h: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fin-switch__input {
  position: absolute;
  inset: 0;
  width: var(--w);
  height: var(--h);
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.fin-switch__track {
  width: var(--w);
  height: var(--h);
  background: var(--card, #0b1220);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 999px;
  position: relative;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);
}

.fin-switch__thumb {
  --size: 18px;
  width: var(--size);
  height: var(--size);
  background: var(--panel, #0c1a2a);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  transition: left .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Fokus / Hover (ohne :has für bessere Browser-Kompatibilität) */
.fin-switch__input:focus-visible + .fin-switch__track {
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}

.fin-switch:hover .fin-switch__track {
  border-color: rgba(255,255,255,.15);
}

/* Checked-State */
.fin-switch__input:checked + .fin-switch__track {
  background: linear-gradient(180deg, var(--primary,#2d7eea), var(--primary-600,#1c5ec0));
  border-color: transparent;
}

.fin-switch__input:checked + .fin-switch__track .fin-switch__thumb {
  left: calc(var(--w) - var(--size) - 3px);
  background: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.28);
}

/* Disabled */
.fin-switch--disabled,
.fin-switch__input:disabled + .fin-switch__track {
  opacity: .6;
  cursor: not-allowed;
}

/* ---------- Chips ---------- */
.fin-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .55rem;
  background: var(--fin-gray-100);
  border: 1px solid var(--fin-border);
  border-radius: 9999px;
  font-size: .8rem;
  color: var(--fin-gray-800);
}

.fin-chip--success { background: rgba(16,185,129,.12); color:#0b7a58; border-color: rgba(16,185,129,.24); }
.fin-chip--warn    { background: rgba(245,158,11,.12); color:#9a6700; border-color: rgba(245,158,11,.24); }
.fin-chip--error   { background: rgba(244,63,94,.12); color:#8f1a2b; border-color: rgba(244,63,94,.24); }



/* === Info Box (flat) =================================================== */
.fin-info-box{
  border-radius: 14px;
  padding: .75rem .9rem;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(148,163,184,.12);
  color: rgba(15,23,42,.86);
  font-size: .875rem;
}
html[data-theme="dark"] .fin-info-box{
  border-color: var(--fin-border);
  background: var(--fin-card);
  color: var(--fin-text);
  box-shadow: none;
}

/* === Alerts ============================================================ */
.fin-alert{
  display:flex;
  align-items:flex-start;
  gap: .6rem;
  padding: .75rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--fin-border);
  background: var(--fin-card);
  color: var(--fin-text);
}

.fin-alert--warn{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.24);
  color: #9a6700;
}

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

.fin-alert--success{
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.24);
  color: #065f46;
}
html[data-theme="dark"] .fin-alert--success{
  background: rgba(16,185,129,.22);
  border-color: rgba(16,185,129,.36);
  color: #ecfdf5;
}

.fin-alert--danger{
  background: rgba(244,63,94,.10);
  border-color: rgba(244,63,94,.22);
  color: #9f1239;
}
html[data-theme="dark"] .fin-alert--danger{
  background: rgba(244,63,94,.18);
  border-color: rgba(244,63,94,.32);
  color: #ffe4e6;
}



/* === Chips: bessere Lesbarkeit im Darkmode ============================= */
html[data-theme="dark"] .fin-chip--success{
  background: rgba(16,185,129,.26);
  border-color: rgba(16,185,129,.40);
  color: #eafff6;
}

html[data-theme="dark"] .fin-chip--error{
  background: rgba(244,63,94,.22);
  border-color: rgba(244,63,94,.36);
  color: #fff1f2;
}

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

/* ---------- Pagination ---------- */
.fin-pagination { display:flex; align-items:center; gap:.35rem; }

.fin-page {
  min-width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--fin-border);
  border-radius: 10px;
  color: var(--fin-gray-700);
  background: var(--fin-card);
  text-decoration: none;
  font-weight: 600;
}

.fin-page[aria-current="page"], .fin-page.is-active {
  background: var(--fin-blue-600);
  color: #fff;
  border-color: transparent;
}

/* ---------- Skeleton ---------- */
.fin-skeleton {
  --bg: #eef2f7; --shine: #f7faff;
  background: linear-gradient(90deg, var(--bg) 25%, var(--shine) 37%, var(--bg) 63%);
  background-size: 400% 100%;
  border-radius: 8px;
  min-height: 1rem;
  animation: finShimmer 1.2s ease-in-out infinite;
}

@keyframes finShimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

/* ---------- Tooltip (CSS-only) ---------- */
[data-tooltip] { position:relative; }

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background: var(--fin-gray-800);
  color: #fff;
  font-size: .75rem;
  padding: .35rem .45rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 60;
}

[data-tooltip]:hover::after { opacity: 1; }

/* === Header Brand: global (Badge-Stack entfernt, Navbar-Höhe bleibt) ====== */
.fin-topbar .tm-brand{
  gap: .85rem;
}

.fin-topbar .tm-brand__logo{
  /* Layout bleibt kompakt → Navbar-Höhe bleibt stabil */
  width: 56px;
  height: 56px;
  flex: 0 0 auto;

  /* Optisch grösser, ohne Layout-Höhe zu ändern */
  transform: scale(1.28);
  transform-origin: left center;

  border-radius: 9999px;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

.fin-topbar .tm-brand:hover .tm-brand__logo{
  transform: translateY(-1px) scale(1.32);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.32));
}

.fin-topbar .tm-brand__title{
  font-weight: 850;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  line-height: 1.05;
  color: rgba(234,242,255,.96);
  padding-bottom: 5px;
}

/* Mobile Mode (UA/override): Brand-Titel etwas präsenter */
.tm-is-mobile .fin-topbar .tm-brand__title{
  font-size: 1.45rem;
}

/* Dezent “Premium”: Gradient-Text (fallback bleibt normal) */
@supports (-webkit-background-clip:text) or (background-clip:text){
  .fin-topbar .tm-brand__title{
    background: linear-gradient(90deg, rgba(226,232,240,1), rgba(94,234,212,.95), rgba(96,165,250,.95));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.fin-topbar .tm-brand__tagline{
  margin-top: .12rem;
  font-size: .82rem;
  line-height: 1.1;
  color: rgba(226,232,240,.72);
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Kleine Screens: Tagline ausblenden, damit die Nav-Icons immer Platz haben */
@media (max-width: 640px){
  .fin-topbar .tm-brand__tagline{ display:none; }
}

/* Grössere Screens: nur Text etwas präsenter (ohne Navbar höher zu machen) */
@media (min-width: 768px){
  .fin-topbar .tm-brand__title{ font-size: 1.35rem; }
  .fin-topbar .tm-brand__tagline{ font-size: .86rem; }
}

/* === Theme Toggle: erzwinge echte Button-Größe in der Topbar === */
.fin-topbar #themeToggle {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
}

/* Light/Dark sauber über data-theme steuern */
html[data-theme="light"] .fin-topbar #themeToggle {
  background-color: #111827;   /* gray-900 */
  color: #ffffff;
  box-shadow: inset 0 0 0 2px rgba(17,24,39,0.10);
}
html[data-theme="dark"] .fin-topbar #themeToggle {
  background-color: #ffffff;
  color: #111827;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);
}

html[data-theme="light"] .fin-topbar #themeToggle:hover { background-color: #1f2937; }  /* gray-800 */
html[data-theme="light"] .fin-topbar #themeToggle:active { background-color: #374151; } /* gray-700 */

html[data-theme="dark"] .fin-topbar #themeToggle:hover { background-color: #f3f4f6; }  /* gray-100 */
html[data-theme="dark"] .fin-topbar #themeToggle:active { background-color: #e5e7eb; } /* gray-200 */

.fin-topbar #themeToggle:focus-visible {
  outline: 2px solid #6366f1;   /* indigo-500 */
  outline-offset: 6px;
}

/* === Auth/Login: dezente graue Card, klar erkennbar in Light & Dark === */
.auth-card {
  background: color-mix(in srgb, var(--fin-gray-400) 20%, #ffffff);
  border: 1px solid var(--fin-border);
  border-radius: 16px;
  box-shadow: var(--fin-shadow-sm);
}

html[data-theme="dark"] .auth-card {
  background: color-mix(in srgb, var(--fin-gray-400) 20%, #0f172a);
  border-color: var(--fin-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 24px rgba(0,0,0,.25);
}

/* Inputs in der Login-Card: neutraler Untergrund */
.auth-card input, .auth-card select, .auth-card textarea {
  background: color-mix(in srgb, var(--fin-gray-400) 8%, #ffffff);
  border: 1px solid var(--fin-border);
  color: inherit;
}
html[data-theme="dark"] .auth-card input,
html[data-theme="dark"] .auth-card select,
html[data-theme="dark"] .auth-card textarea {
  background: color-mix(in srgb, var(--fin-gray-400) 8%, #0f172a);
  border-color: var(--fin-border);
}

/* === Auth: mehr Luft um die Login-Card + grössere Card =================== */
.tm-page-auth .tm-auth-wrap{
  /* vorher p-6 => 24px, neu: +50px oben/unten => 74px */
  padding-top: 115px;
  padding-bottom: 115px;
}

/* Auth-Seite: Login-Card vertikal zwischen Topbar und Footer zentrieren,
   Footer bleibt sauber unten. (ohne Layout-Änderungen an anderen Seiten) */
.tm-page-auth{
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.tm-page-auth main{
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-page-auth .tm-auth-center{
  width: 100%;
  display: flex;
  justify-content: center;
}

.tm-page-auth .tm-auth-card{
  /* Card deutlich breiter + mehr Innenabstand */
  max-width: 25rem;  /* ~704px statt max-w-md (~448px) */
  padding: 2rem;   /* 40px statt 24px */
}

@media (min-width: 768px){
  .tm-page-auth .tm-auth-card{
    max-width: 25rem; /* ~768px */
    padding: 2rem;    /* 48px */
  }
}

/* === KPI-Labels in Cards: gut lesbar in Light & Dark ==================== */
html[data-theme="light"] .fin-card .text-slate-500,
html[data-theme="light"] .fin-card .text-slate-600 {
  color: var(--fin-gray-700) !important;
}

html[data-theme="dark"] .fin-card .text-slate-500,
html[data-theme="dark"] .fin-card .text-slate-600 {
  color: var(--fin-gray-300) !important;
}

/* Sicherheitsnetz: Cards erben generell die Root-Textfarbe */
.fin-card { color: var(--fin-text); }

/* === KPI-Texte in Cards: Light-Mode zuverlässig dunkel =================== */
html[data-theme="light"] .fin-card.auth-card {
  color: var(--fin-text);
}

html[data-theme="light"] .fin-card.auth-card .text-slate-500,
html[data-theme="light"] .fin-card.auth-card .text-slate-600,
html[data-theme="light"] .fin-card.auth-card .text-sm {
  color: #475569 !important;
}

html[data-theme="light"] .fin-card.auth-card .font-bold,
html[data-theme="light"] .fin-card.auth-card .text-2xl,
html[data-theme="light"] .fin-card.auth-card .text-xl {
  color: #0f172a !important;
}

/* Tabellen-Header (alle fin-table): linksbündig */
.fin-table thead th { text-align: left; }
.fin-table thead th.text-right { text-align: right; }

/* === Layering Fix: Topbar & Dropdown immer über Content =================== */
.fin-topbar {
  position: relative !important;
  z-index: 1000 !important;
  isolation: isolate;
}

.fin-dropdown__menu { z-index: 1100 !important; }

main, footer {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ---------- Topbar Icon Nav ---------- */
.fin-navicons{ gap: .25rem; }

.fin-navicon{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-decoration:none;
  border-radius: 16px;
  padding: .4rem .55rem .35rem;
  min-width: 3.35rem;
  color: rgba(234,242,255,.92);
  transition: background .15s ease, transform .12s ease, color .15s ease;
}

.fin-navicon:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}

.fin-navicon__svg{ width: 1.25rem; height: 1.25rem; }

.fin-navicon__label{
  margin-top: .28rem;
  height: 1.05rem;
  line-height: 1.05rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease;
  white-space: nowrap;
  pointer-events: none;
  color: rgba(234,242,255,.92);
}

.fin-navicon:hover .fin-navicon__label{
  opacity: 1;
  transform: translateY(0);
}

.fin-navicon.is-active{
  background: rgba(255,255,255,.12);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.20);
}
.fin-navicon.is-active .fin-navicon__label{
  opacity: 1;
  transform: translateY(0);
}

.fin-navicon:focus-visible{
  outline: 2px solid rgba(99,102,241,.9);
  outline-offset: 4px;
}

/* Nav Icons: PNG Support */
.fin-navicon__img{
  display:block;
  width: 50px;
  height: 50px;
  object-fit: contain;
}

html[data-theme="dark"] .fin-navicon__img{
  filter: brightness(1.05) contrast(1.05);
}

/* Nav-Icon Labels: kleiner */
.fin-navicons .fin-navicon .fin-navicon__txt{
  font-size: 15px;
  line-height: 1;
}

.fin-info-icon{
  color: #f59e0b;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
}

html[data-theme="dark"] .fin-info-icon{
  color: #fbbf24;
}

/* Warn-Icon bei veralteten Kursen (last_d älter als 2 Tage) */
.fin-warn-icon {
  width: 0.95rem;
  height: 0.95rem;
  margin-left: 0.35rem;
  vertical-align: -0.12em;
  color: #f59e0b;
}

/* ====================================================================== */
/* === Dividend Tableau: Total (statisch blau/grau) + Hover Kreuz ======== */
/* ====================================================================== */

:root{
  --fin-div-total-bg: color-mix(in srgb, #60a5fa 14%, #f8fafc);
  --fin-div-total-border: rgba(59,130,246,.22);
  --fin-div-total-text: #0f172a;

  --fin-div-hover:        color-mix(in srgb, #f59e0b 20%, transparent);
  --fin-div-hover-strong: color-mix(in srgb, #92400e 22%, #f59e0b 26%);
  --fin-div-hover-border: rgba(146, 64, 14, .28);
}

html[data-theme="dark"]{
  --fin-div-total-bg: color-mix(in srgb, #60a5fa 18%, #0b1220);
  --fin-div-total-border: rgba(96,165,250,.22);
  --fin-div-total-text: #e2e8f0;

  --fin-div-hover:        color-mix(in srgb, #fbbf24 12%, transparent);
  --fin-div-hover-strong: color-mix(in srgb, #f59e0b 18%, transparent);
  --fin-div-hover-border: rgba(251, 191, 36, .28);
}

/* === Dividend Tableau: Column sizing (Aktien & ETFs) ===================== */
/* Fixe Layout-Logik: alle Monate gleich breit, Total etwas breiter, Close am breitesten */
#dividendTableau table{
  table-layout: fixed;
  width: 100%;
}

#dividendTableau table th,
#dividendTableau table td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DOM / Symbol / Menge / Letzter Close */
#dividendTableau table th:nth-child(1),
#dividendTableau table td:nth-child(1){ width: 64px; }   /* DOM. */

#dividendTableau table th:nth-child(2),
#dividendTableau table td:nth-child(2){ width: 90px; }   /* Symbol */

#dividendTableau table th:nth-child(3),
#dividendTableau table td:nth-child(3){ width: 70px; }   /* Menge */

#dividendTableau table th:nth-child(4),
#dividendTableau table td:nth-child(4){ width: 210px; }  /* Letzter Close (CCY/CHF) */

/* Monate: Jan..Dez (Spalten 5..16) */
#dividendTableau table th:nth-child(n+5):nth-child(-n+16),
#dividendTableau table td:nth-child(n+5):nth-child(-n+16){
  width: 85px;
  min-width: 85px;
  max-width: 85px;
}

/* Total (Spalte 17) */
#dividendTableau table th:nth-child(17),
#dividendTableau table td:nth-child(17){
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

/* Monats-Spalten: fix 85px */
#dividendTableau .div-mon-col{
  width: 85px;
  min-width: 85px;
  max-width: 85px;
}

/* Total-Spalte */
#dividendTableau table th.div-total-col,
#dividendTableau table td.div-total-col{
  background: var(--fin-div-total-bg);
  color: var(--fin-div-total-text);
  box-shadow: inset 1px 0 0 var(--fin-div-total-border);
  font-weight: 700;
}

/* Total-Zeile */
#dividendTableau table tr.div-total-row > th,
#dividendTableau table tr.div-total-row > td{
  background: var(--fin-div-total-bg);
  color: var(--fin-div-total-text);
  border-top: 1px solid var(--fin-div-total-border);
  font-weight: 700;
}

/* Smoother Transition */
#dividendTableau table th,
#dividendTableau table td{
  transition: background-color .12s ease, box-shadow .12s ease, color .12s ease;
}

/* Hover */
#dividendTableau table tbody tr.is-hover-row > td:not(.div-total-col){
  background-color: var(--fin-div-hover);
}
#dividendTableau table tbody td.is-hover-col:not(.div-total-col){
  background-color: var(--fin-div-hover);
}
#dividendTableau table tbody td.is-hover-cell:not(.div-total-col){
  background-color: var(--fin-div-hover-strong);
  box-shadow: inset 0 0 0 1px var(--fin-div-hover-border);
}

/* ====================================================================== */
/* === Dropdown: bessere Lesbarkeit im Darkmode ========================== */
/* ====================================================================== */

html[data-theme="dark"] .fin-dropdown__menu{
  background: #0b1220;                 /* etwas dunkler als Cards */
  border-color: rgba(148,163,184,.18); /* klare Kante */
  box-shadow: 0 18px 42px rgba(0,0,0,.55);
}

html[data-theme="dark"] .fin-dropdown__item{
  color: rgba(226,232,240,.92);        /* slate-200/near white */
}

html[data-theme="dark"] .fin-dropdown__item:hover{
  background: rgba(255,255,255,.08);   /* gut sichtbar */
}

html[data-theme="dark"] .fin-dropdown__item:active{
  background: rgba(255,255,255,.12);
}

html[data-theme="dark"] .fin-dropdown__item svg{
  color: rgba(226,232,240,.90);
}

html[data-theme="dark"] .fin-dropdown__menu .fin-dropdown__divider{
  height: 1px;
  margin: .35rem .35rem;
  background: rgba(148,163,184,.16);
}

/* ====================================================================== */
/* === Flags (SVG) ======================================================= */
/* ====================================================================== */

.fin-flag{
  width: 30px;              /* 3:2 -> 30x20 */
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  object-fit: cover;
  border-radius: 4px;       /* rechteckig */
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.25);
}

html[data-theme="dark"] .fin-flag{
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.22);
}

/* ====================================================================== */
/* === tax_reports (CSP-safe, no inline) ================================= */
/* ====================================================================== */

/* NO sticky – falls irgendwo sticky definiert ist: neutralisieren */
.tax-report .tax-sticky-wrap thead th{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* Ellipsis für Wertpapier-Spalte */
.tax-report .tax-ellipsis{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Zebra */
.tax-report .tax-alt td{
  background: #faf7f0;
}
html[data-theme="dark"] .tax-report .tax-alt td{
  background: #0b1220;
}

/* Min widths */
.tax-report .tax-table--positions{ min-width: 1420px; }
.tax-report .tax-table--div{       min-width: 1200px; }
.tax-report .tax-table--country{   min-width: 980px; }

/* Column sizing (positions table) */
.tax-report .tax-table--positions col.tax-col-wp   { width: 700px; }
.tax-report .tax-table--positions col.tax-col-sym  { width:  90px; }
.tax-report .tax-table--positions col.tax-col-isin { width: 100px; }
.tax-report .tax-table--positions col.tax-col-qty  { width:  70px; }
.tax-report .tax-table--positions col.tax-col-kurs { width: 120px; }
.tax-report .tax-table--positions col.tax-col-ccy  { width:  70px; }
.tax-report .tax-table--positions col.tax-col-vccy { width: 100px; }
.tax-report .tax-table--positions col.tax-col-vbase{ width: 100px; }
.tax-report .tax-table--positions col.tax-col-pct  { width:  70px; }

/* Abstand zwischen Ländergruppen */
.tax-report .tax-group-gap td{
  padding: 10px 0;
  border: 0 !important;
  background: transparent !important;
}

/* Headerzeile im tbody – soll wie die perfekte "erste Headerrow" aussehen */
.tax-report .tax-head-row th{
  background: #f8fafc;
  font-weight: 800;
  color: #0f172a;
  text-align: left;
  box-shadow: inset 0 -1px 0 rgba(148,163,184,.55);
  font-family: inherit; /* Einheitliche Schrift */
}

.tax-report .tax-head-row th.text-right{
  text-align: right;
}

/* Dark Mode Headerrow */
html[data-theme="dark"] .tax-report .tax-head-row th{
  background: #0f172a;
  color: #e2e8f0;
  box-shadow: inset 0 -1px 0 rgba(148,163,184,.22);
}

/* Länderzeile (Light) */
.tax-report .tax-country-row td{
  background: #dbeafe;
  font-weight: 900;
  border-top: 2px solid #93c5fd;
  font-family: inherit; /* Einheitliche Schrift */
  padding-left: 15px;
  height: 50px;
}

.tax-report .tax-country-label{
  font-weight: 800;
}

/* Dark Länderzeile (dein “perfekt” gesetzter Ton bleibt) */
html[data-theme="dark"] .tax-report .tax-country-row td{
  background: #1e3a5f;
  color: #e2e8f0;
  border-top-color: rgba(96,165,250,.75);
  height: 50px;
  padding-left: 15px;
}

/* Sub/Total */
.tax-report .tax-country-sub td{
  background: #e2e8f0;
  font-weight: 900;
  border-bottom: 2px solid #cbd5e1;
  font-family: inherit;
}

.tax-report .tax-grand-total td{
  background: #cbd5e1;
  font-weight: 900;
  border-top: 3px solid #94a3b8;
  font-family: inherit;
}

html[data-theme="dark"] .tax-report .tax-country-sub td{
  background: #0b162a;
  color: #e2e8f0;
  border-bottom-color: rgba(148,163,184,.20);
}

html[data-theme="dark"] .tax-report .tax-grand-total td{
  background: #091325;
  color: #f1f5f9;
  border-top-color: rgba(148,163,184,.28);
}

/* Code-Optik (nur falls irgendwo noch <code> benutzt wird – nicht für Symbol/ISIN) */
.tax-report .fin-table code{
  padding: 0.08rem 0.35rem;
  border-radius: 0.35rem;
  background: rgba(148,163,184,.18);
}
html[data-theme="dark"] .tax-report .fin-table code{
  background: rgba(148,163,184,.14);
  color: #e2e8f0;
}

/* Flags in tax_reports: Abstand Flag -> Landname */
.tax-report .fin-flag{
  margin-right: .40rem;
}

/* Fallback wenn SVG fehlt */
.tax-report .tax-flag-fallback{
  display:inline-block;
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align:center;
  font-size: 11px;
  font-weight: 900;
  border-radius: 6px;
  background: rgba(148,163,184,.18);
  color: var(--fin-text);
  vertical-align: middle;
  margin-right: .40rem;
}

/* tax_reports: Zwischensummen wie Dashboard "Total ETFs" */
.tax-table tbody tr.div-total-row td{
  background: #1A2C47 !important;   /* entspricht Dashboard-Total-Row */
  font-weight: 700 !important;
}

/* optional: falls irgendwo ein anderer td/font-weight reinfunkt */
.tax-table tbody tr.div-total-row td *{
  font-weight: 700 !important;
}

/* Abstand zwischen Aktien- und ETF-Block in tax_reports (CSP-safe) */
.tax-section-gap{ height:28px; }

/* tax_reports: ruhige Tabellen durch fixe Spaltenbreiten */
.tax-table { table-layout: fixed; } /* scoped: nur Tax-Tabellen, nicht global */

/* Positionen (rechts vom Wertpapier fix, Wertpapier bleibt flexibel) */
.tax-table--positions col.tax-col-sym  { width: 10ch; }
.tax-table--positions col.tax-col-isin { width: 14ch; }
.tax-table--positions col.tax-col-qty  { width: 8ch;  }
.tax-table--positions col.tax-col-kurs { width: 12ch; }
.tax-table--positions col.tax-col-ccy  { width: 6ch;  }
.tax-table--positions col.tax-col-vccy { width: 14ch; }
.tax-table--positions col.tax-col-vbase{ width: 14ch; }
.tax-table--positions col.tax-col-pct  { width: 7ch;  }
/* tax-col-wp bewusst ohne width => nimmt den Rest */

.tax-table--div col.tax-col-d-date { width: 12ch; }
.tax-table--div col.tax-col-d-g    { width: 14ch; }
.tax-table--div col.tax-col-d-w    { width: 14ch; }
.tax-table--div col.tax-col-d-o    { width: 14ch; }
.tax-table--div col.tax-col-d-f    { width: 14ch; }
.tax-table--div col.tax-col-d-n    { width: 14ch; }
.tax-table--div col.tax-col-d-ccy  { width: 10ch; }
.tax-table--div col.tax-col-d-gb   { width: 15ch; }
.tax-table--div col.tax-col-d-nb   { width: 15ch; }
/* Titel-Spalte ohne width => Rest */

/* ===== TradingMaus Glass Nav (Variante 2) – OVERRIDE (ans Ende von app_ui.css) ===== */

/* Wichtig: wir überschreiben fin-topbar bewusst, damit der Liquid-Hintergrund durchscheint */
.fin-topbar.tm-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: visible;
  isolation: isolate;              /* damit ::before/::after sauber layern */

  /* weniger deckend = Glas sichtbar */
  background: rgba(6, 18, 38, 0.48) !important;

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

/* Sheen / feiner „Glanz“ oben + dezente Tiefe */
.fin-topbar.tm-nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(1100px 160px at 20% 0%,
      rgba(255,255,255,0.16),
      transparent 60%
    ),
    linear-gradient(90deg,
      rgba(56,189,248,0.10),
      rgba(34,197,94,0.06),
      rgba(56,189,248,0.10)
    );
  opacity: 0.35;
}

/* Hairline Accent unten */
.fin-topbar.tm-nav::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  z-index:1;
  pointer-events:none;

  background: linear-gradient(90deg,
    rgba(56,189,248,0.00),
    rgba(56,189,248,0.38),
    rgba(34,197,94,0.18),
    rgba(56,189,248,0.38),
    rgba(56,189,248,0.00)
  );
}

/* Inhalt über den Effekten */
.tm-nav__inner{
  position: relative;
  z-index: 2;
}

/* Optional: beim Scroll etwas „solider“ */
.fin-topbar.tm-nav.tm-nav--scrolled{
  background: rgba(6, 18, 38, 0.62) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}

/* === Instruments: Tabellen-Layout & Status-Highlight =================================== */
.inst-table{
  table-layout: fixed;
  width: 100%;
}
.inst-table th,
.inst-table td{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spaltenbreiten (Name = Rest) */
.inst-table th:nth-child(2),
.inst-table td:nth-child(2){ width: 110px; }   /* Symbol */
.inst-table th:nth-child(3),
.inst-table td:nth-child(3){ width: 88px; }   /* Art */
.inst-table th:nth-child(4),
.inst-table td:nth-child(4){ width: 72px; }   /* CCY */
.inst-table th:nth-child(5),
.inst-table td:nth-child(5){ width: 95px; }   /* MIC */
.inst-table th:nth-child(6),
.inst-table td:nth-child(6){ width: 88px; }   /* Domizil */
.inst-table th:nth-child(7),
.inst-table td:nth-child(7){ width: 100px; }   /* Vendor */
.inst-table th:nth-child(8),
.inst-table td:nth-child(8){ width: 170px; }  /* Vendor-Symbol */
.inst-table th:nth-child(9),
.inst-table td:nth-child(9){ width: 130px; }   /* Kurs */
.inst-table th:nth-child(10),
.inst-table td:nth-child(10){ width: 200px; } /* Aktion */

/* Ellipsis */
.inst-ellipsis{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Aktion-Link: niemals umbrechen */
.inst-action-link{
  display:inline-block;
  white-space:nowrap;
}

/* Status-Row Highlights */
.inst-row--inactive td { background: rgba(148, 163, 184, 0.10); } /* slate */
.inst-row--delisted td { background: rgba(245, 158, 11, 0.12); }  /* amber */
.inst-row--merged   td { background: rgba(239, 68, 68, 0.10); }   /* red */
/* ====================================================================== */
/* === Auth Page: Topbar & Login Button Tweaks (scoped) =================== */
/* ====================================================================== */


/* Logo size: mobile 72x72, desktop 100x100 (App-Bereich) */
.tm-page-app .fin-topbar .tm-brand__logo{
  width: 72px;
  height: 72px;
  transform: none; /* kein Scale im App-Bereich */
  transform-origin: left center;
}


.tm-page-app .fin-topbar .tm-brand:hover .tm-brand__logo{
  transform: translateY(-1px) scale(1.15);
}

@media (min-width: 768px){
  .tm-page-app .fin-topbar .tm-brand__logo{
    width: 100px;
    height: 100px;
  }
}

/* Slogan unter App-Titel (App-Bereich) */
.tm-page-app .fin-topbar .tm-brand__stack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tm-page-app .fin-topbar .tm-brand__tagline{
  white-space: normal;
}

/* Desktop Topbar: Nav wirklich zentriert (App-Bereich) */
@media (min-width: 768px){
  .tm-page-app .tm-nav__inner{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 1rem;
  }

  .tm-page-app .tm-nav__inner > nav.fin-navicons{
    justify-self: center;
  }

  .tm-page-app .tm-nav__inner > div{
    justify-self: end;
  }
}

/* Profil-Initialen: nicht fett (nur Topbar im App-Bereich) */
.tm-page-app .fin-topbar .fin-dropdown > button[data-dropdown-toggle]{
  font-weight: 500;
}

.tm-page-app .fin-topbar .fin-dropdown > button[data-dropdown-toggle] .fin-avatar__txt{
  font-weight: 500;
}


/* Logo size: mobile 72x72, desktop 100x100 (nur Auth-Seite) */
.tm-page-auth .fin-topbar .tm-brand__logo{
  width: 72px;
  height: 72px;
  transform: none; /* keine Scale-Tricks auf der Auth-Seite */
  transform-origin: left center;
}



.tm-page-auth .fin-topbar .tm-brand:hover .tm-brand__logo{
  transform: translateY(-1px) scale(1.15);
}

@media (min-width: 768px){
  .tm-page-auth .fin-topbar .tm-brand__logo{
    width: 100px;
    height: 100px;
  }
}

/* Slogan unter App-Titel (nur Auth-Seite) */
.tm-page-auth .fin-topbar .tm-brand__stack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tm-page-auth .fin-topbar .tm-brand__tagline{
  white-space: normal;
}

/* Blue Login-Button „aus der Topbar“ optisch im Login-Formular nachziehen */
.tm-page-auth main .fin-card form button[type="submit"],
.tm-page-auth main .fin-card form button:not([type]),
.tm-page-auth main .fin-card form input[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  border-radius: 9999px;
  padding: .6rem 1.1rem;
  font-weight: 600;

  border: 1px solid transparent;
  color: #fff;
  background: var(--fin-primary);
  box-shadow: 0 6px 14px rgba(37,99,235,.18);

  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}

.tm-page-auth main .fin-card form button[type="submit"]:hover,
.tm-page-auth main .fin-card form button:not([type]):hover,
.tm-page-auth main .fin-card form input[type="submit"]:hover{
  background: #1d4ed8;
  transform: translateY(-1px);
}

.tm-page-auth main .fin-card form button[type="submit"]:focus-visible,
.tm-page-auth main .fin-card form button:not([type]):focus-visible,
.tm-page-auth main .fin-card form input[type="submit"]:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px rgba(37,99,235,.45);
}


/* === Reports filter (Depot + Jahr/Datum) =============================== */
.tm-report-filter{ display:block; }
.tm-report-row{
  display:flex;
  gap: 1rem;
  align-items:flex-end;
}
.tm-report-field{ flex:1; min-width:0; }
.tm-report-field .fin-input{ width:100%; }

.tm-report-range{
  display:flex;
  gap: .75rem;
}
.tm-report-range > label{ flex:1; min-width:0; }

.tm-report-actions{
  margin-top: .85rem;
  display:flex;
  gap: .75rem;
  justify-content:flex-start;
  flex-wrap: wrap;
}

@media (max-width: 900px){
  .tm-report-row{ flex-direction: column; align-items: stretch; }
  .tm-report-range{ flex-direction: column; }
}

/* === Reports tweaks ==================================================== */
.tm-reports-year{
  width: 50%;
  max-width: 50%;
}

/* === Mobile-only orientation helpers ================================== */
/*
  We intentionally avoid Tailwind orientation variants here because the build
  is purge-sensitive. These helpers ensure portrait/landscape toggles work
  reliably in Mobile Mode (tm-is-mobile), independent of viewport width.
*/
.tm-is-mobile .tm-flex-landscape{ display:none !important; }
.tm-is-mobile .tm-block-portrait{ display:none !important; }

@media (orientation: landscape){
  .tm-is-mobile .tm-flex-landscape{ display:flex !important; }
}

@media (orientation: portrait){
  .tm-is-mobile .tm-block-portrait{ display:block !important; }
}
@media (max-width: 900px){
  .tm-reports-year{ width: 100%; max-width: 100%; }
}

.tm-reports-submit{
  margin-top: .35rem;
  display: flex;
  justify-content: flex-end;
}

/* ====================================================================== */
/* === Profile Dropdown: Name + Divider über "Mein Konto" ================ */
/* ====================================================================== */

.tm-page-app .fin-dropdown__menu .tm-prof-name{
  padding: .55rem .75rem .45rem;
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.15;
  color: var(--fin-text);
}

.tm-page-app .fin-dropdown__menu .tm-prof-divider{
  height: 1px;
  margin: .10rem .45rem .35rem;
  background: color-mix(in srgb, var(--fin-border) 75%, transparent);
}
html[data-theme="dark"] .tm-page-app .fin-dropdown__menu .tm-prof-divider{
  background: color-mix(in srgb, rgba(148,163,184,.35) 70%, transparent);
}