/* ============================================================================
   MailForge Pro - Day/Night theme extension (v5.9)
   ----------------------------------------------------------------------------
   Default  : NIGHT (the original dark look - completely untouched).
   html.light: DAY (soft slate-light surfaces, same indigo/emerald accents).

   How it works, without touching the Vite build:
   - This file loads AFTER the compiled Tailwind bundle, so for every
     dark-palette utility class used in the blade views an html.light
     override is declared here with higher specificity (+ document order).
   - The toggle adds/removes the "light" class on <html> and stores the
     choice in localStorage ("mf-theme"). A tiny pre-paint script in each
     layout applies the saved choice before first paint (no flash).
   - Colored accents (emerald/red/amber/indigo tints, gradients, badges)
     are deliberately NOT remapped - they read well on both themes.

   Toggle entry points: sidebar logo row, top bar, login page corner.
   ============================================================================ */

/* Native controls + scrollbars follow the active theme */
html { color-scheme: dark; }
html.light { color-scheme: light; }

/* ---- Toggle button icon logic (dark mode shows the sun, light shows moon) */
.mf-icon-moon { display: none; }
.mf-icon-sun  { display: block; }
html.light .mf-icon-sun  { display: none; }
html.light .mf-icon-moon { display: block; }

/* ---- Smooth 300 ms cross-fade, applied only while toggling */
.mf-theme-fade *, .mf-theme-fade *::before, .mf-theme-fade *::after {
    transition: background-color .3s ease, border-color .3s ease,
                color .3s ease, fill .3s ease, stroke .3s ease;
}

/* ==========================================================================
   DAY MODE OVERRIDES
   ========================================================================== */

/* Base rule parity: Tailwind base sets "* { border-color: dark-700 }";
   this matches its specificity (0,0,0) and comes later, so it wins the tie
   but still loses to every explicit border-color class. */
