/* ==========================================================================
   FINANZLANE — MASTER CSS  |  Styleguide v1.4
   Slate + Gold  ·  Verified against Master-Konzept v2.1
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=JetBrains+Mono:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  /* Sidebar */
  --sidebar-width:      240px;
  --sidebar-bg:         #0F172A;

  /* Surface */
  --bg-main:            #F8FAFC;
  --bg-card:            #FFFFFF;
  --bg-elevated:        #F1F5F9;

  /* Borders */
  --border:             #E2E8F0;
  --border-md:          #CBD5E1;
  --border-strong:      #94A3B8;

  /* Gold system */
  --gold:               #CBA453;
  --gold-dim:           rgba(203,164,83,.12);
  --gold-border:        rgba(203,164,83,.32);

  /* Legacy aliases */
  --navy:               #1E293B;
  --gold-light:         #F5E8CC;
  --gold-pale:          #FBF5E9;
  --border-color:       #E2E8F0;

  /* Buttons: Slate Navy primary WCAG AA 16.8:1 */
  --btn-primary:        #0F172A;
  --btn-hover:          #1E293B;
  --btn-press:          #334155;
  --btn-text:           #E2E8F0;
  --btn-shadow:         0 4px 14px rgba(15,23,42,.30);

  /* Text */
  --text-primary:       #0F172A;
  --text-secondary:     #334155;
  --text-muted:         #64748B;

  /* Semantic */
  --gain:               #10B981;
  --gain-bg:            rgba(16,185,129,.10);
  --loss:               #EF4444;
  --loss-bg:            rgba(239,68,68,.10);

  /* Shadows */
  --shadow-1: 0 1px 4px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.04);
  --shadow-2: 0 4px 12px rgba(15,23,42,.10);
  --shadow-3: 0 8px 32px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.08);

  /* Layout */
  --content-pad:        10px 40px 60px 40px;
  --topbar-pad:         24px 40px;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg-main);
  color: var(--text-primary);
  overflow: hidden;
}

/* ==========================================================================
   1. APP SHELL
   ========================================================================== */
.app-shell { display: flex; height: 100vh; overflow: hidden; background-color: var(--bg-main); }

/* ==========================================================================
   2. SIDEBAR — Styleguide v1.4 Auto-Collapse
   ========================================================================== */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.04);
  z-index: 20;
  transition: width 0.22s ease, min-width 0.22s ease;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar[data-state="collapsed"] { width: 64px; min-width: 64px; }
.sidebar[data-state="mobile"]    { width: 0; min-width: 0; border-right: none; }

/* Labels verschwinden im collapsed state */
.sidebar[data-state="collapsed"] .nav-label,
.sidebar[data-state="collapsed"] .brand-wordmark,
.sidebar[data-state="collapsed"] .nav-section-label,
.sidebar[data-state="collapsed"] .sidebar-toggle-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; }
.sidebar[data-state="collapsed"] .nav-item     { justify-content: center; padding: 9px 0; }
.sidebar[data-state="collapsed"] .brand-area   { justify-content: center; padding: 0; }
.sidebar[data-state="collapsed"] .brand-dot    { margin-right: 0; }
.sidebar[data-state="collapsed"] .sidebar-logo { justify-content: center; padding: 0 8px; }
.sidebar[data-state="collapsed"] .sidebar-logo-text { display: none; }
.sidebar[data-state="collapsed"] .sidebar-logo > div:first-child { margin-right: 0; }
.sidebar[data-state="collapsed"] .nav-toggle-btn { justify-content: center; padding: 8px 0; }
.sidebar[data-state="collapsed"] .sidebar-nav-group { padding: 0 4px; }

/* Brand */
.brand-area {
  height: 60px; display: flex; align-items: center;
  padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0; gap: 10px; transition: padding 0.22s, justify-content 0.22s;
}
.brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.brand-wordmark { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; transition: opacity 0.15s, width 0.22s; }

/* Nav groups */
.sidebar-nav-group { padding: 0 8px; margin-bottom: 4px; }
.nav-section-label {
  font-family: 'Outfit', sans-serif; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: #374151;
  padding: 12px 12px 6px 12px; white-space: nowrap; transition: opacity 0.15s, width 0.22s;
}

/* Nav items — Gold-Spot (Styleguide 9.5) */
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  background: transparent; border: none; width: 100%; text-align: left;
  margin-bottom: 2px; transition: background 0.15s; position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.06); }
