/* * MikKody Molty-Inspired Dark Theme Override * Loaded AFTER Mazer's app-dark.css to override dark theme variables. * Only applies when data-bs-theme="dark" is set on . * Light mode is completely unaffected. */ /* ============================================================ 1. BOOTSTRAP CSS VARIABLE OVERRIDES ============================================================ */ html[data-bs-theme="dark"] { /* Core backgrounds */ --bs-body-bg: #04070f; --bs-body-color: #f0f4ff; --bs-secondary-bg: #060f22; --bs-tertiary-bg: #071430; /* Borders */ --bs-border-color: rgba(136, 146, 176, 0.15); --bs-border-color-translucent: rgba(136, 146, 176, 0.1); /* MikKody accent palette (aligned with mikkody.com) */ --mk-cyan: #00d2ff; --mk-cyan-rgb: 0, 210, 255; --mk-purple: #7a28cb; --mk-purple-rgb: 122, 40, 203; --mk-gradient: linear-gradient(135deg, #00d2ff 0%, #7a28cb 100%); --mk-glass-bg: rgba(6, 15, 34, 0.55); --mk-glass-border: rgba(0, 210, 255, 0.08); /* Primary accent: MikKody Cyan */ --bs-primary: #00d2ff; --bs-primary-rgb: 0, 210, 255; --bs-link-color: #00d2ff; --bs-link-color-rgb: 0, 210, 255; --bs-link-hover-color: #7a28cb; --bs-link-hover-color-rgb: 122, 40, 203; /* Card */ --bs-card-bg: rgba(6, 15, 34, 0.55); --bs-card-border-color: rgba(0, 210, 255, 0.08); --bs-card-cap-bg: rgba(6, 15, 34, 0.75); /* Emphasis */ --bs-emphasis-color: #f0f4ff; --bs-secondary-color: #8892b0; /* Form */ --bs-form-control-bg: #04070f; /* Dropdown */ --bs-dropdown-bg: #060f22; --bs-dropdown-border-color: rgba(0, 210, 255, 0.1); --bs-dropdown-link-hover-bg: rgba(0, 210, 255, 0.06); /* Modal */ --bs-modal-bg: #07112e; /* Table */ --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-hover-bg: rgba(0, 210, 255, 0.04); --bs-table-border-color: rgba(136, 146, 176, 0.12); /* Toast / Alert */ --bs-toast-bg: #060f22; color-scheme: dark; } /* ============================================================ 2. AMBIENT GLOW EFFECTS (vignette + radial atmosphere) ============================================================ */ /* Vignette cyan sur les bords */ html[data-bs-theme="dark"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99999; box-shadow: inset 0 0 200px rgba(0, 210, 255, 0.10), inset 0 0 400px rgba(122, 40, 203, 0.06); border-radius: 0; } /* Glow radial top-left (cyan) */ html[data-bs-theme="dark"] #app::before { content: ''; position: fixed; top: -150px; left: -150px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 210, 255, 0.07) 0%, transparent 70%); filter: blur(80px); pointer-events: none; z-index: 0; } /* Glow radial bottom-right (violet) */ html[data-bs-theme="dark"] #app::after { content: ''; position: fixed; bottom: -150px; right: -150px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(122, 40, 203, 0.07) 0%, transparent 70%); filter: blur(80px); pointer-events: none; z-index: 0; } /* ============================================================ 3. SIDEBAR ============================================================ */ html[data-bs-theme="dark"] #sidebar { background-color: #060f22 !important; border-right: 1px solid rgba(136, 146, 176, 0.15); } html[data-bs-theme="dark"] #sidebar .sidebar-wrapper { background-color: #060f22 !important; } html[data-bs-theme="dark"] #sidebar .sidebar-header { background-color: transparent !important; } html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .sidebar-title { color: #525252; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .sidebar-link { color: #a3a3a3; border-radius: 0.75rem; transition: all 0.2s ease; } html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .sidebar-link:hover { background-color: rgba(136, 146, 176, 0.15); color: #ededed; } html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .sidebar-item.active .sidebar-link { background: linear-gradient(135deg, rgba(0, 210, 255, 0.18) 0%, rgba(122, 40, 203, 0.18) 100%) !important; border-left: 3px solid #00d2ff !important; color: #fff !important; box-shadow: 0 2px 12px rgba(0, 210, 255, 0.15); } html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .sidebar-item.active .sidebar-link span { color: #fff !important; } html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .sidebar-item.active .sidebar-link svg, html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .sidebar-item.active .sidebar-link i { color: #00d2ff !important; } html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .submenu { background-color: #060f22 !important; } html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .submenu .sidebar-link { color: #737373; } html[data-bs-theme="dark"] #sidebar .sidebar-menu .menu .submenu .sidebar-link:hover { color: #00d2ff; } /* ============================================================ 4. CARDS — Larger radius, subtle border, no shadow ============================================================ */ html[data-bs-theme="dark"] .card { background: rgba(6, 15, 34, 0.55) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(0, 210, 255, 0.08) !important; border-radius: 1.25rem !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } html[data-bs-theme="dark"] .card:hover { transform: translateY(-4px); border-color: rgba(0, 210, 255, 0.22) !important; box-shadow: 0 8px 32px rgba(0, 210, 255, 0.10) !important; } html[data-bs-theme="dark"] .card-header { background: rgba(0, 210, 255, 0.04) !important; border-bottom: 1px solid rgba(0, 210, 255, 0.08) !important; border-radius: 1.25rem 1.25rem 0 0 !important; } html[data-bs-theme="dark"] .card-footer { background: rgba(0, 210, 255, 0.04) !important; border-top: 1px solid rgba(0, 210, 255, 0.08) !important; border-radius: 0 0 1.25rem 1.25rem !important; } html[data-bs-theme="dark"] .card-title { color: #ededed !important; } /* ============================================================ 5. BUTTONS — Orange primary, styled variants ============================================================ */ html[data-bs-theme="dark"] .btn-primary { background: linear-gradient(135deg, #00d2ff 0%, #7a28cb 100%) !important; border: none !important; color: #fff !important; font-weight: 600; box-shadow: 0 4px 15px rgba(0, 210, 255, 0.25) !important; transition: all 0.3s ease !important; } html[data-bs-theme="dark"] .btn-primary:hover, html[data-bs-theme="dark"] .btn-primary:focus { background: linear-gradient(135deg, #00e8ff 0%, #9b3df5 100%) !important; color: #fff !important; box-shadow: 0 8px 25px rgba(0, 210, 255, 0.40) !important; transform: translateY(-2px); } html[data-bs-theme="dark"] .btn-primary:active { background: linear-gradient(135deg, #00b8e0 0%, #6020a0 100%) !important; transform: translateY(0); box-shadow: none !important; } html[data-bs-theme="dark"] .btn-outline-primary { border-color: #00d2ff !important; color: #00d2ff !important; background: transparent !important; } html[data-bs-theme="dark"] .btn-outline-primary:hover { background: rgba(0, 210, 255, 0.1) !important; border-color: #00d2ff !important; color: #00d2ff !important; } html[data-bs-theme="dark"] .btn-secondary { background-color: rgba(136, 146, 176, 0.15) !important; border-color: rgba(136, 146, 176, 0.15) !important; color: #a3a3a3 !important; } html[data-bs-theme="dark"] .btn-secondary:hover { background-color: rgba(136, 146, 176, 0.15) !important; color: #ededed !important; } html[data-bs-theme="dark"] .btn-outline-secondary { border-color: #404040 !important; color: #a3a3a3 !important; } html[data-bs-theme="dark"] .btn-outline-secondary:hover { background-color: rgba(136, 146, 176, 0.15) !important; border-color: #525252 !important; color: #ededed !important; } /* ============================================================ 6. FORM CONTROLS — Darker inputs, orange focus ring ============================================================ */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select { background-color: #060f22 !important; border-color: rgba(136, 146, 176, 0.15) !important; color: #ededed !important; border-radius: 0.75rem; transition: all 0.2s ease; } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus { background-color: #060f22 !important; border-color: #00d2ff !important; box-shadow: 0 0 0 0.2rem rgba(30, 144, 255, 0.2) !important; color: #ededed !important; } html[data-bs-theme="dark"] .form-control::placeholder { color: #525252 !important; } html[data-bs-theme="dark"] .form-label { color: #a3a3a3; font-weight: 500; } html[data-bs-theme="dark"] .form-check-input:checked { background-color: #00d2ff !important; border-color: #00d2ff !important; } html[data-bs-theme="dark"] .form-switch .form-check-input:checked { background-color: #00d2ff !important; } html[data-bs-theme="dark"] .input-group-text { background-color: rgba(136, 146, 176, 0.15) !important; border-color: rgba(136, 146, 176, 0.15) !important; color: #a3a3a3 !important; } /* ============================================================ 7. NAVBAR / HEADER ============================================================ */ html[data-bs-theme="dark"] .navbar { background-color: #04070f !important; border-bottom: 1px solid rgba(136, 146, 176, 0.15); } html[data-bs-theme="dark"] header.mb-5 { background-color: transparent !important; } html[data-bs-theme="dark"] .layout-navbar .header { background-color: #04070f !important; } /* ============================================================ 8. TABLES ============================================================ */ html[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-border-color: rgba(136, 146, 176, 0.15); color: #a3a3a3; } html[data-bs-theme="dark"] .table>thead { background-color: #060f22; } html[data-bs-theme="dark"] .table>thead th { color: #525252 !important; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; border-bottom: 1px solid rgba(136, 146, 176, 0.15) !important; } html[data-bs-theme="dark"] .table>tbody>tr { border-bottom: 1px solid rgba(136, 146, 176, 0.15); transition: background-color 0.15s ease; } html[data-bs-theme="dark"] .table>tbody>tr:hover { background-color: rgba(30, 144, 255, 0.04) !important; } html[data-bs-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* { background-color: rgba(255, 255, 255, 0.015); --bs-table-bg-type: rgba(255, 255, 255, 0.015); } /* ============================================================ 9. ALERTS ============================================================ */ html[data-bs-theme="dark"] .alert-primary, html[data-bs-theme="dark"] .alert-light-primary { background-color: rgba(30, 144, 255, 0.1) !important; color: #00d2ff !important; border: 1px solid rgba(30, 144, 255, 0.2) !important; } html[data-bs-theme="dark"] .alert-success, html[data-bs-theme="dark"] .alert-light-success { background-color: rgba(74, 222, 128, 0.1) !important; color: #4ade80 !important; border: 1px solid rgba(74, 222, 128, 0.2) !important; } html[data-bs-theme="dark"] .alert-danger, html[data-bs-theme="dark"] .alert-light-danger { background-color: rgba(248, 113, 113, 0.1) !important; color: #f87171 !important; border: 1px solid rgba(248, 113, 113, 0.2) !important; } html[data-bs-theme="dark"] .alert-warning, html[data-bs-theme="dark"] .alert-light-warning { background-color: rgba(250, 204, 21, 0.1) !important; color: #facc15 !important; border: 1px solid rgba(250, 204, 21, 0.2) !important; } html[data-bs-theme="dark"] .alert-info, html[data-bs-theme="dark"] .alert-light-info { background-color: rgba(56, 189, 248, 0.1) !important; color: #38bdf8 !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; } /* ============================================================ 10. BADGES ============================================================ */ html[data-bs-theme="dark"] .badge.bg-primary { background-color: rgba(30, 144, 255, 0.15) !important; color: #00d2ff !important; } html[data-bs-theme="dark"] .badge.bg-success { background-color: rgba(74, 222, 128, 0.15) !important; color: #4ade80 !important; } html[data-bs-theme="dark"] .badge.bg-danger { background-color: rgba(248, 113, 113, 0.15) !important; color: #f87171 !important; } html[data-bs-theme="dark"] .badge.bg-warning { background-color: rgba(250, 204, 21, 0.15) !important; color: #facc15 !important; } html[data-bs-theme="dark"] .badge.bg-info { background-color: rgba(56, 189, 248, 0.15) !important; color: #38bdf8 !important; } html[data-bs-theme="dark"] .badge.bg-secondary { background-color: rgba(163, 163, 163, 0.15) !important; color: #a3a3a3 !important; } /* ============================================================ 11. PAGINATION ============================================================ */ html[data-bs-theme="dark"] .page-item .page-link { background-color: #141414; border-color: rgba(136, 146, 176, 0.15); color: #a3a3a3; border-radius: 0.5rem; } html[data-bs-theme="dark"] .page-item.active .page-link { background-color: #00d2ff !important; border-color: #00d2ff !important; color: #fff !important; } html[data-bs-theme="dark"] .page-item .page-link:hover { background-color: rgba(136, 146, 176, 0.15); border-color: rgba(136, 146, 176, 0.15); color: #ededed; } /* ============================================================ 12. MODALS ============================================================ */ html[data-bs-theme="dark"] .modal-content { background-color: #07112e !important; border: 1px solid rgba(136, 146, 176, 0.15) !important; border-radius: 1.25rem !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important; } html[data-bs-theme="dark"] .modal-header { border-bottom-color: rgba(136, 146, 176, 0.15) !important; } html[data-bs-theme="dark"] .modal-footer { border-top-color: rgba(136, 146, 176, 0.15) !important; } html[data-bs-theme="dark"] .modal-backdrop { background-color: #000; } /* ============================================================ 13. DROPDOWNS ============================================================ */ html[data-bs-theme="dark"] .dropdown-menu { background-color: #171717 !important; border: 1px solid rgba(136, 146, 176, 0.15) !important; border-radius: 0.75rem !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important; } html[data-bs-theme="dark"] .dropdown-item { color: #a3a3a3 !important; border-radius: 0.5rem; transition: all 0.15s ease; } html[data-bs-theme="dark"] .dropdown-item:hover { background-color: rgba(136, 146, 176, 0.15) !important; color: #ededed !important; } html[data-bs-theme="dark"] .dropdown-divider { border-color: rgba(136, 146, 176, 0.15); } /* ============================================================ 14. STATS ICONS — match orange accent ============================================================ */ html[data-bs-theme="dark"] .stats-icon { background-color: rgba(30, 144, 255, 0.12) !important; border-radius: 0.75rem !important; } html[data-bs-theme="dark"] .stats-icon i { color: #00d2ff !important; } html[data-bs-theme="dark"] .stats-icon.purple { background-color: rgba(168, 85, 247, 0.12) !important; } html[data-bs-theme="dark"] .stats-icon.purple i { color: #a855f7 !important; } html[data-bs-theme="dark"] .stats-icon.blue { background-color: rgba(56, 189, 248, 0.12) !important; } html[data-bs-theme="dark"] .stats-icon.blue i { color: #38bdf8 !important; } html[data-bs-theme="dark"] .stats-icon.green { background-color: rgba(74, 222, 128, 0.12) !important; } html[data-bs-theme="dark"] .stats-icon.green i { color: #4ade80 !important; } html[data-bs-theme="dark"] .stats-icon.red { background-color: rgba(248, 113, 113, 0.12) !important; } html[data-bs-theme="dark"] .stats-icon.red i { color: #f87171 !important; } /* ============================================================ 15. SCROLLBAR ============================================================ */ html[data-bs-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-bs-theme="dark"] ::-webkit-scrollbar-track { background: #0a0a0a; } html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(136, 146, 176, 0.15); border-radius: 4px; } html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #404040; } /* ============================================================ 16. BREADCRUMB ============================================================ */ html[data-bs-theme="dark"] .breadcrumb-item a { color: #00d2ff !important; } html[data-bs-theme="dark"] .breadcrumb-item.active { color: #525252 !important; } /* ============================================================ 17. PROGRESS BARS ============================================================ */ html[data-bs-theme="dark"] .progress { background-color: rgba(136, 146, 176, 0.15) !important; border-radius: 0.5rem; } html[data-bs-theme="dark"] .progress-bar { background-color: #00d2ff !important; } /* ============================================================ 18. MISC ============================================================ */ html[data-bs-theme="dark"] .text-primary { color: #00d2ff !important; } html[data-bs-theme="dark"] .bg-primary { background-color: #00d2ff !important; } html[data-bs-theme="dark"] .border-primary { border-color: #00d2ff !important; } /* Page heading */ html[data-bs-theme="dark"] .page-heading h3, html[data-bs-theme="dark"] .page-heading .h3 { color: #ededed; } /* Muted text */ html[data-bs-theme="dark"] .text-muted { color: #525252 !important; } /* Code blocks */ html[data-bs-theme="dark"] code { background-color: rgba(136, 146, 176, 0.15); color: #00d2ff; padding: 2px 6px; border-radius: 4px; } /* Dividers */ html[data-bs-theme="dark"] hr { border-color: rgba(136, 146, 176, 0.15); opacity: 1; } /* List groups */ html[data-bs-theme="dark"] .list-group-item { background-color: #141414; border-color: rgba(136, 146, 176, 0.15); color: #a3a3a3; } /* Nav tabs */ html[data-bs-theme="dark"] .nav-tabs { border-bottom-color: rgba(136, 146, 176, 0.15); } html[data-bs-theme="dark"] .nav-tabs .nav-link { color: #a3a3a3; border-radius: 0.75rem 0.75rem 0 0; } html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: #141414; border-color: rgba(136, 146, 176, 0.15) rgba(136, 146, 176, 0.15) transparent; color: #00d2ff; } /* Tooltip */ html[data-bs-theme="dark"] .tooltip-inner { background-color: rgba(136, 146, 176, 0.15); color: #ededed; border-radius: 0.5rem; } /* SweetAlert2 */ html[data-bs-theme="dark"] .swal2-popup { background-color: #07112e !important; border: 1px solid rgba(136, 146, 176, 0.15); border-radius: 1.25rem !important; } html[data-bs-theme="dark"] .swal2-styled.swal2-confirm { background-color: #00d2ff !important; color: #fff !important; border-radius: 0.75rem !important; } html[data-bs-theme="dark"] .swal2-styled.swal2-confirm:hover { background-color: #00e8ff !important; } /* * Global Form Icon Alignment Fix * Overrides Mazer's fixed "top: 0.55rem" which causes misalignments. * This guarantees perfect vertical centering for all icons in all forms. */ .form-group[class*="has-icon-"] .form-control-icon, html[data-bs-theme="dark"] .form-group[class*="has-icon-"] .form-control-icon { top: 50% !important; transform: translateY(-50%) !important; bottom: auto !important; } /* * Global Zosoft Brand Logo Toggle */ html[data-bs-theme="light"] .zosoft-brand-light, html:not([data-bs-theme="dark"]) .zosoft-brand-light { display: none !important; } html[data-bs-theme="dark"] .zosoft-brand-dark { display: none !important; } /* ============================================================ 19. TYPOGRAPHIE PREMIUM — Outfit pour les headings ============================================================ */ /* Import conditionnel si besoin côté CSS pur */ html[data-bs-theme="dark"] h1, html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3, html[data-bs-theme="dark"] h4, html[data-bs-theme="dark"] h5, html[data-bs-theme="dark"] .card-title, html[data-bs-theme="dark"] .page-heading h3, html[data-bs-theme="dark"] .modal-title { font-family: 'Outfit', sans-serif; letter-spacing: -0.01em; } /* Texte en dégradé (utilitaire, aligné mikkody.com) */ html[data-bs-theme="dark"] .text-gradient, html[data-bs-theme="dark"] .text-mk-gradient { background: linear-gradient(135deg, #00d2ff 0%, #7a28cb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Texte accent cyan */ html[data-bs-theme="dark"] .text-primary { color: #00d2ff !important; } html[data-bs-theme="dark"] .bg-primary { background-color: #00d2ff !important; } html[data-bs-theme="dark"] .border-primary { border-color: #00d2ff !important; } /* ============================================================ 20. FORM CONTROLS — Focus ring cyan ============================================================ */ html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus { border-color: #00d2ff !important; box-shadow: 0 0 0 0.2rem rgba(0, 210, 255, 0.18) !important; } html[data-bs-theme="dark"] .form-check-input:checked { background-color: #00d2ff !important; border-color: #00d2ff !important; } html[data-bs-theme="dark"] .form-switch .form-check-input:checked { background-color: #00d2ff !important; } html[data-bs-theme="dark"] .input-group-text { background-color: rgba(0, 210, 255, 0.06) !important; border-color: rgba(0, 210, 255, 0.15) !important; color: #00d2ff !important; } /* ============================================================ 21. BADGES STATUS — Point pulsé pour online/offline ============================================================ */ @keyframes mk-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } @keyframes mk-pulse-red { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.5); } 70% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } } /* Indicateur "online" pulsé */ html[data-bs-theme="dark"] .badge-online, html[data-bs-theme="dark"] .status-online { display: inline-flex; align-items: center; gap: 6px; } html[data-bs-theme="dark"] .badge-online::before, html[data-bs-theme="dark"] .status-online::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #4ade80; animation: mk-pulse 2s infinite; flex-shrink: 0; } html[data-bs-theme="dark"] .badge-offline::before, html[data-bs-theme="dark"] .status-offline::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #f87171; flex-shrink: 0; margin-right: 6px; } /* ============================================================ 22. PAGINATION — Accent cyan ============================================================ */ html[data-bs-theme="dark"] .page-item.active .page-link { background: linear-gradient(135deg, #00d2ff, #7a28cb) !important; border-color: transparent !important; color: #fff !important; } html[data-bs-theme="dark"] .page-item .page-link:hover { color: #00d2ff; } /* ============================================================ 23. CARDS — Fade-in animation au chargement de la page ============================================================ */ @keyframes mk-fadein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } html[data-bs-theme="dark"] .card { animation: mk-fadein 0.4s ease both; } /* Stagger pour les grilles de cartes */ html[data-bs-theme="dark"] .row .card:nth-child(1) { animation-delay: 0.05s; } html[data-bs-theme="dark"] .row .card:nth-child(2) { animation-delay: 0.10s; } html[data-bs-theme="dark"] .row .card:nth-child(3) { animation-delay: 0.15s; } html[data-bs-theme="dark"] .row .card:nth-child(4) { animation-delay: 0.20s; } html[data-bs-theme="dark"] .row .card:nth-child(5) { animation-delay: 0.25s; } html[data-bs-theme="dark"] .row .card:nth-child(6) { animation-delay: 0.30s; } /* ============================================================ 24. TABLES — En-tête avec accent cyan ============================================================ */ html[data-bs-theme="dark"] .table>thead { background-color: rgba(0, 210, 255, 0.04); } html[data-bs-theme="dark"] .table>thead th { color: #00d2ff !important; border-bottom: 1px solid rgba(0, 210, 255, 0.15) !important; } html[data-bs-theme="dark"] .table>tbody>tr:hover { background-color: rgba(0, 210, 255, 0.03) !important; } /* ============================================================ 25. BREADCRUMB — Style premium ============================================================ */ html[data-bs-theme="dark"] .breadcrumb-item a { color: #00d2ff !important; } html[data-bs-theme="dark"] .breadcrumb-item.active { color: #525252 !important; } html[data-bs-theme="dark"] .breadcrumb-item+.breadcrumb-item::before { color: rgba(0, 210, 255, 0.3); } /* ============================================================ 26. NAV TABS — Accent cyan ============================================================ */ html[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: #00d2ff; border-bottom-color: #00d2ff; } html[data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: #00d2ff; } /* ============================================================ 27. SWAL2 — Bouton confirm gradient ============================================================ */ html[data-bs-theme="dark"] .swal2-styled.swal2-confirm { background: linear-gradient(135deg, #00d2ff, #7a28cb) !important; border: none !important; border-radius: 0.75rem !important; box-shadow: 0 4px 15px rgba(0, 210, 255, 0.3) !important; } html[data-bs-theme="dark"] .swal2-styled.swal2-confirm:hover { background: linear-gradient(135deg, #00e8ff, #9b3df5) !important; box-shadow: 0 6px 20px rgba(0, 210, 255, 0.4) !important; } /* ============================================================ 28. STATS ICONS — Accent cyan aligné ============================================================ */ html[data-bs-theme="dark"] .stats-icon { background-color: rgba(0, 210, 255, 0.10) !important; border-radius: 0.75rem !important; } html[data-bs-theme="dark"] .stats-icon i { color: #00d2ff !important; }