/* ==========================================================================
   1. IMPERIUM (VERT TACTIQUE ASTRA MILITARUM)
   ========================================================================== */
:root,
html[data-theme="imperium"] {
    --bg-app: #0e1713;
    --bg-surface: #182820;
    --bg-header: #22382c;
    --bg-toprow: #0a110e;
    --text-toprow: #f0fdf4;
    --sidebar-bg: #070c09;
    --sidebar-text: #e2ede6;
    --text-main: #f0fdf4;
    --text-muted: #86efac;
    --text-accent: #4ade80;
    --border-color: #2d4e3a;
    --primary-color: #22c55e;
    --primary-hover: #16a34a;
    --primary-text: #050807;
    --badge-bg: #1e382b;
    --badge-text: #f0fdf4;
    --checkbox-bg: #0e1713;
    --checkbox-border: #22c55e;
}

/* ==========================================================================
   2. SPACE WOLVES (BLEU-GRIS DE FENRIS)
   ========================================================================== */
html[data-theme="spacewolves"] {
    --bg-app: #1e293b;
    --bg-surface: #2c3b4d;
    --bg-header: #384c63;
    --bg-toprow: #131c26;
    --text-toprow: #ffffff;
    --sidebar-bg: #0f172a;
    --sidebar-text: #f1f5f9;
    --text-main: #ffffff;
    --text-muted: #cbd5e1;
    --text-accent: #7dd3fc;
    --border-color: #475569;
    --primary-color: #38bdf8;
    --primary-hover: #0284c7;
    --primary-text: #0f172a;
    --badge-bg: #334155;
    --badge-text: #f8fafc;
    --checkbox-bg: #1e293b;
    --checkbox-border: #64748b;
}

/* ==========================================================================
   3. SPACE MARINES (ULTRAMARINES CLASSIQUE)
   ========================================================================== */
html[data-theme="spacemarines"] {
    --bg-app: #0b1329;
    --bg-surface: #132247;
    --bg-header: #1d336a;
    --bg-toprow: #070d1c;
    --text-toprow: #fde047;
    --sidebar-bg: #050a14;
    --sidebar-text: #f8fafc;
    --text-main: #ffffff;
    --text-muted: #cbd5e1;
    --text-accent: #facc15;
    --border-color: #2b4582;
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --primary-text: #ffffff;
    --badge-bg: #1e293b;
    --badge-text: #f8fafc;
    --checkbox-bg: #0b1329;
    --checkbox-border: #475569;
}

/* ==========================================================================
   4. BLOOD ANGELS (ROUGE CRAMOISI & OR)
   ========================================================================== */
html[data-theme="bloodangels"] {
    --bg-app: #180808;
    --bg-surface: #2b0f0f;
    --bg-header: #421616;
    --bg-toprow: #120505;
    --text-toprow: #fde047;
    --sidebar-bg: #0a0303;
    --sidebar-text: #fecaca;
    --text-main: #ffffff;
    --text-muted: #fca5a5;
    --text-accent: #fbbf24;
    --border-color: #5c1d1d;
    --primary-color: #ef4444;
    --primary-hover: #dc2626;
    --primary-text: #ffffff;
    --badge-bg: #450a0a;
    --badge-text: #fef2f2;
    --checkbox-bg: #180808;
    --checkbox-border: #7f1d1d;
}

/* ==========================================================================
   5. NÉCRONS (MÉTAL SOMBRE & VERT GAUSS)
   ========================================================================== */
html[data-theme="necrons"] {
    --bg-app: #060b08;
    --bg-surface: #101c15;
    --bg-header: #192d21;
    --bg-toprow: #040605;
    --text-toprow: #4ade80;
    --sidebar-bg: #020403;
    --sidebar-text: #bbf7d0;
    --text-main: #ffffff;
    --text-muted: #86efac;
    --text-accent: #4ade80;
    --border-color: #234230;
    --primary-color: #22c55e;
    --primary-hover: #16a34a;
    --primary-text: #050807;
    --badge-bg: #14532d;
    --badge-text: #f0fdf4;
    --checkbox-bg: #060b08;
    --checkbox-border: #166534;
}

/* ==========================================================================
   6. TYRANIDES (FLOTTE-RUCHE VIOLET & BIO-MAGENTA)
   ========================================================================== */
