/* ============================================================ ClickCollect — Dark Theme Overrides Active lorsque Surcharge les classes Tailwind pour un rendu sombre cohérent. ============================================================ */ /* ── Fond de page & texte global ──────────────────────── */ html.dark body { background-color: #0f172a; /* slate-900 */ color: #e2e8f0; /* slate-200 */ } /* ── Fonds de carte / conteneur ───────────────────────── */ html.dark .bg-white { background-color: #1e293b !important; } /* slate-800 */ 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 */ html.dark .bg-gray-300 { background-color: #475569 !important; } /* slate-600 */ html.dark .bg-gray-800 { background-color: #0f172a !important; } /* slate-900 */ html.dark .bg-gray-900 { background-color: #020617 !important; } /* slate-950 */ html.dark .bg-blue-50 { background-color: #172554 !important; } /* blue-950 */ html.dark .bg-green-50 { background-color: #052e16 !important; } /* green-950 */ html.dark .bg-red-50 { background-color: #450a0a !important; } /* red-950 */ html.dark .bg-yellow-50 { background-color: #422006 !important; } /* yellow-950 */ html.dark .bg-indigo-50 { background-color: #1e1b4b !important; } /* indigo-950 */ html.dark .bg-gray-700 { background-color: #1e293b !important; } /* ── Textes ───────────────────────────────────────────── */ html.dark .text-gray-900 { color: #f8fafc !important; } /* slate-50 */ html.dark .text-gray-800 { color: #f8fafc !important; } /* slate-50 → +clair */ html.dark .text-gray-700 { color: #f1f5f9 !important; } /* slate-100 → +clair */ html.dark .text-gray-600 { color: #e2e8f0 !important; } /* slate-200 → +clair */ html.dark .text-gray-500 { color: #e2e8f0 !important; } /* slate-200 → +clair */ html.dark .text-gray-400 { color: #cbd5e1 !important; } /* slate-300 → +clair */ html.dark .text-gray-300 { color: #94a3b8 !important; } /* slate-400 */ html.dark .text-white { color: #f8fafc !important; } html.dark .text-black { color: #f1f5f9 !important; } html.dark .text-green-600 { color: #4ade80 !important; } html.dark .text-green-700 { color: #86efac !important; } html.dark .text-green-800 { color: #bbf7d0 !important; } html.dark .text-red-600 { color: #f87171 !important; } html.dark .text-red-700 { color: #fca5a5 !important; } html.dark .text-red-800 { color: #fecaca !important; } html.dark .text-blue-600 { color: #60a5fa !important; } html.dark .text-blue-800 { color: #93c5fd !important; } html.dark .text-yellow-800{ color: #fde68a !important; } html.dark .text-indigo-600{ color: #818cf8 !important; } html.dark .text-indigo-700{ color: #a5b4fc !important; } /* ── Bordures ──────────────────────────────────────────── */ html.dark .border-gray-200 { border-color: #334155 !important; } /* slate-700 */ html.dark .border-gray-300 { border-color: #475569 !important; } /* slate-600 */ html.dark .border-gray-700 { border-color: #475569 !important; } html.dark .border-b { border-color: #334155 !important; } html.dark .border-t { border-color: #334155 !important; } html.dark .divide-gray-200 > * + * { border-color: #334155 !important; } /* ── Ombres ────────────────────────────────────────────── */ html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important; } html.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5) !important; } html.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important; } html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important; } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important; } html.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important; } /* ── Hover states ──────────────────────────────────────── */ html.dark .hover\:bg-gray-50:hover { background-color: #334155 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #334155 !important; } html.dark .hover\:bg-gray-200:hover { background-color: #475569 !important; } html.dark .hover\:bg-gray-300:hover { background-color: #64748b !important; } html.dark .hover\:bg-gray-800:hover { background-color: #1e293b !important; } html.dark .hover\:text-gray-900:hover { color: #f8fafc !important; } /* ── Formulaires ───────────────────────────────────────── */ html.dark input, html.dark select, html.dark textarea { background-color: #1e293b !important; /* slate-800 */ color: #f1f5f9 !important; /* slate-100 → +clair */ border-color: #475569 !important; /* slate-600 */ } html.dark input::placeholder, html.dark textarea::placeholder { color: #cbd5e1 !important; /* slate-300 → +clair */ } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #3b82f6 !important; /* blue-500 */ outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; } /* ── Tableaux ──────────────────────────────────────────── */ html.dark thead { background-color: #1e293b !important; } html.dark tbody tr:hover { background-color: #1e293b !important; } html.dark tbody tr.bg-white { background-color: #1e293b !important; } /* ── Cartes et conteneurs spéciaux ─────────────────────── */ html.dark .rounded-xl { /* rien, hérité du bg */ } html.dark hr { border-color: #334155 !important; } /* ── Sidebar admin (reste sombre, pas de changement) ───── */ /* ── Boutons ───────────────────────────────────────────── */ html.dark .bg-gray-200 { background-color: #334155 !important; } html.dark .bg-gray-200:hover { background-color: #475569 !important; } /* ── Badges & étiquettes ───────────────────────────────── */ html.dark .bg-green-100 { background-color: #052e16 !important; } html.dark .text-green-800 { color: #bbf7d0 !important; } html.dark .bg-red-100 { background-color: #450a0a !important; } html.dark .text-red-800 { color: #fecaca !important; } html.dark .bg-blue-100 { background-color: #172554 !important; } html.dark .text-blue-800 { color: #93c5fd !important; } html.dark .bg-yellow-100 { background-color: #422006 !important; } html.dark .text-yellow-800 { color: #fde68a !important; } /* ── Liens ─────────────────────────────────────────────── */ html.dark a { color: #93c5fd; } /* blue-300 → +clair */ html.dark a.text-gray-500, html.dark a.text-gray-600, html.dark a.text-gray-700 { color: #e2e8f0 !important; } /* slate-200 → +clair */ html.dark a.text-primary { color: var(--color-primary) !important; } html.dark a:hover { color: #bfdbfe; } /* blue-200 */ /* ── Header / Navbar ───────────────────────────────────── */ html.dark nav.bg-white { background-color: #1e293b !important; } html.dark nav.border-b { border-color: #334155 !important; } /* ── Footer ────────────────────────────────────────────── */ html.dark footer { background-color: #0f172a !important; } html.dark footer .text-gray-400 { color: #cbd5e1 !important; } /* slate-300 → +clair */ html.dark footer .text-gray-500 { color: #e2e8f0 !important; } /* slate-200 → +clair */ /* ── Modales / Overlays ────────────────────────────────── */ html.dark .fixed.inset-0.bg-black\/30, html.dark .bg-black\/30 { background-color: rgba(0, 0, 0, 0.6) !important; } html.dark .bg-black\/40 { background-color: rgba(0, 0, 0, 0.7) !important; } /* ── Sélection ─────────────────────────────────────────── */ html.dark ::selection { background-color: #1e40af; color: #e2e8f0; }