/*
 * Mode sombre de Ventemap (bouton « Paramètres » du menu).
 * Activé par l'attribut data-theme="dark" sur <html> (posé avant l'affichage par le script de l'en-tête :
 * aucun « flash » blanc). Les règles ne s'appliquent QUE dans ce cas : le mode clair reste inchangé.
 *   1. couleurs du thème ;
 *   2. espace vendeur / administration (variables --vs-*) ;
 *   3. classes Tailwind les plus utilisées (fonds, textes, bordures) ;
 *   4. composants propres au site (en-tête, accueil, connexion, cartes, formulaires).
 * Les photos, la carte et les couleurs de la marque (vert, jaune, rouge des remises) ne sont pas modifiées.
 */

/* 1. Couleurs du thème sombre */
html[data-theme="dark"] {
    color-scheme: dark;                         /* Barres de défilement, champs et menus natifs en sombre. */
    --dk-bg: #0e1512;                           /* Fond de page */
    --dk-surface: #16201b;                      /* Cartes, panneaux */
    --dk-raised: #1d2a24;                       /* Champs, survols */
    --dk-line: #2a3a32;                         /* Bordures */
    --dk-text: #e7efea;                         /* Texte principal */
    --dk-soft: #b9c7bf;                         /* Texte secondaire */
    --dk-muted: #8fa198;                        /* Texte discret */
    --dk-green: #5fd38a;                        /* Vert lisible sur fond sombre */
}
html[data-theme="dark"] body { background: var(--dk-bg) !important; color: var(--dk-text); }

/* 2. Espace vendeur et administration : il suffit de changer les variables. */
html[data-theme="dark"] {
    --vs-ink: #e7efea; --vs-ink-2: #c9d6cf; --vs-muted: #8fa198; --vs-line: #2a3a32; --vs-bg: #0e1512; --vs-card: #16201b;
    --vs-amber: #fbbf5a; --vs-red: #f87171; --vs-blue: #93b4fd; --vs-purple: #c4b5fd;
    --vs-green-soft: #173726; --vs-amber-soft: #3a2d12; --vs-red-soft: #3b1717; --vs-blue-soft: #172846; --vs-purple-soft: #2a1f45;
}

