:root {
    /* Material 3 Tonal Green Palette */
    --m3-green-10: #00210f;
    --m3-green-20: #00391c;
    --m3-green-30: #00522a;
    --m3-green-40: #006d3a;
    --m3-green-50: #008949;
    --m3-green-60: #00a55c;
    --m3-green-70: #26c275;
    --m3-green-80: #49df91;
    --m3-green-90: #64fbaa;
    --m3-green-95: #c1ffd7;
    --m3-green-99: #f3fff5;

    /* ===== LEGACY NAMING (Deprecated - use MD3 tokens instead) ===== */
    /* These maintain backward compatibility but have misleading "green" names */
    /* They actually represent the primary theme color (which may be blue, orange, etc.) */
    --primary-green: var(--m3-green-50);
    --primary-green-dark: var(--m3-green-40);
    --primary-green-light: var(--m3-green-80);
    --primary-green-lighter: var(--m3-green-99);
    --primary-green-tonal: var(--m3-green-90);
    --primary-green-bright: var(--m3-green-60);
    --primary-green-muted: var(--m3-green-30);
    --accent-green: var(--m3-green-80);
    --primary-green-rgb: 0, 137, 73;
    --primary-green-alpha-05: rgba(var(--primary-green-rgb), 0.05);
    --primary-green-alpha-10: rgba(var(--primary-green-rgb), 0.10);
    --primary-green-alpha-15: rgba(var(--primary-green-rgb), 0.15);
    --primary-green-alpha-20: rgba(var(--primary-green-rgb), 0.20);
    --primary-green-alpha-25: rgba(var(--primary-green-rgb), 0.25);
    --primary-green-alpha-30: rgba(var(--primary-green-rgb), 0.30);
    --primary-green-alpha-40: rgba(var(--primary-green-rgb), 0.40);
    --primary-green-alpha-50: rgba(var(--primary-green-rgb), 0.50);
    --primary-green-alpha-60: rgba(var(--primary-green-rgb), 0.60);
    --primary-green-alpha-70: rgba(var(--primary-green-rgb), 0.70);
    --primary-green-alpha-80: rgba(var(--primary-green-rgb), 0.80);

    /* ===== SEMANTIC ALIASES (Theme-neutral naming) ===== */
    /* Use these instead - they better represent their purpose across all themes */
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-primary-muted: var(--primary-green-muted);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);
    --brand-primary-alpha-05: var(--primary-green-alpha-05);
    --brand-primary-alpha-10: var(--primary-green-alpha-10);
    --brand-primary-alpha-15: var(--primary-green-alpha-15);
    --brand-primary-alpha-20: var(--primary-green-alpha-20);
    --brand-primary-alpha-25: var(--primary-green-alpha-25);
    --brand-primary-alpha-30: var(--primary-green-alpha-30);
    --brand-primary-alpha-40: var(--primary-green-alpha-40);
    --brand-primary-alpha-50: var(--primary-green-alpha-50);
    --brand-primary-alpha-60: var(--primary-green-alpha-60);
    --brand-primary-alpha-70: var(--primary-green-alpha-70);
    --brand-primary-alpha-80: var(--primary-green-alpha-80);
    --primary-green-alpha-90: rgba(var(--primary-green-rgb), 0.90);

    /* ===================================
       MATERIAL DESIGN 3 COLOR SYSTEM
       =================================== */

    /* PRIMARY COLOR SYSTEM (Green) */
    --md-primary: var(--m3-green-50);
    --md-primary-rgb: 0, 137, 73;
    --md-on-primary: #ffffff;
    --md-primary-container: var(--m3-green-90);
    --md-on-primary-container: var(--m3-green-10);
    --md-primary-hover: var(--m3-green-40);
    --md-primary-active: var(--m3-green-30);
    --md-primary-light: var(--m3-green-80);
    --md-primary-lighter: var(--m3-green-95);
    --md-primary-dark: var(--m3-green-40);

    /* Primary Alpha Variants */
    --md-primary-alpha-05: rgba(var(--md-primary-rgb), 0.05);
    --md-primary-alpha-10: rgba(var(--md-primary-rgb), 0.10);
    --md-primary-alpha-15: rgba(var(--md-primary-rgb), 0.15);
    --md-primary-alpha-20: rgba(var(--md-primary-rgb), 0.20);
    --md-primary-alpha-25: rgba(var(--md-primary-rgb), 0.25);
    --md-primary-alpha-30: rgba(var(--md-primary-rgb), 0.30);
    --md-primary-alpha-40: rgba(var(--md-primary-rgb), 0.40);
    --md-primary-alpha-50: rgba(var(--md-primary-rgb), 0.50);

    /* SECONDARY COLOR SYSTEM (Gray-Green) */
    --md-secondary: #526e59;
    --md-secondary-rgb: 82, 110, 89;
    --md-on-secondary: #ffffff;
    --md-secondary-container: #d4e8d9;
    --md-on-secondary-container: #0f1f14;
    --md-secondary-hover: #445a4a;
    --md-secondary-active: #3a4d40;

    /* TERTIARY COLOR SYSTEM (Blue-Green Accent) */
    --md-tertiary: #3a6471;
    --md-tertiary-rgb: 58, 100, 113;
    --md-on-tertiary: #ffffff;
    --md-tertiary-container: #bee9f8;
    --md-on-tertiary-container: #001f28;
    --md-tertiary-hover: #2d4f5a;
    --md-tertiary-active: #234047;

    /* ERROR COLOR SYSTEM */
    --md-error: #ba1a1a;
    --md-error-rgb: 186, 26, 26;
    --md-on-error: #ffffff;
    --md-error-container: #ffdad6;
    --md-on-error-container: #410002;
    --md-error-hover: #a11616;
    --md-error-active: #8a1313;
    --md-error-alpha-10: rgba(var(--md-error-rgb), 0.10);
    --md-error-alpha-20: rgba(var(--md-error-rgb), 0.20);
    --md-error-alpha-30: rgba(var(--md-error-rgb), 0.30);

    /* SUCCESS COLOR SYSTEM */
    --md-success: var(--m3-green-60);
    --md-success-rgb: 0, 165, 92;
    --md-on-success: #ffffff;
    --md-success-container: var(--m3-green-95);
    --md-on-success-container: var(--m3-green-20);
    --md-success-hover: var(--m3-green-50);
    --md-success-active: var(--m3-green-40);

    /* WARNING COLOR SYSTEM */
    --md-warning: #ff9800;
    --md-warning-rgb: 255, 152, 0;
    --md-on-warning: #000000;
    --md-warning-container: #fff3e0;
    --md-on-warning-container: #3e2723;
    --md-warning-hover: #fb8c00;
    --md-warning-active: #f57c00;
    --md-warning-alpha-10: rgba(var(--md-warning-rgb), 0.10);
    --md-warning-alpha-20: rgba(var(--md-warning-rgb), 0.20);
    --md-warning-alpha-30: rgba(var(--md-warning-rgb), 0.30);

    /* INFO COLOR SYSTEM */
    --md-info: #2196f3;
    --md-info-rgb: 33, 150, 243;
    --md-on-info: #ffffff;
    --md-info-container: #e3f2fd;
    --md-on-info-container: #0d47a1;
    --md-info-hover: #1e88e5;
    --md-info-active: #1976d2;
    --md-info-alpha-10: rgba(var(--md-info-rgb), 0.10);
    --md-info-alpha-20: rgba(var(--md-info-rgb), 0.20);
    --md-info-alpha-30: rgba(var(--md-info-rgb), 0.30);

    /* SURFACE & BACKGROUND COLORS */
    --md-surface: #fafdfb;
    --md-surface-dim: #d8dbd8;
    --md-surface-bright: #fafdfb;
    --md-surface-variant: #e7e8e3;
    --md-surface-container-lowest: #ffffff;
    --md-surface-container-low: #f2f5f1;
    --md-surface-container: #eceee9;
    --md-surface-container-high: #e6e9e3;
    --md-surface-container-highest: #e1e3de;
    --md-on-surface: #191c19;
    --md-on-surface-variant: #414942;
    --md-background: #fafdfb;
    --md-on-background: #191c19;

    /* OUTLINE COLORS */
    --md-outline: #717972;
    --md-outline-variant: #c0c9c1;

    /* INVERSE/CONTRAST COLORS */
    --md-inverse-surface: #2e312d;
    --md-inverse-on-surface: #eff1ed;
    --md-inverse-primary: var(--m3-green-80);

    /* ===================================
       COMPONENT-SPECIFIC TOKENS
       =================================== */

    /* Sidebar */
    --sidebar-surface: var(--md-primary);
    --sidebar-on-surface: var(--md-on-primary);
    --sidebar-gradient-start: var(--m3-green-40);
    --sidebar-gradient-end: var(--m3-green-20);
    --sidebar-hover-state: var(--md-primary-alpha-10);
    --sidebar-active-state: var(--md-primary-alpha-20);
    --sidebar-divider: var(--md-outline-variant);

    /* Legacy Sidebar Variables (for backward compatibility) */
    --sidebar-bg-start: var(--sidebar-gradient-start);
    --sidebar-bg-end: var(--sidebar-gradient-end);
    --sidebar-text: var(--sidebar-on-surface);
    --sidebar-hover: var(--brand-primary);
    --sidebar-border: var(--m3-green-80);

    /* Buttons */
    --btn-primary-bg: var(--md-primary);
    --btn-primary-text: var(--md-on-primary);
    --btn-primary-hover: var(--md-primary-hover);
    --btn-primary-active: var(--md-primary-active);
    --btn-secondary-bg: var(--md-secondary);
    --btn-secondary-text: var(--md-on-secondary);
    --btn-secondary-hover: var(--md-secondary-hover);
    --btn-secondary-active: var(--md-secondary-active);
    --btn-success-bg: var(--md-success);
    --btn-success-text: var(--md-on-success);
    --btn-success-hover: var(--md-success-hover);
    --btn-danger-bg: var(--md-error);
    --btn-danger-text: var(--md-on-error);
    --btn-danger-hover: var(--md-error-hover);
    --btn-warning-bg: var(--md-warning);
    --btn-warning-text: var(--md-on-warning);
    --btn-warning-hover: var(--md-warning-hover);
    --btn-info-bg: var(--md-info);
    --btn-info-text: var(--md-on-info);
    --btn-info-hover: var(--md-info-hover);

    /* Tables */
    --table-surface: var(--md-surface);
    --table-header-bg: var(--md-surface-container-high);
    --table-header-text: var(--md-on-surface);
    --table-row-odd: var(--md-surface-container-low);
    --table-row-even: var(--md-surface);
    --table-row-hover: var(--md-surface-container);
    --table-border: var(--md-outline-variant);
    --table-text: var(--md-on-surface);

    /* Forms */
    --form-surface: var(--md-surface-container-lowest);
    --form-input-bg: var(--md-surface);
    --form-input-border: var(--md-outline);
    --form-input-border-focus: var(--md-primary);
    --form-input-text: var(--md-on-surface);
    --form-label-text: var(--md-on-surface-variant);
    --form-placeholder: var(--md-on-surface-variant);
    --form-disabled-bg: var(--md-surface-container-low);
    --form-disabled-text: var(--md-on-surface-variant);

    /* Cards */
    --card-surface: var(--md-surface-container-lowest);
    --card-border: var(--md-outline-variant);
    --card-shadow: rgba(0, 0, 0, 0.08);
    --card-hover-shadow: rgba(0, 0, 0, 0.16);
    --card-header-bg: var(--md-surface-container);
    --card-text: var(--md-on-surface);

    /* Status Colors */
    --status-scheduled-bg: var(--md-info-container);
    --status-scheduled-text: var(--md-on-info-container);
    --status-confirmed-bg: var(--md-info);
    --status-confirmed-text: var(--md-on-info);
    --status-in-progress-bg: var(--md-warning);
    --status-in-progress-text: var(--md-on-warning);
    --status-completed-bg: var(--md-success);
    --status-completed-text: var(--md-on-success);
    --status-cancelled-bg: var(--md-error-container);
    --status-cancelled-text: var(--md-on-error-container);
    --status-rescheduled-bg: var(--md-tertiary);
    --status-rescheduled-text: var(--md-on-tertiary);

    /* Alerts */
    --alert-error-bg: var(--md-error-container);
    --alert-error-text: var(--md-on-error-container);
    --alert-error-border: var(--md-error);
    --alert-success-bg: var(--md-success-container);
    --alert-success-text: var(--md-on-success-container);
    --alert-success-border: var(--md-success);
    --alert-warning-bg: var(--md-warning-container);
    --alert-warning-text: var(--md-on-warning-container);
    --alert-warning-border: var(--md-warning);
    --alert-info-bg: var(--md-info-container);
    --alert-info-text: var(--md-on-info-container);
    --alert-info-border: var(--md-info);

    /* Calendar */
    --calendar-surface: var(--md-surface);
    --calendar-header-bg: var(--md-primary);
    --calendar-header-text: var(--md-on-primary);
    --calendar-cell-text: var(--md-on-surface);
    --calendar-cell-hover: var(--md-surface-container-high);
    --calendar-cell-selected: var(--md-primary);
    --calendar-cell-selected-text: var(--md-on-primary);
    --calendar-cell-today-border: var(--md-primary);
    --calendar-weekend: var(--md-surface-container);
    --calendar-disabled: var(--md-surface-container-low);
    --calendar-disabled-text: var(--md-on-surface-variant);

    /* Charts */
    --chart-primary: var(--md-primary);
    --chart-secondary: var(--md-secondary);
    --chart-tertiary: var(--md-tertiary);
    --chart-success: var(--md-success);
    --chart-error: var(--md-error);
    --chart-warning: var(--md-warning);
    --chart-info: var(--md-info);
    --chart-grid: var(--md-outline-variant);
    --chart-text: var(--md-on-surface);
    --chart-tooltip-bg: var(--md-surface-container-high);
    --chart-tooltip-text: var(--md-on-surface);

    /* Legacy Compatibility - Map old variables to new system */
    --primary-green: var(--md-primary);
    --primary-green-dark: var(--md-primary-dark);
    --primary-green-light: var(--md-primary-light);
    --primary-green-lighter: var(--md-primary-lighter);
    --surface: var(--md-surface);
    --surface-variant: var(--md-surface-container-low);
    --outline: var(--md-outline);
    --outline-dark: var(--md-outline-variant);
    --text-primary: var(--md-on-surface);
    --text-secondary: var(--md-on-surface-variant);
    --error-bg: var(--alert-error-bg);
    --error-text: var(--alert-error-text);
    --error-border: var(--alert-error-border);
    --success-bg: var(--alert-success-bg);
    --success-text: var(--alert-success-text);
    --success-border: var(--alert-success-border);

    /* Layout */
    --sidebar-width: 250px;

    /* ===================================
       BOOTSTRAP VARIABLE OVERRIDES (Light Mode Default)
       =================================== */
    --bs-body-bg: var(--md-background);
    --bs-body-color: var(--md-on-background);
    --bs-body-color-rgb: 25, 28, 25;
    --bs-body-bg-rgb: 250, 253, 251;
    --bs-border-color: var(--md-outline-variant);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-secondary-bg: var(--md-surface-container-low);
    --bs-tertiary-bg: var(--md-surface-container);
    --bs-secondary-color: var(--md-on-surface-variant);
    --bs-tertiary-color: rgba(25, 28, 25, 0.5);
    --bs-emphasis-color: var(--md-on-surface);
    --bs-emphasis-color-rgb: 25, 28, 25;
    --bs-heading-color: var(--md-on-surface);
    --bs-link-color: var(--md-primary);
    --bs-link-hover-color: var(--md-primary-hover);
    --bs-light: var(--md-surface-container-low);
    --bs-light-rgb: 242, 245, 241;
    --bs-dark: var(--md-on-surface);
    --bs-dark-rgb: 25, 28, 25;
    --bs-primary: var(--md-primary);
    --bs-primary-rgb: var(--md-primary-rgb);
}

