/* ==========================================================================
   WEEGOSOFT MANAGER (WSM) — PREMIUM DARK MODE (Obsidian & Slate Theme)
   ========================================================================== */

body.dark-mode,
html.system-dark-mode body,
body.theme-dark {
    background-color: #0f172a !important; /* Deep Obsidian Slate */
    color: #f8fafc !important;          /* Slate 50 High Contrast Text */
}

/* NAVBAR & HEADER */
.dark-mode .navbar,
.dark-mode .header,
.dark-mode .navbar-top {
    background-color: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .navbar-light .navbar-brand,
.dark-mode .navbar-light .navbar-nav .nav-link {
    color: #f8fafc !important;
}

.dark-mode .navbar-light .navbar-nav .nav-link:hover {
    color: var(--primary) !important;
}

/* PAGE LOADER */
.dark-mode .page-loader-wrapper,
.theme-dark .page-loader-wrapper {
    background-color: #0f172a !important;
}

/* CARDS & CONTAINERS */
.dark-mode .card,
.dark-mode .settings-card,
.dark-mode .card-body,
.dark-mode .card-header,
.dark-mode .card-footer,
.dark-mode .settings-section-header,
.dark-mode .modal-content,
.dark-mode .dropdown-menu {
    background-color: #1e293b !important; /* Slate 800 Surface */
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .card-header,
.dark-mode .settings-section-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: #f8fafc !important;
}

.dark-mode .card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* OVERRIDE GENERIC UTILITY CLASSES */
.dark-mode .bg-white,
.dark-mode .bg-light {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

.dark-mode .text-dark,
.dark-mode .text-body {
    color: #f8fafc !important;
}

.dark-mode .text-muted,
.dark-mode small.text-muted,
.dark-mode .settings-desc {
    color: #94a3b8 !important; /* Slate 400 - Clear Legibility */
}

/* FORM CONTROLS & INPUTS */
.dark-mode .form-control,
.dark-mode select.form-control,
.dark-mode textarea.form-control,
.dark-mode .custom-select,
.dark-mode .input-group-text {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
}

/* Le popup natif d'un <select> hérite de sa couleur de texte mais pas de son
   fond (rendu OS, reste blanc) — sans ceci, les options non survolées sont en
   texte clair sur fond blanc, donc invisibles (seule l'option survolée/focus
   reste lisible grâce au surlignage bleu du navigateur). Repéré sur les longues
   listes (pays, devises) où la plupart des lignes ne sont jamais survolées. */
.dark-mode select.form-control option,
.dark-mode .custom-select option {
    background-color: #0f172a;
    color: #f8fafc;
}

.dark-mode .form-control:focus,
.dark-mode select.form-control:focus,
.dark-mode textarea.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent) !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
}

.dark-mode .form-control::placeholder {
    color: #64748b !important;
}

/* BUTTONS */
.dark-mode .btn-light,
.theme-dark .btn-light {
    background-color: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

.dark-mode .btn-light:hover,
.theme-dark .btn-light:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
    border-color: #64748b !important;
}

.dark-mode .btn-secondary,
.theme-dark .btn-secondary,
.dark-mode .btn-dark,
.theme-dark .btn-dark {
    background-color: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}

.dark-mode .btn-secondary:hover,
.theme-dark .btn-secondary:hover,
.dark-mode .btn-dark:hover,
.theme-dark .btn-dark:hover {
    background-color: #475569 !important;
    color: #ffffff !important;
    border-color: #64748b !important;
}

