/* ===================================================================
   Dark Mode — applied when <html data-theme="dark">
   Overrides theme.css variables for dark palette.
   =================================================================== */
:root[data-theme="dark"] {
    /* Backgrounds */
    --c-bg: #0F1119;
    --c-bg-soft: #161826;
    --c-surface: #1A1C2A;
    --c-surface-2: #20223A;
    --c-card-bg: #1A1C2A;
    --c-border: #2A2D40;
    --c-border-strong: #353852;

    /* Text */
    --c-text: #E8EAF5;
    --c-text-soft: #B0B6CC;
    --c-text-muted: #8086A0;
    --c-text-faint: #5A607A;

    /* Primary stays for brand consistency, but soften */
    --c-primary: #8676FF;
    --c-primary-soft: #2A2050;
    --c-primary-2: #A095FF;

    /* Sidebar (already dark — make slightly different from page bg) */
    --c-sidebar: #0A0C16;
    --c-sidebar-soft: #131523;
    --c-sidebar-hover: #1E2030;

    /* Status colors — make brighter for contrast on dark bg */
    --c-green: #4DD68A;
    --c-green-soft: #0F2A1B;
    --c-blue: #5B95FF;
    --c-blue-soft: #102240;
    --c-amber: #FFC472;
    --c-amber-soft: #2E2210;
    --c-red: #FF6B6B;
    --c-red-soft: #3A1414;
    --c-orange: #FF9466;
    --c-orange-soft: #3A1A0A;
    --c-teal: #4DDFDF;
    --c-teal-soft: #0E2828;
    --c-pink: #FF92BF;
    --c-pink-soft: #3A1A26;
    --c-purple: #A076FF;
    --c-purple-soft: #261A40;

    /* Shadows — stronger for separation on dark */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Inputs need explicit dark styling because forms inherit from browser */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] input[type="datetime-local"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: var(--c-surface-2);
    color: var(--c-text);
    border-color: var(--c-border-strong);
}

:root[data-theme="dark"] input[type="text"]:focus,
:root[data-theme="dark"] input[type="number"]:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
    border-color: var(--c-primary);
    outline-color: var(--c-primary);
}

/* Native date picker icon — invert for dark */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
}

/* Tables — alternate row contrast */
:root[data-theme="dark"] .prod-table tbody tr:hover {
    background: rgba(135, 118, 255, 0.06);
}

/* Modal backdrop a bit darker */
:root[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

/* Login page contrast */
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .form-card {
    background: var(--c-surface);
}

/* Smooth theme transition */
html, body, .sidebar, .header, .form-card, .prod-table-card, .kpi-card,
.acc-tab, .modal-card, .pkpi, .acc-card {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}