/* ═══════════════════════════════════════════════════════════════
   Solid-O Design System v4.0 — Dual Theme Support
   Dark Theme (Default) + Light Theme
   Glasmorphie-Header, keine Sidebar, volle Breite
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
/* Fonts loaded via <link> in base.html */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — DARK THEME (Default)
   ═══════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  /* ── Navy Palette (Legacy — still available) ── */
  --navy-950: #080F1A;
  --navy-900: #0D1B2E;
  --navy-800: #112340;
  --navy-750: #142D50;
  --navy-700: #163050;
  --navy-600: #1C3D65;
  --navy-500: #1F507A;
  --navy-400: #2E6E9E;
  --navy-300: #5B91B8;
  --navy-200: #9CBCD5;
  --navy-100: #D0E4EF;
  --navy-50:  #EEF5FA;

  /* ── Semantic Background Tokens ── */
  --bg-body:        #080F1A;
  --bg-surface:     #0D1B2E;
  --bg-card:        #112340;
  --bg-elevated:    #142D50;
  --bg-hover:       #163050;
  --bg-input:       #142D50;
  --bg-header:      rgba(8,15,26,.85);
  --bg-overlay:     rgba(0,0,0,.5);
  --bg-modal:       #0D1B2E;
  --bg-slidein:     #0D1B2E;
  --bg-dropdown:    #0D1B2E;
  --bg-tooltip:     #D8E8F0;
  --bg-skeleton-1:  #142D50;
  --bg-skeleton-2:  #1C3D65;
  --bg-code:        #0D1B2E;
  --bg-tag:         rgba(255,255,255,.06);
  --bg-table-header:#0D1B2E;
  --bg-table-stripe:rgba(255,255,255,.02);
  --bg-active-row:  rgba(63,168,160,.06);
  --bg-disabled:    rgba(255,255,255,.03);
  --bg-progress:    #142D50;
  --bg-bottomsheet: #0D1B2E;
  --bg-chat-user:   rgba(63,168,160,.12);
  --bg-chat-bot:    #142D50;

  /* ── Semantic Text Tokens ── */
  --text-primary:   #D8E8F0;
  --text-secondary: #8AAFC4;
  --text-tertiary:  #809CAF;
  --text-heading:   #dceaf4;
  --text-table:     #b8ccd8;
  --text-inverse:   #080F1A;
  --text-on-teal:   #ffffff;
  --text-link:      var(--so-accent-text);
  --text-link-hover:var(--so-accent);
  --text-placeholder:#809CAF;
  --text-disabled:  rgba(255,255,255,.25);
  --text-badge:     #fff;
  --text-on-ok:     #fff;
  --text-on-warn:   #fff;
  --text-on-err:    #fff;
  --text-tooltip:   #080F1A;

  /* Legacy aliases */
  --text:      #D8E8F0;
  --text-muted:#8AAFC4;
  --text-dim:  #809CAF;

  /* ── Semantic Border Tokens ── */
  --border-subtle:  rgba(255,255,255,.05);
  --border-light:   rgba(255,255,255,.07);
  --border-medium:  rgba(255,255,255,.1);
  --border-input:   rgba(255,255,255,.08);
  --border-focus:   rgba(63,168,160,.4);
  --border-teal:    rgba(63,168,160,.13);
  --border-hover:   rgba(63,168,160,.28);
  --border-header:  rgba(63,168,160,.08);
  --border-active:  var(--so-accent);
  --border-error:   var(--err);
  --border-separator:rgba(255,255,255,.06);
  --border-card-hover:rgba(63,168,160,.28);

  /* ── Semantic Shadow Tokens ── */
  --shadow-card:    0 2px 12px rgba(0,0,0,.35);
  --shadow-dropdown:0 8px 24px rgba(0,0,0,.4);
  --shadow-modal:   0 24px 64px rgba(0,0,0,.5);
  --shadow-slidein: -8px 0 32px rgba(0,0,0,.5);
  --shadow-toast:   0 8px 24px rgba(0,0,0,.3);
  --shadow-fab:     0 6px 24px rgba(63,168,160,.35);
  --shadow-btn:     0 4px 20px rgba(63,168,160,.28);
  --shadow-btn-hover:0 8px 28px rgba(63,168,160,.35);
  --shadow-focus:   0 0 0 3px rgba(63,168,160,.12);
  --shadow-focus-err:0 0 0 3px rgba(194,48,48,.1);
  --shadow-bottomsheet:0 -8px 32px rgba(0,0,0,.4);
  --shadow-lg:      0 24px 64px rgba(0,0,0,.5);


  /* ── Typography Scale ── */
  --so-text-2xs: 11px;
  --so-text-xs:  12px;
  --so-text-sm:  13px;
  --so-text-base:16px;
  --so-text-lg:  18px;
  --so-text-xl:  24px;
  --so-text-2xl: 32px;

  /* ── Semantic Colors (for inline-color replacements) ── */
  --so-border-light: rgba(255,255,255,.08);
  --so-text-heading:  var(--text-primary);
  --so-bg-elevated-light: var(--bg-elevated);
  /* aliases for semantic inline-color migration */
  --so-success:         var(--ok);
  --so-success-text:    var(--ok-text);
  --so-success-bg:      var(--ok-bg);
  --so-warning:         var(--warn);
  --so-warning-text:    var(--warn-text);
  --so-warning-bg:      var(--warn-bg);
  --so-danger:          var(--err);
  --so-danger-text:     var(--err-text);
  --so-danger-bg:       var(--err-bg);
  --so-border-dark:     #1e293b;
  --so-border-heavy:    #334155;
  /* pipeline stage colors */
  --so-pipeline-lead:   #8b5cf6;
  --so-pipeline-active: #06b6d4;
  /* calendar */
  --so-cal-today:       #818cf8;

  /* ── Kanban / KPI ── */
  --kanban-col:     #112340;
  --kanban-card:    #080F1A;
  --kpi-bg:         #142D50;

  /* ── Teal Palette ── */
  /* ── Accent Color (set by Color Engine at runtime) ── */
  --so-accent:       #389D96;
  --so-accent-hover: #4BB8B0;
  --so-accent-active:#2A7870;
  --so-accent-subtle:rgba(63,168,160,.12);
  --so-accent-muted: rgba(63,168,160,.25);
  --so-accent-text:  #6DC5BE;
  --so-accent-on:    #ffffff;
  --so-accent-border:rgba(63,168,160,.35);
  --so-accent-rgb:   56,157,150;
  --so-accent-gradient-start: #389D7E;
  --so-accent-gradient-end:   #389DAE;
  --so-accent-shadow:rgba(63,168,160,.25);

  /* ── Legacy Teal Aliases (deprecated — use --so-accent-*) ── */
  --teal:     var(--so-accent);
  --teal-l:   var(--so-accent-hover);
  --teal-d:   var(--so-accent-active);
  --teal-xl:  var(--so-accent-active);
  --teal-bg:  var(--so-accent-subtle);
  --teal-brd: var(--so-accent-border);
  --teal-text: var(--so-accent-text);

  /* ── Semantic Colors ── */
  --ok:        #28A06A;
  --ok-text:   #5CC890;
  --ok-bg:     rgba(40,160,106,.16);
  --warn:      #D4900A;
  --warn-text: #E8AA3A;
  --warn-bg:   rgba(212,144,10,.16);
  --err:       #C23030;
  --err-text:  #E85454;
  --err-bg:    rgba(194,48,48,.16);
  --info-text: #6AAAD8;
  --info-bg:   rgba(29,95,160,.2);

  /* ── Typography ── */
  --f-head: 'Epilogue', sans-serif;
  --f-body: 'DM Sans', sans-serif;

  /* ── Radii ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ── Layout ── */
  --header-h: 56px;

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Navy overrides for light ── */
  --navy-950: #F4F6F9;
  --navy-900: #FFFFFF;
  --navy-800: #FFFFFF;
  --navy-750: #F0F2F5;
  --navy-700: #E8EBF0;
  --navy-600: #D8DCE2;
  --navy-500: #C0C6D0;
  --navy-400: #A0A8B4;
  --navy-300: #596878;
  --navy-200: #4A5568;
  --navy-100: #2D3B4E;
  --navy-50:  #1A2332;

  /* ── Semantic Background Tokens ── */
  --bg-body:        #F4F6F9;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-elevated:    #F0F2F5;
  --bg-hover:       #E8EBF0;
  --bg-input:       #F0F2F5;
  --bg-header:      rgba(255,255,255,.88);
  --bg-overlay:     rgba(0,0,0,.3);
  --bg-modal:       #FFFFFF;
  --bg-slidein:     #FFFFFF;
  --bg-dropdown:    #FFFFFF;
  --bg-tooltip:     #1A2332;
  --bg-skeleton-1:  #E8EBF0;
  --bg-skeleton-2:  #D8DCE2;
  --bg-code:        #F0F2F5;
  --bg-tag:         rgba(0,0,0,.05);
  --bg-table-header:#F4F6F9;
  --bg-table-stripe:rgba(0,0,0,.02);
  --bg-active-row:  rgba(46,154,146,.06);
  --bg-disabled:    rgba(0,0,0,.04);
  --bg-progress:    #E8EBF0;
  --bg-bottomsheet: #FFFFFF;
  --bg-chat-user:   rgba(46,154,146,.1);
  --bg-chat-bot:    #F0F2F5;

  /* ── Semantic Text Tokens ── */
  --text-primary:   #1A2332;
  --text-secondary: #4A5568;
  --text-tertiary:  #596878;
  --text-heading:   #0F1923;
  --text-table:     #2D3B4E;
  --text-inverse:   #FFFFFF;
  --text-on-teal:   #ffffff;
  --text-link:      var(--so-accent-text);
  --text-link-hover:var(--so-accent-active);
  --text-placeholder:#596878;
  --text-disabled:  rgba(0,0,0,.25);
  --text-badge:     #fff;
  --text-on-ok:     #fff;
  --text-on-warn:   #fff;
  --text-on-err:    #fff;
  --text-tooltip:   #FFFFFF;

  /* Legacy aliases */
  --text:      #1A2332;
  --text-muted:#4A5568;
  --text-dim:  #596878;

  /* ── Semantic Border Tokens ── */
  --border-subtle:  rgba(0,0,0,.06);
  --border-light:   rgba(0,0,0,.08);
  --border-medium:  rgba(0,0,0,.12);
  --border-input:   rgba(0,0,0,.12);
  --border-focus:   rgba(63,168,160,.5);
  --border-teal:    rgba(63,168,160,.2);
  --border-hover:   rgba(63,168,160,.35);
  --border-header:  rgba(0,0,0,.06);
  --border-active:  var(--so-accent);
  --border-error:   var(--err);
  --border-separator:rgba(0,0,0,.06);
  --border-card-hover:rgba(46,154,146,.3);

  /* ── Semantic Shadow Tokens ── */
  --shadow-card:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-dropdown:0 4px 16px rgba(0,0,0,.1);
  --shadow-modal:   0 16px 48px rgba(0,0,0,.15);
  --shadow-slidein: -4px 0 24px rgba(0,0,0,.1);
  --shadow-toast:   0 4px 16px rgba(0,0,0,.1);
  --shadow-fab:     0 4px 16px rgba(63,168,160,.25);
  --shadow-btn:     0 2px 8px rgba(63,168,160,.2);
  --shadow-btn-hover:0 4px 16px rgba(63,168,160,.3);
  --shadow-focus:   0 0 0 3px rgba(46,154,146,.15);
  --shadow-focus-err:0 0 0 3px rgba(181,40,40,.1);
  --shadow-bottomsheet:0 -4px 24px rgba(0,0,0,.12);
  --shadow-lg:      0 16px 48px rgba(0,0,0,.15);


  /* ── Typography Scale ── */
  --so-text-2xs: 11px;
  --so-text-xs:  12px;
  --so-text-sm:  13px;
  --so-text-base:16px;
  --so-text-lg:  18px;
  --so-text-xl:  24px;
  --so-text-2xl: 32px;

  /* ── Semantic Colors (for inline-color replacements) ── */
  --so-border-light: rgba(255,255,255,.08);
  --so-text-heading:  var(--text-primary);
  --so-bg-elevated-light: var(--bg-elevated);
  /* aliases for semantic inline-color migration */
  --so-success:         var(--ok);
  --so-success-text:    var(--ok-text);
  --so-success-bg:      var(--ok-bg);
  --so-warning:         var(--warn);
  --so-warning-text:    var(--warn-text);
  --so-warning-bg:      var(--warn-bg);
  --so-danger:          var(--err);
  --so-danger-text:     var(--err-text);
  --so-danger-bg:       var(--err-bg);
  --so-border-dark:     #cbd5e1;
  --so-border-heavy:    #94a3b8;
  /* pipeline stage colors */
  --so-pipeline-lead:   #7c3aed;
  --so-pipeline-active: #0891b2;
  /* calendar */
  --so-cal-today:       #6366f1;

  /* ── Kanban / KPI ── */
  --kanban-col:     #F0F2F5;
  --kanban-card:    #FFFFFF;
  --kpi-bg:         #FFFFFF;

  /* ── Teal Palette (slightly adjusted for light bg contrast) ── */
  /* ── Light theme semantic overrides ── */
  --so-border-light: rgba(0,0,0,.1);
  --so-text-heading:  var(--text-primary);
  --so-bg-elevated-light: var(--bg-elevated);

    /* Light theme accent overrides (Color Engine sets these at runtime) */
  --so-accent:       #146862;
  --so-accent-hover: #1A7870;
  --so-accent-active:#0E524D;
  --so-accent-subtle:rgba(46,154,146,.08);
  --so-accent-muted: rgba(46,154,146,.2);
  --so-accent-text:  #146862;
  --so-accent-on:    #ffffff;
  --so-accent-border:rgba(46,154,146,.3);
  --so-accent-rgb:   20,104,98;
  --so-accent-shadow:rgba(46,154,146,.2);

  /* Legacy aliases (deprecated) */
  --teal:     var(--so-accent);
  --teal-l:   var(--so-accent-hover);
  --teal-d:   var(--so-accent-active);
  --teal-xl:  var(--so-accent-active);
  --teal-bg:  var(--so-accent-subtle);
  --teal-brd: var(--so-accent-border);
  --teal-text: var(--so-accent-text);

  /* ── Semantic Colors (saturated for light bg) ── */
  --ok:        #16753F;
  --ok-text:   #16753F;
  --ok-bg:     rgba(30,138,86,.1);
  --warn:      #C07E00;
  --warn-text: #805200;
  --warn-bg:   rgba(192,126,0,.1);
  --err:       #B52828;
  --err-text:  #B52828;
  --err-bg:    rgba(181,40,40,.08);
  --info-text: #2968A8;
  --info-bg:   rgba(41,104,168,.08);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; }