/* Theme Variants */
:is(html, body)[data-theme="classic"] {
    --primary-green: var(--m3-green-40);
    --primary-green-dark: var(--m3-green-30);
    --primary-green-light: var(--m3-green-70);
    --primary-green-lighter: var(--m3-green-95);
    --primary-green-tonal: var(--m3-green-80);
    --primary-green-bright: var(--m3-green-50);
    --primary-green-muted: var(--m3-green-20);
    --accent-green: var(--m3-green-60);
    --primary-green-rgb: 0, 109, 58;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-primary-muted: var(--primary-green-muted);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);
    --sidebar-bg-start: var(--m3-green-30);
    --sidebar-bg-end: var(--m3-green-10);
    --sidebar-border: var(--m3-green-70);
}

:is(html, body)[data-theme="moss"] {
    --primary-green: var(--m3-green-30);
    --primary-green-dark: var(--m3-green-20);
    --primary-green-light: var(--m3-green-60);
    --primary-green-lighter: var(--m3-green-90);
    --primary-green-tonal: var(--m3-green-70);
    --primary-green-bright: var(--m3-green-50);
    --primary-green-muted: var(--m3-green-10);
    --accent-green: var(--m3-green-60);
    --primary-green-rgb: 0, 82, 42;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-primary-muted: var(--primary-green-muted);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);
    --sidebar-bg-start: var(--m3-green-30);
    --sidebar-bg-end: #01170b;
    --sidebar-border: var(--m3-green-60);
}