/* 3. Classes Tailwind courantes */
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-white\/90 { background-color: var(--dk-surface) !important; }
html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-\[\#f5faf5\],
html[data-theme="dark"] .bg-\[\#f8fbf9\], html[data-theme="dark"] .bg-\[\#f5f8f6\] { background-color: var(--dk-bg) !important; }
html[data-theme="dark"] .bg-slate-100, html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .bg-slate-200 { background-color: var(--dk-raised) !important; }
html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-green-50, html[data-theme="dark"] .bg-\[\#eaf6e9\],
html[data-theme="dark"] .bg-\[\#eef8ee\], html[data-theme="dark"] .bg-emerald-100 { background-color: #173726 !important; }
html[data-theme="dark"] .bg-indigo-50, html[data-theme="dark"] .bg-indigo-50\/50 { background-color: #1c2340 !important; }
html[data-theme="dark"] .bg-red-50, html[data-theme="dark"] .bg-rose-50 { background-color: #3b1717 !important; }
html[data-theme="dark"] .bg-amber-50, html[data-theme="dark"] .bg-amber-100 { background-color: #3a2d12 !important; }
html[data-theme="dark"] .from-red-50 { --tw-gradient-from: #2a1515 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(42 21 21 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-theme="dark"] .via-amber-50 { --tw-gradient-stops: var(--tw-gradient-from), #2b2412 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
html[data-theme="dark"] .to-white { --tw-gradient-to: var(--dk-surface) var(--tw-gradient-to-position) !important; }

html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-\[\#15202a\], html[data-theme="dark"] .text-\[\#17212b\],
html[data-theme="dark"] .text-\[\#16232a\] { color: var(--dk-text) !important; }
html[data-theme="dark"] .text-slate-700, html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-gray-600 { color: var(--dk-soft) !important; }
html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-gray-400 { color: var(--dk-muted) !important; }
html[data-theme="dark"] .text-\[\#08752f\], html[data-theme="dark"] .text-\[\#126b32\], html[data-theme="dark"] .text-\[\#145d2d\],
html[data-theme="dark"] .text-\[\#28743b\], html[data-theme="dark"] .text-\[\#439b5b\], html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-800, html[data-theme="dark"] .text-green-800, html[data-theme="dark"] .text-green-700 { color: var(--dk-green) !important; }
html[data-theme="dark"] .text-red-700, html[data-theme="dark"] .text-red-600 { color: #f58a8a !important; }
html[data-theme="dark"] .text-amber-800 { color: #f5c869 !important; }

html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .border-gray-50,
html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-gray-300, html[data-theme="dark"] .border-\[\#e6efe7\], html[data-theme="dark"] .border-\[\#edf0ed\],
html[data-theme="dark"] .border-slate-200\/80 { border-color: var(--dk-line) !important; }
html[data-theme="dark"] .border-red-100, html[data-theme="dark"] .border-red-200 { border-color: #5a2626 !important; }
html[data-theme="dark"] .border-green-200, html[data-theme="dark"] .border-emerald-100 { border-color: #24533a !important; }
html[data-theme="dark"] .border-amber-200 { border-color: #5c4718 !important; }
html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow-xl, html[data-theme="dark"] .shadow-2xl { --tw-shadow-color: rgba(0,0,0,.5); }

/* Champs de formulaire */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select, html[data-theme="dark"] textarea {
    background-color: var(--dk-raised); color: var(--dk-text); border-color: var(--dk-line);
}
html[data-theme="dark"] ::placeholder { color: var(--dk-muted); opacity: 1; }

/* 4. Composants du site */
/* Menu principal (barre du haut et menu ☰ du téléphone) : il reste CLAIR en mode sombre.
   Avant, la barre prenait la couleur du fond de page (on ne la distinguait plus) et, dans le menu ☰ resté blanc,
   les liens devenaient presque blancs : illisibles. Ici on remet les couleurs du mode clair, plus fortes que
   les règles générales du point 3. */
html[data-theme="dark"] nav.ventemap-header {
    color-scheme: light;
    background: rgba(255, 255, 255, .98) !important; color: #15202a !important;
    border-bottom: 1px solid #dfe8e1 !important; box-shadow: 0 2px 18px rgba(0, 0, 0, .45) !important;
}
html[data-theme="dark"] nav.ventemap-header .header-link, html[data-theme="dark"] nav.ventemap-header .header-action,
html[data-theme="dark"] nav.ventemap-header .mobile-header-actions a, html[data-theme="dark"] nav.ventemap-header .mobile-header-actions button,
html[data-theme="dark"] nav.ventemap-header .mobile-back-link { color: #1c252c !important; }
html[data-theme="dark"] nav.ventemap-header .header-link:hover, html[data-theme="dark"] nav.ventemap-header .header-action:hover,
html[data-theme="dark"] nav.ventemap-header .mobile-header-actions a:hover, html[data-theme="dark"] nav.ventemap-header .mobile-header-actions button:hover { color: #08752f !important; background: #f1f8f1 !important; }
html[data-theme="dark"] nav.ventemap-header #user-menu-button .text-slate-200 { color: #1c252c !important; }
html[data-theme="dark"] nav.ventemap-header #user-menu-button:hover { background: #f1f8f1 !important; }
html[data-theme="dark"] nav.ventemap-header .header-search input { background: #fff !important; color: #263238 !important; border-color: #dfe8e1 !important; }
html[data-theme="dark"] nav.ventemap-header .header-search input::placeholder { color: #66736b; }
html[data-theme="dark"] nav.ventemap-header .ventemap-logo-text { color: #126b32 !important; }
html[data-theme="dark"] nav.ventemap-header .ventemap-logo-text span { color: #e9a600 !important; }
/* Menu ☰ du téléphone : panneau blanc, textes foncés. */
html[data-theme="dark"] nav.ventemap-header .header-mobile-panel { background: #fff !important; color: #15202a !important; }
html[data-theme="dark"] nav.ventemap-header .header-mobile-panel a, html[data-theme="dark"] nav.ventemap-header .header-mobile-panel button { color: #263238 !important; }
html[data-theme="dark"] nav.ventemap-header .header-mobile-panel a:hover, html[data-theme="dark"] nav.ventemap-header .header-mobile-panel button:hover { background: #f1f8f1 !important; color: #08752f !important; }
html[data-theme="dark"] nav.ventemap-header .header-mobile-panel .text-white { color: #15202a !important; }
html[data-theme="dark"] nav.ventemap-header .header-mobile-panel .text-slate-300,
html[data-theme="dark"] nav.ventemap-header .header-mobile-panel .text-slate-400 { color: #66736b !important; }
html[data-theme="dark"] nav.ventemap-header .header-mobile-panel .bg-rose-600, html[data-theme="dark"] nav.ventemap-header .header-mobile-panel .bg-rose-600:hover,
html[data-theme="dark"] nav.ventemap-header .header-mobile-panel .bg-indigo-600, html[data-theme="dark"] nav.ventemap-header .header-mobile-panel .bg-indigo-600:hover { background: #08752f !important; color: #fff !important; }
/* Bouton vert « Rejoindre » : texte blanc. */
html[data-theme="dark"] nav.ventemap-header .header-auth, html[data-theme="dark"] nav.ventemap-header .header-auth:hover { color: #fff !important; background: #08752f !important; }
html[data-theme="dark"] .ventemap-logo-text { color: var(--dk-text) !important; }
html[data-theme="dark"] .mobile-bottom-nav { background: var(--dk-surface) !important; border-top-color: var(--dk-line) !important; }
html[data-theme="dark"] .mobile-bottom-nav a { color: var(--dk-soft) !important; }

/* Accueil */
html[data-theme="dark"] .home-page, html[data-theme="dark"] body:has(.home-page) { background: var(--dk-bg) !important; color: var(--dk-text); }
html[data-theme="dark"] .home-hero { background: radial-gradient(circle at 70% 18%, #15281d 0, var(--dk-bg) 40%) !important; }
html[data-theme="dark"] .home-hero h1 { color: var(--dk-text) !important; }
html[data-theme="dark"] .home-category, html[data-theme="dark"] .home-product-card, html[data-theme="dark"] .vm-mini {
    background: var(--dk-surface) !important; border-color: var(--dk-line) !important;
}
html[data-theme="dark"] .home-category b, html[data-theme="dark"] .home-product-card h3 { color: var(--dk-text) !important; }
html[data-theme="dark"] .home-category-icon, html[data-theme="dark"] .home-feature-icon { background: #173726 !important; color: var(--dk-green) !important; }
html[data-theme="dark"] .vm-mini img, html[data-theme="dark"] .home-product-card img { background: #0b110e !important; }
html[data-theme="dark"] .home-stat { border-color: var(--dk-line) !important; }
html[data-theme="dark"] .home-map { background: var(--dk-raised) !important; }
html[data-theme="dark"] .home-map #main-map { filter: saturate(.7) brightness(.8) !important; }

/* Connexion, mot de passe oublié */
html[data-theme="dark"] .vm-auth { background: var(--dk-bg); }
html[data-theme="dark"] .vm-auth-card { background: var(--dk-surface); border-color: var(--dk-line); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
html[data-theme="dark"] .vm-auth-card h1 { color: var(--dk-text); }
html[data-theme="dark"] .vm-auth-card .vm-auth-sub { color: var(--dk-soft); }
html[data-theme="dark"] .vm-auth-input { background: var(--dk-raised); border-color: var(--dk-line); color: var(--dk-text); }
html[data-theme="dark"] .vm-auth-link { color: var(--dk-green); }

/* Visionneuse de photos et fenêtre « Paramètres » : déjà sombres ou gérées par leurs propres couleurs. */
html[data-theme="dark"] .vm-settings-box { background: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-line); }

/* Cartes Leaflet : fenêtres d'information lisibles */
html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { background: var(--dk-surface); color: var(--dk-text); }

/* Espace vendeur / administration : éléments dont la couleur claire est écrite en dur dans seller.css. */
html[data-theme="dark"] .vs-top { background: rgba(14, 21, 18, .96); border-color: var(--dk-line); }
html[data-theme="dark"] .vs-search, html[data-theme="dark"] .vs-search:focus-within { background: var(--dk-raised); }
html[data-theme="dark"] .vs-btn-ghost, html[data-theme="dark"] .vs-view-toggle a, html[data-theme="dark"] .vs-pager a { background: var(--dk-raised); }
html[data-theme="dark"] .vs-btn-danger { background: #3b1717; border-color: #5a2626; }
html[data-theme="dark"] .vs-input, html[data-theme="dark"] .vs-select, html[data-theme="dark"] .vs-textarea { background: var(--dk-raised); border-color: var(--dk-line); color: var(--dk-text); }
html[data-theme="dark"] .vs-table th, html[data-theme="dark"] .vs-modal-foot { background: #121b17; }
html[data-theme="dark"] .vs-table tbody tr:hover { background: #1a2620; }
html[data-theme="dark"] .vs-drop { background: #121b17; border-color: var(--dk-line); }
html[data-theme="dark"] .vs-bottom-nav { background: var(--dk-surface); border-color: var(--dk-line); }
html[data-theme="dark"] .vs-timeline li::before { background: var(--dk-surface); }
@media (max-width: 900px) { html[data-theme="dark"] body:has(.vs-app) { background: var(--dk-bg) !important; } }

/* 5. Tableaux de bord (vendeur et administration) : pistes, badges, séparateurs et info-bulles lisibles. */
html[data-theme="dark"] .vs-bar-track, html[data-theme="dark"] .vs-stock-bar, html[data-theme="dark"] .vs-tabs a em { background: var(--dk-raised); }
html[data-theme="dark"] .vs-list li, html[data-theme="dark"] .vs-table td { border-color: var(--dk-line); }
html[data-theme="dark"] .vs-chart .grid line { stroke: var(--dk-line); }
html[data-theme="dark"] .vs-chart .marker { stroke: var(--vs-card); }
html[data-theme="dark"] .vs-tip { background: #e7efea; color: #0e1512; }
html[data-theme="dark"] .vs-badge { background: var(--dk-raised); color: var(--dk-soft); }
html[data-theme="dark"] .vs-badge.green { background: var(--vs-green-soft); color: #6ee7a0; }
html[data-theme="dark"] .vs-badge.amber { background: var(--vs-amber-soft); color: #fbbf5a; }
html[data-theme="dark"] .vs-badge.red { background: var(--vs-red-soft); color: #fca5a5; }
html[data-theme="dark"] .vs-badge.blue { background: var(--vs-blue-soft); color: #93b4fd; }
html[data-theme="dark"] .vs-badge.purple { background: var(--vs-purple-soft); color: #c4b5fd; }
html[data-theme="dark"] .vs-badge.teal { background: #123a36; color: #5eead4; }
html[data-theme="dark"] .vs-dash-rank.r2 { background: #3a4540; color: #e7efea; }
html[data-theme="dark"] .vs-trend-up { color: #6ee7a0 !important; }