body {
  padding-top: var(--header-h, 56px);
  font-family: var(--f-body);
  font-size: var(--so-text-sm);
  color: var(--text-primary);
  line-height: 1.65;
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--so-accent); color: var(--so-accent-on); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); }
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-elevated); }

/* ── Theme Transition (only active during toggle) ── */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. TYPOGRAFIE
   ═══════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.2;
}
h1 { font-size: 1.6rem; letter-spacing: -0.5px; }
h2 { font-size: 1.3rem; letter-spacing: -0.4px; }
h3 { font-size: 1.05rem; font-weight: 600; }

p, td, li, span, label, input, select, textarea {
  font-family: var(--f-body);
}

/* ═══════════════════════════════════════════════════════════════
   4. APP HEADER (Glasmorphie — Landingpage-Stil)
   ═══════════════════════════════════════════════════════════════ */

.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: var(--bg-header);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border-header);
}
[data-theme="light"] .app-header {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}


/* ── Header Back Button (Hauptmenü) ── */
.header-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: var(--text-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
  margin-right: 4px;
  flex-shrink: 0;
}
.header-back-btn:hover {
  background: rgba(63,168,160,.15);
  color: var(--so-accent-text);
}
[data-theme="light"] .header-back-btn {
  background: rgba(0,0,0,.06);
}
[data-theme="light"] .header-back-btn:hover {
  background: rgba(63,168,160,.12);
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: var(--so-text-base);
  color: var(--text-heading);
  letter-spacing: -0.4px;
  text-decoration: none;
  flex-shrink: 0;
}
.header-logo svg { flex-shrink: 0; }