.nav-item.active-nav { background: rgba(203,164,83,.06); }

.nav-spot {
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 0.15s, border 0.15s;
  border: 1px solid transparent;
}
.nav-item.active-nav .nav-spot {
  background: rgba(203,164,83,.13);
  border-color: rgba(203,164,83,.32);
}

.nav-label {
  font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 400;
  color: rgba(255,255,255,.38); white-space: nowrap;
  transition: color 0.15s, font-weight 0.15s, opacity 0.15s, width 0.22s;
}
.nav-item.active-nav .nav-label  { color: var(--gold); font-weight: 600; }
.nav-item:hover:not(.active-nav) .nav-label { color: rgba(255,255,255,.70); }

.sidebar-divider { height: 1px; background: rgba(255,255,255,.06); margin: 8px 8px; flex-shrink: 0; }

/* Toggle button */
.nav-toggle-btn {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 8px; cursor: pointer;
  background: var(--gold-dim); border: 1px solid var(--gold-border);
  width: 100%; transition: all 0.15s;
}
.nav-toggle-btn:hover { background: rgba(203,164,83,.20); }
.sidebar-toggle-label { font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; color: var(--gold); white-space: nowrap; transition: opacity 0.15s, width 0.22s; }

/* Tooltip für collapsed */
.nav-tooltip {
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: #0F172A; color: #CBD5E1; padding: 5px 10px; border-radius: 6px;
  font-size: 12px; font-family: 'Outfit', sans-serif; white-space: nowrap;
  z-index: 200; box-shadow: var(--shadow-2); border: 1px solid rgba(255,255,255,.10);
  pointer-events: none; opacity: 0; transition: opacity 0.1s;
}
.sidebar[data-state="collapsed"] .nav-item:hover .nav-tooltip { opacity: 1; }

/* Legacy nav-btn alias — rückwärtskompatibel */
.nav-btn {
  display: flex; align-items: center; width: 100%; padding: 9px 12px;
  background: transparent; border: none; border-radius: 8px;
  color: rgba(255,255,255,.38); font-size: 13px; font-weight: 400;
  text-align: left; cursor: pointer; transition: all 0.15s; margin-bottom: 2px;
  border-left: 3px solid transparent;
}
.nav-btn:hover { color: rgba(255,255,255,.70); background: rgba(255,255,255,.06); }
.nav-btn.active-nav { color: var(--gold); border-left-color: var(--gold); background: rgba(203,164,83,.06); font-weight: 600; }
.sidebar-logo { padding: 0 20px; height: 60px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.06); }

/* ==========================================================================
   3. MAIN CONTENT & TOPBAR
   ========================================================================== */
.main-content { flex-grow: 1; display: flex; flex-direction: column; overflow-y: auto; height: 100vh; position: relative; min-width: 0; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--topbar-pad);
  background: rgba(248,250,252,.90); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid rgba(226,232,240,.6); flex-shrink: 0;
}
.content-wrapper { padding: var(--content-pad); }
.glass-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-1); padding: 24px; }

/* ==========================================================================
   4. BUTTONS — Styleguide v1.4.1 (Slate Navy Primary)
   ========================================================================== */
.btn {
  font-family: 'Outfit', sans-serif; font-weight: 600; border-radius: 8px;
  transition: all 0.15s ease; cursor: pointer; outline: none;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; border: 1px solid transparent;
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(203,164,83,.15); }
.btn-sm  { height: 30px; padding: 5px 12px;  font-size: 12px; border-radius: 6px; }
.btn-md  { height: 38px; padding: 8px 16px;  font-size: 13px; border-radius: 8px; }
.btn-lg  { height: 46px; padding: 11px 22px; font-size: 15px; border-radius: 10px; }

.btn-primary { background: var(--btn-primary); color: var(--btn-text); border-color: var(--btn-primary); }
.btn-primary:hover { background: var(--btn-hover); box-shadow: var(--btn-shadow); }
.btn-primary:active { background: var(--btn-press); }

.btn-secondary { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-md); }
.btn-secondary:hover { background: var(--bg-elevated); border-color: var(--border-strong); }

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