.dark-mode .btn-outline-secondary,
.theme-dark .btn-outline-secondary {
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

.dark-mode .btn-outline-secondary:hover,
.theme-dark .btn-outline-secondary:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* LIST GROUPS */
.dark-mode .list-group,
.dark-mode .list-group-item {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.dark-mode .list-group-item.active {
    background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* TABLES */
.dark-mode .table,
.dark-mode .table td,
.dark-mode .table th {
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .table thead th {
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #cbd5e1 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* MODALS & DROPDOWNS */
.dark-mode .modal-content,
.dark-mode .dropdown-menu,
.theme-dark .modal-content,
.theme-dark .dropdown-menu {
    background-color: #1e293b !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

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

.dark-mode .modal-footer,
.theme-dark .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .modal-title,
.theme-dark .modal-title {
    color: #f8fafc !important;
}

.dark-mode .modal-body,
.theme-dark .modal-body {
    color: #cbd5e1 !important;
}

.dark-mode .modal-header .close,
.dark-mode .modal-content .close,
.theme-dark .modal-header .close,
.theme-dark .modal-content .close {
    color: #cbd5e1 !important;
    text-shadow: none !important;
    opacity: 0.75;
}

.dark-mode .modal-header .close:hover,
.dark-mode .modal-content .close:hover,
.theme-dark .modal-header .close:hover,
.theme-dark .modal-content .close:hover {
    color: #ffffff !important;
    opacity: 1;
}

.dark-mode .dropdown-item,
.theme-dark .dropdown-item {
    color: #f8fafc !important;
}

.dark-mode .dropdown-item:hover,
.theme-dark .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--primary) !important;
}

/* BOTTOM NAVIGATION BAR */
body.dark-mode #navbarBottom,
.theme-dark #navbarBottom {
    background-color: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode #navbarBottom .nav-item .nav-link,
.theme-dark #navbarBottom .nav-item .nav-link {
    color: #94a3b8 !important;
}

body.dark-mode #navbarBottom .nav-item.active .nav-link,
.theme-dark #navbarBottom .nav-item.active .nav-link,
body.dark-mode #navbarBottom .nav-item .nav-link.active,
.theme-dark #navbarBottom .nav-item .nav-link.active {
    color: var(--primary) !important;
}

/* ALERTS & BADGES */
.dark-mode .alert {
    border-radius: 10px !important;
}

.dark-mode .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

.dark-mode .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

.dark-mode .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

.dark-mode .alert-info {
    background-color: rgba(6, 182, 212, 0.15) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
    color: #38bdf8 !important;
}

/* CUSTOM ACCENT HIGHLIGHTS */
.dark-mode .border-bottom,
.dark-mode .border-top,
.dark-mode .border-left,
.dark-mode .border-right,
.dark-mode .border {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   POS & SALES INTERFACE — DARK MODE OPTIMIZATIONS
   ========================================================================== */

/* Search Bars & Input Groups in POS */
body.dark-mode .input-group-text,
.theme-dark .input-group-text,
body.dark-mode .input-group-prepend .input-group-text,
.theme-dark .input-group-prepend .input-group-text,
body.dark-mode .input-group-append .input-group-text,
.theme-dark .input-group-append .input-group-text {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

body.dark-mode #input-place-search-local,
.theme-dark #input-place-search-local,
body.dark-mode #input-customer-search,
.theme-dark #input-customer-search,
body.dark-mode #invoice-place-search,
.theme-dark #invoice-place-search,
body.dark-mode .pos-search-input,
.theme-dark .pos-search-input {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark-mode #input-place-search-local::placeholder,
.theme-dark #input-place-search-local::placeholder,
body.dark-mode #input-customer-search::placeholder,
.theme-dark #input-customer-search::placeholder {
    color: #64748b !important;
}

/* POS Toolbar (Qty, Quick Add, View Mode, Sorter) */
body.dark-mode .pos-toolbar-btn,
.theme-dark .pos-toolbar-btn,
body.dark-mode .display-mode,
.theme-dark .display-mode {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .pos-toolbar-btn:hover,
.theme-dark .pos-toolbar-btn:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

body.dark-mode .pos-toolbar-btn.active,
.theme-dark .pos-toolbar-btn.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

body.dark-mode .display-mode a.btn-light,
.theme-dark .display-mode a.btn-light {
    background-color: transparent !important;
    color: #94a3b8 !important;
}

body.dark-mode .display-mode a.btn-primary,
.theme-dark .display-mode a.btn-primary {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Status Filters (Tables / Places) */
body.dark-mode .status-filter-btn,
.theme-dark .status-filter-btn,
body.dark-mode .btn-view-toggle,
.theme-dark .btn-view-toggle {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .status-filter-btn:hover,
.theme-dark .status-filter-btn:hover,
body.dark-mode .btn-view-toggle:hover,
.theme-dark .btn-view-toggle:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

body.dark-mode .status-filter-btn.active,
.theme-dark .status-filter-btn.active,
body.dark-mode .btn-view-toggle.active,
.theme-dark .btn-view-toggle.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

/* Client & Server Selector Row in POS Cart */
body.dark-mode .select-customer-server-row,
.theme-dark .select-customer-server-row {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .select-customer-server-row #invoice-client-name,
.theme-dark .select-customer-server-row #invoice-client-name,
body.dark-mode .select-customer-server-row #invoice-waiter-name,
.theme-dark .select-customer-server-row #invoice-waiter-name {
    color: #cbd5e1 !important;
}

body.dark-mode .select-customer-server-row #invoice-waiter-name.text-primary,
.theme-dark .select-customer-server-row #invoice-waiter-name.text-primary {
    color: var(--primary) !important;
}

/* Sticky top bars and headers inside POS */
body.dark-mode .sticky-top.bg-light,
.theme-dark .sticky-top.bg-light,
body.dark-mode #products .bg-light,
.theme-dark #products .bg-light {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Table Cards in Places Grid */
body.dark-mode .table-card-rich,
.theme-dark .table-card-rich,
body.dark-mode .table-card,
.theme-dark .table-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

body.dark-mode .table-card-rich:hover,
.theme-dark .table-card-rich:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .table-card-rich.active,
.theme-dark .table-card-rich.active,
body.dark-mode .table-card.active,
.theme-dark .table-card.active {
    border-color: var(--primary) !important;
    background-color: color-mix(in srgb, var(--primary) 15%, #1e293b) !important;
}

/* Clear Cart Button */
body.dark-mode #btn-clear-cart,
.theme-dark #btn-clear-cart,
body.dark-mode .btn-vider-panier,
.theme-dark .btn-vider-panier {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

body.dark-mode #btn-clear-cart:hover,
.theme-dark #btn-clear-cart:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

/* Inline bg-white overrides for POS search inputs and icons */
body.dark-mode .input-group-text.bg-white,
.theme-dark .input-group-text.bg-white,
body.dark-mode .bg-white.border-right-0,
.theme-dark .bg-white.border-right-0,
body.dark-mode #invoice-places,
.theme-dark #invoice-places {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* Category sidebar and tabs in POS */
body.dark-mode #invoice-sidebar,
.theme-dark #invoice-sidebar {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode #invoice-sidebar .btn-light,
.theme-dark #invoice-sidebar .btn-light {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

/* Delivery rows in POS Cart (Light & Dark Mode rules) */
.pos-delivery-row {
    background-color: #ffffff !important;
}

#trigger-delivery-address #delivery-address-display.text-danger {
    color: #e51c23 !important;
}

#trigger-delivery-address #delivery-address-display.text-success {
    color: #2e7d32 !important;
}

body.dark-mode .pos-delivery-row,
.theme-dark .pos-delivery-row {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode #trigger-delivery-address #delivery-address-display.text-danger,
.theme-dark #trigger-delivery-address #delivery-address-display.text-danger {
    color: #f87171 !important;
}

/* Global bg-white / bg-light / text-dark Dark Mode Overrides */
.dark-mode .bg-white,
.theme-dark .bg-white {
    background-color: #1e293b !important;
}

.dark-mode .bg-light,
.theme-dark .bg-light {
    background-color: #0f172a !important;
}

.dark-mode .text-dark,
.theme-dark .text-dark {
    color: #f8fafc !important;
}

/* Light Background Hover state text color enforcement */
.bg-primary-light,
.bg-primary-soft,
.bg-light-hover:hover,
.list-group-item a:hover.bg-primary-light,
.list-group-item a.bg-primary-light {
    color: #0f172a !important;
}

.bg-primary-light .text-muted,
.bg-primary-soft .text-muted,
.bg-light-hover:hover .text-muted,
.list-group-item a:hover .text-muted {
    color: #334155 !important;
}

/* Sidebar & Modal Quick Actions Hover contrast */
#pos-actions-sidebar .list-group-item a:hover .pos-action-label,
#modal-flash-actions .flash-action-card:hover .font-weight-bold {
    color: var(--primary) !important;
}


body.dark-mode #trigger-delivery-address #delivery-address-display.text-success,
.theme-dark #trigger-delivery-address #delivery-address-display.text-success {
    color: #4ade80 !important;
}

/* WSM Design System - Accent IA Dark Mode */
.dark-mode .bg-light-purple,
.theme-dark .bg-light-purple {
    background: color-mix(in srgb, #6366f1 18%, transparent) !important;
}

.dark-mode .btn-purple,
.theme-dark .btn-purple {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #ffffff !important;
}

.dark-mode .btn-outline-purple,
.theme-dark .btn-outline-purple {
    border-color: #8b5cf6 !important;
    color: #c4b5fd !important;
    background: transparent !important;
}
.dark-mode .btn-outline-purple:hover,
.theme-dark .btn-outline-purple:hover {
    background: color-mix(in srgb, #6366f1 25%, transparent) !important;
    color: #ffffff !important;
}





/* ==========================================================================
   FIX — éléments restés clairs en mode sombre (accent dynamique via --primary)
   ========================================================================== */
body.dark-mode,
body.theme-dark {
    --primary-light: color-mix(in srgb, var(--primary) 18%, #0f172a);
}

.dark-mode .sidebar-content,
.dark-mode .chatbot-msg.ai,
.dark-mode .input-group.shadow-sm,
.dark-mode .nav-link.active {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

.dark-mode .list-group-item .bg-primary-light,
.dark-mode .list-group-item .smallest {
    color: var(--primary) !important;
}


/* ==========================================================================
   CASHMANAGER SPECIFIC DARK MODE ADJUSTMENTS
   ========================================================================== */
.dark-mode #sidebar,
.dark-mode #sidebar .bg-white {
    background-color: #1e293b !important;
}

.dark-mode .sidebar-sticky-bottom {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .sidebar-user-toggle {
    color: #f8fafc !important;
}

.dark-mode .sidebar-user-name {
    color: #f8fafc !important;
}

.dark-mode .sidebar-user-menu {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .sidebar-user-menu .dropdown-header {
    color: #94a3b8 !important;
}

.dark-mode .sidebar-user-menu .dropdown-item {
    color: #e2e8f0 !important;
}

.dark-mode .sidebar-user-menu .dropdown-item:hover,
.dark-mode .sidebar-user-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.dark-mode .sidebar-user-menu .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode #navbarBottom {
    background-color: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode #navbarBottom .nav-link {
    color: #94a3b8 !important;
}

.dark-mode #navbarBottom .nav-link.active {
    color: var(--primary, #f59e0b) !important;
}

.dark-mode .list-group-item {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

.dark-mode .border-bottom,
.dark-mode .border-top,
.dark-mode .border {
    border-color: rgba(255, 255, 255, 0.08) !important;
}


/* ==========================================================================
   DARK MODE ENHANCEMENTS FOR CASHMANAGER & FINTECH GOLD ACCENT
   ========================================================================== */

/* 1. Header supérieur (navbarTop) unifié en Obsidian */
body.dark-mode #navbarTop,
html.dark-mode #navbarTop,
.dark-mode #navbarTop,
.dark-mode .navbar-top,
body.dark-mode #navbarTop.bg-primary,
html.dark-mode #navbarTop.bg-primary {
    background-color: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}

body.dark-mode #navbarTop .navbar-title,
body.dark-mode #navbarTop .navbar-title span,
body.dark-mode #navbarTop .navbar-brand,
body.dark-mode #navbarTop a,
body.dark-mode #navbarTop i,
body.dark-mode #navbarTop span,
body.dark-mode #navbarTop .text-dark {
    color: #f8fafc !important;
}

/* Bouton Assistant IA dans la navbar en mode sombre */
body.dark-mode #btn-chatbot,
.dark-mode #btn-chatbot {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}

/* 2. En-tête de la Sidebar en Dark Mode (plus de bande jaune criarde) */
body.dark-mode #sidebar .navbar-header,
html.dark-mode #sidebar .navbar-header,
.dark-mode #sidebar .navbar-header,
.dark-mode #sidebar .navbar-header.bg-primary {
    background-color: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode #sidebar .navbar-header .navbar-title,
body.dark-mode #sidebar .navbar-header .navbar-title span,
body.dark-mode #sidebar .navbar-header i,
body.dark-mode #sidebar .navbar-header span {
    color: #f8fafc !important;
}

/* Liens et icônes de la sidebar en dark mode : LISIBILITÉ ÉLEVÉE (FinTech Slate & Gold) */
body.dark-mode #sidebar,
html.dark-mode #sidebar,
.dark-mode #sidebar {
    background-color: #0f172a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode #sidebar a,
body.dark-mode #sidebar .nav-link,
body.dark-mode #user-sidebar-menu a,
body.dark-mode #user-sidebar-menu .nav-link,
.dark-mode #sidebar a,
.dark-mode #sidebar .nav-link {
    background-color: transparent !important;
    color: #f1f5f9 !important; /* Blanc-argenté très clair et parfaitement lisible */
    border-color: transparent !important;
    font-size: 0.925rem !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease-in-out !important;
}

/* Texte (span) dans les liens du menu latéral */
body.dark-mode #sidebar .nav-link span,
body.dark-mode #sidebar a span,
body.dark-mode #user-sidebar-menu span,
.dark-mode #sidebar span {
    color: #f1f5f9 !important;
    font-weight: 500 !important;
}

/* Icônes SVG et FontAwesome dans le menu latéral */
body.dark-mode #sidebar .nav-link i,
body.dark-mode #sidebar .nav-link svg,
body.dark-mode #sidebar a svg,
body.dark-mode #sidebar .nav-link svg *,
body.dark-mode #user-sidebar-menu svg,
body.dark-mode #user-sidebar-menu svg *,
.dark-mode #sidebar svg,
.dark-mode #sidebar i {
    color: #94a3b8 !important;
    fill: #94a3b8 !important;
    stroke: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* État Survol (Hover) dans la sidebar */
body.dark-mode #sidebar a:hover,
body.dark-mode #sidebar .nav-link:hover,
body.dark-mode #user-sidebar-menu a:hover,
body.dark-mode #user-sidebar-menu .nav-link:hover,
.dark-mode #sidebar a:hover,
.dark-mode #sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-mode #sidebar a:hover span,
body.dark-mode #sidebar .nav-link:hover span,
.dark-mode #sidebar a:hover span {
    color: #ffffff !important;
}

body.dark-mode #sidebar a:hover svg,
body.dark-mode #sidebar .nav-link:hover svg,
body.dark-mode #sidebar a:hover svg *,
body.dark-mode #sidebar a:hover i,
.dark-mode #sidebar a:hover svg {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}

/* État Actif (Selected Page) dans la sidebar */
body.dark-mode #sidebar .nav-item.active > a,
body.dark-mode #sidebar .nav-link.active,
body.dark-mode #sidebar li.active > a,
body.dark-mode #user-sidebar-menu li.active > a,
body.dark-mode #user-sidebar-menu .nav-link.active,
.dark-mode #sidebar .nav-item.active > a,
.dark-mode #sidebar .nav-link.active,
.dark-mode #sidebar li.active > a {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    font-weight: 600 !important;
    border-left: 3px solid #f59e0b !important;
}

body.dark-mode #sidebar .nav-item.active > a span,
body.dark-mode #sidebar .nav-link.active span,
body.dark-mode #sidebar li.active > a span,
.dark-mode #sidebar .nav-link.active span {
    color: #fbbf24 !important;
    font-weight: 600 !important;
}

body.dark-mode #sidebar .nav-item.active > a svg,
body.dark-mode #sidebar .nav-item.active > a svg *,
body.dark-mode #sidebar .nav-link.active svg,
body.dark-mode #sidebar .nav-link.active svg *,
body.dark-mode #sidebar li.active > a svg,
body.dark-mode #sidebar li.active > a svg *,
body.dark-mode #sidebar .nav-link.active i,
.dark-mode #sidebar .nav-link.active svg {
    color: #fbbf24 !important;
    fill: #fbbf24 !important;
}