:is(html, body)[data-theme="dark"] {
    /* Primary Colors */
    --md-primary: var(--m3-green-80);
    --md-primary-rgb: 73, 223, 145;
    --md-on-primary: var(--m3-green-20);
    --md-primary-container: var(--m3-green-30);
    --md-on-primary-container: var(--m3-green-90);
    --md-primary-hover: var(--m3-green-70);
    --md-primary-active: var(--m3-green-60);
    --md-primary-light: var(--m3-green-90);
    --md-primary-lighter: rgba(73, 223, 145, 0.12);
    --md-primary-dark: var(--m3-green-70);

    /* Surface Colors */
    --md-surface: #121212;
    --md-surface-dim: #0a0a0a;
    --md-surface-bright: #2a2a2a;
    --md-surface-variant: #232323;
    --md-surface-container-lowest: #0d0d0d;
    --md-surface-container-low: #1a1a1a;
    --md-surface-container: #1e1e1e;
    --md-surface-container-high: #292929;
    --md-surface-container-highest: #333333;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #c7c7c7;
    --md-background: #121212;
    --md-on-background: #e3e3e3;

    /* Outline Colors */
    --md-outline: #8e8e8e;
    --md-outline-variant: #444444;

    /* Error Colors (adjusted for dark) */
    --md-error: #ffb4ab;
    --md-error-rgb: 255, 180, 171;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
    --md-error-hover: #ffa399;
    --md-error-active: #ff9186;

    /* Success Colors (adjusted for dark) */
    --md-success: var(--m3-green-70);
    --md-success-rgb: 38, 194, 117;
    --md-on-success: var(--m3-green-10);
    --md-success-container: var(--m3-green-30);
    --md-on-success-container: var(--m3-green-95);
    --md-success-hover: var(--m3-green-60);
    --md-success-active: var(--m3-green-50);

    /* Warning Colors (adjusted for dark) */
    --md-warning: #ffb951;
    --md-warning-rgb: 255, 185, 81;
    --md-on-warning: #452b00;
    --md-warning-container: #633f00;
    --md-on-warning-container: #ffddb3;
    --md-warning-hover: #ffa726;
    --md-warning-active: #ff9500;

    /* Info Colors (adjusted for dark) */
    --md-info: #90caf9;
    --md-info-rgb: 144, 202, 249;
    --md-on-info: #003258;
    --md-info-container: #00497b;
    --md-on-info-container: #d1e4ff;
    --md-info-hover: #64b5f6;
    --md-info-active: #42a5f5;

    /* Sidebar for Dark Theme */
    --sidebar-gradient-start: #1e1e1e;
    --sidebar-gradient-end: #121212;
    --sidebar-divider: #333333;

    /* Legacy Dark Theme Variables */
    --primary-green: var(--m3-green-80);
    --primary-green-dark: var(--m3-green-90);
    --primary-green-light: var(--m3-green-30);
    --primary-green-lighter: rgba(73, 223, 145, 0.15);
    --primary-green-tonal: var(--m3-green-40);
    --primary-green-bright: var(--m3-green-70);
    --primary-green-muted: var(--m3-green-20);
    --accent-green: var(--m3-green-70);
    --primary-green-rgb: 73, 223, 145;

    /* Semantic Brand Aliases (Dark Theme) */
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-primary-muted: var(--primary-green-muted);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);

    --sidebar-bg-start: #1e1e1e;
    --sidebar-bg-end: #121212;
    --sidebar-border: #333333;
    --sidebar-text: #e0e0e0;
    --surface: var(--md-surface);
    --surface-variant: var(--md-surface-container);
    --outline: var(--md-outline);
    --outline-dark: var(--md-outline-variant);
    --text-primary: var(--md-on-surface);
    --text-secondary: var(--md-on-surface-variant);
    --error-bg: var(--md-error-container);
    --error-text: var(--md-on-error-container);
    --error-border: var(--md-error-container);
    --success-bg: var(--md-success-container);
    --success-text: var(--md-on-success-container);
    --success-border: var(--md-success-container);

    /* Bootstrap Variable Overrides for Dark Theme */
    --bs-body-bg: #121212;
    --bs-body-color: #e3e3e3;
    --bs-body-color-rgb: 227, 227, 227;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-border-color: #444444;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-secondary-bg: #1e1e1e;
    --bs-tertiary-bg: #2a2a2a;
    --bs-secondary-color: rgba(227, 227, 227, 0.75);
    --bs-tertiary-color: rgba(227, 227, 227, 0.5);
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #ffffff;
    --bs-link-color: var(--md-primary);
    --bs-link-hover-color: var(--md-primary-hover);
    --bs-light: var(--md-surface-container);
    --bs-light-rgb: 30, 30, 30;
    --bs-dark: var(--md-on-surface);
    --bs-dark-rgb: 227, 227, 227;
    --bs-primary: var(--md-primary);
    --bs-primary-rgb: var(--md-primary-rgb);
    color-scheme: dark;
}

/* Ocean Theme (Blue) - Light */
:is(html, body)[data-theme="ocean"] {
    --md-primary: #0277bd;
    --md-primary-rgb: 2, 119, 189;
    --md-on-primary: #ffffff;
    --md-primary-container: #b3e5fc;
    --md-on-primary-container: #01579b;
    --md-primary-hover: #0288d1;
    --md-primary-active: #039be5;
    --md-primary-light: #4fc3f7;
    --md-primary-lighter: #e1f5fe;
    --md-primary-dark: #01579b;

    --md-secondary: #0097a7;
    --md-on-secondary: #ffffff;
    --md-secondary-container: #b2ebf2;
    --md-on-secondary-container: #006064;

    --md-tertiary: #5e35b1;
    --md-on-tertiary: #ffffff;
    --md-tertiary-container: #d1c4e9;
    --md-on-tertiary-container: #311b92;

    --primary-green: #0277bd;
    --primary-green-dark: #01579b;
    --primary-green-light: #4fc3f7;
    --primary-green-lighter: #e1f5fe;
    --primary-green-tonal: #81d4fa;
    --primary-green-bright: #29b6f6;
    --accent-green: #0288d1;
    --primary-green-rgb: 2, 119, 189;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);
    --sidebar-bg-start: #0277bd;
    --sidebar-bg-end: #01579b;
    --sidebar-border: #4fc3f7;
}

/* Ocean Dark Theme (Blue) - Dark */
:is(html, body)[data-theme="ocean-dark"] {
    --md-primary: #81d4fa;
    --md-primary-rgb: 129, 212, 250;
    --md-on-primary: #01579b;
    --md-primary-container: #0277bd;
    --md-on-primary-container: #e1f5fe;
    --md-primary-hover: #4fc3f7;
    --md-primary-active: #29b6f6;
    --md-primary-light: #b3e5fc;
    --md-primary-lighter: rgba(129, 212, 250, 0.12);
    --md-primary-dark: #4fc3f7;

    /* Surface Colors - Dark Mode */
    --md-surface: #121212;
    --md-surface-dim: #0a0a0a;
    --md-surface-bright: #2a2a2a;
    --md-surface-variant: #232323;
    --md-surface-container-lowest: #0d0d0d;
    --md-surface-container-low: #1a1a1a;
    --md-surface-container: #1e1e1e;
    --md-surface-container-high: #292929;
    --md-surface-container-highest: #333333;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #c7c7c7;
    --md-background: #121212;
    --md-on-background: #e3e3e3;
    --md-outline: #8e8e8e;
    --md-outline-variant: #444444;

    --md-secondary: #4dd0e1;
    --md-on-secondary: #006064;
    --md-tertiary: #b39ddb;
    --md-on-tertiary: #311b92;

    --primary-green: #81d4fa;
    --primary-green-dark: #4fc3f7;
    --primary-green-light: #b3e5fc;
    --primary-green-lighter: rgba(129, 212, 250, 0.15);
    --primary-green-tonal: #29b6f6;
    --primary-green-bright: #4fc3f7;
    --accent-green: #4dd0e1;
    --primary-green-rgb: 129, 212, 250;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);

    --sidebar-bg-start: #1e1e1e;
    --sidebar-bg-end: #121212;
    --sidebar-border: #333333;
    --sidebar-text: #e0e0e0;

    /* Legacy Compatibility */
    --surface: var(--md-surface);
    --surface-variant: var(--md-surface-container);
    --outline: var(--md-outline);
    --outline-dark: var(--md-outline-variant);
    --text-primary: var(--md-on-surface);
    --text-secondary: var(--md-on-surface-variant);

    /* Bootstrap Variable Overrides for Dark Theme */
    --bs-body-bg: #121212;
    --bs-body-color: #e3e3e3;
    --bs-body-color-rgb: 227, 227, 227;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-border-color: #444444;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-secondary-bg: #1e1e1e;
    --bs-tertiary-bg: #2a2a2a;
    --bs-secondary-color: rgba(227, 227, 227, 0.75);
    --bs-tertiary-color: rgba(227, 227, 227, 0.5);
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #ffffff;
    --bs-link-color: var(--md-primary);
    --bs-link-hover-color: var(--md-primary-hover);
    --bs-light: var(--md-surface-container);
    --bs-light-rgb: 30, 30, 30;
    --bs-dark: var(--md-on-surface);
    --bs-dark-rgb: 227, 227, 227;
    --bs-primary: var(--md-primary);
    --bs-primary-rgb: var(--md-primary-rgb);
    color-scheme: dark;
}

