/* ==========================================================================
   Phile's Pay — Dark mode (CSS-override)
   Mache ak yon klas `dark` sou <html>. Pa bezwen chanje chak paj: nou
   ovrèd koulè ki itilize sou tout sit la (bg-white, text-[#003366], etc.).
   Aktive pa assets/js/theme.js (li mete klas la anvan paj la pentire).
   ========================================================================== */

/* --- VARIABLES Koulè ( pou dekor ki itilize var() ) --- */
html.dark {
    --d-bg: #0f172a;          /* fond pwincipal */
    --d-surface: #1e293b;     /* kat / kònèt */
    --d-surface-2: #263449;   /* kat ki pi klè */
    --d-border: #334155;      /* limit */
    --d-text: #e2e8f0;        /* tèks prensipal */
    --d-muted: #94a3b8;       /* tèks secondè */
    color-scheme: dark;
    background-color: var(--d-bg);
    color: var(--d-text);
}

/* --- FOND --- */
html.dark body,
html.dark .bg-philesCream,
html.dark .bg-\[\#F8FAFC\],
html.dark .bg-slate-50,
html.dark .bg-gray-50 { background-color: var(--d-bg) !important; }

html.dark .bg-white { background-color: var(--d-surface) !important; }
html.dark .bg-white\/5 { background-color: rgba(255,255,255,.05) !important; }
html.dark .bg-white\/10 { background-color: rgba(255,255,255,.10) !important; }
html.dark .bg-slate-100,
html.dark .bg-gray-100 { background-color: var(--d-surface-2) !important; }

/* Fond ble fonse / navy (sidebar, header) — kenbe fonse, fè yon tik pi fonse */
html.dark .bg-\[\#003366\],
html.dark .bg-philesNavy { background-color: #06213f !important; }

/* --- TEKS --- */
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-\[\#003366\],
html.dark .text-philesNavy { color: var(--d-text) !important; }

html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-philesMuted { color: var(--d-muted) !important; }

/* Tèks blan sou fond ble — kenbe blan */
html.dark .text-white { color: #fff !important; }

/* --- LIMIT / BORDER --- */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
html.dark .border-philesBorder,
html.dark .border-gray-100,
html.dark .border-gray-200 { border-color: var(--d-border) !important; }

html.dark .border-white\/10,
html.dark .border-white\/5 { border-color: rgba(255,255,255,.12) !important; }

/* --- KAD NWA / SHADOW --- */
html.dark .shadow-xs,
html.dark .shadow-sm,
html.dark .shadow,
html.dark .shadow-2xs { box-shadow: 0 1px 2px rgba(0,0,0,.4) !important; }

/* --- INPUT / FÒM --- */
html.dark input:not([type=radio]):not([type=checkbox]):not([type=range]),
html.dark select,
html.dark textarea {
    background-color: var(--d-surface-2) !important;
    color: var(--d-text) !important;
    border-color: var(--d-border) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }

/* --- TÈB --- */
html.dark table { color: var(--d-text); }
html.dark thead { background-color: var(--d-surface-2) !important; }
html.dark tbody tr,
html.dark .divide-slate-100 > * + * { border-color: var(--d-border) !important; }
html.dark tbody tr:hover { background-color: rgba(255,255,255,.03) !important; }

/* --- KAD KITE / MODAL / DROPDOWN --- */
html.dark .bg-white.shadow-2xl,
html.dark [class*="fixed inset-0"] > div { box-shadow: 0 10px 40px rgba(0,0,0,.6) !important; }

/* --- BOUTON ORANJ / navy — kenbe koulè brand yo --- */
html.dark .bg-\[\#F7941E\],
html.dark .bg-philesOrange { background-color: #F7941E !important; }
html.dark .text-\[\#F7941E\],
html.dark .text-philesOrange { color: #F7941E !important; }
html.dark .bg-\[\#003366\].text-white,
html.dark .bg-philesNavy.text-white { background-color: #0a4d8c !important; color: #fff !important; }

/* --- KAD KLR / CARD sou fond clè (bg-slate-50 ladan l) --- */
html.dark .bg-\[\#003366\]\/5,
html.dark .bg-\[\#003366\]\/10 { background-color: rgba(247,148,30,.10) !important; }

/* --- RENDÈ PLIS DOLI: antretyen tranzisyon dou --- */
html.dark * { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }

/* ==========================================================================
   WOUN 31 — SA dark.css te RATE (mezi ak dark_audit.php: 161 klas itilize,
   54 kouvri). Chak règ anba a koreponn ak yon klas ki PARÈT nan paj yo men
   ki te rete klè fonse sou fond nwa = tèks ki menm koulè ak fond.
   ========================================================================== */

/* --- TÈKS ki pa t kouvri: slate-900 (16 fichye), gray-900, black --- */
html.dark .text-slate-900,
html.dark .text-gray-900,
html.dark .text-zinc-900,
html.dark .text-neutral-900,
html.dark .text-black { color: #f1f5f9 !important; }

/* Sou yon BOUTON koulè mak (jòne/oranj), tèks la DWE rete fonse — sinon nou
   ta ranplase yon envizib pa yon lòt. Mezi: bg-[#FFD814] text-slate-900. */
html.dark .bg-\[\#FFD814\].text-slate-900,
html.dark .bg-\[\#FFD814\].text-black,
html.dark .bg-\[\#F7CA00\].text-slate-900,
html.dark .bg-\[\#F7941E\].text-\[\#c46a00\],
html.dark .bg-\[\#FFD814\].text-\[\#c46a00\] { color: #111827 !important; }

/* --- LIMIT ki te rete klè (bord sou fond nwa disparèt) --- */
html.dark .border-slate-300,
html.dark .border-gray-300,
html.dark .border-slate-200\/70,
html.dark .border-slate-200\/60,
html.dark .border-slate-200\/85,
html.dark .border-gray-200\/80 { border-color: var(--d-border) !important; }

/* --- FON ki te rete klè: sifas kat / tèt tablodbò ---
   Nou PA touche bg-white/90 ni bg-white/20: se kontwòl transparan ki sou
   yon IMÈJ oswa sou fond navy (flèch karousèl, vè glas) — yo bon konsa. */
html.dark .bg-slate-200,
html.dark .bg-gray-200,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/60,
html.dark .bg-slate-100\/70,
html.dark .bg-\[\#edf5fb\] { background-color: var(--d-surface-2) !important; }

/* Tèks ki sou vèsyon klè sa yo dwe lejè */
html.dark .bg-slate-200 .text-slate-700,
html.dark .bg-\[\#edf5fb\] .text-\[\#c46a00\] { color: var(--d-text) !important; }