html[data-theme="tyranids"] {
    --bg-app: #12071f;
    --bg-surface: #220e3b;
    --bg-header: #35165c;
    --bg-toprow: #0a0312;
    --text-toprow: #f472b6;
    --sidebar-bg: #06020c;
    --sidebar-text: #fbcfe8;
    --text-main: #ffffff;
    --text-muted: #e9d5ff;
    --text-accent: #f472b6;
    --border-color: #582499;
    --primary-color: #d946ef;
    --primary-hover: #c026d3;
    --primary-text: #ffffff;
    --badge-bg: #581c87;
    --badge-text: #fdf4ff;
    --checkbox-bg: #12071f;
    --checkbox-border: #7e22ce;
}

/* ==========================================================================
   7. GRIMDARK 40K (NOIR GOTHIQUE & ROUGE SANG)
   ========================================================================== */
html[data-theme="grimdark"] {
    --bg-app: #0c0a09;
    --bg-surface: #1c1917;
    --bg-header: #292524;
    --bg-toprow: #050404;
    --text-toprow: #f5f5f4;
    --sidebar-bg: #050404;
    --sidebar-text: #e7e5e4;
    --text-main: #ffffff;
    --text-muted: #d6d3d1;
    --text-accent: #fbbf24;
    --border-color: #44403c;
    --primary-color: #b91c1c;
    --primary-hover: #991b1b;
    --primary-text: #ffffff;
    --badge-bg: #292524;
    --badge-text: #fafaf9;
    --checkbox-bg: #0c0a09;
    --checkbox-border: #57534e;
}

/* ==========================================================================
   THEMES AGE OF SIGMAR
   ========================================================================== */

/* 8. STORMCAST ETERNALS (OR DIVIN D'AZYR & BLEU CÉLESTE) */
html[data-theme="stormcast"] {
    --bg-app: #0a1124;
    --bg-surface: #141f3d;
    --bg-header: #1d2c54;
    --bg-toprow: #060b17;
    --text-toprow: #fcd34d;
    --sidebar-bg: #050812;
    --sidebar-text: #fef3c7;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-accent: #f59e0b;
    --border-color: #2b437c;
    --primary-color: #f59e0b;
    --primary-hover: #d97706;
    --primary-text: #0f172a;
    --badge-bg: #1e3a8a;
    --badge-text: #fef08a;
    --checkbox-bg: #0a1124;
    --checkbox-border: #f59e0b;
}

/* 9. SKAVENS (VERT MALEPIERRE & BRONZE TOXIQUE) */
html[data-theme="skaven"] {
    --bg-app: #08130c;
    --bg-surface: #102418;
    --bg-header: #183726;
    --bg-toprow: #040906;
    --text-toprow: #4ade80;
    --sidebar-bg: #030704;
    --sidebar-text: #bbf7d0;
    --text-main: #f0fdf4;
    --text-muted: #86efac;
    --text-accent: #22c55e;
    --border-color: #235d3d;
    --primary-color: #10b981;
    --primary-hover: #059669;
    --primary-text: #022c22;
    --badge-bg: #064e3b;
    --badge-text: #a7f3d0;
    --checkbox-bg: #08130c;
    --checkbox-border: #10b981;
}

/* 10. LAMES DE KHORNE (ROUGE SANG ARDENT & LAITON) */
html[data-theme="khorne"] {
    --bg-app: #180505;
    --bg-surface: #2b0c0c;
    --bg-header: #411414;
    --bg-toprow: #100202;
    --text-toprow: #fca5a5;
    --sidebar-bg: #0a0202;
    --sidebar-text: #fecaca;
    --text-main: #ffffff;
    --text-muted: #f87171;
    --text-accent: #f87171;
    --border-color: #771d1d;
    --primary-color: #dc2626;
    --primary-hover: #b91c1c;
    --primary-text: #ffffff;
    --badge-bg: #450a0a;
    --badge-text: #fee2e2;
    --checkbox-bg: #180505;
    --checkbox-border: #ef4444;
}

/* 11. HANTENUIT / NIGHTHAUNT (BRUME SPECTRALE TURQUOISE & SÉPULCRE) */
html[data-theme="nighthaunt"] {
    --bg-app: #071517;
    --bg-surface: #0e2428;
    --bg-header: #14353a;
    --bg-toprow: #040e10;
    --text-toprow: #5eead4;
    --sidebar-bg: #02080a;
    --sidebar-text: #ccfbf1;
    --text-main: #f0fdfa;
    --text-muted: #99f6e4;
    --text-accent: #2dd4bf;
    --border-color: #134e4a;
    --primary-color: #14b8a6;
    --primary-hover: #0d9488;
    --primary-text: #042f2e;
    --badge-bg: #115e59;
    --badge-text: #ccfbf1;
    --checkbox-bg: #071517;
    --checkbox-border: #2dd4bf;
}

