/* =============================================
   DARK THEME PREMIUM — Komsolution Design System
   v3.0 — Scoped under html.dark (no !important)
   Loads LAST after all other CSS files.
   ============================================= */

/* ── Token overrides ── */
html.dark {
    /* Backgrounds */
    --color-bg: #0F1419;
    --color-surface: rgba(255,255,255,0.025);
    --color-surface-solid: rgba(255,255,255,0.03);

    /* Borders */
    --color-border: rgba(133,167,215,0.09);
    --color-border-solid: rgba(133,167,215,0.09);

    /* Text */
    --color-text-primary: rgba(255,255,255,0.90);
    --color-text-secondary: rgba(255,255,255,0.55);
    --color-text-muted: rgba(255,255,255,0.35);
    --color-text-inverse: #0A0A0A;

    /* Primary */
    --color-primary: #85A7D7;
    --color-primary-light: rgba(133,167,215,0.12);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);

    /* DS palette */
    --ds-creme: #0F1419;
    --ds-surface: rgba(255,255,255,0.025);
    --ds-surface-alt: rgba(255,255,255,0.04);
    --ds-border: rgba(133,167,215,0.09);
    --ds-text: rgba(255,255,255,0.90);
    --ds-text-secondary: rgba(255,255,255,0.55);
    --ds-text-muted: rgba(255,255,255,0.35);
    --ds-blanc: rgba(255,255,255,0.90);

    /* Kom tokens */
    --kom-creme: #0F1419;
    --kom-blanc: rgba(255,255,255,0.03);
    --kom-border: rgba(133,167,215,0.09);
    --kom-text: rgba(255,255,255,0.90);
    --kom-text-secondary: rgba(255,255,255,0.55);
    --kom-text-muted: rgba(255,255,255,0.35);
}

/* ── Base body ── */
html.dark body {
    background: #0F1419;
    color: rgba(255,255,255,0.88);
    background-image: none;
}

/* ── Sidebar ── */
html.dark .app-sidebar {
    background: linear-gradient(160deg, rgba(133,167,215,0.12), rgba(74,110,138,0.08), rgba(15,20,25,0.55));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(133,167,215,0.12);
}

html.dark .app-sidebar-brand {
    border-bottom: 1px solid rgba(133,167,215,0.10);
}

html.dark .app-sidebar-nav .nav-tab.active {
    border-left-color: #85A7D7;
}

/* ── Halo decoratif ── */
html.dark .app-main::before {
    content: '';
    position: fixed;
    top: -80px;
    right: 100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74,110,138,0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── Header / Topbar ── */
html.dark .header {
    background: linear-gradient(90deg, rgba(133,167,215,0.10), rgba(74,110,138,0.07));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(133,167,215,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

html.dark .topbar-title {
    color: rgba(255,255,255,0.90);
}

/* ── Nav tabs ── */
html.dark .nav-tab {
    color: rgba(255,255,255,0.42);
}
html.dark .nav-tab:hover {
    color: rgba(255,255,255,0.75);
    background: rgba(133,167,215,0.06);
}
html.dark .nav-tab.active {
    color: rgba(255,255,255,0.92);
    font-weight: 700;
    background: linear-gradient(90deg, rgba(133,167,215,0.16), rgba(133,167,215,0.03));
    border-left: 2px solid #85A7D7;
}
html.dark .nav-tab svg { stroke: currentColor; }

/* ── Page titles ── */
html.dark .page-title,
html.dark .main-content h1,
html.dark .main-content h2 {
    color: rgba(255,255,255,0.90);
    font-weight: 700;
}

/* ── Headings ── */
html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
    color: rgba(255,255,255,0.90);
}

html.dark p { color: rgba(255,255,255,0.45); }

/* ── Buttons ── */
html.dark .btn-primary,
html.dark .btn-login {
    background: rgba(133,167,215,0.85);
    color: #0A0A0A;
    font-weight: 700;
    border: none;
}
html.dark .btn-primary:hover,
html.dark .btn-login:hover {
    background: rgba(133,167,215,0.95);
}

html.dark .btn-ghost,
html.dark .btn-secondary {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55);
    border: 1px solid rgba(133,167,215,0.18);
}
html.dark .btn-ghost:hover,
html.dark .btn-secondary:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
}