/* Sunset Theme (Orange) - Light */
:is(html, body)[data-theme="sunset"] {
    --md-primary: #e65100;
    --md-primary-rgb: 230, 81, 0;
    --md-on-primary: #ffffff;
    --md-primary-container: #ffccbc;
    --md-on-primary-container: #bf360c;
    --md-primary-hover: #f57c00;
    --md-primary-active: #ff6f00;
    --md-primary-light: #ff9800;
    --md-primary-lighter: #fff3e0;
    --md-primary-dark: #bf360c;

    --md-secondary: #d84315;
    --md-on-secondary: #ffffff;
    --md-secondary-container: #ffccbc;
    --md-on-secondary-container: #bf360c;

    --md-tertiary: #f57f17;
    --md-on-tertiary: #ffffff;
    --md-tertiary-container: #fff9c4;
    --md-on-tertiary-container: #f57f17;

    --primary-green: #e65100;
    --primary-green-dark: #bf360c;
    --primary-green-light: #ff9800;
    --primary-green-lighter: #fff3e0;
    --primary-green-tonal: #ffb74d;
    --primary-green-bright: #ff8a65;
    --accent-green: #ff6f00;
    --primary-green-rgb: 230, 81, 0;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);
    --sidebar-bg-start: #e65100;
    --sidebar-bg-end: #bf360c;
    --sidebar-border: #ff9800;
}

/* Sunset Dark Theme (Orange) - Dark */
:is(html, body)[data-theme="sunset-dark"] {
    --md-primary: #ffb74d;
    --md-primary-rgb: 255, 183, 77;
    --md-on-primary: #bf360c;
    --md-primary-container: #e65100;
    --md-on-primary-container: #fff3e0;
    --md-primary-hover: #ffa726;
    --md-primary-active: #ff9800;
    --md-primary-light: #ffcc80;
    --md-primary-lighter: rgba(255, 183, 77, 0.12);
    --md-primary-dark: #ffa726;

    /* Surface Colors - Dark Mode */
    --md-surface: #121212;
    --md-surface-dim: #0a0a0a;
    --md-surface-bright: #2a2a2a;
    --md-surface-variant: #232323;
    --md-surface-container-lowest: #0d0d0d;
    --md-surface-container-low: #1a1a1a;
    --md-surface-container: #1e1e1e;
    --md-surface-container-high: #292929;
    --md-surface-container-highest: #333333;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #c7c7c7;
    --md-background: #121212;
    --md-on-background: #e3e3e3;
    --md-outline: #8e8e8e;
    --md-outline-variant: #444444;

    /* Semantic Colors (Dark Mode) */
    --md-error: #ffb4ab;
    --md-error-rgb: 255, 180, 171;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
    --md-success: #81c784;
    --md-success-rgb: 129, 199, 132;
    --md-on-success: #1b5e20;
    --md-success-container: #2e7d32;
    --md-on-success-container: #c8e6c9;
    --md-warning: #ffb951;
    --md-warning-rgb: 255, 185, 81;
    --md-on-warning: #452b00;
    --md-warning-container: #633f00;
    --md-on-warning-container: #ffddb3;
    --md-info: #90caf9;
    --md-info-rgb: 144, 202, 249;
    --md-on-info: #003258;
    --md-info-container: #00497b;
    --md-on-info-container: #d1e4ff;

    --md-secondary: #ff8a65;
    --md-on-secondary: #bf360c;
    --md-tertiary: #ffd54f;
    --md-on-tertiary: #f57f17;

    --primary-green: #ffb74d;
    --primary-green-dark: #ffa726;
    --primary-green-light: #ffcc80;
    --primary-green-lighter: rgba(255, 183, 77, 0.15);
    --primary-green-tonal: #ff9800;
    --primary-green-bright: #ffa726;
    --accent-green: #ff8a65;
    --primary-green-rgb: 255, 183, 77;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);

    --sidebar-bg-start: #1e1e1e;
    --sidebar-bg-end: #121212;
    --sidebar-border: #333333;
    --sidebar-text: #e0e0e0;

    /* Legacy Compatibility */
    --surface: var(--md-surface);
    --surface-variant: var(--md-surface-container);
    --outline: var(--md-outline);
    --outline-dark: var(--md-outline-variant);
    --text-primary: var(--md-on-surface);
    --text-secondary: var(--md-on-surface-variant);

    /* Bootstrap Variable Overrides for Dark Theme */
    --bs-body-bg: #121212;
    --bs-body-color: #e3e3e3;
    --bs-body-color-rgb: 227, 227, 227;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-border-color: #444444;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-secondary-bg: #1e1e1e;
    --bs-tertiary-bg: #2a2a2a;
    --bs-secondary-color: rgba(227, 227, 227, 0.75);
    --bs-tertiary-color: rgba(227, 227, 227, 0.5);
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #ffffff;
    --bs-link-color: var(--md-primary);
    --bs-link-hover-color: var(--md-primary-hover);
    --bs-light: var(--md-surface-container);
    --bs-light-rgb: 30, 30, 30;
    --bs-dark: var(--md-on-surface);
    --bs-dark-rgb: 227, 227, 227;
    --bs-primary: var(--md-primary);
    --bs-primary-rgb: var(--md-primary-rgb);
    color-scheme: dark;
}

/* Lavender Theme (Purple) - Light */
:is(html, body)[data-theme="lavender"] {
    --md-primary: #6a1b9a;
    --md-primary-rgb: 106, 27, 154;
    --md-on-primary: #ffffff;
    --md-primary-container: #e1bee7;
    --md-on-primary-container: #4a148c;
    --md-primary-hover: #7b1fa2;
    --md-primary-active: #8e24aa;
    --md-primary-light: #ab47bc;
    --md-primary-lighter: #f3e5f5;
    --md-primary-dark: #4a148c;

    --md-secondary: #8e24aa;
    --md-on-secondary: #ffffff;
    --md-secondary-container: #e1bee7;
    --md-on-secondary-container: #4a148c;

    --md-tertiary: #5e35b1;
    --md-on-tertiary: #ffffff;
    --md-tertiary-container: #d1c4e9;
    --md-on-tertiary-container: #311b92;

    --primary-green: #6a1b9a;
    --primary-green-dark: #4a148c;
    --primary-green-light: #ab47bc;
    --primary-green-lighter: #f3e5f5;
    --primary-green-tonal: #ce93d8;
    --primary-green-bright: #ba68c8;
    --accent-green: #8e24aa;
    --primary-green-rgb: 106, 27, 154;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);
    --sidebar-bg-start: #6a1b9a;
    --sidebar-bg-end: #4a148c;
    --sidebar-border: #ab47bc;
}