.btn-danger { background: var(--loss-bg); color: var(--loss); border-color: rgba(239,68,68,.25); }
.btn-danger:hover { background: #DC2626; color: #fff; box-shadow: 0 4px 14px rgba(239,68,68,.30); }

.btn-success { background: var(--gain-bg); color: var(--gain); border-color: rgba(16,185,129,.25); }
.btn-success:hover { background: #10B981; color: #fff; box-shadow: 0 4px 14px rgba(16,185,129,.30); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   5. INPUTS — Styleguide v1.3
   ========================================================================== */
.input-field {
  height: 38px; border: 1px solid var(--border-md); border-radius: 8px;
  background: var(--bg-card); font-family: 'Outfit', sans-serif; font-size: 13px;
  color: var(--text-primary); padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s; outline: none; width: 100%;
}
.input-field::placeholder { color: var(--text-muted); }
.input-field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); }
.input-field--error { border-color: var(--loss); }
.input-field--error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.input-field--numeric { font-family: 'JetBrains Mono', monospace; }

/* Dash dcc.Input override */
.Select-control { border-color: var(--border-md) !important; border-radius: 8px !important; }
.is-focused .Select-control { border-color: var(--gold) !important; box-shadow: 0 0 0 3px var(--gold-dim) !important; }
.Select-menu-outer { border-radius: 12px !important; border: 1px solid var(--border-md) !important; box-shadow: var(--shadow-3) !important; }
.Select-option.is-selected { background: var(--gold-dim) !important; color: var(--gold) !important; border-left: 3px solid var(--gold) !important; }

/* ==========================================================================
   6. DROPDOWNS
   ========================================================================== */
.dropdown-panel {
  background: var(--bg-card); border: 1px solid var(--border-md); border-radius: 12px;
  box-shadow: var(--shadow-3); min-width: 200px;
  animation: fadeInPanel 0.1s ease; overflow: hidden;
}
@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item { padding: 9px 14px; font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: background 0.1s; }
.dropdown-item:hover { background: var(--bg-elevated); }
.dropdown-item--danger { color: var(--loss); }
.dropdown-item--disabled { opacity: 0.4; pointer-events: none; }
.dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ==========================================================================
   7. SCROLLBARS
   ========================================================================== */
.main-content::-webkit-scrollbar { width: 6px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb { background-color: #CBD5E1; border-radius: 4px; }
.main-content::-webkit-scrollbar-thumb:hover { background-color: #94A3B8; }

/* Sidebar-interner Scrollbalken — unsichtbar */
.sidebar *::-webkit-scrollbar { width: 3px; }
.sidebar *::-webkit-scrollbar-track { background: transparent; }
.sidebar *::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.08); border-radius: 2px; }
.sidebar { scrollbar-width: none; }
.sidebar * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; }

/* ==========================================================================
   8. DASH OVERRIDES
   ========================================================================== */
