/* =========================================================
   Global Theme Variables
   ========================================================= */

:root {
    /* Primary blue identity */
    --color-primary: #153a80;
    --color-primary-hover: #1d4ed8;
    --color-primary-active: #0f3d8f;
    --color-primary-light: #eaf4ff;
    --color-primary-soft: #f4f8ff;
    --color-primary-border: #c7dcfb;
    --color-primary-focus: rgba(21, 58, 128, 0.16);
    --color-primary-shadow: rgba(21, 58, 128, 0.28);
    /* Secondary/dark actions */
    --color-secondary: #171c25;
    --color-secondary-hover: #262d3c;
    --color-secondary-active: #0f111a;
    /* Backgrounds */
    --color-page-background: #f4f6f8;
    --color-surface: #ffffff;
    --color-surface-soft: #f7f9fa;
    --color-surface-hover: #edf1f7;
    /* Text */
    --color-text: #141b25;
    --color-text-secondary: #525d66;
    --color-text-muted: #767f88;
    --color-text-on-primary: #ffffff;
    --color-text-on-dark: #ffffff;
    /* Borders */
    --color-border: #dce2e8;
    --color-border-light: #edf1f3;
    /* Hero */
    --hero-start: #10213d;
    --hero-end: #1f4d8c;
    --hero-label: #8ec5ff;
    --hero-description: #dce9f7;
    /* Status colors */
    --status-active-background: #eaf4ff;
    --status-active-text: #1d4ed8;
    --status-maintenance-background: #dbeafe;
    --status-maintenance-text: #2563eb;
    --status-inactive-background: #eef4ff;
    --status-inactive-text: #3b82f6;
    --status-default-background: #edf4ff;
    --status-default-text: #1e3a8a;
    /* Sizes */
    --page-max-width: 1200px;
    --details-max-width: 1100px;
    --radius-small: 12px;
    --radius-medium: 16px;
    --radius-large: 22px;
    --radius-xlarge: 28px;
    --radius-round: 999px;
    /* Shadows */
    --shadow-card: 0 10px 30px rgba(20, 38, 50, 0.08);
    --shadow-card-hover: 0 22px 45px rgba(20, 34, 50, 0.14);
    --shadow-hero: 0 18px 45px rgba(12, 20, 32, 0.2);
    --shadow-primary: 0 10px 25px var(--color-primary-shadow);
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.25s ease;
}

/* =========================================================
   Dark Theme
   يمكن تفعيله بإضافة class="dark" إلى body
   ========================================================= */

body.dark {
    --color-page-background: #0d1117;
    --color-surface: #141a22;
    --color-surface-soft: #19242b;
    --color-surface-hover: #212a38;
    --color-text: #f0f8fd;
    --color-text-secondary: #c3d4d7;
    --color-text-muted: #91a1a8;
    --color-border: #2f4249;
    --color-border-light: #222d37;
    --hero-start: #071426;
    --hero-end: #172637;
    --color-secondary: #243646;
    --color-secondary-hover: #31435d;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.25);
    --shadow-card-hover: 0 22px 45px rgba(0, 0, 0, 0.34);
}

/* =========================================================
   Layout and Navigation Variables
   ========================================================= */

:root {
    /* Sidebar */
    --sidebar-width: 250px;
    --sidebar-bg-start: #0f2b4a;
    --sidebar-bg-end: #1e4a7b;
    --sidebar-text: #dce9f7;
    --sidebar-text-muted: #9fb4c8;
    --sidebar-link-hover-bg: rgba(255, 255, 255, 0.10);
    --sidebar-link-active-bg: rgba(134, 200, 239, 0.18);
    --sidebar-link-active-text: #ffffff;
    --sidebar-link-active-border: #60a5fa;
    /* Navbar toggler */
    --toggler-bg: rgba(255, 255, 255, 0.10);
    --toggler-bg-hover: rgba(255, 255, 255, 0.18);
    --toggler-bg-active: rgba(255, 255, 255, 0.28);
    --toggler-border: rgba(255, 255, 255, 0.14);
    --toggler-icon: rgba(255, 255, 255, 0.78);
    /* Top row */
    --top-row-height: 3.5rem;
    --top-row-bg: #ffffff;
    --top-row-border: #dce2e8;
    --top-row-text: #262d3c;
    /* Navigation */
    --nav-link-height: 3rem;
    --nav-link-radius: 12px;
    /* Main layout */
    --page-bg: #f4f6f8;
    /* Error UI */
    --error-ui-bg: #eaf4ff;
    --error-ui-text: #0f3d8f;
    --error-ui-border: #75aff2;
}

/* =========================================================
   Dark Theme
   ========================================================= */

body.dark {
    --sidebar-bg-start: #08172b;
    --sidebar-bg-end: #122b35;
    --sidebar-text: #dff0f7;
    --sidebar-text-muted: #9ab8a3;
    --sidebar-link-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-link-active-bg: rgba(74, 222, 222, 0.18);
    --sidebar-link-active-text: #ffffff;
    --top-row-bg: #141d22;
    --top-row-border: #2f4249;
    --top-row-text: #f0fafd;
    --page-bg: #0d1217;
}

/* =========================================================
   Global Theme Variables
   Messages and Chat
   ========================================================= */