/* ── Stat cards ── */
html.dark .stat-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(133,167,215,0.09);
    border-radius: 10px;
}
html.dark .stat-card:nth-child(1) { border-left: 3px solid #4A6E8A; }
html.dark .stat-card:nth-child(2) { border-left: 3px solid #059669; }
html.dark .stat-card:nth-child(3) { border-left: 3px solid #D97706; }
html.dark .stat-card:nth-child(4) { border-left: 3px solid #DC2626; }

html.dark .stat-card .stat-label,
html.dark .stat-card .stat-title {
    color: rgba(133,167,215,0.55);
    font-size: 9px;
    text-transform: uppercase;
}
html.dark .stat-card .stat-value,
html.dark .stat-card .stat-number {
    color: rgba(255,255,255,0.90);
    font-size: 26px;
    font-weight: 800;
}

/* ── Glass cards / generic cards ── */
html.dark .glass-card,
html.dark .card,
html.dark .table-container,
html.dark .filter-bar {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(133,167,215,0.09);
    border-radius: 10px;
}
html.dark .glass-card .card-header,
html.dark .card-header {
    background: rgba(255,255,255,0.015);
    border-bottom: 1px solid rgba(133,167,215,0.07);
}

/* ── Tables ── */
html.dark .table-container thead th,
html.dark table thead th {
    background: rgba(133,167,215,0.03);
    color: rgba(133,167,215,0.45);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
}
html.dark .table-container tbody td,
html.dark table tbody td {
    color: rgba(255,255,255,0.62);
    border-bottom: 1px solid rgba(133,167,215,0.05);
}
html.dark .table-container tbody tr:hover td,
html.dark table tbody tr:hover td {
    background: rgba(133,167,215,0.04);
}

/* LOT number */
html.dark .lot-number,
html.dark td:first-child strong,
html.dark .permis-lot {
    color: #85A7D7;
    font-weight: 800;
}

/* ── Badges ── */
html.dark .badge-en-traitement,
html.dark .badge[class*="traitement"],
html.dark .status-badge.en-traitement {
    background: rgba(37,99,235,0.15);
    color: #93C5FD;
    border: none;
}
html.dark .badge-termine,
html.dark .badge-traite,
html.dark .badge[class*="termin"],
html.dark .badge[class*="traite"],
html.dark .status-badge.termine {
    background: rgba(5,150,105,0.15);
    color: #6EE7B7;
    border: none;
}
html.dark .badge-en-attente,
html.dark .badge-haute,
html.dark .badge[class*="attente"],
html.dark .badge[class*="haute"],
html.dark .status-badge.en-attente {
    background: rgba(217,119,6,0.15);
    color: #FCD34D;
    border: none;
}
html.dark .badge-urgente,
html.dark .badge[class*="urgente"],
html.dark .status-badge.urgente {
    background: rgba(220,38,38,0.15);
    color: #FCA5A5;
    border: none;
}
html.dark .badge-brouillon,
html.dark .badge-normale,
html.dark .badge[class*="brouillon"],
html.dark .badge[class*="normale"],
html.dark .status-badge.brouillon,
html.dark .status-badge.normale {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.40);
    border: none;
}

/* ── Forms ── */
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark select,
html.dark textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(133,167,215,0.15);
    color: rgba(255,255,255,0.80);
}
html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #85A7D7;
    box-shadow: 0 0 0 3px rgba(133,167,215,0.15);
}
html.dark .form-input::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: rgba(255,255,255,0.25);
}
html.dark .form-label,
html.dark label {
    color: rgba(255,255,255,0.55);
}

