/**
 * Theme sombre eBulletin — variables globales + composants (admin, auth, formulaires).
 * Active avec html.dark / body.dark (localStorage: ebulletin_theme).
 */
html.dark,
html.dark body,
body.dark {
    color-scheme: dark;

    --br: #818cf8;
    --brl: #1e1c35;
    --brm: #a5b4fc;
    --brd: #6366f1;

    --ok: #34d399;
    --okl: rgba(6, 78, 59, 0.35);
    --okb: #065f46;

    --er: #f87171;
    --erl: rgba(69, 10, 10, 0.35);
    --erb: #7f1d1d;

    --wa: #fbbf24;
    --wal: rgba(69, 26, 3, 0.4);
    --wab: #78350f;

    --in: #38bdf8;
    --inl: rgba(12, 74, 110, 0.35);

    --bg: #0f0e1a;
    --bg2: #16152a;
    --bg3: #1e1c35;
    --bg4: #252342;
    --w: #16152a;
    --tx: #f0effe;
    --mu: #a8a4cc;
    --mu2: #6b6899;
    --bo: #2d2b4e;
    --bo2: #3d3b60;
}

/* ——— Auth (app.css) ——— */
html.dark .aw,
body.dark .aw {
    background: linear-gradient(135deg, #12111f, #0f0e1a 55%, #1a1830);
}

html.dark .ac,
html.dark .scard,
html.dark .scard2,
html.dark .modal-box,
html.dark .cc,
html.dark .tk-card,
html.dark .chat-wrap,
html.dark .pret-folder-card,
html.dark .periode-collapse,
html.dark .ck-l,
html.dark .ss-c,
body.dark .ac,
body.dark .scard,
body.dark .scard2,
body.dark .modal-box,
body.dark .cc,
body.dark .tk-card,
body.dark .chat-wrap,
body.dark .pret-folder-card,
body.dark .periode-collapse,
body.dark .ck-l,
body.dark .ss-c {
    background: var(--w);
    border-color: var(--bo);
    color: var(--tx);
}

html.dark .ac .sub,
html.dark .sdesc,
html.dark .modal-box p,
body.dark .ac .sub,
body.dark .sdesc,
body.dark .modal-box p {
    color: var(--mu);
}

html.dark .fg label,
html.dark .em-field label,
body.dark .fg label,
body.dark .em-field label {
    color: var(--mu);
}

html.dark .fg input,
html.dark .fg select,
html.dark .fg textarea,
html.dark .si2,
html.dark .fi2,
html.dark .inv-row input,
html.dark .em-field input,
html.dark .em-field textarea,
html.dark .chat-inp textarea,
html.dark select,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark input[type="url"],
html.dark input[type="tel"],
html.dark input[type="date"],
html.dark input[type="file"],
body.dark .fg input,
body.dark .fg select,
body.dark .fg textarea,
body.dark .si2,
body.dark .fi2,
body.dark .inv-row input,
body.dark .em-field input,
body.dark .em-field textarea,
body.dark .chat-inp textarea,
body.dark select,
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="number"],
body.dark input[type="search"],
body.dark input[type="url"],
body.dark input[type="tel"],
body.dark input[type="date"],
body.dark input[type="file"] {
    background: var(--w);
    border-color: var(--bo);
    color: var(--tx);
}

html.dark .fg input::placeholder,
html.dark .si2::placeholder,
body.dark .fg input::placeholder,
body.dark .si2::placeholder {
    color: var(--mu2);
}

html.dark .fg input:focus,
html.dark .fg select:focus,
html.dark .fg textarea:focus,
html.dark .si2:focus,
html.dark .fi2:focus,
html.dark .em-field input:focus,
html.dark .em-field textarea:focus,
html.dark .chat-inp textarea:focus,
body.dark .fg input:focus,
body.dark .fg select:focus,
body.dark .fg textarea:focus,
body.dark .si2:focus,
body.dark .fi2:focus,
body.dark .em-field input:focus,
body.dark .em-field textarea:focus,
body.dark .chat-inp textarea:focus {
    border-color: var(--br);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18);
}

html.dark option,
body.dark option {
    background: var(--w);
    color: var(--tx);
}