:root {
    /* =====================================================
       Main Colors
       ===================================================== */

    --color-primary: #153a80;
    --color-primary-hover: #1e40af;
    --color-primary-soft: rgba(21, 71, 128, 0.12);
    --color-primary-border: rgba(21, 94, 128, 0.32);
    --color-primary-focus: rgba(21, 103, 128, 0.18);
    --color-primary-shadow: rgba(21, 98, 128, 0.24);
    /* =====================================================
       Transition
       ===================================================== */

    --transition-fast: 0.18s ease;
    --transition-normal: 0.25s ease;
    /* =====================================================
       Messages Page
       ===================================================== */

    --messages-page-bg: #f3f7f7;
    --messages-surface: #ffffff;
    --messages-surface-soft: #f8fafa;
    --messages-surface-hover: #f4f8f9;
    --messages-border: #dce3e7;
    --messages-text: #141b25;
    --messages-text-secondary: #3d4651;
    --messages-muted: #64748b;
    /* =====================================================
       Glass Cards
       ===================================================== */

    --messages-glass-bg: rgba(255, 255, 255, 0.86);
    --messages-glass-hover-bg: rgba(255, 255, 255, 0.98);
    --messages-glass-border: rgba(255, 255, 255, 0.78);
    /* =====================================================
       Chat Surfaces
       ===================================================== */

    --chat-page-bg: #f3f7f7;
    --chat-header-bg: rgba(255, 255, 255, 0.92);
    --chat-input-bg: rgba(255, 255, 255, 0.94);
    --chat-own-message-bg: linear-gradient(135deg, #153a80 0%, #3b82f6 100%);
    --chat-own-message-text: #ffffff;
    --chat-other-message-bg: #ffffff;
    --chat-other-message-text: #141b25;
    /* =====================================================
       Chat Buttons and Inputs
       ===================================================== */

    --chat-back-bg: #f1f5f5;
    --chat-back-hover-bg: #e2eeeb;
    --chat-back-text: #293c44;
    --chat-input-field-bg: #ffffff;
    --chat-input-field-hover-bg: #ffffff;
    --chat-input-field-focus-bg: #ffffff;
    --chat-send-bg: #1d4ed8;
    --chat-send-hover-bg: #2563eb;
    --chat-send-text: #ffffff;
    /* =====================================================
       Status
       ===================================================== */

    --online-color: #3b82f6;
    --online-border: #ffffff;
    --online-shadow: rgba(34, 124, 197, 0.25);
    --unread-bg: #153a80;
    --unread-text: #ffffff;
    /* =====================================================
       User Roles
       ===================================================== */

    --role-owner-bg: rgba(245, 158, 11, 0.15);
    --role-owner-text: #b45309;
    --role-manager-bg: rgba(37, 99, 235, 0.14);
    --role-manager-text: #1d4ed8;
    --role-dispatch-bg: rgba(168, 85, 247, 0.14);
    --role-dispatch-text: #7e22ce;
    --role-guard-bg: rgba(22, 163, 74, 0.15);
    --role-guard-text: #153a80;
    /* =====================================================
       Shadows
       ===================================================== */

    --messages-shadow: 0 8px 25px rgba(15, 23, 42, 0.07);
    --messages-shadow-hover: 0 18px 42px rgba(15, 23, 42, 0.13);
    --chat-header-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    --chat-input-shadow: 0 -4px 18px rgba(15, 23, 42, 0.05);
    --message-own-shadow: 0 8px 22px rgba(21, 98, 128, 0.22);
    --message-other-shadow: 0 5px 18px rgba(15, 23, 42, 0.07);
}

/* =========================================================
   Dark Mode
   Supports dark class on HTML or BODY
   ========================================================= */

html.dark,
body.dark {
    /* =====================================================
       Main Colors
       ===================================================== */

    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
    --color-primary-soft: rgba(74, 180, 222, 0.12);
    --color-primary-border: rgba(74, 175, 222, 0.35);
    --color-primary-focus: rgba(74, 192, 222, 0.18);
    --color-primary-shadow: rgba(34, 124, 197, 0.25);
    /* =====================================================
       Messages Page
       ===================================================== */

    --messages-page-bg: #08111d;
    --messages-surface: #121c2f;
    --messages-surface-soft: #19202d;
    --messages-surface-hover: #1d2f34;
    --messages-border: #2d4671;
    --messages-text: #eff6ff;
    --messages-text-secondary: #d5e8dc;
    --messages-muted: #93a9c7;
    /* =====================================================
       Glass Cards
       ===================================================== */

    --messages-glass-bg: rgba(18, 28, 47, 0.90);
    --messages-glass-hover-bg: rgba(23, 48, 79, 0.96);
    --messages-glass-border: rgba(255, 255, 255, 0.08);
    /* =====================================================
       Chat Surfaces
       ===================================================== */

    --chat-page-bg: #08111d;
    --chat-header-bg: rgba(12, 28, 52, 0.96);
    --chat-input-bg: rgba(12, 28, 52, 0.97);
    --chat-own-message-bg: linear-gradient( 135deg, #1d4ed8 0%, #3b82f6 100% );
    --chat-own-message-text: #ffffff;
    --chat-other-message-bg: #172942;
    --chat-other-message-text: #edfdf2;
    /* =====================================================
       Chat Buttons and Inputs
       ===================================================== */

    --chat-back-bg: #1b304d;
    --chat-back-hover-bg: #284a73;
    --chat-back-text: #e2f7e8;
    --chat-input-field-bg: #121c2f;
    --chat-input-field-hover-bg: #19202d;
    --chat-input-field-focus-bg: #19202d;
    --chat-send-bg: #1d4ed8;
    --chat-send-hover-bg: #3b82f6;
    --chat-send-text: #ffffff;
    /* =====================================================
       Status
       ===================================================== */

    --online-color: #60a5fa;
    --online-border: #121c2f;
    --online-shadow: rgba(96, 165, 250, 0.28);
    --unread-bg: #3b82f6;
    --unread-text: #172554;
    /* =====================================================
       User Roles
       ===================================================== */

    --role-owner-bg: rgba(250, 204, 21, 0.13);
    --role-owner-text: #fde047;
    --role-manager-bg: rgba(96, 165, 250, 0.14);
    --role-manager-text: #93c5fd;
    --role-dispatch-bg: rgba(192, 132, 252, 0.14);
    --role-dispatch-text: #d8b4fe;
    --role-guard-bg: rgba(96, 165, 250, 0.14);
    --role-guard-text: #93c5fd;
    /* =====================================================
       Shadows
       ===================================================== */

    --messages-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    --messages-shadow-hover: 0 20px 46px rgba(0, 0, 0, 0.42);
    --chat-header-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);
    --chat-input-shadow: 0 -5px 20px rgba(0, 0, 0, 0.26);
    --message-own-shadow: 0 9px 24px rgba(0, 0, 0, 0.22);
    --message-other-shadow: 0 7px 22px rgba(0, 0, 0, 0.24);
}

/* =========================================================
   Optional compatibility
   Use only if dark class is added on a layout wrapper
   ========================================================= */

.dark-theme {
    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
    --color-primary-soft: rgba(96, 165, 250, 0.12);
    --color-primary-border: rgba(96, 165, 250, 0.35);
    --color-primary-focus: rgba(96, 165, 250, 0.18);
    --color-primary-shadow: rgba(34, 124, 197, 0.25);
    --messages-page-bg: #08111d;
    --messages-surface: #121c2f;
    --messages-surface-soft: #19202d;
    --messages-surface-hover: #1d2f34;
    --messages-border: #2d4671;
    --messages-text: #eff6ff;
    --messages-text-secondary: #d5e8dc;
    --messages-muted: #93a9c7;
    --messages-glass-bg: rgba(18, 28, 47, 0.90);
    --messages-glass-hover-bg: rgba(23, 48, 79, 0.96);
    --messages-glass-border: rgba(255, 255, 255, 0.08);
    --chat-page-bg: #08111d;
    --chat-header-bg: rgba(12, 28, 52, 0.96);
    --chat-input-bg: rgba(12, 28, 52, 0.97);
    --chat-own-message-bg: linear-gradient( 135deg, #1d4ed8 0%, #3b82f6 100% );
    --chat-own-message-text: #ffffff;
    --chat-other-message-bg: #172942;
    --chat-other-message-text: #edfdf2;
    --chat-back-bg: #1b304d;
    --chat-back-hover-bg: #284a73;
    --chat-back-text: #e2f7e8;
    --chat-input-field-bg: #121c2f;
    --chat-input-field-hover-bg: #19202d;
    --chat-input-field-focus-bg: #19202d;
    --chat-send-bg: #1d4ed8;
    --chat-send-hover-bg: #3b82f6;
    --chat-send-text: #ffffff;
    --online-color: #60a5fa;
    --online-border: #121c2f;
    --online-shadow: rgba(96, 165, 250, 0.28);
    --unread-bg: #3b82f6;
    --unread-text: #172554;
    --role-owner-bg: rgba(250, 204, 21, 0.13);
    --role-owner-text: #fde047;
    --role-manager-bg: rgba(96, 165, 250, 0.14);
    --role-manager-text: #93c5fd;
    --role-dispatch-bg: rgba(192, 132, 252, 0.14);
    --role-dispatch-text: #d8b4fe;
    --role-guard-bg: rgba(96, 165, 250, 0.14);
    --role-guard-text: #93c5fd;
    --messages-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    --messages-shadow-hover: 0 20px 46px rgba(0, 0, 0, 0.42);
    --chat-header-shadow: 0 5px 20px rgba(0, 0, 0, 0.28);
    --chat-input-shadow: 0 -5px 20px rgba(0, 0, 0, 0.26);
    --message-own-shadow: 0 9px 24px rgba(0, 0, 0, 0.22);
    --message-other-shadow: 0 7px 22px rgba(0, 0, 0, 0.24);
}

/* =========================================================
   Assignments, Chat and Notes Theme
   ========================================================= */

:root {
    /* Global page */
    --workspace-page-bg: #f5f8ff;
    --workspace-page-gradient: linear-gradient(135deg, #eef5ff 0%, rgba(248, 250, 252, 0.65) 100%);
    --workspace-surface: #ffffff;
    --workspace-surface-soft: #f8fbff;
    --workspace-surface-hover: #eef4ff;
    --workspace-text: #1e293b;
    --workspace-heading: #0f172a;
    --workspace-muted: #64748b;
    --workspace-placeholder: #94a3b8;
    --workspace-border: #e2e8f0;
    --workspace-border-soft: #e8edf5;
    /* Primary */
    --workspace-primary: #153a80;
    --workspace-primary-hover: #1d4ed8;
    --workspace-primary-text: #ffffff;
    --workspace-primary-soft: rgba(21, 58, 128, 0.12);
    --workspace-primary-border: rgba(21, 58, 128, 0.32);
    --workspace-primary-focus: rgba(21, 58, 128, 0.18);
    --workspace-primary-shadow: rgba(21, 58, 128, 0.24);
    --workspace-primary-gradient: linear-gradient(135deg, #153a80 0%, #3b82f6 100%);
    /* Cards */
    --workspace-card-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
    --workspace-card-hover-shadow: 0 20px 45px rgba(15, 23, 42, 0.13);
    --workspace-control-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
    /* Chat */
    --mini-chat-bg: #f5f7fb;
    --mini-chat-border: #dce5f3;
    --mini-chat-client-bg: #eaf4ff;
    --mini-chat-client-text: #1e3a5f;
    --mini-chat-employee-bg: #dbeafe;
    --mini-chat-employee-text: #1e3a8a;
    /* Delete */
    --delete-bg: #eef4ff;
    --delete-hover-bg: #dbeafe;
    --delete-text: #1d4ed8;
    /* Breaks */
    --break-border: #d8e2f0;
    --break-pill-bg: #eaf4ff;
    --break-pill-border: #3b82f6;
    --break-pill-text: #1d4ed8;
    --ten-break-bg: #eef6ff;
    --ten-break-border: #60a5fa;
    --ten-break-text: #1e40af;
    --hour-break-bg: #eaf4ff;
    --hour-break-border: #2563eb;
    --hour-break-text: #1e3a8a;
    /* Notes page */
    --notes-page-bg: #f4f7fb;
    --notes-hero-start: #10213d;
    --notes-hero-end: #1e4a7b;
    --notes-hero-text: #ffffff;
    --notes-hero-stat-bg: rgba(255, 255, 255, 0.14);
    --notes-hero-stat-border: rgba(255, 255, 255, 0.22);
    --notes-card-bg: #ffffff;
    --notes-card-border: #e8eef7;
    --notes-card-done-bg: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    --notes-card-done-border: #93c5fd;
    --notes-glow: rgba(59, 130, 246, 0.14);
    --notes-site-code-bg: #eaf4ff;
    --notes-site-code-text: #1d4ed8;
    --notes-type-bg: #f1f5f9;
    --notes-type-text: #334155;
    --notes-closing-bg: #eff6ff;
    --notes-closing-text: #1d4ed8;
    --notes-general-bg: #eff6ff;
    --notes-general-text: #1d4ed8;
    --notes-permanent-bg: #eaf4ff;
    --notes-permanent-text: #2563eb;
    --notes-temporary-bg: #dbeafe;
    --notes-temporary-text: #1e40af;
    --notes-active-bg: #eaf4ff;
    --notes-active-text: #1d4ed8;
    --notes-inactive-bg: #eef4ff;
    --notes-inactive-text: #2563eb;
    --notes-action-bg: #153a80;
    --notes-action-hover-bg: #1d4ed8;
    --notes-action-text: #ffffff;
    --notes-completed-bg: #3b82f6;
    --site-number-start: #153a80;
    --site-number-end: #1d4ed8;
    --site-number-shadow: 0 10px 30px rgba(21, 58, 128, 0.30);
    /* Transitions */
    --workspace-transition-fast: 0.18s ease;
    --workspace-transition-normal: 0.25s ease;
}

/* =========================================================
   Dark Mode
   ========================================================= */

html.dark,
body.dark,
.dark-theme {
    /* Global page */
    --workspace-page-bg: #08111d;
    --workspace-page-gradient: linear-gradient(135deg, #08111d 0%, #10233f 100%);
    --workspace-surface: #121c2f;
    --workspace-surface-soft: #17253e;
    --workspace-surface-hover: #1e3250;
    --workspace-text: #e7f1ff;
    --workspace-heading: #f8fbff;
    --workspace-muted: #9fb4c8;
    --workspace-placeholder: #8194b0;
    --workspace-border: #2d4671;
    --workspace-border-soft: #243b5d;
    /* Primary */
    --workspace-primary: #3b82f6;
    --workspace-primary-hover: #60a5fa;
    --workspace-primary-text: #f8fbff;
    --workspace-primary-soft: rgba(59, 130, 246, 0.14);
    --workspace-primary-border: rgba(96, 165, 250, 0.34);
    --workspace-primary-focus: rgba(96, 165, 250, 0.18);
    --workspace-primary-shadow: rgba(59, 130, 246, 0.24);
    --workspace-primary-gradient: linear-gradient(135deg, #1d4ed8 0%, #60a5fa 100%);
    /* Cards */
    --workspace-card-shadow: 0 12px 35px rgba(0, 0, 0, 0.30);
    --workspace-card-hover-shadow: 0 22px 50px rgba(0, 0, 0, 0.42);
    --workspace-control-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
    /* Chat */
    --mini-chat-bg: #0e1726;
    --mini-chat-border: #2d4671;
    --mini-chat-client-bg: #17304f;
    --mini-chat-client-text: #dbeafe;
    --mini-chat-employee-bg: #183a63;
    --mini-chat-employee-text: #dbeafe;
    /* Delete */
    --delete-bg: rgba(37, 99, 235, 0.15);
    --delete-hover-bg: rgba(37, 99, 235, 0.24);
    --delete-text: #bfdbfe;
    /* Breaks */
    --break-border: #2d4671;
    --break-pill-bg: rgba(59, 130, 246, 0.14);
    --break-pill-border: #60a5fa;
    --break-pill-text: #bfdbfe;
    --ten-break-bg: rgba(59, 130, 246, 0.14);
    --ten-break-border: #93c5fd;
    --ten-break-text: #dbeafe;
    --hour-break-bg: rgba(37, 99, 235, 0.14);
    --hour-break-border: #60a5fa;
    --hour-break-text: #dbeafe;
    /* Notes page */
    --notes-page-bg: #08111d;
    --notes-hero-start: #0f1d32;
    --notes-hero-end: #1e4a7b;
    --notes-hero-stat-bg: rgba(255, 255, 255, 0.08);
    --notes-hero-stat-border: rgba(255, 255, 255, 0.12);
    --notes-card-bg: #121c2f;
    --notes-card-border: #2d4671;
    --notes-card-done-bg: linear-gradient(180deg, #121c2f 0%, #17304f 100%);
    --notes-card-done-border: #60a5fa;
    --notes-glow: rgba(59, 130, 246, 0.12);
    --notes-site-code-bg: rgba(59, 130, 246, 0.14);
    --notes-site-code-text: #bfdbfe;
    --notes-type-bg: #20324e;
    --notes-type-text: #dbeafe;
    --notes-closing-bg: rgba(37, 99, 235, 0.14);
    --notes-closing-text: #bfdbfe;
    --notes-general-bg: rgba(59, 130, 246, 0.14);
    --notes-general-text: #93c5fd;
    --notes-permanent-bg: rgba(96, 165, 250, 0.14);
    --notes-permanent-text: #bfdbfe;
    --notes-temporary-bg: rgba(37, 99, 235, 0.14);
    --notes-temporary-text: #dbeafe;
    --notes-active-bg: rgba(59, 130, 246, 0.14);
    --notes-active-text: #bfdbfe;
    --notes-inactive-bg: rgba(37, 99, 235, 0.14);
    --notes-inactive-text: #dbeafe;
    --notes-action-bg: #1d4ed8;
    --notes-action-hover-bg: #2563eb;
    --notes-completed-bg: #60a5fa;
    --site-number-start: #1d4ed8;
    --site-number-end: #60a5fa;
    --site-number-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

/* =========================================================
   Employees Theme Variables
   ========================================================= */

:root {
    /* Page */
    --employees-page-bg: #f6f8fc;
    --employees-page-glow-primary: rgba(59, 130, 246, 0.18);
    --employees-page-glow-success: rgba(16, 185, 129, 0.14);
    /* Surfaces */
    --employees-surface: #ffffff;
    --employees-surface-soft: #f8fafc;
    --employees-surface-hover: #f1f5f9;
    --employees-glass-bg: rgba(255, 255, 255, 0.88);
    /* Text */
    --employees-heading: #0f172a;
    --employees-text: #1f2937;
    --employees-text-soft: #475569;
    --employees-muted: #64748b;
    --employees-placeholder: #94a3b8;
    /* Borders */
    --employees-border: #e5e7eb;
    --employees-border-soft: #edf0f4;
    /* Primary */
    --employees-primary: #2563eb;
    --employees-primary-hover: #1d4ed8;
    --employees-primary-soft: #e0edff;
    --employees-primary-text: #ffffff;
    --employees-primary-focus: rgba(59, 130, 246, 0.14);
    --employees-primary-shadow: rgba(37, 99, 235, 0.22);
    /* Hero */
    --employee-hero-start: #0f172a;
    --employee-hero-end: #1e293b;
    --employee-hero-text: #ffffff;
    --employee-hero-muted: #cbd5e1;
    --employee-hero-eyebrow: #93c5fd;
    --employee-avatar-start: #38bdf8;
    --employee-avatar-end: #3b82f6;
    /* Status */
    --status-active-bg: #2563eb;
    --status-active-text: #ffffff;
    --status-suspended-bg: #f59e0b;
    --status-suspended-text: #ffffff;
    --status-terminated-bg: #dc2626;
    --status-terminated-text: #ffffff;
    --status-archived-bg: #374151;
    --status-archived-text: #ffffff;
    /* Semantic soft colors */
    --employees-success-soft: #dbeafe;
    --employees-success-text: #1e40af;
    --employees-success-border: #3b82f6;
    --employees-warning-soft: #c7f6fe;
    --employees-warning-text: #92400e;
    --employees-danger-soft: #fee2e2;
    --employees-danger-text: #991b1b;
    --employees-danger-border: #fecaca;
    --employees-info-soft: #e0f2fe;
    --employees-info-text: #075985;
    --employees-orange-soft: #fff7ed;
    --employees-cyan-soft: #ecfeff;
    /* Controls */
    --employees-input-bg: #ffffff;
    --employees-button-secondary-bg: #eef2f7;
    --employees-button-secondary-hover: #e2e8f0;
    --employees-switch-bg: #cbd5e1;
    /* Modal */
    --employees-overlay-bg: rgba(15, 23, 42, 0.55);
    /* Shadows */
    --employees-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --employees-shadow-small: 0 4px 14px rgba(15, 23, 42, 0.06);
    --employees-hero-shadow: 0 25px 70px rgba(15, 23, 42, 0.28);
    --employees-modal-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
    /* Transitions */
    --employees-transition-fast: 0.18s ease;
    --employees-transition-normal: 0.25s ease;
}

/* =========================================================
   Employees Dark Mode
   ========================================================= */

html.dark,
body.dark,
.dark-theme {
    --employees-page-bg: #08111d;
    --employees-page-glow-primary: rgba(59, 130, 246, 0.10);
    --employees-page-glow-success: rgba(59, 130, 246, 0.10);
    --employees-surface: #121c2f;
    --employees-surface-soft: #17253e;
    --employees-surface-hover: #1e3250;
    --employees-glass-bg: rgba(18, 28, 47, 0.90);
    --employees-heading: #eff6ff;
    --employees-text: #e4f2e8;
    --employees-text-soft: #c7d8cc;
    --employees-muted: #93a9c7;
    --employees-placeholder: #7890b3;
    --employees-border: #2d4671;
    --employees-border-soft: #243b5d;
    --employees-primary: #3b82f6;
    --employees-primary-hover: #60a5fa;
    --employees-primary-soft: rgba(59, 130, 246, 0.14);
    --employees-primary-text: #172554;
    --employees-primary-focus: rgba(96, 165, 250, 0.18);
    --employees-primary-shadow: rgba(59, 130, 246, 0.22);
    --employee-hero-start: #0a1930;
    --employee-hero-end: #173b63;
    --employee-hero-muted: #b8cfc0;
    --employee-hero-eyebrow: #93c5fd;
    --employee-avatar-start: #1d4ed8;
    --employee-avatar-end: #3b82f6;
    --status-active-bg: #3b82f6;
    --status-active-text: #172554;
    --status-suspended-bg: #f59e0b;
    --status-suspended-text: #1c1202;
    --status-terminated-bg: #ef4444;
    --status-terminated-text: #ffffff;
    --status-archived-bg: #64748b;
    --status-archived-text: #ffffff;
    --employees-success-soft: rgba(59, 130, 246, 0.14);
    --employees-success-text: #93c5fd;
    --employees-success-border: #3b82f6;
    --employees-warning-soft: rgba(245, 158, 11, 0.14);
    --employees-warning-text: #fcd34d;
    --employees-danger-soft: rgba(239, 68, 68, 0.14);
    --employees-danger-text: #fca5a5;
    --employees-danger-border: rgba(248, 113, 113, 0.35);
    --employees-info-soft: rgba(56, 189, 248, 0.14);
    --employees-info-text: #7dd3fc;
    --employees-orange-soft: rgba(249, 115, 22, 0.14);
    --employees-cyan-soft: rgba(34, 211, 238, 0.14);
    --employees-input-bg: #10213b;
    --employees-button-secondary-bg: #1d2f34;
    --employees-button-secondary-hover: #28476f;
    --employees-switch-bg: #455f82;
    --employees-overlay-bg: rgba(0, 0, 0, 0.72);
    --employees-shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
    --employees-shadow-small: 0 6px 18px rgba(0, 0, 0, 0.24);
    --employees-hero-shadow: 0 25px 70px rgba(0, 0, 0, 0.42);
    --employees-modal-shadow: 0 30px 80px rgba(0, 0, 0, 0.48);
}

/* =========================================================
   Operations Dashboard Theme Variables
   ========================================================= */

:root {
    /* Main identity */
    --dashboard-primary: #1f3b5b;
    --dashboard-primary-hover: #14293f;
    --dashboard-primary-dark: #14293f;
    --dashboard-accent: #2d7ff9;
    --dashboard-accent-hover: #1f6ee5;
    --dashboard-accent-soft: rgba(45, 127, 249, 0.10);
    --dashboard-accent-border: rgba(45, 127, 249, 0.28);
    --dashboard-accent-focus: rgba(45, 127, 249, 0.12);
    /* Semantic colors */
    --dashboard-success: #169c70;
    --dashboard-success-soft: #dff6ee;
    --dashboard-success-text: #087653;
    --dashboard-success-border: #b8ead8;
    --dashboard-warning: #e79b20;
    --dashboard-warning-soft: #fff2d8;
    --dashboard-warning-text: #9b6300;
    --dashboard-warning-border: #f5d898;
    --dashboard-danger: #dc4c64;
    --dashboard-danger-soft: #ffebef;
    --dashboard-danger-text: #9a293e;
    --dashboard-danger-border: #fac7cf;
    --dashboard-info: #3e7bd6;
    --dashboard-info-soft: #e7f0ff;
    --dashboard-info-text: #2c65bd;
    --dashboard-info-border: #bfd6fb;
    /* Page */
    --dashboard-bg: #f4f7fb;
    --dashboard-bg-soft: #f8fafc;
    /* Surfaces */
    --dashboard-card: #ffffff;
    --dashboard-card-soft: #fafcff;
    --dashboard-card-muted: #f5f8fc;
    --dashboard-card-hover: #f7faff;
    /* Text */
    --dashboard-text: #172033;
    --dashboard-heading: #14293f;
    --dashboard-text-soft: #3b485c;
    --dashboard-muted: #708096;
    --dashboard-muted-light: #8a96a7;
    --dashboard-placeholder: #8390a2;
    /* Borders */
    --dashboard-border: #e2e8f0;
    --dashboard-border-soft: #edf1f5;
    --dashboard-control-border: #d8e0eb;
    /* Controls */
    --dashboard-input-bg: #ffffff;
    --dashboard-secondary-button-bg: #eef2f7;
    --dashboard-secondary-button-hover: #e2e8f0;
    --dashboard-secondary-button-text: #55647a;
    /* Stats */
    --dashboard-stat-icon-bg: #eaf1f8;
    /* Pipeline */
    --dashboard-pipeline-bg: #fafcff;
    --dashboard-pipeline-active-bg: #edf5ff;
    /* Progress */
    --dashboard-progress-track: #e8edf3;
    /* PDF */
    --dashboard-pdf-bg: #fff4f4;
    --dashboard-pdf-icon-bg: #d94747;
    --dashboard-pdf-heading: #822a2a;
    --dashboard-pdf-text: #9a6161;
    /* Overlay */
    --dashboard-overlay: rgba(15, 23, 42, 0.55);
    /* Shadows */
    --dashboard-shadow: 0 8px 28px rgba(24, 39, 75, 0.045);
    --dashboard-shadow-hover: 0 12px 32px rgba(24, 39, 75, 0.09);
    --dashboard-filter-shadow: 0 7px 28px rgba(24, 39, 75, 0.04);
    /* Spinner */
    --dashboard-spinner-track: #dce4ed;
    --dashboard-button-spinner-track: rgba(255, 255, 255, 0.40);
    /* Transitions */
    --dashboard-transition-fast: 0.18s ease;
    --dashboard-transition-normal: 0.25s ease;
}

/* =========================================================
   Operations Dashboard Dark Mode
   ========================================================= */

html.dark,
body.dark,
.dark-theme {
    /* Main identity */
    --dashboard-primary: #2f7651;
    --dashboard-primary-hover: #3f9166;
    --dashboard-primary-dark: #eff6ff;
    --dashboard-accent: #60a5fa;
    --dashboard-accent-hover: #93c5fd;
    --dashboard-accent-soft: rgba(96, 165, 250, 0.13);
    --dashboard-accent-border: rgba(96, 165, 250, 0.34);
    --dashboard-accent-focus: rgba(96, 165, 250, 0.17);
    /* Semantic colors */
    --dashboard-success: #60a5fa;
    --dashboard-success-soft: rgba(59, 130, 246, 0.14);
    --dashboard-success-text: #93c5fd;
    --dashboard-success-border: rgba(96, 165, 250, 0.32);
    --dashboard-warning: #fbbf24;
    --dashboard-warning-soft: rgba(245, 158, 11, 0.14);
    --dashboard-warning-text: #fcd34d;
    --dashboard-warning-border: rgba(251, 191, 36, 0.32);
    --dashboard-danger: #fb7185;
    --dashboard-danger-soft: rgba(244, 63, 94, 0.14);
    --dashboard-danger-text: #fda4af;
    --dashboard-danger-border: rgba(251, 113, 133, 0.32);
    --dashboard-info: #60a5fa;
    --dashboard-info-soft: rgba(59, 130, 246, 0.14);
    --dashboard-info-text: #93c5fd;
    --dashboard-info-border: rgba(96, 165, 250, 0.32);
    /* Page */
    --dashboard-bg: #08111d;
    --dashboard-bg-soft: #0d1912;
    /* Surfaces */
    --dashboard-card: #121c2f;
    --dashboard-card-soft: #182d49;
    --dashboard-card-muted: #1b2e49;
    --dashboard-card-hover: #203b5d;
    /* Text */
    --dashboard-text: #dbeafe;
    --dashboard-heading: #eff6ff;
    --dashboard-text-soft: #cfdfd4;
    --dashboard-muted: #93a9c7;
    --dashboard-muted-light: #83998b;
    --dashboard-placeholder: #718779;
    /* Borders */
    --dashboard-border: #2d4671;
    --dashboard-border-soft: #243b5d;
    --dashboard-control-border: #365681;
    /* Controls */
    --dashboard-input-bg: #10213b;
    --dashboard-secondary-button-bg: #1d2f34;
    --dashboard-secondary-button-hover: #28476f;
    --dashboard-secondary-button-text: #d7e8dc;
    /* Stats */
    --dashboard-stat-icon-bg: #1b3352;
    /* Pipeline */
    --dashboard-pipeline-bg: #172a45;
    --dashboard-pipeline-active-bg: rgba(96, 165, 250, 0.12);
    /* Progress */
    --dashboard-progress-track: #2b466b;
    /* PDF */
    --dashboard-pdf-bg: rgba(239, 68, 68, 0.12);
    --dashboard-pdf-icon-bg: #b83d49;
    --dashboard-pdf-heading: #fca5a5;
    --dashboard-pdf-text: #f3b5b5;
    /* Overlay */
    --dashboard-overlay: rgba(0, 0, 0, 0.72);
    /* Shadows */
    --dashboard-shadow: 0 10px 30px rgba(0, 0, 0, 0.26);
    --dashboard-shadow-hover: 0 16px 38px rgba(0, 0, 0, 0.38);
    --dashboard-filter-shadow: 0 9px 28px rgba(0, 0, 0, 0.24);
    /* Spinner */
    --dashboard-spinner-track: #2d4671;
    --dashboard-button-spinner-track: rgba(255, 255, 255, 0.30);
}

/* =========================================================
   Notifications Theme Variables
   ========================================================= */

:root {
    /* Page */
    --notifications-page-bg: #f4f7fb;
    /* Surfaces */
    --notifications-surface: #ffffff;
    --notifications-surface-soft: #f8fafc;
    --notifications-surface-hover: #f3f7fc;
    /* Text */
    --notifications-heading: #111827;
    --notifications-text: #263347;
    --notifications-text-soft: #475569;
    --notifications-muted: #64748b;
    /* Borders */
    --notifications-border: #e5eaf1;
    --notifications-border-soft: #eef2f7;
    /* Primary */
    --notifications-primary: #2563eb;
    --notifications-primary-hover: #1d4ed8;
    --notifications-primary-text: #ffffff;
    --notifications-primary-soft: #eff6ff;
    --notifications-primary-focus: rgba(37, 99, 235, 0.14);
    /* Hero */
    --notifications-hero-start: #111827;
    --notifications-hero-end: #1f2937;
    --notifications-hero-text: #ffffff;
    --notifications-hero-muted: #d1d5db;
    --notifications-hero-label: #93c5fd;
    /* Warning */
    --notifications-warning-bg: #fff7ed;
    --notifications-warning-soft: rgba(192, 100, 0, 0.12);
    --notifications-warning-text: #92400e;
    --notifications-warning-icon: #c2410c;
    /* Success */
    --notifications-success-bg: #dbeafe;
    --notifications-success-text: #1e40af;
    /* Pending */
    --notifications-pending-bg: #c7f6fe;
    --notifications-pending-text: #92400e;
    /* Notification icon */
    --notifications-info-bg: #eff6ff;
    --notifications-info-text: #2563eb;
    /* Controls */
    --notifications-filter-bg: #f1f5f9;
    --notifications-filter-text: #334155;
    --notifications-filter-hover: #e2e8f0;
    --notifications-action-bg: #111827;
    --notifications-action-hover: #374151;
    --notifications-action-text: #ffffff;
    /* Meta pills */
    --notifications-meta-bg: #f8fafc;
    --notifications-meta-text: #475569;
    /* Empty state */
    --notifications-empty-bg: #ffffff;
    /* Shadows */
    --notifications-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --notifications-shadow-card: 0 12px 35px rgba(15, 23, 42, 0.08);
    --notifications-shadow-hover: 0 20px 45px rgba(15, 23, 42, 0.13);
    --notifications-hero-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    /* Transitions */
    --notifications-transition-fast: 0.18s ease;
    --notifications-transition-normal: 0.25s ease;
}

/* =========================================================
   Notifications Dark Mode
   ========================================================= */

html.dark,
body.dark,
.dark-theme {
    /* Page */
    --notifications-page-bg: #08111d;
    /* Surfaces */
    --notifications-surface: #121c2f;
    --notifications-surface-soft: #17253e;
    --notifications-surface-hover: #203b5d;
    /* Text */
    --notifications-heading: #eff6ff;
    --notifications-text: #dcebe1;
    --notifications-text-soft: #bfd2c5;
    --notifications-muted: #93a9c7;
    /* Borders */
    --notifications-border: #2d4671;
    --notifications-border-soft: #243b5d;
    /* Primary */
    --notifications-primary: #3b82f6;
    --notifications-primary-hover: #60a5fa;
    --notifications-primary-text: #172554;
    --notifications-primary-soft: rgba(59, 130, 246, 0.14);
    --notifications-primary-focus: rgba(96, 165, 250, 0.18);
    /* Hero */
    --notifications-hero-start: #0a1930;
    --notifications-hero-end: #173b63;
    --notifications-hero-text: #ffffff;
    --notifications-hero-muted: #b8cfc0;
    --notifications-hero-label: #93c5fd;
    /* Warning */
    --notifications-warning-bg: rgba(245, 158, 11, 0.14);
    --notifications-warning-soft: rgba(245, 158, 11, 0.12);
    --notifications-warning-text: #fcd34d;
    --notifications-warning-icon: #fdba74;
    /* Success */
    --notifications-success-bg: rgba(59, 130, 246, 0.14);
    --notifications-success-text: #93c5fd;
    /* Pending */
    --notifications-pending-bg: rgba(245, 158, 11, 0.14);
    --notifications-pending-text: #fcd34d;
    /* Notification icon */
    --notifications-info-bg: rgba(59, 130, 246, 0.14);
    --notifications-info-text: #93c5fd;
    /* Controls */
    --notifications-filter-bg: #1d2f34;
    --notifications-filter-text: #d7e8dc;
    --notifications-filter-hover: #28476f;
    --notifications-action-bg: #1f6d3c;
    --notifications-action-hover: #25874a;
    --notifications-action-text: #ffffff;
    /* Meta pills */
    --notifications-meta-bg: #1b2e49;
    --notifications-meta-text: #c9dbcf;
    /* Empty state */
    --notifications-empty-bg: #121c2f;
    /* Shadows */
    --notifications-shadow: 0 10px 30px rgba(0, 0, 0, 0.26);
    --notifications-shadow-card: 0 12px 35px rgba(0, 0, 0, 0.30);
    --notifications-shadow-hover: 0 20px 45px rgba(0, 0, 0, 0.42);
    --notifications-hero-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}

/* =========================================================
   REPORTS THEME VARIABLES
   Light mode + Dark mode only
   Load this file before reports.css
   ========================================================= */

:root {
    --rp-page-bg: #f4f7fb;
    --rp-page-gradient-start: #f8fafc;
    --rp-page-gradient-end: #eef4ff;
    --rp-surface: #fff;
    --rp-surface-glass: rgba(255,255,255,.65);
    --rp-surface-glass-strong: rgba(255,255,255,.86);
    --rp-surface-transparent: rgba(255,255,255,.19);
    --rp-surface-soft: #f8fafc;
    --rp-surface-soft-alpha: rgba(248,250,252,.58);
    --rp-surface-hover: #f1f5f9;
    --rp-surface-muted: #f3f4f6;
    --rp-heading: #0f172a;
    --rp-text: #1e293b;
    --rp-text-soft: #334155;
    --rp-muted: #64748b;
    --rp-muted-light: #94a3b8;
    --rp-border: #e2e8f0;
    --rp-border-soft: #f1f5f9;
    --rp-border-control: #cbd5e1;
    --rp-primary: #2563eb;
    --rp-primary-hover: #1d4ed8;
    --rp-primary-soft: #eff6ff;
    --rp-primary-focus: rgba(37,99,235,.12);
    --rp-primary-shadow: rgba(37,99,235,.25);
    --rp-success: #2563eb;
    --rp-success-hover: #153a80;
    --rp-success-soft: rgba(22,163,74,.12);
    --rp-success-text: #153a80;
    --rp-warning: #f59e0b;
    --rp-warning-soft: rgba(245,158,11,.12);
    --rp-warning-text: #92400e;
    --rp-danger: #dc2626;
    --rp-danger-hover: #b91c1c;
    --rp-danger-soft: rgba(239,68,68,.12);
    --rp-danger-text: #dc2626;
    --rp-info: #06b6d4;
    --rp-info-soft: rgba(6,182,212,.12);
    --rp-info-text: #0e7490;
    --rp-purple: #a200dd;
    --rp-green-dark: #297c00;
    --rp-hero-start: #0f172a;
    --rp-hero-end: #1e40af;
    --rp-hero-text: #fff;
    --rp-hero-muted: #dbeafe;
    --rp-hero-label: #93c5fd;
    --rp-response-navy: #10182b;
    --rp-response-navy-soft: #17243e;
    --rp-response-gold: #d6a73a;
    --rp-response-gold-light: #f2ca68;
    --rp-response-red: #c9454d;
    --rp-response-blue: #3269d8;
    --rp-response-green: #198f68;
    --rp-photo-zone: #f8fafc;
    --rp-photo-overlay: rgba(15,23,42,.78);
    --rp-api-bg: #10182b;
    --rp-api-code-bg: #0a1020;
    --rp-api-code-text: #dbe7ff;
    --rp-shadow: 0 8px 25px rgba(15,23,42,.06);
    --rp-shadow-hover: 0 15px 35px rgba(15,23,42,.13);
    --rp-hero-shadow: 0 20px 45px rgba(15,23,42,.22);
}

html.dark, body.dark, .dark-theme {
    --rp-page-bg: #08111d;
    --rp-page-gradient-start: #08111d;
    --rp-page-gradient-end: #10233f;
    --rp-surface: #121c2f;
    --rp-surface-glass: rgba(18,28,47,.78);
    --rp-surface-glass-strong: rgba(18,28,47,.92);
    --rp-surface-transparent: rgba(18,28,47,.70);
    --rp-surface-soft: #17253e;
    --rp-surface-soft-alpha: rgba(25,44,33,.82);
    --rp-surface-hover: #1e3250;
    --rp-surface-muted: #1b2e49;
    --rp-heading: #eff6ff;
    --rp-text: #dbeafe;
    --rp-text-soft: #bfdbfe;
    --rp-muted: #93a9c7;
    --rp-muted-light: #7890b3;
    --rp-border: #2d4671;
    --rp-border-soft: #243b5d;
    --rp-border-control: #365681;
    --rp-primary: #3b82f6;
    --rp-primary-hover: #60a5fa;
    --rp-primary-soft: rgba(59,130,246,.14);
    --rp-primary-focus: rgba(96,165,250,.18);
    --rp-primary-shadow: rgba(59,130,246,.24);
    --rp-success: #3b82f6;
    --rp-success-hover: #60a5fa;
    --rp-success-soft: rgba(59,130,246,.14);
    --rp-success-text: #93c5fd;
    --rp-warning: #fbbf24;
    --rp-warning-soft: rgba(245,158,11,.14);
    --rp-warning-text: #fcd34d;
    --rp-danger: #ef4444;
    --rp-danger-hover: #f87171;
    --rp-danger-soft: rgba(239,68,68,.14);
    --rp-danger-text: #fca5a5;
    --rp-info: #22d3ee;
    --rp-info-soft: rgba(34,211,238,.14);
    --rp-info-text: #67e8f9;
    --rp-purple: #c084fc;
    --rp-green-dark: #60a5fa;
    --rp-hero-start: #0a1930;
    --rp-hero-end: #173b63;
    --rp-hero-muted: #b8cfc0;
    --rp-hero-label: #93c5fd;
    --rp-response-navy: #0a1930;
    --rp-response-navy-soft: #173b63;
    --rp-response-gold: #fbbf24;
    --rp-response-gold-light: #fde68a;
    --rp-response-red: #fb7185;
    --rp-response-blue: #60a5fa;
    --rp-response-green: #60a5fa;
    --rp-photo-zone: #17253e;
    --rp-photo-overlay: rgba(0,0,0,.72);
    --rp-api-bg: #0a1930;
    --rp-api-code-bg: #061225;
    --rp-api-code-text: #d7f5df;
    --rp-shadow: 0 10px 30px rgba(0,0,0,.28);
    --rp-shadow-hover: 0 18px 42px rgba(0,0,0,.42);
    --rp-hero-shadow: 0 22px 55px rgba(0,0,0,.45);
}

/******************* Site Info  ******************************/


:root {
    /* Brand */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-soft: #eff6ff;
    --color-primary-soft-2: #dbeafe;
    --color-success: #2563eb;
    --color-success-light: #3b82f6;
    --color-success-soft: #dbeafe;
    --color-success-text: #153a80;
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    --color-danger-text: #b91c1c;
    --color-warning-soft: #ffedd5;
    --color-warning-text: #c2410c;
    /* Neutral */
    --color-white: #ffffff;
    --color-page: #f4f7fb;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-surface-muted: #f1f5f9;
    --color-text: #0f172a;
    --color-text-strong: #111827;
    --color-text-soft: #334155;
    --color-muted: #64748b;
    --color-muted-light: #94a3b8;
    --color-border: #e2e8f0;
    --color-border-soft: #e5e7eb;
    --color-border-strong: #cbd5e1;
    /* Dark surfaces */
    --color-dark: #0f172a;
    --color-dark-2: #1e293b;
    --color-dark-text: #cbd5e1;
    /* Radius */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 18px;
    --radius-2xl: 22px;
    --radius-3xl: 26px;
    --radius-4xl: 30px;
    --radius-round: 999px;
    /* Spacing */
    --space-1: 6px;
    --space-2: 8px;
    --space-3: 10px;
    --space-4: 12px;
    --space-5: 14px;
    --space-6: 16px;
    --space-7: 18px;
    --space-8: 20px;
    --space-9: 22px;
    --space-10: 24px;
    --space-11: 28px;
    /* Shadows */
    --shadow-sm: 0 6px 20px rgba(15, 23, 42, .06);
    --shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
    --shadow-lg: 0 18px 45px rgba(15, 23, 42, .12);
    --shadow-xl: 0 30px 80px rgba(15, 23, 42, .24);
    --shadow-modal: 0 35px 100px rgba(0, 0, 0, .32);
    /* Effects */
    --overlay-bg: rgba(15, 23, 42, .58);
    --focus-ring: 0 0 0 4px rgba(37, 99, 235, .12);
    --transition-fast: .2s ease;
}


/* CREATE SITE VARIABLES */
:root {
    --cs-primary: #2563eb;
    --cs-primary-hover: #1d4ed8;
    --cs-primary-soft: #eff6ff;
    --cs-primary-ring: rgba(37,99,235,.12);
    --cs-primary-shadow: rgba(37,99,235,.22);
    --cs-success: #2563eb;
    --cs-success-soft: #dbeafe;
    --cs-success-text: #153a80;
    --cs-warning: #f59e0b;
    --cs-warning-soft: #fff7ed;
    --cs-warning-text: #9a3412;
    --cs-danger: #dc2626;
    --cs-danger-hover: #b91c1c;
    --cs-danger-soft: #fee2e2;
    --cs-page: #f4f7fb;
    --cs-surface: #fff;
    --cs-surface-soft: #f8fafc;
    --cs-surface-muted: #f1f5f9;
    --cs-heading: #0f172a;
    --cs-text: #1e293b;
    --cs-text-soft: #334155;
    --cs-muted: #64748b;
    --cs-muted-light: #94a3b8;
    --cs-border: #e2e8f0;
    --cs-border-soft: #edf1f7;
    --cs-border-strong: #cbd5e1;
    --cs-white: #fff;
    --cs-radius-sm: 10px;
    --cs-radius-md: 12px;
    --cs-radius-lg: 16px;
    --cs-radius-xl: 20px;
    --cs-radius-round: 999px;
    --cs-shadow-sm: 0 6px 20px rgba(15,23,42,.05);
    --cs-shadow-md: 0 8px 28px rgba(15,23,42,.06);
    --cs-shadow-lg: 0 16px 40px rgba(15,23,42,.10);
    --cs-transition: .2s ease;
    --primary: var(--cs-primary);
    --card: var(--cs-surface);
    --bg: var(--cs-surface);
    --box: var(--cs-surface-soft);
    --text: var(--cs-text);
    --border: var(--cs-border);
}

html.dark, body.dark, .dark-theme {
    --cs-primary: #3b82f6;
    --cs-primary-hover: #2563eb;
    --cs-primary-soft: rgba(59,130,246,.14);
    --cs-primary-ring: rgba(96,165,250,.16);
    --cs-primary-shadow: rgba(59,130,246,.22);
    --cs-success: #3b82f6;
    --cs-success-soft: rgba(59,130,246,.14);
    --cs-success-text: #93c5fd;
    --cs-warning: #fbbf24;
    --cs-warning-soft: rgba(251,191,36,.14);
    --cs-warning-text: #fde68a;
    --cs-danger: #ef4444;
    --cs-danger-hover: #dc2626;
    --cs-danger-soft: rgba(239,68,68,.14);
    --cs-page: #08111d;
    --cs-surface: #121c2f;
    --cs-surface-soft: #17253e;
    --cs-surface-muted: #1e3250;
    --cs-heading: #eff6ff;
    --cs-text: #dbeafe;
    --cs-text-soft: #bfdbfe;
    --cs-muted: #93a9c7;
    --cs-muted-light: #7890b3;
    --cs-border: #2d4671;
    --cs-border-soft: #243b5d;
    --cs-border-strong: #365681;
    --cs-shadow-sm: 0 8px 22px rgba(0,0,0,.24);
    --cs-shadow-md: 0 12px 30px rgba(0,0,0,.3);
    --cs-shadow-lg: 0 18px 46px rgba(0,0,0,.4);
}

/* =========================================================
   SITE INFO + LOCATION THEME VARIABLES
   Load before site-info-location.css
   ========================================================= */

:root {
    /* Brand */
    --sil-primary: #2563eb;
    --sil-primary-hover: #1d4ed8;
    --sil-primary-soft: #eff6ff;
    --sil-primary-soft-2: #dbeafe;
    --sil-primary-ring: rgba(37, 99, 235, 0.12);
    --sil-success: #2563eb;
    --sil-success-soft: #dbeafe;
    --sil-success-text: #153a80;
    --sil-warning: #f59e0b;
    --sil-warning-soft: #fff7ed;
    --sil-warning-text: #9a3412;
    --sil-danger: #dc2626;
    --sil-danger-soft: #fee2e2;
    /* Surfaces */
    --sil-page: #f4f7fb;
    --sil-surface: #ffffff;
    --sil-surface-soft: #f8fafc;
    --sil-surface-muted: #f1f5f9;
    --sil-surface-blue: #eef5ff;
    --sil-surface-glass: rgba(255, 255, 255, 0.92);
    /* Text */
    --sil-heading: #0f172a;
    --sil-text: #1e293b;
    --sil-text-soft: #334155;
    --sil-muted: #64748b;
    --sil-muted-light: #94a3b8;
    --sil-white: #ffffff;
    /* Borders */
    --sil-border: #e2e8f0;
    --sil-border-soft: #edf1f7;
    --sil-border-strong: #cbd5e1;
    /* Radius */
    --sil-radius-sm: 10px;
    --sil-radius-md: 12px;
    --sil-radius-lg: 16px;
    --sil-radius-xl: 20px;
    --sil-radius-2xl: 24px;
    --sil-radius-round: 999px;
    /* Shadows */
    --sil-shadow-sm: 0 6px 20px rgba(15, 23, 42, 0.05);
    --sil-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.07);
    --sil-shadow-lg: 0 18px 46px rgba(15, 23, 42, 0.12);
    /* Motion */
    --sil-transition: 0.2s ease;
}

html.dark,
body.dark,
.dark-theme {
    --sil-primary: #3b82f6;
    --sil-primary-hover: #2563eb;
    --sil-primary-soft: rgba(59, 130, 246, 0.14);
    --sil-primary-soft-2: rgba(59, 130, 246, 0.22);
    --sil-primary-ring: rgba(96, 165, 250, 0.16);
    --sil-success: #3b82f6;
    --sil-success-soft: rgba(59, 130, 246, 0.14);
    --sil-success-text: #93c5fd;
    --sil-warning: #fbbf24;
    --sil-warning-soft: rgba(251, 191, 36, 0.14);
    --sil-warning-text: #fde68a;
    --sil-danger: #ef4444;
    --sil-danger-soft: rgba(239, 68, 68, 0.14);
    --sil-page: #08111d;
    --sil-surface: #121c2f;
    --sil-surface-soft: #17253e;
    --sil-surface-muted: #1e3250;
    --sil-surface-blue: rgba(59, 130, 246, 0.10);
    --sil-surface-glass: rgba(18, 28, 47, 0.94);
    --sil-heading: #eff6ff;
    --sil-text: #dbeafe;
    --sil-text-soft: #bfdbfe;
    --sil-muted: #93a9c7;
    --sil-muted-light: #7890b3;
    --sil-white: #ffffff;
    --sil-border: #2d4671;
    --sil-border-soft: #243b5d;
    --sil-border-strong: #365681;
    --sil-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.24);
    --sil-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.30);
    --sil-shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.40);
}

/* =========================================================
   DASHBOARD THEME VARIABLES
   Load this file before dashboard.css
   ========================================================= */

:root {
    /* Brand */
    --db-primary: #2563eb;
    --db-primary-hover: #1d4ed8;
    --db-primary-soft: #eff6ff;
    --db-primary-ring: rgba(37, 99, 235, 0.14);
    --db-danger: #ef4444;
    --db-danger-hover: #dc2626;
    --db-danger-soft: #fee2e2;
    --db-danger-border: #fecaca;
    --db-danger-text: #991b1b;
    --db-warning: #f59e0b;
    --db-warning-soft: #c7f6fe;
    --db-warning-panel: rgba(255, 247, 237, 0.52);
    --db-warning-border: #fed7aa;
    --db-info: #3b82f6;
    --db-info-soft: #dbeafe;
    --db-info-panel: rgba(239, 246, 255, 0.52);
    --db-info-border: #bfdbfe;
    --db-success: #2563eb;
    --db-success-soft: #dbeafe;
    --db-success-text: #1e40af;
    /* Surfaces */
    --db-page: #f4f7fb;
    --db-surface: #ffffff;
    --db-surface-soft: #f8fafc;
    --db-surface-muted: #f1f5f9;
    --db-surface-glass: rgba(255, 255, 255, 0.78);
    --db-overlay: rgba(15, 23, 42, 0.78);
    /* Text */
    --db-heading: #0f172a;
    --db-text: #1e293b;
    --db-text-soft: #334155;
    --db-muted: #64748b;
    --db-muted-light: #94a3b8;
    --db-white: #ffffff;
    /* Borders */
    --db-border: #e2e8f0;
    --db-border-soft: #eef2f7;
    --db-border-strong: #cbd5e1;
    /* Dark header */
    --db-dark: #111827;
    --db-dark-2: #1f2937;
    --db-dark-hover: #374151;
    --db-dark-text: #d1d5db;
    --db-dark-accent: #93c5fd;
    /* Radius */
    --db-radius-sm: 10px;
    --db-radius-md: 12px;
    --db-radius-lg: 16px;
    --db-radius-xl: 24px;
    --db-radius-2xl: 30px;
    --db-radius-round: 999px;
    /* Shadows */
    --db-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --db-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
    --db-shadow-lg: 0 22px 48px rgba(15, 23, 42, 0.13);
    --db-shadow-modal: 0 30px 90px rgba(0, 0, 0, 0.35);
    /* Motion */
    --db-transition: 0.25s ease;
}

html.dark,
body.dark,
.dark-theme {
    --db-primary: #3b82f6;
    --db-primary-hover: #2563eb;
    --db-primary-soft: rgba(59, 130, 246, 0.14);
    --db-primary-ring: rgba(96, 165, 250, 0.16);
    --db-danger: #f87171;
    --db-danger-hover: #ef4444;
    --db-danger-soft: rgba(239, 68, 68, 0.14);
    --db-danger-border: rgba(248, 113, 113, 0.28);
    --db-danger-text: #fecaca;
    --db-warning: #fbbf24;
    --db-warning-soft: rgba(251, 191, 36, 0.16);
    --db-warning-panel: rgba(120, 53, 15, 0.18);
    --db-warning-border: rgba(251, 191, 36, 0.26);
    --db-info: #60a5fa;
    --db-info-soft: rgba(96, 165, 250, 0.16);
    --db-info-panel: rgba(30, 64, 175, 0.18);
    --db-info-border: rgba(96, 165, 250, 0.26);
    --db-success: #60a5fa;
    --db-success-soft: rgba(59, 130, 246, 0.16);
    --db-success-text: #bfdbfe;
    --db-page: #08111d;
    --db-surface: #121c2f;
    --db-surface-soft: #17253e;
    --db-surface-muted: #1e3250;
    --db-surface-glass: rgba(18, 28, 47, 0.84);
    --db-overlay: rgba(3, 10, 6, 0.84);
    --db-heading: #eff6ff;
    --db-text: #dbeafe;
    --db-text-soft: #bfdbfe;
    --db-muted: #93a9c7;
    --db-muted-light: #7890b3;
    --db-white: #ffffff;
    --db-border: #2d4671;
    --db-border-soft: #243b5d;
    --db-border-strong: #365681;
    --db-dark: #0b172b;
    --db-dark-2: #152b48;
    --db-dark-hover: #23446a;
    --db-dark-text: #c8d8ce;
    --db-dark-accent: #93c5fd;
    --db-shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.24);
    --db-shadow-md: 0 14px 34px rgba(0, 0, 0, 0.30);
    --db-shadow-lg: 0 24px 54px rgba(0, 0, 0, 0.42);
    --db-shadow-modal: 0 34px 100px rgba(0, 0, 0, 0.58);
}


:root {
    /* =====================================================
       Brand Colors
       ===================================================== */

    --site-primary-50: #eff6ff;
    --site-primary-100: #dbeafe;
    --site-primary-200: #bfdbfe;
    --site-primary-300: #93c5fd;
    --site-primary-400: #60a5fa;
    --site-primary-500: #3b82f6;
    --site-primary-600: #2563eb;
    --site-primary-700: #153a80;
    --site-primary-800: #1e40af;
    --site-primary-900: #1e3a8a;
    --site-primary-950: #172554;
    /* =====================================================
       Semantic Colors
       ===================================================== */

    --site-primary: var(--site-primary-700);
    --site-primary-hover: var(--site-primary-800);
    --site-primary-active: var(--site-primary-900);
    --site-primary-light: var(--site-primary-100);
    --site-primary-soft: var(--site-primary-50);
    --site-success: #2563eb;
    --site-success-dark: #1e40af;
    --site-success-soft: #dbeafe;
    --site-danger: #dc2626;
    --site-danger-dark: #b91c1c;
    --site-danger-soft: #fee2e2;
    --site-warning: #d97706;
    --site-warning-soft: #c7f6fe;
    --site-info: #0284c7;
    --site-info-soft: #e0f2fe;
    /* =====================================================
       Page Colors
       ===================================================== */

    --site-page-bg: #f5f8ff;
    --site-surface: #002b4e54;
    --site-surface-soft: #f8fbff;
    --site-surface-muted: #eef4ff;
    --site-text: #121c2f;
    --site-text-heading: #0d1c35;
    --site-text-muted: #647168;
    --site-text-soft: #849188;
    --site-text-on-primary: #ffffff;
    --site-border: #dce5f3;
    --site-border-light: #e8eef7;
    --site-border-strong: #c7d5e8;
    /* =====================================================
       Typography
       ===================================================== */

    --site-font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --site-font-size-xs: 0.75rem;
    --site-font-size-sm: 0.875rem;
    --site-font-size-md: 1rem;
    --site-font-size-lg: 1.125rem;
    --site-font-size-xl: 1.35rem;
    --site-font-size-2xl: 1.75rem;
    --site-font-size-3xl: 2.25rem;
    --site-font-weight-normal: 400;
    --site-font-weight-medium: 500;
    --site-font-weight-semibold: 600;
    --site-font-weight-bold: 700;
    --site-font-weight-extrabold: 800;
    /* =====================================================
       Spacing
       ===================================================== */

    --site-space-1: 4px;
    --site-space-2: 8px;
    --site-space-3: 12px;
    --site-space-4: 16px;
    --site-space-5: 20px;
    --site-space-6: 24px;
    --site-space-7: 28px;
    --site-space-8: 32px;
    --site-space-9: 40px;
    --site-space-10: 48px;
    /* =====================================================
       Radius
       ===================================================== */

    --site-radius-xs: 8px;
    --site-radius-sm: 12px;
    --site-radius-md: 16px;
    --site-radius-lg: 22px;
    --site-radius-xl: 28px;
    --site-radius-pill: 999px;
    /* =====================================================
       Shadows
       ===================================================== */

    --site-shadow-xs: 0 2px 8px rgba(20, 83, 45, 0.05);
    --site-shadow-sm: 0 6px 18px rgba(20, 83, 45, 0.07);
    --site-shadow-md: 0 14px 35px rgba(20, 83, 45, 0.10);
    --site-shadow-lg: 0 24px 65px rgba(20, 83, 45, 0.14);
    --site-shadow-focus: 0 0 0 4px rgba(59, 130, 246, 0.14);
    /* =====================================================
       Transitions
       ===================================================== */

    --site-transition-fast: 150ms ease;
    --site-transition: 220ms ease;
    --site-transition-slow: 350ms ease;
    /* =====================================================
       Layout
       ===================================================== */

    --site-page-max-width: 1500px;
    --site-header-height: auto;
}

:root {
    /* ================================
       Blue Palette
       ================================ */

    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    --blue-950: #0b1f3a;
    /* ================================
       Main Theme
       ================================ */

    --site-primary: var(--blue-600);
    --site-primary-hover: var(--blue-700);
    --site-primary-active: var(--blue-800);
    --site-primary-soft: var(--blue-50);
    --site-primary-light: var(--blue-100);
    --site-primary-border: var(--blue-200);
    /* ================================
       Surfaces
       ================================ */

    --site-page-bg: #f4f6f8;
    --site-card-bg: #ffffff;
    --site-card-soft: #f8fbff;
    --site-input-bg: #fbfdff;
    --site-overlay-bg: rgba(10, 30, 60, 0.64);
    /* ================================
       Text
       ================================ */

    --site-text: #17233a;
    --site-heading: #10203a;
    --site-muted: #687994;
    --site-soft-text: #8494ad;
    --site-white: #ffffff;
    /* ================================
       Borders
       ================================ */

    --site-border: #dce5f3;
    --site-border-soft: #e9eff7;
    --site-border-strong: #c9d6e8;
    /* ================================
       Status Colors
       ================================ */

    --site-success: #2563eb;
    --site-success-hover: #1d4ed8;
    --site-success-soft: #e0ecff;
    --site-warning: #c98519;
    --site-warning-hover: #a96812;
    --site-warning-soft: #fff3d7;
    --site-danger: #c64a4a;
    --site-danger-hover: #a73939;
    --site-danger-soft: #fde7e7;
    --site-info: #397a91;
    --site-info-soft: #e2f2f7;
    /* ================================
       Radius
       ================================ */

    --site-radius-xs: 8px;
    --site-radius-sm: 12px;
    --site-radius-md: 16px;
    --site-radius-lg: 22px;
    --site-radius-xl: 28px;
    --site-radius-pill: 999px;
    /* ================================
       Shadows
       ================================ */

    --site-shadow-xs: 0 2px 8px rgba(30, 64, 120, 0.05);
    --site-shadow-sm: 0 7px 20px rgba(30, 64, 120, 0.08);
    --site-shadow-md: 0 16px 38px rgba(30, 64, 120, 0.11);
    --site-shadow-lg: 0 28px 70px rgba(30, 64, 120, 0.16);
    --site-focus-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
    /* ================================
       Spacing
       ================================ */

    --site-space-1: 4px;
    --site-space-2: 8px;
    --site-space-3: 12px;
    --site-space-4: 16px;
    --site-space-5: 20px;
    --site-space-6: 24px;
    --site-space-7: 28px;
    --site-space-8: 32px;
    --site-space-9: 40px;
    --site-space-10: 48px;
    /* ================================
       Transitions
       ================================ */

    --site-transition-fast: 150ms ease;
    --site-transition: 220ms ease;
    --site-transition-slow: 350ms ease;
    /* ================================
       Typography
       ================================ */

    --site-font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    --site-page-width: 1500px;
    --green-800: #93a9c7;
    --green-600:  #153a80;
}