/* ==========================================================================
   FAMILLE ZIBLI ERP - MASTER DARK LUXURY GLASSMORPHISM THEME SYSTEM
   Harmonisation Universelle du Mode Sombre pour Toutes les Pages (60+ Modules)
   Inspiré de l'excellence visuelle de index.php (Dark Luxury Gold/Teal/Navy)
   ========================================================================== */

/* 1. VARIABLES & PALETTE LUXE DARK */
:root[data-theme="dark"],
body.dark-mode {
    --bg-main: #0b132b;
    --bg-surface: #0f172a;
    --bg-card: rgba(30, 41, 59, 0.75);
    --bg-card-hover: rgba(51, 65, 85, 0.85);
    --bg-input: rgba(15, 23, 42, 0.95);
    --border-luxury: rgba(255, 255, 255, 0.12);
    --border-luxury-hover: rgba(56, 189, 248, 0.4);
    --text-pure: #ffffff;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --accent-gold: #f59e0b;
    --accent-teal: #14b8a6;
    --accent-emerald: #10b981;
    --accent-blue: #38bdf8;
    --accent-rose: #f43f5e;
    --glass-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --glass-shadow-hover: 0 20px 35px -5px rgba(0, 0, 0, 0.7), 0 10px 15px -5px rgba(0, 0, 0, 0.5);
}

/* 2. BODY, WRAPPER & CONTENEURS PRINCIPAUX */
:root[data-theme="dark"],
html.dark-mode,
body.dark-mode {
    background-color: #0b132b !important;
    background-image: radial-gradient(at 15% 15%, rgba(13, 148, 136, 0.08) 0px, transparent 50%),
                      radial-gradient(at 85% 85%, rgba(37, 99, 235, 0.08) 0px, transparent 50%) !important;
    background-attachment: fixed !important;
    color: #f8fafc !important;
}

:root[data-theme="dark"] .wrapper,
:root[data-theme="dark"] .main-content-wrapper,
:root[data-theme="dark"] .container,
:root[data-theme="dark"] .container-fluid,
:root[data-theme="dark"] .content-limited,
:root[data-theme="dark"] .cockpit-container,
:root[data-theme="dark"] .content-wrapper,
:root[data-theme="dark"] main,
html.dark-mode .wrapper,
html.dark-mode .main-content-wrapper,
html.dark-mode .container,
html.dark-mode .content-limited,
body.dark-mode .wrapper,
body.dark-mode .main-content-wrapper,
body.dark-mode .container,
body.dark-mode .container-fluid,
body.dark-mode .content-limited,
body.dark-mode .cockpit-container,
body.dark-mode .content-wrapper,
body.dark-mode main {
    background-color: transparent !important;
    color: #f8fafc !important;
}

/* 3. PAGE HEADERS & HERO BANNERS UNIFIÉS */
:root[data-theme="dark"] .page-header-premium,
:root[data-theme="dark"] .page-header,
:root[data-theme="dark"] .hero-cockpit,
:root[data-theme="dark"] .header-section,
body.dark-mode .page-header-premium,
body.dark-mode .page-header,
body.dark-mode .hero-cockpit,
body.dark-mode .header-section {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.12) 0%, rgba(13, 148, 136, 0.12) 50%, rgba(37, 99, 235, 0.08) 100%), #0f172a !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    color: #f8fafc !important;
}

:root[data-theme="dark"] .page-header-premium h1,
:root[data-theme="dark"] .page-header h1,
:root[data-theme="dark"] .page-header-text h1,
:root[data-theme="dark"] .hero-title-group h1,
body.dark-mode .page-header-premium h1,
body.dark-mode .page-header h1,
body.dark-mode .page-header-text h1,
body.dark-mode .hero-title-group h1 {
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3) !important;
}

:root[data-theme="dark"] .page-header-premium p,
:root[data-theme="dark"] .page-header p,
:root[data-theme="dark"] .page-header-text p,
:root[data-theme="dark"] .page-subtitle,
:root[data-theme="dark"] .hero-title-group p,
body.dark-mode .page-header-premium p,
body.dark-mode .page-header p,
body.dark-mode .page-header-text p,
body.dark-mode .page-subtitle,
body.dark-mode .hero-title-group p {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

:root[data-theme="dark"] .page-header-icon,
body.dark-mode .page-header-icon {
    background: rgba(20, 184, 166, 0.2) !important;
    color: #14b8a6 !important;
    border: 1px solid rgba(20, 184, 166, 0.4) !important;
}

/* 4. CARTES, BENTO ITEMS, SECTIONS & BLOCS DE GESTION */
/* 4. CARTES, BENTO ITEMS, SECTIONS & BLOCS DE GESTION UNIFIÉS (TRANSLUCIDES & VERRE) */
:root[data-theme="dark"] .bento-item,
:root[data-theme="dark"] .bento-site-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-modern,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .nav-card,
:root[data-theme="dark"] .chart-card,
:root[data-theme="dark"] .finance-card-kpi,
:root[data-theme="dark"] .bento-breakdown-card,
:root[data-theme="dark"] .pole-hub-card,
:root[data-theme="dark"] .activity-box,
:root[data-theme="dark"] .info-box-premium,
:root[data-theme="dark"] .summary-card,
:root[data-theme="dark"] .notification-card,
:root[data-theme="dark"] .filter-box,
:root[data-theme="dark"] .filter-row,
:root[data-theme="dark"] .filter-section,
:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .widget,
:root[data-theme="dark"] .section,
:root[data-theme="dark"] .section.animate-slide-up,
:root[data-theme="dark"] .rapport-card,
:root[data-theme="dark"] .locataire-card,
:root[data-theme="dark"] .employe-card,
:root[data-theme="dark"] .caisse-card,
:root[data-theme="dark"] .casier-card,
body.dark-mode .bento-item,
body.dark-mode .bento-site-card,
body.dark-mode .card,
body.dark-mode .card-modern,
body.dark-mode .stat-card,
body.dark-mode .nav-card,
body.dark-mode .chart-card,
body.dark-mode .finance-card-kpi,
body.dark-mode .bento-breakdown-card,
body.dark-mode .pole-hub-card,
body.dark-mode .activity-box,
body.dark-mode .info-box-premium,
body.dark-mode .summary-card,
body.dark-mode .notification-card,
body.dark-mode .filter-box,
body.dark-mode .filter-row,
body.dark-mode .filter-section,
body.dark-mode .search-box,
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .widget,
body.dark-mode .section,
body.dark-mode .section.animate-slide-up,
body.dark-mode .rapport-card,
body.dark-mode .locataire-card,
body.dark-mode .employe-card,
body.dark-mode .caisse-card,
body.dark-mode .casier-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

body.dark-mode .bento-item:hover,
body.dark-mode .bento-site-card:hover,
body.dark-mode .card:hover,
body.dark-mode .stat-card:hover,
body.dark-mode .finance-card-kpi:hover,
body.dark-mode .notification-card:hover,
body.dark-mode .action-card:hover,
body.dark-mode .rapport-card:hover,
body.dark-mode .locataire-card:hover,
body.dark-mode .employe-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.25) !important;
    transform: translateY(-3px) !important;
}

/* En-têtes de Conteneurs & Sections Translucides Colorés */
body.dark-mode .card-header,
body.dark-mode .section-header,
body.dark-mode .bento-item-header,
body.dark-mode .panel-heading,
body.dark-mode .box-header,
body.dark-mode .table-premium-header,
body.dark-mode .filters-header,
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .section-header,
:root[data-theme="dark"] .bento-item-header,
:root[data-theme="dark"] .panel-heading,
:root[data-theme="dark"] .box-header,
:root[data-theme="dark"] .table-premium-header,
:root[data-theme="dark"] .filters-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(56, 189, 248, 0.06) 100%), rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    padding: 1rem 1.25rem !important;
}

/* Boutons d'actions rapides sous forme de cartes carrées (Restaurant & Maquis) */
body.dark-mode .action-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .action-card span {
    color: #ffffff !important;
}

