/* ═══════════════════════════════════════════════════════════════
   BITE THEME v3.0 — Thème Principal Unifié
   ═══════════════════════════════════════════════════════════════
   
   🎨 Design System : Blanc pur · Typographie forte · Accent menthe
   📐 Inspiré de la page /recherche/ — appliqué partout
   
   Ce fichier est un OVERRIDE GLOBAL chargé EN DERNIER.
   Il harmonise TOUTES les pages (admin, pro, user, frontend)
   vers le style Bite : propre, minimal, premium.
   
   Palette :
     Blanc      #ffffff
     Snow       #fcfcfd
     Cloud      #f8f8f8, #f5f5f5
     Bordures   #e4e6ef
     Muted      #bbb, #ccc
     Gris       #999, #888
     Medium     #666, #555
     Encre      #1a1a1a
     Accent     #10b981 (menthe)
     Focus      #1a1a1a border + rgba(26,26,26,0.04) shadow

   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. VARIABLES CSS — Override ROOT
   ═══════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
    /* ── Primary → Noir encre (au lieu de bleu) ── */
    --primary-50: #f5f5f5;
    --primary-100: #f0f0f0;
    --primary-500: #1a1a1a;
    --primary-600: #111111;
    --primary-700: #000000;

    /* ── Secondary → Menthe (au lieu de violet) ── */
    --secondary-500: #10b981;

    /* ── Admin Components (Legacy) ── */
    --admin-primary: #1a1a1a;
    --admin-primary-dark: #111111;
    --admin-primary-light: rgba(26, 26, 26, 0.04);

    /* ── User Dashboard ── */
    --user-primary: #1a1a1a;
    --user-primary-dark: #111111;
    --user-secondary: #10b981;

    /* ── Page Backgrounds (Global) ── */
    --page-bg: #f9f9f9 !important;
    /* Light: #f9f9f9 */

    /* ── Global Surfaces (From Dashboard) ── */
    --surface-card: #ffffff;
    --surface-card-hover: #ffffff;
    --surface-border: #e2e8f0;
    --surface-inner-border: #f1f5f9;
    --surface-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.02);
    --surface-radius: 8px;

    /* ── Global Text (From Dashboard) ── */
    --text-title: #0f172a;
    /* Slate-900 */
    --text-primary: #334155;
    /* Slate-700 */
    --text-secondary: #64748b;
    /* Slate-500 */
    --text-tertiary: #94a3b8;
    /* Slate-400 */
    --text-disabled: #cbd5e1;
    --text-muted: #e2e8f0;

    /* ── Compatibilité KPI vars ── */
    --kpi-card-bg: var(--surface-card);
    --kpi-card-border: var(--surface-border);
    --kpi-text-title: var(--text-title);
    --kpi-text-primary: var(--text-primary);
    --kpi-text-secondary: var(--text-secondary);
}

[data-theme="dark"] {
    /* ── Page Backgrounds (Global — aligné dashboard) ── */
    --page-bg: #0b1017 !important;

    /* ── Global Surfaces (Dashboard premium palette) ── */
    --surface-card: #0f1923;
    --surface-card-hover: #152030;
    --surface-border: rgba(255, 255, 255, 0.06);
    --surface-inner-border: rgba(255, 255, 255, 0.04);
    --surface-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
    --surface-radius: 8px;

    /* ── Global Text (Dashboard premium palette) ── */
    --text-title: #e4e6f0;
    --text-primary: #c8cad8;
    --text-secondary: #8b8fa3;
    --text-tertiary: #6b7094;
    --text-disabled: #353a52;
    --text-muted: #2a2e42;

    /* ── Compatibilité KPI vars ── */
    --kpi-card-bg: var(--surface-card);
    --kpi-card-border: var(--surface-border);
    --kpi-text-title: var(--text-title);
    --kpi-text-primary: var(--text-primary);
    --kpi-text-secondary: var(--text-secondary);
}

/* Appliquer le fond globalement */
body,
.admin-main {
    background-color: var(--page-bg) !important;
    transition: background-color 0.3s ease;
    color: var(--text-primary);
    /* Appliquer couleur texte par défaut */
}