/* 3. Onglets de filtrage (Tout / Recettes / Dépenses) */
body.dark-mode #categories,
body.dark-mode .navbar-tabs-container,
.dark-mode #categories,
.dark-mode .navbar-tabs-container {
    background-color: #1e293b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .nav-tabs,
body.dark-mode .navbar-tabs,
.dark-mode .nav-tabs,
.dark-mode .navbar-tabs {
    border-bottom: none !important;
    background-color: #1e293b !important;
}

body.dark-mode .nav-tabs .nav-link,
body.dark-mode .navbar-tabs .nav-link,
.dark-mode .nav-tabs .nav-link,
.dark-mode .navbar-tabs .nav-link {
    color: #94a3b8 !important; /* Ardoise doux lisible, plus de bleu criard */
    border: none !important;
    background: transparent !important;
    font-weight: 500 !important;
    padding: 12px 16px !important;
    transition: color 0.15s ease-in-out !important;
}

body.dark-mode .nav-tabs .nav-link:hover,
body.dark-mode .navbar-tabs .nav-link:hover,
.dark-mode .nav-tabs .nav-link:hover {
    color: #f8fafc !important;
}

body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .navbar-tabs .nav-link.active,
.dark-mode .nav-tabs .nav-link.active {
    color: #fbbf24 !important; /* Doré éclatant */
    background: transparent !important;
    border-bottom: 3px solid #f59e0b !important;
    font-weight: 700 !important;
}

/* 4. Tableau des opérations & Boutons d'action circulaires */
body.dark-mode .table,
body.dark-mode .table-responsive,
body.dark-mode table,
.dark-mode .table {
    color: #f8fafc !important;
    background-color: #0f172a !important;
}

body.dark-mode table td,
body.dark-mode table th,
.dark-mode table td,
.dark-mode table th {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode table thead th,
.dark-mode table thead th {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
}

/* Boutons d'action circulaires (Voir, Éditer, Supprimer) */
body.dark-mode .btn-icon,
body.dark-mode a.btn-icon,
body.dark-mode button.btn-icon,
.dark-mode .btn-icon {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

body.dark-mode .btn-icon:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

body.dark-mode .btn-outline-primary.btn-icon,
.dark-mode .btn-outline-primary.btn-icon {
    color: #fbbf24 !important;
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

body.dark-mode .btn-outline-primary.btn-icon:hover {
    background-color: #f59e0b !important;
    color: #18181b !important;
}

body.dark-mode .btn-outline-secondary.btn-icon,
.dark-mode .btn-outline-secondary.btn-icon {
    color: #cbd5e1 !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .btn-outline-danger.btn-icon,
.dark-mode .btn-outline-danger.btn-icon {
    color: #f87171 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

body.dark-mode .btn-outline-danger.btn-icon:hover {
    background-color: #ef4444 !important;
    color: #fff !important;
}

/* 5. Sélecteur de période (_filter_date_buttons.php) */
body.dark-mode .btn-white,
body.dark-mode .btn-white a,
body.dark-mode .btn-white span,
.dark-mode .btn-white {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 6. Bas de la sidebar en dark mode : profil utilisateur & menu dropup */
body.dark-mode .sidebar-sticky-bottom,
.dark-mode .sidebar-sticky-bottom {
    background-color: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .sidebar-user-name,
.dark-mode .sidebar-user-name {
    color: #f8fafc !important;
}

body.dark-mode .sidebar-user-toggle:hover,
.dark-mode .sidebar-user-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .sidebar-user-menu,
.dark-mode .sidebar-user-menu {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .sidebar-user-menu .dropdown-item,
.dark-mode .sidebar-user-menu .dropdown-item {
    color: #e2e8f0 !important;
}

body.dark-mode .sidebar-user-menu .dropdown-item:hover,
.dark-mode .sidebar-user-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-mode .sidebar-user-menu .dropdown-header,
.dark-mode .sidebar-user-menu .dropdown-header {
    color: #94a3b8 !important;
}

body.dark-mode .sidebar-user-menu .dropdown-divider,
.dark-mode .sidebar-user-menu .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}



/* 7. Barre de recherche des contacts & formulaires de recherche */

body.dark-mode .cm-contact-search-form .input-group,

.dark-mode .cm-contact-search-form .input-group {

    background-color: #1e293b !important;

    border-color: rgba(255, 255, 255, 0.12) !important;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;

}



body.dark-mode .cm-contact-search-form input,

.dark-mode .cm-contact-search-form input,

body.dark-mode .cm-contact-search-form .input-group-text,

.dark-mode .cm-contact-search-form .input-group-text,

body.dark-mode .cm-contact-search-form #clearSearchBtn a,

.dark-mode .cm-contact-search-form #clearSearchBtn a {

    background-color: transparent !important;

    color: #f8fafc !important;

}



body.dark-mode .cm-contact-search-form input::placeholder,

.dark-mode .cm-contact-search-form input::placeholder {

    color: #94a3b8 !important;

}



/* Modales de sélection (Comptes & Clients) */

body.dark-mode #modal-bank .modal-content,

.dark-mode #modal-bank .modal-content,

body.dark-mode #modal-customers .modal-content,

.dark-mode #modal-customers .modal-content {

    background-color: #0f172a !important;

    color: #f8fafc !important;

}



body.dark-mode #modal-bank .modal-header,

.dark-mode #modal-bank .modal-header,

body.dark-mode #modal-customers .modal-header,

.dark-mode #modal-customers .modal-header {

    background-color: #1e293b !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

    color: #f8fafc !important;

}



body.dark-mode #modal-bank form,

.dark-mode #modal-bank form,

body.dark-mode #modal-customers form,

.dark-mode #modal-customers form {

    background-color: #1e293b !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}



body.dark-mode #modal-bank input.form-control,

.dark-mode #modal-bank input.form-control,

body.dark-mode #modal-customers input.form-control,

.dark-mode #modal-customers input.form-control {

    background-color: #0f172a !important;

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    color: #f8fafc !important;

}



body.dark-mode #modal-bank input.form-control::placeholder,

.dark-mode #modal-bank input.form-control::placeholder,

body.dark-mode #modal-customers input.form-control::placeholder,

.dark-mode #modal-customers input.form-control::placeholder {

    color: #94a3b8 !important;

}



body.dark-mode #modal-bank .modal-footer,

.dark-mode #modal-bank .modal-footer,

body.dark-mode #modal-customers .modal-footer,

.dark-mode #modal-customers .modal-footer {

    background-color: #1e293b !important;

    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

}



/* Cartes Objectifs & Budgets en Dark Mode */

body.dark-mode .cm-objective-card,

.dark-mode .cm-objective-card,

body.dark-mode .cm-budget-card,

.dark-mode .cm-budget-card {

    background-color: #1e293b !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;

}



body.dark-mode .cm-objective-card:hover,

.dark-mode .cm-objective-card:hover,

body.dark-mode .cm-budget-card:hover,

.dark-mode .cm-budget-card:hover {

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;

}



body.dark-mode .cm-objective-card .text-dark,

.dark-mode .cm-objective-card .text-dark,

body.dark-mode .cm-budget-card .text-dark,

.dark-mode .cm-budget-card .text-dark {

    color: #f8fafc !important;

}



body.dark-mode .cm-objective-card .border-top,

.dark-mode .cm-objective-card .border-top,

body.dark-mode .cm-budget-card .border-top,

.dark-mode .cm-budget-card .border-top {

    border-top-color: rgba(255, 255, 255, 0.08) !important;

}



body.dark-mode .cm-objective-card .progress,

.dark-mode .cm-objective-card .progress,

body.dark-mode .cm-budget-card .progress,

.dark-mode .cm-budget-card .progress {

    background-color: #334155 !important;

}



/* Widgets Dashboard en Dark Mode */

body.dark-mode .cm-dashboard-widget,

.dark-mode .cm-dashboard-widget {

    background-color: #1e293b !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}



body.dark-mode .cm-dashboard-widget .text-dark,

.dark-mode .cm-dashboard-widget .text-dark {

    color: #f8fafc !important;

}



body.dark-mode .cm-dashboard-widget .border-bottom,

.dark-mode .cm-dashboard-widget .border-bottom {

    border-bottom-color: rgba(255, 255, 255, 0.08) !important;

}



body.dark-mode .cm-dashboard-widget .btn-light,

.dark-mode .cm-dashboard-widget .btn-light {

    background-color: rgba(255, 255, 255, 0.08) !important;

    color: #fbbf24 !important;

    border: none !important;

}



/* Tiroir de personnalisation des widgets en Dark Mode */

body.dark-mode .dashboard-customize-sidebar,

.dark-mode .dashboard-customize-sidebar {

    background-color: #0f172a !important;

    color: #f8fafc !important;

    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;

}



body.dark-mode .dashboard-customize-sidebar .sidebar-header,

.dark-mode .dashboard-customize-sidebar .sidebar-header,

body.dark-mode .dashboard-customize-sidebar .sidebar-footer,

.dark-mode .dashboard-customize-sidebar .sidebar-footer {

    background-color: #1e293b !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}



body.dark-mode .dashboard-customize-sidebar .text-dark,

.dark-mode .dashboard-customize-sidebar .text-dark {

    color: #f8fafc !important;

}



body.dark-mode .dashboard-customize-sidebar .widget-customize-item,

.dark-mode .dashboard-customize-sidebar .widget-customize-item {

    background-color: #1e293b !important;

    border-color: rgba(255, 255, 255, 0.08) !important;

}



body.dark-mode .dashboard-customize-sidebar .widget-customize-item .btn-icon,

.dark-mode .dashboard-customize-sidebar .widget-customize-item .btn-icon {

    background-color: #0f172a !important;

}



body.dark-mode .dashboard-customize-sidebar .custom-switch .custom-control-label::before,

.dark-mode .dashboard-customize-sidebar .custom-switch .custom-control-label::before {

    background-color: #334155 !important;

    border-color: rgba(255, 255, 255, 0.15) !important;

}



body.dark-mode .dashboard-customize-sidebar .custom-switch .custom-control-input:checked ~ .custom-control-label::before,

.dark-mode .dashboard-customize-sidebar .custom-switch .custom-control-input:checked ~ .custom-control-label::before {

    background-color: #f59e0b !important;

    border-color: #f59e0b !important;

}



body.dark-mode #btn-customize-dashboard,

.dark-mode #btn-customize-dashboard {

    color: #f8fafc !important;

}