/* ─────────────────────────────────────────────────────────────────────────────
   Runley — dark-mode override for the Tailwind (CDN) admin pages
   (create-event.html, organizer-dashboard.html).

   These pages are built with light Tailwind utility classes. Rather than adding
   dark: variants to every element, this sheet remaps the light utilities to dark
   values when html[data-theme="dark"] is set — matching the token palette used
   by the rest of the app (bg #0F1117 / surface #1A1D27 / border #2E3347).
   Load it AFTER the Tailwind CDN so these rules win.
   ───────────────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #0F1117 !important; color: #F1F5F9; }

/* Surfaces */
html[data-theme="dark"] .card,
html[data-theme="dark"] .bg-white { background: #1A1D27 !important; }
html[data-theme="dark"] .card { border-color: #2E3347 !important; }
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-50\/50,
html[data-theme="dark"] .bg-slate-50\/60,
html[data-theme="dark"] .bg-slate-100 { background: #232733 !important; }
html[data-theme="dark"] .bg-slate-800 { background: #0B0D12 !important; }

/* Text */
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-700 { color: #F1F5F9 !important; }
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500 { color: #CBD5E1 !important; }
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-slate-300 { color: #94A3B8 !important; }

/* Borders / dividers */
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .divide-slate-50 > * + *,
html[data-theme="dark"] .divide-slate-100 > * + * { border-color: #2E3347 !important; }

/* Accent tints (soft light backgrounds → translucent dark) */
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-green-50\/50 { background: rgba(34,197,94,.13) !important; }
html[data-theme="dark"] .bg-blue-50   { background: rgba(59,130,246,.15) !important; }
html[data-theme="dark"] .bg-purple-50 { background: rgba(168,85,247,.15) !important; }
html[data-theme="dark"] .bg-amber-50  { background: rgba(245,158,11,.13) !important; }
html[data-theme="dark"] .bg-rose-50,
html[data-theme="dark"] .bg-red-50    { background: rgba(239,68,68,.13) !important; }
html[data-theme="dark"] .border-green-200 { border-color: rgba(34,197,94,.35) !important; }
html[data-theme="dark"] .border-amber-200 { border-color: rgba(245,158,11,.35) !important; }
html[data-theme="dark"] .border-red-100   { border-color: rgba(239,68,68,.30) !important; }
html[data-theme="dark"] .text-amber-700   { color: #fcd34d !important; }
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-green-700   { color: #4ade80 !important; }

/* Form controls */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #232733 !important; color: #F1F5F9 !important; border-color: #2E3347 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #6B7280 !important; }

/* Modal / drawer scrims already use bg-black/40 — leave as-is. Keep gradients. */
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-xl { box-shadow: 0 8px 32px rgba(0,0,0,.55) !important; }