/* ==============================================================================
   CSS VARIABLES - LIGHT THEME (Default)
   ============================================================================== */
:root {
    /* Base Colors */
    --main-bg-color: rgba(255, 255, 255, 1);
    --main-shaded-bg-color: rgba(255, 255, 255, 0.95);
    --main-text-color: rgba(0, 0, 0, 0.87);
    --main-text-color-secondary: #64748b;
    --main-text-color-muted: #94a3b8;
    --main-border-color: rgba(224, 224, 224, 1);
    --main-accent-color: rgba(44, 180, 255, 1);
    --main-accent-hover-color: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    --main-accent-not-color: rgba(255, 255, 255, 1);
    --main-disabled-color: rgba(148, 148, 148, .87);
    --primary-workspace-color: rgba(244, 244, 244, 1);
    --widget-fill-color: rgba(255, 255, 255, 1);
    --main-hover-bg-color: rgba(0, 0, 0, 0.04);
    --main-selection-bg-color: rgba(44, 180, 255, 0.12);
    --main-subtext-color: #64748b;
    /*BaseHealth Color*/
    --main-health-green: #86cc00;
    --main-health-yellow: #ff9c22;
    --main-health-orange: #ff5722;
    --main-health-red: #d10b0b;
    /* Node/System Colors */
    --node-fill-color: rgba(255, 255, 255, 1);
    --node-header-color: rgba(255, 87, 34, 1);
    --node-sub-header-color: rgba(0, 0, 0, 0.87);
    --node-border-color: rgba(122, 177, 215, 1);
    --node-link-color: rgba(122, 177, 215, 1);
    --node-button-icon-color: rgba(122, 177, 215, 1);
    --node-common-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
    --system-stroke-color: rgba(0, 0, 0, 0.87);
    /* Table/Grid Colors */
    --row-alt-bg: #f5f5f5;
    /* Status Colors */
    --success-color: #8bc34a;
    --warning-color: #ff5722;
    --danger-color: #f44336;
    --wifi-on-color: #86cc00;
    --wifi-of-color: gray;
    /* Theme Switch */
    --theme-switch-bg-color: #FFFFFF;
    --theme-switch-border-color: #e2e7e8;
    /* Designer Colors */
    --designer-bg-color: rgba(255, 255, 255, 1);
    --designer-accent-color: rgba(255, 87, 34, 1);
    --designer-disabled-color: rgba(148, 148, 148, .87);
    --designer-border-color: rgba(224, 224, 224, 1);
    /* Effects */
    --particle-shader-background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(244, 244, 244,1) 55%);
    --timeline-item-date-color: rgba(44, 180, 255, 1);
    --timeline-line-shadow-color: rgba(0, 0, 0, 0.25);
    --gauge-bg-color: rgba(200, 201, 208, 0.78);
    /* SVG Colors */
    --svg-symbol-color: rgba(0, 0, 0, 1);
    --svg-point-not-empty-color: #219DE2;
    --svg-point-empty-color: rgba(0, 0, 0, 0.3);
    /* ==== GLASSMORPHISM VARIABLES - LIGHT THEME ==== */
    /* Background Gradient Colors */
    --glass-gradient-blue: #4093C1;
    --glass-gradient-purple: #364E9E;
    --glass-gradient-green: #39932A;
    /* Page Background Gradient */
    --glass-page-bg: radial-gradient(ellipse 1200px 1200px at 20% 0%, rgba(64, 147, 193, 0.3) 0%, transparent 70%), radial-gradient(ellipse 1200px 1200px at 100% 0%, rgba(57, 147, 42, 0.3) 0%, transparent 70%), radial-gradient(ellipse 1200px 1200px at 50% 100%, rgba(54, 78, 158, 0.3) 0%, transparent 70%), #e8edf2;
    /* Header Gradient */
    --glass-header-bg: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 15%, rgba(64, 147, 193, 0.1) 40%, rgba(57, 147, 42, 0.1) 70%, rgba(255, 255, 255, 0.85) 100%);
    /* Panel/Container Backgrounds */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-bg-light: rgba(255, 255, 255, 0.6);
    --glass-bg-card: rgba(255, 255, 255, 0.3);
    --glass-bg-card-hover: rgba(255, 255, 255, 0.65);
    --glass-bg-card-selected: rgba(59, 130, 246, 0.1);
    --glass-bg-toolbar: rgba(255, 255, 255, 0.3);
    /* Overlay/Popup Backgrounds */
    --glass-overlay-bg: #ffffff;
    --glass-popup-bg: rgba(255, 255, 255, 0.7);
    --glass-popup-header-bg: rgba(255, 255, 255, 1);
    --glass-dropdown-bg: rgba(255, 255, 255, 0.35);
    /* Shadows */
    --glass-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1);
    --glass-shadow-card: 0px 8px 24px rgba(0, 0, 0, 0.08);
    --glass-shadow-card-hover: 0px 12px 32px rgba(0, 0, 0, 0.15);
    --glass-shadow-system-card: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-shadow-toolbar: 0px 8px 24px rgba(0, 0, 0, 0.1);
    /* Blur Values */
    --glass-blur: 40px;
    --glass-blur-light: 25px;
    --glass-blur-card: 24px;
    --glass-blur-header: 20px;
    /* Apple Glass Effect Variables */
    --glass-saturate: 180%;
    --glass-brightness: 1.05;
    --glass-noise-opacity: 0.02;
    /* Border Radius */
    --glass-radius-lg: 16px;
    --glass-radius-md: 12px;
    --glass-radius-sm: 6px;
    /* Borders */
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-light: rgba(0, 0, 0, 0.06);
    --glass-border-selected: rgba(59, 130, 246, 0.3);
    --glass-border-card: rgba(255, 255, 255, 0.4);
    /* Icon Colors */
    --icon-alarm-active: #ef4444;
    --icon-diagnosis-active: #3b82f6;
    --icon-favorite-active: #ff9c22;
    --icon-wifi-active: #86cc00;
    --icon-inactive: #94a3b8;
    --icon-weight-normal: 400;
    --icon-weight-bold: 600;
    /* Text Colors for Cards */
    --card-text-primary: #1e293b;
    --card-text-secondary: #64748b;
    /* List Item Colors */
    --list-item-hover-bg: rgba(0, 0, 0, 0.04);
    --list-item-selected-bg: #3b82f6;
    --list-item-border: rgba(0, 0, 0, 0.04);
    /* Component Shadows (Theme-aware) */
    --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 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
    /* Card Specific Variables */
    --card-border-subtle: rgba(0, 0, 0, 0.08);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    /* Chart/Timeline Variables */
    --timeline-line-gradient: linear-gradient(90deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.05) 100%);
    --tooltip-bg: #ffffff;
    --tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    --tooltip-header-bg: #f8f9fa;
    /* Drag Handle & Buttons */
    --drag-handle-bg: rgba(0, 0, 0, 0.03);
    --btn-subtle-bg: rgba(0, 0, 0, 0.05);
    /* Loading Overlay */
    --loading-overlay-bg: rgba(255, 255, 255, 0.9);
    /* CSS Custom Properties with default fallback values */
    --width: 300px;
    --height: 300px;
    --font-size: 22px;
    --font-weight: 600;
    --fore-color: red;
    --back-color: rgba(0, 0, 0, 0.15);
    --stroke-width: 25px;
    --vert-align: flex-end;
    --value: 0;
    /* JavaScript Override Variables - These are set dynamically via inline styles */
    --animation-delay: 0ms;
    --marker-color: #6c757d;
    --day-color: #6c757d;
    --segment-color: rgba(44, 180, 255, 0.6);
    /* Device Configuration status colors*/
    --success-bg-color: #e8f5e9;
    --warning-bg-color: #fff3e0;
    --info-bg-color: #e3f2fd;
    --info-color: #1565c0;
    --error-bg-color: #ffebee;
    --error-color: #c62828;
    --default-bg-color: #f5f5f5;
    --default-color: #666;
    --accent-bg-color: #fce4ec;
    --accent-color: #c2185b;
    /* Notification Timeline */
    --card-header-bg-color: rgba(255, 255, 255, 0.03);
    --card-header-hover-bg-color: rgba(255, 255, 255, 0.06);
    --card-bg-color: rgba(255, 255, 255, 0.05);
    --card-item-bg-color: rgba(255, 255, 255, 0.03);
    --event-color: #6c757d;
    --highlight-bg-color: rgba(102, 126, 234, 0.15);
    --scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
    --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.3);
    --card-item-hover-bg-color: rgba(255, 255, 255, 0.06);
    #mate-logo-dark {
        display: none;
    }

    #mate-logo-light {
        display: block;
    }
}

