/* ════════════════════════════════════════════════════════════════ Sprint dark_mode (Mai 2026) - Overrides CSS pour le mode sombre ---------------------------------------------------------------- Ce fichier ajoute du CSS qui se déclenche quand a la classe `dark`. À importer après meal360.css dans base.html. ════════════════════════════════════════════════════════════════ */ /* --- Background général --------------------------------------- */ html.dark body { background-color: #0f172a; /* slate-900 */ color: #e2e8f0; /* slate-200 */ } /* --- Cards / panels blancs ------------------------------------ */ html.dark .bg-white { background-color: #1e293b !important; /* slate-800 */ color: #e2e8f0; } /* Cartes border */ html.dark .border-gray-200, html.dark .border-gray-100, html.dark .border-gray-300 { border-color: #334155 !important; /* slate-700 */ } /* --- Texte ---------------------------------------------------- */ html.dark .text-gray-900 { color: #f1f5f9 !important; /* slate-100 */ } html.dark .text-gray-800 { color: #e2e8f0 !important; } html.dark .text-gray-700 { color: #cbd5e1 !important; /* slate-300 */ } html.dark .text-gray-600, html.dark .text-gray-500 { color: #94a3b8 !important; /* slate-400 */ } html.dark .text-gray-400 { color: #64748b !important; /* slate-500 */ } /* MSF navy : on garde le navy mais on rend le texte plus blanc */ html.dark .text-msf-navy { color: #93c5fd !important; /* blue-300 */ } /* --- Backgrounds gris (gris clairs -> gris sombres) ---------- */ html.dark .bg-gray-50 { background-color: #0f172a !important; /* slate-900 */ } html.dark .bg-gray-100 { background-color: #1e293b !important; /* slate-800 */ } html.dark .bg-gray-200 { background-color: #334155 !important; /* slate-700 */ } /* --- Header (barre du haut) ----------------------------------- */ html.dark header.bg-white { background-color: #1e293b !important; border-bottom-color: #334155 !important; } /* --- Sidebar : garde le navy MSF, légèrement plus sombre ----- */ html.dark aside.bg-msf-navy { background-color: #0b1d36 !important; } /* --- Tables --------------------------------------------------- */ html.dark table.table thead, html.dark .bg-gray-50 thead, html.dark thead.bg-gray-50 { background-color: #1e293b !important; color: #cbd5e1 !important; } html.dark table tbody tr { border-color: #334155 !important; } html.dark table tbody tr:hover { background-color: #1e293b !important; } html.dark .divide-gray-100 > * + *, html.dark .divide-gray-200 > * + * { border-color: #334155 !important; } /* --- Inputs / Forms ------------------------------------------- */ html.dark input, html.dark select, html.dark textarea { background-color: #1e293b !important; border-color: #475569 !important; /* slate-600 */ color: #e2e8f0 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #60a5fa !important; /* blue-400 */ } /* Form labels */ html.dark label.label, html.dark .label { color: #cbd5e1 !important; } /* --- Hover gris ----------------------------------------------- */ html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover { background-color: #334155 !important; } /* --- Boutons secondaires (border-gray) ------------------------ */ html.dark button.border-gray-300, html.dark .btn-secondary { background-color: #1e293b !important; border-color: #475569 !important; color: #e2e8f0 !important; } /* --- KPI cards (background reste blanc -> slate) ------------- */ html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.15) !important; } html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.15) !important; } html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; } html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.15) !important; } html.dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.15) !important; } html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.15) !important; } html.dark .bg-slate-100 { background-color: rgba(100, 116, 139, 0.15) !important; } html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15) !important; } /* Hero info bandeaux */ html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; color: #fde68a !important; } html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.1) !important; color: #bfdbfe !important; } html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; color: #fecaca !important; } html.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; color: #bbf7d0 !important; } html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.1) !important; color: #e9d5ff !important; } /* Bordures colorees pour les bandeaux */ html.dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; } html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.3) !important; } html.dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; } html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.3) !important; } /* Textes colorés sur fond sombre - éclaircir */ html.dark .text-amber-900, html.dark .text-amber-800, html.dark .text-amber-700 { color: #fde68a !important; } html.dark .text-blue-900, html.dark .text-blue-800 { color: #bfdbfe !important; } html.dark .text-red-900, html.dark .text-red-800 { color: #fecaca !important; } html.dark .text-green-900, html.dark .text-green-800 { color: #bbf7d0 !important; } /* --- Modals ---------------------------------------------------- */ html.dark [class*="bg-white rounded"] { background-color: #1e293b !important; } /* Card MSF custom */ html.dark .card, html.dark .card-body, html.dark .card-header { background-color: #1e293b !important; color: #e2e8f0; } html.dark .card-header { border-bottom-color: #334155 !important; } /* --- Code / mono ----------------------------------------------- */ html.dark code, html.dark .font-mono { background-color: rgba(15, 23, 42, 0.5) !important; color: #cbd5e1 !important; } /* --- Dividers ------------------------------------------------- */ html.dark hr { border-color: #334155 !important; } /* --- Liens ---------------------------------------------------- */ html.dark a:not([class*="bg-"]):not([class*="text-white"]):not([class*="text-msf-red"]):hover { color: #93c5fd !important; } /* --- Lucide icons --------------------------------------------- */ html.dark .lucide, html.dark [data-lucide] { stroke-width: 1.8; } /* --- Transition générale -------------------------------------- */ html.dark, html.dark body, html.dark .bg-white, html.dark .bg-gray-50, html.dark .bg-gray-100, html.dark header, html.dark aside, html.dark .card { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } /* --- Cases speciales : ne PAS sombrer ------------------------- */ /* Les hero gradients : garder leur look navy */ html.dark .bg-gradient-to-r.from-msf-navy { /* Pas de changement, le gradient navy reste */ } /* Boutons rouges MSF : ne pas toucher */ html.dark .bg-msf-red { background-color: #be1622 !important; } /* Sidebar items actifs */ html.dark .bg-msf-red\/20, html.dark aside .bg-msf-red { background-color: rgba(190, 22, 34, 0.5) !important; }