/* ═══════════════════════════════════════════════════════════════════════════
   VOCALIS CUSTOMER DASHBOARD v7.0
   CSS-Variablen synchronisiert mit SuperAdmin Dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ═══ Basis-Farben ═══ */
  --white: #ffffff;

  /* SPEC-103: Text-on-color tokens (always readable on colored backgrounds) */
  --text-on-accent: white;
  --text-on-primary: white;
  --text-on-error: white;
  --text-on-success: white;
  --text-on-warning: #1a1a1a;

  --accent: #00c2d1;
  --accent-hover: #00a8b5;
  --accent-light: rgba(0, 194, 209, 0.1);
  --dark: #2f3e46;
  --dark-light: #354f52;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #717a85;
  --gray-500: #5c6370;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.1);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.1);
  --error: #ef4444;
  --error-bg: rgba(239, 68, 68, 0.1);
  --purple: #8b5cf6;
  --purple-dark: #9333ea;
  --purple-bg: rgba(139, 92, 246, 0.1);
  --blue: #3b82f6;
  --blue-bg: rgba(59, 130, 246, 0.1);

  /* Semantic Glow + Light-BG Tokens (CL Sprint 2) */
  --accent-bg: rgba(0, 194, 209, 0.1);
  --accent-glow: 0 4px 20px rgba(0, 194, 209, 0.15);
  --success-glow: 0 0 8px rgba(16, 185, 129, 0.4);
  --success-bg-light: rgba(16, 185, 129, 0.05);
  --error-bg-light: rgba(239, 68, 68, 0.05);
  --error-glow: 0 0 8px rgba(239, 68, 68, 0.4);

  /* ═══ Erweiterte Farb-Varianten ═══ */
  --error-dark: #dc2626;
  --error-light-bg: #fee2e2;
  --success-light-bg: #d1fae5;
  --success-dark-text: #065f46;
  --blue-solid-bg: #eff6ff;
  --blue-border: #bfdbfe;
  --warning-light-bg: #fefce8;
  --warning-border: #fde047;
  --info-bg: #f0f9ff;
  --info-border: #bae6fd;

  /* ═══ Opacity Standards ═══ */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;

  /* ═══ Code-Block Farben (Light Mode: hell, Dark Mode: dunkel) ═══ */
  --code-bg: #f1f5f9;
  --code-text: #1e293b;
  --code-border: var(--gray-200);

  /* ═══ Semantische Hintergründe ═══ */
  --bg-primary: var(--white);
  --bg-secondary: var(--white);
  --bg-tertiary: var(--gray-50);
  --bg-hover: var(--gray-100);

  /* ═══ Semantische Textfarben ═══ */
  --text-primary: var(--dark);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-disabled: var(--gray-400);

  /* ═══ Erweiterte Farb-Varianten (SPEC-103 Token-Migration) ═══ */
  --blue-dark: #1d4ed8;
  --orange: #d97706;
  --warning-ultra-light: rgba(245, 158, 11, 0.12);

  /* ═══ Alpha-Transparenzen ═══ */
  --white-alpha-20: rgba(255, 255, 255, 0.2);
  --white-alpha-30: rgba(255, 255, 255, 0.3);
  --white-alpha-70: rgba(255, 255, 255, 0.7);
  --white-alpha-80: rgba(255, 255, 255, 0.8);
  --black-alpha-10: rgba(0, 0, 0, 0.1);
  --black-alpha-12: rgba(0, 0, 0, 0.12);
  --black-alpha-15: rgba(0, 0, 0, 0.15);
  --black-alpha-50: rgba(0, 0, 0, 0.5);
  --accent-alpha-30: rgba(0, 194, 209, 0.3);

  /* ═══ Typography Scale (Fluid: 375px → 1440px, same min as v14, +1-2px max) ═══ */
  --text-xs: clamp(9px, 0.09vw + 8.65px, 10px);
  --text-2xs: clamp(10px, 0.09vw + 9.65px, 11px);
  --text-sm: clamp(11px, 0.09vw + 10.65px, 12px);
  --text-base: clamp(12px, 0.19vw + 11.3px, 14px);
  --text-md: clamp(13px, 0.19vw + 12.3px, 15px);
  --text-lg: clamp(14px, 0.19vw + 13.3px, 16px);
  --text-xl: clamp(16px, 0.28vw + 14.9px, 19px);
  --text-2xl: clamp(18px, 0.28vw + 16.9px, 21px);
  --text-3xl: clamp(20px, 0.38vw + 18.6px, 24px);
  --text-4xl: clamp(24px, 0.38vw + 22.6px, 28px);
  --text-5xl: clamp(28px, 0.47vw + 26.2px, 33px);
  --text-6xl: clamp(32px, 0.47vw + 30.2px, 37px);

  /* ═══ Line-Height Tokens ═══ */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ═══ Letter-Spacing Tokens ═══ */
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ═══ Z-Index Scale ═══ */
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 10000;

  /* ═══ Transition Durations ═══ */
  --transition-fast: 0.15s;
  --transition-normal: 0.2s;
  --transition-slow: 0.3s;

  /* ═══ Border Radius ═══ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ═══ Shadows ═══ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 3px var(--accent-light);

  /* ═══ Spacing Scale (Fluid: 375px → 1440px, min = alte Werte) ═══ */
  --space-1: clamp(4px, 0.05vw + 3.8px, 5px);
  --space-2: clamp(6px, 0.05vw + 5.8px, 7px);
  --space-3: clamp(8px, 0.09vw + 7.7px, 9px);
  --space-4: clamp(12px, 0.09vw + 11.7px, 13px);
  --space-5: clamp(16px, 0.09vw + 15.7px, 17px);
  --space-6: clamp(20px, 0.09vw + 19.7px, 21px);
  --space-8: clamp(24px, 0.19vw + 23.3px, 26px);
  --space-10: clamp(32px, 0.19vw + 31.3px, 34px);
  --card-padding: var(--space-6);

  /* ═══ Layout ═══ */
  --sidebar-width: clamp(260px, 5vw + 240px, 300px);

  /* ═══ Aliase fuer fehlende CSS-Variablen ═══ */
  --primary: var(--accent);
  --primary-light: var(--accent-light);
  --primary-color: var(--accent);
  --danger: #dc2626;
  --red-500: #ef4444;
  --border-color: var(--gray-200);
  --border: var(--gray-200);
  --border-light: var(--gray-100);
  --info: #0ea5e9;

  /* ═══ Customer Intelligence Status-Farben (v6.5.4.15) ═══ */
  --status-open: #ef4444;
  --status-progress: #f59e0b;
  --status-waiting: #8b5cf6;
  --status-resolved: #22c55e;
  --status-closed: #6b7280;

  /* ═══ CI Priority-Farben ═══ */
  --priority-urgent: #dc2626;
  --priority-high: #f97316;
  --priority-normal: #3b82f6;
  --priority-low: #6b7280;

  /* ═══ CI Troubleshooting Board ═══ */
  --board-new: #94a3b8;
  --board-active: #fbbf24;
  --board-proven: #34d399;
  --board-top: #00c2d1;

  /* ═══ 7-Pillar Colors ═══ */
  --pillar-vertrieb: #3b82f6;
  --pillar-ki-wissen: #8b5cf6;
  --pillar-kanaele: #00c2d1;
  --pillar-automatisierung: #f59e0b;
  --pillar-marketing: #10b981;
  --pillar-personal: #f97316;
  --pillar-konto: #6b7280;

  /* ═══ Champions League Design Tokens (SPEC-052/057a) ═══ */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(12px);
  --glass-inner-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --elevation-1: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --elevation-2: 0 4px 6px -1px rgba(0,0,0,0.05), 0 10px 15px -3px rgba(0,0,0,0.08);
  --elevation-3: 0 10px 25px -5px rgba(0,0,0,0.08), 0 20px 40px -10px rgba(0,0,0,0.12);
  --glow-accent: 0 4px 14px rgba(0, 194, 209, 0.15);
  --gradient-revenue: linear-gradient(135deg, #059669, #10b981);

  /* ═══ Champions League — Easing Functions (SPEC-057/060) ═══ */
  /* --spring-smooth: subtle overshoot for physical feel (transforms, scales) */
  /* --ease-out-expo: fast start, gentle deceleration (opacity, colors, tab switches) */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);

  /* ═══ Champions League — 5-Layer Ahlin Shadows (Tiefenwahrnehmung) ═══ */
  --shadow-ahlin-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-ahlin-2: 0 2px 4px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-ahlin-3: 0 4px 8px rgba(0,0,0,0.04), 0 6px 12px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.01);
  --shadow-ahlin-4: 0 8px 16px rgba(0,0,0,0.04), 0 12px 24px rgba(0,0,0,0.03), 0 4px 8px rgba(0,0,0,0.02), 0 2px 4px rgba(0,0,0,0.01), 0 1px 2px rgba(0,0,0,0.01);
  --shadow-ahlin-5: 0 16px 32px rgba(0,0,0,0.05), 0 24px 48px rgba(0,0,0,0.03), 0 8px 16px rgba(0,0,0,0.02), 0 4px 8px rgba(0,0,0,0.01), 0 2px 4px rgba(0,0,0,0.01);

  /* ═══ Champions League — Fluid Typography ═══ */
  --text-page-title: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  --text-page-subtitle: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  --text-stat-value: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);

  /* ═══ Champions League — Animation Durations ═══ */
  --duration-enter: 0.35s;
  --duration-exit: 0.2s;
  --duration-stagger: 60ms;

}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE - Theme Variables Override
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Basis-Farben invertiert */
  --white: #1a1f26;
  --dark: #f1f5f9;
  --dark-light: #e2e8f0;

  /* Grautöne invertiert (vollständig für Dark Mode) */
  --gray-50: #0f1419;
  --gray-100: #1a1f26;
  --gray-200: #2f3845;
  --gray-300: #475569;
  --gray-400: #64748b;
  --gray-500: #94a3b8;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;

  /* Semantische Hintergründe */
  --bg-primary: #0f1419;
  --bg-secondary: #1a1f26;
  --bg-tertiary: #252b35;
  --bg-hover: #2f3845;

  /* Semantische Textfarben */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-disabled: #64748b;

  /* SPEC-103: Text-on-color tokens (theme-safe for buttons/badges on colored bg) */
  --text-on-accent: white;
  --text-on-primary: white;
  --text-on-error: white;
  --text-on-success: white;
  --text-on-warning: #1a1a1a;

  /* Accent bleibt (guter Kontrast) */
  --accent: #00c2d1;
  --accent-hover: #22d3ee;
  --accent-light: rgba(0, 194, 209, 0.15);

  /* Status-Farben (leicht heller für Dark Mode) */
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.15);
  --success-light-bg: rgba(52, 211, 153, 0.2);
  --success-dark-text: #34d399;
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.15);
  --error: #f87171;
  --error-bg: rgba(248, 113, 113, 0.15);
  --error-light-bg: rgba(248, 113, 113, 0.2);
  --error-dark: #f87171;

  /* Semantic Glow + Light-BG Tokens (Dark Mode) */
  --accent-bg: rgba(0, 194, 209, 0.12);
  --accent-glow: 0 4px 24px rgba(0, 194, 209, 0.2);
  --success-glow: 0 0 10px rgba(52, 211, 153, 0.5);
  --success-bg-light: rgba(52, 211, 153, 0.08);
  --error-bg-light: rgba(248, 113, 113, 0.08);
  --error-glow: 0 0 10px rgba(248, 113, 113, 0.5);

  /* SPEC-103 Token-Migration (Dark Mode) */
  --blue-dark: #60a5fa;
  --orange: #fb923c;
  --warning-ultra-light: rgba(251, 191, 36, 0.15);
  --accent-alpha-30: rgba(0, 194, 209, 0.3);

  /* Purple/Blue (leicht heller) */
  --purple: #a78bfa;
  --purple-dark: #c4b5fd;
  --purple-bg: rgba(167, 139, 250, 0.15);
  --blue: #60a5fa;
  --blue-bg: rgba(96, 165, 250, 0.15);
  --blue-solid-bg: rgba(96, 165, 250, 0.12);
  --blue-border: rgba(96, 165, 250, 0.4);
  --warning-light-bg: rgba(251, 191, 36, 0.15);
  --warning-border: rgba(251, 191, 36, 0.4);
  --info-bg: rgba(14, 165, 233, 0.1);
  --info-border: rgba(14, 165, 233, 0.3);

  /* Code-Block Farben (dunkel im Dark Mode) */
  --code-bg: #0f172a;
  --code-text: #e2e8f0;
  --code-border: #475569;

  /* Shadows (stärker für Dark Mode) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.7);
  --shadow-focus: 0 0 0 3px rgba(0, 194, 209, 0.3);

  /* ═══ CI Status-Farben (Dark Mode - heller) ═══ */
  --status-open: #f87171;
  --status-progress: #fbbf24;
  --status-waiting: #a78bfa;
  --status-resolved: #34d399;
  --status-closed: #94a3b8;

  /* CI Priority-Farben (Dark Mode) */
  --priority-urgent: #f87171;
  --priority-high: #fb923c;
  --priority-normal: #60a5fa;
  --priority-low: #94a3b8;

  /* CI Troubleshooting Board (Dark Mode) */
  --board-new: #cbd5e1;
  --board-active: #fcd34d;
  --board-proven: #4ade80;
  --board-top: #22d3ee;

  /* ═══ 7-Pillar Colors (Dark Mode - leicht heller) ═══ */
  --pillar-vertrieb: #60a5fa;
  --pillar-ki-wissen: #a78bfa;
  --pillar-kanaele: #22d3ee;
  --pillar-automatisierung: #fbbf24;
  --pillar-marketing: #34d399;
  --pillar-personal: #fb923c;
  --pillar-konto: #94a3b8;

  /* Champions League (Dark Mode) */
  --glass-bg: rgba(30, 35, 45, 0.8);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-inner-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  --elevation-1: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);
  --elevation-2: 0 4px 6px -1px rgba(0,0,0,0.25), 0 10px 15px -3px rgba(0,0,0,0.2);
  --elevation-3: 0 10px 25px -5px rgba(0,0,0,0.3), 0 20px 40px -10px rgba(0,0,0,0.25);
  --glow-accent: 0 4px 14px rgba(0, 194, 209, 0.2);
  --gradient-revenue: linear-gradient(135deg, #059669, #34d399);

  /* 5-Layer Ahlin Shadows (Dark Mode — stärkere Opazität) */
  --shadow-ahlin-1: 0 1px 2px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-ahlin-2: 0 2px 4px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-ahlin-3: 0 4px 8px rgba(0,0,0,0.15), 0 6px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-ahlin-4: 0 8px 16px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-ahlin-5: 0 16px 32px rgba(0,0,0,0.2), 0 24px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03);

  /* Aliase (Dark Mode) */
  --primary: var(--accent);
  --primary-light: var(--accent-light);
  --primary-color: var(--accent);
  --danger: #f87171;
  --red-500: #f87171;
  --border-color: var(--gray-200);
  --border: var(--gray-200);
  --border-light: var(--gray-100);
  --info: #38bdf8;

}