/* ==============================================================================
   CSS VARIABLES - DARK THEME
   ============================================================================== */
    :root.dark {
        /* Base Colors */
        --main-bg-color: rgba(0, 0, 0, 1);
        --main-shaded-bg-color: rgba(0, 0, 0, 0.95);
        --main-text-color: rgba(255, 255, 255, 1);
        --main-text-color-secondary: rgba(255, 255, 255, 0.7);
        --main-text-color-muted: rgba(255, 255, 255, 0.5);
        --main-border-color: rgba(81, 81, 89, 1);
        --main-accent-color: rgba(44, 180, 255, 1);
        --main-accent-not-color: rgba(255, 255, 255, 1);
        --main-disabled-color: rgba(148, 148, 148, .87);
        --primary-workspace-color: rgba(10, 10, 15, 1);
        --widget-fill-color: rgba(0, 0, 0, 1);
        --main-hover-bg-color: rgba(255, 255, 255, 0.08);
        --main-selection-bg-color: rgba(44, 180, 255, 0.20);
        --main-subtext-color: rgba(255, 255, 255, 0.6);
        /*BaseHealth Color*/
        --main-health-green: #86cc00;
        --main-health-yellow: #ff9c22;
        --main-health-orange: #ff5722;
        --main-health-red: #d10b0b;
        /* Node/System Colors */
        --node-fill-color: rgba(0, 0, 0, 1);
        --node-header-color: rgba(255, 87, 34, 1);
        --node-sub-header-color: rgba(255, 255, 255, 0.8);
        --node-border-color: rgba(255, 255, 255, 0.8);
        --node-link-color: rgba(255, 255, 255, 0.8);
        --node-button-icon-color: rgba(255, 255, 255, 0.8);
        --node-common-shadow: none;
        --system-stroke-color: rgba(255, 255, 255, 0.87);
        /* Table/Grid Colors */
        --row-alt-bg: #3f3f4b;
        /* Theme Switch */
        --theme-switch-bg-color: #2a2a2a;
        --theme-switch-border-color: #626262;
        /* Designer Colors */
        --designer-bg-color: rgba(54, 54, 64, 1);
        --designer-accent-color: rgba(255, 87, 34, 1);
        --designer-disabled-color: rgba(148,148,148,.87);
        --designer-border-color: rgba(81, 81, 89, 1);
        /* Effects */
        --particle-shader-background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0, 0, 0, 1) 55%);
        --gauge-bg-color: rgba(46, 47, 56, 1);
        /* SVG Colors */
        --svg-symbol-color: rgba(255, 255, 255, 0.8);
        --svg-point-not-empty-color: #219DE2;
        --svg-point-empty-color: rgba(255, 255, 255, 0.3);
        /* ==== GLASSMORPHISM VARIABLES - DARK THEME ==== */
        /* Background Gradient Colors */
        --glass-gradient-blue: #4093C1;
        --glass-gradient-purple: #364E9E;
        --glass-gradient-green: #39932A;
        /* Page Background Gradient */
        --glass-page-bg: radial-gradient(ellipse 800px 800px at 0% 15%, rgba(64, 147, 193, 0.5) 0%, transparent 60%), radial-gradient(ellipse 800px 800px at 100% 0%, rgba(57, 147, 42, 0.5) 0%, transparent 60%), radial-gradient(ellipse 800px 800px at 50% 100%, rgba(54, 78, 158, 0.45) 0%, transparent 60%), var(--main-bg-color);
        /* Header Gradient */
        --glass-header-bg: linear-gradient(to right, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.9) 15%, rgba(64, 147, 193, 0.15) 40%, rgba(57, 147, 42, 0.15) 70%, rgba(15, 23, 42, 0.9) 100%);
        /* Panel/Container Backgrounds */
        --glass-bg: rgba(255, 255, 255, 0.1);
        --glass-bg-light: rgba(255, 255, 255, 0.08);
        --glass-bg-card: rgba(255, 255, 255, 0.08);
        --glass-bg-card-hover: rgba(255, 255, 255, 0.12);
        --glass-bg-card-selected: rgba(255, 255, 255, 0.15);
        --glass-bg-toolbar: rgba(255, 255, 255, 0.08);
        /* Overlay/Popup Backgrounds */
        --glass-overlay-bg: #1e2228;
        --glass-popup-bg: rgba(26, 29, 35, 0.8);
        --glass-dropdown-bg: rgba(26, 29, 35, 0.8);
        --glass-popup-header-bg: #252830;
        /* Shadows */
        --glass-shadow: 0px 15px 35px rgba(0, 0, 0, 0.3);
        --glass-shadow-card: 0px 15px 35px rgba(0, 0, 0, 0.3);
        --glass-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.35);
        --glass-shadow-system-card: 0 8px 32px rgba(0, 0, 0, 0.25);
        --glass-shadow-toolbar: 0px 15px 35px rgba(0, 0, 0, 0.3);
        /* Blur Values */
        --glass-blur: 40px;
        --glass-blur-light: 25px;
        --glass-blur-card: 20px;
        --glass-blur-header: 25px;
        /* Apple Glass Effect Variables */
        --glass-saturate: 150%;
        --glass-brightness: 0.95;
        --glass-noise-opacity: 0.03;
        /* Border Radius */
        --glass-radius-lg: 6px;
        --glass-radius-md: 6px;
        --glass-radius-sm: 6px;
        /* Borders */
        --glass-border: rgba(255, 255, 255, 0.1);
        --glass-border-light: rgba(255, 255, 255, 0.05);
        --glass-border-selected: rgba(255, 255, 255, 0.15);
        --glass-border-card: rgba(255, 255, 255, 0.1);
        /* Icon Colors */
        --icon-alarm-active: #d10b0b;
        --icon-diagnosis-active: #22c1ff;
        --icon-favorite-active: #ffc107;
        --icon-wifi-active: #86cc00;
        --icon-inactive: #64748b;
        /* Text Colors for Cards */
        --card-text-primary: #ffffff;
        --card-text-secondary: rgba(255, 255, 255, 0.7);
        /* List Item Colors */
        --list-item-hover-bg: rgba(255, 255, 255, 0.1);
        --list-item-selected-bg: var(--main-accent-color);
        --list-item-border: rgba(255, 255, 255, 0.08);
        /* Component Shadows (Theme-aware) */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.35);
        --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
        /* Card Specific Variables */
        --card-border-subtle: rgba(255, 255, 255, 0.08);
        --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.3);
        /* Chart/Timeline Variables */
        --timeline-line-gradient: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.05) 100%);
        --tooltip-bg: rgba(30, 30, 40, 0.95);
        --tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        --tooltip-header-bg: rgba(0, 0, 0, 0.3);
        /* Drag Handle & Buttons */
        --drag-handle-bg: rgba(255, 255, 255, 0.05);
        --btn-subtle-bg: rgba(255, 255, 255, 0.08);
        /* Loading Overlay */
        --loading-overlay-bg: rgba(0, 0, 0, 0.85);

        #mate-logo-dark {
            display: block;
        }

        #mate-logo-light {
            display: none;
        }
    }