.header-sep {
  color: var(--text-tertiary);
  margin: 0 12px;
  font-size: var(--so-text-lg);
  flex-shrink: 0;
}

.header-module {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--so-text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  font-size: var(--so-text-base);
}
.header-icon:hover {
  background: var(--bg-hover);
  color: var(--text-heading);
}
.header-icon svg { width: 18px; height: 18px; }

/* ── Theme Toggle Icons ── */
[data-theme="dark"] .theme-icon-dark,
:root:not([data-theme="light"]) .theme-icon-dark { display: block; }
[data-theme="dark"] .theme-icon-light,
:root:not([data-theme="light"]) .theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-light { display: block; }

.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-md);
  transition: background .15s;
}
.header-user:hover { background: var(--bg-hover); }

.header-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--so-text-xs);
  color: var(--so-accent-hover);
  flex-shrink: 0;
}

.header-username {
  font-size: var(--so-text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   5. MODULE TABS
   ═══════════════════════════════════════════════════════════════ */

.module-tabs {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 199;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 24px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-separator);
  overflow-x: auto;
}

.module-tab {
  padding: 10px 20px;
  font-family: var(--f-body);
  font-size: var(--so-text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.module-tab:hover { color: var(--text-heading); }
.module-tab.active {
  color: var(--text-heading);
  border-bottom-color: var(--so-accent-text);
}

/* ═══════════════════════════════════════════════════════════════
   6. CONTENT LAYOUT
   ═══════════════════════════════════════════════════════════════ */

.app-content {
  padding-top: var(--header-h);
  min-height: 100vh;
  background: var(--bg-body);
  padding: 80px 32px 32px;
}
.app-content.has-tabs {
  padding-top: 124px;
}

.page-title {
  font-family: var(--f-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.page-subtitle {
  font-size: var(--so-text-sm);
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

/* Legacy support */
.so-main {
  margin-left: 0;
  padding: 80px 32px 32px;
  min-height: 100vh;
  background: var(--bg-body);
}
.so-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.so-page-title {
  font-family: var(--f-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.5px;
}
.so-page-subtitle {
  font-size: var(--so-text-sm);
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   7. BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn-main, .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--so-accent);
  color: #fff;
  padding: 13px 28px;
  border-radius: var(--r-md);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--so-text-sm);
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.btn-main:hover, .btn-primary:hover {
  background: var(--so-accent-active);
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  padding: 13px 24px;
  border-radius: var(--r-md);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--so-text-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-ghost:hover {
  background: var(--bg-elevated);
  color: var(--text-heading);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--err-bg);
  border: 1px solid rgba(194,48,48,.25);
  color: var(--err-text);
  padding: 13px 24px;
  border-radius: var(--r-md);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--so-text-sm);
  cursor: pointer;
  transition: background .15s;
}
.btn-danger:hover {
  background: rgba(194,48,48,.25);
}

.btn-sm {
  padding: 6px 14px;
  font-size: var(--so-text-xs);
}

/* ═══════════════════════════════════════════════════════════════
   8. CARDS (Landingpage-Stil)
   ═══════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: border-color .2s, transform .2s;
}
.card:hover {
  border-color: var(--border-card-hover);
  transform: translateY(-3px);
}
.card-static:hover {
  transform: none;
  border-color: var(--border-subtle);
}
.card-title {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .93rem;
  color: var(--text-heading);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   9. KPI CARDS
   ═══════════════════════════════════════════════════════════════ */

.kpi, .kpi-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 11px 13px;
}
.kpi-l, .kpi-label {
  font-size: var(--so-text-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}
.kpi-v, .kpi-value {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--text-heading);
  letter-spacing: -.4px;
}
.kpi-v.accent, .kpi-value.accent { color: var(--so-accent-hover); }

/* ═══════════════════════════════════════════════════════════════
   10. TABELLEN (Landingpage-Stil)
   ═══════════════════════════════════════════════════════════════ */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--so-text-sm);
}
.table th {
  font-size: var(--so-text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}
.table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-table);
}
.table tr:hover td {
  background: var(--bg-table-stripe);
}
.table tr:last-child td {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════
   11. PILLS / BADGES (Landingpage-Stil)
   ═══════════════════════════════════════════════════════════════ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: var(--so-text-xs);
  font-weight: 700;
}
.pill-ok   { background: var(--ok-bg); color: var(--ok-text); }
.pill-info { background: var(--info-bg); color: var(--info-text); }
.pill-warn { background: var(--warn-bg); color: var(--warn-text); }
.pill-err  { background: var(--err-bg); color: var(--err-text); }

/* ═══════════════════════════════════════════════════════════════
   12. FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-family: var(--f-body);
  font-size: var(--so-text-sm);
  color: var(--text-primary);
  transition: border-color .15s;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--so-accent-text);
  box-shadow: var(--shadow-focus);
}
input::placeholder, textarea::placeholder {
  color: var(--text-placeholder);
}
label {
  display: block;
  font-size: var(--so-text-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   13. TOASTS
   ═══════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  top: 72px;
  right: 20px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  font-size: var(--so-text-sm);
  font-weight: 500;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 400px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.toast.show {
  opacity: 1;
  pointer-events: auto;
  animation: so-slideIn .3s ease;
}
.toast-success { background: var(--ok-bg); border: 1px solid rgba(40,160,106,.25); color: var(--ok-text); }
.toast-error   { background: var(--err-bg); border: 1px solid rgba(194,48,48,.25); color: var(--err-text); }
.toast-info    { background: var(--so-accent-subtle); border: 1px solid var(--so-accent-border); color: var(--so-accent-hover); }
@keyframes so-slideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════
   14. KANBAN
   ═══════════════════════════════════════════════════════════════ */

.kanban-column {
  background: var(--kanban-col);
  border-radius: var(--r-lg);
  padding: 12px;
  min-width: 260px;
}
.kanban-column-header {
  font-size: var(--so-text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kanban-count {
  background: var(--bg-body);
  padding: 2px 8px;
  border-radius: var(--r-xs);
  font-size: var(--so-text-xs);
  color: var(--text-secondary);
}
.kanban-card {
  background: var(--kanban-card);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 6px;
  border-left: 3px solid var(--so-accent);
  cursor: grab;
  transition: border-color .15s, transform .15s;
}
.kanban-card:hover {
  transform: translateY(-1px);
  border-color: var(--so-accent-hover);
}
.kanban-card-title {
  font-size: var(--so-text-sm);
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.kanban-card-sub {
  font-size: var(--so-text-xs);
  color: var(--text-tertiary);
}

/* ═══════════════════════════════════════════════════════════════
   15. MODULE ICON (Landingpage-Stil)
   ═══════════════════════════════════════════════════════════════ */

.module-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--so-accent-subtle);
  border: 1px solid var(--so-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.module-icon svg {
  width: 22px; height: 22px;
  stroke: var(--so-accent);
  stroke-width: 1.8;
  fill: none;
}

/* ═══════════════════════════════════════════════════════════════
   16. COCKPIT (Startseite)
   ═══════════════════════════════════════════════════════════════ */

.cockpit { max-width: 1100px; margin: 0 auto; }

.cockpit-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.6px;
  margin-bottom: 4px;
}
.cockpit-subtitle {
  font-size: var(--so-text-sm);
  color: var(--text-secondary);
}

.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 36px;
}

.cockpit-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 22px;
  text-decoration: none;
  transition: border-color .2s, transform .2s;
  cursor: pointer;
  display: block;
}
.cockpit-card:hover {
  border-color: var(--border-card-hover);
  transform: translateY(-3px);
}

.cockpit-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--so-accent-subtle);
  border: 1px solid var(--so-accent-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.cockpit-card-icon svg {
  width: 22px; height: 22px;
  stroke: var(--so-accent);
  stroke-width: 1.8;
  fill: none;
}

.cockpit-card-name {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .93rem;
  color: var(--text-heading);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.live {
  font-size: var(--so-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--ok-bg);
  color: var(--ok-text);
  padding: 1px 6px;
  border-radius: 10px;
  font-family: var(--f-body);
}

.cockpit-card-features {
  list-style: none;
}
.cockpit-card-features li {
  font-size: 12.5px;
  color: var(--text-tertiary);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cockpit-card-features li::before {
  content: '\2014';
  color: var(--so-accent-text);
  font-size: var(--so-text-xs);
}

/* ═══════════════════════════════════════════════════════════════
   17. BORDERS & HR
   ═══════════════════════════════════════════════════════════════ */

hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(63,168,160,.18), transparent);
  margin: 24px 0;
}

/* ═══════════════════════════════════════════════════════════════
   18. RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .app-content, .so-main {
    padding: 72px 16px 24px;
  }
  .app-content.has-tabs {
    padding-top: 116px;
  }
  .cockpit-grid {
    grid-template-columns: 1fr;
  }
  .header-username { display: none; }
  .header-sep, .header-module { display: none; }
  .app-header { padding: 0 16px; }
}

@media (max-width: 1024px) {
  .cockpit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   19. UTILITIES
   ═══════════════════════════════════════════════════════════════ */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }

.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

.text-white { color: var(--text-heading); }
.text-muted { color: var(--text-secondary); }
.text-dim { color: var(--text-tertiary); }
.text-teal { color: var(--so-accent-text); }
.text-ok { color: var(--ok); }
.text-warn { color: var(--warn); }
.text-err { color: var(--err); }
.text-sm { font-size: var(--so-text-xs); }
.text-xs { font-size: var(--so-text-xs); }
.font-head { font-family: var(--f-head); }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; letter-spacing: .1em; }

/* Hide old sidebar elements if still present */
.so-sidebar { display: none !important; }
.so-sidebar-overlay { display: none !important; }
.so-hamburger { display: none !important; }

/* ── Hide old navigation elements ── */
.ds-header,
#ottsen-header,
header.hdr,
.ds-header-extra-css {
  display: none !important;
}
nav.sidebar.LEGACY-HIDDEN {
  display: none !important;
}
#sidebarBackdrop.LEGACY-HIDDEN {
  display: none !important;
}

/* ── PRINT STYLES ── */
@media print {
  /* Ausblenden: Navigation, Aktionen, Chat, Toasts */
  .so-sidebar, .so-header, .so-page-actions, .so-fab, .so-toast,
  .so-mobile-menu, .so-bottomsheet, .so-modal-overlay,
  .so-notification-bell, .so-support-chat, .so-filters,
  .so-cmd-search, .so-chat-widget, .so-bottom-sheet,
  .so-btn, button:not(.print-keep), .no-print { display: none !important; }

  /* Layout: Kein Seitenrand, weißer Hintergrund */
  .so-content { margin-left: 0 !important; padding: 16px !important; padding-top: 0 !important; max-width: 100% !important; }
  body, .so-content, .so-card, .so-kpi, .so-table-wrapper, .so-page { background: #fff !important; color: #000 !important; }

  /* Tabellen: Saubere Rahmen */
  .so-table th, .so-table td { border: 1px solid #ccc !important; color: #000 !important; padding: 6px 8px !important; }
  .so-table thead { background: #f0f0f0 !important; }
  .so-table { width: 100% !important; }

  /* KPI-Karten */
  .so-kpi { border: 1px solid #ddd !important; }
  .so-kpi-value, .so-kpi-label, .so-page-title, .so-page-subtitle, h1, h2, h3, label { color: #000 !important; }

  /* Pills/Tags */
  .so-pill, .so-badge, .so-tag { border: 1px solid #999 !important; color: #000 !important; background: #f5f5f5 !important; }

  /* Schatten/Effekte entfernen */
  * { box-shadow: none !important; text-shadow: none !important; }

  /* Links: Nicht als URL anzeigen */
  a { color: #000 !important; text-decoration: none !important; }
  a[href]:after { content: none !important; }

  /* Print-Header anzeigen, Card-Liste ausblenden */
  .print-header { display: block !important; }
  .so-card-list { display: none !important; }
  .so-table-wrapper { display: block !important; overflow: visible !important; }

  /* Seitenumbrüche vermeiden */
  .so-card, .so-kpi, tr, .detail-section { page-break-inside: avoid; break-inside: avoid; }
  .so-page-title { page-break-after: avoid; break-after: avoid; }
  h2, h3 { page-break-after: avoid; break-after: avoid; }

  /* Tabs: Alle anzeigen */
  .so-tab-content { display: block !important; }
  .so-tabs { display: none !important; }

  /* Formulare lesbar machen */
  .so-input, .so-select, textarea, input, select {
    border: 1px solid #ccc !important; background: #fff !important; color: #000 !important;
    -webkit-appearance: none !important;
  }

  /* Seiten-Setup */
  @page { margin: 15mm; size: A4; }
}

/* ═══════════════════════════════════════════════════════════════
   20. THEME TOGGLE JS SUPPORT
   ═══════════════════════════════════════════════════════════════ */

/* ── Reduced Motion (Phase 6.2) ── */
@media (prefers-reduced-motion: reduce) {
  .so-btn,
  .so-tab,
  .so-toggle-btn,
  .so-sidebar-link,
  .so-skeleton,
  .so-badge,
  .so-alert,
  .so-module-dropdown-trigger,
  .so-cmd-item,
  [class*="so-"] {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
  .so-skeleton::after {
    animation: none;
  }
}