/* Dark Theme CSS Variables */
:root[data-theme="dark"] {
    /* Primary - Cyan/Teal (slightly brighter for dark mode) */
    --client-primary: #22d3ee;
    --client-primary-dark: #06b6d4;
    --client-primary-light: #67e8f9;
    --client-primary-vivid: #00d4ff;

    /* Secondary - Orange (slightly brighter) */
    --client-secondary: #fb923c;
    --client-secondary-dark: #f97316;
    --client-secondary-light: #fdba74;

    /* Status Colors (adjusted for dark mode) */
    --client-success: #34d399;
    --client-success-light: #6ee7b7;
    --client-danger: #f87171;
    --client-danger-light: #fca5a5;
    --client-warning: #fbbf24;
    --client-warning-light: #fcd34d;
    --client-info: #60a5fa;
    --client-info-light: #93c5fd;

    /* Neutrals - Inverted for dark mode */
    --client-dark: #f1f5f9;
    --client-dark-light: #e2e8f0;
    --client-gray: #cbd5e1;
    --client-gray-medium: #94a3b8;
    --client-gray-light: #64748b;
    --client-gray-lighter: #475569;
    --client-gray-lightest: #334155;
    --client-white: #1e293b;

    /* Backgrounds */
    --client-bg-primary: #0f172a;
    --client-bg-secondary: #1e293b;
    --client-bg-tertiary: #334155;

    /* Shadows (darker for dark mode) */
    --client-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --client-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --client-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    --client-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
    --client-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
}

/* Dark mode specific styles */
:root[data-theme="dark"] body {
    background-color: var(--client-bg-primary);
    color: var(--client-dark);
}

:root[data-theme="dark"] .dashboard-wrapper {
    background: var(--client-bg-primary) !important;
}

:root[data-theme="dark"] .content-section,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] [style*="background: white"],
:root[data-theme="dark"] [style*="background:white"] {
    background: var(--client-bg-secondary) !important;
    border-color: var(--client-gray-lighter) !important;
}

:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: var(--client-bg-tertiary) !important;
    color: var(--client-dark) !important;
    border-color: var(--client-gray-lighter) !important;
}

:root[data-theme="dark"] input[disabled] {
    background: var(--client-gray-lightest) !important;
    color: var(--client-gray) !important;
}

/* Smooth transition for theme change */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}