html.dark .inv-chip,
html.dark .mat-ex,
html.dark .periode-collapse.open .periode-collapse-sum,
body.dark .inv-chip,
body.dark .mat-ex,
body.dark .periode-collapse.open .periode-collapse-sum {
    background: var(--w);
    border-color: var(--bo);
    color: var(--tx);
}

html.dark .ibox,
html.dark .notice-info,
body.dark .ibox,
body.dark .notice-info {
    background: var(--inl);
    border-color: #1e4a6e;
    color: #7dd3fc;
}

html.dark .notice-success,
body.dark .notice-success {
    background: var(--okl);
    border-color: var(--okb);
    color: #6ee7b7;
}

html.dark .notice-warning,
body.dark .notice-warning {
    background: var(--wal);
    border-color: var(--wab);
    color: #fcd34d;
}

html.dark .notice-error,
body.dark .notice-error {
    background: var(--erl);
    border-color: var(--erb);
    color: #fca5a5;
}

html.dark .msg-body,
body.dark .msg-body {
    background: var(--bo);
    color: var(--tx);
}

html.dark .msg.me .msg-body,
body.dark .msg.me .msg-body {
    background: var(--brl);
}

html.dark .msg-av.adm,
body.dark .msg-av.adm {
    background: var(--erl);
    color: #fca5a5;
}

html.dark .licence-box,
body.dark .licence-box {
    background: var(--brl);
    border-color: var(--bo);
}

html.dark .rl-m,
body.dark .rl-m {
    background: var(--w);
    color: var(--mu);
    border-color: var(--bo);
}

html.dark .m-av,
body.dark .m-av {
    background: var(--brl);
    color: var(--br);
}

html.dark .blocked-banner,
body.dark .blocked-banner {
    background: var(--erl);
    border-color: var(--erb);
    color: #fca5a5;
}

html.dark .ia-process-banner,
body.dark .ia-process-banner {
    background: var(--inl);
    border-color: #1e4a6e;
    color: #a5b4fc;
}

html.dark .modal-overlay,
body.dark .modal-overlay {
    background: rgba(0, 0, 0, 0.65);
}

html.dark .btn-sg,
html.dark .btn-g,
body.dark .btn-sg,
body.dark .btn-g {
    background: var(--w);
    border-color: var(--bo);
    color: var(--mu);
}

html.dark .btn-sg:hover,
html.dark .btn-g:hover,
body.dark .btn-sg:hover,
body.dark .btn-g:hover {
    border-color: var(--br);
    color: var(--br);
}

html.dark .sn-i:hover,
body.dark .sn-i:hover {
    background: var(--w);
    color: var(--tx);
}

html.dark .sn-i.on,
body.dark .sn-i.on {
    background: var(--brl);
    color: var(--br);
}

html.dark .sb-it:hover,
html.dark .sb-usr:hover,
body.dark .sb-it:hover,
body.dark .sb-usr:hover {
    background: var(--w);
}

html.dark .tk-card:hover,
body.dark .tk-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

html.dark .tk-card.active,
body.dark .tk-card.active {
    background: var(--brl);
    border-color: var(--br);
}

/* Panneaux profil / parametres (styles inline des sections) */
html.dark .profile-panel .si2,
html.dark .settings-panel .si2,
html.dark .profile-panel .logo-preview,
html.dark .settings-panel .logo-preview,
body.dark .profile-panel .si2,
body.dark .settings-panel .si2,
body.dark .profile-panel .logo-preview,
body.dark .settings-panel .logo-preview {
    background: var(--w);
    color: var(--tx);
    border-color: var(--bo);
}

html.dark .settings-panel .banner-preview,
body.dark .settings-panel .banner-preview {
    background: var(--w);
    border-color: var(--bo);
}

html.dark .profile-panel .pw-btn-secondary,
body.dark .profile-panel .pw-btn-secondary {
    color: var(--mu);
    border-color: var(--bo);
}

html.dark .profile-panel .pw-btn-secondary:hover,
body.dark .profile-panel .pw-btn-secondary:hover {
    border-color: var(--br);
    color: var(--br);
}

/* eb-ui.css */
html.dark .eb-loader-card,
body.dark .eb-loader-card {
    background: var(--w);
    border-color: var(--bo);
}

html.dark .eb-loader-text,
body.dark .eb-loader-text {
    color: var(--tx);
}