.nav-link { font-family: 'Outfit', sans-serif !important; }
tbody tr { transition: all 0.15s ease !important; }
tbody tr:hover { background-color: #F1F5F9 !important; }
tbody tr:hover td { filter: brightness(0.97) !important; }
/* Cockpit (dunkel): dezenter Navy-Hover statt hellem Wash-out */
.cockpit-pos-table tbody tr:hover { background-color: #F1F5F9 !important; }
.cockpit-pos-table tbody tr:hover td { filter: none !important; }

/* ==========================================================================
   9. SLIDER (GOLD)
   ========================================================================== */
.rc-slider-track { background-color: var(--gold) !important; }
.rc-slider-handle { border: solid 2px var(--gold) !important; background-color: #FFFFFF !important; box-shadow: 0 0 5px rgba(203,164,83,.3) !important; opacity: 1 !important; }
.rc-slider-handle:hover, .rc-slider-handle:active, .rc-slider-handle:focus { border-color: var(--gold) !important; box-shadow: 0 0 8px rgba(203,164,83,.6) !important; }
.rc-slider-dot-active { border-color: var(--gold) !important; }
.custom-gold-slider .rc-slider-track { background-color: var(--gold) !important; }
.custom-gold-slider .rc-slider-handle { border: solid 2px var(--gold) !important; background-color: #FFFFFF !important; box-shadow: 0 0 5px rgba(203,164,83,.3) !important; opacity: 1 !important; }
.custom-gold-slider .rc-slider-handle:hover, .custom-gold-slider .rc-slider-handle:active, .custom-gold-slider .rc-slider-handle:focus { border-color: var(--gold) !important; box-shadow: 0 0 8px rgba(203,164,83,.6) !important; }
.custom-gold-slider .rc-slider-dot-active { border-color: var(--gold) !important; }

.strat-slider * { box-sizing: border-box; }

/* ── Dash 4.x + rc-slider: CSS Custom Properties überschreiben ── */
.strat-slider {
  --rc-slider-handle-color:       #CBA453 !important;
  --rc-slider-handle-active-color:#CBA453 !important;
  --rc-slider-track-color:        #CBA453 !important;
  --bs-primary:                   #CBA453 !important;
  --bs-primary-rgb:               203,164,83 !important;
  accent-color:                   #CBA453;
}

/* Rail */
.strat-slider .rc-slider-rail {
  background-color: var(--bg-elevated,#E2E8F0) !important;
  height: 5px !important; border-radius: 3px !important;
}

/* Track — Dash 4 indexiert: rc-slider-track-0, rc-slider-track-1 … */
.strat-slider .rc-slider-track,
.strat-slider [class^="rc-slider-track"],
.strat-slider [class*=" rc-slider-track"] {
  background-color: #CBA453 !important;
  height: 5px !important; border-radius: 3px !important;
}

/* Handle — Dash 4: rc-slider-handle-1, rc-slider-handle-dragging … */
.strat-slider .rc-slider-handle,
.strat-slider [class^="rc-slider-handle"],
.strat-slider [class*=" rc-slider-handle"],
.strat-slider [class*="rc-slider-handle-"] {
  background-color: #FFFFFF !important;
  border: 2.5px solid #CBA453 !important;
  width: 16px !important; height: 16px !important;
  margin-top: -6px !important;
  box-shadow: 0 0 0 3px rgba(203,164,83,.18) !important;
  opacity: 1 !important;
  outline: none !important;
}
.strat-slider .rc-slider-handle:hover,
.strat-slider .rc-slider-handle:active,
.strat-slider .rc-slider-handle:focus,
.strat-slider [class*="rc-slider-handle-"]:hover,
.strat-slider [class*="rc-slider-handle-"]:active,
.strat-slider [class*="rc-slider-handle-dragging"] {
  background-color: #FFFFFF !important;
  border-color: #CBA453 !important;
  box-shadow: 0 0 0 5px rgba(203,164,83,.22) !important;
  outline: none !important;
}

/* Fallback: native input[type=range] falls Dash 4 darauf wechselt */
.strat-slider input[type="range"] {
  accent-color: #CBA453 !important;
}
.strat-slider input[type="range"]::-webkit-slider-thumb   { background: #CBA453 !important; border: 2px solid #CBA453 !important; }
.strat-slider input[type="range"]::-moz-range-thumb       { background: #CBA453 !important; border: 2px solid #CBA453 !important; }
.strat-slider input[type="range"]::-webkit-slider-runnable-track { background: #CBA453 !important; }

/* Tooltip */
.strat-slider .rc-slider-tooltip-inner {
  background-color: #0F172A !important; color: #CBA453 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important; border-radius: 6px !important;
}
.strat-slider .rc-slider-tooltip-arrow { border-top-color: #0F172A !important; }

/* Dots + Marks ausblenden */
.strat-slider .rc-slider-dot,
.strat-slider .rc-slider-mark { display: none !important; }

/* ==========================================================================
   10. NAVIGATION MODI
   ========================================================================== */
.mode-cockpit .view-portfolio, .mode-cockpit .view-ledger { display: none !important; }
.mode-ledger .view-cockpit { display: none !important; }
.view-cockpit, .view-portfolio, .view-ledger { transition: opacity 0.3s ease-in-out; }

/* ==========================================================================
   11. EARNINGS HEATMAP
   ========================================================================== */
.heatmap-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); gap: 12px; margin-top: 16px; margin-bottom: 24px; }
.heatmap-month { background: var(--bg-card); border: 1px solid #F1F5F9; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; }
.heatmap-month-title { font-size: .65rem; font-weight: 800; color: #94A3B8; text-transform: uppercase; text-align: center; margin-bottom: 8px; letter-spacing: .05em; }
.heatmap-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.heatmap-day { aspect-ratio: 1; border-radius: 2px; background-color: var(--bg-main); transition: all .15s; cursor: default; }
.heatmap-day.has-earnings-watch { background-color: #BAE6FD; cursor: pointer; }
.heatmap-day.has-earnings-depot { background-color: var(--gold); cursor: pointer; box-shadow: 0 0 4px rgba(203,164,83,.5); }
.heatmap-day.is-today { border: 1px solid #0F172A; }
.heatmap-day.has-earnings-watch:hover, .heatmap-day.has-earnings-depot:hover { transform: scale(1.3); z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,.1); }

/* ==========================================================================
   12. COCKPIT GRID
   ========================================================================== */
.cockpit-kpi-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.cockpit-split { display: grid; grid-template-columns: 3fr 2fr; gap: 6px; margin-bottom: 6px; }

/* ==========================================================================
   13. BOTTOM TAB BAR (Mobile)
   ========================================================================== */
.bottom-tab-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  height: 60px; background: var(--sidebar-bg);
  border-top: 1px solid rgba(255,255,255,.08);
  justify-content: space-around; align-items: center;
  z-index: 100; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-tab-item { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: 4px 12px; min-width: 44px; min-height: 44px; justify-content: center; transition: opacity 0.15s; }
.bottom-tab-item:active { opacity: 0.7; }
.bottom-tab-label { font-family: 'Outfit', sans-serif; font-size: 10px; color: rgba(255,255,255,.4); transition: color 0.15s; }
.bottom-tab-item.active .bottom-tab-label { color: var(--gold); }
.bottom-tab-item.active svg, .bottom-tab-item.active iconify-icon { color: var(--gold) !important; }

/* Vault Stack-Bar Segment Hover */
.vault-stack-segment:hover { opacity: 0.82; }

/* ==========================================================================
   14. RESPONSIVE — Styleguide v1.4
   ========================================================================== */

/* Desktop kompakt + Tablet (< 1280px) — Auto-Collapse (CSS-only Fallback) */
@media (max-width: 1279px) {
  :root { --content-pad: 10px 32px 60px 32px; --topbar-pad: 20px 32px; }

  /* Kollabiert wenn NICHT explizit expanded — funktioniert auch ohne JS */
  .sidebar:not([data-state="expanded"]) { width: 64px; min-width: 64px; }

  .sidebar:not([data-state="expanded"]) .nav-label,
  .sidebar:not([data-state="expanded"]) .brand-wordmark,
  .sidebar:not([data-state="expanded"]) .nav-section-label,
  .sidebar:not([data-state="expanded"]) .sidebar-toggle-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; }
  .sidebar:not([data-state="expanded"]) .nav-item       { justify-content: center; padding: 9px 0; }
  .sidebar:not([data-state="expanded"]) .brand-area     { justify-content: center; padding: 0; }
  .sidebar:not([data-state="expanded"]) .sidebar-logo   { justify-content: center; padding: 0 8px; }
  .sidebar:not([data-state="expanded"]) .sidebar-logo-text { display: none; }
  .sidebar:not([data-state="expanded"]) .sidebar-logo > div:first-child { margin-right: 0; }
  .sidebar:not([data-state="expanded"]) .nav-toggle-btn { justify-content: center; padding: 8px 0; }
  .sidebar:not([data-state="expanded"]) .sidebar-nav-group { padding: 0 4px; }
}

/* Tablet (< 1024px) */
@media (max-width: 1023px) {
  .cockpit-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .cockpit-split { grid-template-columns: 1fr; gap: 5px; }
  .cockpit-right-col { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  :root { --content-pad: 10px 16px 80px 16px; --topbar-pad: 16px; }
  .sidebar { display: none !important; }
  .bottom-tab-bar { display: flex; }
  .cockpit-kpi-strip { grid-template-columns: 1fr 1fr; gap: 4px; }
  .cockpit-split, .cockpit-right-col { grid-template-columns: 1fr; }
}
/* ==========================================================================
   14. DEPOT-IMPORT WIZARD  — light-theme, uses app CSS variables
   ========================================================================== */

.wi-trigger-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; cursor: pointer;
  background: var(--bg-card); border: 0.5px solid var(--border-md);
  border-radius: 12px; margin-bottom: 6px; transition: background 0.12s;
}
.wi-trigger-bar:hover { background: var(--bg-elevated); }

.wi-panel {
  background: var(--bg-card); border: 0.5px solid var(--border-md);
  border-radius: 12px; overflow: hidden; margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}

.wi-steps-row {
  display: flex; align-items: center; padding: 0 16px;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg-elevated); overflow-x: auto;
}
.wi-step {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 12px; font-size: 12px; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -0.5px; white-space: nowrap;
}
.wi-step-active { color: var(--gold); border-bottom-color: var(--gold); }
.wi-step-done   { color: var(--gain); }
.wi-step-arrow  { color: var(--border-md); font-size: 12px; padding: 0 2px; }
.wi-step-num {
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; background: var(--bg-card);
  border: 0.5px solid var(--border-md); color: var(--text-muted); flex-shrink: 0;
}
.wi-step-active .wi-step-num { background: var(--gold); border-color: var(--gold); color: #fff; }
.wi-step-done   .wi-step-num { background: var(--gain-bg); border-color: var(--gain); color: var(--gain); }

.wi-section-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.wi-form-label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }

.wi-badge {
  font-size: 10px; color: var(--text-muted);
  background: var(--bg-elevated); border: 0.5px solid var(--border);
  border-radius: 20px; padding: 2px 8px;
}

.wi-action-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 0.5px solid var(--border); margin-top: 12px;
}

.wi-btn-primary {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--btn-primary); color: var(--btn-text);
  border: none; padding: 7px 16px; border-radius: 8px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  font-family: 'Outfit', sans-serif;
}
.wi-btn-primary:hover { background: var(--btn-hover); box-shadow: var(--btn-shadow); }

.wi-add-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  background: transparent; border: 0.5px dashed var(--border-md);
  border-radius: 8px; cursor: pointer;
  font-size: 12px; color: var(--text-muted); font-family: 'Outfit', sans-serif; width: 100%;
}
.wi-add-btn:hover { background: var(--bg-elevated); }

.wi-depot-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--bg-elevated); border: 0.5px solid var(--border); border-radius: 8px;
}
.wi-depot-selected { border-color: var(--gold); background: var(--gold-pale); }
.wi-depot-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }

.wi-upload-zone {
  border: 0.5px dashed var(--border-md); border-radius: 8px; cursor: pointer;
  background: var(--bg-elevated); transition: background 0.12s, border-color 0.12s;
}
.wi-upload-zone:hover { background: var(--gold-pale); border-color: var(--gold-border); }
.wi-upload-done { border-style: solid; border-color: var(--gain); background: var(--gain-bg); }

.wi-pool-row {
  display: flex; flex-wrap: wrap; gap: 5px; padding: 8px;
  background: var(--bg-elevated); border: 0.5px solid var(--border);
  border-radius: 8px; min-height: 44px;
}
.wi-pool-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; background: var(--bg-card);
  border: 0.5px solid var(--border-md); border-radius: 20px;
  font-size: 11px; cursor: pointer; color: var(--text-primary);
}
.wi-pool-chip:hover { border-color: var(--gold); color: #A07830; }

.wi-vault-col {
  background: var(--bg-elevated); border: 0.5px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
.wi-vault-col-header {
  padding: 8px 12px; border-bottom: 0.5px solid var(--border);
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: space-between;
}
.wi-vault-drop { min-height: 60px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }

.wi-pos-chip {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; background: var(--bg-card);
  border: 0.5px solid var(--border); border-radius: 6px;
  font-size: 12px; cursor: pointer; transition: background 0.1s;
}
.wi-pos-chip:hover { background: var(--bg-elevated); }
.wi-pos-chip-name { font-weight: 500; color: var(--text-primary); }
.wi-pos-chip-ticker { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.wi-sat-block {
  background: var(--bg-elevated); border: 0.5px solid var(--border);
  border-radius: 8px; overflow: hidden; margin-bottom: 6px;
}
.wi-sat-header {
  padding: 8px 10px; border-bottom: 0.5px solid var(--border);
  background: var(--bg-card);
  display: flex; align-items: center; justify-content: space-between;
}
.wi-sat-name-input {
  font-size: 12px; font-weight: 500; color: var(--text-primary);
  background: transparent; border: none; outline: none; width: 130px;
  font-family: 'Outfit', sans-serif;
}
.wi-sat-name-input:focus { border-bottom: 1px solid var(--gold); }
.wi-sat-drop { min-height: 44px; padding: 5px; display: flex; flex-direction: column; gap: 3px; }
.wi-sat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.wi-assign-modal {
  padding: 12px; margin-bottom: 12px;
  background: var(--gold-pale); border: 0.5px solid var(--gold-border); border-radius: 10px;
}

.wi-vault-opt {
  padding: 4px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;
  border: 0.5px solid var(--border-md); color: var(--text-secondary);
  font-family: 'Outfit', sans-serif; background: var(--bg-card);
}
.wi-vault-opt:hover { border-color: var(--gold); }
.wi-opt-core { background: var(--gold-dim); border-color: var(--gold); color: #A07830; }

.wi-btn-secondary {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-card); color: var(--text-muted);
  border: 0.5px solid var(--border-md); padding: 7px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: 'Outfit', sans-serif;
}
.wi-btn-secondary:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* ==========================================================================
   15. VAULT COLLAPSE / EXPAND
   ========================================================================== */
.vault-card-collapsible .vault-card-header { transition: background 0.12s; }
.vault-card-collapsible .vault-card-header:hover { background: var(--bg-elevated); }

/* Collapsed state */
.vault-card-collapsible.vault-collapsed .vault-card-body { display: none; }
.vault-card-collapsible.vault-collapsed .vault-card-header {
  border-bottom: none !important;
}
.vault-card-collapsible.vault-collapsed .vault-chevron {
  transform: rotate(0deg) !important;
}

/* ==========================================================================
   16. SCREENING — Responsive + Detail Panel
   ========================================================================== */
.scr-section {
  position: relative;
  overflow: hidden;          /* kein Scrollbalken links durch overlay */
}

/* Grade Badges */
.scr-grade { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 22px; border-radius: 5px;
  font-size: 10px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.gr-ap { background: rgba(16,185,129,.15); color: #065F46; }
.gr-a  { background: rgba(16,185,129,.1);  color: #10B981; }
.gr-b  { background: rgba(234,179,8,.1);   color: #854F0B; }
.gr-c  { background: rgba(239,68,68,.1);   color: #A32D2D; }

/* Row hover actions */
.scr-row:hover { background: var(--bg-elevated, #F8FAFC); }
.scr-row-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
.scr-row:hover .scr-row-actions { opacity: 1; }
.scr-row-btn { padding: 2px 7px; font-size: 10px; border-radius: 4px;
  border: 0.5px solid var(--border-md); background: var(--bg-card);
  color: var(--text-muted); cursor: pointer; }
.scr-row-btn:hover { background: var(--gold-dim); color: #A07830; border-color: var(--gold-border); }

/* Mobile card view */
.scr-pos-card { padding: 10px 12px; border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 10px; cursor: pointer; }
.scr-pos-card:hover { background: var(--bg-elevated, #F8FAFC); }
.scr-pos-card:last-child { border-bottom: none; }

/* Filter bar */
.scr-filter-bar input:focus { outline: none; }

/* Grade pills */
.scr-grade-pill.active { background: rgba(16,185,129,.1) !important;
  color: #10B981 !important; border-color: rgba(16,185,129,.3) !important; }

/* Overlay + Detail Panel */
.scr-panel-overlay { display: none; position: absolute; inset: 0;
  background: rgba(0,0,0,.22); border-radius: 12px; z-index: 20; }
.scr-panel-overlay.open { display: block; }
.scr-detail-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 560px;
  background: var(--bg-card); border-left: 0.5px solid var(--border);
  border-radius: 0 12px 12px 0; overflow-y: auto; z-index: 21;
  box-shadow: -4px 0 24px rgba(0,0,0,.08);
}
/* Auf sehr schmalen Containern (<480px) → volles Panel, kein overlay-gap */
.scr-mobile .scr-detail-panel { width: 100%; border-radius: 12px; }
.scr-close-btn:hover { background: rgba(239,68,68,.1) !important; }
.scr-tf-btn { padding: 1px 6px; font-size: 10px; border-radius: 4px;
  border: 0.5px solid var(--border-md); background: var(--bg-card);
  color: var(--text-muted); cursor: pointer; }
.scr-tf-active { background: rgba(203,164,83,.12) !important;
  color: #A07830 !important; border-color: rgba(203,164,83,.3) !important; }

/* Responsive column hiding — controlled by screening.js ResizeObserver */
.scr-mobile [data-hide="mobile"],
.scr-mobile .scr-row-actions,
.scr-tablet [data-hide="tablet"] { display: none !important; }
.scr-mobile .scr-pos-cards { display: block !important; }
.scr-mobile .tbl-wrap { display: none !important; }

/* Screening detail panel — scrollbar rechts, nicht links */
.scr-detail-panel { direction: ltr; }
.scr-detail-panel::-webkit-scrollbar { width: 4px; }
.scr-detail-panel::-webkit-scrollbar-track { background: transparent; }
.scr-detail-panel::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 2px; }

/* ── Screening Panel Modi ── */

/* Standardmäßig alles sichtbar */
.scr-panel-chart-section { display: block; }
.scr-panel-edit-section { display: block; }

/* Chart-Modus: nur Chart sichtbar, Editor versteckt */
.scr-detail-panel.mode-chart .scr-panel-edit-section  { display: none; }
.scr-detail-panel.mode-chart .scr-panel-chart-section { display: block; }
.scr-detail-panel.mode-chart .dp-chart-wrap { height: auto !important; min-height: 360px; }

/* Editor-Modus: nur Editor sichtbar, Chart versteckt */
.scr-detail-panel.mode-edit .scr-panel-chart-section { display: none; }
.scr-detail-panel.mode-edit .scr-panel-edit-section  { display: block; }

/* Modus-Toggle im Panel-Header */
.scr-mode-toggle { display: flex; gap: 4px; }
.scr-mode-btn {
  padding: 3px 9px; font-size: 11px; border-radius: 6px;
  border: 0.5px solid var(--border-md); background: var(--bg-elevated);
  color: var(--text-muted); cursor: pointer; display: inline-flex;
  align-items: center; gap: 4px;
}
.scr-mode-btn.active { background: var(--navy, #0F172A); color: #E2E8F0; border-color: var(--navy, #0F172A); }

/* ==========================================================================
   17. MOBILE MEHR-OVERLAY
   ========================================================================== */
.mob-mehr-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; justify-content: flex-end;
  pointer-events: all;
}
.mob-mehr-hidden { display: none !important; }

.mob-mehr-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
}
.mob-mehr-sheet {
  position: relative; z-index: 1;
  background: #1E293B;
  border-radius: 14px 14px 0 0;
  border-top: 0.5px solid rgba(255,255,255,0.1);
  padding-bottom: 80px; /* Platz für die Tab-Bar darunter */
}
.mob-mehr-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  padding: 14px 18px 8px;
}
.mob-mehr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
}
.mob-mehr-row span {
  font-size: 15px; color: rgba(255,255,255,0.75); font-family: Outfit, sans-serif;
}
.mob-mehr-row:hover { background: rgba(255,255,255,0.05); }
.mob-mehr-row:active { background: rgba(203,164,83,0.1); }
.mob-mehr-row:active span { color: #CBA453; }

@media (min-width: 769px) {
  .mob-mehr-overlay { display: none !important; }
}
.sidebar-logout-btn:hover {
  background: rgba(239,68,68,.07) !important;
}
.sidebar-logout-btn:hover .nav-spot svg,
.sidebar-logout-btn:hover .nav-spot [class*="iconify"] {
  color: #EF4444 !important;
}
.sidebar-logout-btn:hover .nav-label {
  color: #EF4444 !important;
}

/* ==========================================================================
   18. EARNINGS — Kompakte Zeilenansicht
   ========================================================================== */
.earnings-ev-wrap:hover .earnings-row-inner { background: var(--bg-elevated,#F8FAFC); }
.earnings-ev-wrap { transition: background .1s; }
.earnings-detail { border-top: 0.5px solid var(--border,rgba(0,0,0,.08)); }


/* ── FinanzLane Copilot — Responsive Tabelle ─────────────────────────────── */
/* Styleguide v1.0 §4.6: Mobile-Breakpoint 767px                              */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
    /* Touch-Targets: min 44x44px (Styleguide §9.4) */
    .copilot-action-row {
        min-height: 44px;
    }
    /* Schriftgröße: min 14px Primär, 12px Sekundär (Styleguide §7.6) */
    .copilot-badge {
        font-size: 12px !important;
    }
}

/* Reduced motion (Styleguide §8.3) */
@media (prefers-reduced-motion: reduce) {
    .copilot-section * {
        transition: none !important;
        animation: none !important;
    }
}

/* Vermoegens-Zeitraum-Pills (Cockpit) */
.wealth-pills { display: inline-flex; gap: 4px; background: #FFFFFF; padding: 3px; border-radius: 8px; border: 0.5px solid #E2E8F0; }
.wealth-pills label { font-size: 0.66rem; color: #64748B; padding: 3px 10px; border-radius: 6px; cursor: pointer; user-select: none; transition: background .15s, color .15s; }
.wealth-pills label:hover { color: #0F172A; }
.wealth-pills label:has(input:checked) { background: #CBA453; color: #1E293B; font-weight: 700; }
/* v120: Orbit-Panel — Umbruch auf eine Spalte unter 1024px (Styleguide v1.4). */
@media (max-width: 1023px) {
  .cockpit-orbit-grid { grid-template-columns: minmax(0, 1fr) !important; }
}