/* ============================================================
   Stadion Arena Theme System
   Activate by setting  html[data-theme="dark"]
   Default (no attribute / "default") = existing light theme
   Dark palette mirrors the Figma owner-portal design:
     canvas #0B1120 · card #111827 · inset #1E293B · border #243244
   ============================================================ */

/* ── Country flag picker ───────────────────────────────────
   Flags are drawn as <img> from flagcdn, never as emoji: Windows
   ships no country-flag glyphs, so a regional-indicator pair like
   U+1F1EF U+1F1F4 renders as the bare letters "JO" in Chrome/Edge.
   A native <select> cannot hold an <img>, hence this <details>
   dropdown. Structural rules only — colours come from the Tailwind
   classes on each instance, so the theme overrides above still win.
   ------------------------------------------------------------ */
.country-flag-picker > summary { list-style: none; cursor: pointer; }
.country-flag-picker > summary::-webkit-details-marker { display: none; }
/* Not `i[data-lucide=…]`: lucide.createIcons() swaps the <i> for an <svg> and
   carries the attribute over, so an element-qualified selector never matches. */
.country-flag-picker > summary [data-lucide="chevron-down"] { transition: transform .15s ease; }
.country-flag-picker[open] > summary [data-lucide="chevron-down"] { transform: rotate(180deg); }
/* Flag bitmaps are 4:3; lock the box so a slow/blocked CDN cannot reflow the row. */
.flag-img { width: 1.25rem; height: 0.9375rem; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.flag-img-sm { width: 1rem; height: 0.75rem; object-fit: cover; border-radius: 2px; flex-shrink: 0; }

/* ── DARK (Figma owner-portal palette) ─────────────────────── */
[data-theme="dark"] { color-scheme: dark; }

[data-theme="dark"] body { background: #0B1120 !important; color: #E5E7EB !important; }

[data-theme="dark"] nav,
[data-theme="dark"] header { background-color: #111827 !important; border-color: #243244 !important; }

/* Surfaces */
[data-theme="dark"] .bg-white         { background-color: #111827 !important; }
[data-theme="dark"] .bg-white\/90,
[data-theme="dark"] .bg-white\/95      { background-color: rgba(17,24,39,0.92) !important; }
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-50\/60,
[data-theme="dark"] .bg-gray-50\/70,
[data-theme="dark"] .bg-gray-50\/50,
[data-theme="dark"] .bg-gray-50\/30    { background-color: #1E293B !important; }
[data-theme="dark"] .bg-gray-100       { background-color: #1E293B !important; }
[data-theme="dark"] .bg-gray-200       { background-color: #243244 !important; }
[data-theme="dark"] .bg-slate-900,
[data-theme="dark"] .bg-slate-950      { background-color: #0B1120 !important; }

/* Borders */
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300   { border-color: #243244 !important; }
[data-theme="dark"] .border-gray-100   { border-color: #1B2536 !important; }
[data-theme="dark"] .divide-gray-50 > * + *,
[data-theme="dark"] .divide-gray-100 > * + *,
[data-theme="dark"] .divide-y > * + *  { border-top-color: #243244 !important; }

/* Text */
[data-theme="dark"] .text-gray-900 { color: #F3F4F6 !important; }
[data-theme="dark"] .text-gray-800 { color: #E5E7EB !important; }
[data-theme="dark"] .text-gray-700 { color: #D1D5DB !important; }
[data-theme="dark"] .text-gray-600 { color: #B0BAC9 !important; }
[data-theme="dark"] .text-gray-500 { color: #94A3B8 !important; }
[data-theme="dark"] .text-gray-400 { color: #7A8699 !important; }
[data-theme="dark"] .text-gray-300 { color: #5B6472 !important; }

/* Tinted card backgrounds */
[data-theme="dark"] .bg-amber-50   { background-color: rgba(245,158,11,0.12) !important; }
[data-theme="dark"] .bg-orange-50  { background-color: rgba(249,115,22,0.12) !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; }
[data-theme="dark"] .bg-lime-50    { background-color: rgba(132,204,22,0.12) !important; }
[data-theme="dark"] .bg-indigo-50  { background-color: rgba(99,102,241,0.14) !important; }
[data-theme="dark"] .bg-violet-50  { background-color: rgba(139,92,246,0.14) !important; }
[data-theme="dark"] .bg-fuchsia-50 { background-color: rgba(217,70,239,0.12) !important; }
[data-theme="dark"] .bg-red-50     { background-color: rgba(239,68,68,0.12)  !important; }
[data-theme="dark"] .bg-rose-50    { background-color: rgba(244,63,94,0.12)  !important; }
[data-theme="dark"] .bg-blue-50    { background-color: rgba(59,130,246,0.12) !important; }
[data-theme="dark"] .bg-sky-50     { background-color: rgba(14,165,233,0.12) !important; }
[data-theme="dark"] .bg-violet-100 { background-color: rgba(139,92,246,0.20) !important; }
[data-theme="dark"] .bg-emerald-100{ background-color: rgba(16,185,129,0.20) !important; }
[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99,102,241,0.20) !important; }
[data-theme="dark"] .bg-amber-100  { background-color: rgba(245,158,11,0.20) !important; }
[data-theme="dark"] .bg-rose-100   { background-color: rgba(244,63,94,0.20)  !important; }
[data-theme="dark"] .bg-purple-50  { background-color: rgba(168,85,247,0.12) !important; }
[data-theme="dark"] .bg-pink-50    { background-color: rgba(236,72,153,0.12) !important; }
[data-theme="dark"] .bg-yellow-50  { background-color: rgba(234,179,8,0.12)  !important; }
[data-theme="dark"] .bg-blue-100   { background-color: rgba(59,130,246,0.20) !important; }
[data-theme="dark"] .bg-sky-100    { background-color: rgba(14,165,233,0.20) !important; }
[data-theme="dark"] .bg-cyan-100   { background-color: rgba(6,182,212,0.20)  !important; }
[data-theme="dark"] .bg-teal-100   { background-color: rgba(20,184,166,0.20) !important; }
[data-theme="dark"] .bg-lime-100   { background-color: rgba(132,204,22,0.20) !important; }
[data-theme="dark"] .bg-orange-100 { background-color: rgba(249,115,22,0.20) !important; }
[data-theme="dark"] .bg-pink-100   { background-color: rgba(236,72,153,0.20) !important; }
[data-theme="dark"] .bg-red-100    { background-color: rgba(239,68,68,0.20)  !important; }

/* Tinted borders */
[data-theme="dark"] .border-amber-200   { border-color: rgba(245,158,11,0.30)  !important; }
[data-theme="dark"] .border-orange-200  { border-color: rgba(249,115,22,0.30)  !important; }
[data-theme="dark"] .border-emerald-200 { border-color: rgba(16,185,129,0.30)  !important; }
[data-theme="dark"] .border-indigo-200  { border-color: rgba(99,102,241,0.30)  !important; }
[data-theme="dark"] .border-violet-200  { border-color: rgba(139,92,246,0.30)  !important; }
[data-theme="dark"] .border-rose-200    { border-color: rgba(244,63,94,0.30)   !important; }
[data-theme="dark"] .border-red-200     { border-color: rgba(239,68,68,0.30)   !important; }
[data-theme="dark"] .border-blue-200    { border-color: rgba(59,130,246,0.30)  !important; }
[data-theme="dark"] .border-sky-200     { border-color: rgba(14,165,233,0.30)  !important; }
[data-theme="dark"] .border-amber-100   { border-color: rgba(245,158,11,0.16)  !important; }
[data-theme="dark"] .border-emerald-100 { border-color: rgba(16,185,129,0.16)  !important; }
[data-theme="dark"] .border-indigo-100  { border-color: rgba(99,102,241,0.16)  !important; }
[data-theme="dark"] .border-violet-100  { border-color: rgba(139,92,246,0.16)  !important; }
[data-theme="dark"] .border-rose-100    { border-color: rgba(244,63,94,0.16)   !important; }
[data-theme="dark"] .border-purple-200  { border-color: rgba(168,85,247,0.30)  !important; }
[data-theme="dark"] .border-pink-200    { border-color: rgba(236,72,153,0.30)  !important; }
[data-theme="dark"] .border-cyan-200    { border-color: rgba(6,182,212,0.30)   !important; }
[data-theme="dark"] .border-teal-200    { border-color: rgba(20,184,166,0.30)  !important; }
[data-theme="dark"] .border-lime-200    { border-color: rgba(132,204,22,0.30)  !important; }

/* Form controls */
[data-theme="dark"] input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #0B1120 !important;
  border-color: #243244 !important;
  color: #E5E7EB !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #5B6472 !important; }

/* Hover overrides */
[data-theme="dark"] .hover\:bg-gray-50:hover    { background-color: #1E293B !important; }
[data-theme="dark"] .hover\:bg-gray-100:hover   { background-color: #243244 !important; }
[data-theme="dark"] .hover\:bg-gray-200:hover   { background-color: #2C3B52 !important; }
[data-theme="dark"] .hover\:bg-indigo-50:hover  { background-color: rgba(99,102,241,0.18) !important; }
[data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129,0.18) !important; }
[data-theme="dark"] .hover\:bg-amber-50:hover   { background-color: rgba(245,158,11,0.18) !important; }
[data-theme="dark"] .hover\:bg-violet-50:hover  { background-color: rgba(139,92,246,0.18) !important; }
[data-theme="dark"] .hover\:bg-rose-50:hover    { background-color: rgba(244,63,94,0.18)  !important; }
[data-theme="dark"] .hover\:bg-red-50:hover     { background-color: rgba(239,68,68,0.18)  !important; }
[data-theme="dark"] .hover\:bg-red-100:hover    { background-color: rgba(239,68,68,0.20)  !important; }
[data-theme="dark"] .hover\:bg-blue-100:hover   { background-color: rgba(59,130,246,0.18) !important; }
[data-theme="dark"] .hover\:bg-blue-50:hover    { background-color: rgba(59,130,246,0.18) !important; }
[data-theme="dark"] .hover\:bg-sky-50:hover     { background-color: rgba(14,165,233,0.18) !important; }
[data-theme="dark"] .hover\:bg-orange-50:hover  { background-color: rgba(249,115,22,0.18) !important; }
[data-theme="dark"] .hover\:bg-amber-100:hover  { background-color: rgba(245,158,11,0.24) !important; }
[data-theme="dark"] .hover\:bg-sky-100:hover    { background-color: rgba(14,165,233,0.24) !important; }
[data-theme="dark"] .hover\:bg-orange-100:hover { background-color: rgba(249,115,22,0.24) !important; }
[data-theme="dark"] .hover\:bg-rose-100:hover   { background-color: rgba(244,63,94,0.24)  !important; }
[data-theme="dark"] .hover\:bg-emerald-100:hover{ background-color: rgba(16,185,129,0.24) !important; }
[data-theme="dark"] .hover\:bg-indigo-100:hover { background-color: rgba(99,102,241,0.24) !important; }
[data-theme="dark"] .hover\:bg-violet-100:hover { background-color: rgba(139,92,246,0.24) !important; }
[data-theme="dark"] .hover\:border-gray-200:hover { border-color: #2C3B52 !important; }

[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow,
[data-theme="dark"] .shadow-md { box-shadow: 0 1px 3px rgba(0,0,0,0.55) !important; }