/* /portfolio_app/static/portfolio_app/css/partials/_1_variables.css */

:root {

  /* Typografie, Spacing, Motion */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Michroma', var(--font-primary);
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem;
  --spacing-lg: 1.5rem;  --spacing-xl: 2rem;  --spacing-2xl: 3rem;

  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s ease;


  /* Grundfarben (Hintergründe) */
  --color-primary:   #0B1426;  /* Seite (dunkles Marine) */
  --color-secondary: #152033;  /* Cards/Container */
  --color-tertiary:  #1E2A3F;  /* Leisten/Heads in Cards/Tabellen */
  --color-surface:   #0F1923;  /* Inputs/Flächen */
  --color-surface-dim: #1F2937; /* Dazupassender Grauton (Cool Gray) */


  /* Akzente */
  --color-accent-primary:   #00B4D8; /* ← vereinheitlicht (war #2d3aeb / #099c99) */
  --color-accent-secondary: #90E0EF; /* Hover/heller Akzent */
  --color-accent-success:   #10b981; /* Unified with action-add (emerald-500) */
  --color-accent-warning:   #4FFFFF; /* Warnung in UI (kein Gelb) */
  --color-accent-danger:    #EF476F; /* Fehler */

  /* Semantic Action Colors (Strict Palette: Green, Red, Cyan, Gray, White) */
  --color-action-add:       #10b981;  /* emerald-500 -> Success (Green) */
  --color-action-remove:    #ef4444;  /* red-500 -> Danger (Red) */
  --color-action-income:    #10b981;  /* emerald-500 -> Success (Green) */
  
  /* Remapped to Allowed Colors */
  --color-action-process:   var(--color-accent-primary);  /* Was Violet -> Now Cyan (Info) */
  --color-action-admin:     var(--color-accent-primary);  /* Was Blue -> Now Cyan (Info) */
  --color-action-neutral:   var(--color-text-muted);      /* Was Slate -> Now Muted (Gray) */
  --color-action-muted:     var(--color-text-muted);      /* Was Slate -> Now Muted (Gray) */

  /* Hover variants */
  --color-action-add-hover:     #059669;
  --color-action-remove-hover:  #dc2626;
  --color-action-process-hover: var(--color-accent-secondary); /* Cyan Hover */
  --color-action-admin-hover:   var(--color-accent-secondary); /* Cyan Hover */

  /* Bootstrap Overrides - Map to Design System */
  --bs-success: var(--color-action-add);      /* #10b981 instead of Bootstrap's #198754 */
  --bs-danger: var(--color-action-remove);    /* #ef4444 instead of Bootstrap's #dc3545 */


  /* Textfarben */
  --color-text-primary:   #F8FAFC;
  --color-text-secondary: #E2E8F0;
  --color-text-tertiary:  #94A3B8;
  --color-text-muted:     #94A3B8;
  --color-white:          #fff;


  /* Alpha helper tokens */
  --white-08: rgb(255 255 255 / 8%);
  --white-12: rgb(255 255 255 / 12%);
  --white-05: rgb(255 255 255 / 5%);
  --success-16: rgb(25 135  84 / 16%);
  --danger-16:  rgb(220  53  69 / 16%);

  
  /* Linien/Schattierungen */
  --color-border:        #334155;
  --color-border-light:  #475569;
  --color-border-strong: #223044;

  --shadow-soft:   0 4px 12px  rgba(0,0,0,.15);
  --shadow-medium: 0 8px 25px  rgba(0,0,0,.25);
  --shadow-strong: 0 12px 40px rgba(0,0,0,.35);


  /* Header / Navigation */
  --header-bg:           var(--color-surface);
  --subheader-bg:        #141E28;
  --header-logo-color:   #C5FFFF;         /* WP-Look */
  --nav-link:            var(--color-text-primary);
  --nav-link-hover:      var(--color-text-secondary);


  /* Cards / Tabs / Tables */
  --color-card-subtle-bg:   var(--color-surface); /* (vorher #101829) */
  --color-card-title:       var(--color-text-primary);
  --color-tab-text:         var(--color-text-tertiary);
  --color-tab-text-hover:   var(--color-text-secondary);
  --color-tab-underline:    #1F6FEB;  /* Einheitliches „Interaktionsblau“ */
  --table-row-hover:        rgba(0, 180, 216, 0.08); /* Cyan-Tint statt Grau */


  /* KPI-Farben */
  --kpi-green-dark:   #0A6442;
  --kpi-green:        #198754;
  --kpi-green-light:  #20C997;
  --kpi-red-light:    #DC3545;
  --kpi-red:          #A4202D;
  --kpi-red-dark:     #6D121B;


  /* Forms / Focus */
  --focus-outline-color:  rgba(9,156,153,.25);
  --focus-outline-strong: #6ea8fe;
  --radio-hover-border:   #345277;
  --radio-active-bg:      var(--color-tab-underline);
  --radio-active-text:    var(--color-text-primary);


  /* Buttons (Primary Gradients) */
  --btn-primary-from:       #00B4D8;
  --btn-primary-to:         #0096c7;
  --btn-primary-hover-from: #0096c7;
  --btn-primary-hover-to:   #007ea7;
  --btn-primary-shadow:     rgba(0,180,216,.3);

  --btn-secondary-bg:       #475569;
  --btn-secondary-bg-hover: #334155;

  /* Pills */
  --pill-text:           var(--color-text-primary);
  --pill-bg:             var(--color-tertiary);
  --pill-border:         rgba(18,41,77,.05);
  --pill-hover-bg:       var(--color-primary);
  --pill-hover-border:   rgba(18,41,77,.15);
  --pill-active-bg:      var(--color-primary);
  --pill-active-border:  var(--color-primary);
  --pill-shadow:         0 2px 6px rgba(0,0,0,.18);
  --pill-active-shadow:  0 2px 8px rgba(176, 191, 231, 0.2);
  --pill-close-hover-bg: rgba(255,255,255,.08);

  /* Choices (Dropdown) */
  --choices-focus-ring: rgba(9,156,153,.2);

  
  /* Panels / Overview-Karten */
  --panel-border:       #2a3b52;
  --panel-border-hover: #3a4b62;
  --panel-subtle-bg:    var(--color-surface);


  /* Alerts (kein Gelb im UI) */
  --alert-success-bg:    rgba(6,214,160,.15);
  --alert-success-border: var(--color-accent-success);
  --alert-success-text:  #a7f3d0;

  --alert-info-bg:        rgba(0,180,216,.15);
  --alert-info-border:    var(--color-accent-primary);
  --alert-info-text:      #7dd3fc;

  --alert-warning-bg:     rgba(9,156,153,.15);
  --alert-warning-border: var(--color-accent-primary);
  --alert-warning-text:   #bfecef;

  --alert-danger-bg:      rgba(239,71,111,.15);
  --alert-danger-border:  var(--color-accent-danger);
  --alert-danger-text:    #fca5a5;


  /* Accordions: Border konsistent zu restlichen Cards */
  --accordion-bg:                  var(--panel-subtle-bg);
  --accordion-border:              var(--color-border-strong); /* ← statt sky-blue */
  --accordion-header-bg:           var(--color-secondary);
  --accordion-header-active-bg:    #1a2433;
  --accordion-header-text:         var(--color-text-primary);
  --accordion-header-active-text:  #8df;


  /* Overview Cards */
  --overview-bg-from:            #152033;
  --overview-bg-to:              #1a2638;
  --overview-border:             var(--panel-border);
  --overview-border-hover:       var(--panel-border-hover);
  --overview-highlight-bar-from: var(--btn-primary-from);
  --overview-highlight-bar-to:   var(--btn-primary-to);


  /* Icon-Tints (ohne Gelb) */
  --overview-icon-value-from: rgba(13,110,253,.2);
  --overview-icon-value-to:   rgba(13,110,253,.1);
  --overview-icon-pnl-from:   rgba(25,135,84,.2);
  --overview-icon-pnl-to:     rgba(25,135,84,.1);
  --overview-icon-perf-from:  rgba(0,180,216,.20);
  --overview-icon-perf-to:    rgba(0,180,216,.10);


  /* Charts */
  --chart-container-bg:   var(--color-secondary);
  --chart-border:         var(--panel-border);
  --chart-header-border:  var(--panel-border);
  --chart-toggle-bg:      var(--color-tertiary);
  --chart-toggle-border:  var(--color-border);
  --chart-toggle-active-bg: var(--btn-primary-from);
  --chart-legend-text:    var(--color-text-secondary);
  --chart-spinner-track:  #334155;
  --chart-spinner-accent: var(--btn-primary-from);


  /* Trend Indicators / Overlays (Vorher direkt in Komponenten hart-codiert) */
  --trend-up-bg: rgba(6, 214, 160, 0.2);
  --trend-down-bg: rgba(239, 71, 111, 0.2);
  --overlay-white-05: rgba(255, 255, 255, 0.05);


  /* Transactions */
  --tx-container-bg:         var(--color-secondary);
  --tx-container-border:     var(--panel-border);
  --tx-header-bg:            var(--panel-subtle-bg);
  --tx-th-bg:                var(--color-tertiary);
  --tx-th-text:              var(--color-text-tertiary);
  --tx-hover:                rgba(0,180,216,.05);
  --tx-action-border:        var(--color-border);
  --tx-action-hover-border:  var(--btn-primary-from);
  --tx-action-hover-bg:      rgba(0,180,216,.10);


  /* Layout-Konstanten */
  --header-height: 80px;
  --std-toolbar-height: 32px; /* Standardize Toolbar Elements (btn-sm approx) */


  /* Footer */
  --footer-bg:                  var(--color-surface);
  --footer-border-top:          transparent;
  --footer-text:                var(--color-text-secondary);
  --footer-link:                var(--color-accent-primary);
  --footer-link-hover-underline: underline;


  /* Darkmode Enhancements */
  --scrollbar-track:        #0c121c;
  --scrollbar-thumb:        #2a3b4c;
  --scrollbar-thumb-border: #1a2433;
  --scrollbar-thumb-hover:  #3a4b5c;
  --scrollbar-ff-thumb:     #2a3b4c;
  --scrollbar-ff-track:     #0c121c;

  --selection-bg:    rgba(97,218,251,.3);
  --selection-text:  var(--color-text-primary);

  --focus-outline-global: #61dafb;
  --focus-outline-offset: 2px;


  /* Print */
  --print-bg:         var(--color-text-primary);
  --print-text:     #000;
  --print-border:   #ccc;
  --print-thead-bg: #f8f9fa;


  /* Subheader Utils */
  --subheader-select-min-width: 400px;


  /* Left Rail */
  --rail-w:         56px;
  --rail-icon-size: 28px;
  --rail-item-gap:  2rem;
  --content-pad-r:  48px;

  --rail-bg:      var(--header-bg); /* Use header background for opaque internal frame look */
  --rail-border:  var(--color-border-strong); /* Stronger border for separation */
  --rail-color:     var(--color-tertiary);
  --rail-hover:   var(--color-text-primary);
  --rail-active:  #babef5ff;
  --rail-divider:   var(--color-tertiary);

}

/* Utilities nur mit Tokens */
.c-primary   { color: var(--color-text-primary) !important; }
.c-secondary { color: var(--color-text-secondary) !important; }
.c-muted     { color: var(--color-text-muted) !important; }

.bg-surface   { background-color: var(--color-surface) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent    { background-color: var(--color-accent-primary) !important; }
.c-accent     { color: var(--color-accent-primary) !important; }

.bd-panel { border-color: var(--panel-border) !important; }