html.dark .eb-auth-panel .eb-alert-ok,
body.dark .eb-auth-panel .eb-alert-ok {
    background: var(--okl);
    color: #6ee7b7;
    border-color: var(--okb);
}

html.dark .eb-auth-panel .eb-alert-wa,
body.dark .eb-auth-panel .eb-alert-wa {
    background: var(--wal);
    color: #fcd34d;
    border-color: var(--wab);
}

html.dark .eb-auth-panel .eb-alert-er,
body.dark .eb-auth-panel .eb-alert-er {
    background: var(--erl);
    color: #fca5a5;
    border-color: var(--erb);
}

html.dark .eb-password-toggle,
body.dark .eb-password-toggle {
    color: var(--mu);
}

html.dark .eb-password-toggle:hover,
body.dark .eb-password-toggle:hover {
    color: var(--br);
}

/* ——— Employés ——— */
html.dark .emp-table thead th,
body.dark .emp-table thead th {
    background: var(--bg3);
}

html.dark .emp-table tbody tr:hover td,
body.dark .emp-table tbody tr:hover td {
    background: var(--bg3);
}

html.dark .emp-avatar,
body.dark .emp-avatar {
    background: var(--brl);
    color: var(--br);
}

html.dark .emp-avatar.ok,
body.dark .emp-avatar.ok {
    box-shadow: 0 0 0 2px var(--w), 0 0 0 3px #10B981;
}

html.dark .emp-avatar.warn,
body.dark .emp-avatar.warn {
    box-shadow: 0 0 0 2px var(--w), 0 0 0 3px #F59E0B;
}

html.dark .emp-mat,
body.dark .emp-mat {
    background: var(--bg3);
    color: var(--br);
}

html.dark .emp-badge,
body.dark .emp-badge {
    background: var(--brl);
    color: var(--br);
}

html.dark .emp-import-stats span,
body.dark .emp-import-stats span {
    background: var(--bg3);
}

html.dark .emp-ic-btn,
body.dark .emp-ic-btn {
    background: var(--w);
    border-color: var(--bo);
    color: var(--mu);
}

html.dark .emp-ic-btn:hover,
body.dark .emp-ic-btn:hover {
    border-color: var(--br);
    color: var(--br);
    background: var(--brl);
}

html.dark .emp-import-card,
body.dark .emp-import-card {
    background: var(--w);
    border-color: var(--bo);
}

html.dark .emp-table-card,
body.dark .emp-table-card {
    background: var(--w);
    border-color: var(--bo);
}

html.dark .emp-tab,
body.dark .emp-tab {
    background: transparent;
    color: var(--mu);
    border-color: var(--bo);
}

html.dark .emp-tab:hover,
body.dark .emp-tab:hover {
    background: var(--w);
    color: var(--tx);
}

html.dark .emp-tab.on,
body.dark .emp-tab.on {
    background: var(--brl);
    color: var(--br);
    border-color: var(--br);
}

/* ——— Sidebar accordéon ——— */
html.dark .sb-grp,
body.dark .sb-grp {
    color: var(--mu);
}

html.dark .sb-grp:hover,
body.dark .sb-grp:hover {
    background: var(--w);
    color: var(--tx);
}

html.dark .sb-grp--open,
body.dark .sb-grp--open {
    background: var(--brl);
    color: var(--br);
}

/* Super admin : mode clair explicite (admin.css est sombre par defaut) */
html:not(.dark) #s-admin,
body:not(.dark) #s-admin {
    --bg: #f4f5ff;
    --bg2: #ffffff;
    --bg3: #f9fafb;
    --bg4: #eef2ff;
    --w: #ffffff;
    --bd: #e5e7eb;
    --bd2: #d1d5db;
    --bo: #e5e7eb;
    --bo2: #d1d5db;
    --tx: #1e1b4b;
    --tx2: #6b7280;
    --tx3: #9ca3af;
    --mu: #6b7280;
    --mu2: #9ca3af;
    --brm: #4f46e5;
    --bra: #6366f1;
}

html:not(.dark) #s-admin .si2,
html:not(.dark) #s-admin .fg input,
html:not(.dark) #s-admin select,
body:not(.dark) #s-admin .si2,
body:not(.dark) #s-admin .fg input,
body:not(.dark) #s-admin select {
    background: #fff;
    color: #1e1b4b;
    border-color: #e5e7eb;
}