/* Lavender Dark Theme (Purple) - Dark */
:is(html, body)[data-theme="lavender-dark"] {
    --md-primary: #ce93d8;
    --md-primary-rgb: 206, 147, 216;
    --md-on-primary: #4a148c;
    --md-primary-container: #6a1b9a;
    --md-on-primary-container: #f3e5f5;
    --md-primary-hover: #ba68c8;
    --md-primary-active: #ab47bc;
    --md-primary-light: #e1bee7;
    --md-primary-lighter: rgba(206, 147, 216, 0.12);
    --md-primary-dark: #ba68c8;

    /* Surface Colors - Dark Mode */
    --md-surface: #121212;
    --md-surface-dim: #0a0a0a;
    --md-surface-bright: #2a2a2a;
    --md-surface-variant: #232323;
    --md-surface-container-lowest: #0d0d0d;
    --md-surface-container-low: #1a1a1a;
    --md-surface-container: #1e1e1e;
    --md-surface-container-high: #292929;
    --md-surface-container-highest: #333333;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #c7c7c7;
    --md-background: #121212;
    --md-on-background: #e3e3e3;
    --md-outline: #8e8e8e;
    --md-outline-variant: #444444;

    /* Semantic Colors (Dark Mode) */
    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
    --md-success: #81c784;
    --md-on-success: #1b5e20;
    --md-success-container: #2e7d32;
    --md-on-success-container: #c8e6c9;
    --md-warning: #ffb951;
    --md-on-warning: #452b00;
    --md-warning-container: #633f00;
    --md-on-warning-container: #ffddb3;
    --md-info: #90caf9;
    --md-on-info: #003258;
    --md-info-container: #00497b;
    --md-on-info-container: #d1e4ff;

    --md-secondary: #ba68c8;
    --md-on-secondary: #4a148c;
    --md-tertiary: #9575cd;
    --md-on-tertiary: #311b92;

    --primary-green: #ce93d8;
    --primary-green-dark: #ba68c8;
    --primary-green-light: #e1bee7;
    --primary-green-lighter: rgba(206, 147, 216, 0.15);
    --primary-green-tonal: #ab47bc;
    --primary-green-bright: #ba68c8;
    --accent-green: #ba68c8;
    --primary-green-rgb: 206, 147, 216;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);

    --sidebar-bg-start: #1e1e1e;
    --sidebar-bg-end: #121212;
    --sidebar-border: #333333;
    --sidebar-text: #e0e0e0;

    /* Legacy Compatibility */
    --surface: var(--md-surface);
    --surface-variant: var(--md-surface-container);
    --outline: var(--md-outline);
    --outline-dark: var(--md-outline-variant);
    --text-primary: var(--md-on-surface);
    --text-secondary: var(--md-on-surface-variant);

    /* Bootstrap Variable Overrides for Dark Theme */
    --bs-body-bg: #121212;
    --bs-body-color: #e3e3e3;
    --bs-body-color-rgb: 227, 227, 227;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-border-color: #444444;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-secondary-bg: #1e1e1e;
    --bs-tertiary-bg: #2a2a2a;
    --bs-secondary-color: rgba(227, 227, 227, 0.75);
    --bs-tertiary-color: rgba(227, 227, 227, 0.5);
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #ffffff;
    --bs-link-color: var(--md-primary);
    --bs-link-hover-color: var(--md-primary-hover);
    --bs-light: var(--md-surface-container);
    --bs-light-rgb: 30, 30, 30;
    --bs-dark: var(--md-on-surface);
    --bs-dark-rgb: 227, 227, 227;
    --bs-primary: var(--md-primary);
    --bs-primary-rgb: var(--md-primary-rgb);
    color-scheme: dark;
}

/* Rose Theme (Pink/Red) - Light */
:is(html, body)[data-theme="rose"] {
    --md-primary: #c2185b;
    --md-primary-rgb: 194, 24, 91;
    --md-on-primary: #ffffff;
    --md-primary-container: #f8bbd0;
    --md-on-primary-container: #880e4f;
    --md-primary-hover: #d81b60;
    --md-primary-active: #e91e63;
    --md-primary-light: #f06292;
    --md-primary-lighter: #fce4ec;
    --md-primary-dark: #880e4f;

    --md-secondary: #d32f2f;
    --md-on-secondary: #ffffff;
    --md-secondary-container: #ffcdd2;
    --md-on-secondary-container: #b71c1c;

    --md-tertiary: #7b1fa2;
    --md-on-tertiary: #ffffff;
    --md-tertiary-container: #e1bee7;
    --md-on-tertiary-container: #4a148c;

    --primary-green: #c2185b;
    --primary-green-dark: #880e4f;
    --primary-green-light: #f06292;
    --primary-green-lighter: #fce4ec;
    --primary-green-tonal: #f48fb1;
    --primary-green-bright: #ec407a;
    --accent-green: #e91e63;
    --primary-green-rgb: 194, 24, 91;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);
    --sidebar-bg-start: #c2185b;
    --sidebar-bg-end: #880e4f;
    --sidebar-border: #f06292;
}

/* Rose Dark Theme (Pink/Red) - Dark */
:is(html, body)[data-theme="rose-dark"] {
    --md-primary: #f48fb1;
    --md-primary-rgb: 244, 143, 177;
    --md-on-primary: #880e4f;
    --md-primary-container: #c2185b;
    --md-on-primary-container: #fce4ec;
    --md-primary-hover: #f06292;
    --md-primary-active: #ec407a;
    --md-primary-light: #f8bbd0;
    --md-primary-lighter: rgba(244, 143, 177, 0.12);
    --md-primary-dark: #f06292;

    /* Surface Colors - Dark Mode */
    --md-surface: #121212;
    --md-surface-dim: #0a0a0a;
    --md-surface-bright: #2a2a2a;
    --md-surface-variant: #232323;
    --md-surface-container-lowest: #0d0d0d;
    --md-surface-container-low: #1a1a1a;
    --md-surface-container: #1e1e1e;
    --md-surface-container-high: #292929;
    --md-surface-container-highest: #333333;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #c7c7c7;
    --md-background: #121212;
    --md-on-background: #e3e3e3;
    --md-outline: #8e8e8e;
    --md-outline-variant: #444444;

    /* Semantic Colors (Dark Mode) */
    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
    --md-success: #81c784;
    --md-on-success: #1b5e20;
    --md-success-container: #2e7d32;
    --md-on-success-container: #c8e6c9;
    --md-warning: #ffb951;
    --md-on-warning: #452b00;
    --md-warning-container: #633f00;
    --md-on-warning-container: #ffddb3;
    --md-info: #90caf9;
    --md-on-info: #003258;
    --md-info-container: #00497b;
    --md-on-info-container: #d1e4ff;

    --md-secondary: #ef5350;
    --md-on-secondary: #b71c1c;
    --md-tertiary: #ba68c8;
    --md-on-tertiary: #4a148c;

    --primary-green: #f48fb1;
    --primary-green-dark: #f06292;
    --primary-green-light: #f8bbd0;
    --primary-green-lighter: rgba(244, 143, 177, 0.15);
    --primary-green-tonal: #ec407a;
    --primary-green-bright: #f06292;
    --accent-green: #ef5350;
    --primary-green-rgb: 244, 143, 177;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);

    --sidebar-bg-start: #1e1e1e;
    --sidebar-bg-end: #121212;
    --sidebar-border: #333333;
    --sidebar-text: #e0e0e0;

    /* Legacy Compatibility */
    --surface: var(--md-surface);
    --surface-variant: var(--md-surface-container);
    --outline: var(--md-outline);
    --outline-dark: var(--md-outline-variant);
    --text-primary: var(--md-on-surface);
    --text-secondary: var(--md-on-surface-variant);

    /* Bootstrap Variable Overrides for Dark Theme */
    --bs-body-bg: #121212;
    --bs-body-color: #e3e3e3;
    --bs-body-color-rgb: 227, 227, 227;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-border-color: #444444;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-secondary-bg: #1e1e1e;
    --bs-tertiary-bg: #2a2a2a;
    --bs-secondary-color: rgba(227, 227, 227, 0.75);
    --bs-tertiary-color: rgba(227, 227, 227, 0.5);
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #ffffff;
    --bs-link-color: var(--md-primary);
    --bs-link-hover-color: var(--md-primary-hover);
    --bs-light: var(--md-surface-container);
    --bs-light-rgb: 30, 30, 30;
    --bs-dark: var(--md-on-surface);
    --bs-dark-rgb: 227, 227, 227;
    --bs-primary: var(--md-primary);
    --bs-primary-rgb: var(--md-primary-rgb);
    color-scheme: dark;
}

/* Teal Theme (Cyan/Teal) - Light */
:is(html, body)[data-theme="teal"] {
    --md-primary: #00796b;
    --md-primary-rgb: 0, 121, 107;
    --md-on-primary: #ffffff;
    --md-primary-container: #b2dfdb;
    --md-on-primary-container: #004d40;
    --md-primary-hover: #00897b;
    --md-primary-active: #009688;
    --md-primary-light: #4db6ac;
    --md-primary-lighter: #e0f2f1;
    --md-primary-dark: #004d40;

    --md-secondary: #0097a7;
    --md-on-secondary: #ffffff;
    --md-secondary-container: #b2ebf2;
    --md-on-secondary-container: #006064;

    --md-tertiary: #00695c;
    --md-on-tertiary: #ffffff;
    --md-tertiary-container: #a7ffeb;
    --md-on-tertiary-container: #00251a;

    --primary-green: #00796b;
    --primary-green-dark: #004d40;
    --primary-green-light: #4db6ac;
    --primary-green-lighter: #e0f2f1;
    --primary-green-tonal: #80cbc4;
    --primary-green-bright: #26a69a;
    --accent-green: #009688;
    --primary-green-rgb: 0, 121, 107;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);
    --sidebar-bg-start: #00796b;
    --sidebar-bg-end: #004d40;
    --sidebar-border: #4db6ac;
}

