/* =====================================================================
   Thème sombre de toute la plateforme.

   Le thème clair est celui d'origine : rien n'est redéfini ici pour lui.
   En sombre (html[data-theme="dark"], posé par static/js/theme.js) :
     1. les variables des gabarits sont redirigées vers la palette sombre ;
     2. les surfaces claires codées en dur dans les <style> des pages
        (cartes, tableaux, formulaires...) sont surchargées.
   Les sélecteurs commencent par html[data-theme="dark"] : plus spécifiques que
   ceux des gabarits, ils l'emportent sans !important (sauf styles inline).
   Tickets, factures et étiquettes restent toujours clairs (impression).
   ===================================================================== */

html[data-theme="dark"] {
    --t-bg: #0b1220;
    --t-surface: #121b2e;
    --t-surface-2: #1a2640;
    --t-surface-3: #22314f;
    --t-border: rgba(148, 163, 184, 0.2);
    --t-text: #e2e8f0;
    --t-text-fort: #f8fafc;
    --t-muted: #94a3b8;
    --t-accent: #38BDF8;

    /* Menu du back-office */
    --text: var(--t-text);
    --muted: var(--t-muted);
    --surface: rgba(56, 189, 248, 0.1);
    --surface-hover: rgba(56, 189, 248, 0.18);
    --border: var(--t-border);

    /* Variables propres à chaque page : fonds « light/soft » et textes sombres */
    --text-dark: var(--t-text);
    --text-muted: var(--t-muted);
    --light-color: var(--t-surface-2);
    --dark-color: var(--t-text);
    --card-bg: var(--t-surface);
    --product-light: var(--t-surface-2);   --product-soft: var(--t-surface-3);
    --sale-light: var(--t-surface-2);      --sale-soft: var(--t-surface-3);
    --repair-light: var(--t-surface-2);    --repair-soft: var(--t-surface-3);
    --decode-light: var(--t-surface-2);    --decode-soft: var(--t-surface-3);
    --depense-light: var(--t-surface-2);   --depense-soft: var(--t-surface-3);
    --purchase-light: var(--t-surface-2);  --purchase-soft: var(--t-surface-3);
    --client-light: var(--t-surface-2);    --client-soft: var(--t-surface-3);
    --comment-light: var(--t-surface-2);   --comment-soft: var(--t-surface-3);
    --category-light: var(--t-surface-3);  --category-soft: var(--t-surface-2);
    --form-light: var(--t-surface-3);      --form-soft: var(--t-surface-2);

    /* Boutique en ligne (static/css/boutique.css) */
    --bq-bg: var(--t-bg);
    --bq-ink: var(--t-text);
    --bq-muted: var(--t-muted);
    --bq-border: var(--t-border);
    --bq-dark: var(--t-accent);

    color-scheme: dark;
}

html[data-theme="dark"] body {
    background: var(--t-bg);
    color: var(--t-text);
}

/* ----- Typographie courante ----- */
html[data-theme="dark"] .main h1, html[data-theme="dark"] .main h2, html[data-theme="dark"] .main h3,
html[data-theme="dark"] .main h4, html[data-theme="dark"] .main h5, html[data-theme="dark"] .main h6,
html[data-theme="dark"] .main label, html[data-theme="dark"] .main strong,
html[data-theme="dark"] .main td, html[data-theme="dark"] .main th, html[data-theme="dark"] .main p {
    color: inherit;
}
html[data-theme="dark"] .main { color: var(--t-text); }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--t-muted) !important; }
html[data-theme="dark"] .text-dark { color: var(--t-text) !important; }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--t-surface) !important; }