/* ═══════════════════════════════════════════════════════════════
   1b. STANDARDISATION DES CARTES (GLOBAL)
   ═══════════════════════════════════════════════════════════════ */
.card,
.dash-card,
.admin-card,
.panel {
    background: var(--surface-card) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--surface-radius) !important;
    box-shadow: var(--surface-shadow) !important;
    color: var(--text-primary);
}

.card-header,
.panel-heading {
    border-bottom: 1px solid var(--surface-border) !important;
    background: transparent !important;
    color: var(--text-title) !important;
    font-weight: 600;
}



/* ═══════════════════════════════════════════════════════════════
   2. SIDEBAR — Override couleurs legacy
   ═══════════════════════════════════════════════════════════════ */

/* Brand version badge */
.brand-version {
    background: rgba(16, 163, 127, 0.12) !important;
    color: #10b981 !important;
}

/* Toggle hover */
.sidebar-toggle:hover {
    background: rgba(16, 163, 127, 0.12) !important;
    color: #10b981 !important;
    border-color: rgba(16, 163, 127, 0.25) !important;
}

/* Menu item actif — Déjà menthe dans sidebar.css v4.0, renforcement */
.menu-item.active {
    background: rgba(16, 163, 127, 0.08) !important;
}

.menu-item.active::before {
    background: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 163, 127, 0.4) !important;
}

.menu-item.active .menu-icon {
    color: #10b981 !important;
    filter: drop-shadow(0 0 4px rgba(16, 163, 127, 0.35)) !important;
}

/* Menu badge */
.menu-badge {
    background: #10b981 !important;
}

