@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ====== BASE CSS VARIABLES (Default - Majesty Theme Light) ====== */
:root {
    /* Border Radius */
    --border-radius-xs: 0.125rem; /* 2px */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem; /* 8px */
    --border-radius-lg: 0.75rem; /* 12px */
    --border-radius-xl: 1rem; /* 16px */
    --border-radius-2xl: 1.5rem; /* 24px */
    --border-radius-pill: 9999px;
    /* Base RGB Values for rgba functions */
    --primary-rgb: 183, 60, 54; /* Reddish-brown */
    --secondary-rgb: 238, 185, 54; /* Gold */
    --success-rgb: 12, 173, 122;
    --danger-rgb: 229, 57, 53;
    --warning-rgb: 245, 166, 35;
    --info-rgb: 25, 118, 210;
    --text-secondary-rgb: 108, 90, 71;
    /* Additional RGB values */
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 252, 250, 247;
    --border-divider-rgb: 233, 227, 215;
    --info-light-rgb: 25, 118, 210;
    --success-light-rgb: 12, 173, 122;
    --warning-light-rgb: 245, 166, 35;
    --danger-light-rgb: 229, 57, 53;
    /* Primary Brand Colors - Reddish Brown */
    --primary: #b73c36;
    --primary-hover: #a33630;
    --primary-light: rgba(183, 60, 54, 0.1);
    --primary-lighter: rgba(183, 60, 54, 0.05);
    --primary-color: #b73c36;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #b73c36, #a33630);
    /* Secondary color - Gold */
    --secondary: #eeb936;
    --secondary-hover: #dba82e;
    --secondary-light: rgba(238, 185, 54, 0.1);
    --secondary-gradient: linear-gradient(90deg, #eeb936, #dba82e);
    /* Success Colors */
    --success: #0cad7a;
    --success-hover: #0a9667;
    --success-light: rgba(12, 173, 122, 0.1);
    --success-color: #0cad7a;
    --success-bg: rgba(12, 173, 122, 0.1);
    --success-border-light: rgba(12, 173, 122, 0.2);
    --success-gradient: linear-gradient(90deg, #0cad7a, #0a9667);
    /* Warning Colors */
    --warning: #f5a623;
    --warning-hover: #e09612;
    --warning-light: rgba(245, 166, 35, 0.1);
    --warning-gradient: linear-gradient(90deg, #f5a623, #e09612);
    /* Danger Colors */
    --danger: #e53935;
    --danger-hover: #d32f2f;
    --danger-light: rgba(229, 57, 53, 0.1);
    --danger-color: #e53935;
    --danger-bg: rgba(229, 57, 53, 0.1);
    --danger-border-light: rgba(229, 57, 53, 0.2);
    --danger-gradient: linear-gradient(90deg, #e53935, #d32f2f);
    /* Info Colors */
    --info: #1976d2;
    --info-hover: #1565c0;
    --info-light: rgba(25, 118, 210, 0.1);
    --info-gradient: linear-gradient(90deg, #1976d2, #1565c0);
    /* Status Indicators */
    --status-online: #0cad7a;
    --status-stale: #f5a623;
    --status-offline: #e53935;
    --status-online-bg: rgba(12, 173, 122, 0.15);
    --status-stale-bg: rgba(245, 166, 35, 0.15);
    --status-offline-bg: rgba(229, 57, 53, 0.15);
    /* Scale Indicators */
    --scale-online: #0cad7a;
    --scale-stale: #f5a623;
    --scale-offline: #e53935;
    --scale-online-bg: rgba(12, 173, 122, 0.15);
    --scale-stale-bg: rgba(245, 166, 35, 0.15);
    --scale-offline-bg: rgba(229, 57, 53, 0.15);
    /* Value indicators */
    --positive-value: var(--success);
    --negative-value: var(--danger);
    /* Neutral Backgrounds */
    --body-bg: #f8f5f0; /* Warm off-white */
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #fcfaf7; /* Very light tan */
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #fcfaf7;
    /* Text Colors */
    --text-primary: #433327; /* Dark brown */
    --text-secondary: #6c5a47; /* Medium brown */
    --text-muted: #a39586; /* Light brown */
    --text-light: #cfc8c0; /* Very light brown */
    --text-on-primary: #ffffff;
    --placeholder-color: #a39586;
    /* Borders */
    --border-color: rgba(183, 60, 54, 0.15);
    --border-light: rgba(183, 60, 54, 0.08);
    --border-divider: #e9e3d7; /* Light tan */
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(67, 51, 39, 0.05);
    --shadow-sm: 0 2px 4px rgba(67, 51, 39, 0.07);
    --shadow-md: 0 4px 8px rgba(67, 51, 39, 0.1);
    --shadow-lg: 0 8px 16px rgba(67, 51, 39, 0.12);
    --shadow-xl: 0 12px 24px rgba(67, 51, 39, 0.15);
    --shadow-focus: 0 0 0 3px rgba(238, 185, 54, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Animation */
    --transition-faster: 100ms;
    --transition-fast: 150ms;
    --transition-normal: 250ms;
    --transition-slow: 300ms;
    --transition-slower: 500ms;
    --animation-timing: 0.2s;
    --hover-transition: all 0.25s ease;
    --card-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hover-scale: scale(1.05);
    --live-gradient: linear-gradient(135deg, rgba(183, 60, 54, 0.9), rgba(238, 185, 54, 0.9));
    /* Animation durations */
    --animation-fast: 0.2s;
    --animation-normal: 0.3s;
    --animation-slow: 0.5s;
    --animation-slower: 0.8s;
    /* UI Element States */
    --focus-ring: rgba(238, 185, 54, 0.25);
    --overlay-bg: rgba(67, 51, 39, 0.45);
    /* Focus states */
    --focus-offset: 2px;
    --focus-width: 3px;
    /* Scrollbar */
    --scroll-thumb: #d9d9d9;
    --scroll-thumb-hover: #b0b0b0;
    /* Table Colors */
    --table-header-bg: rgba(238, 185, 54, 0.1);
    --table-striped-bg: rgba(183, 60, 54, 0.02);
    --table-hover-bg: rgba(183, 60, 54, 0.04);
    --table-border-color: var(--border-divider);
    /* Bootstrap Table compatibility */
    --bs-table-striped-bg: rgba(183, 60, 54, 0.02);
    --bs-table-hover-bg: rgba(183, 60, 54, 0.04);
    --bs-table-border-color: var(--border-divider);
    /* Navigation Colors */
    --nav-hover: rgba(183, 60, 54, 0.05);
    --nav-active: rgba(183, 60, 54, 0.1);
    /* Typography */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    /* Spacing */
    --spacing-0: 0;
    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-3: 0.75rem; /* 12px */
    --spacing-4: 1rem; /* 16px */
    --spacing-5: 1.25rem; /* 20px */
    --spacing-6: 1.5rem; /* 24px */
    --spacing-8: 2rem; /* 32px */
    --spacing-10: 2.5rem; /* 40px */
    --spacing-12: 3rem; /* 48px */
    --spacing-16: 4rem; /* 64px */
    --spacing-20: 5rem; /* 80px */
    --spacing-24: 6rem; /* 96px */
    /* Z-index layers */
    --z-negative: -1;
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-sidebar: 1300;
    --z-drawer: 1400;
    --z-modal-backdrop: 1500;
    --z-modal: 1600;
    --z-popover: 1700;
    --z-tooltip: 1800;
    --z-toast: 1900;
    /* Layout variables */
    --header-height: 70px;
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 80px;
    --content-max-width: 1600px;
    /* Compact mode variables */
    --compact-row-height: 48px;
    --compact-grid-gap: 2px;
    --compact-font-size: 0.75rem;
    --compact-padding: 0.75rem;
    /* Mobile breakpoints for consistent responsive design */
    --mobile-xs: 400px;
    --mobile-sm: 576px;
    --mobile-md: 768px;
    --tablet: 992px;
    --desktop: 1200px;
    --desktop-lg: 1400px;
    --desktop-xl: 1600px;
    /* Touch target sizes for mobile */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    /* Mobile-optimized spacing */
    --mobile-spacing-xs: 0.375rem; /* 6px */
    --mobile-spacing-sm: 0.5rem; /* 8px */
    --mobile-spacing-md: 0.75rem; /* 12px */
    --mobile-spacing-lg: 1rem; /* 16px */
    /* Mobile font sizes */
    --mobile-font-xs: 0.625rem; /* 10px */
    --mobile-font-sm: 0.7rem; /* 11.2px */
    --mobile-font-base: 0.875rem; /* 14px */
    --mobile-font-lg: 1rem; /* 16px */
    /* Loader specific */
    --loader-size: 80px;
    --loader-size-sm: 48px;
    --loader-size-xs: 32px;
    /* Border radius for mobile */
    --mobile-radius-sm: 4px;
    --mobile-radius-md: 8px;
    --mobile-radius-lg: 12px;

    --scale-header-height: 80px;
    --scale-gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    --scale-gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-hover) 100%);
    --scale-gradient-warning: linear-gradient(135deg, var(--warning) 0%, var(--warning-hover) 100%);
    --scale-gradient-danger: linear-gradient(135deg, var(--danger) 0%, var(--danger-hover) 100%);
    --scale-gradient-info: linear-gradient(135deg, var(--info) 0%, var(--info-hover) 100%);
    --scale-transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --scale-transition-bounce: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    --scale-shadow-soft: 0 2px 20px rgba(0, 0, 0, 0.08);
    --scale-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
    --scale-shadow-glow: 0 4px 20px rgba(var(--primary-rgb), 0.25);

        --card-hover-transform: translateY(-8px) scale(1.02);
    --primary-glow: 0 20px 40px rgba(var(--primary-rgb), 0.3);
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* ====== THEME 1: MAJESTY DARK (Original Dark Theme) ====== */
.theme-majesty-dark {
    /* RGB Values for dark mode */
    --content-bg-rgb: 35, 26, 22;
    --subtle-bg-rgb: 47, 37, 32;
    --border-divider-rgb: 61, 47, 36;
    --info-light-rgb: 41, 182, 246;
    --success-light-rgb: 16, 222, 163;
    --warning-light-rgb: 255, 193, 7;
    --danger-light-rgb: 244, 67, 54;
    /* Primary Color - Brightened for dark mode */
    --primary: #e04a43;
    --primary-hover: #cc3c36;
    --primary-light: rgba(224, 74, 67, 0.15);
    --primary-lighter: rgba(224, 74, 67, 0.08);
    --primary-color: #e04a43;
    --primary-gradient: linear-gradient(135deg, #e04a43, #cc3c36);
    /* Secondary Color - Brighter gold */
    --secondary: #ffc940;
    --secondary-hover: #f0b730;
    --secondary-light: rgba(255, 201, 64, 0.2);
    --secondary-gradient: linear-gradient(90deg, #ffc940, #f0b730);
    /* Success Colors */
    --success: #10dea3;
    --success-hover: #0cc490;
    --success-light: rgba(16, 222, 163, 0.15);
    --success-color: #10dea3;
    --success-bg: rgba(16, 222, 163, 0.12);
    --success-border-light: rgba(16, 222, 163, 0.25);
    --success-gradient: linear-gradient(90deg, #10dea3, #0cc490);
    /* Backgrounds */
    --body-bg: #1a1310;
    --sidebar-bg: #231a16;
    --content-bg: #231a16;
    --subtle-bg: #2f2520;
    --modal-bg: #231a16;
    --dropdown-bg: #2f2520;
    --input-bg: #2f2520;
    /* Text Colors */
    --text-primary: #f0e9e2;
    --text-secondary: #d1c8bd;
    --text-secondary-rgb: 209, 200, 189;
    --text-muted: #a39586;
    --text-light: #7d6f62;
    --text-on-primary: #ffffff;
    --placeholder-color: #7d6f62;
    /* Borders */
    --border-color: rgba(224, 74, 67, 0.2);
    --border-light: rgba(224, 74, 67, 0.1);
    --border-divider: #3d2f24;
    /* Shadows */
    --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.3);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(255, 201, 64, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.3);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.15);
    /* UI Element States */
    --focus-ring: rgba(255, 201, 64, 0.3);
    --overlay-bg: rgba(26, 19, 16, 0.7);
    /* Scrollbar */
    --scroll-thumb: #3d2f24;
    --scroll-thumb-hover: #4d3c2d;
    /* Table Colors */
    --table-header-bg: rgba(255, 201, 64, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.03);
    --table-hover-bg: rgba(255, 255, 255, 0.05);
    /* Navigation Colors */
    --nav-hover: rgba(224, 74, 67, 0.1);
    --nav-active: rgba(224, 74, 67, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(224, 74, 67, 0.9), rgba(255, 201, 64, 0.9));
}

/* ====== THEME 2: WHATSAPP LIGHT ====== */
.theme-whatsapp-light {
    /* Base RGB Values */
    --primary-rgb: 37, 211, 102;
    --secondary-rgb: 0, 119, 74;
    --text-secondary-rgb: 102, 117, 127;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 248, 249, 250;
    --border-divider-rgb: 233, 237, 239;
    --info-light-rgb: 25, 118, 210;
    --success-light-rgb: 52, 199, 89;
    --warning-light-rgb: 245, 166, 35;
    --danger-light-rgb: 229, 57, 53;
    /* Primary Colors - WhatsApp Green */
    --primary: #25d366;
    --primary-hover: #20bd5a;
    --primary-light: rgba(37, 211, 102, 0.1);
    --primary-lighter: rgba(37, 211, 102, 0.05);
    --primary-color: #25d366;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #25d366, #128c7e);
    /* Secondary color - Dark Green */
    --secondary: #075e54;
    --secondary-hover: #064d44;
    --secondary-light: rgba(7, 94, 84, 0.1);
    --secondary-gradient: linear-gradient(90deg, #075e54, #064d44);
    /* Success Colors */
    --success: #34c759;
    --success-hover: #2db14d;
    --success-light: rgba(52, 199, 89, 0.1);
    --success-color: #34c759;
    --success-bg: rgba(52, 199, 89, 0.1);
    --success-border-light: rgba(52, 199, 89, 0.2);
    --success-gradient: linear-gradient(90deg, #34c759, #2db14d);
    /* Backgrounds */
    --body-bg: #e5ddd5;
    --sidebar-bg: #f0f2f5;
    --content-bg: #ffffff;
    --subtle-bg: #f8f9fa;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #f0f2f5;
    /* Text Colors */
    --text-primary: #111b21;
    --text-secondary: #667781;
    --text-muted: #8696a0;
    --text-light: #aebac1;
    --text-on-primary: #ffffff;
    --placeholder-color: #8696a0;
    /* Borders */
    --border-color: rgba(134, 150, 160, 0.15);
    --border-light: rgba(134, 150, 160, 0.08);
    --border-divider: #e9edef;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(11, 20, 26, 0.04);
    --shadow-sm: 0 2px 4px rgba(11, 20, 26, 0.08);
    --shadow-md: 0 4px 8px rgba(11, 20, 26, 0.12);
    --shadow-lg: 0 8px 16px rgba(11, 20, 26, 0.16);
    --shadow-xl: 0 12px 24px rgba(11, 20, 26, 0.2);
    --shadow-focus: 0 0 0 3px rgba(37, 211, 102, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(37, 211, 102, 0.08);
    --table-striped-bg: rgba(0, 0, 0, 0.02);
    --table-hover-bg: rgba(37, 211, 102, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(37, 211, 102, 0.08);
    --nav-active: rgba(37, 211, 102, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(37, 211, 102, 0.9), rgba(7, 94, 84, 0.9));
}

/* ====== THEME 3: WHATSAPP DARK ====== */
.theme-whatsapp-dark {
    /* Base RGB Values */
    --primary-rgb: 0, 168, 132;
    --secondary-rgb: 37, 211, 102;
    --text-secondary-rgb: 166, 186, 193;
    --content-bg-rgb: 11, 20, 26;
    --subtle-bg-rgb: 24, 34, 41;
    --border-divider-rgb: 34, 45, 52;
    --info-light-rgb: 41, 182, 246;
    --success-light-rgb: 0, 230, 118;
    --warning-light-rgb: 255, 193, 7;
    --danger-light-rgb: 244, 67, 54;
    /* Primary Colors */
    --primary: #00a884;
    --primary-hover: #009975;
    --primary-light: rgba(0, 168, 132, 0.15);
    --primary-lighter: rgba(0, 168, 132, 0.08);
    --primary-color: #00a884;
    --primary-color-detail: #111b21;
    --primary-gradient: linear-gradient(135deg, #00a884, #25d366);
    /* Secondary color */
    --secondary: #25d366;
    --secondary-hover: #20bd5a;
    --secondary-light: rgba(37, 211, 102, 0.15);
    --secondary-gradient: linear-gradient(90deg, #25d366, #20bd5a);
    /* Success Colors */
    --success: #00e676;
    --success-hover: #00c853;
    --success-light: rgba(0, 230, 118, 0.15);
    --success-color: #00e676;
    --success-bg: rgba(0, 230, 118, 0.12);
    --success-border-light: rgba(0, 230, 118, 0.25);
    --success-gradient: linear-gradient(90deg, #00e676, #00c853);
    /* Backgrounds */
    --body-bg: #111b21;
    --sidebar-bg: #202c33;
    --content-bg: #0b141a;
    --subtle-bg: #182229;
    --modal-bg: #202c33;
    --dropdown-bg: #233138;
    --input-bg: #2a3942;
    /* Text Colors */
    --text-primary: #e9edef;
    --text-secondary: #a6bac1;
    --text-muted: #8696a0;
    --text-light: #667781;
    --text-on-primary: #111b21;
    --placeholder-color: #8696a0;
    /* Borders */
    --border-color: rgba(134, 150, 160, 0.15);
    --border-light: rgba(134, 150, 160, 0.08);
    --border-divider: #222d34;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(0, 168, 132, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.3);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.15);
    /* Table Colors */
    --table-header-bg: rgba(0, 168, 132, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(0, 168, 132, 0.1);
    --nav-active: rgba(0, 168, 132, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(0, 168, 132, 0.9), rgba(37, 211, 102, 0.9));
}

/* ====== THEME 4: OCEAN BREEZE LIGHT ====== */
.theme-ocean-light {
    /* Base RGB Values */
    --primary-rgb: 59, 130, 246;
    --secondary-rgb: 14, 165, 233;
    --text-secondary-rgb: 100, 116, 139;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 248, 250, 252;
    --border-divider-rgb: 226, 232, 240;
    --info-light-rgb: 25, 118, 210;
    --success-light-rgb: 16, 185, 129;
    --warning-light-rgb: 245, 166, 35;
    --danger-light-rgb: 229, 57, 53;
    /* Primary Colors - Deep Blue */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: rgba(59, 130, 246, 0.1);
    --primary-lighter: rgba(59, 130, 246, 0.05);
    --primary-color: #3b82f6;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #3b82f6, #0ea5e9);
    /* Secondary color - Sky Blue */
    --secondary: #0ea5e9;
    --secondary-hover: #0284c7;
    --secondary-light: rgba(14, 165, 233, 0.1);
    --secondary-gradient: linear-gradient(90deg, #0ea5e9, #0284c7);
    /* Success Colors */
    --success: #10b981;
    --success-hover: #059669;
    --success-light: rgba(16, 185, 129, 0.1);
    --success-color: #10b981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --success-border-light: rgba(16, 185, 129, 0.2);
    --success-gradient: linear-gradient(90deg, #10b981, #059669);
    /* Backgrounds */
    --body-bg: #f0f9ff;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #f8fafc;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #f1f5f9;
    /* Text Colors */
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-light: #cbd5e1;
    --text-on-primary: #ffffff;
    --placeholder-color: #94a3b8;
    /* Borders */
    --border-color: rgba(148, 163, 184, 0.15);
    --border-light: rgba(148, 163, 184, 0.08);
    --border-divider: #e2e8f0;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 16px rgba(15, 23, 42, 0.1);
    --shadow-xl: 0 12px 24px rgba(15, 23, 42, 0.12);
    --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(59, 130, 246, 0.08);
    --table-striped-bg: rgba(59, 130, 246, 0.02);
    --table-hover-bg: rgba(59, 130, 246, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(59, 130, 246, 0.08);
    --nav-active: rgba(59, 130, 246, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(14, 165, 233, 0.9));
}

/* ====== THEME 5: OCEAN BREEZE DARK ====== */
.theme-ocean-dark {
    /* Base RGB Values */
    --primary-rgb: 96, 165, 250;
    --secondary-rgb: 56, 189, 248;
    --text-secondary-rgb: 148, 163, 184;
    --content-bg-rgb: 15, 23, 42;
    --subtle-bg-rgb: 30, 41, 59;
    --border-divider-rgb: 51, 65, 85;
    --info-light-rgb: 41, 182, 246;
    --success-light-rgb: 52, 211, 153;
    --warning-light-rgb: 255, 193, 7;
    --danger-light-rgb: 244, 67, 54;
    /* Primary Colors */
    --primary: #60a5fa;
    --primary-hover: #3b82f6;
    --primary-light: rgba(96, 165, 250, 0.15);
    --primary-lighter: rgba(96, 165, 250, 0.08);
    --primary-color: #60a5fa;
    --primary-color-detail: #0f172a;
    --primary-gradient: linear-gradient(135deg, #60a5fa, #38bdf8);
    /* Secondary color */
    --secondary: #38bdf8;
    --secondary-hover: #0ea5e9;
    --secondary-light: rgba(56, 189, 248, 0.15);
    --secondary-gradient: linear-gradient(90deg, #38bdf8, #0ea5e9);
    /* Success Colors */
    --success: #34d399;
    --success-hover: #10b981;
    --success-light: rgba(52, 211, 153, 0.15);
    --success-color: #34d399;
    --success-bg: rgba(52, 211, 153, 0.12);
    --success-border-light: rgba(52, 211, 153, 0.25);
    --success-gradient: linear-gradient(90deg, #34d399, #10b981);
    /* Backgrounds */
    --body-bg: #0f172a;
    --sidebar-bg: #1e293b;
    --content-bg: #0f172a;
    --subtle-bg: #1e293b;
    --modal-bg: #1e293b;
    --dropdown-bg: #334155;
    --input-bg: #334155;
    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-light: #475569;
    --text-on-primary: #0f172a;
    --placeholder-color: #64748b;
    /* Borders */
    --border-color: rgba(148, 163, 184, 0.15);
    --border-light: rgba(148, 163, 184, 0.08);
    --border-divider: #334155;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.3);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.15);
    /* Table Colors */
    --table-header-bg: rgba(96, 165, 250, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(96, 165, 250, 0.1);
    --nav-active: rgba(96, 165, 250, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(96, 165, 250, 0.9), rgba(56, 189, 248, 0.9));
}

/* ====== THEME 6: SUNSET GLOW LIGHT ====== */
.theme-sunset-light {
    /* Base RGB Values */
    --primary-rgb: 251, 146, 60;
    --secondary-rgb: 254, 215, 170;
    --text-secondary-rgb: 120, 113, 108;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 254, 243, 226;
    --border-divider-rgb: 254, 215, 170;
    --info-light-rgb: 25, 118, 210;
    --success-light-rgb: 132, 204, 22;
    --warning-light-rgb: 245, 166, 35;
    --danger-light-rgb: 229, 57, 53;
    /* Primary Colors - Warm Orange */
    --primary: #fb923c;
    --primary-hover: #f97316;
    --primary-light: rgba(251, 146, 60, 0.1);
    --primary-lighter: rgba(251, 146, 60, 0.05);
    --primary-color: #fb923c;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #fb923c, #f97316);
    /* Secondary color - Soft Peach */
    --secondary: #fed7aa;
    --secondary-hover: #fbbf24;
    --secondary-light: rgba(254, 215, 170, 0.15);
    --secondary-gradient: linear-gradient(90deg, #fed7aa, #fbbf24);
    /* Success Colors */
    --success: #84cc16;
    --success-hover: #65a30d;
    --success-light: rgba(132, 204, 22, 0.1);
    --success-color: #84cc16;
    --success-bg: rgba(132, 204, 22, 0.1);
    --success-border-light: rgba(132, 204, 22, 0.2);
    --success-gradient: linear-gradient(90deg, #84cc16, #65a30d);
    /* Backgrounds */
    --body-bg: #fffbf5;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #fef3e2;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #fef3e2;
    /* Text Colors */
    --text-primary: #451a03;
    --text-secondary: #78716c;
    --text-muted: #a8a29e;
    --text-light: #d6d3d1;
    --text-on-primary: #ffffff;
    --placeholder-color: #a8a29e;
    /* Borders */
    --border-color: rgba(251, 146, 60, 0.15);
    --border-light: rgba(251, 146, 60, 0.08);
    --border-divider: #fed7aa;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(69, 26, 3, 0.04);
    --shadow-sm: 0 2px 4px rgba(69, 26, 3, 0.06);
    --shadow-md: 0 4px 8px rgba(69, 26, 3, 0.08);
    --shadow-lg: 0 8px 16px rgba(69, 26, 3, 0.1);
    --shadow-xl: 0 12px 24px rgba(69, 26, 3, 0.12);
    --shadow-focus: 0 0 0 3px rgba(251, 146, 60, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(254, 215, 170, 0.2);
    --table-striped-bg: rgba(251, 146, 60, 0.02);
    --table-hover-bg: rgba(251, 146, 60, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(251, 146, 60, 0.08);
    --nav-active: rgba(251, 146, 60, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(251, 146, 60, 0.9), rgba(254, 215, 170, 0.9));
}

/* ====== THEME 7: SUNSET GLOW DARK ====== */
.theme-sunset-dark {
    /* Base RGB Values */
    --primary-rgb: 251, 191, 36;
    --secondary-rgb: 251, 146, 60;
    --text-secondary-rgb: 214, 211, 209;
    --content-bg-rgb: 28, 25, 23;
    --subtle-bg-rgb: 41, 37, 36;
    --border-divider-rgb: 68, 64, 60;
    --info-light-rgb: 41, 182, 246;
    --success-light-rgb: 163, 230, 53;
    --warning-light-rgb: 255, 193, 7;
    --danger-light-rgb: 244, 67, 54;
    /* Primary Colors */
    --primary: #fbbf24;
    --primary-hover: #f59e0b;
    --primary-light: rgba(251, 191, 36, 0.15);
    --primary-lighter: rgba(251, 191, 36, 0.08);
    --primary-color: #fbbf24;
    --primary-color-detail: #1c1917;
    --primary-gradient: linear-gradient(135deg, #fbbf24, #fb923c);
    /* Secondary color */
    --secondary: #fb923c;
    --secondary-hover: #f97316;
    --secondary-light: rgba(251, 146, 60, 0.15);
    --secondary-gradient: linear-gradient(90deg, #fb923c, #f97316);
    /* Success Colors */
    --success: #a3e635;
    --success-hover: #84cc16;
    --success-light: rgba(163, 230, 53, 0.15);
    --success-color: #a3e635;
    --success-bg: rgba(163, 230, 53, 0.12);
    --success-border-light: rgba(163, 230, 53, 0.25);
    --success-gradient: linear-gradient(90deg, #a3e635, #84cc16);
    /* Backgrounds */
    --body-bg: #1c1917;
    --sidebar-bg: #292524;
    --content-bg: #1c1917;
    --subtle-bg: #292524;
    --modal-bg: #292524;
    --dropdown-bg: #44403c;
    --input-bg: #44403c;
    /* Text Colors */
    --text-primary: #fef3c7;
    --text-secondary: #d6d3d1;
    --text-muted: #a8a29e;
    --text-light: #78716c;
    --text-on-primary: #1c1917;
    --placeholder-color: #a8a29e;
    /* Borders */
    --border-color: rgba(251, 191, 36, 0.15);
    --border-light: rgba(251, 191, 36, 0.08);
    --border-divider: #44403c;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(251, 191, 36, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.3);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.15);
    /* Table Colors */
    --table-header-bg: rgba(251, 191, 36, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(251, 191, 36, 0.1);
    --nav-active: rgba(251, 191, 36, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(251, 146, 60, 0.9));
}

/* ====== THEME 8: AURORA LIGHT ====== */
.theme-aurora-light {
    /* Base RGB Values */
    --primary-rgb: 139, 92, 246;
    --secondary-rgb: 236, 72, 153;
    --text-secondary-rgb: 107, 114, 128;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 253, 244, 255;
    --border-divider-rgb: 233, 213, 255;
    --info-light-rgb: 25, 118, 210;
    --success-light-rgb: 16, 185, 129;
    --warning-light-rgb: 245, 166, 35;
    --danger-light-rgb: 229, 57, 53;
    /* Primary Colors - Purple */
    --primary: #8b5cf6;
    --primary-hover: #7c3aed;
    --primary-light: rgba(139, 92, 246, 0.1);
    --primary-lighter: rgba(139, 92, 246, 0.05);
    --primary-color: #8b5cf6;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #8b5cf6, #ec4899);
    /* Secondary color - Pink */
    --secondary: #ec4899;
    --secondary-hover: #db2777;
    --secondary-light: rgba(236, 72, 153, 0.1);
    --secondary-gradient: linear-gradient(90deg, #ec4899, #db2777);
    /* Success Colors */
    --success: #10b981;
    --success-hover: #059669;
    --success-light: rgba(16, 185, 129, 0.1);
    --success-color: #10b981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --success-border-light: rgba(16, 185, 129, 0.2);
    --success-gradient: linear-gradient(90deg, #10b981, #059669);
    /* Backgrounds */
    --body-bg: #faf5ff;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #fdf4ff;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #f3e8ff;
    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-light: #d1d5db;
    --text-on-primary: #ffffff;
    --placeholder-color: #9ca3af;
    /* Borders */
    --border-color: rgba(139, 92, 246, 0.15);
    --border-light: rgba(139, 92, 246, 0.08);
    --border-divider: #e9d5ff;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(31, 41, 55, 0.04);
    --shadow-sm: 0 2px 4px rgba(31, 41, 55, 0.06);
    --shadow-md: 0 4px 8px rgba(31, 41, 55, 0.08);
    --shadow-lg: 0 8px 16px rgba(31, 41, 55, 0.1);
    --shadow-xl: 0 12px 24px rgba(31, 41, 55, 0.12);
    --shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(139, 92, 246, 0.08);
    --table-striped-bg: rgba(139, 92, 246, 0.02);
    --table-hover-bg: rgba(139, 92, 246, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(139, 92, 246, 0.08);
    --nav-active: rgba(139, 92, 246, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(236, 72, 153, 0.9));
}

/* ====== THEME 9: AURORA DARK ====== */
.theme-aurora-dark {
    /* Base RGB Values */
    --primary-rgb: 167, 139, 250;
    --secondary-rgb: 244, 114, 182;
    --text-secondary-rgb: 209, 213, 219;
    --content-bg-rgb: 17, 24, 39;
    --subtle-bg-rgb: 31, 41, 55;
    --border-divider-rgb: 55, 65, 81;
    --info-light-rgb: 41, 182, 246;
    --success-light-rgb: 52, 211, 153;
    --warning-light-rgb: 255, 193, 7;
    --danger-light-rgb: 244, 67, 54;
    /* Primary Colors */
    --primary: #a78bfa;
    --primary-hover: #8b5cf6;
    --primary-light: rgba(167, 139, 250, 0.15);
    --primary-lighter: rgba(167, 139, 250, 0.08);
    --primary-color: #a78bfa;
    --primary-color-detail: #1f2937;
    --primary-gradient: linear-gradient(135deg, #a78bfa, #f472b6);
    /* Secondary color */
    --secondary: #f472b6;
    --secondary-hover: #ec4899;
    --secondary-light: rgba(244, 114, 182, 0.15);
    --secondary-gradient: linear-gradient(90deg, #f472b6, #ec4899);
    /* Success Colors */
    --success: #34d399;
    --success-hover: #10b981;
    --success-light: rgba(52, 211, 153, 0.15);
    --success-color: #34d399;
    --success-bg: rgba(52, 211, 153, 0.12);
    --success-border-light: rgba(52, 211, 153, 0.25);
    --success-gradient: linear-gradient(90deg, #34d399, #10b981);
    /* Backgrounds */
    --body-bg: #111827;
    --sidebar-bg: #1f2937;
    --content-bg: #111827;
    --subtle-bg: #1f2937;
    --modal-bg: #1f2937;
    --dropdown-bg: #374151;
    --input-bg: #374151;
    /* Text Colors */
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-light: #6b7280;
    --text-on-primary: #1f2937;
    --placeholder-color: #9ca3af;
    /* Borders */
    --border-color: rgba(167, 139, 250, 0.15);
    --border-light: rgba(167, 139, 250, 0.08);
    --border-divider: #374151;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(167, 139, 250, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.3);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.15);
    /* Table Colors */
    --table-header-bg: rgba(167, 139, 250, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(167, 139, 250, 0.1);
    --nav-active: rgba(167, 139, 250, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(167, 139, 250, 0.9), rgba(244, 114, 182, 0.9));
}

/* ====== THEME 10: FOREST LIGHT ====== */
.theme-forest-light {
    /* Base RGB Values */
    --primary-rgb: 34, 197, 94;
    --secondary-rgb: 5, 150, 105;
    --text-secondary-rgb: 75, 85, 99;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 240, 253, 244;
    --border-divider-rgb: 209, 250, 229;
    --info-light-rgb: 25, 118, 210;
    --success-light-rgb: 16, 185, 129;
    --warning-light-rgb: 245, 166, 35;
    --danger-light-rgb: 229, 57, 53;
    /* Primary Colors - Green */
    --primary: #22c55e;
    --primary-hover: #16a34a;
    --primary-light: rgba(34, 197, 94, 0.1);
    --primary-lighter: rgba(34, 197, 94, 0.05);
    --primary-color: #22c55e;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #22c55e, #059669);
    /* Secondary color - Teal */
    --secondary: #059669;
    --secondary-hover: #047857;
    --secondary-light: rgba(5, 150, 105, 0.1);
    --secondary-gradient: linear-gradient(90deg, #059669, #047857);
    /* Success Colors */
    --success: #10b981;
    --success-hover: #059669;
    --success-light: rgba(16, 185, 129, 0.1);
    --success-color: #10b981;
    --success-bg: rgba(16, 185, 129, 0.1);
    --success-border-light: rgba(16, 185, 129, 0.2);
    --success-gradient: linear-gradient(90deg, #10b981, #059669);
    /* Backgrounds */
    --body-bg: #f0fdf4;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #f0fdf4;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #ecfdf5;
    /* Text Colors */
    --text-primary: #14532d;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --text-light: #d1d5db;
    --text-on-primary: #ffffff;
    --placeholder-color: #9ca3af;
    /* Borders */
    --border-color: rgba(34, 197, 94, 0.15);
    --border-light: rgba(34, 197, 94, 0.08);
    --border-divider: #d1fae5;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(20, 83, 45, 0.04);
    --shadow-sm: 0 2px 4px rgba(20, 83, 45, 0.06);
    --shadow-md: 0 4px 8px rgba(20, 83, 45, 0.08);
    --shadow-lg: 0 8px 16px rgba(20, 83, 45, 0.1);
    --shadow-xl: 0 12px 24px rgba(20, 83, 45, 0.12);
    --shadow-focus: 0 0 0 3px rgba(34, 197, 94, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(34, 197, 94, 0.08);
    --table-striped-bg: rgba(34, 197, 94, 0.02);
    --table-hover-bg: rgba(34, 197, 94, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(34, 197, 94, 0.08);
    --nav-active: rgba(34, 197, 94, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(5, 150, 105, 0.9));
}

/* ====== THEME 11: FOREST DARK ====== */
.theme-forest-dark {
    /* Base RGB Values */
    --primary-rgb: 74, 222, 128;
    --secondary-rgb: 52, 211, 153;
    --text-secondary-rgb: 209, 213, 219;
    --content-bg-rgb: 20, 83, 45;
    --subtle-bg-rgb: 22, 101, 52;
    --border-divider-rgb: 21, 128, 61;
    --info-light-rgb: 41, 182, 246;
    --success-light-rgb: 134, 239, 172;
    --warning-light-rgb: 255, 193, 7;
    --danger-light-rgb: 244, 67, 54;
    /* Primary Colors */
    --primary: #4ade80;
    --primary-hover: #22c55e;
    --primary-light: rgba(74, 222, 128, 0.15);
    --primary-lighter: rgba(74, 222, 128, 0.08);
    --primary-color: #4ade80;
    --primary-color-detail: #14532d;
    --primary-gradient: linear-gradient(135deg, #4ade80, #34d399);
    /* Secondary color */
    --secondary: #34d399;
    --secondary-hover: #10b981;
    --secondary-light: rgba(52, 211, 153, 0.15);
    --secondary-gradient: linear-gradient(90deg, #34d399, #10b981);
    /* Success Colors */
    --success: #86efac;
    --success-hover: #4ade80;
    --success-light: rgba(134, 239, 172, 0.15);
    --success-color: #86efac;
    --success-bg: rgba(134, 239, 172, 0.12);
    --success-border-light: rgba(134, 239, 172, 0.25);
    --success-gradient: linear-gradient(90deg, #86efac, #4ade80);
    /* Backgrounds */
    --body-bg: #14532d;
    --sidebar-bg: #166534;
    --content-bg: #14532d;
    --subtle-bg: #166534;
    --modal-bg: #166534;
    --dropdown-bg: #15803d;
    --input-bg: #15803d;
    /* Text Colors */
    --text-primary: #f0fdf4;
    --text-secondary: #bbf7d0;
    --text-muted: #86efac;
    --text-light: #4ade80;
    --text-on-primary: #14532d;
    --placeholder-color: #86efac;
    /* Borders */
    --border-color: rgba(74, 222, 128, 0.15);
    --border-light: rgba(74, 222, 128, 0.08);
    --border-divider: #15803d;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
    --shadow-focus: 0 0 0 3px rgba(74, 222, 128, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.3);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.15);
    /* Table Colors */
    --table-header-bg: rgba(74, 222, 128, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(74, 222, 128, 0.1);
    --nav-active: rgba(74, 222, 128, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(74, 222, 128, 0.9), rgba(52, 211, 153, 0.9));
}

/* ====== Common theme properties ====== */
[class*="theme-"] {
    /* Warning Colors - Same across all themes */
    --warning: #f5a623;
    --warning-hover: #e09612;
    --warning-light: rgba(245, 166, 35, 0.1);
    --warning-gradient: linear-gradient(90deg, #f5a623, #e09612);
    /* Danger Colors - Same across all themes */
    --danger: #e53935;
    --danger-hover: #d32f2f;
    --danger-light: rgba(229, 57, 53, 0.1);
    --danger-color: #e53935;
    --danger-bg: rgba(229, 57, 53, 0.1);
    --danger-border-light: rgba(229, 57, 53, 0.2);
    --danger-gradient: linear-gradient(90deg, #e53935, #d32f2f);
    /* Info Colors - Same across all themes */
    --info: #1976d2;
    --info-hover: #1565c0;
    --info-light: rgba(25, 118, 210, 0.1);
    --info-gradient: linear-gradient(90deg, #1976d2, #1565c0);
    /* Bootstrap Table compatibility */
    --bs-table-striped-bg: var(--table-striped-bg);
    --bs-table-hover-bg: var(--table-hover-bg);
    --bs-table-border-color: var(--table-border-color);
    /* Value indicators */
    --positive-value: var(--success);
    --negative-value: var(--danger);
    /* Scale & Status indicators inherit from status colors */
    --scale-online: var(--status-online);
    --scale-stale: var(--status-stale);
    --scale-offline: var(--status-offline);
    --scale-online-bg: var(--status-online-bg);
    --scale-stale-bg: var(--status-stale-bg);
    --scale-offline-bg: var(--status-offline-bg);
    /* Compact mode variables - inherited by all themes */
    --compact-row-height: 48px;
    --compact-grid-gap: 2px;
    --compact-font-size: 0.75rem;
    --compact-padding: 0.75rem;
    /* Mobile breakpoints - inherited by all themes */
    --mobile-xs: 400px;
    --mobile-sm: 576px;
    --mobile-md: 768px;
    --tablet: 992px;
    --desktop: 1200px;
    --desktop-lg: 1400px;
    --desktop-xl: 1600px;
    /* Touch target sizes - inherited by all themes */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    /* Mobile-optimized spacing - inherited by all themes */
    --mobile-spacing-xs: 0.375rem;
    --mobile-spacing-sm: 0.5rem;
    --mobile-spacing-md: 0.75rem;
    --mobile-spacing-lg: 1rem;
    /* Mobile font sizes - inherited by all themes */
    --mobile-font-xs: 0.625rem;
    --mobile-font-sm: 0.7rem;
    --mobile-font-base: 0.875rem;
    --mobile-font-lg: 1rem;
    /* Animation durations - inherited by all themes */
    --animation-fast: 0.2s;
    --animation-normal: 0.3s;
    --animation-slow: 0.5s;
    --animation-slower: 0.8s;
    /* Loader specific - inherited by all themes */
    --loader-size: 80px;
    --loader-size-sm: 48px;
    --loader-size-xs: 32px;
    /* Border radius for mobile - inherited by all themes */
    --mobile-radius-sm: 4px;
    --mobile-radius-md: 8px;
    --mobile-radius-lg: 12px;
    /* Focus states - inherited by all themes */
    --focus-offset: 2px;
    --focus-width: 3px;
}

/* Dark theme indicator for JavaScript */
[class*="-dark"] {
    --is-dark-theme: 1;
}

/* Mobile-specific utility classes */
@media (max-width: 768px) {
    :root {
        /* Adjust base font size for mobile */
        font-size: 14px;
    }

    [class*="theme-"] {
        /* Adjust base font size for mobile in all themes */
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    :root {
        /* Further adjust for small mobile */
        font-size: 13px;
    }

    [class*="theme-"] {
        /* Further adjust for small mobile in all themes */
        font-size: 13px;
    }
}

/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    :root,
    [class*="theme-"] {
        --animation-fast: 0;
        --animation-normal: 0;
        --animation-slow: 0;
        --animation-slower: 0;
        --transition-faster: 0;
        --transition-fast: 0;
        --transition-normal: 0;
        --transition-slow: 0;
        --transition-slower: 0;
        --animation-timing: 0;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    :root,
    [class*="theme-"] {
        --border-divider: var(--text-secondary);
        --border-color: var(--text-primary);
        --card-shadow: 0 0 0 2px var(--text-primary);
        --card-shadow-hover: 0 0 0 3px var(--text-primary);
        --card-shadow-compact: 0 0 0 1px var(--text-primary);
    }
}

/* Base styles */
* {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--body-bg);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Links */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    a:hover {
        color: var(--primary-hover);
    }

/* Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--spacing-3) 0;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

/* Paragraphs */
p {
    margin: 0 0 var(--spacing-3) 0;
}

/* Lists */
ul, ol {
    margin: 0 0 var(--spacing-3) 0;
    padding-left: var(--spacing-6);
}

/* Forms */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Code */
code,
pre {
    font-family: var(--font-mono);
}

/* Selection */
::selection {
    background-color: var(--primary-light);
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--subtle-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scroll-thumb-hover);
    }

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--subtle-bg);
}

/* Focus styles */
:focus {
    outline: none;
    box-shadow: 0 0 0 var(--focus-offset) var(--content-bg), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring);
}

    /* Disable focus styles for mouse users */
    :focus:not(:focus-visible) {
        box-shadow: none;
    }

/* Enable focus styles for keyboard users */
:focus-visible {
    box-shadow: 0 0 0 var(--focus-offset) var(--content-bg), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring);
}


/* ====== THEME TRANSITION PREVENTION ====== */

/* Prevent theme flash during navigation */
html.theme-transitioning {
    background-color: var(--body-bg) !important;
    color: var(--text-primary) !important;
}

    html.theme-transitioning * {
        transition: none !important;
    }

/* Ensure theme classes have priority */
html[class*="theme-"] {
    background-color: var(--body-bg) !important;
}

    html[class*="theme-"] body {
        background-color: transparent !important;
    }

/* Prevent Blazor navigation flash */
#blazor-error-ui {
    background: var(--danger);
    color: var(--text-on-primary);
}

/* Loading state for Blazor */
.blazor-load-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--body-bg);
    z-index: 9999;
    display: none;
}

html.loading .blazor-load-wrapper {
    display: block;
}

/* Ensure smooth page transitions */
.page-wrapper {
    background-color: var(--body-bg);
    min-height: 100vh;
}

/* Override any default white backgrounds */
.content-wrapper,
.main-content,
.page-content {
    background-color: transparent !important;
}

/* Fix for specific Blazor render modes */
body > div[style*="display: contents"] {
    background-color: transparent !important;
}

/* Prevent flash on route changes */
router-outlet + * {
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0.95;
    }

    to {
        opacity: 1;
    }
}

/* Theme-specific instant backgrounds */
html:not([class*="theme-"]) {
    background-color: #f8f5f0; /* Default light background */
    color: #433327; /* Default light text */
}

/* Ensure theme persistence during Blazor reconnection */
components-reconnect-modal {
    background-color: var(--modal-bg) !important;
    color: var(--text-primary) !important;
}

/* Fix for SSR to Interactive transitions */
[data-permanent] {
    background-color: inherit !important;
}

/* Prevent inherited white backgrounds */
* {
    background-color: inherit;
}

    *:where(:not(html, body, .card, .modal, .dropdown-menu, .toast, [class*="bg-"])) {
        background-color: transparent;
    }


/* Critical theme styles - prevents flash during navigation */

/* Base theme background colors for immediate application */
html.theme-majesty-light {
    background-color: #f8f5f0;
}

html.theme-majesty-dark {
    background-color: #1a1310;
}

html.theme-whatsapp-light {
    background-color: #e5ddd5;
}

html.theme-whatsapp-dark {
    background-color: #111b21;
}

html.theme-ocean-light {
    background-color: #f0f9ff;
}

html.theme-ocean-dark {
    background-color: #0f172a;
}

html.theme-sunset-light {
    background-color: #fffbf5;
}

html.theme-sunset-dark {
    background-color: #1c1917;
}

html.theme-aurora-light {
    background-color: #faf5ff;
}

html.theme-aurora-dark {
    background-color: #111827;
}

html.theme-forest-light {
    background-color: #f0fdf4;
}

html.theme-forest-dark {
    background-color: #14532d;
}

/* Base text colors for immediate application */
html.theme-majesty-light {
    color: #433327;
}

html.theme-majesty-dark {
    color: #f0e9e2;
}

html.theme-whatsapp-light {
    color: #111b21;
}

html.theme-whatsapp-dark {
    color: #e9edef;
}

html.theme-ocean-light {
    color: #0f172a;
}

html.theme-ocean-dark {
    color: #f1f5f9;
}

html.theme-sunset-light {
    color: #451a03;
}

html.theme-sunset-dark {
    color: #fef3c7;
}

html.theme-aurora-light {
    color: #1f2937;
}

html.theme-aurora-dark {
    color: #f3f4f6;
}

html.theme-forest-light {
    color: #14532d;
}

html.theme-forest-dark {
    color: #f0fdf4;
}

/* Prevent layout shift during theme application */
html {
    min-height: 100vh;
    background-color: var(--body-bg, #f8f5f0);
    color: var(--text-primary, #433327);
}

body {
    min-height: 100vh;
    background-color: transparent;
}

/* Smooth transitions only after initial load */
html:not(.loading) {
    transition: background-color 0.3s ease, color 0.3s ease;
}

    html:not(.loading) body {
        transition: background-color 0.3s ease, color 0.3s ease;
    }

/* Hide content until theme is applied */
html.theme-loading body {
    opacity: 0;
}

html:not(.theme-loading) body {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Prevent flash on navigation */
.page-transition-enter {
    opacity: 0;
}

.page-transition-enter-active {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Shared Manage Pages Styles - Responsive and Premium */
.manage-container {
    min-height: 100vh;
    background: var(--body-bg);
}

/* Ensure all manage pages work well with the sidebar */
.manage-container {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease;
}

@media (max-width: 992px) {
    .manage-container {
        margin-left: 0;
    }
}

/* Additional responsive utilities */
@media (max-width: 400px) {
    .manage-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    .manage-card {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        border-radius: 0;
    }

    .manage-content {
        padding: 1rem 0.5rem;
    }
}

/* Dark theme adjustments */
[class*="-dark"] .manage-card {
    background: var(--content-bg);
}

[class*="-dark"] .manage-input {
    background: var(--input-bg);
    border-color: var(--border-divider);
}

[class*="-dark"] .manage-action-card:hover {
    background: var(--subtle-bg);
}

/* Print styles */
@media print {
    .manage-header-wrapper,
    .manage-form-actions,
    .manage-back-btn,
    .manage-action-grid {
        display: none !important;
    }

    .manage-container {
        margin: 0;
    }
}

/* ====== THEME 12: OUTLOOK BLUE WAVE LIGHT ====== */
.theme-outlook-blue-light {
    /* Base RGB Values */
    --primary-rgb: 0, 120, 212;
    --secondary-rgb: 16, 110, 190;
    --text-secondary-rgb: 96, 94, 92;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 250, 249, 248;
    --border-divider-rgb: 237, 235, 233;
    --info-light-rgb: 0, 120, 212;
    --success-light-rgb: 16, 124, 16;
    --warning-light-rgb: 255, 140, 0;
    --danger-light-rgb: 196, 43, 28;
    /* Primary Colors - Outlook Blue */
    --primary: #0078d4;
    --primary-hover: #106ebe;
    --primary-light: rgba(0, 120, 212, 0.1);
    --primary-lighter: rgba(0, 120, 212, 0.05);
    --primary-color: #0078d4;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #0078d4, #106ebe);
    /* Secondary color - Deeper Blue */
    --secondary: #106ebe;
    --secondary-hover: #005a9e;
    --secondary-light: rgba(16, 110, 190, 0.1);
    --secondary-gradient: linear-gradient(90deg, #106ebe, #005a9e);
    /* Success Colors */
    --success: #107c10;
    --success-hover: #0e700e;
    --success-light: rgba(16, 124, 16, 0.1);
    --success-color: #107c10;
    --success-bg: rgba(16, 124, 16, 0.1);
    --success-border-light: rgba(16, 124, 16, 0.2);
    --success-gradient: linear-gradient(90deg, #107c10, #0e700e);
    /* Backgrounds */
    --body-bg: #faf9f8;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #f3f2f1;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #f3f2f1;
    /* Text Colors */
    --text-primary: #323130;
    --text-secondary: #605e5c;
    --text-muted: #8a8886;
    --text-light: #c8c6c4;
    --text-on-primary: #ffffff;
    --placeholder-color: #8a8886;
    /* Borders */
    --border-color: rgba(0, 120, 212, 0.15);
    --border-light: rgba(0, 120, 212, 0.08);
    --border-divider: #edebe9;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --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.10);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.12);
    --shadow-focus: 0 0 0 3px rgba(0, 120, 212, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(0, 120, 212, 0.08);
    --table-striped-bg: rgba(0, 120, 212, 0.02);
    --table-hover-bg: rgba(0, 120, 212, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(0, 120, 212, 0.08);
    --nav-active: rgba(0, 120, 212, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(0, 120, 212, 0.9), rgba(16, 110, 190, 0.9));
}

/* ====== THEME 13: OUTLOOK BLUE WAVE DARK ====== */
.theme-outlook-blue-dark {
    /* Base RGB Values */
    --primary-rgb: 70, 130, 180;
    --secondary-rgb: 100, 149, 237;
    --text-secondary-rgb: 200, 198, 196;
    --content-bg-rgb: 32, 31, 30;
    --subtle-bg-rgb: 50, 49, 48;
    --border-divider-rgb: 72, 70, 68;
    --info-light-rgb: 70, 130, 180;
    --success-light-rgb: 146, 208, 80;
    --warning-light-rgb: 255, 185, 0;
    --danger-light-rgb: 255, 99, 71;
    /* Primary Colors */
    --primary: #4682b4;
    --primary-hover: #6495ed;
    --primary-light: rgba(70, 130, 180, 0.15);
    --primary-lighter: rgba(70, 130, 180, 0.08);
    --primary-color: #4682b4;
    --primary-color-detail: #201f1e;
    --primary-gradient: linear-gradient(135deg, #4682b4, #6495ed);
    /* Secondary color */
    --secondary: #6495ed;
    --secondary-hover: #87ceeb;
    --secondary-light: rgba(100, 149, 237, 0.15);
    --secondary-gradient: linear-gradient(90deg, #6495ed, #87ceeb);
    /* Success Colors */
    --success: #92d050;
    --success-hover: #7cb83d;
    --success-light: rgba(146, 208, 80, 0.15);
    --success-color: #92d050;
    --success-bg: rgba(146, 208, 80, 0.12);
    --success-border-light: rgba(146, 208, 80, 0.25);
    --success-gradient: linear-gradient(90deg, #92d050, #7cb83d);
    /* Backgrounds */
    --body-bg: #201f1e;
    --sidebar-bg: #323130;
    --content-bg: #201f1e;
    --subtle-bg: #323130;
    --modal-bg: #323130;
    --dropdown-bg: #484644;
    --input-bg: #484644;
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #c8c6c4;
    --text-muted: #a19f9d;
    --text-light: #797775;
    --text-on-primary: #201f1e;
    --placeholder-color: #a19f9d;
    /* Borders */
    --border-color: rgba(70, 130, 180, 0.15);
    --border-light: rgba(70, 130, 180, 0.08);
    --border-divider: #484644;
    /* Shadows */
    --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 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.7);
    --shadow-focus: 0 0 0 3px rgba(70, 130, 180, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.2);
    /* Table Colors */
    --table-header-bg: rgba(70, 130, 180, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(70, 130, 180, 0.1);
    --nav-active: rgba(70, 130, 180, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(70, 130, 180, 0.9), rgba(100, 149, 237, 0.9));
}

/* ====== THEME 14: GITHUB LIGHT ====== */
.theme-github-light {
    /* Base RGB Values */
    --primary-rgb: 9, 105, 218;
    --secondary-rgb: 88, 166, 255;
    --text-secondary-rgb: 101, 109, 118;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 246, 248, 250;
    --border-divider-rgb: 208, 215, 222;
    --info-light-rgb: 9, 105, 218;
    --success-light-rgb: 26, 127, 55;
    --warning-light-rgb: 154, 103, 0;
    --danger-light-rgb: 207, 34, 46;
    /* Primary Colors - GitHub Blue */
    --primary: #0969da;
    --primary-hover: #0860ca;
    --primary-light: rgba(9, 105, 218, 0.1);
    --primary-lighter: rgba(9, 105, 218, 0.05);
    --primary-color: #0969da;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #0969da, #58a6ff);
    /* Secondary color - Bright Blue */
    --secondary: #58a6ff;
    --secondary-hover: #388bfd;
    --secondary-light: rgba(88, 166, 255, 0.1);
    --secondary-gradient: linear-gradient(90deg, #58a6ff, #388bfd);
    /* Success Colors */
    --success: #1a7f37;
    --success-hover: #116329;
    --success-light: rgba(26, 127, 55, 0.1);
    --success-color: #1a7f37;
    --success-bg: rgba(26, 127, 55, 0.1);
    --success-border-light: rgba(26, 127, 55, 0.2);
    --success-gradient: linear-gradient(90deg, #1a7f37, #116329);
    /* Backgrounds */
    --body-bg: #ffffff;
    --sidebar-bg: #f6f8fa;
    --content-bg: #ffffff;
    --subtle-bg: #f6f8fa;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #f6f8fa;
    /* Text Colors */
    --text-primary: #24292f;
    --text-secondary: #656d76;
    --text-muted: #8c959f;
    --text-light: #d0d7de;
    --text-on-primary: #ffffff;
    --placeholder-color: #8c959f;
    /* Borders */
    --border-color: rgba(9, 105, 218, 0.15);
    --border-light: rgba(9, 105, 218, 0.08);
    --border-divider: #d0d7de;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(27, 31, 35, 0.04);
    --shadow-sm: 0 2px 4px rgba(27, 31, 35, 0.06);
    --shadow-md: 0 4px 8px rgba(27, 31, 35, 0.08);
    --shadow-lg: 0 8px 16px rgba(27, 31, 35, 0.10);
    --shadow-xl: 0 12px 24px rgba(27, 31, 35, 0.12);
    --shadow-focus: 0 0 0 3px rgba(9, 105, 218, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(9, 105, 218, 0.08);
    --table-striped-bg: rgba(9, 105, 218, 0.02);
    --table-hover-bg: rgba(9, 105, 218, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(9, 105, 218, 0.08);
    --nav-active: rgba(9, 105, 218, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(9, 105, 218, 0.9), rgba(88, 166, 255, 0.9));
}

/* ====== THEME 15: GITHUB DARK ====== */
.theme-github-dark {
    /* Base RGB Values */
    --primary-rgb: 88, 166, 255;
    --secondary-rgb: 121, 192, 255;
    --text-secondary-rgb: 139, 148, 158;
    --content-bg-rgb: 13, 17, 23;
    --subtle-bg-rgb: 22, 27, 34;
    --border-divider-rgb: 48, 54, 61;
    --info-light-rgb: 88, 166, 255;
    --success-light-rgb: 63, 185, 80;
    --warning-light-rgb: 187, 128, 9;
    --danger-light-rgb: 248, 81, 73;
    /* Primary Colors */
    --primary: #58a6ff;
    --primary-hover: #79c0ff;
    --primary-light: rgba(88, 166, 255, 0.15);
    --primary-lighter: rgba(88, 166, 255, 0.08);
    --primary-color: #58a6ff;
    --primary-color-detail: #0d1117;
    --primary-gradient: linear-gradient(135deg, #58a6ff, #79c0ff);
    /* Secondary color */
    --secondary: #79c0ff;
    --secondary-hover: #a5d6ff;
    --secondary-light: rgba(121, 192, 255, 0.15);
    --secondary-gradient: linear-gradient(90deg, #79c0ff, #a5d6ff);
    /* Success Colors */
    --success: #3fb950;
    --success-hover: #56d364;
    --success-light: rgba(63, 185, 80, 0.15);
    --success-color: #3fb950;
    --success-bg: rgba(63, 185, 80, 0.12);
    --success-border-light: rgba(63, 185, 80, 0.25);
    --success-gradient: linear-gradient(90deg, #3fb950, #56d364);
    /* Backgrounds */
    --body-bg: #0d1117;
    --sidebar-bg: #161b22;
    --content-bg: #0d1117;
    --subtle-bg: #161b22;
    --modal-bg: #161b22;
    --dropdown-bg: #21262d;
    --input-bg: #21262d;
    /* Text Colors */
    --text-primary: #f0f6fc;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --text-light: #484f58;
    --text-on-primary: #0d1117;
    --placeholder-color: #6e7681;
    /* Borders */
    --border-color: rgba(88, 166, 255, 0.15);
    --border-light: rgba(88, 166, 255, 0.08);
    --border-divider: #30363d;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(1, 4, 9, 0.3);
    --shadow-sm: 0 2px 4px rgba(1, 4, 9, 0.4);
    --shadow-md: 0 4px 8px rgba(1, 4, 9, 0.5);
    --shadow-lg: 0 8px 16px rgba(1, 4, 9, 0.6);
    --shadow-xl: 0 12px 24px rgba(1, 4, 9, 0.7);
    --shadow-focus: 0 0 0 3px rgba(88, 166, 255, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(1, 4, 9, 0.3);
    --card-shadow-hover: 0 8px 25px rgba(1, 4, 9, 0.4);
    --card-shadow-compact: 0 1px 3px rgba(1, 4, 9, 0.2);
    /* Table Colors */
    --table-header-bg: rgba(88, 166, 255, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(88, 166, 255, 0.1);
    --nav-active: rgba(88, 166, 255, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(88, 166, 255, 0.9), rgba(121, 192, 255, 0.9));
}

/* ====== THEME 16: DISCORD LIGHT ====== */
.theme-discord-light {
    /* Base RGB Values */
    --primary-rgb: 88, 101, 242;
    --secondary-rgb: 114, 137, 218;
    --text-secondary-rgb: 116, 127, 141;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 248, 249, 250;
    --border-divider-rgb: 228, 230, 235;
    --info-light-rgb: 88, 101, 242;
    --success-light-rgb: 67, 181, 129;
    --warning-light-rgb: 250, 166, 26;
    --danger-light-rgb: 237, 66, 69;
    /* Primary Colors - Discord Blurple */
    --primary: #5865f2;
    --primary-hover: #4752c4;
    --primary-light: rgba(88, 101, 242, 0.1);
    --primary-lighter: rgba(88, 101, 242, 0.05);
    --primary-color: #5865f2;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #5865f2, #7289da);
    /* Secondary color - Light Blurple */
    --secondary: #7289da;
    --secondary-hover: #677bc4;
    --secondary-light: rgba(114, 137, 218, 0.1);
    --secondary-gradient: linear-gradient(90deg, #7289da, #677bc4);
    /* Success Colors */
    --success: #43b581;
    --success-hover: #3ca374;
    --success-light: rgba(67, 181, 129, 0.1);
    --success-color: #43b581;
    --success-bg: rgba(67, 181, 129, 0.1);
    --success-border-light: rgba(67, 181, 129, 0.2);
    --success-gradient: linear-gradient(90deg, #43b581, #3ca374);
    /* Backgrounds */
    --body-bg: #ffffff;
    --sidebar-bg: #f8f9fa;
    --content-bg: #ffffff;
    --subtle-bg: #f2f3f5;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #ebedef;
    /* Text Colors */
    --text-primary: #2e3338;
    --text-secondary: #747f8d;
    --text-muted: #99aab5;
    --text-light: #c7ccd1;
    --text-on-primary: #ffffff;
    --placeholder-color: #99aab5;
    /* Borders */
    --border-color: rgba(88, 101, 242, 0.15);
    --border-light: rgba(88, 101, 242, 0.08);
    --border-divider: #e4e6eb;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(46, 51, 56, 0.04);
    --shadow-sm: 0 2px 4px rgba(46, 51, 56, 0.06);
    --shadow-md: 0 4px 8px rgba(46, 51, 56, 0.08);
    --shadow-lg: 0 8px 16px rgba(46, 51, 56, 0.10);
    --shadow-xl: 0 12px 24px rgba(46, 51, 56, 0.12);
    --shadow-focus: 0 0 0 3px rgba(88, 101, 242, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(88, 101, 242, 0.08);
    --table-striped-bg: rgba(88, 101, 242, 0.02);
    --table-hover-bg: rgba(88, 101, 242, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(88, 101, 242, 0.08);
    --nav-active: rgba(88, 101, 242, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(88, 101, 242, 0.9), rgba(114, 137, 218, 0.9));
}

/* ====== THEME 17: DISCORD DARK ====== */
.theme-discord-dark {
    /* Base RGB Values */
    --primary-rgb: 88, 101, 242;
    --secondary-rgb: 114, 137, 218;
    --text-secondary-rgb: 185, 187, 190;
    --content-bg-rgb: 54, 57, 63;
    --subtle-bg-rgb: 64, 68, 75;
    --border-divider-rgb: 78, 80, 88;
    --info-light-rgb: 88, 101, 242;
    --success-light-rgb: 67, 181, 129;
    --warning-light-rgb: 250, 166, 26;
    --danger-light-rgb: 237, 66, 69;
    /* Primary Colors */
    --primary: #5865f2;
    --primary-hover: #4752c4;
    --primary-light: rgba(88, 101, 242, 0.15);
    --primary-lighter: rgba(88, 101, 242, 0.08);
    --primary-color: #5865f2;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #5865f2, #7289da);
    /* Secondary color */
    --secondary: #7289da;
    --secondary-hover: #677bc4;
    --secondary-light: rgba(114, 137, 218, 0.15);
    --secondary-gradient: linear-gradient(90deg, #7289da, #677bc4);
    /* Success Colors */
    --success: #43b581;
    --success-hover: #3ca374;
    --success-light: rgba(67, 181, 129, 0.15);
    --success-color: #43b581;
    --success-bg: rgba(67, 181, 129, 0.12);
    --success-border-light: rgba(67, 181, 129, 0.25);
    --success-gradient: linear-gradient(90deg, #43b581, #3ca374);
    /* Backgrounds */
    --body-bg: #36393f;
    --sidebar-bg: #2f3136;
    --content-bg: #36393f;
    --subtle-bg: #40444b;
    --modal-bg: #36393f;
    --dropdown-bg: #40444b;
    --input-bg: #40444b;
    /* Text Colors */
    --text-primary: #dcddde;
    --text-secondary: #b9bbbe;
    --text-muted: #8e9297;
    --text-light: #72767d;
    --text-on-primary: #ffffff;
    --placeholder-color: #8e9297;
    /* Borders */
    --border-color: rgba(88, 101, 242, 0.15);
    --border-light: rgba(88, 101, 242, 0.08);
    --border-divider: #4e5058;
    /* Shadows */
    --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 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.7);
    --shadow-focus: 0 0 0 3px rgba(88, 101, 242, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.2);
    /* Table Colors */
    --table-header-bg: rgba(88, 101, 242, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(88, 101, 242, 0.1);
    --nav-active: rgba(88, 101, 242, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(88, 101, 242, 0.9), rgba(114, 137, 218, 0.9));
}

/* ====== THEME 18: ROSE GOLD LIGHT ====== */
.theme-rose-gold-light {
    /* Base RGB Values */
    --primary-rgb: 233, 150, 122;
    --secondary-rgb: 205, 92, 92;
    --text-secondary-rgb: 139, 119, 101;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 253, 250, 246;
    --border-divider-rgb: 245, 222, 213;
    --info-light-rgb: 176, 122, 161;
    --success-light-rgb: 46, 125, 50;
    --warning-light-rgb: 255, 152, 0;
    --danger-light-rgb: 244, 67, 54;
    /* Primary Colors - Rose Gold */
    --primary: #e9967a;
    --primary-hover: #cd853f;
    --primary-light: rgba(233, 150, 122, 0.1);
    --primary-lighter: rgba(233, 150, 122, 0.05);
    --primary-color: #e9967a;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #e9967a, #cd5c5c);
    /* Secondary color - Deep Rose */
    --secondary: #cd5c5c;
    --secondary-hover: #b22222;
    --secondary-light: rgba(205, 92, 92, 0.1);
    --secondary-gradient: linear-gradient(90deg, #cd5c5c, #b22222);
    /* Success Colors */
    --success: #2e7d32;
    --success-hover: #1b5e20;
    --success-light: rgba(46, 125, 50, 0.1);
    --success-color: #2e7d32;
    --success-bg: rgba(46, 125, 50, 0.1);
    --success-border-light: rgba(46, 125, 50, 0.2);
    --success-gradient: linear-gradient(90deg, #2e7d32, #1b5e20);
    /* Backgrounds */
    --body-bg: #fdfaf6;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #f8f4f0;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #f5ded5;
    /* Text Colors */
    --text-primary: #4a3c2a;
    --text-secondary: #8b7765;
    --text-muted: #b5a394;
    --text-light: #d7cdc2;
    --text-on-primary: #ffffff;
    --placeholder-color: #b5a394;
    /* Borders */
    --border-color: rgba(233, 150, 122, 0.15);
    --border-light: rgba(233, 150, 122, 0.08);
    --border-divider: #f5ded5;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(74, 60, 42, 0.04);
    --shadow-sm: 0 2px 4px rgba(74, 60, 42, 0.06);
    --shadow-md: 0 4px 8px rgba(74, 60, 42, 0.08);
    --shadow-lg: 0 8px 16px rgba(74, 60, 42, 0.10);
    --shadow-xl: 0 12px 24px rgba(74, 60, 42, 0.12);
    --shadow-focus: 0 0 0 3px rgba(233, 150, 122, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(233, 150, 122, 0.08);
    --table-striped-bg: rgba(233, 150, 122, 0.02);
    --table-hover-bg: rgba(233, 150, 122, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(233, 150, 122, 0.08);
    --nav-active: rgba(233, 150, 122, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(233, 150, 122, 0.9), rgba(205, 92, 92, 0.9));
}

/* ====== THEME 19: ROSE GOLD DARK ====== */
.theme-rose-gold-dark {
    /* Base RGB Values */
    --primary-rgb: 240, 128, 128;
    --secondary-rgb: 255, 182, 193;
    --text-secondary-rgb: 219, 192, 179;
    --content-bg-rgb: 40, 29, 23;
    --subtle-bg-rgb: 51, 37, 29;
    --border-divider-rgb: 74, 54, 42;
    --info-light-rgb: 221, 160, 221;
    --success-light-rgb: 129, 199, 132;
    --warning-light-rgb: 255, 183, 77;
    --danger-light-rgb: 229, 115, 115;
    /* Primary Colors */
    --primary: #f08080;
    --primary-hover: #ffb6c1;
    --primary-light: rgba(240, 128, 128, 0.15);
    --primary-lighter: rgba(240, 128, 128, 0.08);
    --primary-color: #f08080;
    --primary-color-detail: #281d17;
    --primary-gradient: linear-gradient(135deg, #f08080, #ffb6c1);
    /* Secondary color */
    --secondary: #ffb6c1;
    --secondary-hover: #ffc0cb;
    --secondary-light: rgba(255, 182, 193, 0.15);
    --secondary-gradient: linear-gradient(90deg, #ffb6c1, #ffc0cb);
    /* Success Colors */
    --success: #81c784;
    --success-hover: #66bb6a;
    --success-light: rgba(129, 199, 132, 0.15);
    --success-color: #81c784;
    --success-bg: rgba(129, 199, 132, 0.12);
    --success-border-light: rgba(129, 199, 132, 0.25);
    --success-gradient: linear-gradient(90deg, #81c784, #66bb6a);
    /* Backgrounds */
    --body-bg: #281d17;
    --sidebar-bg: #33251d;
    --content-bg: #281d17;
    --subtle-bg: #3d2e22;
    --modal-bg: #33251d;
    --dropdown-bg: #4a362a;
    --input-bg: #4a362a;
    /* Text Colors */
    --text-primary: #f5e6d3;
    --text-secondary: #dbc0b3;
    --text-muted: #b8967e;
    --text-light: #8b6b4f;
    --text-on-primary: #281d17;
    --placeholder-color: #b8967e;
    /* Borders */
    --border-color: rgba(240, 128, 128, 0.15);
    --border-light: rgba(240, 128, 128, 0.08);
    --border-divider: #4a362a;
    /* Shadows */
    --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 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.7);
    --shadow-focus: 0 0 0 3px rgba(240, 128, 128, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.2);
    /* Table Colors */
    --table-header-bg: rgba(240, 128, 128, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(240, 128, 128, 0.1);
    --nav-active: rgba(240, 128, 128, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(240, 128, 128, 0.9), rgba(255, 182, 193, 0.9));
}

/* ====== THEME 20: MIDNIGHT BLUE LIGHT ====== */
.theme-midnight-light {
    /* Base RGB Values */
    --primary-rgb: 25, 25, 112;
    --secondary-rgb: 72, 61, 139;
    --text-secondary-rgb: 105, 105, 105;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 248, 248, 255;
    --border-divider-rgb: 230, 230, 250;
    --info-light-rgb: 123, 104, 238;
    --success-light-rgb: 34, 139, 34;
    --warning-light-rgb: 255, 165, 0;
    --danger-light-rgb: 220, 20, 60;
    /* Primary Colors - Midnight Blue */
    --primary: #191970;
    --primary-hover: #000080;
    --primary-light: rgba(25, 25, 112, 0.1);
    --primary-lighter: rgba(25, 25, 112, 0.05);
    --primary-color: #191970;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #191970, #483d8b);
    /* Secondary color - Dark Slate Blue */
    --secondary: #483d8b;
    --secondary-hover: #6a5acd;
    --secondary-light: rgba(72, 61, 139, 0.1);
    --secondary-gradient: linear-gradient(90deg, #483d8b, #6a5acd);
    /* Success Colors */
    --success: #228b22;
    --success-hover: #006400;
    --success-light: rgba(34, 139, 34, 0.1);
    --success-color: #228b22;
    --success-bg: rgba(34, 139, 34, 0.1);
    --success-border-light: rgba(34, 139, 34, 0.2);
    --success-gradient: linear-gradient(90deg, #228b22, #006400);
    /* Backgrounds */
    --body-bg: #f8f8ff;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #f0f0ff;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #e6e6fa;
    /* Text Colors */
    --text-primary: #2f2f2f;
    --text-secondary: #696969;
    --text-muted: #a9a9a9;
    --text-light: #d3d3d3;
    --text-on-primary: #ffffff;
    --placeholder-color: #a9a9a9;
    /* Borders */
    --border-color: rgba(25, 25, 112, 0.15);
    --border-light: rgba(25, 25, 112, 0.08);
    --border-divider: #e6e6fa;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(47, 47, 47, 0.04);
    --shadow-sm: 0 2px 4px rgba(47, 47, 47, 0.06);
    --shadow-md: 0 4px 8px rgba(47, 47, 47, 0.08);
    --shadow-lg: 0 8px 16px rgba(47, 47, 47, 0.10);
    --shadow-xl: 0 12px 24px rgba(47, 47, 47, 0.12);
    --shadow-focus: 0 0 0 3px rgba(25, 25, 112, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(25, 25, 112, 0.08);
    --table-striped-bg: rgba(25, 25, 112, 0.02);
    --table-hover-bg: rgba(25, 25, 112, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(25, 25, 112, 0.08);
    --nav-active: rgba(25, 25, 112, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(25, 25, 112, 0.9), rgba(72, 61, 139, 0.9));
}

/* ====== THEME 21: MIDNIGHT BLUE DARK ====== */
.theme-midnight-dark {
    /* Base RGB Values */
    --primary-rgb: 106, 90, 205;
    --secondary-rgb: 147, 112, 219;
    --text-secondary-rgb: 192, 192, 192;
    --content-bg-rgb: 16, 16, 32;
    --subtle-bg-rgb: 25, 25, 48;
    --border-divider-rgb: 47, 47, 79;
    --info-light-rgb: 138, 43, 226;
    --success-light-rgb: 50, 205, 50;
    --warning-light-rgb: 255, 215, 0;
    --danger-light-rgb: 255, 105, 180;
    /* Primary Colors */
    --primary: #6a5acd;
    --primary-hover: #9370db;
    --primary-light: rgba(106, 90, 205, 0.15);
    --primary-lighter: rgba(106, 90, 205, 0.08);
    --primary-color: #6a5acd;
    --primary-color-detail: #101020;
    --primary-gradient: linear-gradient(135deg, #6a5acd, #9370db);
    /* Secondary color */
    --secondary: #9370db;
    --secondary-hover: #ba55d3;
    --secondary-light: rgba(147, 112, 219, 0.15);
    --secondary-gradient: linear-gradient(90deg, #9370db, #ba55d3);
    /* Success Colors */
    --success: #32cd32;
    --success-hover: #00ff00;
    --success-light: rgba(50, 205, 50, 0.15);
    --success-color: #32cd32;
    --success-bg: rgba(50, 205, 50, 0.12);
    --success-border-light: rgba(50, 205, 50, 0.25);
    --success-gradient: linear-gradient(90deg, #32cd32, #00ff00);
    /* Backgrounds */
    --body-bg: #101020;
    --sidebar-bg: #191930;
    --content-bg: #101020;
    --subtle-bg: #1f1f3a;
    --modal-bg: #191930;
    --dropdown-bg: #2f2f4f;
    --input-bg: #2f2f4f;
    /* Text Colors */
    --text-primary: #f0f0ff;
    --text-secondary: #c0c0c0;
    --text-muted: #9370db;
    --text-light: #6a5acd;
    --text-on-primary: #101020;
    --placeholder-color: #9370db;
    /* Borders */
    --border-color: rgba(106, 90, 205, 0.15);
    --border-light: rgba(106, 90, 205, 0.08);
    --border-divider: #2f2f4f;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.8);
    --shadow-focus: 0 0 0 3px rgba(106, 90, 205, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.5);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* Table Colors */
    --table-header-bg: rgba(106, 90, 205, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(106, 90, 205, 0.1);
    --nav-active: rgba(106, 90, 205, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(106, 90, 205, 0.9), rgba(147, 112, 219, 0.9));
}

/* ====== THEME 22: CORAL REEF LIGHT ====== */
.theme-coral-light {
    /* Base RGB Values */
    --primary-rgb: 255, 127, 80;
    --secondary-rgb: 255, 99, 71;
    --text-secondary-rgb: 139, 69, 19;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 255, 248, 240;
    --border-divider-rgb: 255, 228, 196;
    --info-light-rgb: 64, 224, 208;
    --success-light-rgb: 46, 125, 50;
    --warning-light-rgb: 255, 193, 7;
    --danger-light-rgb: 244, 67, 54;
    /* Primary Colors - Coral */
    --primary: #ff7f50;
    --primary-hover: #ff6347;
    --primary-light: rgba(255, 127, 80, 0.1);
    --primary-lighter: rgba(255, 127, 80, 0.05);
    --primary-color: #ff7f50;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #ff7f50, #ff6347);
    /* Secondary color - Tomato */
    --secondary: #ff6347;
    --secondary-hover: #ff4500;
    --secondary-light: rgba(255, 99, 71, 0.1);
    --secondary-gradient: linear-gradient(90deg, #ff6347, #ff4500);
    /* Success Colors */
    --success: #2e7d32;
    --success-hover: #1b5e20;
    --success-light: rgba(46, 125, 50, 0.1);
    --success-color: #2e7d32;
    --success-bg: rgba(46, 125, 50, 0.1);
    --success-border-light: rgba(46, 125, 50, 0.2);
    --success-gradient: linear-gradient(90deg, #2e7d32, #1b5e20);
    /* Backgrounds */
    --body-bg: #fff8f0;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #ffeee6;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #ffe4c4;
    /* Text Colors */
    --text-primary: #8b4513;
    --text-secondary: #cd853f;
    --text-muted: #deb887;
    --text-light: #f5deb3;
    --text-on-primary: #ffffff;
    --placeholder-color: #deb887;
    /* Borders */
    --border-color: rgba(255, 127, 80, 0.15);
    --border-light: rgba(255, 127, 80, 0.08);
    --border-divider: #ffe4c4;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(139, 69, 19, 0.04);
    --shadow-sm: 0 2px 4px rgba(139, 69, 19, 0.06);
    --shadow-md: 0 4px 8px rgba(139, 69, 19, 0.08);
    --shadow-lg: 0 8px 16px rgba(139, 69, 19, 0.10);
    --shadow-xl: 0 12px 24px rgba(139, 69, 19, 0.12);
    --shadow-focus: 0 0 0 3px rgba(255, 127, 80, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(255, 127, 80, 0.08);
    --table-striped-bg: rgba(255, 127, 80, 0.02);
    --table-hover-bg: rgba(255, 127, 80, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(255, 127, 80, 0.08);
    --nav-active: rgba(255, 127, 80, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(255, 127, 80, 0.9), rgba(255, 99, 71, 0.9));
}

/* ====== THEME 23: CORAL REEF DARK ====== */
.theme-coral-dark {
    /* Base RGB Values */
    --primary-rgb: 255, 160, 122;
    --secondary-rgb: 255, 182, 193;
    --text-secondary-rgb: 255, 218, 185;
    --content-bg-rgb: 47, 31, 23;
    --subtle-bg-rgb: 61, 39, 29;
    --border-divider-rgb: 92, 58, 42;
    --info-light-rgb: 175, 238, 238;
    --success-light-rgb: 144, 238, 144;
    --warning-light-rgb: 255, 215, 0;
    --danger-light-rgb: 255, 105, 180;
    /* Primary Colors */
    --primary: #ffa07a;
    --primary-hover: #ffb6c1;
    --primary-light: rgba(255, 160, 122, 0.15);
    --primary-lighter: rgba(255, 160, 122, 0.08);
    --primary-color: #ffa07a;
    --primary-color-detail: #2f1f17;
    --primary-gradient: linear-gradient(135deg, #ffa07a, #ffb6c1);
    /* Secondary color */
    --secondary: #ffb6c1;
    --secondary-hover: #ffc0cb;
    --secondary-light: rgba(255, 182, 193, 0.15);
    --secondary-gradient: linear-gradient(90deg, #ffb6c1, #ffc0cb);
    /* Success Colors */
    --success: #90ee90;
    --success-hover: #98fb98;
    --success-light: rgba(144, 238, 144, 0.15);
    --success-color: #90ee90;
    --success-bg: rgba(144, 238, 144, 0.12);
    --success-border-light: rgba(144, 238, 144, 0.25);
    --success-gradient: linear-gradient(90deg, #90ee90, #98fb98);
    /* Backgrounds */
    --body-bg: #2f1f17;
    --sidebar-bg: #3d271d;
    --content-bg: #2f1f17;
    --subtle-bg: #4a3025;
    --modal-bg: #3d271d;
    --dropdown-bg: #5c3a2a;
    --input-bg: #5c3a2a;
    /* Text Colors */
    --text-primary: #ffeee6;
    --text-secondary: #ffdab9;
    --text-muted: #deb887;
    --text-light: #cd853f;
    --text-on-primary: #2f1f17;
    --placeholder-color: #deb887;
    /* Borders */
    --border-color: rgba(255, 160, 122, 0.15);
    --border-light: rgba(255, 160, 122, 0.08);
    --border-divider: #5c3a2a;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.8);
    --shadow-focus: 0 0 0 3px rgba(255, 160, 122, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.5);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* Table Colors */
    --table-header-bg: rgba(255, 160, 122, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(255, 160, 122, 0.1);
    --nav-active: rgba(255, 160, 122, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(255, 160, 122, 0.9), rgba(255, 182, 193, 0.9));
}

/* ====== THEME 24: LAVENDER FIELDS LIGHT ====== */
.theme-lavender-light {
    /* Base RGB Values */
    --primary-rgb: 147, 112, 219;
    --secondary-rgb: 186, 85, 211;
    --text-secondary-rgb: 112, 128, 144;
    --content-bg-rgb: 255, 255, 255;
    --subtle-bg-rgb: 248, 248, 255;
    --border-divider-rgb: 230, 230, 250;
    --info-light-rgb: 123, 104, 238;
    --success-light-rgb: 60, 179, 113;
    --warning-light-rgb: 255, 215, 0;
    --danger-light-rgb: 219, 112, 147;
    /* Primary Colors - Medium Orchid */
    --primary: #9370db;
    --primary-hover: #8a2be2;
    --primary-light: rgba(147, 112, 219, 0.1);
    --primary-lighter: rgba(147, 112, 219, 0.05);
    --primary-color: #9370db;
    --primary-color-detail: #ffffff;
    --primary-gradient: linear-gradient(135deg, #9370db, #ba55d3);
    /* Secondary color - Medium Orchid */
    --secondary: #ba55d3;
    --secondary-hover: #da70d6;
    --secondary-light: rgba(186, 85, 211, 0.1);
    --secondary-gradient: linear-gradient(90deg, #ba55d3, #da70d6);
    /* Success Colors */
    --success: #3cb371;
    --success-hover: #2e8b57;
    --success-light: rgba(60, 179, 113, 0.1);
    --success-color: #3cb371;
    --success-bg: rgba(60, 179, 113, 0.1);
    --success-border-light: rgba(60, 179, 113, 0.2);
    --success-gradient: linear-gradient(90deg, #3cb371, #2e8b57);
    /* Backgrounds */
    --body-bg: #f8f8ff;
    --sidebar-bg: #ffffff;
    --content-bg: #ffffff;
    --subtle-bg: #f0f0ff;
    --modal-bg: #ffffff;
    --dropdown-bg: #ffffff;
    --input-bg: #e6e6fa;
    /* Text Colors */
    --text-primary: #2f2f2f;
    --text-secondary: #708090;
    --text-muted: #b0b0b0;
    --text-light: #d3d3d3;
    --text-on-primary: #ffffff;
    --placeholder-color: #b0b0b0;
    /* Borders */
    --border-color: rgba(147, 112, 219, 0.15);
    --border-light: rgba(147, 112, 219, 0.08);
    --border-divider: #e6e6fa;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(47, 47, 47, 0.04);
    --shadow-sm: 0 2px 4px rgba(47, 47, 47, 0.06);
    --shadow-md: 0 4px 8px rgba(47, 47, 47, 0.08);
    --shadow-lg: 0 8px 16px rgba(47, 47, 47, 0.10);
    --shadow-xl: 0 12px 24px rgba(47, 47, 47, 0.12);
    --shadow-focus: 0 0 0 3px rgba(147, 112, 219, 0.25);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.06);
    /* Table Colors */
    --table-header-bg: rgba(147, 112, 219, 0.08);
    --table-striped-bg: rgba(147, 112, 219, 0.02);
    --table-hover-bg: rgba(147, 112, 219, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(147, 112, 219, 0.08);
    --nav-active: rgba(147, 112, 219, 0.15);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(147, 112, 219, 0.9), rgba(186, 85, 211, 0.9));
}

/* ====== THEME 25: LAVENDER FIELDS DARK ====== */
.theme-lavender-dark {
    /* Base RGB Values */
    --primary-rgb: 221, 160, 221;
    --secondary-rgb: 218, 112, 214;
    --text-secondary-rgb: 199, 199, 199;
    --content-bg-rgb: 25, 25, 40;
    --subtle-bg-rgb: 35, 35, 50;
    --border-divider-rgb: 55, 55, 75;
    --info-light-rgb: 186, 85, 211;
    --success-light-rgb: 152, 251, 152;
    --warning-light-rgb: 255, 255, 224;
    --danger-light-rgb: 255, 182, 193;
    /* Primary Colors */
    --primary: #dda0dd;
    --primary-hover: #ee82ee;
    --primary-light: rgba(221, 160, 221, 0.15);
    --primary-lighter: rgba(221, 160, 221, 0.08);
    --primary-color: #dda0dd;
    --primary-color-detail: #191928;
    --primary-gradient: linear-gradient(135deg, #dda0dd, #da70d6);
    /* Secondary color */
    --secondary: #da70d6;
    --secondary-hover: #ff69b4;
    --secondary-light: rgba(218, 112, 214, 0.15);
    --secondary-gradient: linear-gradient(90deg, #da70d6, #ff69b4);
    /* Success Colors */
    --success: #98fb98;
    --success-hover: #90ee90;
    --success-light: rgba(152, 251, 152, 0.15);
    --success-color: #98fb98;
    --success-bg: rgba(152, 251, 152, 0.12);
    --success-border-light: rgba(152, 251, 152, 0.25);
    --success-gradient: linear-gradient(90deg, #98fb98, #90ee90);
    /* Backgrounds */
    --body-bg: #191928;
    --sidebar-bg: #232332;
    --content-bg: #191928;
    --subtle-bg: #2d2d3c;
    --modal-bg: #232332;
    --dropdown-bg: #37374b;
    --input-bg: #37374b;
    /* Text Colors */
    --text-primary: #f5f5ff;
    --text-secondary: #c7c7c7;
    --text-muted: #9370db;
    --text-light: #6a5acd;
    --text-on-primary: #191928;
    --placeholder-color: #9370db;
    /* Borders */
    --border-color: rgba(221, 160, 221, 0.15);
    --border-light: rgba(221, 160, 221, 0.08);
    --border-divider: #37374b;
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.8);
    --shadow-focus: 0 0 0 3px rgba(221, 160, 221, 0.3);
    /* Enhanced shadows for cards */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.5);
    --card-shadow-compact: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* Table Colors */
    --table-header-bg: rgba(221, 160, 221, 0.1);
    --table-striped-bg: rgba(255, 255, 255, 0.02);
    --table-hover-bg: rgba(255, 255, 255, 0.04);
    /* Navigation Colors */
    --nav-hover: rgba(221, 160, 221, 0.1);
    --nav-active: rgba(221, 160, 221, 0.2);
    /* Live gradient */
    --live-gradient: linear-gradient(135deg, rgba(221, 160, 221, 0.9), rgba(218, 112, 214, 0.9));
}

/* Add all new themes to the shared common properties */
[class*="theme-outlook-"],
[class*="theme-github-"],
[class*="theme-discord-"],
[class*="theme-rose-gold-"],
[class*="theme-midnight-"],
[class*="theme-coral-"],
[class*="theme-lavender-"] {
    /* Warning Colors - Same across all themes */
    --warning: #f5a623;
    --warning-hover: #e09612;
    --warning-light: rgba(245, 166, 35, 0.1);
    --warning-gradient: linear-gradient(90deg, #f5a623, #e09612);
    /* Danger Colors - Same across all themes */
    --danger: #e53935;
    --danger-hover: #d32f2f;
    --danger-light: rgba(229, 57, 53, 0.1);
    --danger-color: #e53935;
    --danger-bg: rgba(229, 57, 53, 0.1);
    --danger-border-light: rgba(229, 57, 53, 0.2);
    --danger-gradient: linear-gradient(90deg, #e53935, #d32f2f);
    /* Info Colors - Same across all themes */
    --info: #1976d2;
    --info-hover: #1565c0;
    --info-light: rgba(25, 118, 210, 0.1);
    --info-gradient: linear-gradient(90deg, #1976d2, #1565c0);
    /* Bootstrap Table compatibility */
    --bs-table-striped-bg: var(--table-striped-bg);
    --bs-table-hover-bg: var(--table-hover-bg);
    --bs-table-border-color: var(--table-border-color);
    /* Value indicators */
    --positive-value: var(--success);
    --negative-value: var(--danger);
    /* Scale & Status indicators inherit from status colors */
    --scale-online: var(--status-online);
    --scale-stale: var(--status-stale);
    --scale-offline: var(--status-offline);
    --scale-online-bg: var(--status-online-bg);
    --scale-stale-bg: var(--status-stale-bg);
    --scale-offline-bg: var(--status-offline-bg);
}

/* Critical theme styles for new themes - prevents flash during navigation */
html.theme-outlook-blue-light {
    background-color: #faf9f8;
    color: #323130;
}

html.theme-outlook-blue-dark {
    background-color: #201f1e;
    color: #ffffff;
}

html.theme-github-light {
    background-color: #ffffff;
    color: #24292f;
}

html.theme-github-dark {
    background-color: #0d1117;
    color: #f0f6fc;
}

html.theme-discord-light {
    background-color: #ffffff;
    color: #2e3338;
}

html.theme-discord-dark {
    background-color: #36393f;
    color: #dcddde;
}

html.theme-rose-gold-light {
    background-color: #fdfaf6;
    color: #4a3c2a;
}

html.theme-rose-gold-dark {
    background-color: #281d17;
    color: #f5e6d3;
}

html.theme-midnight-light {
    background-color: #f8f8ff;
    color: #2f2f2f;
}

html.theme-midnight-dark {
    background-color: #101020;
    color: #f0f0ff;
}

html.theme-coral-light {
    background-color: #fff8f0;
    color: #8b4513;
}

html.theme-coral-dark {
    background-color: #2f1f17;
    color: #ffeee6;
}

html.theme-lavender-light {
    background-color: #f8f8ff;
    color: #2f2f2f;
}

html.theme-lavender-dark {
    background-color: #191928;
    color: #f5f5ff;
}

/* Smooth hover effects for all new themes */
[class*="theme-outlook-"] .roovia-nav-link:hover,
[class*="theme-github-"] .roovia-nav-link:hover,
[class*="theme-discord-"] .roovia-nav-link:hover,
[class*="theme-rose-gold-"] .roovia-nav-link:hover,
[class*="theme-midnight-"] .roovia-nav-link:hover,
[class*="theme-coral-"] .roovia-nav-link:hover,
[class*="theme-lavender-"] .roovia-nav-link:hover {
    background-color: var(--nav-hover);
    transform: translateX(4px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Card enhancements for new themes */
[class*="theme-outlook-"] .card,
[class*="theme-github-"] .card,
[class*="theme-discord-"] .card,
[class*="theme-rose-gold-"] .card,
[class*="theme-midnight-"] .card,
[class*="theme-coral-"] .card,
[class*="theme-lavender-"] .card {
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
}

    [class*="theme-outlook-"] .card:hover,
    [class*="theme-github-"] .card:hover,
    [class*="theme-discord-"] .card:hover,
    [class*="theme-rose-gold-"] .card:hover,
    [class*="theme-midnight-"] .card:hover,
    [class*="theme-coral-"] .card:hover,
    [class*="theme-lavender-"] .card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-2px);
    }

/* Premium button effects for new themes */
[class*="theme-outlook-"] .btn-primary,
[class*="theme-github-"] .btn-primary,
[class*="theme-discord-"] .btn-primary,
[class*="theme-rose-gold-"] .btn-primary,
[class*="theme-midnight-"] .btn-primary,
[class*="theme-coral-"] .btn-primary,
[class*="theme-lavender-"] .btn-primary {
    background: var(--primary-gradient);
    border: none;
    color: var(--text-on-primary);
    font-weight: 500;
    letter-spacing: 0.025em;
    transition: all 0.3s ease;
}

    [class*="theme-outlook-"] .btn-primary:hover,
    [class*="theme-github-"] .btn-primary:hover,
    [class*="theme-discord-"] .btn-primary:hover,
    [class*="theme-rose-gold-"] .btn-primary:hover,
    [class*="theme-midnight-"] .btn-primary:hover,
    [class*="theme-coral-"] .btn-primary:hover,
    [class*="theme-lavender-"] .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-lg);
    }

/* Input enhancements for new themes */
[class*="theme-outlook-"] .form-control,
[class*="theme-github-"] .form-control,
[class*="theme-discord-"] .form-control,
[class*="theme-rose-gold-"] .form-control,
[class*="theme-midnight-"] .form-control,
[class*="theme-coral-"] .form-control,
[class*="theme-lavender-"] .form-control {
    background: var(--input-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-md);
    transition: all 0.3s ease;
}

    [class*="theme-outlook-"] .form-control:focus,
    [class*="theme-github-"] .form-control:focus,
    [class*="theme-discord-"] .form-control:focus,
    [class*="theme-rose-gold-"] .form-control:focus,
    [class*="theme-midnight-"] .form-control:focus,
    [class*="theme-coral-"] .form-control:focus,
    [class*="theme-lavender-"] .form-control:focus {
        border-color: var(--primary);
        box-shadow: var(--shadow-focus);
        background: var(--content-bg);
    }

/* Enhanced theme modal preview styles */
.theme-preview {
    position: relative;
    width: 100%;
    height: 80px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--preview-bg);
    margin-bottom: 0.75rem;
}

.theme-preview-header {
    height: 20px;
    background: var(--preview-primary);
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 6px;
}

.theme-preview-nav {
    width: 30px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.theme-preview-brand {
    width: 40px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.theme-preview-body {
    display: flex;
    height: 60px;
}

.theme-preview-sidebar {
    width: 30px;
    background: var(--preview-secondary);
    opacity: 0.8;
}

.theme-preview-content {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theme-preview-card {
    height: 16px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

[class*="-dark"] .theme-preview-card {
    background: rgba(255, 255, 255, 0.1);
}

/* Animation for theme switching */
@keyframes themeTransition {
    0% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

html[class*="theme-"] {
    animation: themeTransition 0.3s ease-out;
}

/* Enhanced focus states for accessibility */
[class*="theme-"] :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

/* Smooth scrolling for all themes */
[class*="theme-"] {
    scroll-behavior: smooth;
}

    /* Enhanced loading states */
    [class*="theme-"] .loading {
        background: var(--subtle-bg);
        background-image: linear-gradient( 90deg, transparent, var(--primary-light), transparent );
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
    }

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ====== PREMIUM THEME EFFECTS & ANIMATIONS ====== */

/* Advanced Theme Transition System */
html.theme-transitioning {
    transition: none !important;
}

html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

/* Smooth Theme Application */
html {
    transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

body {
    transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                color 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ====== PREMIUM NAVIGATION EFFECTS ====== */

/* Enhanced Sidebar Animations */
.roovia-sidebar {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.roovia-sidebar.collapsed {
    transform: translateX(0);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Premium Navigation Link Effects */
.roovia-nav-link {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: var(--border-radius-lg);
}

.roovia-nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
    transition: left 0.6s ease;
    z-index: 0;
}

.roovia-nav-link:hover::before {
    left: 100%;
}

.roovia-nav-link > * {
    position: relative;
    z-index: 1;
}

.roovia-nav-link:hover {
    background: var(--nav-hover);
    transform: translateX(8px) scale(1.02);
    box-shadow: var(--shadow-md);
}

.roovia-nav-link.active {
    background: var(--primary-gradient);
    color: var(--text-on-primary);
    transform: translateX(0px) !important;
    box-shadow: var(--shadow-lg);
}



@keyframes activeIndicator {
    0% { height: 0%; opacity: 0; }
    100% { height: 60%; opacity: 1; }
}

/* Enhanced Icon Animations */
.roovia-nav-link i {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.roovia-nav-link:hover i {
    transform: scale(1.2) rotate(5deg);
    filter: brightness(1.2);
}

.roovia-nav-link.active i {
    transform: scale(1.1);
}

/* ====== PREMIUM CARD EFFECTS ====== */

/* Enhanced Card System */
.card,
.roovia-card {
    position: relative;
    background: var(--content-bg);
    border: 1px solid var(--border-divider);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
    overflow: hidden;
}

.card::before,
.roovia-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover::before,
.roovia-card:hover::before {
    opacity: 1;
}

.card:hover,
.roovia-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--primary-light);
}

/* Shimmer Effect for Loading Cards */
.card.loading,
.roovia-card.loading {
    background: linear-gradient(
        110deg,
        var(--subtle-bg) 8%,
        var(--primary-lighter) 18%,
        var(--subtle-bg) 33%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ====== PREMIUM BUTTON EFFECTS ====== */

/* Enhanced Primary Buttons */
.btn-primary,
.roovia-btn-primary {
    position: relative;
    background: var(--primary-gradient);
    border: none;
    color: var(--text-on-primary);
    font-weight: 600;
    letter-spacing: 0.025em;
    border-radius: var(--border-radius-lg);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.btn-primary::before,
.roovia-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn-primary:hover::before,
.roovia-btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover,
.roovia-btn-primary:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-xl);
    filter: brightness(1.1) saturate(1.2);
}

.btn-primary:active,
.roovia-btn-primary:active {
    transform: translateY(0) scale(1.02);
    transition: all 0.1s ease;
}

/* Ripple Effect