/* Teal Dark Theme (Cyan/Teal) - Dark */
:is(html, body)[data-theme="teal-dark"] {
    --md-primary: #80cbc4;
    --md-primary-rgb: 128, 203, 196;
    --md-on-primary: #004d40;
    --md-primary-container: #00796b;
    --md-on-primary-container: #e0f2f1;
    --md-primary-hover: #4db6ac;
    --md-primary-active: #26a69a;
    --md-primary-light: #b2dfdb;
    --md-primary-lighter: rgba(128, 203, 196, 0.12);
    --md-primary-dark: #4db6ac;

    /* Surface Colors - Dark Mode */
    --md-surface: #121212;
    --md-surface-dim: #0a0a0a;
    --md-surface-bright: #2a2a2a;
    --md-surface-variant: #232323;
    --md-surface-container-lowest: #0d0d0d;
    --md-surface-container-low: #1a1a1a;
    --md-surface-container: #1e1e1e;
    --md-surface-container-high: #292929;
    --md-surface-container-highest: #333333;
    --md-on-surface: #e3e3e3;
    --md-on-surface-variant: #c7c7c7;
    --md-background: #121212;
    --md-on-background: #e3e3e3;
    --md-outline: #8e8e8e;
    --md-outline-variant: #444444;

    /* Semantic Colors (Dark Mode) */
    --md-error: #ffb4ab;
    --md-on-error: #690005;
    --md-error-container: #93000a;
    --md-on-error-container: #ffdad6;
    --md-success: #81c784;
    --md-on-success: #1b5e20;
    --md-success-container: #2e7d32;
    --md-on-success-container: #c8e6c9;
    --md-warning: #ffb951;
    --md-on-warning: #452b00;
    --md-warning-container: #633f00;
    --md-on-warning-container: #ffddb3;
    --md-info: #90caf9;
    --md-on-info: #003258;
    --md-info-container: #00497b;
    --md-on-info-container: #d1e4ff;

    --md-secondary: #4dd0e1;
    --md-on-secondary: #006064;
    --md-tertiary: #64ffda;
    --md-on-tertiary: #00251a;

    --primary-green: #80cbc4;
    --primary-green-dark: #4db6ac;
    --primary-green-light: #b2dfdb;
    --primary-green-lighter: rgba(128, 203, 196, 0.15);
    --primary-green-tonal: #26a69a;
    --primary-green-bright: #4db6ac;
    --accent-green: #4dd0e1;
    --primary-green-rgb: 128, 203, 196;
    --brand-primary: var(--primary-green);
    --brand-primary-dark: var(--primary-green-dark);
    --brand-primary-light: var(--primary-green-light);
    --brand-primary-lighter: var(--primary-green-lighter);
    --brand-primary-tonal: var(--primary-green-tonal);
    --brand-primary-bright: var(--primary-green-bright);
    --brand-accent: var(--accent-green);
    --brand-primary-rgb: var(--primary-green-rgb);

    --sidebar-bg-start: #1e1e1e;
    --sidebar-bg-end: #121212;
    --sidebar-border: #333333;
    --sidebar-text: #e0e0e0;

    /* Legacy Compatibility */
    --surface: var(--md-surface);
    --surface-variant: var(--md-surface-container);
    --outline: var(--md-outline);
    --outline-dark: var(--md-outline-variant);
    --text-primary: var(--md-on-surface);
    --text-secondary: var(--md-on-surface-variant);

    /* Bootstrap Variable Overrides for Dark Theme */
    --bs-body-bg: #121212;
    --bs-body-color: #e3e3e3;
    --bs-body-color-rgb: 227, 227, 227;
    --bs-body-bg-rgb: 18, 18, 18;
    --bs-border-color: #444444;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-secondary-bg: #1e1e1e;
    --bs-tertiary-bg: #2a2a2a;
    --bs-secondary-color: rgba(227, 227, 227, 0.75);
    --bs-tertiary-color: rgba(227, 227, 227, 0.5);
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #ffffff;
    --bs-link-color: var(--md-primary);
    --bs-link-hover-color: var(--md-primary-hover);
    --bs-light: var(--md-surface-container);
    --bs-light-rgb: 30, 30, 30;
    --bs-dark: var(--md-on-surface);
    --bs-dark-rgb: 227, 227, 227;
    --bs-primary: var(--md-primary);
    --bs-primary-rgb: var(--md-primary-rgb);
    color-scheme: dark;
}

/* Global Styles */
body {
    margin: 0;
    padding: 0;
    background-color: var(--surface-variant);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-wrapper {
    display: flex;
    min-height: 100vh;
}

.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 2rem;
    width: calc(100% - var(--sidebar-width));
    transition: margin-left 0.3s ease, width 0.3s ease;
}

/* Sidebar Styles */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--sidebar-bg-start) 0%, var(--sidebar-bg-end) 100%);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: width 0.3s ease;
}

.sidebar-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.brand-icon {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
}

.sidebar-brand {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.user-email {
    margin: 0.5rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    word-break: break-word;
    font-weight: 400;
}

.user-role {
    margin: 0.25rem 0 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sidebar-section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--outline);
}

.sidebar-section-title {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.sidebar-section-title i {
    width: 20px;
    margin-right: 0.625rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.15s ease;
    border-radius: 0.625rem;
    font-weight: 500;
    font-size: 0.9375rem;
    border: none;
    background: transparent;
}

.sidebar-sublink {
    padding-left: 2.75rem;
    font-size: 0.875rem;
    font-weight: 400;
}

.btn-logout {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--outline);
    border-radius: 0.625rem;
    cursor: pointer;
    font-size: 0.9375rem;
    transition: all 0.15s ease;
    font-weight: 500;
}

.btn-logout:hover {
    background-color: var(--surface-variant);
    border-color: var(--outline-dark);
}

.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-weight: 600;
}

.sidebar-link i {
    width: 22px;
    margin-right: 0.75rem;
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.sidebar-link:hover i,
.sidebar-link.active i {
    color: #ffffff;
}

.sidebar-footer {
    padding: 0;
    margin-top: auto;
    background: none;
}

/* User Identity Section */
.user-identity-slim {
    display: flex;
    align-items: center;
    padding: 0 15px;
    opacity: 0;
    max-height: 0;
    margin: 0 10px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.625rem;
}

.sidebar:hover .user-identity-slim {
    opacity: 1;
    max-height: 60px;
    margin: 10px;
    padding: 10px 15px;
}

.user-avatar-small {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #ffffff;
    font-size: 0.875rem;
    margin-right: 10px;
    flex-shrink: 0;
}

.user-info-slim {
    overflow: hidden;
    white-space: nowrap;
}

.user-name-slim {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.user-role-slim {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Tenant Switcher Styles */
.tenant-switcher-header {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--outline);
}

.tenant-label-header {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

.tenant-label-header i {
    margin-right: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tenant-selector-container {
    position: relative;
}

.tenant-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: var(--surface-variant);
    border: 1px solid var(--outline);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    transition: all 0.15s ease;
}

.tenant-search-input:focus {
    background-color: var(--surface);
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.125rem var(--primary-green-alpha-25);
    outline: none;
}

.tenant-search-input::placeholder {
    color: var(--text-secondary);
}

.tenant-select {
    background-color: var(--surface-variant);
    border: 1px solid var(--outline);
    color: var(--text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

.tenant-select:hover {
    background-color: var(--surface);
    border-color: var(--outline-dark);
}

.tenant-select:focus {
    background-color: var(--surface);
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.125rem var(--primary-green-alpha-25);
    outline: none;
}

.tenant-select option {
    background-color: var(--surface);
    color: var(--text-primary);
}

.tenant-loading {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.tenant-message {
    font-size: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}

.tenant-message.success {
    background-color: var(--primary-green-alpha-30);
    border: 1px solid var(--primary-green-alpha-50);
    color: white;
}

.tenant-message.error {
    background-color: rgba(244, 67, 54, 0.3);
    border: 1px solid rgba(244, 67, 54, 0.5);
    color: white;
}

/* Language Selector Styles */
.lang-selector-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lang-label {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.lang-label i {
    margin-right: 0.5rem;
}

.lang-form {
    margin: 0;
}

.lang-select {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lang-select:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.lang-select:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: var(--sidebar-border);
    box-shadow: 0 0 0 0.2rem var(--primary-green-alpha-25);
    color: white;
}

.lang-select option {
    background-color: var(--sidebar-bg-start);
    color: white;
}

/* Common UI Components */
.btn-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-green-dark);
    border-color: var(--primary-green-dark);
}

.action-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    padding: 0;
    font-size: 1rem;
}

.action-icon i {
    pointer-events: none;
}

.action-icon:hover {
    color: var(--primary-green-dark);
    background: var(--primary-green-alpha-10);
    transform: translateY(-1px);
}

.action-icon:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

.action-icon--view {
    color: var(--primary-green-dark);
}

.action-icon--edit {
    color: var(--primary-green);
}

.action-icon--delete {
    color: var(--error-text);
}

.action-icon--delete:hover {
    background: rgba(178, 38, 25, 0.1);
    color: #b32619;
}

/* Alert Styles */
.alert {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    border-left: 4px solid;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.alert-error,
.alert-danger {
    background-color: var(--alert-error-bg);
    color: var(--alert-error-text);
    border-left-color: var(--alert-error-border);
}

.alert-success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-left-color: var(--alert-success-border);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-left-color: var(--alert-warning-border);
}

.alert-info {
    background-color: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-left-color: var(--alert-info-border);
}

/* Auth & Form Styles */
.auth-language-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.language-form {
    margin: 0;
}

.language-select {
    padding: 8px 12px;
    border: 1px solid var(--outline);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.language-select:hover {
    border-color: var(--primary-green);
}

.language-select:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px var(--primary-green-alpha-20);
}

.auth-container {
    max-width: 400px;
    margin: 40px auto;
    padding: 24px 30px;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.auth-brand {
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--outline);
}

.brand-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-green);
    letter-spacing: 1px;
}

.brand-tagline {
    margin: 6px 0 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.auth-container h1 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--text-primary);
    font-size: 1.5rem;
}

.form-group {
    margin-bottom: 14px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--outline);
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: var(--surface);
    color: var(--text-primary);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-green);
}