/* Sidebar footer links hover */
.sidebar-footer .menu-item:hover .menu-icon,
.sidebar-footer a:hover {
    color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   3. HEADER ADMIN — Override couleurs
   ═══════════════════════════════════════════════════════════════ */

/* Header icon hover */
.header-icon:hover {
    background: #f5f5f5 !important;
    color: #1a1a1a !important;
}

/* Avatar admin — noir au lieu de gradient bleu */
.admin-header .user-avatar,
.admin-sidebar .user-avatar {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* Email avatar */
.email-avatar {
    background: #1a1a1a !important;
}

/* Dropdown links primary */
.dropdown-header a,
.dropdown-footer a {
    color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   4. BOUTONS — Style Bite (noir primary, menthe accent)
   ═══════════════════════════════════════════════════════════════ */

/* Boutons primary — Noir au lieu de gradient bleu */
/* NB: exclut .am-btn-save et .am-btn-primary (alert-manager) */
.btn-primary:not(.am-btn-primary):not(.am-btn-save),
.btn-save:not(.am-btn-save),
.btn-link-settings,
.empty-state__btn {
    background: #1a1a1a !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

.btn-primary:not(.am-btn-primary):not(.am-btn-save):hover,
.btn-save:not(.am-btn-save):hover,
.btn-link-settings:hover,
.empty-state__btn:hover {
    background: #333333 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Bouton success — Menthe */
.btn-success {
    background: #10b981 !important;
    border-color: #10b981 !important;
    border-radius: 8px !important;
}

.btn-success:hover {
    background: #24a876 !important;
}

/* Bouton outline/secondary */
.btn-outline,
.btn-secondary {
    background: #f5f5f5 !important;
    color: #666 !important;
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 8px !important;
}

.btn-outline:hover,
.btn-secondary:hover {
    background: #ebebeb !important;
    color: #1a1a1a !important;
    border-color: #d4d4d4 !important;
}


/* ═══════════════════════════════════════════════════════════════
   5. STAT CARDS — Override gradient primary
   ═══════════════════════════════════════════════════════════════ */

/* Icon box primary — noir au lieu de gradient bleu */
.stat-card-unified.primary .stat-icon-box,
.stat-icon-box.primary {
    background: #1a1a1a !important;
}

/* Hover border → menthe */
.stat-card-unified:hover {
    border-color: rgba(16, 163, 127, 0.25) !important;
}


/* ═══════════════════════════════════════════════════════════════
   6. CARDS DASHBOARD — Bordure et ombre Bite
   ═══════════════════════════════════════════════════════════════ */

/* Exclut les cards internes des previews theme et les sections alert-manager */
.dashboard-card:not(.preview-card):not(.adm-card),
.card:not(.preview-card):not(.adm-card):not(.am-stat-card):not(.am-check-card),
.panel:not(.am-panel) {
    border: 1px solid #e4e6ef !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    border-radius: 8px !important;
}

.dashboard-card:not(.preview-card):not(.adm-card):hover,
.card:not(.preview-card):not(.adm-card):not(.am-stat-card):not(.am-check-card):hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
    border-color: #ebebeb !important;
}

/* Card header title icon */
.dashboard-card-title i,
.card-title i,
.data-table-header__title i {
    color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   7. PAGINATION — Style Bite (noir actif)
   ═══════════════════════════════════════════════════════════════ */

.pagination a:hover {
    background: #1a1a1a !important;
    color: white !important;
    border-color: #1a1a1a !important;
}

.pagination span.current {
    background: #1a1a1a !important;
    color: white !important;
    font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
   8. DATA TABLE — Headers et badges
   ═══════════════════════════════════════════════════════════════ */

.data-table-header__count {
    background: rgba(16, 163, 127, 0.08) !important;
    color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   9. MODALES — Icônes et accents
   ═══════════════════════════════════════════════════════════════ */

.modal-title i {
    color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   10. FORMULAIRES — Focus et inputs style Bite
   ═══════════════════════════════════════════════════════════════ */

/* Focus state → noir au lieu de bleu */
/* Exclut input[type=color] et input[type=range] pour ne pas casser les pickers */
input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:not(.am-form-select):focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
.settings-input:focus,
.color-hex-input:focus {
    border-color: #1a1a1a !important;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.04) !important;
    outline: none !important;
}

/* Color picker hover */
.color-picker-wrapper:hover {
    border-color: #10b981 !important;
}

/* Toggle switch checked → menthe au lieu de gradient bleu */
.toggle-switch input:checked+.toggle-slider {
    background: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   11. THEME PAGE — Override couleurs header et accents
   ═══════════════════════════════════════════════════════════════ */

.theme-header-icon {
    background: #1a1a1a !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.theme-page-header::before {
    background: radial-gradient(circle, rgba(16, 163, 127, 0.12) 0%, transparent 70%) !important;
}

.theme-page-header::after {
    background: radial-gradient(circle, rgba(16, 163, 127, 0.08) 0%, transparent 70%) !important;
}

.theme-actions-info i {
    color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   12. SETTINGS — Override inputs et sections
   ═══════════════════════════════════════════════════════════════ */

.section-icon.primary {
    background: rgba(16, 163, 127, 0.08) !important;
    color: #10b981 !important;
}

/* Les .section-info h2 utilisent background-clip: text avec --section-color
   → ne pas forcer color: ici, sinon le dégradé animé est écrasé.
   Le dégradé est géré dans admin-forms-unified.css (premium-title-sweep) */
.color-section-title h3 {
    color: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════
   13. TABLES — Accent harmonisé
   ═══════════════════════════════════════════════════════════════ */

/* Table header sorting active */
table th .sort-active,
table th a.active {
    color: #10b981 !important;
}

/* Table row hover */
table tbody tr:hover {
    background: #fafafa !important;
}

/* Selected rows */
table tbody tr.selected {
    background: rgba(16, 163, 127, 0.04) !important;
}


/* ═══════════════════════════════════════════════════════════════
   14. TABS / ONGLETS — Style Bite
   ═══════════════════════════════════════════════════════════════ */

.tab-btn.active,
.tabs .tab.active,
.nav-tabs .nav-link.active {
    color: #1a1a1a !important;
    border-bottom-color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   15. BADGES ET PILLS
   ═══════════════════════════════════════════════════════════════ */

/* Badge primary → noir */
.badge-primary,
.badge.primary {
    background: #1a1a1a !important;
    color: white !important;
}

/* Badge success → menthe */
.badge-success,
.badge.success {
    background: rgba(16, 163, 127, 0.1) !important;
    color: #10b981 !important;
}

/* Pill primary */
.pill-primary {
    background: #1a1a1a !important;
    color: white !important;
    border-radius: 999px !important;
}


/* ═══════════════════════════════════════════════════════════════
   16. LINKS — Couleur Bite  
   ═══════════════════════════════════════════════════════════════ */

a[style*="color:#667eea"],
a[style*="color: #667eea"] {
    color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   17. GRADIENT HEADERS (Pages admin) — Noir/Gris subtil
   ═══════════════════════════════════════════════════════════════ */

/* Override les gradient-header globaux */
.gradient-header,
.page-gradient-header {
    background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

.gradient-header::before,
.page-gradient-header::before {
    background: radial-gradient(circle, rgba(16, 163, 127, 0.12) 0%, transparent 70%) !important;
}


/* ═══════════════════════════════════════════════════════════════
   18. CHARTS — Couleurs Bite
   ═══════════════════════════════════════════════════════════════ */

/* Chart.js legends et tooltips — handled via JS */


/* ═══════════════════════════════════════════════════════════════
   19. ALERTS — Harmonisation  
   ═══════════════════════════════════════════════════════════════ */

.alert-success {
    background: rgba(16, 163, 127, 0.06) !important;
    color: #059669 !important;
    border-left-color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   20. EMPTY STATES — Harmonisation
   ═══════════════════════════════════════════════════════════════ */

.empty-state__icon {
    color: #ccc !important;
}

.empty-state__title {
    color: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════
   21. LEAFLET ADMIN — Override couleurs
   ═══════════════════════════════════════════════════════════════ */

/* Search button on map */
.leaflet-control-search-btn,
.map-goto-search {
    background: #1a1a1a !important;
    border-radius: 8px !important;
}


/* ═══════════════════════════════════════════════════════════════
   22. USER DASHBOARD — Override couleurs
   ═══════════════════════════════════════════════════════════════ */

/* Mobile greeting card — gradient animé */
.mobile-greeting-card {
    background: linear-gradient(135deg, #0f172a, #134e4a, #1e3a5f, #0f172a) !important;
    background-size: 300% 300% !important;
    animation: heroGradientShift 12s ease infinite !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

@keyframes heroGradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Sidebar logo */
.sidebar-logo,
.profile-avatar {
    background: #1a1a1a !important;
}

/* Nav item active */
.nav-item.active {
    border-left-color: #10b981 !important;
}

.nav-item-badge {
    background: #10b981 !important;
}

/* Stat icon primary */
.stat-icon.primary {
    background: rgba(16, 163, 127, 0.08) !important;
    color: #10b981 !important;
}

/* List item icon */
.list-item-icon {
    background: #1a1a1a !important;
}

/* Quick action icons — gradient animé par item */
.quick-action-icon {
    background-size: 200% 200% !important;
    animation: qaBtnShift 8s ease infinite !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.quick-action-item:nth-child(1) .quick-action-icon {
    background: linear-gradient(135deg, #1e3a5f, #2563eb, #1e3a5f) !important;
    background-size: 200% 200% !important;
}

.quick-action-item:nth-child(2) .quick-action-icon {
    background: linear-gradient(135deg, #78350f, #d97706, #78350f) !important;
    background-size: 200% 200% !important;
}

.quick-action-item:nth-child(3) .quick-action-icon {
    background: linear-gradient(135deg, #3b1d6e, #7c3aed, #3b1d6e) !important;
    background-size: 200% 200% !important;
}

.quick-action-item:nth-child(4) .quick-action-icon {
    background: linear-gradient(135deg, #064e3b, #0d9488, #064e3b) !important;
    background-size: 200% 200% !important;
}

@keyframes qaBtnShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Header btn hover — scopé admin/pro uniquement */
.admin-main .header-btn:hover {
    background: #1a1a1a !important;
    color: white !important;
}

/* Card title icon */
.card-title i {
    color: #10b981 !important;
}

/* List item action hover */
.list-item-action:hover {
    color: #10b981 !important;
}

/* Link active hover */
.list-item-link:active {
    background: rgba(16, 163, 127, 0.04) !important;
}

/* Btn primary shadow */
.btn-primary:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
}


/* ═══════════════════════════════════════════════════════════════
   23. PRO DASHBOARD — Override couleurs
   ═══════════════════════════════════════════════════════════════ */

/* Pro sidebar — même pattern que admin */
.pro-sidebar .sidebar-logo,
.pro-sidebar .sidebar-brand-icon {
    background: #1a1a1a !important;
}

.pro-sidebar .menu-item.active {
    background: rgba(16, 163, 127, 0.08) !important;
}

.pro-sidebar .menu-item.active::before {
    background: #10b981 !important;
}

.pro-sidebar .menu-item.active .menu-icon {
    color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   24. WIZARD / OVERLAY CSS — Override inline couleurs
   ═══════════════════════════════════════════════════════════════ */

/* Type pill generic */
.type-pill {
    background: var(--pill-color, #1a1a1a) !important;
}


/* ═══════════════════════════════════════════════════════════════
   25. BULK ACTIONS — Override couleurs
   ═══════════════════════════════════════════════════════════════ */

.bulk-toolbar {
    background: #1a1a1a !important;
}

.bulk-count {
    background: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   26. CHECKBOX / RADIO — Accent menthe
   ═══════════════════════════════════════════════════════════════ */

input[type="checkbox"]:checked {
    accent-color: #10b981 !important;
}

input[type="radio"]:checked {
    accent-color: #10b981 !important;
}

/* Custom checkboxes */
.custom-checkbox:checked+label::before,
.custom-checkbox:checked+span::before {
    background: #10b981 !important;
    border-color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   27. PROGRESS BARS — Menthe
   ═══════════════════════════════════════════════════════════════ */

.progress-bar,
.progress-fill {
    background: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   28. TOOLTIPS — Style Bite
   ═══════════════════════════════════════════════════════════════ */

.tooltip,
[data-tooltip]::after {
    background: #1a1a1a !important;
    border-radius: 8px !important;
}


/* ═══════════════════════════════════════════════════════════════
   29. NOTIFICATION TOAST — Override
   ═══════════════════════════════════════════════════════════════ */

.toast.success,
.toast-success {
    border-left-color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   30. SELECTION / HIGHLIGHTS
   ═══════════════════════════════════════════════════════════════ */

::selection {
    background: rgba(16, 163, 127, 0.15);
    color: #1a1a1a;
}

::-moz-selection {
    background: rgba(16, 163, 127, 0.15);
    color: #1a1a1a;
}


/* ═══════════════════════════════════════════════════════════════
   31. SCROLLBAR — Style Bite subtil
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}


/* ═══════════════════════════════════════════════════════════════
   32. LOADING / SPINNERS — Menthe
   ═══════════════════════════════════════════════════════════════ */

.spinner,
.loader {
    border-top-color: #10b981 !important;
}

.loading-dots span {
    background: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   33. ICON BOXES — Override gradient pour les box admin
   ═══════════════════════════════════════════════════════════════ */

/* Toutes les icon-box avec gradient primary → noir */
.icon-box[style*="667eea"],
[style*="linear-gradient"][style*="667eea"] {
    background: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════
   34. DISTRIBUTORS LIST / MODERATION — Override
   ═══════════════════════════════════════════════════════════════ */

/* Action view buttons */
.action-btn.view,
.btn-view {
    color: #10b981 !important;
}

.action-btn.view:hover,
.btn-view:hover {
    background: rgba(16, 163, 127, 0.06) !important;
}


/* ═══════════════════════════════════════════════════════════════
   35. CSV IMPORT/EXPORT — Override accent
   ═══════════════════════════════════════════════════════════════ */

.import-header-icon,
.export-header-icon {
    background: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════
   36. PLUGINS PAGE — Override
   ═══════════════════════════════════════════════════════════════ */

.plugin-card .plugin-icon.active {
    border-color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   37. 404 PAGE — Override
   ═══════════════════════════════════════════════════════════════ */

.error-404 .error-code {
    color: #1a1a1a !important;
}

.error-404 .btn-home {
    background: #1a1a1a !important;
}


/* ═══════════════════════════════════════════════════════════════
   38. ANIMATIONS — Pulse menthe
   ═══════════════════════════════════════════════════════════════ */

@keyframes biteAccentPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 163, 127, 0.3);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(16, 163, 127, 0);
    }
}

/* Appliquer aux éléments qui avaient le pulse bleu */
.pulse-accent {
    animation: biteAccentPulse 2s infinite !important;
}


/* ═══════════════════════════════════════════════════════════════
   39. KPI SECTION — Override accents
   ═══════════════════════════════════════════════════════════════ */

.kpi-card.accent-purple {
    border-left-color: #10b981 !important;
}


/* ═══════════════════════════════════════════════════════════════
   40. RESPONSIVE MOBILE — Cohérence
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* Assurer la cohérence mobile */
    .btn-primary,
    .btn-save {
        border-radius: 8px !important;
    }

    /* Mobile bottom nav active */
    .mobile-nav-item.active {
        color: #10b981 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ████  DARK MODE OVERRIDES  ████
   Contre les couleurs light hardcodées ci-dessus
   Doit rester EN DERNIER dans le fichier pour la cascade
   ═══════════════════════════════════════════════════════════════ */

/* ── 3. Header icon hover ── */
[data-theme="dark"] .header-icon:hover {
    background: #252940 !important;
    color: #e4e6f0 !important;
}

/* ── Avatars ── */
[data-theme="dark"] .admin-header .user-avatar,
[data-theme="dark"] .admin-sidebar .user-avatar {
    background: #252940 !important;
    color: #e4e6f0 !important;
}

[data-theme="dark"] .email-avatar {
    background: #252940 !important;
}

/* ── 4. Boutons primary ── */
[data-theme="dark"] .btn-primary:not(.am-btn-primary):not(.am-btn-save),
[data-theme="dark"] .btn-save:not(.am-btn-save),
[data-theme="dark"] .btn-link-settings,
[data-theme="dark"] .empty-state__btn {
    background: #e4e6f0 !important;
    color: #0f1117 !important;
}

[data-theme="dark"] .btn-primary:not(.am-btn-primary):not(.am-btn-save):hover,
[data-theme="dark"] .btn-save:not(.am-btn-save):hover,
[data-theme="dark"] .btn-link-settings:hover,
[data-theme="dark"] .empty-state__btn:hover {
    background: #ffffff !important;
    color: #0f1117 !important;
    box-shadow: 0 4px 12px rgba(228, 230, 240, 0.15) !important;
}

/* ── Bouton outline/secondary ── */
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-secondary {
    background: #252940 !important;
    color: #a0a4b8 !important;
    border-color: #353a52 !important;
}

[data-theme="dark"] .btn-outline:hover,
[data-theme="dark"] .btn-secondary:hover {
    background: #2a2e42 !important;
    color: #e4e6f0 !important;
    border-color: #3e4360 !important;
}

/* ── 5. Stat cards ── */
[data-theme="dark"] .stat-card-unified.primary .stat-icon-box,
[data-theme="dark"] .stat-icon-box.primary {
    background: #252940 !important;
}

/* ── 6. Cards dashboard / bordure — palette dashboard premium ── */
[data-theme="dark"] .dashboard-card:not(.preview-card):not(.adm-card),
[data-theme="dark"] .card:not(.preview-card):not(.adm-card):not(.am-stat-card):not(.am-check-card),
[data-theme="dark"] .panel:not(.am-panel) {
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15) !important;
    background: #0f1923 !important;
}

[data-theme="dark"] .dashboard-card:not(.preview-card):not(.adm-card):hover,
[data-theme="dark"] .card:not(.preview-card):not(.adm-card):not(.am-stat-card):not(.am-check-card):hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── 7. Pagination ── */
[data-theme="dark"] .pagination a:hover {
    background: #e4e6f0 !important;
    color: #0f1117 !important;
    border-color: #e4e6f0 !important;
}

[data-theme="dark"] .pagination span.current {
    background: #e4e6f0 !important;
    color: #0f1117 !important;
}

/* ── 10. Formulaires focus ── */
[data-theme="dark"] input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:not(.am-form-select):focus,
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .settings-input:focus,
[data-theme="dark"] .color-hex-input:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 163, 127, 0.12) !important;
}

/* ── 12. Settings section titles ── */
[data-theme="dark"] .section-info h2,
[data-theme="dark"] .color-section-title h3 {
    color: #e4e6f0 !important;
}

/* ── 13. Tables row hover ── */
[data-theme="dark"] table tbody tr:hover {
    background: #1e2130 !important;
}

/* ── 14. Tabs active ── */
[data-theme="dark"] .tab-btn.active,
[data-theme="dark"] .tabs .tab.active,
[data-theme="dark"] .nav-tabs .nav-link.active {
    color: #10b981 !important;
}

/* ── 15. Badges ── */
[data-theme="dark"] .badge-primary,
[data-theme="dark"] .badge.primary {
    background: #e4e6f0 !important;
    color: #0f1117 !important;
}

[data-theme="dark"] .pill-primary {
    background: #e4e6f0 !important;
    color: #0f1117 !important;
}

/* ── 17. Gradient headers ── */
[data-theme="dark"] .gradient-header,
[data-theme="dark"] .page-gradient-header {
    background: linear-gradient(145deg, #1e2130 0%, #252940 100%) !important;
}

/* ── 20. Empty states ── */
[data-theme="dark"] .empty-state__icon {
    color: #353a52 !important;
}

[data-theme="dark"] .empty-state__title {
    color: #e4e6f0 !important;
}

/* ── 21. Leaflet admin search ── */
[data-theme="dark"] .leaflet-control-search-btn,
[data-theme="dark"] .map-goto-search {
    background: #252940 !important;
    color: #e4e6f0 !important;
}

/* ── 22. User / Pro dashboard ── */
[data-theme="dark"] .mobile-greeting-card {
    background: linear-gradient(135deg, #0a1628, #0f2f2a, #142240, #0a1628) !important;
    background-size: 300% 300% !important;
}

[data-theme="dark"] .sidebar-logo,
[data-theme="dark"] .profile-avatar {
    background: #252940 !important;
}

[data-theme="dark"] .list-item-icon {
    background: #252940 !important;
}

[data-theme="dark"] .quick-action-icon {
    background: #252940 !important;
}

[data-theme="dark"] .admin-main .header-btn:hover {
    background: #252940 !important;
    color: #e4e6f0 !important;
}

/* ── 23. Pro sidebar ── */
[data-theme="dark"] .pro-sidebar .sidebar-logo,
[data-theme="dark"] .pro-sidebar .sidebar-brand-icon {
    background: #252940 !important;
}

/* ── 25. Bulk actions ── */
[data-theme="dark"] .bulk-toolbar {
    background: #1e2130 !important;
    border-color: #2a2e42 !important;
}

/* ── 28. Tooltips ── */
[data-theme="dark"] .tooltip,
[data-theme="dark"] [data-tooltip]::after {
    background: #353a52 !important;
    color: #e4e6f0 !important;
}

/* ── 30. Selection ── */
[data-theme="dark"] ::selection {
    background: rgba(16, 163, 127, 0.2);
    color: #e4e6f0;
}

[data-theme="dark"] ::-moz-selection {
    background: rgba(16, 163, 127, 0.2);
    color: #e4e6f0;
}

/* ── 31. Scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #353a52;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3e4360;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1d27;
}

/* ── 33. Icon boxes / inline gradients ── */
[data-theme="dark"] .icon-box[style*="667eea"],
[data-theme="dark"] [style*="linear-gradient"][style*="667eea"] {
    background: #252940 !important;
}

/* ── 35. CSV Import/Export ── */
[data-theme="dark"] .import-header-icon,
[data-theme="dark"] .export-header-icon {
    background: #252940 !important;
    color: #e4e6f0 !important;
}

/* ── 37. 404 Page ── */
[data-theme="dark"] .error-404 .error-code {
    color: #e4e6f0 !important;
}

[data-theme="dark"] .error-404 .btn-home {
    background: #e4e6f0 !important;
    color: #0f1117 !important;
}