:where(html.light) *,
:where(html.light) ::before,
:where(html.light) ::after { border-color: #e2e8f0; }

/* ---------- Surfaces (bg-dark-*) ---------- */
html.light .bg-dark-950     { background-color: #ffffff; }
html.light .bg-dark-900     { background-color: #f1f5f9; }
html.light .bg-dark-900\/80 { background-color: rgba(241, 245, 249, 0.85); }
html.light .bg-dark-900\/50 { background-color: rgba(241, 245, 249, 0.65); }
html.light .bg-dark-900\/30 { background-color: rgba(241, 245, 249, 0.45); }
html.light .bg-dark-800     { background-color: #ffffff; }
html.light .bg-dark-800\/50 { background-color: rgba(255, 255, 255, 0.65); }
html.light .bg-dark-800\/80 { background-color: rgba(255, 255, 255, 0.85); }
html.light .bg-dark-750     { background-color: #f1f5f9; }
html.light .bg-dark-700     { background-color: #e2e8f0; }
html.light .bg-dark-700\/50 { background-color: rgba(226, 232, 240, 0.55); }
html.light .bg-dark-700\/60 { background-color: rgba(226, 232, 240, 0.65); }
html.light .bg-dark-700\/80 { background-color: rgba(226, 232, 240, 0.85); }
html.light .bg-dark-700\/30 { background-color: rgba(226, 232, 240, 0.40); }
html.light .bg-dark-600     { background-color: #cbd5e1; }
html.light .bg-dark-600\/50 { background-color: rgba(203, 213, 225, 0.50); }
html.light .bg-dark-500     { background-color: #cbd5e1; }
html.light .bg-dark-500\/20 { background-color: rgba(203, 213, 225, 0.25); }
html.light .bg-dark-400     { background-color: #94a3b8; }

/* ---------- Text (text-dark-*, placeholder-dark-*) ---------- */
html.light .text-dark-100 { color: #0f172a; }
html.light .text-dark-200 { color: #1e293b; }
html.light .text-dark-300 { color: #334155; }
html.light .text-dark-400 { color: #475569; }
html.light .text-dark-500 { color: #64748b; }
html.light .text-dark-600 { color: #94a3b8; }
html.light .placeholder-dark-400::placeholder { color: #94a3b8; }
html.light .placeholder-dark-500::placeholder { color: #94a3b8; }

/* "White" emphasized text flips dark on light surfaces ... */
html.light .text-white { color: #0f172a; }
/* ... but stays white on colored / gradient surfaces (buttons, avatars,
   badges, icon tiles). Same-element and descendant forms both covered;
   from-dark-/from-white/from-slate are deliberately NOT in this list. */
html.light .text-white[class*="from-primary-"], html.light [class*="from-primary-"] .text-white,
html.light .text-white[class*="from-indigo-"],  html.light [class*="from-indigo-"] .text-white,
html.light .text-white[class*="from-violet-"],  html.light [class*="from-violet-"] .text-white,
html.light .text-white[class*="from-purple-"],  html.light [class*="from-purple-"] .text-white,
html.light .text-white[class*="from-fuchsia-"], html.light [class*="from-fuchsia-"] .text-white,
html.light .text-white[class*="from-pink-"],    html.light [class*="from-pink-"] .text-white,
html.light .text-white[class*="from-rose-"],    html.light [class*="from-rose-"] .text-white,
html.light .text-white[class*="from-red-"],     html.light [class*="from-red-"] .text-white,
html.light .text-white[class*="from-orange-"],  html.light [class*="from-orange-"] .text-white,
html.light .text-white[class*="from-amber-"],   html.light [class*="from-amber-"] .text-white,
html.light .text-white[class*="from-yellow-"],  html.light [class*="from-yellow-"] .text-white,
html.light .text-white[class*="from-lime-"],    html.light [class*="from-lime-"] .text-white,
html.light .text-white[class*="from-green-"],   html.light [class*="from-green-"] .text-white,
html.light .text-white[class*="from-emerald-"], html.light [class*="from-emerald-"] .text-white,
html.light .text-white[class*="from-teal-"],    html.light [class*="from-teal-"] .text-white,
html.light .text-white[class*="from-cyan-"],    html.light [class*="from-cyan-"] .text-white,
html.light .text-white[class*="from-sky-"],     html.light [class*="from-sky-"] .text-white,
html.light .text-white[class*="from-blue-"],    html.light [class*="from-blue-"] .text-white,
html.light .text-white[class*="bg-primary-"],   html.light [class*="bg-primary-6"] .text-white,
html.light .text-white[class*="bg-indigo-"],    html.light [class*="bg-indigo-6"] .text-white,
html.light .text-white[class*="bg-violet-6"],   html.light [class*="bg-violet-6"] .text-white,
html.light .text-white[class*="bg-purple-6"],   html.light [class*="bg-purple-6"] .text-white,
html.light .text-white[class*="bg-rose-"],      html.light [class*="bg-rose-6"] .text-white,
html.light .text-white[class*="bg-red-"],       html.light [class*="bg-red-6"] .text-white,
html.light .text-white[class*="bg-orange-6"],   html.light [class*="bg-orange-6"] .text-white,
html.light .text-white[class*="bg-amber-"],     html.light [class*="bg-amber-6"] .text-white,
html.light .text-white[class*="bg-emerald-6"],  html.light [class*="bg-emerald-6"] .text-white,
html.light .text-white[class*="bg-teal-6"],     html.light [class*="bg-teal-6"] .text-white,
html.light .text-white[class*="bg-cyan-6"],     html.light [class*="bg-cyan-6"] .text-white,
html.light .text-white[class*="bg-blue-6"],     html.light [class*="bg-blue-6"] .text-white { color: #ffffff; }

/* ---------- Borders + dividers (border-dark-*, divide-dark-*) ---------- */
html.light .border-dark-800     { border-color: #e2e8f0; }
html.light .border-dark-800\/80 { border-color: #e2e8f0; }
html.light .border-dark-800\/60 { border-color: #e2e8f0; }
html.light .border-dark-700     { border-color: #e2e8f0; }
html.light .border-dark-700\/50 { border-color: #e2e8f0; }
html.light .border-dark-700\/60 { border-color: #e2e8f0; }
html.light .border-dark-600     { border-color: #cbd5e1; }
html.light .border-dark-600\/50 { border-color: #cbd5e1; }
html.light .border-dark-600\/30 { border-color: #cbd5e1; }
html.light .border-dark-500     { border-color: #cbd5e1; }
html.light .border-dark-500\/30 { border-color: #cbd5e1; }
html.light .divide-dark-700   > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0; }
html.light .divide-dark-700\/50 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0; }

/* ---------- Component classes declared in the layouts ---------- */
html.light .card     { background: #ffffff; border-color: #e2e8f0; }
html.light .stat-card { background: #ffffff; border-color: #e2e8f0; }
html.light .stat-card:hover { border-color: rgba(79, 70, 229, 0.25); }

html.light .sidebar-link { color: #64748b; }
html.light .sidebar-link:hover { color: #0f172a; background: rgba(15, 23, 42, 0.05); }
html.light .sidebar-link.active { color: #4f46e5; background: rgba(79, 70, 229, 0.08); }
html.light .sidebar-link.active svg { color: #4f46e5; }

html.light .btn-primary, html.light .btn-primary * { color: #ffffff; }
html.light .btn-secondary { background: #e2e8f0; color: #0f172a; border-color: #cbd5e1; }
html.light .btn-secondary:hover { background: #cbd5e1; }
html.light .btn-danger  { background: rgba(239, 68, 68, 0.08); color: #dc2626; border-color: rgba(239, 68, 68, 0.25); }
html.light .btn-danger:hover  { background: rgba(239, 68, 68, 0.15); }
html.light .btn-success { background: rgba(16, 185, 129, 0.08); color: #059669; border-color: rgba(16, 185, 129, 0.25); }
html.light .btn-success:hover { background: rgba(16, 185, 129, 0.15); }

html.light .input-field { background: #ffffff; border-color: #cbd5e1; color: #0f172a; }
html.light .input-field::placeholder { color: #94a3b8; }
html.light .input-field:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
html.light .select-field { background-color: #ffffff; border-color: #cbd5e1; color: #0f172a; }

html.light .badge-success { background: rgba(16, 185, 129, 0.12); color: #059669; border-color: rgba(16, 185, 129, 0.3); }
html.light .badge-warning { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.3); }
html.light .badge-danger  { background: rgba(239, 68, 68, 0.12); color: #dc2626; border-color: rgba(239, 68, 68, 0.3); }
html.light .badge-info    { background: rgba(99, 102, 241, 0.12); color: #4f46e5; border-color: rgba(99, 102, 241, 0.3); }

html.light .table-container { border-color: #e2e8f0; }
html.light .table-container th { color: #64748b; background: #f8fafc; border-bottom-color: #e2e8f0; }
html.light .table-container td { color: #334155; border-bottom-color: #e2e8f0; }
html.light .table-container tr:hover td { background: #f1f5f9; }

html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------- Login / register page (auth layout) ---------- */
html.light .glass-card { background: rgba(255, 255, 255, 0.75); border-color: rgba(226, 232, 240, 0.9); }
html.light .glass-card .bg-gradient-to-br {
    background-image: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
}
html.light .auth-dot-grid {
    background-image: radial-gradient(circle, rgba(71, 85, 105, 0.18) 1px, transparent 1px);
}

/* ==========================================================================
   v5.8 - STANDARD GRAY PALETTE (admin, ab-tests, queue, sequences, team,
   webhooks, settings, modal overlays). These views use Tailwind's stock
   gray-* utilities instead of the dark-* custom palette, so DAY mode left
   them dark. Remap every gray token the views actually use.
   ========================================================================== */

/* ---------- gray text ---------- */
html.light .text-gray-300 { color: #334155; }
html.light .text-gray-400 { color: #475569; }
html.light .text-gray-500 { color: #64748b; }
html.light .text-gray-600 { color: #475569; }

/* hover / group-hover "white" links sit on neutral chips only — flip to
   dark on light surfaces (no colored-surface restore needed, verified) */
html.light .hover\:text-white:hover { color: #0f172a; }
html.light .group:hover .group-hover\:text-white,
html.light .group:focus .group-hover\:text-white { color: #0f172a; }

/* ---------- gray surfaces ---------- */
html.light .bg-gray-800 { background-color: #ffffff; }
html.light .bg-gray-900 { background-color: #f1f5f9; }
html.light .bg-gray-900\/50 { background-color: rgba(241, 245, 249, 0.78); }
html.light .bg-gray-700 { background-color: #e2e8f0; }
html.light .bg-gray-600 { background-color: #cbd5e1; }
html.light .bg-gray-500\/20 { background-color: rgba(100, 116, 139, 0.14); }
html.light .bg-gray-500\/10 { background-color: rgba(100, 116, 139, 0.09); }
html.light .hover\:bg-gray-700\/30:hover { background-color: rgba(226, 232, 240, 0.55); }
html.light .hover\:bg-gray-600:hover { background-color: #cbd5e1; }
html.light .hover\:bg-gray-500\/20:hover { background-color: rgba(100, 116, 139, 0.14); }

/* modal / mobile-sidebar backdrops stay dimmed (slightly lighter in DAY) */
html.light .bg-black\/60 { background-color: rgba(15, 23, 42, 0.45); }

/* ---------- gray borders + dividers ---------- */
html.light .border-gray-700 { border-color: #e2e8f0; }
html.light .border-gray-700\/50 { border-color: #e2e8f0; }
html.light .border-gray-600 { border-color: #cbd5e1; }
html.light .divide-gray-700\/50 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0; }

/* ---------- gray placeholders ---------- */
html.light .placeholder-gray-500::placeholder { color: #94a3b8; }

/* ==========================================================================
   v5.9 - COLORED SHADE MAP (the "white fonts" fix, final pass).
   The views paint status/danger/success/accent texts with light 400/300
   shades (text-red-400 x171, text-primary-400 x132, text-emerald-400 x83,
   text-amber-400 x40, text-yellow-400, text-blue-400, ...). Those shades
   are designed for DARK surfaces; on DAY-mode white cards they read as
   washed-out/white. Map every shade the blades actually use to its 600/700
   counterpart. Verified: every one sits on a neutral or 10%-translucent
   surface, so no colored-surface restores are needed. Static + hover +
   group-hover + opacity-suffix variants all covered below.
   ========================================================================== */

/* ---------- solid shades: 400 -> 600, 300 -> 700 (DAY readability) ---------- */
html.light .text-red-400 { color: #dc2626; }
html.light .text-red-300 { color: #b91c1c; }
html.light .text-red-500 { color: #dc2626; }
html.light .text-primary-400 { color: #4f46e5; }
html.light .text-primary-300 { color: #4338ca; }
html.light .text-primary-500 { color: #4f46e5; }
html.light .text-emerald-400 { color: #059669; }
html.light .text-emerald-300 { color: #047857; }
html.light .text-emerald-500 { color: #059669; }
html.light .text-amber-400 { color: #d97706; }
html.light .text-green-400 { color: #16a34a; }
html.light .text-green-300 { color: #15803d; }
html.light .text-blue-400 { color: #2563eb; }
html.light .text-blue-300 { color: #1d4ed8; }
html.light .text-yellow-400 { color: #ca8a04; }
html.light .text-yellow-300 { color: #a16207; }
html.light .text-purple-400 { color: #9333ea; }
html.light .text-indigo-400 { color: #4f46e5; }
html.light .text-indigo-300 { color: #4338ca; }
html.light .text-violet-400 { color: #7c3aed; }
html.light .text-sky-400 { color: #0284c7; }
html.light .text-orange-400 { color: #ea580c; }
html.light .text-pink-400 { color: #db2777; }
html.light .text-rose-400 { color: #e11d48; }

/* ---------- opacity-suffixed shades ---------- */
html.light .text-red-400\/80 { color: rgba(220, 38, 38, 0.85); }
html.light .text-red-300\/80 { color: rgba(185, 28, 28, 0.85); }
html.light .text-red-500\/80 { color: rgba(220, 38, 38, 0.85); }
html.light .text-emerald-400\/80 { color: rgba(5, 150, 105, 0.85); }
html.light .text-emerald-500\/80 { color: rgba(5, 150, 105, 0.85); }
html.light .text-primary-500\/20 { color: rgba(79, 70, 229, 0.25); }

/* ---------- hover / group-hover colored variants ---------- */
html.light .hover\:text-red-400:hover { color: #dc2626; }
html.light .hover\:text-red-300:hover { color: #b91c1c; }
html.light .hover\:text-primary-400:hover { color: #4f46e5; }
html.light .hover\:text-primary-300:hover { color: #4338ca; }
html.light .hover\:text-emerald-400:hover { color: #059669; }
html.light .hover\:text-emerald-300:hover { color: #047857; }
html.light .hover\:text-amber-400:hover { color: #d97706; }
html.light .hover\:text-yellow-300:hover { color: #a16207; }
html.light .hover\:text-blue-300:hover { color: #1d4ed8; }
html.light .hover\:text-indigo-300:hover { color: #4338ca; }
html.light .hover\:text-sky-400:hover { color: #0284c7; }
html.light .hover\:text-orange-400:hover { color: #ea580c; }
html.light .hover\:text-green-300:hover { color: #15803d; }
html.light .group:hover .group-hover\:text-primary-400,
html.light .group:focus .group-hover\:text-primary-400 { color: #4f46e5; }

/* ---------- missing gray hover surfaces (admin, queue, ab-tests) ---------- */
html.light .hover\:bg-gray-700:hover { background-color: #e2e8f0; }
html.light .hover\:bg-gray-500:hover { background-color: #cbd5e1; }

/* ---------- divide rules verified intact in v5.9 (byte-check passed) ---------- */

/* ---------- night-mode helper: dark text tokens invisible on the dark
   palette (DAY keeps them dark via the html.light override just below) ---- */
html .text-gray-800 { color: #e2e8f0; }
html.light .text-gray-800 { color: #1e293b; }

/* ---- v4 (v6.4 pack): DAY-mode text for headings + stat digits (missed in v3) ---- */
html.light .page-title    { color: #0f172a; }
html.light .section-title { color: #0f172a; }
html.light .stat-value    { color: #0f172a; }
html.light .stat-label    { color: #475569; }