.form-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
    display: block;
}

.auth-link {
    text-align: center;
    margin-top: 16px;
}

.auth-link a {
    color: var(--primary-green);
    text-decoration: none;
}

.auth-link a:hover {
    text-decoration: underline;
    color: var(--primary-green-dark);
}

.alert {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Button Styles */
.btn-primary {
    width: 100%;
    padding: 12px;
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--md-primary-alpha-30);
}

.btn-primary:active {
    background-color: var(--btn-primary-active);
    transform: translateY(0);
}

.error {
    color: var(--error-text);
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Content Card */
.content-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--md-primary-alpha-8);
    background: var(--surface);
    padding: 2rem;
}

/* Headings */
h1 {
    color: var(--primary-green-dark);
}

/* Table Styles */
.table {
    background-color: var(--surface);
    border: 1px solid var(--outline);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--outline);
}

.table-responsive {
    border-radius: 16px;
    border: 1px solid var(--outline);
    background-color: var(--surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.table-responsive>.table {
    margin-bottom: 0;
    background: transparent;
    border: none;
}

.table-responsive>.table tbody tr:last-child td {
    border-bottom: none;
}

.table thead {
    background-color: var(--primary-green-lighter);
    color: var(--primary-green-dark);
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--surface-variant);
}

.table-striped>tbody>tr:nth-of-type(even) {
    background-color: var(--surface);
}

th {
    color: var(--primary-green-dark);
    font-weight: 600;
    padding: 0.75rem;
    vertical-align: bottom;
    border-bottom: 2px solid var(--outline);
}

td {
    color: var(--text-primary);
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid var(--outline);
}

/* Search Styles */
.search-wrapper {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.search-input {
    flex: 1;
    max-width: 500px;
    padding: 0.5rem 1rem;
    border: 2px solid var(--primary-green);
    border-radius: 8px;
    font-size: 1rem;
    background-color: var(--surface);
    color: var(--text-primary);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-green-dark);
    box-shadow: 0 0 0 3px var(--primary-green-alpha-10);
}

.search-results-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.no-results-message {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Badge Styles */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.badge-primary {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
}

.badge-success {
    background-color: var(--md-success);
    color: var(--md-on-success);
}

.badge-secondary {
    background-color: var(--md-secondary);
    color: var(--md-on-secondary);
}

.badge-warning {
    background-color: var(--md-warning);
    color: var(--md-on-warning);
}

.badge-danger {
    background-color: var(--md-error);
    color: var(--md-on-error);
}

.badge-info {
    background-color: var(--md-info);
    color: var(--md-on-info);
}

/* Status Badges */
.badge-status,
.status-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 16px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
    min-width: 90px;
    text-align: center;
    line-height: 1.2;
}

/* Appointment/Shift Status */
.status-SCHEDULED,
.status-badge.scheduled {
    background-color: var(--status-scheduled-bg);
    color: var(--status-scheduled-text);
}

.status-CONFIRMED,
.status-badge.confirmed {
    background-color: var(--status-confirmed-bg);
    color: var(--status-confirmed-text);
}

.status-IN_PROGRESS,
.status-badge.in-progress {
    background-color: var(--status-in-progress-bg);
    color: var(--status-in-progress-text);
}

.status-COMPLETED,
.status-badge.completed {
    background-color: var(--status-completed-bg);
    color: var(--status-completed-text);
}

.status-NO_SHOW,
.status-CANCELLED_BY_CLIENT,
.status-CANCELLED_BY_STAFF,
.status-badge.cancelled,
.status-badge.no-show {
    background-color: var(--status-cancelled-bg);
    color: var(--status-cancelled-text);
}

.status-RESCHEDULED,
.status-badge.rescheduled {
    background-color: var(--status-rescheduled-bg);
    color: var(--status-rescheduled-text);
}

/* Filter Buttons */
.filter-buttons {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    border: 2px solid var(--primary-green);
    background: var(--surface);
    color: var(--primary-green);
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
}

.filter-btn:hover {
    background-color: var(--primary-green-lighter);
}

.filter-btn.active {
    background: var(--primary-green);
    color: white;
}

/* Action Buttons Container */
.action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

/* Form Styles */
.form-check-input:checked {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.form-control:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 0.2rem var(--primary-green-alpha-25);
}

.section-title {
    color: var(--primary-green-dark);
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary-green);
    padding-bottom: 0.5rem;
}

.location-checkbox-group {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--outline);
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--surface);
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--outline);
}

.form-section:last-child {
    border-bottom: none;
}

.help-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.form-section-title {
    color: var(--primary-green-dark);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Client History & Statistics */
.statistics-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--surface);
    border-radius: 8px;
    padding: 1.25rem;
    border-left: 4px solid var(--primary-green);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.stat-card.warning {
    border-left-color: #f44336;
}

.stat-card.info {
    border-left-color: #2196f3;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-green-dark);
    margin-bottom: 0.5rem;
}

.stat-card.warning .stat-value {
    color: #f44336;
}

.stat-card.info .stat-value {
    color: #2196f3;
}

.stat-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.client-info {
    background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--sidebar-bg-start) 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.client-info h1 {
    color: white;
    margin-bottom: 0.5rem;
}

.client-info .detail {
    margin: 0.25rem 0;
    opacity: 0.95;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 3rem;
    color: var(--outline-dark);
    margin-bottom: 1rem;
}

.notes-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Form Specific Styles */
.form-card {
    background: var(--surface);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--md-primary-alpha-8);
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--primary-green-light);
}

.page-title {
    color: var(--primary-green);
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
}

.form-label {
    font-weight: 600;
    color: var(--primary-green);
    margin-bottom: 0.5rem;
}

.form-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--outline);
}

.btn-save {
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-light));
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--md-primary-alpha-30);
}