/* Bento & Site Cards */
body.dark-mode .bento-site-card .bento-item-body {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

body.dark-mode .bento-site-card h4 {
    color: #ffffff !important;
    font-weight: 800;
}

body.dark-mode .bento-site-card .stat-row,
body.dark-mode .dashboard-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .bento-site-card .stat-label,
body.dark-mode .bento-item-label,
body.dark-mode .stat-label,
body.dark-mode .kpi-label {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
    font-weight: 600;
}

body.dark-mode .mk-cat-n {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
}

body.dark-mode .mk-cat-v {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.dark-mode .bento-item-sub,
body.dark-mode .stat-sub,
body.dark-mode .kpi-sub-text,
body.dark-mode .notification-message,
body.dark-mode .notification-date {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

body.dark-mode .bento-item-value,
body.dark-mode .stat-value,
body.dark-mode .kpi-main-val {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Badges de classement (Rank Badges) */
body.dark-mode .rank-badge.r1 {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
body.dark-mode .rank-badge.r2 {
    background: rgba(148, 163, 184, 0.2) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
}
body.dark-mode .rank-badge.r3 {
    background: rgba(217, 119, 6, 0.2) !important;
    color: #fb923c !important;
    border: 1px solid rgba(217, 119, 6, 0.3) !important;
}
body.dark-mode .rank-badge.rN {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .mk-cat-bar {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Neutralisation et adaptation des bannières à style inline legacy */
body.dark-mode div[style*="#fef2f2"],
body.dark-mode div[style*="fef2f2"],
body.dark-mode div[style*="rgb(254, 242, 242)"] {
    background: rgba(220, 38, 38, 0.18) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5 !important;
}

body.dark-mode div[style*="#fef2f2"] span,
body.dark-mode div[style*="fef2f2"] span,
body.dark-mode div[style*="rgb(254, 242, 242)"] span {
    color: #cbd5e1 !important;
}

body.dark-mode div[style*="#dcfce7"],
body.dark-mode div[style*="dcfce7"],
body.dark-mode div[style*="#f0fdf4"],
body.dark-mode div[style*="rgb(220, 252, 231)"] {
    background: rgba(16, 185, 129, 0.18) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #6ee7b7 !important;
}

body.dark-mode div[style*="#dcfce7"] span,
body.dark-mode div[style*="dcfce7"] span {
    color: #cbd5e1 !important;
}

/* 5. TYPOGRAPHIE & TITRES */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title h3,
body.dark-mode .card-title,
body.dark-mode .notification-title,
body.dark-mode .result-title,
body.dark-mode .card-header h3,
body.dark-mode .card-header-modern h3,
body.dark-mode .card-header h4 {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

body.dark-mode .section-title,
:root[data-theme="dark"] .section-title {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

body.dark-mode .text-muted,
body.dark-mode small.text-muted {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* 6. TABLEAUX & GRILLES DE DONNÉES */
body.dark-mode table,
body.dark-mode .table,
body.dark-mode .data-table,
body.dark-mode .table-responsive {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

body.dark-mode table thead,
body.dark-mode .table thead,
body.dark-mode .data-table thead,
body.dark-mode table thead th,
body.dark-mode .table thead th,
body.dark-mode .data-table thead th {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #f8fafc !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px !important;
}

body.dark-mode table tbody tr,
body.dark-mode .table tbody tr,
body.dark-mode .data-table tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    transition: background 0.2s ease !important;
}

body.dark-mode table tbody tr:hover,
body.dark-mode .table tbody tr:hover,
body.dark-mode .data-table tbody tr:hover {
    background: rgba(51, 65, 85, 0.6) !important;
    color: #ffffff !important;
}

body.dark-mode table tbody td,
body.dark-mode .table tbody td,
body.dark-mode .data-table tbody td {
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode table tfoot,
body.dark-mode .table tfoot,
body.dark-mode table tfoot th,
body.dark-mode table tfoot td {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #f8fafc !important;
    border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .table-responsive::after,
:root[data-theme="dark"] .table-responsive::after {
    background: rgba(30, 41, 59, 0.75) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 7. FORMULAIRES, CHAMPS & FILTRES */
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="date"],
body.dark-mode input[type="month"],
body.dark-mode input[type="tel"],
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #f8fafc !important;
    border-radius: 10px !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background: rgba(15, 23, 42, 1) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
    color: #ffffff !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .form-label,
body.dark-mode label {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

/* 8. ALERTES, BADGES & NOTIFICATIONS */
body.dark-mode .alert {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 14px !important;
    color: #f8fafc !important;
}

body.dark-mode .alert-info {
    background: rgba(37, 99, 235, 0.2) !important;
    border: 1px solid rgba(37, 99, 235, 0.4) !important;
    color: #93c5fd !important;
}

body.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}

body.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #fde68a !important;
}

body.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

body.dark-mode .badge-secondary,
body.dark-mode .badge-light {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* 9. BOUTONS & ACTIONS */
body.dark-mode .btn-secondary {
    background: rgba(51, 65, 85, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

body.dark-mode .btn-secondary:hover {
    background: rgba(71, 85, 105, 1) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    color: #ffffff !important;
}

body.dark-mode .btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #f8fafc !important;
    background: transparent !important;
}

body.dark-mode .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
}

/* 10. MODALES & POPUPS */
body.dark-mode .modal-content,
body.dark-mode .modal-box,
body.dark-mode .popup-content {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
    color: #f8fafc !important;
}

body.dark-mode .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .modal-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 11. FOOTER & BAS DE PAGE */
body.dark-mode footer,
body.dark-mode .footer {
    background: #060d1f !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

/* 12. COMPOSANTS PREMIUM - FINANCE GLOBALE & RAPPORTS UNIFIÉS (TRANSLUCIDES) */
body.dark-mode .table-premium-container,
body.dark-mode .filters-premium,
body.dark-mode .tabs-premium,
body.dark-mode .caisse-card,
body.dark-mode .stat-premium-card,
:root[data-theme="dark"] .table-premium-container,
:root[data-theme="dark"] .filters-premium,
:root[data-theme="dark"] .tabs-premium,
:root[data-theme="dark"] .caisse-card,
:root[data-theme="dark"] .stat-premium-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

body.dark-mode .table-premium-header,
body.dark-mode .filters-header,
body.dark-mode .card-header,
:root[data-theme="dark"] .table-premium-header,
:root[data-theme="dark"] .filters-header,
:root[data-theme="dark"] .card-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(56, 189, 248, 0.06) 100%), rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

body.dark-mode .table-premium,
:root[data-theme="dark"] .table-premium {
    width: 100%;
    color: #f8fafc !important;
}

body.dark-mode .table-premium td,
body.dark-mode .table-premium th,
:root[data-theme="dark"] .table-premium td,
:root[data-theme="dark"] .table-premium th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

body.dark-mode .tab-premium,
:root[data-theme="dark"] .tab-premium {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

body.dark-mode .tab-premium:hover,
:root[data-theme="dark"] .tab-premium:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #ffffff !important;
}

body.dark-mode .tab-premium.tab-active {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.35) 0%, rgba(37, 99, 235, 0.25) 100%), #1e293b !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.25) !important;
}

body.dark-mode .stat-premium-blue {
    border-left: 4px solid #38bdf8 !important;
}

body.dark-mode .stat-premium-orange {
    border-left: 4px solid #f59e0b !important;
}

body.dark-mode .stat-premium-green {
    border-left: 4px solid #10b981 !important;
}

body.dark-mode .stat-premium-danger {
    border-left: 4px solid #ef4444 !important;
}

body.dark-mode .stat-premium-label {
    color: #94a3b8 !important;
}

body.dark-mode .stat-premium-value {
    color: #ffffff !important;
}

body.dark-mode .stat-premium-sub {
    color: #cbd5e1 !important;
}

/* 13. CAISSE & GESTION DES REÇUS */
body.dark-mode .caisse-info,
body.dark-mode .summary {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #f8fafc !important;
}

body.dark-mode .summary-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

body.dark-mode .summary-total {
    border-top: 2px solid rgba(56, 189, 248, 0.4) !important;
    color: #38bdf8 !important;
}

/* 14. ACCORDÉONS & MATRICE DES PERMISSIONS */
body.dark-mode .accordion-item,
body.dark-mode .role-permission-card {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    border-radius: 12px !important;
}

body.dark-mode .accordion-button {
    background: rgba(15, 23, 42, 0.9) !important;
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .accordion-button:not(.collapsed) {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #38bdf8 !important;
}

body.dark-mode .accordion-body {
    background: transparent !important;
    color: #cbd5e1 !important;
}

/* 15. NEUTRALISATION UNIVERSELLE DES INLINE STYLES CLAIRS (TABLES, ROWS, TOTAUX) */
body.dark-mode tr[style*="background"],
body.dark-mode tr[style*="f8f9fa"],
body.dark-mode tr[style*="fff5f5"],
body.dark-mode tr[style*="f9fafb"],
body.dark-mode tr[style*="f5f5f5"],
body.dark-mode tr[style*="white"],
body.dark-mode tr[style*="rgb(248, 249, 250)"],
body.dark-mode tr[style*="rgb(255, 245, 245)"] {
    background: rgba(15, 23, 42, 0.9) !important;
    color: #f8fafc !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background:white"],
body.dark-mode div[style*="background: #fff"],
body.dark-mode div[style*="background:#fff"],
body.dark-mode div[style*="background-color: white"],
body.dark-mode div[style*="background-color: rgb(255, 255, 255)"],
body.dark-mode div[style*="background: #ffffff"],
body.dark-mode div[style*="background:#ffffff"] {
    background: rgba(30, 41, 59, 0.85) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

body.dark-mode .card,
body.dark-mode .card-body,
body.dark-mode .card-footer {
    background: transparent !important;
    color: #f8fafc !important;
}

body.dark-mode .card {
    background: rgba(30, 41, 59, 0.8) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
}

body.dark-mode .card-header {
    background: rgba(15, 23, 42, 0.7) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px 16px 0 0 !important;
}

/* 16. SYNCHRONISATION & LOGS DE SYNC */
body.dark-mode .sync-dashboard,
body.dark-mode .sync-container,
body.dark-mode .sync-card,
body.dark-mode .chart-card,
body.dark-mode .table-card,
body.dark-mode .log-card,
body.dark-mode .stat-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

body.dark-mode .stat-card .title,
body.dark-mode .stat-card .value,
body.dark-mode .sync-card h3,
body.dark-mode .chart-card h3 {
    color: #f8fafc !important;
}

body.dark-mode .comparison-table,
body.dark-mode .sync-table {
    color: #f8fafc !important;
}

body.dark-mode .comparison-table th,
body.dark-mode .sync-table th {
    background: rgba(15, 23, 42, 0.95) !important;
    color: #38bdf8 !important;
}

body.dark-mode .comparison-table td,
body.dark-mode .sync-table td {
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 17. MATÉRIEL & INVENTAIRES */
body.dark-mode .materiel-container,
body.dark-mode .materiel-card,
body.dark-mode .inventaire-card,
body.dark-mode .item-card,
body.dark-mode .form-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* 18. IMMOBILIER & RAPPORTS LOCATAIRES */
body.dark-mode .site-card,
body.dark-mode .immob-card,
body.dark-mode .kpi-immob,
body.dark-mode .immob-summary {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* 19. DETTES FOURNISSEURS */
body.dark-mode .dettes-container,
body.dark-mode .dette-card,
body.dark-mode .fournisseur-card,
body.dark-mode .dettes-table-container {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* 20. CAISSE : TRANSFERTS, CLÔTURES, BILLETAGE */
body.dark-mode .transfert-card,
body.dark-mode .cloture-card,
body.dark-mode .billetage-container,
body.dark-mode .billetage-row,
body.dark-mode .caisse-summary-box {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* 21. CENTRES EXPORTS & IMPRESSIONS */
body.dark-mode .export-card,
body.dark-mode .export-section,
body.dark-mode .print-container,
body.dark-mode .print-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* 22. NEUTRALISATION ULTRA-STRICTE DE TOUS LES CONTENEURS CLAIRS */
body.dark-mode [class*="container"]:not(.container-fluid),
body.dark-mode [class*="section"]:not(.section-header),
body.dark-mode [class*="box"]:not(.alert-box),
body.dark-mode [class*="card"]:not(.btn) {
    background-color: rgba(30, 41, 59, 0.85);
    color: #f8fafc;
}

/* 23. RÔLES & PERMISSIONS */
body.dark-mode .permissions-container,
body.dark-mode .manage-permissions-container {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

body.dark-mode .stat-card-premium-permissions,
body.dark-mode .stat-card-premium {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .role-card-permissions,
body.dark-mode .section-card-permissions,
body.dark-mode .category-section {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .permissions-category-accordion {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .permissions-category-header-permissions {
    background: rgba(30, 41, 59, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .permissions-category-content-permissions {
    background: rgba(15, 23, 42, 0.9) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .users-table-container-permissions {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .admin-nav-item-permissions,
body.dark-mode .admin-nav-item {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

/* 24. MODULE CAISSE & TRÉSORERIE */
body.dark-mode .content-card,
body.dark-mode .caisse-card,
:root[data-theme="dark"] .content-card,
:root[data-theme="dark"] .caisse-card {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    color: #f8fafc !important;
}

body.dark-mode .content-card .card-header,
:root[data-theme="dark"] .content-card .card-header {
    background: rgba(30, 41, 59, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

body.dark-mode .stat-item,
:root[data-theme="dark"] .stat-item {
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    color: #f8fafc !important;
}

body.dark-mode .stat-item .stat-label,
:root[data-theme="dark"] .stat-item .stat-label {
    color: #94a3b8 !important;
}

body.dark-mode .stat-item .stat-value,
:root[data-theme="dark"] .stat-item .stat-value {
    color: #f8fafc !important;
}

body.dark-mode .empty-state-center,
body.dark-mode .empty-state,
:root[data-theme="dark"] .empty-state-center,
:root[data-theme="dark"] .empty-state {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border: 2px dashed rgba(255, 255, 255, 0.15) !important;
    color: #94a3b8 !important;
}

body.dark-mode .data-table,
:root[data-theme="dark"] .data-table {
    color: #cbd5e1 !important;
}

body.dark-mode .data-table th,
:root[data-theme="dark"] .data-table th {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #38bdf8 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode .data-table td,
:root[data-theme="dark"] .data-table td {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .data-table tbody tr:hover,
:root[data-theme="dark"] .data-table tbody tr:hover {
    background: rgba(51, 65, 85, 0.4) !important;
}

body.dark-mode .form-group label,
:root[data-theme="dark"] .form-group label {
    color: #cbd5e1 !important;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea,
:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group select,
:root[data-theme="dark"] .form-group textarea {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

body.dark-mode .type-badge.entree,
:root[data-theme="dark"] .type-badge.entree {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

body.dark-mode .type-badge.sortie,
:root[data-theme="dark"] .type-badge.sortie {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

body.dark-mode .type-badge.transfert,
:root[data-theme="dark"] .type-badge.transfert {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* 25. MODULE LOYERS & GESTION IMMOBILIÈRE */
body.dark-mode .stat-premium-card,
:root[data-theme="dark"] .stat-premium-card {
    background: rgba(15, 23, 42, 0.85) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6) !important;
    color: #f8fafc !important;
}

body.dark-mode .stat-premium-card:hover,
:root[data-theme="dark"] .stat-premium-card:hover {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    transform: translateY(-4px) !important;
}

body.dark-mode .stat-premium-card .stat-premium-label,
:root[data-theme="dark"] .stat-premium-card .stat-premium-label {
    color: #94a3b8 !important;
}

body.dark-mode .stat-premium-card .stat-premium-value,
:root[data-theme="dark"] .stat-premium-card .stat-premium-value {
    color: #ffffff !important;
}

body.dark-mode .stat-premium-card.stat-premium-blue,
:root[data-theme="dark"] .stat-premium-card.stat-premium-blue {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

body.dark-mode .stat-premium-card.stat-premium-purple,
:root[data-theme="dark"] .stat-premium-card.stat-premium-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

body.dark-mode .stat-premium-card.stat-premium-green,
:root[data-theme="dark"] .stat-premium-card.stat-premium-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

body.dark-mode .stat-premium-card.stat-premium-pink,
:root[data-theme="dark"] .stat-premium-card.stat-premium-pink {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border-color: rgba(236, 72, 153, 0.3) !important;
}

body.dark-mode .card-site,
body.dark-mode .card-locataire,
body.dark-mode .contrat-card,
body.dark-mode .litige-card,
body.dark-mode .travaux-card,
:root[data-theme="dark"] .card-site,
:root[data-theme="dark"] .card-locataire,
:root[data-theme="dark"] .contrat-card,
:root[data-theme="dark"] .litige-card,
:root[data-theme="dark"] .travaux-card {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    color: #f8fafc !important;
}

body.dark-mode .loyers-tab-btn,
body.dark-mode .site-tab-btn,
:root[data-theme="dark"] .loyers-tab-btn,
:root[data-theme="dark"] .site-tab-btn {
    background: rgba(30, 41, 59, 0.8) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .loyers-tab-btn.active,
body.dark-mode .site-tab-btn.active,
:root[data-theme="dark"] .loyers-tab-btn.active,
:root[data-theme="dark"] .site-tab-btn.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

/* ==========================================================================
   26. MODULE RESTAURANT, RECETTES, VENTES & STOCKS
   ========================================================================== */
body.dark-mode .card-plat,
body.dark-mode .plat-card,
body.dark-mode .recipe-card,
body.dark-mode .recette-card,
body.dark-mode .marche-card,
body.dark-mode .ingredient-card,
body.dark-mode .stock-card,
body.dark-mode .point-cuisine-card,
body.dark-mode .table-card,
body.dark-mode .pos-card,
:root[data-theme="dark"] .card-plat,
:root[data-theme="dark"] .plat-card,
:root[data-theme="dark"] .recipe-card,
:root[data-theme="dark"] .recette-card,
:root[data-theme="dark"] .marche-card,
:root[data-theme="dark"] .ingredient-card,
:root[data-theme="dark"] .stock-card,
:root[data-theme="dark"] .point-cuisine-card,
:root[data-theme="dark"] .table-card,
:root[data-theme="dark"] .pos-card {
    background: rgba(15, 23, 42, 0.85) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .plat-card:hover,
body.dark-mode .table-card:hover,
body.dark-mode .recipe-card:hover,
:root[data-theme="dark"] .plat-card:hover,
:root[data-theme="dark"] .table-card:hover,
:root[data-theme="dark"] .recipe-card:hover {
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.15) !important;
    transform: translateY(-3px);
}

body.dark-mode .pos-container,
body.dark-mode .pos-sidebar,
body.dark-mode .pos-cart,
:root[data-theme="dark"] .pos-container,
:root[data-theme="dark"] .pos-sidebar,
:root[data-theme="dark"] .pos-cart {
    background: rgba(10, 17, 34, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

body.dark-mode .pos-item-btn,
body.dark-mode .category-pill,
:root[data-theme="dark"] .pos-item-btn,
:root[data-theme="dark"] .category-pill {
    background: rgba(30, 41, 59, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

body.dark-mode .category-pill.active,
body.dark-mode .category-pill:hover,
:root[data-theme="dark"] .category-pill.active,
:root[data-theme="dark"] .category-pill:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
}

body.dark-mode .table-plan-zone,
body.dark-mode .grid-tables,
:root[data-theme="dark"] .table-plan-zone,
:root[data-theme="dark"] .grid-tables {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
}

body.dark-mode .table-item.libre,
:root[data-theme="dark"] .table-item.libre {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
}

body.dark-mode .table-item.occupee,
:root[data-theme="dark"] .table-item.occupee {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

body.dark-mode .table-item.reservee,
:root[data-theme="dark"] .table-item.reservee {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #fbbf24 !important;
}

/* ==========================================================================
   27. MODULE 🍺 MAQUIS, BOISSONS, STOCK CASIERS & CAISSE POS
   ========================================================================== */

/* Cartes, Sections et Conteneurs Maquis */
body.dark-mode .marques-container,
body.dark-mode .section-card,
body.dark-mode .alerte-legend,
body.dark-mode .marques-table-card,
:root[data-theme="dark"] .marques-container,
:root[data-theme="dark"] .section-card,
:root[data-theme="dark"] .alerte-legend,
:root[data-theme="dark"] .marques-table-card {
    background: rgba(15, 23, 42, 0.85) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

/* Dashboard Maquis Actions, Badges & Listes */
body.dark-mode .action-card,
:root[data-theme="dark"] .action-card {
    background: rgba(30, 41, 59, 0.75) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .action-card:hover,
:root[data-theme="dark"] .action-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 158, 11, 0.25) !important;
    background: rgba(45, 55, 72, 0.95) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    color: #ffffff !important;
}

body.dark-mode .dashboard-list-item,
:root[data-theme="dark"] .dashboard-list-item {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #f8fafc !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .dashboard-list-item:hover,
:root[data-theme="dark"] .dashboard-list-item:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

body.dark-mode .mk-cat-row,
:root[data-theme="dark"] .mk-cat-row {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
}

body.dark-mode .mk-thumb-box,
:root[data-theme="dark"] .mk-thumb-box {
    background: rgba(15, 23, 42, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .table-res-mensuel,
:root[data-theme="dark"] .table-res-mensuel {
    color: #f8fafc !important;
}

body.dark-mode .table-res-mensuel td,
:root[data-theme="dark"] .table-res-mensuel td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .table-res-mensuel .row-ca,
:root[data-theme="dark"] .table-res-mensuel .row-ca {
    background: rgba(16, 185, 129, 0.16) !important;
}

body.dark-mode .table-res-mensuel .row-brut,
:root[data-theme="dark"] .table-res-mensuel .row-brut {
    background: rgba(13, 148, 136, 0.16) !important;
}

body.dark-mode .table-res-mensuel .row-charges-title,
:root[data-theme="dark"] .table-res-mensuel .row-charges-title {
    background: rgba(30, 41, 59, 0.85) !important;
    color: #f1f5f9 !important;
}

body.dark-mode .table-res-mensuel .row-total-charges,
:root[data-theme="dark"] .table-res-mensuel .row-total-charges {
    background: rgba(239, 68, 68, 0.16) !important;
}

body.dark-mode .table-res-mensuel .row-net.net-pos,
:root[data-theme="dark"] .table-res-mensuel .row-net.net-pos {
    background: rgba(16, 185, 129, 0.22) !important;
}

body.dark-mode .table-res-mensuel .row-net.net-neg,
:root[data-theme="dark"] .table-res-mensuel .row-net.net-neg {
    background: rgba(239, 68, 68, 0.22) !important;
}

body.dark-mode .caisse-banner-open,
:root[data-theme="dark"] .caisse-banner-open {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(5, 150, 105, 0.26)) !important;
    border: 1.5px solid rgba(52, 211, 153, 0.55) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(16, 185, 129, 0.2) !important;
}

body.dark-mode .caisse-banner-open .banner-title,
:root[data-theme="dark"] .caisse-banner-open .banner-title {
    color: #4ade80 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 14px rgba(74, 222, 128, 0.4) !important;
}

body.dark-mode .caisse-banner-open .banner-subtitle,
:root[data-theme="dark"] .caisse-banner-open .banner-subtitle {
    color: #f1f5f9 !important;
    background: rgba(16, 185, 129, 0.25) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    font-weight: 600 !important;
}

body.dark-mode .caisse-banner-closed,
:root[data-theme="dark"] .caisse-banner-closed {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(185, 28, 28, 0.28)) !important;
    border: 1.5px solid rgba(248, 113, 113, 0.55) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(239, 68, 68, 0.2) !important;
}

body.dark-mode .caisse-banner-closed .banner-title,
:root[data-theme="dark"] .caisse-banner-closed .banner-title {
    color: #fca5a5 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 14px rgba(252, 165, 165, 0.4) !important;
}

body.dark-mode .caisse-banner-closed .banner-subtitle,
:root[data-theme="dark"] .caisse-banner-closed .banner-subtitle {
    color: #ffffff !important;
    background: rgba(239, 68, 68, 0.3) !important;
    border: 1px solid rgba(248, 113, 113, 0.45) !important;
    font-weight: 700 !important;
}

/* KPI Cards Maquis */
body.dark-mode .kpi-card,
:root[data-theme="dark"] .kpi-card {
    background: rgba(15, 23, 42, 0.8) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .kpi-info h3,
:root[data-theme="dark"] .kpi-info h3 {
    color: #e2e8f0 !important;
}

body.dark-mode .kpi-info .kpi-value,
:root[data-theme="dark"] .kpi-info .kpi-value {
    color: #f8fafc !important;
}

/* Catégories Produits Maquis */
body.dark-mode .cat-card,
:root[data-theme="dark"] .cat-card {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .cat-card:hover,
:root[data-theme="dark"] .cat-card:hover {
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 15px 35px rgba(56, 189, 248, 0.15) !important;
}

body.dark-mode .cat-name span,
:root[data-theme="dark"] .cat-name span {
    color: #f8fafc !important;
}

body.dark-mode .cat-stats-box,
:root[data-theme="dark"] .cat-stats-box {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .cat-stats-label,
:root[data-theme="dark"] .cat-stats-label {
    color: #cbd5e1 !important;
}

body.dark-mode .cat-stats-value,
:root[data-theme="dark"] .cat-stats-value {
    color: #38bdf8 !important;
}

body.dark-mode .cat-card-actions,
:root[data-theme="dark"] .cat-card-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Conditionnements & Packs */
body.dark-mode .pack-fmt,
:root[data-theme="dark"] .pack-fmt {
    color: #fca5a5 !important;
    -webkit-text-fill-color: #fca5a5 !important;
}

/* Badges de mode de paiement Maquis */
body.dark-mode .badge-payment-especes,
:root[data-theme="dark"] .badge-payment-especes {
    background: rgba(16, 185, 129, 0.22) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.45) !important;
}

body.dark-mode .badge-payment-wave,
:root[data-theme="dark"] .badge-payment-wave {
    background: rgba(14, 165, 233, 0.22) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
}

body.dark-mode .badge-payment-om,
body.dark-mode .badge-payment-orange,
:root[data-theme="dark"] .badge-payment-om,
:root[data-theme="dark"] .badge-payment-orange {
    background: rgba(249, 115, 22, 0.22) !important;
    color: #fb923c !important;
    border: 1px solid rgba(251, 146, 60, 0.45) !important;
}

body.dark-mode .badge-payment-momo,
body.dark-mode .badge-payment-mtn,
:root[data-theme="dark"] .badge-payment-momo,
:root[data-theme="dark"] .badge-payment-mtn {
    background: rgba(234, 179, 8, 0.22) !important;
    color: #facc15 !important;
    border: 1px solid rgba(250, 204, 21, 0.45) !important;
}

body.dark-mode .badge-payment-carte,
body.dark-mode .badge-payment-cb,
:root[data-theme="dark"] .badge-payment-carte,
:root[data-theme="dark"] .badge-payment-cb {
    background: rgba(168, 85, 247, 0.22) !important;
    color: #c084fc !important;
    border: 1px solid rgba(192, 132, 252, 0.45) !important;
}

/* Modale de sélection de produit Maquis (Entrée Stock) */
body.dark-mode .modal-stock-content,
:root[data-theme="dark"] .modal-stock-content {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
    color: #f8fafc !important;
}

body.dark-mode .stock-search-input,
:root[data-theme="dark"] .stock-search-input {
    background: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   28. MODULE 👨‍👩‍👧‍👦 PERSONNEL, SALAIRES, AVANCES, PRIMES & CONGÉS
   ========================================================================== */

/* Cartes Employés & Profils */
body.dark-mode .employee-card,
body.dark-mode .avance-details,
body.dark-mode .prime-details,
body.dark-mode .detail-card,
body.dark-mode .bulletin-card,
body.dark-mode .heures-sup-card,
body.dark-mode .deduction-card,
body.dark-mode .solde-card,
:root[data-theme="dark"] .employee-card,
:root[data-theme="dark"] .avance-details,
:root[data-theme="dark"] .prime-details,
:root[data-theme="dark"] .detail-card,
:root[data-theme="dark"] .bulletin-card,
:root[data-theme="dark"] .heures-sup-card,
:root[data-theme="dark"] .deduction-card,
:root[data-theme="dark"] .solde-card {
    background: rgba(15, 23, 42, 0.85) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .detail-card-header,
:root[data-theme="dark"] .detail-card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .detail-label,
:root[data-theme="dark"] .detail-label {
    color: #94a3b8 !important;
}

body.dark-mode .detail-value,
:root[data-theme="dark"] .detail-value {
    color: #f8fafc !important;
}

body.dark-mode .type-banner,
:root[data-theme="dark"] .type-banner {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

/* Calendrier des Congés */
body.dark-mode .calendar-container,
:root[data-theme="dark"] .calendar-container {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .calendar-day,
:root[data-theme="dark"] .calendar-day {
    background: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #f1f5f9 !important;
}

body.dark-mode .calendar-day:hover,
:root[data-theme="dark"] .calendar-day:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

/* Bulletin de Paie Numérique */
body.dark-mode .bulletin-header,
:root[data-theme="dark"] .bulletin-header {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .rubrique-table,
:root[data-theme="dark"] .rubrique-table {
    color: #f8fafc !important;
}

body.dark-mode .rubrique-table th,
:root[data-theme="dark"] .rubrique-table th {
    background: rgba(30, 41, 59, 0.8) !important;
    color: #38bdf8 !important;
}

/* ==========================================================================
   29. GOUVERNANCE STRICTE VISIBILITÉ TOTAL DES TEXTES ET ICÔNES (ZERO-TRANSPARENCY)
   ========================================================================== */
body.dark-mode i,
:root[data-theme="dark"] i,
body.dark-mode .fas, body.dark-mode .far, body.dark-mode .fab, body.dark-mode .bi,
:root[data-theme="dark"] .fas, :root[data-theme="dark"] .far, :root[data-theme="dark"] .fab, :root[data-theme="dark"] .bi {
    -webkit-text-fill-color: currentColor !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.dark-mode .section h1, body.dark-mode .section h2, body.dark-mode .section h3, body.dark-mode .section h4,
body.dark-mode .section-header h1, body.dark-mode .section-header h2, body.dark-mode .section-header h3,
body.dark-mode .section-title, body.dark-mode .stat-card .value,
:root[data-theme="dark"] .section-title, :root[data-theme="dark"] .stat-card .value {
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

body.dark-mode .action-card,
body.dark-mode .action-card span,
body.dark-mode .dashboard-list-item,
body.dark-mode .dashboard-list-item div,
body.dark-mode .dashboard-list-item span,
:root[data-theme="dark"] .action-card span,
:root[data-theme="dark"] .dashboard-list-item span {
    visibility: visible !important;
    opacity: 1 !important;
}

/* ==========================================================================
   30. MODULE MAQUIS — ACTIONS, SECTIONS, RESULTAT MENSUEL & LISTES DARK LUXURY
   ========================================================================== */
.action-button-grid,
body .action-button-grid,
:root[data-theme="dark"] .action-button-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
    gap: 0.85rem !important;
    margin-bottom: 2rem !important;
}

.action-card,
body .action-card,
a.action-card,
:root[data-theme="dark"] .action-card {
    background: rgba(30, 41, 59, 0.85) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    padding: 1.1rem 0.8rem !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.45rem !important;
    transition: all 0.25s ease !important;
}

.action-card:hover,
body .action-card:hover,
a.action-card:hover,
:root[data-theme="dark"] .action-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.55), 0 0 15px rgba(245, 158, 11, 0.3) !important;
    background: rgba(51, 65, 85, 0.95) !important;
}

.action-card span,
body .action-card span,
:root[data-theme="dark"] .action-card span {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    display: block !important;
}

.action-card i {
    font-size: 1.45rem !important;
    display: inline-block !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)) !important;
}

.section,
body .section,
div.section,
:root[data-theme="dark"] .section {
    background: rgba(30, 41, 59, 0.85) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.table-res-mensuel,
body .table-res-mensuel,
:root[data-theme="dark"] .table-res-mensuel {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background: transparent !important;
}

.dashboard-list-item,
body .dashboard-list-item,
:root[data-theme="dark"] .dashboard-list-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.75rem 0.95rem !important;
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    margin-bottom: 0.55rem !important;
    font-size: 0.88rem !important;
}

.dashboard-list-item:hover,
body .dashboard-list-item:hover,
:root[data-theme="dark"] .dashboard-list-item:hover {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    transform: translateX(3px) !important;
}

.mk-cat-row,
body .mk-cat-row,
:root[data-theme="dark"] .mk-cat-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.65rem 0.85rem !important;
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    margin-bottom: 0.55rem !important;
}

/* ==========================================================================
   31. BLINDAGE RESPONSIVE UNIVERSEL DARK LUXURY (MOBILE, TABLETTE, DESKTOP)
   Neutralisation de tout résidu de fond blanc ou héritage destructeur
   ========================================================================== */
body.dark-mode .section,
body.dark-mode div.section,
html.dark-mode .section,
:root[data-theme="dark"] .section,
:root[data-theme="dark"] div.section {
    background: rgba(30, 41, 59, 0.85) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
    color: #f8fafc !important;
}

body.dark-mode .table-responsive,
:root[data-theme="dark"] .table-responsive,
html.dark-mode .table-responsive {
    background: transparent !important;
    border: none !important;
}

body.dark-mode .table-responsive *,
:root[data-theme="dark"] .table-responsive *,
html.dark-mode .table-responsive * {
    background-color: transparent !important;
}

body.dark-mode .table-res-mensuel,
:root[data-theme="dark"] .table-res-mensuel,
html.dark-mode .table-res-mensuel {
    background: transparent !important;
    width: 100% !important;
}

body.dark-mode .table-res-mensuel tr.row-ca,
:root[data-theme="dark"] .table-res-mensuel tr.row-ca {
    background: rgba(16, 185, 129, 0.16) !important;
}

body.dark-mode .table-res-mensuel tr.row-brut,
:root[data-theme="dark"] .table-res-mensuel tr.row-brut {
    background: rgba(13, 148, 136, 0.18) !important;
}

body.dark-mode .table-res-mensuel tr.row-charges-title,
:root[data-theme="dark"] .table-res-mensuel tr.row-charges-title {
    background: rgba(30, 41, 59, 0.95) !important;
}

body.dark-mode .table-res-mensuel tr.row-total-charges,
:root[data-theme="dark"] .table-res-mensuel tr.row-total-charges {
    background: rgba(239, 68, 68, 0.16) !important;
}

body.dark-mode .table-res-mensuel tr.row-net.net-pos,
:root[data-theme="dark"] .table-res-mensuel tr.row-net.net-pos {
    background: rgba(16, 185, 129, 0.24) !important;
}

body.dark-mode .table-res-mensuel tr.row-net.net-neg,
:root[data-theme="dark"] .table-res-mensuel tr.row-net.net-neg {
    background: rgba(239, 68, 68, 0.24) !important;
}

body.dark-mode .dashboard-list-item,
:root[data-theme="dark"] .dashboard-list-item,
html.dark-mode .dashboard-list-item {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #f8fafc !important;
}

body.dark-mode .mk-cat-row,
:root[data-theme="dark"] .mk-cat-row,
html.dark-mode .mk-cat-row {
    background: rgba(15, 23, 42, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
}

body.dark-mode .main-content-wrapper,
:root[data-theme="dark"] .main-content-wrapper,
html.dark-mode .main-content-wrapper,
body.dark-mode .content-limited-1350,
:root[data-theme="dark"] .content-limited-1350 {
    background: transparent !important;
}

/* ==========================================================================
   15. HARMONISATION UNIVERSELLE MOBILE & TABLETTE (<= 1024px, <= 768px, <= 480px)
   Application intégrale des couleurs Dark Luxury du Desktop sur tous les formats mobiles et tablettes
   ========================================================================== */
@media (max-width: 1024px) {
    /* --- 1. Header, Menu Tiroir & Navigation Mobile --- */
    body.dark-mode .header-modern,
    :root[data-theme="dark"] .header-modern,
    html.dark-mode .header-modern {
        background: #060d1f !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.45) !important;
    }

    body.dark-mode .main-nav,
    :root[data-theme="dark"] .main-nav,
    html.dark-mode .main-nav {
        background: linear-gradient(145deg, rgba(15, 23, 42, 0.98) 0%, rgba(11, 19, 43, 0.98) 100%) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: -8px 0 35px rgba(0, 0, 0, 0.8) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        backdrop-filter: blur(25px) !important;
    }

    body.dark-mode .mobile-menu-toggle,
    :root[data-theme="dark"] .mobile-menu-toggle {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    body.dark-mode .hamburger-line,
    :root[data-theme="dark"] .hamburger-line {
        background: #ffffff !important;
    }

    body.dark-mode .nav-item,
    :root[data-theme="dark"] .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    body.dark-mode .nav-link,
    :root[data-theme="dark"] .nav-link {
        color: #f8fafc !important;
        -webkit-text-fill-color: #f8fafc !important;
    }

    body.dark-mode .nav-link:hover,
    :root[data-theme="dark"] .nav-link:hover {
        background: rgba(56, 189, 248, 0.12) !important;
    }

    body.dark-mode .nav-link .nav-icon,
    :root[data-theme="dark"] .nav-link .nav-icon,
    body.dark-mode .nav-icon,
    :root[data-theme="dark"] .nav-icon {
        color: #38bdf8 !important;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) !important;
    }

    body.dark-mode .nav-link .nav-text,
    :root[data-theme="dark"] .nav-link .nav-text,
    body.dark-mode .nav-text,
    :root[data-theme="dark"] .nav-text {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-weight: 600 !important;
    }

    body.dark-mode .dropdown-menu,
    :root[data-theme="dark"] .dropdown-menu,
    body.dark-mode .dropdown-submenu-menu,
    :root[data-theme="dark"] .dropdown-submenu-menu {
        background: rgba(15, 23, 42, 0.88) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    }

    body.dark-mode .dropdown-menu li a,
    :root[data-theme="dark"] .dropdown-menu li a,
    body.dark-mode .dropdown-submenu-menu li a,
    :root[data-theme="dark"] .dropdown-submenu-menu li a {
        color: #cbd5e1 !important;
        -webkit-text-fill-color: #cbd5e1 !important;
    }

    body.dark-mode .dropdown-menu li a:hover,
    :root[data-theme="dark"] .dropdown-menu li a:hover,
    body.dark-mode .dropdown-submenu-menu li a:hover,
    :root[data-theme="dark"] .dropdown-submenu-menu li a:hover {
        background: rgba(56, 189, 248, 0.15) !important;
        color: #38bdf8 !important;
        -webkit-text-fill-color: #38bdf8 !important;
    }

    /* --- 2. Cockpit Directionnel (index.php) --- */
    body.dark-mode .cockpit-container,
    :root[data-theme="dark"] .cockpit-container {
        color: #f8fafc !important;
    }

    body.dark-mode .hero-cockpit,
    :root[data-theme="dark"] .hero-cockpit {
        background: linear-gradient(135deg, rgba(217, 119, 6, 0.15) 0%, rgba(5, 150, 105, 0.15) 50%, rgba(37, 99, 235, 0.1) 100%), #0f172a !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    }

    body.dark-mode .hero-title-group h1,
    :root[data-theme="dark"] .hero-title-group h1 {
        color: #f59e0b !important;
        -webkit-text-fill-color: #f59e0b !important;
        text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3) !important;
    }

    body.dark-mode .hero-title-group p,
    :root[data-theme="dark"] .hero-title-group p {
        color: #e2e8f0 !important;
        -webkit-text-fill-color: #e2e8f0 !important;
    }

    body.dark-mode .hero-clock-box,
    :root[data-theme="dark"] .hero-clock-box {
        background: #1e293b !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
    }

    body.dark-mode .hero-clock-time,
    :root[data-theme="dark"] .hero-clock-time {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.dark-mode .hero-clock-date,
    :root[data-theme="dark"] .hero-clock-date {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
    }

    body.dark-mode .caisse-status-card,
    :root[data-theme="dark"] .caisse-status-card {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
    }

    body.dark-mode .caisse-title-text,
    :root[data-theme="dark"] .caisse-title-text {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.dark-mode .caisse-detail-text,
    :root[data-theme="dark"] .caisse-detail-text {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
    }

    body.dark-mode .live-badge-open,
    :root[data-theme="dark"] .live-badge-open {
        background: rgba(5, 150, 105, 0.25) !important;
        color: #34d399 !important;
        -webkit-text-fill-color: #34d399 !important;
        border-color: rgba(5, 150, 105, 0.5) !important;
    }

    body.dark-mode .live-badge-closed,
    :root[data-theme="dark"] .live-badge-closed {
        background: rgba(220, 38, 38, 0.25) !important;
        color: #f87171 !important;
        -webkit-text-fill-color: #f87171 !important;
        border-color: rgba(220, 38, 38, 0.5) !important;
    }

    body.dark-mode .btn-action-glass,
    :root[data-theme="dark"] .btn-action-glass {
        background: #1e293b !important;
        color: #f8fafc !important;
        -webkit-text-fill-color: #f8fafc !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
    }

    /* --- 3. Baromètre Financier & Bento KPI --- */
    body.dark-mode .section-title-wrap h2,
    :root[data-theme="dark"] .section-title-wrap h2 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.dark-mode .section-title-wrap .subtitle,
    :root[data-theme="dark"] .section-title-wrap .subtitle {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
    }

    body.dark-mode .finance-card-kpi,
    :root[data-theme="dark"] .finance-card-kpi {
        background: #0f172a !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
    }

    body.dark-mode .kpi-label,
    :root[data-theme="dark"] .kpi-label {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
    }

    body.dark-mode .kpi-main-val,
    :root[data-theme="dark"] .kpi-main-val {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.dark-mode .kpi-sub-text,
    :root[data-theme="dark"] .kpi-sub-text {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
    }

    body.dark-mode .bento-breakdown-card,
    :root[data-theme="dark"] .bento-breakdown-card {
        background: #0f172a !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    body.dark-mode .breakdown-title h3,
    :root[data-theme="dark"] .breakdown-title h3 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    /* --- 4. Cartes des Pôles d'Activités Métier --- */
    body.dark-mode .pole-card,
    :root[data-theme="dark"] .pole-card {
        background: linear-gradient(145deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.8) 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45) !important;
    }

    body.dark-mode .pole-title h3,
    :root[data-theme="dark"] .pole-title h3 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.dark-mode .pole-title span,
    :root[data-theme="dark"] .pole-title span {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
    }

    body.dark-mode .pole-metric-row,
    :root[data-theme="dark"] .pole-metric-row {
        border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
    }

    body.dark-mode .pole-metric-row span.lbl,
    :root[data-theme="dark"] .pole-metric-row span.lbl {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
    }

    body.dark-mode .pole-metric-row strong.val,
    :root[data-theme="dark"] .pole-metric-row strong.val {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    /* Icônes & Badges des Pôles */
    body.dark-mode .pole-icon-immobilier { background: rgba(16, 185, 129, 0.18) !important; color: #34d399 !important; border: 1px solid rgba(52, 211, 153, 0.3) !important; }
    body.dark-mode .pole-icon-restaurant { background: rgba(245, 158, 11, 0.18) !important; color: #fbbf24 !important; border: 1px solid rgba(251, 191, 36, 0.3) !important; }
    body.dark-mode .pole-icon-maquis     { background: rgba(59, 130, 246, 0.18) !important; color: #60a5fa !important; border: 1px solid rgba(96, 165, 250, 0.3) !important; }
    body.dark-mode .pole-icon-personnel  { background: rgba(139, 92, 246, 0.18) !important; color: #a78bfa !important; border: 1px solid rgba(167, 139, 250, 0.3) !important; }
    body.dark-mode .pole-icon-caisses    { background: rgba(13, 148, 136, 0.18) !important; color: #2dd4bf !important; border: 1px solid rgba(45, 212, 191, 0.3) !important; }
    body.dark-mode .pole-icon-admin      { background: rgba(148, 163, 184, 0.18) !important; color: #cbd5e1 !important; border: 1px solid rgba(203, 213, 225, 0.3) !important; }

    body.dark-mode .pole-badge-immobilier { background: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; border: 1px solid rgba(52, 211, 153, 0.3) !important; }
    body.dark-mode .pole-badge-restaurant { background: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; border: 1px solid rgba(251, 191, 36, 0.3) !important; }
    body.dark-mode .pole-badge-maquis     { background: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; border: 1px solid rgba(96, 165, 250, 0.3) !important; }
    body.dark-mode .pole-badge-personnel  { background: rgba(139, 92, 246, 0.15) !important; color: #a78bfa !important; border: 1px solid rgba(167, 139, 250, 0.3) !important; }
    body.dark-mode .pole-badge-caisses    { background: rgba(13, 148, 136, 0.15) !important; color: #2dd4bf !important; border: 1px solid rgba(45, 212, 191, 0.3) !important; }
    body.dark-mode .pole-badge-admin      { background: rgba(148, 163, 184, 0.15) !important; color: #cbd5e1 !important; border: 1px solid rgba(203, 213, 225, 0.3) !important; }

    /* --- 5. Timeline Flux & Activités --- */
    body.dark-mode .activity-box,
    :root[data-theme="dark"] .activity-box {
        background: #0f172a !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }

    body.dark-mode .activity-box-header,
    :root[data-theme="dark"] .activity-box-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    body.dark-mode .activity-box-header h3,
    :root[data-theme="dark"] .activity-box-header h3 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.dark-mode .timeline-row,
    :root[data-theme="dark"] .timeline-row {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    body.dark-mode .timeline-main-title,
    :root[data-theme="dark"] .timeline-main-title {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.dark-mode .timeline-time,
    :root[data-theme="dark"] .timeline-time {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
    }

    body.dark-mode .timeline-desc,
    :root[data-theme="dark"] .timeline-desc {
        color: #cbd5e1 !important;
        -webkit-text-fill-color: #cbd5e1 !important;
    }

    /* --- 6. Modules Généraux, Cartes, Sections & Tableaux Mobile --- */
    body.dark-mode .card,
    body.dark-mode .stat-card,
    body.dark-mode .nav-card,
    body.dark-mode .bento-item,
    body.dark-mode .section,
    body.dark-mode .panel,
    body.dark-mode .box,
    body.dark-mode .widget,
    :root[data-theme="dark"] .card,
    :root[data-theme="dark"] .stat-card,
    :root[data-theme="dark"] .nav-card,
    :root[data-theme="dark"] .bento-item,
    :root[data-theme="dark"] .section,
    :root[data-theme="dark"] .panel,
    :root[data-theme="dark"] .box,
    :root[data-theme="dark"] .widget {
        background: rgba(30, 41, 59, 0.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        color: #f8fafc !important;
        -webkit-text-fill-color: #f8fafc !important;
    }

    body.dark-mode .card-header h3,
    body.dark-mode .card-header h4,
    body.dark-mode .stat-card h3,
    body.dark-mode .nav-card h3,
    body.dark-mode .section-header h2,
    body.dark-mode .section-header h3,
    :root[data-theme="dark"] .card-header h3,
    :root[data-theme="dark"] .stat-card h3,
    :root[data-theme="dark"] .nav-card h3 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.dark-mode .stat-card .value,
    :root[data-theme="dark"] .stat-card .value {
        color: #f59e0b !important;
        -webkit-text-fill-color: #f59e0b !important;
    }

    body.dark-mode .stat-card p,
    body.dark-mode .nav-card p,
    body.dark-mode .text-muted,
    :root[data-theme="dark"] .stat-card p,
    :root[data-theme="dark"] .nav-card p,
    :root[data-theme="dark"] .text-muted {
        color: #94a3b8 !important;
        -webkit-text-fill-color: #94a3b8 !important;
    }

    body.dark-mode .nav-card-icon,
    body.dark-mode .stat-card-icon,
    :root[data-theme="dark"] .nav-card-icon,
    :root[data-theme="dark"] .stat-card-icon {
        color: #38bdf8 !important;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) !important;
    }

    /* --- 7. Tableaux Mobile & Scrollbars --- */
    body.dark-mode table,
    body.dark-mode .table-responsive,
    :root[data-theme="dark"] table,
    :root[data-theme="dark"] .table-responsive {
        background: transparent !important;
        color: #f8fafc !important;
    }

    body.dark-mode table th,
    :root[data-theme="dark"] table th {
        background: #0f172a !important;
        color: #38bdf8 !important;
        border-bottom: 2px solid rgba(56, 189, 248, 0.3) !important;
    }

    body.dark-mode table td,
    :root[data-theme="dark"] table td {
        background: rgba(15, 23, 42, 0.4) !important;
        color: #cbd5e1 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    body.dark-mode .table-responsive::after,
    :root[data-theme="dark"] .table-responsive::after {
        background: rgba(15, 23, 42, 0.8) !important;
        color: #94a3b8 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* ==========================================================================
   8. MODULE RESTAURANT & GASTRONOMIE - SUITE COMPLETE DARK LUXURY
   Harmonisation de toutes les pages (index, caisse, plats, stock, achats,
   dépenses, pertes, clients, dettes, fournisseurs, points journaliers)
   ========================================================================== */

/* Conteneurs Glassmorphism Transparents & Translucides pour le Restaurant */
body.dark-mode .resto-glass-section,
body.dark-mode .period-filters,
body.dark-mode .rapport-section,
body.dark-mode .rapport-card,
body.dark-mode .summary-card,
body.dark-mode .action-card,
body.dark-mode .resto-action-card,
body.dark-mode .stat-card,
body.dark-mode .stock-card,
body.dark-mode .plat-card,
body.dark-mode .ingredient-card,
body.dark-mode .pos-product-card,
body.dark-mode .pos-cart-panel,
body.dark-mode .ticket-box,
body.dark-mode .caisse-summary-box,
body.dark-mode .marche-session-card,
body.dark-mode .session-caisse-banner,
:root[data-theme="dark"] .resto-glass-section,
:root[data-theme="dark"] .period-filters,
:root[data-theme="dark"] .rapport-section,
:root[data-theme="dark"] .rapport-card,
:root[data-theme="dark"] .summary-card,
:root[data-theme="dark"] .action-card,
:root[data-theme="dark"] .resto-action-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .stock-card,
:root[data-theme="dark"] .plat-card,
:root[data-theme="dark"] .ingredient-card,
:root[data-theme="dark"] .pos-product-card,
:root[data-theme="dark"] .pos-cart-panel,
:root[data-theme="dark"] .ticket-box,
:root[data-theme="dark"] .caisse-summary-box,
:root[data-theme="dark"] .marche-session-card,
:root[data-theme="dark"] .session-caisse-banner {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* Effet Hover Glassmorphism */
body.dark-mode .action-card:hover,
body.dark-mode .resto-action-card:hover,
body.dark-mode .stat-card:hover,
body.dark-mode .plat-card:hover,
body.dark-mode .pos-product-card:hover,
body.dark-mode .summary-card:hover,
body.dark-mode .marche-session-card:hover,
:root[data-theme="dark"] .action-card:hover,
:root[data-theme="dark"] .resto-action-card:hover,
:root[data-theme="dark"] .stat-card:hover,
:root[data-theme="dark"] .plat-card:hover,
:root[data-theme="dark"] .pos-product-card:hover,
:root[data-theme="dark"] .summary-card:hover,
:root[data-theme="dark"] .marche-session-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-3px) !important;
}

/* Typographie Restaurant Haute Lisibilité (Blanc & Argent) */
body.dark-mode .resto-page-header h1,
body.dark-mode .period-filters-header h3,
body.dark-mode .rapport-header h3,
body.dark-mode .rapport-card-header h4,
body.dark-mode .stat-card h3,
body.dark-mode .stat-card .value,
body.dark-mode .summary-value,
body.dark-mode .action-card span,
body.dark-mode .resto-action-card span,
body.dark-mode .plat-card-title,
body.dark-mode .ingredient-name,
body.dark-mode .pos-item-title,
:root[data-theme="dark"] .resto-page-header h1,
:root[data-theme="dark"] .period-filters-header h3,
:root[data-theme="dark"] .rapport-header h3,
:root[data-theme="dark"] .rapport-card-header h4,
:root[data-theme="dark"] .stat-card h3,
:root[data-theme="dark"] .stat-card .value,
:root[data-theme="dark"] .summary-value,
:root[data-theme="dark"] .action-card span,
:root[data-theme="dark"] .resto-action-card span,
:root[data-theme="dark"] .plat-card-title,
:root[data-theme="dark"] .ingredient-name,
:root[data-theme="dark"] .pos-item-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Labels, Descriptions et Textes Secondaires */
body.dark-mode .period-input-group label,
body.dark-mode .summary-label,
body.dark-mode .stat-card p,
body.dark-mode .plat-card-desc,
body.dark-mode .ingredient-unit,
body.dark-mode .dashboard-list-item,
body.dark-mode .resto-list-row,
body.dark-mode .mk-cat-n,
body.dark-mode .mk-cat-v,
body.dark-mode .text-muted,
body.dark-mode small.text-muted,
:root[data-theme="dark"] .period-input-group label,
:root[data-theme="dark"] .summary-label,
:root[data-theme="dark"] .stat-card p,
:root[data-theme="dark"] .plat-card-desc,
:root[data-theme="dark"] .ingredient-unit,
:root[data-theme="dark"] .dashboard-list-item,
:root[data-theme="dark"] .resto-list-row,
:root[data-theme="dark"] .mk-cat-n,
:root[data-theme="dark"] .mk-cat-v,
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] small.text-muted {
    color: #cbd5e1 !important;
    -webkit-text-fill-color: #cbd5e1 !important;
}

/* Boutons d'Action Rapide Carrés Restaurant (.action-card) */
body.dark-mode .action-card,
:root[data-theme="dark"] .action-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .action-card span,
:root[data-theme="dark"] .action-card span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
}

/* Tableaux Restaurant Universels (Élimination des aplats blancs/verts/roses clairs) */
body.dark-mode table,
body.dark-mode .rapport-table,
body.dark-mode .table-responsive table,
body.dark-mode .table,
:root[data-theme="dark"] table,
:root[data-theme="dark"] .rapport-table,
:root[data-theme="dark"] .table-responsive table,
:root[data-theme="dark"] .table {
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.dark-mode table th,
body.dark-mode .rapport-table th,
body.dark-mode .table th,
:root[data-theme="dark"] table th,
:root[data-theme="dark"] .rapport-table th,
:root[data-theme="dark"] .table th {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

body.dark-mode table td,
body.dark-mode .rapport-table td,
body.dark-mode .table td,
:root[data-theme="dark"] table td,
:root[data-theme="dark"] .rapport-table td,
:root[data-theme="dark"] .table td {
    background: transparent !important;
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-size: 0.88rem !important;
}

body.dark-mode table tr:hover td,
body.dark-mode .rapport-table tr:hover td,
body.dark-mode .table tr:hover td,
:root[data-theme="dark"] table tr:hover td,
:root[data-theme="dark"] .rapport-table tr:hover td,
:root[data-theme="dark"] .table tr:hover td {
    background: rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode table td strong,
body.dark-mode .rapport-table td strong,
:root[data-theme="dark"] table td strong,
:root[data-theme="dark"] .rapport-table td strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Suppression des backgrounds de lignes hardcodés en Dark Mode */
body.dark-mode tr[style*="background"],
body.dark-mode tr[style*="background-color"],
body.dark-mode tr.bg-light,
body.dark-mode tr.bg-white,
:root[data-theme="dark"] tr[style*="background"],
:root[data-theme="dark"] tr[style*="background-color"],
:root[data-theme="dark"] tr.bg-light,
:root[data-theme="dark"] tr.bg-white {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #f8fafc !important;
}

/* Formulaires & Filtres Restaurant */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode select,
body.dark-mode textarea,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus {
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
    color: #ffffff !important;
}

/* Badges Vibrants Restaurant */
body.dark-mode .badge-success,
:root[data-theme="dark"] .badge-success {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    -webkit-text-fill-color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.4) !important;
}

body.dark-mode .badge-danger,
:root[data-theme="dark"] .badge-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    -webkit-text-fill-color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.4) !important;
}

body.dark-mode .badge-warning,
:root[data-theme="dark"] .badge-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    -webkit-text-fill-color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
}

body.dark-mode .badge-info,
:root[data-theme="dark"] .badge-info {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
    border: 1px solid rgba(96, 165, 250, 0.4) !important;
}

/* Modales & Dialogues Restaurant */
body.dark-mode .modal-content,
:root[data-theme="dark"] .modal-content {
    background: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
    border-radius: 20px !important;
    color: #f8fafc !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Caisse POS Tactile Restaurant */
body.dark-mode .pos-key,
body.dark-mode .numpad-btn,
:root[data-theme="dark"] .pos-key,
:root[data-theme="dark"] .numpad-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .pos-key:hover,
body.dark-mode .numpad-btn:hover,
:root[data-theme="dark"] .pos-key:hover,
:root[data-theme="dark"] .numpad-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   27. MODULE IMMOBILIER, LOYERS, LOCATAIRES, BAUX, IMPAYES & LITIGES
   ========================================================================== */
body.dark-mode .bento-site-card,
body.dark-mode .locataire-card,
body.dark-mode .bail-card,
body.dark-mode .incident-card,
body.dark-mode .litige-card,
body.dark-mode .quittance-card,
body.dark-mode .frais-card,
body.dark-mode .garant-card,
body.dark-mode .reclamation-card,
:root[data-theme="dark"] .bento-site-card,
:root[data-theme="dark"] .locataire-card,
:root[data-theme="dark"] .bail-card,
:root[data-theme="dark"] .incident-card,
:root[data-theme="dark"] .litige-card,
:root[data-theme="dark"] .quittance-card,
:root[data-theme="dark"] .frais-card,
:root[data-theme="dark"] .garant-card,
:root[data-theme="dark"] .reclamation-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

body.dark-mode .stat-row,
body.dark-mode .locataire-row,
body.dark-mode .bail-row,
body.dark-mode .incident-row,
body.dark-mode .litige-row,
:root[data-theme="dark"] .stat-row,
:root[data-theme="dark"] .locataire-row,
:root[data-theme="dark"] .bail-row,
:root[data-theme="dark"] .incident-row,
:root[data-theme="dark"] .litige-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

body.dark-mode .stat-label,
body.dark-mode .locataire-label,
:root[data-theme="dark"] .stat-label,
:root[data-theme="dark"] .locataire-label {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

body.dark-mode .stat-value,
body.dark-mode .locataire-name,
:root[data-theme="dark"] .stat-value,
:root[data-theme="dark"] .locataire-name {
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.dark-mode .site-badge,
body.dark-mode .chambre-badge,
:root[data-theme="dark"] .site-badge,
:root[data-theme="dark"] .chambre-badge {
    background: rgba(56, 189, 248, 0.2) !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    padding: 0.25rem 0.65rem !important;
}

/* ==========================================================================
   28. MODULE CAISSE CENTRALE, POS, SESSIONS & BILLETAGE
   ========================================================================== */
body.dark-mode .caisse-container,
body.dark-mode .billetage-container,
body.dark-mode .session-banner,
body.dark-mode .cloture-card,
body.dark-mode .recu-preview,
:root[data-theme="dark"] .caisse-container,
:root[data-theme="dark"] .billetage-container,
:root[data-theme="dark"] .session-banner,
:root[data-theme="dark"] .cloture-card,
:root[data-theme="dark"] .recu-preview {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

body.dark-mode .billet-row,
body.dark-mode .piece-row,
:root[data-theme="dark"] .billet-row,
:root[data-theme="dark"] .piece-row {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 0.5rem 0.85rem !important;
    margin-bottom: 0.5rem !important;
    color: #ffffff !important;
}

body.dark-mode .solde-live-display,
:root[data-theme="dark"] .solde-live-display {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.3) 100%) !important;
    border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
    color: #34d399 !important;
    border-radius: 16px !important;
    text-shadow: 0 0 12px rgba(52, 211, 153, 0.4) !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   29. MODULE PERSONNEL, RH, SALAIRES, AVANCES, CONGES & PAIE
   ========================================================================== */
body.dark-mode .employe-card,
body.dark-mode .fiche-paie-container,
body.dark-mode .bulletin-box,
body.dark-mode .presence-card,
body.dark-mode .conge-card,
body.dark-mode .avance-card,
:root[data-theme="dark"] .employe-card,
:root[data-theme="dark"] .fiche-paie-container,
:root[data-theme="dark"] .bulletin-box,
:root[data-theme="dark"] .presence-card,
:root[data-theme="dark"] .conge-card,
:root[data-theme="dark"] .avance-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

body.dark-mode .employe-name,
body.dark-mode .salaire-net-val,
:root[data-theme="dark"] .employe-name,
:root[data-theme="dark"] .salaire-net-val {
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.dark-mode .presence-badge-ok,
:root[data-theme="dark"] .presence-badge-ok {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.4) !important;
}

body.dark-mode .presence-badge-abs,
:root[data-theme="dark"] .presence-badge-abs {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.4) !important;
}

/* ==========================================================================
   30. MODULE FINANCE, TRESORERIE, BILAN, DETTES & FOURNISSEURS
   ========================================================================== */
body.dark-mode .finance-kpi-box,
body.dark-mode .tresorerie-card,
body.dark-mode .bilan-card,
body.dark-mode .dette-item,
body.dark-mode .fournisseur-card,
:root[data-theme="dark"] .finance-kpi-box,
:root[data-theme="dark"] .tresorerie-card,
:root[data-theme="dark"] .bilan-card,
:root[data-theme="dark"] .dette-item,
:root[data-theme="dark"] .fournisseur-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   31. MODULE ADMINISTRATION, UTILISATEURS, ROLES, PERMISSIONS & BDD
   ========================================================================== */
body.dark-mode .user-card,
body.dark-mode .role-card,
body.dark-mode .permission-card,
body.dark-mode .database-table-card,
body.dark-mode .backup-card,
body.dark-mode .audit-card,
:root[data-theme="dark"] .user-card,
:root[data-theme="dark"] .role-card,
:root[data-theme="dark"] .permission-card,
:root[data-theme="dark"] .database-table-card,
:root[data-theme="dark"] .backup-card,
:root[data-theme="dark"] .audit-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

body.dark-mode .role-badge-admin,
:root[data-theme="dark"] .role-badge-admin {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.5) !important;
}

body.dark-mode .role-badge-caissier,
:root[data-theme="dark"] .role-badge-caissier {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
}

/* ==========================================================================
   32. MODULE RAPPORTS, AUDIT LOGS & ANALYTICS
   ========================================================================== */
body.dark-mode .rapport-card,
body.dark-mode .audit-entry,
body.dark-mode .export-box,
:root[data-theme="dark"] .rapport-card,
:root[data-theme="dark"] .audit-entry,
:root[data-theme="dark"] .export-box {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   33. MODULE STOCK CASIERS & BRASSERIES (SOLIBRA & BRASSIVOIRE)
   ========================================================================== */
body.dark-mode .casier-card,
body.dark-mode .stock-card,
body.dark-mode .bouteille-card,
:root[data-theme="dark"] .casier-card,
:root[data-theme="dark"] .stock-card,
:root[data-theme="dark"] .bouteille-card {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

body.dark-mode .solibra-badge,
:root[data-theme="dark"] .solibra-badge {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

body.dark-mode .brassivoire-badge,
:root[data-theme="dark"] .brassivoire-badge {
    background: rgba(56, 189, 248, 0.2) !important;
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
}

/* ==========================================================================
   34. MODULE IMPÔT FONCIER & DÉCLARATIONS
   ========================================================================== */
body.dark-mode .impot-card,
body.dark-mode .foncier-box,
:root[data-theme="dark"] .impot-card,
:root[data-theme="dark"] .foncier-box {
    background: rgba(255, 255, 255, 0.03) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    color: #f8fafc !important;
}

/* ==========================================================================
   35. RÈGLES D'ISOLATION VITRINE PUBLIQUE & PROTECTION STRICTE
   ========================================================================== */
/* Les règles Dark Mode ERP ne s'appliquent jamais sur la vitrine publique */
body.vitrine-theme,
body.vitrine-body,
.vitrine-container,
.vitrine-page {
    background-color: initial;
    color: initial;
}

/* ==========================================================================
   36. VERROUILLAGE RESPONSIVE UNIVERSEL DES COULEURS & ICÔNES
   Garantie d'éclat et lisibilité sur Desktop (1440/1280), Laptop (1024),
   Tablette (768), Mobile (390) et Ultra-Mobile (250)
   ========================================================================== */
@media (max-width: 1440px), (max-width: 1280px), (max-width: 1024px), (max-width: 768px), (max-width: 480px), (max-width: 250px) {
    /* Préservation des boutons d'actions et raccourcis */
    body.dark-mode .actions-grid .btn,
    body.dark-mode .resto-actions-grid .btn,
    body.dark-mode .resto-action-card,
    body.dark-mode .action-card,
    body.dark-mode .btn-secondary,
    body.dark-mode .btn-resto-nav,
    :root[data-theme="dark"] .actions-grid .btn,
    :root[data-theme="dark"] .resto-action-card,
    :root[data-theme="dark"] .action-card {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    /* Préservation des conteneurs et sections translucides */
    body.dark-mode .resto-kpi-card,
    body.dark-mode .bento-item,
    body.dark-mode .bento-site-card,
    body.dark-mode .card,
    body.dark-mode .stat-card,
    body.dark-mode .section,
    body.dark-mode .resto-glass-section,
    :root[data-theme="dark"] .resto-kpi-card,
    :root[data-theme="dark"] .bento-item,
    :root[data-theme="dark"] .bento-site-card,
    :root[data-theme="dark"] .card,
    :root[data-theme="dark"] .stat-card,
    :root[data-theme="dark"] .section,
    :root[data-theme="dark"] .resto-glass-section {
        background: rgba(255, 255, 255, 0.03) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #f8fafc !important;
    }

    /* Préservation des titres et montants blancs éclatants */
    body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4,
    body.dark-mode .resto-header-title-group h1,
    body.dark-mode .resto-kpi-value,
    body.dark-mode .resto-section-title,
    body.dark-mode .session-title-strong,
    body.dark-mode .table-resto-glass td,
    :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
    :root[data-theme="dark"] .resto-header-title-group h1,
    :root[data-theme="dark"] .resto-kpi-value,
    :root[data-theme="dark"] .resto-section-title {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
    }

    /* Préservation des libellés et sous-titres argentés */
    body.dark-mode .resto-header-subtitle,
    body.dark-mode .resto-kpi-title,
    body.dark-mode .resto-kpi-sub,
    body.dark-mode .session-meta-text,
    body.dark-mode .text-muted,
    :root[data-theme="dark"] .resto-header-subtitle,
    :root[data-theme="dark"] .resto-kpi-title,
    :root[data-theme="dark"] .resto-kpi-sub,
    :root[data-theme="dark"] .session-meta-text {
        color: #cbd5e1 !important;
        -webkit-text-fill-color: #cbd5e1 !important;
    }

    /* Visibilité et persistance 100% absolue des icônes FontAwesome et Bootstrap */
    body.dark-mode i.fas, body.dark-mode i.far, body.dark-mode i.fab, body.dark-mode i.bi,
    :root[data-theme="dark"] i.fas, :root[data-theme="dark"] i.far, :root[data-theme="dark"] i.fab, :root[data-theme="dark"] i.bi {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        vertical-align: middle;
    }
}