/* Centralised Dark Mode Theme for KNOWDG Applied when has class .dark-mode Keep selectors reasonably scoped to avoid breaking legacy layouts. */ body.dark-mode { background-color: #121B2B; color: #D1D5DB; } /* Content area */ body.dark-mode .content { background-color: #121B2B; } /* Top bar + sidebar */ body.dark-mode .top-bar { /* !important : bat la règle universelle "AGGRESSIVE WHITE BACKGROUND OVERRIDE" (body.dark-mode *:not(...)) qui, plus spécifique, rendait la barre transparente */ background-color: #1A2B4F !important; border-bottom: 1px solid rgba(255,255,255,0.1); } body.dark-mode .top-bar .logo img, body.dark-mode .navbar-brand img, body.dark-mode .sidebar-logo img { content: url('/assets/images/logo_horizontal_dark.png'); } body.dark-mode .sidebar { /* idem : la règle universelle rendait aussi la sidebar transparente */ background-color: #0D1837 !important; border-right: 1px solid rgba(255,255,255,0.1); } body.dark-mode .sidebar a { color: #D1D5DB; } body.dark-mode .sidebar a:hover, body.dark-mode .sidebar a.active { background-color: rgba(255, 255, 255, 0.06); } body.dark-mode .sidebar .nav-link i { color: #93c5fd; } body.dark-mode .sidebar-menu::-webkit-scrollbar-thumb { background: #2d3748; } body.dark-mode .sidebar-menu::-webkit-scrollbar-thumb:hover { background: #4a5568; } /* Links */ body.dark-mode a { color: #93c5fd; } body.dark-mode a:hover { color: #bfdbfe; } /* Common surfaces */ body.dark-mode .onboarding-frame, body.dark-mode .dashboard-card, body.dark-mode .dashboard-chart, body.dark-mode .dashboard-table, body.dark-mode .qcm-card, body.dark-mode .qcm-grid-item, body.dark-mode .card, body.dark-mode .card-body, body.dark-mode .modal-content, body.dark-mode .stat-card, body.dark-mode .action-card, body.dark-mode .chart-container, body.dark-mode .section-header { background-color: #1A2B4F !important; color: #D1D5DB; border-color: rgba(255,255,255,0.15); } body.dark-mode .card-header { background-color: #0D1837 !important; color: #FFFFFF !important; border-bottom: 1px solid rgba(255,255,255,0.15); } body.dark-mode .card-title { color: #FFFFFF !important; } body.dark-mode .section-header h3 { color: #FFFFFF !important; } body.dark-mode .section-header p { color: #D1D5DB !important; } /* Carte de section (dashboard particulier, "Mes QCM"…) : sans surface, la règle universelle « AGGRESSIVE WHITE BACKGROUND OVERRIDE » rendait le CORPS de carte transparent (en-tête colorée mais contenu « brut », sans encapsulation). !important pour battre cette règle universelle plus spécifique. */ body.dark-mode .qcm-section { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.08); } /* Page headers */ body.dark-mode .page-header { background-color: transparent; border-bottom: 1px solid rgba(255,255,255,0.1); } /* Headings */ body.dark-mode .page-title, 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-header h3 { color: #FFFFFF !important; font-weight: 600; } body.dark-mode p, body.dark-mode .page-description, body.dark-mode .helper-text, body.dark-mode small, body.dark-mode .text-muted, body.dark-mode .form-text { color: #D1D5DB !important; } body.dark-mode .candidate-info small { color: #D1D5DB !important; } body.dark-mode strong { color: #FFFFFF !important; } /* Buttons / actions */ body.dark-mode .btn-dark-mode { color: #f1c40f; } body.dark-mode .actions button, body.dark-mode .btn-notifications, body.dark-mode .btn-cart { color: #D1D5DB; } body.dark-mode .btn-cart:hover, body.dark-mode .btn-notifications:hover, body.dark-mode .btn-dark-mode:hover { background-color: rgba(255, 255, 255, 0.08); } body.dark-mode .btn-primary { background-color: #4a6cf7; border-color: #4a6cf7; color: #fff !important; } body.dark-mode .btn-primary:hover { background-color: #3d5dd6; border-color: #3d5dd6; color: #fff !important; } body.dark-mode .btn-outline-primary { border-color: #4a6cf7; color: #4a6cf7; background-color: transparent; } body.dark-mode .btn-outline-primary:hover { background-color: #4a6cf7; color: #fff; } body.dark-mode .btn-outline-secondary { border-color: rgba(255,255,255,0.3); color: #D1D5DB; background-color: transparent; } body.dark-mode .btn-outline-secondary:hover { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); } body.dark-mode .tokens-display { background-color: rgba(255, 255, 255, 0.10); } body.dark-mode .tokens-display i { color: #f1c40f; } /* Forms */ body.dark-mode input, body.dark-mode select, body.dark-mode textarea, body.dark-mode .form-control, body.dark-mode .form-select { background-color: #0D1837; border-color: rgba(255,255,255,0.15); color: #E5E7EB; } body.dark-mode input::placeholder, body.dark-mode textarea::placeholder { color: #6B7280; } 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-color: #0D1837; border-color: #4a6cf7; color: #E5E7EB; box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.20); } body.dark-mode label, body.dark-mode .form-label { color: #D1D5DB; } body.dark-mode input[type="checkbox"], body.dark-mode input[type="radio"] { border-color: rgba(255,255,255,0.3); } /* File upload */ body.dark-mode .file-upload-wrapper input[type="file"] { background-color: #0D1837; border-color: rgba(255,255,255,0.15); } /* Tables */ body.dark-mode table, body.dark-mode .table { color: #E5E7EB; background-color: transparent; } body.dark-mode .table thead th { background-color: #0D1837 !important; color: #FFFFFF !important; border-color: rgba(255,255,255,0.15); font-weight: 600; } body.dark-mode .table tbody td { background-color: transparent !important; color: #E5E7EB !important; border-color: rgba(255,255,255,0.1); } body.dark-mode .table tbody tr { background-color: transparent !important; } body.dark-mode .table tbody tr:hover { background-color: rgba(255,255,255,0.05) !important; } body.dark-mode .table-responsive { border-color: rgba(255,255,255,0.1); background-color: transparent; } body.dark-mode .dashboard-table th, body.dark-mode .dashboard-table td { background-color: transparent !important; color: #E5E7EB !important; border-color: rgba(255,255,255,0.10); } /* Alerts */ body.dark-mode .alert { border-color: rgba(255,255,255,0.2); } body.dark-mode .alert-info { background-color: rgba(59, 130, 246, 0.15); color: #93c5fd; border-color: rgba(59, 130, 246, 0.3); } body.dark-mode .alert-success { background-color: rgba(34, 197, 94, 0.15); color: #86efac; border-color: rgba(34, 197, 94, 0.3); } body.dark-mode .alert-warning { background-color: rgba(251, 191, 36, 0.15); color: #fde047; border-color: rgba(251, 191, 36, 0.3); } body.dark-mode .alert-danger { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); } /* Status badges */ body.dark-mode .status-badge { border-color: rgba(255,255,255,0.2); } body.dark-mode .status-badge.active { background-color: rgba(34, 197, 94, 0.2); color: #86efac; } body.dark-mode .status-badge.inactive { background-color: rgba(156, 163, 175, 0.2); color: #D1D5DB; } body.dark-mode .status-badge.locked { background-color: rgba(239, 68, 68, 0.2); color: #fca5a5; } /* Stats cards */ body.dark-mode .stat-card { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .stat-card .stat-icon { background-color: rgba(74, 108, 247, 0.2); color: #93c5fd; } body.dark-mode .stat-card h3 { color: #FFFFFF !important; font-weight: 700; } body.dark-mode .stat-card p { color: #D1D5DB !important; opacity: 1; } /* CSV format example */ body.dark-mode .csv-format-example { background-color: #0D1837; border-color: rgba(255,255,255,0.15); } body.dark-mode .csv-header { background-color: rgba(74, 108, 247, 0.2); color: #93c5fd; border-bottom: 1px solid rgba(255,255,255,0.1); } body.dark-mode .csv-row { border-bottom: 1px solid rgba(255,255,255,0.05); } /* Action buttons in tables */ body.dark-mode .action-buttons .btn { border-color: rgba(255,255,255,0.2); } /* Marketplace / cart base helpers */ body.dark-mode .marketplace-container, body.dark-mode .cart-container, body.dark-mode .transactions-container, body.dark-mode .reports-dashboard, body.dark-mode .profile-container { background-color: transparent; } /* Stats grid */ body.dark-mode .stats-grid { gap: 20px; } /* Charts section */ body.dark-mode .charts-section .chart-header { border-bottom: 1px solid rgba(255,255,255,0.1); } body.dark-mode .charts-section h3 { color: #E5E7EB; } body.dark-mode .charts-section p { color: #9CA3AF; } /* Actions grid */ body.dark-mode .actions-grid .action-card { transition: all 0.3s ease; } body.dark-mode .actions-grid .action-card:hover { background-color: #1F2F56; transform: translateY(-2px); } /* ─── Dashboard quick-action rows ──────────────────────────────────── */ .dash-action-row { background: #f8f9fa; color: #2c3e50; } .dash-item-title { color: #2c3e50; } .dash-item-desc { color: #7f8c8d; } .dash-section-label { color: #2c3e50; } .dash-icon-badge.dash-icon-primary { background: rgba(0,119,182,.12); color: #0077B6; } .dash-icon-badge.dash-icon-success { background: rgba(39,174,96,.12); color: #27ae60; } body.dark-mode .dash-action-row { background: #1A2B4F !important; border-color: rgba(255,255,255,0.12) !important; } body.dark-mode .dash-action-row:hover { background: #1F2F56 !important; } body.dark-mode .dash-item-title { color: #E5E7EB !important; } body.dark-mode .dash-item-desc { color: #9CA3AF !important; } body.dark-mode .dash-section-label { color: #D1D5DB !important; } body.dark-mode .dash-icon-badge.dash-icon-primary { background: rgba(0,168,232,.2) !important; color: #7dd3fc !important; } body.dark-mode .dash-icon-badge.dash-icon-success { background: rgba(46,204,113,.2) !important; color: #86efac !important; } /* ──────────────────────────────────────────────────────────────────── */ body.dark-mode .modal-header { background-color: #0D1837; border-bottom: 1px solid rgba(255,255,255,0.1); color: #E5E7EB; } body.dark-mode .modal-body { background-color: #1A2B4F; color: #D1D5DB; } body.dark-mode .modal-footer { background-color: #0D1837; border-top: 1px solid rgba(255,255,255,0.1); } /* Dividers */ body.dark-mode hr { border-color: rgba(255,255,255,0.1); } /* Form actions */ body.dark-mode .form-actions { border-top-color: rgba(255,255,255,0.1); } /* Candidate info in tables */ body.dark-mode .candidate-info strong { color: #E5E7EB;} /* Help page specific styles */ body.dark-mode .help-topbar { background-color: #1A2B4F !important; border-bottom: 1px solid rgba(255,255,255,0.1); } body.dark-mode .help-topbar-container { background-color: transparent; } body.dark-mode .help-topbar-logo img { content: url('/assets/images/logo_horizontal_dark.png'); } body.dark-mode .help-container, body.dark-mode .help-content, body.dark-mode .help-section { background-color: transparent !important; } body.dark-mode .help-hero { background: linear-gradient(135deg, #1A2B4F 0%, #0D1837 100%) !important; } body.dark-mode .help-hero h1, body.dark-mode .help-hero p { color: #FFFFFF !important; } body.dark-mode .help-search { background-color: #0D1837 !important; border-color: rgba(255,255,255,0.2); color: #E5E7EB !important; } body.dark-mode .help-search::placeholder { color: #9CA3AF; } body.dark-mode .help-search:focus { border-color: #4a6cf7; box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2); background-color: #0D1837 !important; } body.dark-mode .faq-item { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .faq-question { color: #FFFFFF !important; font-weight: 600; } body.dark-mode .faq-answer { color: #D1D5DB !important; border-top: 1px solid rgba(255,255,255,0.1); } body.dark-mode .faq-answer p, body.dark-mode .faq-answer li { color: #D1D5DB !important; } body.dark-mode .tutorial-step { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .tutorial-step h4 { color: #FFFFFF !important; } body.dark-mode .tutorial-step p, body.dark-mode .tutorial-step li { color: #D1D5DB !important; } body.dark-mode .feature-card { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .feature-card:hover { background-color: #1F2F56 !important; border-color: rgba(255,255,255,0.25); } body.dark-mode .feature-card h4 { color: #FFFFFF !important; } body.dark-mode .feature-card p { color: #D1D5DB !important; } body.dark-mode .help-section h2, body.dark-mode .help-section h3, body.dark-mode .help-section h4 { color: #FFFFFF !important; } body.dark-mode .help-section p, body.dark-mode .help-section li { color: #D1D5DB !important; } /* Navbar links for candidate pages */ body.dark-mode .navbar-dark .navbar-nav .nav-link { color: rgba(255,255,255,0.9); } body.dark-mode .navbar-dark .navbar-nav .nav-link:hover { color: #fff; } body.dark-mode .navbar-dark { background-color: #1A2B4F !important; } /* Cards for candidate pages */ body.dark-mode .campaign-card { background-color: #1A2B4F; border-color: rgba(255,255,255,0.1); } body.dark-mode .campaign-card .card-header { background-color: #0D1837; border-bottom: 1px solid rgba(255,255,255,0.1); color: #E5E7EB; } body.dark-mode .campaign-card .card-body { color: #D1D5DB; } body.dark-mode .campaign-card .card-footer { background-color: #0D1837; border-top: 1px solid rgba(255,255,255,0.1); } /* List groups */ body.dark-mode .list-group-item { background-color: #1A2B4F !important; border-color: rgba(255,255,255,0.15); color: #E5E7EB !important; } body.dark-mode .list-group-flush .list-group-item { background-color: transparent !important; } /* Badges */ body.dark-mode .badge { border: 1px solid rgba(255,255,255,0.2); font-weight: 600; } body.dark-mode .badge.bg-light { background-color: rgba(255,255,255,0.2) !important; color: #FFFFFF !important; } body.dark-mode .badge.bg-secondary { background-color: rgba(156, 163, 175, 0.3) !important; color: #E5E7EB !important; } body.dark-mode .status-badge.active, body.dark-mode .badge.bg-success { background-color: rgba(34, 197, 94, 0.25) !important; color: #86efac !important; } body.dark-mode .badge.bg-info { background-color: rgba(59, 130, 246, 0.25) !important; color: #93c5fd !important; } body.dark-mode .badge.bg-warning { background-color: rgba(251, 191, 36, 0.25) !important; color: #fde047 !important; } /* Dropdown menus */ body.dark-mode .dropdown-menu { background-color: #1A2B4F; border-color: rgba(255,255,255,0.1); } body.dark-mode .dropdown-item { color: #D1D5DB; } body.dark-mode .dropdown-item:hover { background-color: rgba(255,255,255,0.05); color: #E5E7EB; } body.dark-mode .dropdown-divider { border-color: rgba(255,255,255,0.1); } /* Background lights for body */ body.dark-mode.bg-light { background-color: #121B2B !important; } /* Campaign cards and lists - more specific */ body.dark-mode .campaigns-reports { background-color: transparent !important; } body.dark-mode .candidates-list { background: #1A2B4F !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; } body.dark-mode .campaigns-reports .section-header, body.dark-mode .candidates-list .section-header { background: transparent !important; border: none !important; box-shadow: none !important; } /* Candidate info in tables */ body.dark-mode .candidate-info strong { color: #FFFFFF !important; font-weight: 600; } body.dark-mode .candidate-info { color: #E5E7EB !important; } /* Stats grid */ body.dark-mode .stats-grid .stat-card { box-shadow: 0 2px 8px rgba(0,0,0,0.3); } /* Force white text on important elements */ body.dark-mode th { color: #FFFFFF !important; } body.dark-mode .card-title, body.dark-mode .modal-title { color: #FFFFFF !important; } /* Transactions page */ body.dark-mode .transactions-container { background-color: transparent !important; } body.dark-mode .transactions-container .card { background-color: #1A2B4F !important; } /* ============================================ MARKETPLACE & QCM SPECIFIC STYLES ============================================ */ /* Marketplace section */ body.dark-mode .marketplace-section { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } body.dark-mode .marketplace-section .section-header { background-color: transparent; border-bottom-color: rgba(255,255,255,0.1); } /* QCM Cards */ body.dark-mode .qcm-card { background: #1a2b4f !important; border-color: rgba(255,255,255,.08); box-shadow: 0 1px 5px rgba(0,0,0,.4); } body.dark-mode .qcm-card:hover { border-color: rgba(99,102,241,.4); box-shadow: 0 8px 24px rgba(0,0,0,.5); } body.dark-mode .qcm-card-body { color: #d1d5db; } body.dark-mode .qcm-title { color: #f1f5f9 !important; } body.dark-mode .qcm-subtitle { color: #9ca3af !important; } body.dark-mode .qcm-cat-chip { background: rgba(29,78,216,.25); color: #93c5fd; } body.dark-mode .qcm-footer { background: #162240; border-top-color: rgba(255,255,255,.06); } body.dark-mode .price-badge { color: #93c5fd; } body.dark-mode .qcm-actions .btn-cart { background: #0d1837; border-color: rgba(255,255,255,.12); color: #9ca3af; } body.dark-mode .qcm-actions .btn-cart:hover { border-color: #818cf8; color: #818cf8; background: rgba(99,102,241,.15); } body.dark-mode .btn-details { color: #6b7280; border-top-color: rgba(255,255,255,.06); } body.dark-mode .btn-details:hover { color: #818cf8; background: rgba(99,102,241,.1); } body.dark-mode .btn-assign { background: #0f766e; color: #ccfbf1; } body.dark-mode .btn-assign:hover { background: #0d9488; } body.dark-mode .mp-header-cart-btn { color: #93c5fd; border-color: #374151; } body.dark-mode .mp-header-cart-btn:hover { background: rgba(147,197,253,.1); border-color: #93c5fd; } body.dark-mode .qcm-header { background: linear-gradient(180deg, #1F2F56 0%, #1A2B4F 100%) !important; border-bottom-color: rgba(255,255,255,0.1); } body.dark-mode .qcm-header h3 { color: #FFFFFF !important; } body.dark-mode .qcm-date { color: #D1D5DB !important; } body.dark-mode .qcm-body { color: #D1D5DB; } body.dark-mode .qcm-description { color: #D1D5DB !important; } body.dark-mode .qcm-price { color: #FFFFFF !important; } body.dark-mode .qcm-price-value { color: #FFFFFF !important; } /* QCM Tags */ body.dark-mode .qcm-tag { background-color: rgba(74, 108, 247, 0.25) !important; color: #93c5fd !important; border: 1px solid rgba(147, 197, 253, 0.3); } body.dark-mode .qcm-tag--more { background-color: rgba(156, 163, 175, 0.25) !important; color: #D1D5DB !important; } /* Stat badges for QCM */ body.dark-mode .stat-badge { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } body.dark-mode .stat-badge.stat-total { background: linear-gradient(135deg, rgba(33, 150, 243, 0.3) 0%, rgba(33, 150, 243, 0.2) 100%); border-color: #2196f3; color: #93c5fd; } body.dark-mode .stat-badge.stat-available { background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(76, 175, 80, 0.2) 100%); border-color: #4caf50; color: #86efac; } body.dark-mode .stat-badge.stat-completed { background: linear-gradient(135deg, rgba(255, 152, 0, 0.3) 0%, rgba(255, 152, 0, 0.2) 100%); border-color: #ff9800; color: #fde047; } body.dark-mode .stat-badge.stat-assigned { background: linear-gradient(135deg, rgba(156, 39, 176, 0.3) 0%, rgba(156, 39, 176, 0.2) 100%); border-color: #9c27b0; color: #e1bee7; } body.dark-mode .stat-badge.stat-inprogress { background: linear-gradient(135deg, rgba(0, 172, 193, 0.3) 0%, rgba(0, 172, 193, 0.2) 100%); border-color: #00acc1; color: #b2ebf2; } /* ============================================ PROFILE PAGE ============================================ */ body.dark-mode .profile-container { background-color: transparent !important; } body.dark-mode .profile-header { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .profile-card { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .profile-info-item { border-bottom-color: rgba(255,255,255,0.1); } body.dark-mode .profile-info-label { color: #9CA3AF !important; } body.dark-mode .profile-info-value { color: #FFFFFF !important; } /* Profile sections */ body.dark-mode .user-profile-section, body.dark-mode .profile-section { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .profile-content { background-color: transparent !important; } body.dark-mode .profile-item { border-bottom: 1px solid rgba(255,255,255,0.1); } body.dark-mode .profile-item-label { color: #9CA3AF !important; } body.dark-mode .profile-item-value { color: #FFFFFF !important; } /* Profile stats */ body.dark-mode .profile-stats { background-color: transparent; } body.dark-mode .profile-stat-card { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .profile-stat-value { color: #FFFFFF !important; } body.dark-mode .profile-stat-label { color: #D1D5DB !important; } /* Company info in profile */ body.dark-mode .company-info { background-color: rgba(74, 108, 247, 0.15); border: 1px solid rgba(74, 108, 247, 0.3); } body.dark-mode .company-name { color: #FFFFFF !important; } body.dark-mode .company-details { color: #D1D5DB !important; } /* ============================================ TRANSACTIONS & INVOICES ============================================ */ body.dark-mode .transaction-item, body.dark-mode .invoice-item { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .transaction-item:hover, body.dark-mode .invoice-item:hover { background-color: #1F2F56 !important; } body.dark-mode .transaction-amount, body.dark-mode .invoice-amount { color: #FFFFFF !important; } body.dark-mode .transaction-date, body.dark-mode .invoice-date { color: #D1D5DB !important; } body.dark-mode .transaction-status, body.dark-mode .invoice-status { background-color: rgba(74, 108, 247, 0.25); color: #93c5fd; border: 1px solid rgba(147, 197, 253, 0.3); } /* Transaction history section */ body.dark-mode .transaction-history, body.dark-mode .invoice-history { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .transaction-history .section-header, body.dark-mode .invoice-history .section-header { background-color: transparent; border-bottom: 1px solid rgba(255,255,255,0.1); } /* Transaction table wrapper */ body.dark-mode .transactions-table, body.dark-mode .invoices-table { background-color: #1A2B4F !important; } body.dark-mode .transactions-table .table-wrapper, body.dark-mode .invoices-table .table-wrapper { background-color: #1A2B4F !important; } /* Ensure all transaction/invoice containers are dark */ body.dark-mode .transactions-list, body.dark-mode .invoices-list { background-color: transparent !important; } body.dark-mode .transaction-card, body.dark-mode .invoice-card { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .transaction-card:hover, body.dark-mode .invoice-card:hover { background-color: #1F2F56 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5); } /* Transaction metadata */ body.dark-mode .transaction-type, body.dark-mode .transaction-method, body.dark-mode .invoice-number { color: #D1D5DB !important; } body.dark-mode .transaction-id { color: #9CA3AF !important; font-family: 'Courier New', monospace; } /* ============================================ SEARCH & FILTERS ============================================ */ body.dark-mode .search-bar { background-color: #0D1837 !important; border-color: rgba(255,255,255,0.15); color: #E5E7EB !important; } body.dark-mode .search-bar:focus { border-color: #4a6cf7; box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2); } body.dark-mode .filter-button, body.dark-mode .sort-button { background-color: #1A2B4F !important; border-color: rgba(255,255,255,0.2); color: #D1D5DB !important; } body.dark-mode .filter-button:hover, body.dark-mode .sort-button:hover { background-color: #1F2F56 !important; } body.dark-mode .filter-dropdown { background-color: #1A2B4F !important; border-color: rgba(255,255,255,0.15); } body.dark-mode .filter-option { color: #D1D5DB !important; } body.dark-mode .filter-option:hover { background-color: rgba(255,255,255,0.05); } /* ============================================ EMPTY STATES ============================================ */ body.dark-mode .empty-state { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .empty-state h3 { color: #FFFFFF !important; } body.dark-mode .empty-state p { color: #D1D5DB !important; } /* ============================================ ADDITIONAL COMMON ELEMENTS ============================================ */ body.dark-mode .price-tag { color: #FFFFFF !important; font-weight: 700; } body.dark-mode .category-badge { background-color: rgba(74, 108, 247, 0.25); color: #93c5fd; border: 1px solid rgba(147, 197, 253, 0.3); } body.dark-mode .difficulty-badge { background-color: rgba(251, 191, 36, 0.25); color: #fde047; border: 1px solid rgba(253, 224, 71, 0.3); } /* Info boxes */ body.dark-mode .info-box { background-color: rgba(59, 130, 246, 0.15); border-left: 4px solid #3b82f6; color: #93c5fd; } body.dark-mode .warning-box { background-color: rgba(251, 191, 36, 0.15); border-left: 4px solid #f59e0b; color: #fde047; } body.dark-mode .success-box { background-color: rgba(34, 197, 94, 0.15); border-left: 4px solid #22c55e; color: #86efac; } /* ============================================ QCM CHIPS & COVER ============================================ */ body.dark-mode .qcm-cover:not(.qcm-cover--img) { background: radial-gradient(1200px 500px at 10% 0%, rgba(74, 108, 247, 0.55) 0%, rgba(74, 108, 247, 0.00) 55%), radial-gradient(900px 420px at 110% 35%, rgba(61, 93, 214, 0.45) 0%, rgba(61, 93, 214, 0.00) 55%), linear-gradient(135deg, #3d5dd6 0%, #4a6cf7 100%); } body.dark-mode .qcm-chip { background: linear-gradient(to bottom, #4a6cf7, #3d5dd6) !important; color: #FFFFFF !important; } body.dark-mode .qcm-chip.tag-blue { background: linear-gradient(to bottom, #3d5dd6, #4a6cf7) !important; } body.dark-mode .qcm-chip.tag-brown { background: linear-gradient(to bottom, #d97706, #92400e) !important; } body.dark-mode .qcm-chip.tag-red { background: linear-gradient(to bottom, #dc2626, #991b1b) !important; } /* ============================================ SEARCH INPUT & FILTERS IN MARKETPLACE ============================================ */ body.dark-mode input[type="text"], body.dark-mode input[type="search"], body.dark-mode input[type="number"] { background-color: #0D1837 !important; border-color: rgba(255,255,255,0.15); color: #E5E7EB !important; } body.dark-mode input[type="text"]::placeholder, body.dark-mode input[type="search"]::placeholder { color: #9CA3AF; } /* ============================================ BREADCRUMBS ============================================ */ body.dark-mode .breadcrumb { background-color: transparent; } body.dark-mode .breadcrumb-item { color: #D1D5DB; } body.dark-mode .breadcrumb-item.active { color: #93c5fd; } body.dark-mode .breadcrumb-item + .breadcrumb-item::before { color: #6B7280; } /* ============================================ PAGINATION ============================================ */ body.dark-mode .pagination { gap: 5px; } body.dark-mode .page-item .page-link { background-color: #1A2B4F; border-color: rgba(255,255,255,0.15); color: #D1D5DB; } body.dark-mode .page-item.active .page-link { background-color: #4a6cf7; border-color: #4a6cf7; color: #FFFFFF; } body.dark-mode .page-item.disabled .page-link { background-color: #0D1837; border-color: rgba(255,255,255,0.1); color: #6B7280; } body.dark-mode .page-item .page-link:hover:not(.disabled) { background-color: #1F2F56; border-color: rgba(255,255,255,0.25); color: #FFFFFF; } /* ============================================ TOOLTIPS ============================================ */ body.dark-mode .tooltip-inner { background-color: #1A2B4F; color: #E5E7EB; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .tooltip .arrow::before { border-top-color: #1A2B4F; } /* ============================================ PROGRESS BARS ============================================ */ body.dark-mode .progress { background-color: #0D1837; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .progress-bar { background-color: #4a6cf7; } /* ============================================ TABS ============================================ */ body.dark-mode .nav-tabs { border-bottom-color: rgba(255,255,255,0.15); } body.dark-mode .nav-tabs .nav-link { color: #D1D5DB; background-color: transparent; border-color: transparent; } body.dark-mode .nav-tabs .nav-link:hover { border-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.03); } body.dark-mode .nav-tabs .nav-link.active { background-color: #1A2B4F; border-color: rgba(255,255,255,0.15); border-bottom-color: #1A2B4F; color: #FFFFFF; } body.dark-mode .tab-content { background-color: #1A2B4F; border: 1px solid rgba(255,255,255,0.15); border-top: none; } /* ============================================ SPECIFIC PAGE ELEMENTS ============================================ */ /* Profile sections */ body.dark-mode .profile-section { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .profile-section h4 { color: #FFFFFF !important; border-bottom: 2px solid rgba(255,255,255,0.15); } /* Transaction history */ body.dark-mode .transaction-history { background-color: transparent; } body.dark-mode .transaction-row { background-color: #1A2B4F; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .transaction-row:hover { background-color: #1F2F56; } /* Invoice details */ body.dark-mode .invoice-header { background-color: #0D1837; border-bottom: 1px solid rgba(255,255,255,0.15); } body.dark-mode .invoice-body { background-color: #1A2B4F; } body.dark-mode .invoice-total { background-color: #0D1837; border-top: 2px solid #4a6cf7; } body.dark-mode .invoice-total strong { color: #FFFFFF !important; } /* QCM Grid adjustments */ body.dark-mode .qcm-grid { background-color: transparent; } /* Stats overview in marketplace */ body.dark-mode .stats-overview { background-color: transparent; } body.dark-mode .stat-card { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } body.dark-mode .stat-content h3 { color: #FFFFFF !important; } body.dark-mode .stat-content p { color: #D1D5DB !important; } /* QCM actions buttons in footer */ body.dark-mode .qcm-actions .btn-secondary { background-color: #1F2F56; border-color: rgba(255,255,255,0.2); color: #D1D5DB; } body.dark-mode .qcm-actions .btn-secondary:hover { background-color: #243552; border-color: rgba(255,255,255,0.3); } /* Purchased QCM specific */ body.dark-mode .purchased-qcm-header { background-color: #1A2B4F !important; } body.dark-mode .license-info { background-color: rgba(74, 108, 247, 0.15); border: 1px solid rgba(74, 108, 247, 0.3); color: #93c5fd; } /* Cart page */ body.dark-mode .cart-item { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .cart-item:hover { background-color: #1F2F56 !important; } body.dark-mode .cart-summary { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .cart-total { background-color: #0D1837; border-top: 2px solid #4a6cf7; color: #FFFFFF; } body.dark-mode .cart-total strong { color: #FFFFFF !important; } /* Help page - additional styles */ body.dark-mode .help-category { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .help-category:hover { background-color: #1F2F56 !important; border-color: rgba(255,255,255,0.25); } body.dark-mode .help-category h3 { color: #FFFFFF !important; } body.dark-mode .help-category p { color: #D1D5DB !important; } body.dark-mode .video-placeholder { background-color: #0D1837; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .video-placeholder i { color: #4a6cf7; } /* ============================================ DASHBOARD HEADER (for all pages) ============================================ */ body.dark-mode .dashboard-header { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); border-bottom: 2px solid #4a6cf7; } body.dark-mode .header-icon { background-color: rgba(74, 108, 247, 0.2); color: #93c5fd; } body.dark-mode .header-title { color: #FFFFFF !important; } body.dark-mode .header-description { color: #D1D5DB !important; } body.dark-mode .header-actions .btn { border-color: rgba(255,255,255,0.2); } /* ============================================ USER PROFILE SECTION ============================================ */ body.dark-mode .user-profile-section { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .profile-avatar-section { background-color: rgba(0,0,0,0.2); border-right: 1px solid rgba(255,255,255,0.1); } body.dark-mode .avatar-placeholder { background: linear-gradient(135deg, #4a6cf7 0%, #3d5dd6 100%); color: #FFFFFF; } body.dark-mode .profile-details { background-color: transparent; } body.dark-mode .profile-item { border-bottom: 1px solid rgba(255,255,255,0.1); } body.dark-mode .profile-item-label { color: #9CA3AF; } body.dark-mode .profile-item-value { color: #FFFFFF !important; font-weight: 600; } /* ============================================ REPORTS DASHBOARD (common container) ============================================ */ body.dark-mode .reports-dashboard { background-color: transparent !important; } body.dark-mode .reports-dashboard > .card, body.dark-mode .reports-dashboard > .section { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } /* ============================================ QCM ACTIONS & BUTTONS ============================================ */ body.dark-mode .qcm-actions { background-color: transparent; } body.dark-mode .qcm-actions .btn-add-cart { background-color: #4a6cf7; border-color: #4a6cf7; color: #FFFFFF; } body.dark-mode .qcm-actions .btn-add-cart:hover { background-color: #3d5dd6; } body.dark-mode .qcm-actions .btn-view-details { background-color: transparent; border-color: rgba(255,255,255,0.3); color: #D1D5DB; } body.dark-mode .qcm-actions .btn-view-details:hover { background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.4); } /* ============================================ STATS OVERVIEW IN ALL PAGES ============================================ */ body.dark-mode .stats-overview, body.dark-mode .stats-grid { background-color: transparent !important; } body.dark-mode .stats-overview .stat-card, body.dark-mode .stats-grid .stat-card { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .stat-icon i { color: #FFFFFF; } /* ============================================ EMPTY CART / NO DATA STATES ============================================ */ body.dark-mode .empty-cart, body.dark-mode .no-data { background-color: #1A2B4F !important; border: 1px dashed rgba(255,255,255,0.2); } body.dark-mode .empty-cart i, body.dark-mode .no-data i { color: #6B7280; } body.dark-mode .empty-cart h3, body.dark-mode .no-data h3 { color: #FFFFFF !important; } body.dark-mode .empty-cart p, body.dark-mode .no-data p { color: #D1D5DB !important; } /* ============================================ QCM METADATA (questions, time, etc) ============================================ */ body.dark-mode .qcm-meta { color: #D1D5DB; } body.dark-mode .qcm-meta-item { color: #D1D5DB; } body.dark-mode .qcm-meta-item i { color: #93c5fd; } body.dark-mode .qcm-info { color: #D1D5DB; } body.dark-mode .qcm-info strong { color: #FFFFFF !important; } /* ============================================ SEARCH & SORT CONTROLS ============================================ */ body.dark-mode .marketplace-controls, body.dark-mode .search-controls { background-color: transparent; } body.dark-mode .search-input, body.dark-mode .sort-select { background-color: #0D1837 !important; border-color: rgba(255,255,255,0.15); color: #E5E7EB !important; } body.dark-mode .search-input:focus, body.dark-mode .sort-select:focus { border-color: #4a6cf7; box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2); } /* ============================================ PRICE DISPLAY ============================================ */ body.dark-mode .price { color: #FFFFFF !important; font-weight: 700; } body.dark-mode .price-amount { color: #FFFFFF !important; } body.dark-mode .price-currency { color: #D1D5DB; } body.dark-mode .original-price { color: #9CA3AF; text-decoration: line-through; } body.dark-mode .discount-badge { background-color: #dc2626; color: #FFFFFF; } /* ============================================ PURCHASED QCM PAGE SPECIFICS ============================================ */ body.dark-mode .purchased-header { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .qcm-license-card { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .qcm-license-card:hover { background-color: #1F2F56 !important; border-color: rgba(255,255,255,0.25); } body.dark-mode .license-status { background-color: rgba(74, 108, 247, 0.2); color: #93c5fd; border: 1px solid rgba(74, 108, 247, 0.3); } body.dark-mode .license-status.used { background-color: rgba(251, 191, 36, 0.2); color: #fde047; border-color: rgba(251, 191, 36, 0.3); } body.dark-mode .license-status.expired { background-color: rgba(239, 68, 68, 0.2); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); } /* ============================================ FILTER PILLS / CHIPS ============================================ */ body.dark-mode .filter-pills { background-color: transparent; } body.dark-mode .filter-pill { background-color: #1A2B4F; border: 1px solid rgba(255,255,255,0.2); color: #D1D5DB; } body.dark-mode .filter-pill.active { background-color: #4a6cf7; border-color: #4a6cf7; color: #FFFFFF; } body.dark-mode .filter-pill:hover { background-color: #1F2F56; border-color: rgba(255,255,255,0.3); } /* ============================================ TRANSACTION DETAILS ============================================ */ body.dark-mode .transaction-details { background-color: #1A2B4F !important; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .transaction-id, body.dark-mode .transaction-method { color: #D1D5DB; } body.dark-mode .transaction-type { background-color: rgba(74, 108, 247, 0.2); color: #93c5fd; } /* ============================================ BACK TO TOP BUTTON ============================================ */ body.dark-mode .back-to-top { background-color: #4a6cf7; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.15); } body.dark-mode .back-to-top:hover { background-color: #3d5dd6; box-shadow: 0 4px 12px rgba(74, 108, 247, 0.4); } /* ============================================ FORCE DARK BACKGROUNDS - CATCH ALL ============================================ */ /* Force all white backgrounds to dark */ body.dark-mode div[style*="background: white"], body.dark-mode div[style*="background-color: white"], body.dark-mode div[style*="background: #fff"], body.dark-mode div[style*="background-color: #fff"], body.dark-mode div[style*="background-color: #ffffff"], body.dark-mode div[style*="background: #ffffff"] { background-color: #1A2B4F !important; } /* Specific catches for common white containers */ body.dark-mode .container-fluid, body.dark-mode .container { background-color: transparent !important; } body.dark-mode .row { background-color: transparent !important; } body.dark-mode .col, body.dark-mode [class*="col-"] { background-color: transparent !important; } /* Tables in all pages */ body.dark-mode .table-container, body.dark-mode .table-wrapper { background-color: #1A2B4F !important; } body.dark-mode table { background-color: transparent !important; } body.dark-mode tbody { background-color: transparent !important; } body.dark-mode tr { background-color: transparent !important; } body.dark-mode td { background-color: transparent !important; color: #E5E7EB !important; } body.dark-mode td a { color: #93c5fd !important; } /* Section wrappers */ body.dark-mode .section-wrapper, body.dark-mode .content-wrapper, body.dark-mode .main-content { background-color: transparent !important; } /* Specific page containers */ body.dark-mode .transactions-container, body.dark-mode .invoices-container, body.dark-mode .profile-container, body.dark-mode .marketplace-container, body.dark-mode .cart-container { background-color: transparent !important; } /* Override any inline styles for cards */ body.dark-mode .card[style*="background"], body.dark-mode .card-body[style*="background"] { background-color: #1A2B4F !important; } /* Make sure section headers inside dark sections are visible */ body.dark-mode .section-title { color: #FFFFFF !important; } body.dark-mode .section-subtitle { color: #D1D5DB !important; } /* Lists */ body.dark-mode ul { color: #D1D5DB; } body.dark-mode li { color: #D1D5DB; } /* Descriptions and text content */ body.dark-mode .description, body.dark-mode .text-content, body.dark-mode .content-text { color: #D1D5DB !important; } /* Panels and wells */ body.dark-mode .panel, body.dark-mode .well { background-color: #1A2B4F !important; border-color: rgba(255,255,255,0.15); } body.dark-mode .panel-body, body.dark-mode .panel-content { background-color: transparent !important; color: #D1D5DB; } body.dark-mode .panel-heading, body.dark-mode .panel-header { background-color: #0D1837 !important; color: #FFFFFF !important; border-bottom: 1px solid rgba(255,255,255,0.15); } /* ============================================ AGGRESSIVE WHITE BACKGROUND OVERRIDE ============================================ */ /* Override ANY element with white/light background. Exclusions élargies : cette règle écrasait en transparent le fond des boutons et contrôles non-`.btn` (switch en/fr, boutons marketplace `.btn-assign`/ `.btn-add-cart`, boutons navbar…). On épargne donc les boutons HTML, les liens, toute classe contenant "btn", et le sélecteur de langue, pour laisser leurs règles dark explicites s'appliquer. */ body.dark-mode *:not(.btn):not(.badge):not(.alert):not(img):not(svg):not(button):not(a):not([class*="btn"]):not(.lang-switcher):not(.lang-option):not(input[type="submit"]):not(button[type="submit"]) { background-color: var(--dark-bg, transparent); } body.dark-mode { --dark-bg: transparent; } /* Ensure white sections become dark */ body.dark-mode section { background-color: transparent !important; } body.dark-mode article { background-color: transparent !important; } body.dark-mode main { background-color: transparent !important; } body.dark-mode aside { background-color: transparent !important; } body.dark-mode header:not(.top-bar):not(.navbar) { background-color: transparent !important; } body.dark-mode footer:not(.qcm-footer) { background-color: #0D1837 !important; border-top: 1px solid rgba(255,255,255,0.15); } /* Specific for data tables */ body.dark-mode .dataTables_wrapper { background-color: #1A2B4F !important; } body.dark-mode .dataTables_info, body.dark-mode .dataTables_paginate { color: #D1D5DB !important; } /* For any grid/flex layouts */ body.dark-mode .grid, body.dark-mode .flex { background-color: transparent !important; } /* History sections specifically */ body.dark-mode [class*="history"], body.dark-mode [class*="historique"] { background-color: #1A2B4F !important; } body.dark-mode [class*="history"] table, body.dark-mode [class*="historique"] table { background-color: transparent !important; } /* Ensure all headings are white */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #FFFFFF !important; } /* Text colors for content */ body.dark-mode p, body.dark-mode span:not(.badge):not(.btn), body.dark-mode div:not(.btn):not(.badge) { color: inherit; }