/* ----- Menu / barre du back-office ----- */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar {
    background: rgba(18, 27, 46, 0.94);
}
html[data-theme="dark"] .sidebar__brand a,
html[data-theme="dark"] .topbar__brand {
    background: linear-gradient(135deg, #e2e8f0 20%, #38BDF8);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-theme="dark"] .sidebar__toggle span { background: var(--t-text); }

.theme-bascule {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    border: 1px solid var(--border, rgba(5,186,254,.22));
    background: transparent;
    color: inherit;
    border-radius: 10px;
    padding: .45rem .7rem;
    font: inherit; font-size: .82rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.theme-bascule:hover { background: var(--surface-hover, rgba(5,186,254,.18)); }
.theme-bascule i { font-size: 1.05rem; line-height: 1; }

/* ----- Conteneurs de pages (fonds blancs codés en dur) ----- */
html[data-theme="dark"] :is(
    .product-container, .sale-container, .repair-container, .decode-container, .depense-container,
    .purchase-container, .category-container, .comment-container, .client-container, .cashier-container,
    .secondary-cashier-container, .secondary-admin-container, .admin-table-container, .table-container
) {
    background: var(--t-bg);
}
html[data-theme="dark"] :is(.product-container, .sale-container, .repair-container, .decode-container,
    .depense-container, .purchase-container, .category-container, .comment-container)::before {
    opacity: .03;
}

html[data-theme="dark"] :is(
    main.liste-zone, .table__body, .repair-card, .detail-item, .product-detail-card, .admin-card,
    .actor-card, .cashier-card, .cashier-management-card, .stat-card, .vente-carte, .pos__panel,
    .produit-carte, .reglement-form, .timeline-item, .aucun-reglement, .selection-summary, .summary-item,
    .status-badge-item, .auth-card, .empty-table-message, .form-container, .dash-mobile-bar,
    .bqa-kpi, .dc-kpi, .trf-kpi, .rt-kpi, .bqa-onglets a, .dc-onglets a, .trf-onglets a,
    .filter-chip, .filter-dates, .pos__chip, .qte-btn, .product-detail-image-placeholder
) {
    background: var(--t-surface);
    color: var(--t-text);
    border-color: var(--t-border);
}
html[data-theme="dark"] .table__header h1,
html[data-theme="dark"] .table__header { color: var(--t-text-fort); }

/* Lignes de tableau des listes (cartes blanches) */
html[data-theme="dark"] tbody tr { background-color: var(--t-surface); }
html[data-theme="dark"] tbody tr:nth-child(even) { background-color: var(--t-surface-2); }
html[data-theme="dark"] tbody tr:hover { background-color: var(--t-surface-3); }

/* Le mode sombre de Bootstrap gère .table ; on garde ses couleurs dans les cartes */
html[data-theme="dark"] .table { --bs-table-bg: transparent; }
html[data-theme="dark"] .table tbody tr { background-color: transparent; }
html[data-theme="dark"] .table-light { --bs-table-bg: var(--t-surface-2); --bs-table-color: var(--t-text); }
html[data-theme="dark"] .card { background-color: var(--t-surface); color: var(--t-text); }
html[data-theme="dark"] .card-footer.bg-white { background-color: var(--t-surface) !important; }

/* ----- Champs de formulaire personnalisés ----- */
html[data-theme="dark"] :is(.form-control-custom, .reglement-field input, .reglement-field select,
    .form-field .form-control, .form-field .form-select, .auth-card .form-control) {
    background: var(--t-surface-2);
    color: var(--t-text);
    border-color: var(--t-border);
}
html[data-theme="dark"] :is(.form-control-custom, .form-control, .form-select)::placeholder { color: var(--t-muted); }
html[data-theme="dark"] .price-wrapper::before { background: var(--t-surface-2); color: var(--t-muted); }
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ----- Fenêtre « Commande fournisseur » ----- */
html[data-theme="dark"] #modalCommande :is(.cmd-fenetre, .cmd-corps, .cmd-pied, .cmd-entete) {
    background: var(--t-surface); color: var(--t-text);
}
html[data-theme="dark"] #modalCommande .cmd-ligne.choisie { background: var(--t-surface-3); }

/* ----- Caisse (POS) ----- */
html[data-theme="dark"] :is(.panier__nom, .produit-carte__nom, .panier__row--fort) { color: var(--t-text-fort); }

/* ----- Boutique en ligne ----- */
html[data-theme="dark"] .bq-header,
html[data-theme="dark"] .bq-carte-produit,
html[data-theme="dark"] .bq-galerie-principale,
html[data-theme="dark"] .bq-footer {
    background: var(--t-surface);
    color: var(--t-text);
    border-color: var(--t-border);
}
html[data-theme="dark"] .bq-header .text-dark,
html[data-theme="dark"] .bq-carte-produit .text-dark { color: var(--t-text) !important; }
html[data-theme="dark"] .bq-sans-photo {
    background: linear-gradient(135deg, #16223a, #1e2f4f);
    color: var(--t-accent);
}
html[data-theme="dark"] .bq-search input { background: var(--t-surface-2); color: var(--t-text); border-color: var(--t-border); }
html[data-theme="dark"] .bq-footer a { color: var(--t-text); }
html[data-theme="dark"] .bq-footer a:hover { color: var(--t-accent); }

/* Le bouton de bascule ne s'imprime jamais */
@media print { .theme-bascule { display: none !important; } }

/* ----- Tableau de bord (templates/dashboard/tableau_de_bord.html) ----- */
html[data-theme="dark"] .dash {
    --d-ink: var(--t-text-fort);
    --d-muted: rgba(226, 232, 240, 0.6);
    --d-line: var(--t-border);
    --d-card: var(--t-surface);
    --d-bg: var(--t-bg);
    --d-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}
html[data-theme="dark"] .dash .dash-chip { background: rgba(148, 163, 184, .1); }
html[data-theme="dark"] .dash .dash-perso button { background: var(--t-accent); color: #0b1220; }
html[data-theme="dark"] .dash .badge--fini { color: #34d399; }
html[data-theme="dark"] .dash .badge--encours { color: #7dd3fc; }
html[data-theme="dark"] .dash .badge--echec { color: #fb7185; }
html[data-theme="dark"] .dash .badge--alerte { color: #fbbf24; }
html[data-theme="dark"] .dash-mobile-bar { background: rgba(18, 27, 46, .95); }

/* ----- Pastilles des listes (fond translucide + texte foncé en clair) ----- */
html[data-theme="dark"] tbody [class*="badge"]:is(.en-cours, .en-attente, .attente, .encours, .partiel) { color: #fbbf24; }
html[data-theme="dark"] tbody [class*="badge"]:is(.termine, .fini, .paye, .complet, .payee) { color: #4ade80; }
html[data-theme="dark"] tbody [class*="badge"]:is(.non-paye, .impaye, .echec, .annule, .annulee) { color: #f87171; }
html[data-theme="dark"] tbody [class*="-date"] { color: var(--t-text); }

/* ----- Cartes indicateurs des pages Dettes / Transferts / Retours / Boutique ----- */
html[data-theme="dark"] :is(.bqa-kpi, .dc-kpi, .trf-kpi, .rt-kpi) .valeur:not(.danger) { color: var(--t-text-fort); }
html[data-theme="dark"] :is(.bqa-kpi, .dc-kpi, .trf-kpi, .rt-kpi) .valeur.danger { color: #f87171; }
html[data-theme="dark"] :is(.bqa-kpi, .dc-kpi, .trf-kpi, .rt-kpi) :is(.libelle, .detail) { color: var(--t-muted); }
html[data-theme="dark"] :is(.bqa-onglets, .dc-onglets, .trf-onglets) a:not(.actif) { color: var(--t-accent); }

/* ----- Boutique en ligne : surfaces blanches de boutique.css ----- */
html[data-theme="dark"] :is(.bq-categorie-card, .bq-filtres, .bq-vignette, .btn-bq-outline, .btn-bq-favori, .bq-etape .pastille) {
    background: var(--t-surface-2);
    color: var(--t-text);
    border-color: var(--t-border);
}
html[data-theme="dark"] .bq-filtres :is(label, .form-label, a) { color: var(--t-text); }
html[data-theme="dark"] .bq-categorie-card :is(span, p, div) { color: var(--t-text); }
html[data-theme="dark"] .bq-etape.fait .pastille { background: var(--bq-success, #10b981); color: #fff; }