/* 12. SÉRAPHONS / SERAPHON (TURQUOISE JADE MAYA & OR SOLAIRE) */
html[data-theme="seraphon"] {
    --bg-app: #04171a;
    --bg-surface: #0a272d;
    --bg-header: #103c45;
    --bg-toprow: #020f12;
    --text-toprow: #fde047;
    --sidebar-bg: #020a0d;
    --sidebar-text: #e0f2fe;
    --text-main: #ffffff;
    --text-muted: #7dd3fc;
    --text-accent: #38bdf8;
    --border-color: #0369a1;
    --primary-color: #0ea5e9;
    --primary-hover: #0284c7;
    --primary-text: #082f49;
    --badge-bg: #075985;
    --badge-text: #e0f2fe;
    --checkbox-bg: #04171a;
    --checkbox-border: #38bdf8;
}

/* 13. ORRUK WARCLANS (VERT PEAU-VERTE MARAIS & JAUNE BAD MOON) */
html[data-theme="orruk"] {
    --bg-app: #121508;
    --bg-surface: #1e240e;
    --bg-header: #2e3716;
    --bg-toprow: #0a0c04;
    --text-toprow: #facc15;
    --sidebar-bg: #070803;
    --sidebar-text: #fef08a;
    --text-main: #fefce8;
    --text-muted: #d9f99d;
    --text-accent: #eab308;
    --border-color: #4d5f1e;
    --primary-color: #84cc16;
    --primary-hover: #65a30d;
    --primary-text: #1a2e05;
    --badge-bg: #3f6212;
    --badge-text: #f7fee7;
    --checkbox-bg: #121508;
    --checkbox-border: #84cc16;
}

/* ==========================================================================
   APPLICATION GLOBALE ET RÈGLES DE STRUCTURE
   ========================================================================== */

body,
main,
.page,
article.content {
    background-color: var(--bg-app) !important;
    color: var(--text-main) !important;
}

/* Barre latérale */
.sidebar {
    background-color: var(--sidebar-bg) !important;
    background-image: none !important;
    border-right: 1px solid var(--border-color) !important;
}

    .sidebar .nav-link {
        color: var(--sidebar-text) !important;
    }

        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            background-color: var(--bg-header) !important;
            color: var(--primary-color) !important;
        }

/* Bandeau supérieur */
.top-row {
    background-color: var(--bg-toprow) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-toprow) !important;
}

    .top-row span,
    .top-row label,
    .top-row h1, .top-row h2, .top-row h3, .top-row h4 {
        color: var(--text-toprow) !important;
    }

    .top-row .fa-shield-alt,
    .top-row .fa-palette {
        color: var(--primary-color) !important;
    }