/* ── User section ── */
html.dark .user-name { color: rgba(255,255,255,0.85); }
html.dark .user-role { color: rgba(255,255,255,0.40); }
html.dark .btn-logout { color: rgba(255,255,255,0.40); }
html.dark .btn-logout:hover { color: rgba(255,255,255,0.70); }

/* ── Notifications ── */
html.dark .notifications svg { stroke: rgba(255,255,255,0.45); }
html.dark .notification-badge { background: #DC2626; color: #fff; }

/* ── Theme toggle ── */
html.dark .theme-toggle {
    background: rgba(255,255,255,0.05);
    border-color: rgba(133,167,215,0.15);
}
html.dark .theme-toggle:hover { background: rgba(255,255,255,0.08); }

/* ── Language selector ── */
html.dark .header select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(133,167,215,0.15);
    color: rgba(255,255,255,0.55);
}

/* ── Parametres nav ── */
html.dark .settings-nav .nav-item.active,
html.dark .params-nav .active,
html.dark .tab-nav .active {
    background: rgba(74,110,138,0.18);
    color: #85A7D7;
    font-weight: 700;
}

html.dark .settings-nav {
    background: rgba(255,255,255,0.03);
    border-color: rgba(133,167,215,0.09);
}

html.dark .settings-nav-item:hover,
html.dark .settings-nav-item.active {
    background: rgba(133,167,215,0.12);
    color: #85A7D7;
}

html.dark .settings-card {
    background: rgba(255,255,255,0.03);
    border-color: rgba(133,167,215,0.09);
}

html.dark .settings-card-header {
    border-bottom-color: rgba(133,167,215,0.07);
}

html.dark .info-box,
html.dark .alert-info {
    background: rgba(74,110,138,0.10);
    border-left: 3px solid #4A6E8A;
    color: rgba(255,255,255,0.70);
}

/* ── Filter selects ── */
html.dark .filter-select {
    background-color: rgba(255,255,255,0.04);
    border-color: rgba(133,167,215,0.15);
    color: rgba(255,255,255,0.70);
}

/* ── Filter pills ── */
html.dark .filter-pill {
    background: rgba(255,255,255,0.06);
    border-color: rgba(133,167,215,0.15);
    color: rgba(255,255,255,0.65);
}
html.dark .filter-pill.active,
html.dark .filter-pill:hover {
    background: rgba(133,167,215,0.2);
    border-color: rgba(133,167,215,0.4);
    color: rgba(255,255,255,0.92);
}

/* ── Modal ── */
html.dark .modal,
html.dark .modal-content {
    background: rgba(20,26,33,0.98);
    border: 1px solid rgba(133,167,215,0.12);
    color: rgba(255,255,255,0.85);
}
html.dark .modal-header { border-bottom: 1px solid rgba(133,167,215,0.08); }
html.dark .modal-footer { border-top: 1px solid rgba(133,167,215,0.08); }