.btn-cancel {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

.btn-cancel:hover {
    background-color: #5a6268;
    color: white;
}

.input-group-text {
    background-color: #f1f8f4;
    border: 1px solid var(--primary-green-light);
    color: var(--primary-green);
    font-weight: 500;
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Error Pages */
.error-page-body {
    background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--sidebar-bg-start) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.error-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.error-icon {
    font-size: 5rem;
    margin-bottom: 20px;
}

.error-message {
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.error-help-text {
    margin-top: 30px;
    padding: 20px;
    background: var(--surface-variant);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.btn-error-action {
    background: var(--primary-green);
    color: white;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.btn-error-action:hover {
    background: var(--primary-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--primary-green-alpha-40);
    color: white;
}

/* Admin Styles */
.admin-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.status-active {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.status-trial {
    background-color: #fff3cd;
    color: #856404;
}

.status-suspended {
    background-color: var(--error-bg);
    color: var(--error-text);
}

.status-cancelled {
    background-color: var(--surface-variant);
    color: var(--text-secondary);
}

/* Subscription Plan Badges */
.plan-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85rem;
}

.plan-basic {
    background: #e3f2fd;
    color: #1565c0;
}

.plan-pro {
    background: #fff3e0;
    color: #ef6c00;
}

.plan-premium {
    background: #f3e5f5;
    color: #7b1fa2;
}

.plan-ultimate {
    background: #fff8e1;
    color: #ff6f00;
    font-weight: 600;
}

.action-links a {
    margin-right: 10px;
    color: var(--primary-green);
    text-decoration: none;
}

.action-links a:hover {
    text-decoration: underline;
    color: var(--primary-green-dark);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

/* Admin Details Styles */
.details-card {
    background: var(--surface);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.details-card h1 {
    margin-top: 0;
    color: var(--primary-green-dark);
    margin-bottom: 10px;
}

.details-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 15px;
    margin-top: 30px;
}

.detail-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.detail-value {
    color: var(--text-primary);
}

.detail-value code {
    background: var(--surface-variant);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    color: var(--primary-green-dark);
}

.actions-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--outline);
}

.actions-section h3 {
    margin-top: 0;
    color: var(--text-primary);
}

/* Button Variants */
.btn-primary,
.btn-success {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-success:hover {
    background-color: var(--btn-primary-hover);
    color: var(--btn-primary-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--md-primary-alpha-30);
}

.btn-primary:active,
.btn-success:active {
    background-color: var(--btn-primary-active);
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    color: var(--btn-secondary-text);
}

.btn-warning {
    background-color: var(--btn-warning-bg);
    color: var(--btn-warning-text);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-warning:hover {
    background-color: var(--btn-warning-hover);
    color: var(--btn-warning-text);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-danger:hover {
    background-color: var(--btn-danger-hover);
    color: var(--btn-danger-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--md-error-alpha-30);
}

.btn-info {
    background-color: var(--btn-info-bg);
    color: var(--btn-info-text);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-info:hover {
    background-color: var(--btn-info-hover);
    color: var(--btn-info-text);
}

/* Outlined Button Variants */
.btn-outline-primary {
    background-color: transparent;
    color: var(--md-primary);
    border: 2px solid var(--md-primary);
    padding: 0.625rem 1.375rem;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover {
    background-color: var(--md-primary-alpha-10);
    color: var(--md-primary);
}

/* Info Box */
.info-box {
    background-color: var(--primary-green-lighter);
    border-left: 4px solid var(--primary-green);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.info-box h4 {
    margin-top: 0;
    color: var(--primary-green-dark);
}

.info-box ul {
    margin: 10px 0 0 20px;
    color: var(--primary-green-dark);
}

.info-box.warning {
    background-color: #fff3cd;
    border-left-color: #ffc107;
}

.info-box.warning h4,
.info-box.warning ul {
    color: #856404;
}

.readonly-field {
    background-color: var(--surface-variant);
    padding: 10px 12px;
    border: 1px solid var(--outline);
    border-radius: 4px;
    color: var(--text-secondary);
}

.readonly-field code {
    background-color: var(--outline);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
}


/* ===================================================================
   SIDEBAR STYLES - Slim Icon-Only Sidebar
   =================================================================== */

/* Sidebar Width Variables */
:root {
    --sidebar-width-collapsed: 70px;
    --sidebar-width-expanded: 280px;
}

/* Main Sidebar Container */
.sidebar {
    width: var(--sidebar-width-collapsed);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 1000;
    will-change: width;
}

.sidebar:hover {
    width: var(--sidebar-width-expanded);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
}

/* Sidebar Nav - scrollbar only visible when expanded */
.sidebar .sidebar-nav {
    overflow-y: hidden;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar:hover .sidebar-nav {
    overflow-y: auto;
}

/* Sidebar Header */
.sidebar .sidebar-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.sidebar .brand-icon {
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
}

.sidebar .brand-icon .brand-full {
    display: none;
}

.sidebar .brand-icon .brand-short {
    display: inline;
}

.sidebar:hover .brand-icon .brand-full {
    display: inline;
}

.sidebar:hover .brand-icon .brand-short {
    display: none;
}

/* Sidebar Links */
.sidebar .sidebar-link {
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 0.625rem;
    margin: 0.125rem 0.5rem;
    flex-shrink: 0;
}

.sidebar .sidebar-link i {
    width: calc(var(--sidebar-width-collapsed) - 1rem);
    min-width: calc(var(--sidebar-width-collapsed) - 1rem);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.sidebar .sidebar-link:hover i,
.sidebar .sidebar-link.active i {
    color: #ffffff;
}

.sidebar .link-text {
    opacity: 0;
    transition: opacity 0.2s ease;
    font-weight: 500;
    font-size: 0.9375rem;
    padding-right: 1rem;
}

.sidebar:hover .link-text {
    opacity: 1;
    transition-delay: 0.1s;
}

/* Sidebar Dividers and Spacers */
.sidebar .sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.5rem;
}

.sidebar .sidebar-spacer {
    flex: 1;
    min-height: 0;
}

/* Sidebar Footer */
.sidebar .sidebar-footer {
    padding: 0.5rem;
    background: none;
}

/* User Identity Section */
.sidebar .user-identity-slim {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.9375rem;
    margin: 0.625rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.625rem;
}

.sidebar:hover .user-identity-slim {
    opacity: 1;
    max-height: 60px;
    margin: 0.625rem;
    padding: 0.625rem 0.9375rem;
}

.sidebar .user-avatar-small {
    width: 32px;
    height: 32px;
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    font-size: 0.8125rem;
    margin-right: 0.625rem;
    flex-shrink: 0;
}

.sidebar .user-info-slim {
    overflow: hidden;
    white-space: nowrap;
}

.sidebar .user-name-slim {
    font-size: 0.875rem;
    font-weight: 600;
    color: #ffffff;
}

.sidebar .user-role-slim {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Logout Button */
.sidebar .btn-logout-icon {
    width: 100%;
    height: 44px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 0.625rem;
    transition: all 0.15s ease;
    margin: 0.125rem 0;
}

.sidebar .btn-logout-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar .btn-logout-icon i {
    width: calc(var(--sidebar-width-collapsed) - 1rem);
    min-width: calc(var(--sidebar-width-collapsed) - 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin: 0;
}

.sidebar .btn-logout-icon .link-text {
    opacity: 0;
    font-weight: 500;
    transition: opacity 0.2s ease;
    padding-right: 1rem;
}

.sidebar:hover .btn-logout-icon .link-text {
    opacity: 1;
    transition-delay: 0.1s;
}

.sidebar .btn-logout-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ff6b6b;
}

/* Adjust main content margin when using sidebar */
body:has(.sidebar) .main-content {
    margin-left: var(--sidebar-width-collapsed);
}

/* Tenant Switcher Slim */
.tenant-select-slim {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    outline: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tenant-select-slim:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.tenant-select-slim:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: var(--primary-green-light);
}

.tenant-select-slim option {
    background: var(--sidebar-bg-start);
    color: #ffffff;
    padding: 0.5rem;
}

/* Flatpickr Theme Customization - Green Theme */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: #fff;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
    background: var(--primary-green-alpha-15);
    border-color: var(--primary-green-alpha-15);
    box-shadow: -5px 0 0 var(--primary-green-alpha-15), 5px 0 0 var(--primary-green-alpha-15);
}

.flatpickr-day.today {
    border-color: var(--primary-green);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    border-color: var(--primary-green);
    background: var(--primary-green);
    color: #fff;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--primary-green-alpha-10);
    border-color: var(--primary-green-alpha-10);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--primary-green);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: var(--primary-green-alpha-10);
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: var(--primary-green-alpha-10);
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--primary-green);
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color: var(--primary-green);
}

/* ===================================
   UTILITY CLASSES
   =================================== */

/* Background Colors */
.bg-primary {
    background-color: var(--md-primary) !important;
}

.bg-secondary {
    background-color: var(--md-secondary) !important;
}

.bg-tertiary {
    background-color: var(--md-tertiary) !important;
}

.bg-success {
    background-color: var(--md-success) !important;
}

.bg-error {
    background-color: var(--md-error) !important;
}

.bg-warning {
    background-color: var(--md-warning) !important;
}

.bg-info {
    background-color: var(--md-info) !important;
}

.bg-surface {
    background-color: var(--md-surface) !important;
}

.bg-surface-variant {
    background-color: var(--md-surface-container) !important;
}

/* Text Colors */
.text-primary {
    color: var(--md-primary) !important;
}

.text-secondary {
    color: var(--md-secondary) !important;
}

.text-tertiary {
    color: var(--md-tertiary) !important;
}

.text-on-surface {
    color: var(--md-on-surface) !important;
}

.text-on-surface-variant {
    color: var(--md-on-surface-variant) !important;
}

.text-success {
    color: var(--md-success) !important;
}

.text-error {
    color: var(--md-error) !important;
}

.text-warning {
    color: var(--md-warning) !important;
}

.text-info {
    color: var(--md-info) !important;
}

/* Border Colors */
.border-primary {
    border-color: var(--md-primary) !important;
}

.border-secondary {
    border-color: var(--md-secondary) !important;
}

.border-outline {
    border-color: var(--md-outline) !important;
}

.border-outline-variant {
    border-color: var(--md-outline-variant) !important;
}

.border-success {
    border-color: var(--md-success) !important;
}

.border-error {
    border-color: var(--md-error) !important;
}

.border-warning {
    border-color: var(--md-warning) !important;
}

.border-info {
    border-color: var(--md-info) !important;
}

/* Hover Effects */
.hover-primary:hover {
    background-color: var(--md-primary-alpha-10) !important;
    color: var(--md-primary) !important;
}

.hover-surface:hover {
    background-color: var(--md-surface-container) !important;
}

.hover-opacity:hover {
    opacity: 0.8;
}