/* Cartes et conteneurs */
.card {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.card-header,
.card-footer,
.bg-light {
    background-color: var(--bg-header) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Tableaux */
.table,
.table > :not(caption) > * > *,
.table tbody tr,
.table tbody td,
.table tbody th {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

    .table thead th,
    .table-light {
        background-color: var(--bg-header) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
        font-weight: 700;
    }

    .table tbody tr:hover > td,
    .table tbody tr:hover > th {
        background-color: var(--bg-header) !important;
    }

    /* Forçage des textes pour la lisibilité */
    .text-dark,
    .table td .text-dark,
    .table td strong,
    .table td .fw-bold,
    .table td b {
        color: var(--text-main) !important;
        font-weight: 600;
    }

    .text-muted,
    .table td .text-muted,
    .table td small,
    .table td .fst-italic,
    .fst-italic {
        color: var(--text-muted) !important;
    }

    .text-primary,
    .table td .text-primary {
        color: var(--text-accent) !important;
        font-weight: 600;
    }

/* Badges */
.badge.bg-secondary,
.badge.bg-light,
.badge.bg-dark {
    background-color: var(--badge-bg) !important;
    color: var(--badge-text) !important;
    border: 1px solid var(--border-color) !important;
}

/* ==========================================================================
   MODALES ET POPUPS (SUPPRESSION TOTALE DE TOUT FOND BLANC)
   ========================================================================== */

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.modal {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

.modal-dialog {
    color: var(--text-main) !important;
}

.modal-content,
.modal-body {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.modal-header,
.modal-footer {
    background-color: var(--bg-header) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Neutralisation absolue des classes Bootstrap bg-white et bg-light dans les modales */
.modal .bg-white,
.modal .bg-light,
.modal-content .bg-white,
.modal-content .bg-light,
.modal-body .bg-white,
.modal-body .bg-light,
.modal-footer .bg-white,
.modal-footer .bg-light,
.modal-header .bg-white,
.modal-header .bg-light {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Boutons de fermeture de modales visibles sur fond sombre */
.modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.85 !important;
}

.modal .btn-close:hover {
    opacity: 1 !important;
}

/* Textes dans les modales */
.modal-title,
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6,
.modal-header .modal-title,
.modal-body label,
.modal-body .form-label,
.modal-body p,
.modal-body span:not(.badge),
.modal-body strong,
.modal-body b,
.modal-body .text-dark,
.modal-header .text-dark,
.modal-footer .text-dark,
.modal .text-dark {
    color: var(--text-main) !important;
}

.modal-body .text-muted,
.modal-body small {
    color: var(--text-muted) !important;
}

/* Cartes, conteneurs, listes et encarts dans les modales */
.modal-body .card,
.modal-body .card-body,
.modal .card,
.modal .card-body {
    background-color: var(--bg-app) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

.modal-body .card-header,
.modal-body .card-footer,
.modal .card-header,
.modal .card-footer {
    background-color: var(--bg-header) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

.modal .list-group-item {
    background-color: var(--bg-app) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

.modal .alert-light,
.modal .alert-secondary {
    background-color: var(--bg-app) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Tableaux dans les modales */
.modal .table,
.modal .table > :not(caption) > * > *,
.modal .table tbody tr,
.modal .table tbody td,
.modal .table tbody th,
.modal .table-secondary,
.modal .table-light {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

.modal .table thead th {
    background-color: var(--bg-header) !important;
    color: var(--text-main) !important;
}

/* Champs de formulaires dans les modales */
.modal-body .form-control,
.modal-body .form-select,
.modal-body textarea,
.modal-body input {
    background-color: var(--bg-app) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus,
.modal-body textarea:focus,
.modal-body input:focus {
    background-color: var(--bg-app) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-main) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important;
}

.modal-body .input-group-text {
    background-color: var(--bg-header) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Blocs avec bordure dans les modales (listes de cases à cocher, etc.) */
.modal-body .border,
.modal-body .border.rounded,
.modal-body .rounded.border {
    background-color: var(--bg-app) !important;
    border-color: var(--border-color) !important;
}

/* Formulaires : Champs et listes */
.form-control,
.form-select {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

    .form-control:focus,
    .form-select:focus {
        background-color: var(--bg-surface) !important;
        color: var(--text-main) !important;
        border-color: var(--primary-color) !important;
    }

.form-label {
    color: var(--text-main) !important;
    font-weight: 600;
}

.input-group-text {
    background-color: var(--bg-header) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* ==========================================================================
   CASES À COCHER (CHECKBOXES & MOTS-CLÉS D'ARMES)
   ========================================================================== */

.form-check {
    color: var(--text-main) !important;
    margin-bottom: 0.35rem;
}

.form-check-label {
    color: var(--text-main) !important;
    cursor: pointer;
    font-weight: 500;
    user-select: none;
}

.form-check-input {
    background-color: var(--checkbox-bg) !important;
    border: 1.5px solid var(--checkbox-border) !important;
    cursor: pointer;
}

    .form-check-input:checked {
        background-color: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important;
        border-color: var(--primary-color) !important;
    }

/* Conteneurs avec bordure pour les listes de mots-clés */
.border.rounded.p-2,
.border.rounded.p-3 {
    border-color: var(--border-color) !important;
    background-color: var(--bg-surface) !important;
}

/* Boutons */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-text) !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--primary-hover) !important;
        border-color: var(--primary-hover) !important;
    }

/* Menus déroulants, Popovers & Infobulles */
.dropdown-menu {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.dropdown-item {
    color: var(--text-main) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-header) !important;
    color: var(--text-accent) !important;
}

.dropdown-divider {
    border-color: var(--border-color) !important;
}

.popover {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.popover-header {
    background-color: var(--bg-header) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.popover-body {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
}