/* ── Toast ── */
html.dark .toast {
    background: rgba(20,26,33,0.95);
    border: 1px solid rgba(133,167,215,0.12);
    color: rgba(255,255,255,0.85);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ── Activity items ── */
html.dark .activity-item {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(133,167,215,0.06);
}
html.dark .activity-item:hover { background: rgba(255,255,255,0.04); }

/* ── Pending items ── */
html.dark .pending-item { background: rgba(255,255,255,0.03); }
html.dark .pending-item:hover { background: rgba(133,167,215,0.08); }

/* ── Chart period selector ── */
html.dark .chart-period-selector { background: rgba(255,255,255,0.06); }
html.dark .chart-period-btn.active { background: rgba(255,255,255,0.10); }

/* ── Objective bar ── */
html.dark .objective-bar { background: rgba(255,255,255,0.08); }

/* ── Scrollbar ── */
html.dark ::-webkit-scrollbar { width: 8px; height: 8px; }
html.dark ::-webkit-scrollbar-track { background: #0F1419; }
html.dark ::-webkit-scrollbar-thumb { background: rgba(133,167,215,0.15); border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(133,167,215,0.25); }

/* ── Mobile nav ── */
html.dark .nav-tabs.active { background: rgba(15,20,25,0.98); }
html.dark .nav-mobile-header { border-bottom-color: rgba(133,167,215,0.10); }

/* ── Hamburger ── */
html.dark .hamburger span { background: rgba(255,255,255,0.60); }

/* ── Skip nav ── */
html.dark .skip-nav { background: #85A7D7; color: #0A0A0A; }

/* ── Sidebar glass (checklist sidebar) ── */
html.dark .sidebar {
    background: linear-gradient(160deg, rgba(133,167,215,0.12), rgba(74,110,138,0.08), rgba(15,20,25,0.55));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(133,167,215,0.12);
}
html.dark .sidebar-brand { border-bottom: 1px solid rgba(133,167,215,0.10); }
html.dark .sidebar-brand img { filter: brightness(0) invert(1); opacity: 0.92; }
html.dark .sidebar-footer { border-top: 1px solid rgba(133,167,215,0.10); }
html.dark .sidebar-section-title { color: rgba(133,167,215,0.45); }
html.dark .sidebar-nav-item { color: rgba(255,255,255,0.42); }
html.dark .sidebar-nav-item:hover { color: rgba(255,255,255,0.75); background: rgba(133,167,215,0.06); }
html.dark .sidebar-nav-item.active {
    color: rgba(255,255,255,0.92); font-weight: 700;
    background: linear-gradient(90deg, rgba(133,167,215,0.16), rgba(133,167,215,0.03));
    border-left-color: #85A7D7;
}

/* ── Checklist page ── */
html.dark .checklist-container { background: rgba(255,255,255,0.03); border-color: rgba(133,167,215,0.09); }
html.dark .checklist-item { border-color: rgba(133,167,215,0.09); }
html.dark .checklist-item:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
html.dark .section-title { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.90); }
html.dark .checkbox-custom { border-color: rgba(133,167,215,0.20); }
html.dark .checkbox-custom.checked { background: #85A7D7; border-color: #85A7D7; }
html.dark .projet-item:hover { background: rgba(133,167,215,0.06); border-color: rgba(133,167,215,0.12); }
html.dark .projet-item.active { background: rgba(133,167,215,0.12); border-color: #85A7D7; }
html.dark .progress-bar { background: rgba(133,167,215,0.12); }
html.dark .notes-section textarea { background: rgba(255,255,255,0.04); border-color: rgba(133,167,215,0.12); color: rgba(255,255,255,0.80); }
html.dark .notes-section textarea:focus { border-color: #85A7D7; box-shadow: 0 0 0 3px rgba(133,167,215,0.15); }

/* ── Edit INV page ── */
html.dark .content,
html.dark .app-header,
html.dark .page-header {
    background: rgba(255,255,255,0.03);
    border-color: rgba(133,167,215,0.09);
    backdrop-filter: blur(20px);
}
html.dark .upload-zone { background: rgba(255,255,255,0.02); border-color: rgba(133,167,215,0.15); }
html.dark .upload-zone:hover, html.dark .upload-zone.drag-over { border-color: #85A7D7; background: rgba(133,167,215,0.04); }
html.dark .file-item { background: rgba(255,255,255,0.03); border-color: rgba(133,167,215,0.09); }
html.dark .file-item:hover { border-color: #85A7D7; background: rgba(133,167,215,0.04); }

/* ── Permis table card ── */
html.dark .permis-table-card { background: rgba(255,255,255,0.03); border-color: rgba(133,167,215,0.09); }
html.dark .permis-table-card thead th { background: rgba(133,167,215,0.03); color: rgba(133,167,215,0.45); }
html.dark .permis-table-card tbody td { color: rgba(255,255,255,0.62); border-bottom-color: rgba(133,167,215,0.05); }
html.dark .permis-table-card tbody tr:hover { background: rgba(133,167,215,0.04); }
html.dark .permis-table-card tbody tr.draft-row { background: rgba(255,255,255,0.02); }

/* ── Warning popup ── */
html.dark .warning-popup { background: rgba(20,26,33,0.98); border: 1px solid rgba(133,167,215,0.12); }
html.dark .warning-btn-cancel { background: rgba(255,255,255,0.05); border-color: rgba(133,167,215,0.15); color: rgba(255,255,255,0.70); }

/* ── Upload area ── */
html.dark .upload-area, html.dark .file-upload-area, html.dark .dropzone, html.dark .step-upload-area {
    background: rgba(255,255,255,0.02);
    border-color: rgba(133,167,215,0.15);
}
html.dark .upload-area:hover, html.dark .dropzone:hover, html.dark .step-upload-area:hover {
    border-color: #85A7D7;
    background: rgba(133,167,215,0.04);
}

/* ── Avatar ── */
html.dark .avatar-upload { background: rgba(255,255,255,0.02); border-color: rgba(133,167,215,0.15); }

/* ── Toggle ── */
html.dark .toggle-slider { background: rgba(133,167,215,0.15); }
html.dark .toggle input:checked + .toggle-slider { background: #85A7D7; }

/* ── Password strength ── */
html.dark .password-strength-bar { background: rgba(133,167,215,0.12); }

/* ── Stepper ── */
html.dark .stepper { border-bottom-color: rgba(133,167,215,0.08); }
html.dark .stepper-number { background: rgba(255,255,255,0.04); border-color: rgba(133,167,215,0.15); color: rgba(255,255,255,0.40); }
html.dark .stepper-step.active .stepper-number { background: #85A7D7; color: #0A0A0A; border-color: #85A7D7; }
html.dark .stepper-line { background: rgba(133,167,215,0.12); }

/* ── Responsive: sidebar collapse ── */
@media (max-width: 768px) {
    html.dark .app-sidebar {
        background: linear-gradient(160deg, rgba(133,167,215,0.15), rgba(74,110,138,0.10), rgba(15,20,25,0.95));
    }
}

/* ── Login page ── */
html.dark #loginPage { background: #0F1419; }
html.dark #loginPage .login-container {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(133,167,215,0.15);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
html.dark #loginPage .login-header h1 { color: rgba(255,255,255,0.90); text-shadow: none; }
html.dark #loginPage .login-header p { color: rgba(255,255,255,0.45); text-shadow: none; }
html.dark #loginPage .form-label { color: rgba(255,255,255,0.55); text-shadow: none; }
html.dark #loginPage .form-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(133,167,215,0.15);
    color: rgba(255,255,255,0.80);
    backdrop-filter: none;
}
html.dark #loginPage .form-input:focus {
    border-color: #85A7D7;
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(133,167,215,0.15);
}
html.dark #loginPage .form-input::placeholder { color: rgba(255,255,255,0.25); }
html.dark #loginPage .btn-login {
    background: rgba(133,167,215,0.85);
    color: #0A0A0A;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(133,167,215,0.2);
}
html.dark #loginPage .btn-login:hover {
    background: rgba(133,167,215,0.95);
    box-shadow: 0 6px 20px rgba(133,167,215,0.3);
}
html.dark #loginPage .remember-me label { color: rgba(255,255,255,0.45); text-shadow: none; }
html.dark #loginPage .remember-me input[type="checkbox"] { accent-color: #85A7D7; }
html.dark #loginPage .toggle-password { color: rgba(255,255,255,0.30); }
html.dark #loginPage .toggle-password:hover { color: rgba(255,255,255,0.55); }
html.dark #loginPage .error-message {
    background: rgba(220,38,38,0.15);
    border: 1px solid rgba(220,38,38,0.25);
    color: #FCA5A5;
}

/* ── Komsolution branding in login ── */
html.dark .login-komsolution-logo {
    display: block;
    margin: 8px auto 0;
    height: 26px;
    opacity: 0.88;
}
html.dark .login-subtitle-brand {
    text-align: center;
    font-size: 9px;
    letter-spacing: 0.8px;
    color: #85A7D7;
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 600;
}