/* ==========================================================================
   Mode sombre (bouton dans base.html.twig).
   Activé par l'attribut data-bs-theme="dark" sur <html> (natif Bootstrap 5.3).
   Les blocs <style> de chaque page étant injectés APRÈS ce fichier, les
   surcharges ci-dessous sont en !important pour l'emporter sur les couleurs
   claires codées en dur dans les pages.
   ========================================================================== */

:root[data-bs-theme="dark"] {
    --dk-bg: #0f1420;
    --dk-surface: #171d2b;
    --dk-surface-2: #131a27;
    --dk-border: #273044;
    --dk-text: #e6e9ef;
    --dk-muted: #94a3b8;
    --dk-accent: #3b82f6;
}

/* --- Bouton flottant de bascule (toujours affiché, dans les deux modes) --- */
.theme-toggle {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 1080;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #d9dee6;
    background: #ffffff;
    color: #1e2a3a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .ico-sun { display: none; }

:root[data-bs-theme="dark"] .theme-toggle {
    background: #1e2637;
    border-color: #2b3550;
    color: #ffd479;
}
:root[data-bs-theme="dark"] .theme-toggle .ico-moon { display: none; }
:root[data-bs-theme="dark"] .theme-toggle .ico-sun { display: inline; }

/* --- Surfaces de base --- */
:root[data-bs-theme="dark"] body {
    background: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}

/* Surlignage du terme recherché (variante sombre) */
:root[data-bs-theme="dark"] mark.hl {
    background: #14432f !important;
    color: #7CE8B4 !important;
    box-shadow: 0 0 0 1px rgba(124, 232, 180, .3) !important;
}

/* ==== Page d'accueil ==== */
:root[data-bs-theme="dark"] .home { color: var(--dk-text) !important; }
:root[data-bs-theme="dark"] .home-card {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
:root[data-bs-theme="dark"] .home-card-icon {
    background: color-mix(in srgb, var(--accent) 22%, #0f1420) !important;
}
:root[data-bs-theme="dark"] .home-card-title { color: var(--dk-text) !important; }
:root[data-bs-theme="dark"] .home-card-desc { color: var(--dk-muted) !important; }
:root[data-bs-theme="dark"] .home-section-title { color: #7c89a1 !important; }

/* ==== Pages d'administration (users / filtres) ==== */
:root[data-bs-theme="dark"] .adm { color: var(--dk-text) !important; }
:root[data-bs-theme="dark"] .card2 {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
:root[data-bs-theme="dark"] .card2 h2 { color: #f1f4f9 !important; }
:root[data-bs-theme="dark"] .card2 .lead,
:root[data-bs-theme="dark"] .muted,
:root[data-bs-theme="dark"] .kv .k { color: var(--dk-muted) !important; }
:root[data-bs-theme="dark"] .kv { color: #c7d0e0 !important; }
:root[data-bs-theme="dark"] .note {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: #9aa6b8 !important;
}

:root[data-bs-theme="dark"] table.u th { color: #7c89a1 !important; border-color: var(--dk-border) !important; }
:root[data-bs-theme="dark"] table.u td { border-color: #222b3d !important; }
:root[data-bs-theme="dark"] .chip { background: #123a2b !important; color: #4FD6A0 !important; }

:root[data-bs-theme="dark"] .adm-nav a { color: var(--dk-muted) !important; }
:root[data-bs-theme="dark"] .adm-nav a:hover { background: #1c2536 !important; color: #fff !important; }
:root[data-bs-theme="dark"] .btn-edit,
:root[data-bs-theme="dark"] .btn-del {
    background: var(--dk-surface) !important;
    border-color: #2b3550 !important;
    color: #c7d0e0 !important;
}
:root[data-bs-theme="dark"] .btn-new { background: #e6e9ef !important; color: #111 !important; }

/* ==== Bon de livraison (delivery/new) ==== */
:root[data-bs-theme="dark"] .bl { color: var(--dk-text) !important; }
:root[data-bs-theme="dark"] .bl-card {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
:root[data-bs-theme="dark"] .bl-nav a { color: var(--dk-muted) !important; }
:root[data-bs-theme="dark"] .bl-nav a:hover { background: #1c2536 !important; color: #fff !important; }
:root[data-bs-theme="dark"] label.fld,
:root[data-bs-theme="dark"] .filt-label { color: #aab4c4 !important; }
:root[data-bs-theme="dark"] .inp,
:root[data-bs-theme="dark"] .filt-sel {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* Total du bon de livraison : le montant était en #111 (invisible sur fond sombre) */
:root[data-bs-theme="dark"] .grand { color: var(--dk-muted) !important; }
:root[data-bs-theme="dark"] .grand b { color: #f1f4f9 !important; }

/* Statut de recherche : était en #0f172a (quasi noir) → invisible en sombre */
:root[data-bs-theme="dark"] #resultInfo { color: #e6e9ef !important; }
:root[data-bs-theme="dark"] #resultInfo.searching { color: #4FD6A0 !important; }

/* Boutons foncés (#111) -> accent pour rester visibles sur fond sombre */
:root[data-bs-theme="dark"] .btn-submit,
:root[data-bs-theme="dark"] .btn-pick { background: #00A862 !important; }
:root[data-bs-theme="dark"] .btn-submit:hover,
:root[data-bs-theme="dark"] .btn-pick:hover { background: #008A50 !important; }

/* Toggles de filtres */
:root[data-bs-theme="dark"] .tog {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: #c7d0e0 !important;
}
:root[data-bs-theme="dark"] .tog:hover:not(.tog--on) { background: #1c2536 !important; }
:root[data-bs-theme="dark"] .tog--on { background: #00A862 !important; border-color: #00A862 !important; color: #fff !important; }

/* Cartes de résultats + autocomplétion */
:root[data-bs-theme="dark"] .res-card {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
:root[data-bs-theme="dark"] .res-card:hover { background: #1c2536 !important; border-color: #3a465e !important; }
:root[data-bs-theme="dark"] .res-name { color: #e6e9ef !important; }
:root[data-bs-theme="dark"] .res-price { color: #c7d0e0 !important; }
:root[data-bs-theme="dark"] .ac-results {
    background: var(--dk-surface) !important;
    border-color: var(--dk-border) !important;
}
:root[data-bs-theme="dark"] .ac-item:hover { background: #1c2536 !important; }
:root[data-bs-theme="dark"] .ac-name { color: #c7d0e0 !important; }
:root[data-bs-theme="dark"] .btn-add {
    background: #123322 !important;
    border-color: #2b5c45 !important;
    color: #4FD6A0 !important;
}
:root[data-bs-theme="dark"] .btn-add:hover { background: #173f2e !important; }
:root[data-bs-theme="dark"] .btn-reset { border-color: var(--dk-border) !important; color: var(--dk-muted) !important; }
:root[data-bs-theme="dark"] .lines td { color: var(--dk-text) !important; }
/* Bouton de repli : sans fond et avec une bordure --dk-border, il se confondait
   avec la carte — seul le chevron restait visible, et rien ne signalait une
   zone cliquable. Il lui faut une surface à lui et un contour franc.
   Bordure calée sur 3:1 avec la carte (seuil WCAG des contours d'éléments
   d'interface) : en dessous, le bouton redevient un liseré qu'on devine. */
:root[data-bs-theme="dark"] .bl-card h2 .collapse-btn {
    background: #202a3d !important;
    border-color: #5a6a85 !important;
    color: #cbd5e1 !important;
}
:root[data-bs-theme="dark"] .bl-card h2 .collapse-btn:hover { background: #123322 !important; color: #4FD6A0 !important; border-color: #4FD6A0 !important; }
:root[data-bs-theme="dark"] .btn-history { background: var(--dk-surface) !important; color: #4FD6A0 !important; border-color: #2b5c45 !important; }
:root[data-bs-theme="dark"] .btn-history:hover { background: #123322 !important; border-color: #4FD6A0 !important; }

/* Pop-up historique en mode sombre */
:root[data-bs-theme="dark"] .modal-box { background: var(--dk-surface) !important; }
:root[data-bs-theme="dark"] .modal-head { border-color: var(--dk-border) !important; }
:root[data-bs-theme="dark"] .modal-head h3 { color: var(--dk-text) !important; }
:root[data-bs-theme="dark"] .hist-table th { color: var(--dk-muted) !important; border-color: var(--dk-border) !important; background: var(--dk-surface) !important; }
:root[data-bs-theme="dark"] .hist-table td { color: #c7d0e0 !important; border-color: #222b3d !important; }

/* Badges de statut + article repliable (mode sombre) */
:root[data-bs-theme="dark"] .st-quote { background:#1c2536 !important; color:#94a3b8 !important; }
:root[data-bs-theme="dark"] .st-confirmed { background:#123322 !important; color:#4FD6A0 !important; }
:root[data-bs-theme="dark"] .st-pending,
:root[data-bs-theme="dark"] .st-partiallyShipped { background:#3a2a10 !important; color:#f5c26b !important; }
:root[data-bs-theme="dark"] .st-inProgress,
:root[data-bs-theme="dark"] .st-invoiced { background:#16233c !important; color:#7fb0ff !important; }
:root[data-bs-theme="dark"] .st-shipped { background:#0f3730 !important; color:#5fd6c0 !important; }
:root[data-bs-theme="dark"] .st-closed { background:#2a2f3a !important; color:#c7d0e0 !important; }
:root[data-bs-theme="dark"] .st-canceled,
:root[data-bs-theme="dark"] .st-cancelled { background:#3a1a1a !important; color:#ff8888 !important; }
:root[data-bs-theme="dark"] .art-toggle { background:#123322 !important; border-color:#2b5c45 !important; color:#4FD6A0 !important; }
:root[data-bs-theme="dark"] .hist-table .art-name { color:#94a3b8 !important; }

/* Onglets Tableau/Diagramme + graphique (mode sombre) */
:root[data-bs-theme="dark"] .hist-tab { background:var(--dk-surface) !important; border-color:var(--dk-border) !important; color:var(--dk-muted) !important; }
:root[data-bs-theme="dark"] .hist-tab.active { background:#00A862 !important; border-color:#00A862 !important; color:#fff !important; }
:root[data-bs-theme="dark"] .chart-title { color:#e6e9ef !important; }
:root[data-bs-theme="dark"] .chart-label { color:#c7d0e0 !important; }
:root[data-bs-theme="dark"] .chart-track { background:#1c2536 !important; }
:root[data-bs-theme="dark"] .chart-bar { background:#00A862 !important; }
:root[data-bs-theme="dark"] .chart-type { background:var(--dk-surface) !important; border-color:var(--dk-border) !important; color:var(--dk-muted) !important; }
:root[data-bs-theme="dark"] .chart-type.active { background:#e6e9ef !important; border-color:#e6e9ef !important; color:#0f172a !important; }
:root[data-bs-theme="dark"] .vcol-val { color:#e6e9ef !important; }
:root[data-bs-theme="dark"] .vcol-bar { background:#00A862 !important; }
:root[data-bs-theme="dark"] .vcol-label { color:#94a3b8 !important; }
:root[data-bs-theme="dark"] .pie-legend { color:#c7d0e0 !important; }

/* Champs de formulaire génériques hors composants Bootstrap */
:root[data-bs-theme="dark"] input:not([type="submit"]):not([type="button"]),
:root[data-bs-theme="dark"] select,
:root[data-bs-theme="dark"] textarea {
    background: var(--dk-surface-2) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