/* Dark Mode - Component Overrides */
[data-theme="dark"] .trial-banner {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.15) 100%);
  border-color: var(--warning);
}
[data-theme="dark"] .trial-banner .trial-text,
[data-theme="dark"] .trial-banner .trial-days {
  color: var(--warning);
}
[data-theme="dark"] .trial-banner.critical {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(248, 113, 113, 0.15) 100%);
  border-color: var(--error);
}
[data-theme="dark"] .trial-banner.critical .trial-text,
[data-theme="dark"] .trial-banner.critical .trial-days {
  color: var(--error);
}
/* emailVerifyBanner dark mode → see main.css */

/* ═══ GRADIENT & COMPONENT VARIABLES ═══ */
:root {
  /* Gradient Backgrounds (Light Mode) */
  --gradient-info: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%);
  --gradient-success: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  --gradient-warning: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
  --gradient-error: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  --gradient-info-blue: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-light) 0%, var(--white) 100%);
  --gradient-subtle: linear-gradient(to bottom, var(--gray-50), var(--white));
  --gradient-fade: linear-gradient(transparent, var(--bg-secondary));
  --scrollbar-thumb: var(--gray-300);
  --overlay-bg: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] {
  /* Gradient Backgrounds (Dark Mode) */
  --gradient-info: linear-gradient(135deg, rgba(0, 194, 209, 0.15) 0%, rgba(52, 211, 153, 0.15) 100%);
  --gradient-success: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%);
  --gradient-warning: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(251, 191, 36, 0.15) 100%);
  --gradient-error: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(248, 113, 113, 0.15) 100%);
  --gradient-info-blue: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-secondary) 100%);
  --gradient-subtle: linear-gradient(to bottom, var(--bg-tertiary), var(--bg-secondary));
  --gradient-fade: linear-gradient(transparent, var(--bg-secondary));
  --scrollbar-thumb: var(--gray-500);
  --overlay-bg: rgba(0, 0, 0, 0.7);
}