/**
 * ============================================
 * Dashboard CSS Variables
 * ZENTRALE CSS-Variablen für das gesamte Dashboard
 * Konsolidiert aus theme-variables.css, dashboard-variables.css, 
 * meddevice-theme.css und theme-design-system.css
 * ============================================
 */

:root {
    /* === MEDDEVICE COLOR SYSTEM === */
    /* medDevice Primärfarbe (Standard: #0F78A5) */
    --md-blue: #0F78A5;
    --md-blue-dark: #0A5573;
    --md-blue-light: #3D99C1;
    --md-blue-hover: #1487B8;
    
    /* Legacy Support (für Kompatibilität) */
    --primary: var(--md-blue);
    --primary-light: var(--md-blue-light);
    --primary-dark: var(--md-blue-dark);
    --primary-hover: var(--md-blue-hover);
    --meddevice-primary: var(--md-blue);
    --meddevice-primary-dark: var(--md-blue-dark);

    /* Teal/Nav Colors */
    --md-teal: #26404a;
    --md-teal-light: #34545f;
    --md-nav-dark: #34495E;
    --meddevice-nav-bg: var(--md-nav-dark);

    /* Harmonische Grautöne (abgestimmt auf medDevice-Blau) */
    --md-bg: #F8FAFB;
    --md-white: #FFFFFF;
    --md-surface: #F5F7FA;
    --md-bg-secondary: #FFFFFF;
    --md-bg-tertiary: #FAFBFC;
    --md-text: #2C3E50;
    --md-text-light: #6B7C93;
    --md-text-muted: #6B7C93;
    --md-text-secondary: #586069;
    --md-border: #E4E9F0;
    --md-border-light: #EAECEF;
    --md-border-dark: #D1D5DA;
    --md-hover: #F6F8FA;
    --md-gray-50: #F8FAFB;
    --md-gray-100: #F1F4F8;
    --md-gray-200: #E4E9F0;
    --md-gray-300: #C5D0DC;
    --md-gray-500: #6B7C93;
    --md-gray-700: #44566C;
    --md-gray-900: #2C3E50;
    
    /* Legacy Support */
    --bg-primary: var(--md-bg);
    --bg-secondary: var(--md-white);
    --bg-tertiary: var(--md-bg-tertiary);
    --surface: var(--md-white);
    --surface-hover: var(--md-hover);
    --surface-active: #EEF1F4;
    --text-primary: var(--md-text);
    --text-secondary: var(--md-text-secondary);
    --text-muted: var(--md-text-muted);
    --text-disabled: #959da5;
    --border: var(--md-border);
    --border-light: var(--md-border-light);
    --border-dark: var(--md-border-dark);
    --meddevice-bg: var(--md-bg);
    --meddevice-card-bg: var(--md-white);
    --meddevice-text: var(--md-text);
    --meddevice-text-muted: var(--md-text-muted);
    --meddevice-hover-bg: var(--md-hover);
    --meddevice-border: var(--md-border);
    --meddevice-header-bg: var(--md-white);

    /* Akzentfarben */
    --md-success: #27AE60;
    --md-warning: #F39C12;
    --md-danger: #E74C3C;
    --md-info: #17a2b8;
    --md-primary: #2D7FF9;
    --md-accent: #764ba2;
    
    /* Legacy Support */
    --success: var(--md-success);
    --warning: var(--md-warning);
    --danger: var(--md-danger);
    --info: var(--md-info);

    /* Buttons */
    --btn-primary: #10B981;
    --btn-secondary: #EF4444;

    /* Spacing */
    --md-spacing-xs: 4px;
    --md-spacing-sm: 8px;
    --md-spacing-md: 16px;
    --md-spacing-lg: 24px;
    --md-spacing-xl: 32px;
    --spacing-xs: var(--md-spacing-xs);
    --spacing-sm: var(--md-spacing-sm);
    --spacing-md: var(--md-spacing-md);
    --spacing-lg: var(--md-spacing-lg);
    --spacing-xl: var(--md-spacing-xl);
    --spacing-xxl: 48px;

    /* Border Radius */
    --md-radius-sm: 4px;
    --md-radius-md: 8px;
    --md-radius-lg: 12px;
    --radius-xs: 2px;
    --radius-sm: var(--md-radius-sm);
    --radius-md: var(--md-radius-md);
    --radius-lg: var(--md-radius-lg);
    --radius-xl: var(--md-radius-lg);
    --radius-round: 50%;

    /* Shadows */
    --md-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --md-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --md-shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: var(--md-shadow-sm);
    --shadow-md: var(--md-shadow-md);
    --shadow-lg: var(--md-shadow-lg);
    --shadow-xl: 0 8px 24px rgba(0,0,0,0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    --font-family-mono: 'SF Mono', 'Consolas', 'Monaco', monospace;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Fixed header heights (header1 + header2) */
    --md-fixed-header-height: 110px;
    --md-header1-height: 56px;
    --md-header2-height: 54px;

    /* Z-Index scale */
    --md-z-header1: 1030;
    --md-z-header2: 1029;
    --md-z-dropdown: 9999;
    --md-z-sidebar-overlay: 9999;
    --md-z-sidebar: 10000;
    --md-z-praxis-sidebar: 1000;
    --md-z-praxis-sidebar-mobile: 1050;
    --md-z-praxis-sidebar-overlay: 1049;

    /* Table sticky header offset */
    --md-table-sticky-header-offset: 38px;
}

[data-theme="dark"] {
    /* Dark Mode - abgestimmt auf medDevice-Blau */
    --md-bg: #1A1F2E;
    --md-white: #252B3D;
    --md-surface: #2D3748;
    --md-bg-secondary: #161b22;
    --md-bg-tertiary: #0d1117;
    --md-text: #E8ECF2;
    --md-text-light: #9BA5B7;
    --md-text-muted: #8b949e;
    --md-text-secondary: #8b949e;
    --md-border: #3A4255;
    --md-border-light: #30363d;
    --md-border-dark: #21262d;
    --md-hover: rgba(88, 166, 255, 0.1);
    --md-nav-dark: #1F2533;
    --md-gray-50: #252B3D;
    --md-gray-100: #2A3042;
    --md-gray-200: #3A4255;
    --md-gray-300: #4A5568;
    --md-gray-500: #9BA5B7;
    --md-gray-700: #C5CFE0;
    --md-gray-900: #E8ECF2;
    
    /* Legacy Support */
    --bg-primary: var(--md-bg);
    --bg-secondary: var(--md-bg-secondary);
    --bg-tertiary: var(--md-bg-tertiary);
    --surface: var(--md-white);
    --surface-hover: var(--md-hover);
    --surface-active: #21262d;
    --text-primary: var(--md-text);
    --text-secondary: var(--md-text-secondary);
    --text-muted: var(--md-text-muted);
    --text-disabled: #6e7681;
    --border: var(--md-border);
    --border-light: var(--md-border-light);
    --border-dark: var(--md-border-dark);
    --meddevice-nav-bg: #0f1419;
    --meddevice-header-bg: #161b22;
    --meddevice-text-light: #FFFFFF;
    --meddevice-bg: var(--md-bg);
    --meddevice-card-bg: var(--md-white);
    --meddevice-text: var(--md-text);
    --meddevice-text-muted: var(--md-text-muted);
    --meddevice-hover-bg: var(--md-hover);
    --meddevice-border: var(--md-border);
    
    /* Adjusted colors for dark mode */
    --md-blue: #58a6ff;
    --md-blue-light: #79c0ff;
    --md-blue-dark: #1f6feb;
    --md-teal: #1a2732;
    --md-teal-light: #2d3f4a;
    --primary: var(--md-blue);
    --primary-light: var(--md-blue-light);
    --primary-dark: var(--md-blue-dark);
    --meddevice-primary: var(--md-blue);
    --meddevice-primary-dark: var(--md-blue-dark);
    
    /* Shadows für Dark Mode */
    --md-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --md-shadow-md: 0 2px 8px rgba(0,0,0,0.4);
    --md-shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm: var(--md-shadow-sm);
    --shadow-md: var(--md-shadow-md);
    --shadow-lg: var(--md-shadow-lg);
    --shadow-xl: 0 8px 24px rgba(0,0,0,0.6);
    
    /* Buttons mit Schleier für Dark Mode */
    --btn-primary: rgba(16, 185, 129, 0.88);
    --btn-secondary: rgba(239, 68, 68, 0.88);
}