/* ═══════════════════════════════════════════════════════════════
   Dark Mode — iptv.domains panel
   Strategy: html.dark overrides applied after tailwind.css
   Color scale used: slate (better for dark UI than pure gray)
═══════════════════════════════════════════════════════════════ */

html, body { scroll-behavior: smooth; }

html.dark { color-scheme: dark; }

/* ── Page & surface backgrounds ─────────────────────────────── */
html.dark body                    { background-color: #0f172a !important; }
html.dark .bg-white               { background-color: #1e293b !important; }
html.dark .bg-gray-50             { background-color: #243147 !important; }
html.dark .bg-gray-100            { background-color: #334155 !important; }
html.dark .bg-gray-200            { background-color: #475569 !important; }

/* ── Text ───────────────────────────────────────────────────── */
html.dark .text-gray-900          { color: #f8fafc !important; }
html.dark .text-gray-800          { color: #f1f5f9 !important; }
html.dark .text-gray-700          { color: #e2e8f0 !important; }
html.dark .text-gray-600          { color: #cbd5e1 !important; }
html.dark .text-gray-500          { color: #94a3b8 !important; }
html.dark .text-gray-400          { color: #94a3b8 !important; }
html.dark .text-gray-300          { color: #94a3b8 !important; }

/* ── Brand (blue-purple #465fff) — lighten for dark surfaces ── */
html.dark .text-brand-500               { color: #a5b4fc !important; }
html.dark .text-brand-600               { color: #a5b4fc !important; }
html.dark .hover\:text-brand-500:hover  { color: #c7d2fe !important; }
html.dark .hover\:text-brand-600:hover  { color: #c7d2fe !important; }
html.dark .bg-brand-50                  { background-color: #1e1b4b !important; }
html.dark .bg-brand-500\/5              { background-color: rgba(99,102,241,.18) !important; }
html.dark .bg-brand-500\/10             { background-color: rgba(99,102,241,.28) !important; }
html.dark .border-brand-200             { border-color: #3730a3 !important; }
html.dark .border-brand-300             { border-color: #4338ca !important; }
html.dark .border-brand-400             { border-color: #6366f1 !important; }
html.dark .border-brand-500             { border-color: #818cf8 !important; }
html.dark .hover\:border-brand-400:hover { border-color: #a5b4fc !important; }
html.dark .hover\:border-brand-500:hover { border-color: #a5b4fc !important; }
html.dark .hover\:bg-brand-500\/5:hover  { background-color: rgba(99,102,241,.22) !important; }
html.dark .focus\:border-brand-500:focus { border-color: #818cf8 !important; }
html.dark .focus\:ring-brand-500\/20     { --tw-ring-color: rgba(129,140,248,.35) !important; }

/* ── Borders ────────────────────────────────────────────────── */
/* border-gray-50 override moved to v5 section below (rgba value) */
html.dark .border-gray-100        { border-color: #475569 !important; }
html.dark .border-gray-200        { border-color: #64748b !important; }
html.dark .border-gray-300        { border-color: #94a3b8 !important; }

/* ── Dividers ───────────────────────────────────────────────── */
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #475569 !important; }

/* ── Shadows ────────────────────────────────────────────────── */
html.dark .shadow-sm   { box-shadow: 0 1px 3px rgba(0,0,0,.6) !important; }
html.dark .shadow      { box-shadow: 0 2px 6px rgba(0,0,0,.6) !important; }
html.dark .shadow-md   { box-shadow: 0 4px 8px rgba(0,0,0,.65) !important; }
html.dark .shadow-lg   { box-shadow: 0 10px 20px rgba(0,0,0,.65) !important; }
html.dark .shadow-2xl  { box-shadow: 0 25px 50px rgba(0,0,0,.8) !important; }

/* ── Hover backgrounds (HIGH CONTRAST — key for usability) ─── */
html.dark .hover\:bg-gray-50:hover        { background-color: #334155 !important; }
html.dark .hover\:bg-gray-100:hover       { background-color: #475569 !important; }
html.dark .hover\:bg-gray-200:hover       { background-color: #64748b !important; }
html.dark .hover\:-translate-y-0\.5:hover { /* keep transform */ }
html.dark .hover\:shadow-md:hover         { box-shadow: 0 4px 8px rgba(0,0,0,.65) !important; }

/* ── Focus ring ─────────────────────────────────────────────── */
html.dark .ring-gray-200           { --tw-ring-color: rgba(100,116,139,.9) !important; }
html.dark .ring-1                  { --tw-ring-color: rgba(100,116,139,.9) !important; }

/* ── Overlays & backdrops ───────────────────────────────────── */
html.dark .bg-black\/50            { background-color: rgba(0,0,0,.75) !important; }
html.dark .bg-black\/60            { background-color: rgba(0,0,0,.82) !important; }
html.dark .backdrop-blur-sm        { /* keep */ }

/* ── Form elements ──────────────────────────────────────────── */
html.dark input:not([type=checkbox]):not([type=radio]),
html.dark select,
html.dark textarea {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #64748b !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,.25) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #94a3b8 !important; }
html.dark input:disabled,
html.dark select:disabled {
  background-color: #0f172a !important;
  color: #475569 !important;
}
html.dark input[readonly] {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
}
html.dark select option            { background-color: #1e293b; color: #f1f5f9; }

/* ── Colored status surfaces — dark variants ────────────────── */
html.dark .bg-emerald-50           { background-color: #052e16 !important; }
html.dark .bg-red-50               { background-color: #3f0a0a !important; }
html.dark .bg-amber-50             { background-color: #3a1c00 !important; }
/* Filled status badges/pills (e.g. "New" +N, "✏️ Renamed") — muted fills in dark mode
   so they don't glare; text-*-700 already remaps to a bright readable tone above. */
html.dark .bg-amber-100            { background-color: rgba(146,64,14,.38) !important; }
html.dark .bg-emerald-100          { background-color: rgba(16,185,129,.22) !important; }
html.dark .bg-blue-50              { background-color: #0c1a3d !important; }
html.dark .bg-sky-50               { background-color: #082044 !important; }
html.dark .bg-violet-50            { background-color: #1e0b3a !important; }
html.dark .bg-green-50             { background-color: #052e16 !important; }
html.dark .bg-orange-50            { background-color: #3a1500 !important; }

html.dark .border-emerald-200      { border-color: #166534 !important; }
html.dark .border-red-200          { border-color: #991b1b !important; }
html.dark .border-red-300          { border-color: #b91c1c !important; }
html.dark .border-amber-200        { border-color: #92400e !important; }
html.dark .border-blue-200         { border-color: #1e40af !important; }
html.dark .border-green-200        { border-color: #166534 !important; }
html.dark .border-orange-200       { border-color: #9a3412 !important; }

html.dark .ring-emerald-200        { --tw-ring-color: rgba(22,101,52,.7)  !important; }
html.dark .ring-red-200            { --tw-ring-color: rgba(153,27,27,.7)  !important; }
html.dark .ring-amber-200          { --tw-ring-color: rgba(146,64,14,.7)  !important; }
html.dark .ring-sky-200            { --tw-ring-color: rgba(3,105,161,.5)  !important; }
html.dark .ring-violet-200         { --tw-ring-color: rgba(76,29,149,.5)  !important; }
html.dark .ring-blue-200           { --tw-ring-color: rgba(30,64,175,.5)  !important; }

/* ── Colored text — brighten for dark backgrounds ───────────── */
html.dark .text-emerald-700        { color: #6ee7b7 !important; }
html.dark .text-emerald-800        { color: #a7f3d0 !important; }
html.dark .text-emerald-600        { color: #34d399 !important; }
html.dark .text-emerald-500        { color: #34d399 !important; }
html.dark .text-red-700            { color: #fca5a5 !important; }
html.dark .text-red-600            { color: #f87171 !important; }
html.dark .text-red-500            { color: #f87171 !important; }
html.dark .text-amber-700          { color: #fcd34d !important; }
html.dark .text-amber-800          { color: #fde68a !important; }
html.dark .text-amber-600          { color: #fbbf24 !important; }
html.dark .text-amber-500          { color: #fbbf24 !important; }
html.dark .text-blue-700           { color: #93c5fd !important; }
html.dark .text-blue-800           { color: #bfdbfe !important; }
html.dark .text-blue-600           { color: #60a5fa !important; }
html.dark .text-green-700          { color: #6ee7b7 !important; }
html.dark .text-green-600          { color: #34d399 !important; }
html.dark .text-orange-700         { color: #fdba74 !important; }
html.dark .text-sky-600            { color: #38bdf8 !important; }
html.dark .text-sky-700            { color: #7dd3fc !important; }
html.dark .text-violet-600         { color: #c4b5fd !important; }

/* ── Disabled states ─────────────────────────────────────────── */
html.dark .disabled\:text-gray-300:disabled { color: #334155 !important; }
html.dark .cursor-not-allowed                { opacity: .45; }

/* ── Password strength (inline CSS in settings) ─────────────── */
html.dark .pw-check          { color: #94a3b8 !important; }
html.dark .pw-check .ico     { border-color: #475569 !important; background: transparent !important; }
html.dark .pw-check.ok       { color: #6ee7b7 !important; }
html.dark .pw-check.ok .ico  { border-color: #166534 !important; background: #052e16 !important; }

/* ── Notification toggles ────────────────────────────────────── */
html.dark .notif-toggle      { background: #334155 !important; }
html.dark .notif-toggle.on   { background: #059669 !important; }
html.dark .notif-toggle::after { box-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ── Inline code / monospace ─────────────────────────────────── */
html.dark code {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #a5b4fc !important;
}

/* ── Modal-blur (used in settings) ──────────────────────────── */
html.dark .modal-blurred { filter: blur(2px) brightness(.6); }

/* ── Table / grid patterns common across admin pages ─────────── */
html.dark table                    { color: #e2e8f0; }
html.dark th                       { background-color: #1e293b !important; color: #94a3b8 !important; border-color: #475569 !important; }
html.dark td                       { border-color: #334155 !important; color: #e2e8f0; }
html.dark tr:hover td              { background-color: #334155 !important; }
html.dark .bg-white thead tr       { background-color: #1e293b !important; }

/* ── Sticky header & footer ──────────────────────────────────── */
/* Already handled by .bg-white — just ensure borders read well */

/* ── Scrollbar (webkit) ──────────────────────────────────────── */
html.dark ::-webkit-scrollbar              { width: 6px; height: 6px; }
html.dark ::-webkit-scrollbar-track        { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb        { background: #475569; border-radius: 3px; }
html.dark ::-webkit-scrollbar-thumb:hover  { background: #64748b; }

/* ── Theme toggle button ─────────────────────────────────────── */
html.dark #themeToggle             { color: #94a3b8 !important; }
html.dark #themeToggle:hover       { background-color: #334155 !important; color: #f1f5f9 !important; }

/* ── Tailwind ring-1 default override ────────────────────────── */
html.dark .ring-1 { box-shadow: 0 0 0 1px rgba(71,85,105,.9) !important; }
/* Status badges use ring-1 with explicit ring-*-200 — let those win */
html.dark .ring-emerald-200.ring-1 { box-shadow: 0 0 0 1px rgba(22,101,52,.7)  !important; }
html.dark .ring-red-200.ring-1     { box-shadow: 0 0 0 1px rgba(153,27,27,.7)  !important; }
html.dark .ring-amber-200.ring-1   { box-shadow: 0 0 0 1px rgba(146,64,14,.7)  !important; }
html.dark .ring-sky-200.ring-1     { box-shadow: 0 0 0 1px rgba(3,105,161,.5)  !important; }
html.dark .ring-violet-200.ring-1  { box-shadow: 0 0 0 1px rgba(76,29,149,.5)  !important; }
html.dark .ring-gray-200.ring-1    { box-shadow: 0 0 0 1px rgba(100,116,139,.9)  !important; }
html.dark .ring-blue-200.ring-1    { box-shadow: 0 0 0 1px rgba(30,64,175,.5)  !important; }

/* ── Tailwind opacity-modifier hover variants ────────────────── */
html.dark .hover\:bg-gray-50\/80:hover { background-color: rgba(51,65,85,.65) !important; }
html.dark .hover\:bg-brand-50:hover    { background-color: #1e1b4b !important; }
html.dark .hover\:bg-amber-50:hover    { background-color: #3a1c00 !important; }
html.dark .focus\:bg-gray-50:focus     { background-color: #243147 !important; }

/* ── Additional border/bg colors used across pages ───────────── */
html.dark .border-sky-100  { border-color: #0c4a6e !important; }
html.dark .bg-sky-100      { background-color: #082044 !important; }

/* ── kbd elements ────────────────────────────────────────────── */
html.dark kbd {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

/* ══════════════════════════════════════════════════════════════
   PLAYLIST EDITOR — custom inline CSS overrides
   These target hand-written class names with hardcoded colors
══════════════════════════════════════════════════════════════ */

/* Page body background (overrides body{background:#f9fafb} in inline style) */
html.dark .editor-wrap             { background: #0f172a; }

/* Panels */
html.dark .cat-panel,
html.dark .ch-panel                { background: #1e293b !important; }

/* Resize handle */
html.dark .resize-handle           { background: #334155 !important; }
html.dark .resize-handle:hover,
html.dark .resize-handle.resizing  { background: #475569 !important; }
html.dark .resize-handle::after    { background: #64748b !important; }

/* Category items */
html.dark .cat-item                { border-bottom-color: #243147 !important; }
html.dark .cat-item:hover          { background: #334155 !important; }
html.dark .cat-item.active-cat     { background: rgba(99,102,241,.26) !important; border-left-color: #818cf8 !important; border-left-width: 4px !important; }
html.dark .cat-item.kb-focused     { background: rgba(99,102,241,.14) !important; outline-color: #818cf8 !important; }

/* Channel items */
html.dark .channel-item.kb-focused { background: rgba(99,102,241,.18) !important; outline-color: #818cf8 !important; }

/* Global search results */
html.dark .search-result-item      { border-bottom-color: #334155 !important; }
html.dark .search-result-item:hover { background: #334155 !important; }

/* New-content highlights */
html.dark .cat-has-new-ch          { background: rgba(16,185,129,.08) !important; border-left-color: #10b981 !important; }
html.dark .cat-has-new-ch:hover    { background: rgba(16,185,129,.14) !important; }
html.dark .cat-is-new .cat-name::after { background: #064e3b !important; color: #6ee7b7 !important; }
html.dark .new-ch-badge            { background: #064e3b !important; color: #6ee7b7 !important; }

/* Sort segment buttons — inactive dark state */
html.dark .sort-seg-btn:not(.active) { background: #1e293b !important; color: #94a3b8 !important; }
html.dark .sort-seg-btn:not(.active):hover { background: #334155 !important; color: #e2e8f0 !important; }
html.dark .sort-seg-btn.active       { background: rgba(99,102,241,.25) !important; color: #a5b4fc !important; }
html.dark #catSortControl, html.dark #chSortControl { border-color: #334155 !important; background: #1e293b; }
html.dark #catSortControl .border-r, html.dark #chSortControl .border-r { border-right-color: #334155 !important; }

/* Sort button active (legacy class) */
html.dark .sort-btn-active         { background: rgba(99,102,241,.2) !important; color: #a5b4fc !important; border-color: #4338ca !important; }

/* Tips/help modal inner panels */
html.dark .bg-gray-50.rounded-xl   { background-color: #243147 !important; }

/* Category name in active category */
html.dark .cat-item.active-cat .cat-name { color: #a5b4fc !important; }

/* ══════════════════════════════════════════════════════════════
   Full-theme audit — v5 additions
══════════════════════════════════════════════════════════════ */

/* ── Light-mode: visible button / link borders — all types ─────── */
/* Ghost buttons: border-gray-200 (#e5e7eb) is near-invisible on white.
   Solid primary buttons: their existing border (e.g. brand-600 on brand-500)
   is barely 1 shade darker — no real frame. Strengthen all of them. */
button.border-gray-200:not(:disabled), a.border-gray-200    { border-color: #b8c0cc; }
button.border-gray-300:not(:disabled), a.border-gray-300    { border-color: #9ca3af; }
button.border-brand-600:not(:disabled), a.border-brand-600  { border-color: #312e81; }
button.border-brand-500:not(:disabled), a.border-brand-500  { border-color: #3730a3; }
button.border-emerald-600:not(:disabled), a.border-emerald-600 { border-color: #047857; }
button.border-emerald-200:not(:disabled), a.border-emerald-200 { border-color: #6ee7b7; }
button.border-red-200:not(:disabled), a.border-red-200      { border-color: #f87171; }
button.border-sky-200:not(:disabled), a.border-sky-200      { border-color: #7dd3fc; }

/* ── Active provider badge: ring/frame (light & dark) ───────────── */
.active-provider-badge {
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.28);
}
html.dark .active-provider-badge {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.30) !important;
}

/* ── Card-internal section dividers ──────────────────────────── */
/* The prominent separator after credentials: make it clearly white.
   The lighter row-border separators stay subtler. */
html.dark .card-divider  { background-color: rgba(255,255,255,0.28) !important; }
html.dark .border-gray-50 { border-color: rgba(255,255,255,0.07) !important; }

/* ── Violet text — provider body & multi-mode notice ─────────── */
html.dark .text-violet-700 { color: #ddd6fe !important; }
html.dark .text-violet-500 { color: #c4b5fd !important; }

/* ── Hover text — breadcrumbs & inline nav links ─────────────── */
/* Without these, hover:text-gray-900 applies Tailwind's #111827
   (very dark) on a dark background — text becomes invisible. */
html.dark .hover\:text-gray-900:hover { color: #f8fafc !important; }
html.dark .hover\:text-gray-800:hover { color: #f1f5f9 !important; }
html.dark .hover\:text-gray-700:hover { color: #e2e8f0 !important; }
html.dark .hover\:text-gray-600:hover { color: #cbd5e1 !important; }

/* ── Hover backgrounds — danger / destructive buttons ────────── */
/* hover:bg-red-100 applies Tailwind's #fee2e2 (light pink) on a
   dark surface — looks completely wrong. Override to dark-mode red. */
html.dark .hover\:bg-red-100:hover     { background-color: rgba(239,68,68,.22)   !important; }
html.dark .hover\:bg-red-50:hover      { background-color: rgba(153,27,27,.45)   !important; }
html.dark .hover\:bg-red-700:hover     { background-color: #991b1b               !important; }
html.dark .hover\:bg-emerald-100:hover { background-color: rgba(16,185,129,.20)  !important; }
html.dark .hover\:bg-emerald-50:hover  { background-color: rgba(5,46,22,.55)     !important; }

/* ── Hover text — red / danger actions ───────────────────────── */
/* hover:text-red-600 applies #dc2626 (dark red) on dark bg;
   text gets darker on hover = barely visible. Flip to light red. */
html.dark .hover\:text-red-600:hover { color: #fca5a5 !important; }
html.dark .hover\:text-red-700:hover { color: #fca5a5 !important; }
html.dark .hover\:text-red-500:hover { color: #fca5a5 !important; }

/* ── Hover text — brand / accent links ──────────────────────── */
html.dark .hover\:text-brand-600:hover { color: #c7d2fe !important; }
html.dark .hover\:text-brand-500:hover { color: #c7d2fe !important; }

/* ── Playlist editor — renamed filter banner (filter-active state) ── */
html.dark #resetNamesBanner                        { background: #292100 !important; border-color: #78350f !important; }
html.dark #resetNamesBanner.filter-active          { background: #3a1c00 !important; border-color: #b45309 !important; }
html.dark #resetNamesBanner.filter-active #resetNamesBannerText { color: #fde68a !important; }

/* ── Playlist editor — toolbar +NEW / +ADD CHANNELS buttons (purple, outside #addChPanel) ── */
html.dark #createCatBtn, html.dark #addChBtn       { background: #1a0e2e !important; border-color: #4c1d95 !important; color: #c084fc !important; }
html.dark #createCatBtn:hover, html.dark #addChBtn:hover { background: #2d1f4e !important; }

/* ── Playlist editor — Add Channels panel (purple) ── */
html.dark #addChPanel                              { background: #1a0e2e !important; border-color: #4c1d95 !important; }
html.dark #addChPanel .bg-purple-50               { background: #1a0e2e !important; }
html.dark #addChPanel .border-purple-200          { border-color: #4c1d95 !important; }
html.dark #addChPanel .text-purple-700            { color: #d8b4fe !important; }
html.dark #addChPanel .text-purple-500            { color: #c084fc !important; }
html.dark #addChPanel .text-purple-600            { color: #c084fc !important; }
html.dark #addChPanel input                       { background: #1e293b !important; border-color: #4c1d95 !important; color: #e2e8f0 !important; }
html.dark #addChPanel input::placeholder          { color: #7c6db0 !important; }
html.dark #addChResults                           { background: #1e293b !important; border-color: #334155 !important; }
html.dark #addChResults > div                     { border-bottom-color: #334155 !important; }
html.dark #addChResults > div:hover               { background: #2d3f5e !important; }
html.dark #addChResults .text-gray-800            { color: #e2e8f0 !important; }
html.dark #addChResults .text-gray-400            { color: #94a3b8 !important; }

/* ── Playlist editor — Copy to Category modal ── */
html.dark #copyToCatModal .bg-white               { background: #1e293b !important; }
html.dark #copyToCatModal h3.text-gray-900        { color: #f1f5f9 !important; }
html.dark #copyToCatModal .text-gray-400          { color: #94a3b8 !important; }
html.dark #copyToCatModal .text-gray-600          { color: #cbd5e1 !important; }
html.dark #copyToCatModal .border-gray-100        { border-color: #334155 !important; }
html.dark #copyToCatModal select,
html.dark #copyToCatModal input[type="text"]      { background: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; }
html.dark #copyToCatModal .bg-gray-50             { background: #0f172a !important; }

/* ── Playlist editor — cat renamed dot (amber) already inherits amber color, keep visible in dark ── */
html.dark #catList.renamed-filter .cat-item:not([data-original-name=""]) .cat-name::after { background: #f59e0b !important; }
html.dark .channel-item.is-renamed .ch-name::after { background: #f59e0b !important; }

/* ── Playlist editor — channel list hover in add-channels results ── */
html.dark #addChResults .hover\:bg-purple-50:hover { background: #2d1f4e !important; }

/* ── Playlist editor — custom cat item purple text in dark ── */
html.dark .custom-cat-item .cat-name              { color: #c084fc !important; }

/* ── Custom stream mode — "+ NEW" chooser, import picker, empty state (purple isn't global) ── */
html.dark #cpNewModal .bg-white,
html.dark #cpImportModal .bg-white                 { background: #1e293b !important; }
html.dark #cpNewModal .bg-purple-50,
html.dark #cpEmptyState .bg-purple-50              { background: #1a0e2e !important; }
html.dark #cpNewModal .border-purple-200          { border-color: #4c1d95 !important; }
html.dark #cpNewModal .hover\:bg-purple-100:hover  { background: #2d1f4e !important; }
html.dark #cpNewModal .text-purple-500,
html.dark #cpImportModal .text-purple-500,
html.dark #cpEmptyState .text-purple-400          { color: #c084fc !important; }
html.dark #cpNewModal .border-gray-100,
html.dark #cpImportModal .border-gray-100         { border-color: #334155 !important; }
html.dark #cpImportModal input                     { background: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; }
html.dark #cpImportModal input::placeholder        { color: #64748b !important; }
html.dark #cpImportModal .hover\:bg-gray-50:hover  { background: #0f172a !important; }
html.dark #cpImportModal .text-gray-800           { color: #e2e8f0 !important; }
html.dark #cpImportModal .text-gray-400,
html.dark #cpImportModal .text-gray-500           { color: #94a3b8 !important; }

/* ── Multi FINAL category-order modal ── */
html.dark #multiOrderModal .bg-white               { background: #1e293b !important; }
html.dark #multiOrderModal .mo-row                 { background: #0f172a !important; border-color: #334155 !important; }
html.dark #multiOrderModal .mo-row .text-gray-800  { color: #e2e8f0 !important; }
html.dark #multiOrderModal .text-purple-600        { color: #c084fc !important; }
html.dark #multiOrderModal .bg-purple-50           { background: #2d1f4e !important; }
html.dark #multiOrderModal .border-purple-200      { border-color: #6d28d9 !important; }
html.dark #multiOrderModal .border-gray-100,
html.dark #multiOrderModal .border-gray-200        { border-color: #334155 !important; }
html.dark .custom-cat-item.active-cat             { background: rgba(124,58,237,.26) !important; border-left-color: #a855f7 !important; border-left-width: 4px !important; }

/* ── Playlist editor — find & replace panel in dark ── */
html.dark #fnrPanel                               { background: #292100 !important; border-color: #b45309 !important; }
html.dark #fnrPanel .text-amber-700              { color: #fde68a !important; }
html.dark #fnrPanel input                        { background: #1e293b !important; border-color: #78350f !important; color: #e2e8f0 !important; }

/* ── Playlist editor — new content banner in dark ── */
html.dark #newContentBanner                      { background: #052e16 !important; border-color: #166534 !important; }
html.dark #newContentBanner .text-emerald-700    { color: #6ee7b7 !important; }
html.dark #newContentBanner .text-emerald-600    { color: #34d399 !important; }

/* ── Playlist editor — tips modal panels in dark ── */
html.dark #tipsModal .bg-white                   { background: #1e293b !important; }
html.dark #tipsModal .border-gray-100            { border-color: #334155 !important; }
html.dark #tipsModal .bg-gray-50                 { background: #0f172a !important; }
html.dark #tipsModal .text-gray-700              { color: #cbd5e1 !important; }
html.dark #tipsModal .text-gray-600              { color: #94a3b8 !important; }
html.dark #tipsModal .text-gray-500              { color: #94a3b8 !important; }
html.dark #tipsModal .text-gray-900              { color: #f1f5f9 !important; }
html.dark #tipsModal kbd                         { background: #334155 !important; border-color: #475569 !important; color: #cbd5e1 !important; }
html.dark #tipsModal code                        { background: #334155 !important; color: #e2e8f0 !important; }
html.dark #tipsModal .divide-y                  { border-color: #334155 !important; }
html.dark #tipsModal .bg-amber-50               { background: #292100 !important; border-color: #78350f !important; }
html.dark #tipsModal .bg-emerald-50             { background: #052e16 !important; border-color: #166534 !important; }
html.dark #tipsModal .text-emerald-700          { color: #6ee7b7 !important; }
html.dark #tipsModal .bg-purple-50              { background: #1a0e2e !important; border-color: #4c1d95 !important; }
html.dark #tipsModal .text-purple-600           { color: #c084fc !important; }

/* ── Playlist editor — icon editor modal in dark ── */
html.dark #iconEditorModal .bg-white             { background: #1e293b !important; }
html.dark #iconEditorModal .border-gray-100      { border-color: #334155 !important; }
html.dark #iconEditorModal .text-gray-900        { color: #f1f5f9 !important; }
html.dark #iconEditorModal .text-gray-400        { color: #94a3b8 !important; }
html.dark #iconEditorModal .text-gray-500        { color: #94a3b8 !important; }
html.dark #iconEditorModal input[type="url"]     { background: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; }
html.dark #iconEditorModal .bg-gray-50           { background: #0f172a !important; }
html.dark #iconEditorModal .bg-gray-100          { background: #334155 !important; }

/* ── Playlist editor — unified Details modal (Live/Movie/Series) in dark ── */
html.dark #detailsModal .bg-white                 { background: #1e293b !important; }
html.dark #detailsModal .text-gray-900            { color: #f1f5f9 !important; }
html.dark #detailsModal .text-gray-800            { color: #e2e8f0 !important; }
html.dark #detailsModal .text-gray-700            { color: #cbd5e1 !important; }
html.dark #detailsModal .text-gray-600            { color: #cbd5e1 !important; }
html.dark #detailsModal .text-gray-500            { color: #94a3b8 !important; }
html.dark #detailsModal .text-gray-400            { color: #94a3b8 !important; }
html.dark #detailsModal .text-gray-300            { color: #64748b !important; }
html.dark #detailsModal .border-gray-100          { border-color: #334155 !important; }
html.dark #detailsModal .border-gray-50           { border-color: #1e293b !important; }
html.dark #detailsModal .divide-gray-50 > * + *   { border-color: #1e293b !important; }
html.dark #detailsModal .divide-gray-100 > * + *  { border-color: #334155 !important; }
html.dark #detailsModal .bg-gray-50               { background: #0f172a !important; }
html.dark #detailsModal .bg-gray-100              { background: #334155 !important; }
html.dark #detailsModal .bg-brand-50              { background: #1e293b !important; }
html.dark #detailsModal code                      { background: #334155 !important; color: #e2e8f0 !important; }
html.dark #detailsModal input                     { background: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; }

/* ── Playlist editor — channel hover preview card in dark ── */
html.dark #chHoverCard                 { background: #1e293b; border-color: #334155; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
html.dark #chHoverCard .chc-head       { background: linear-gradient(135deg,#172033,#1b2440); border-color: #334155; }
html.dark #chHoverCard .chc-logo       { background: #0f172a; border-color: #334155; }
html.dark #chHoverCard .chc-name       { color: #f1f5f9; }
html.dark #chHoverCard .chc-prog       { color: #e2e8f0; }
html.dark #chHoverCard .chc-sub,
html.dark #chHoverCard .chc-time       { color: #94a3b8; }
html.dark #chHoverCard .chc-plot       { color: #cbd5e1; }
html.dark #chHoverCard .chc-chip       { background: #334155; color: #cbd5e1; }
html.dark #chHoverCard .chc-bar        { background: #334155; }

/* ── Playlist editor — create custom cat modal in dark ── */
html.dark #createCatModal .bg-white              { background: #1e293b !important; }
html.dark #createCatModal .border-gray-100       { border-color: #334155 !important; }
html.dark #createCatModal .text-gray-900         { color: #f1f5f9 !important; }
html.dark #createCatModal .text-gray-500         { color: #94a3b8 !important; }
html.dark #createCatModal input[type="text"]     { background: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; }

/* ══════════════════════════════════════════════════════════════
   v6 — Missing hover overrides + violet border + button borders
══════════════════════════════════════════════════════════════ */

/* ── Colored hover states missing from v5 ────────────────────
   Without these, hovering colored tinted buttons shows jarring
   light-mode pastels (#fef3c7, #dbeafe, #ede9fe) on dark BG. */
html.dark .hover\:bg-amber-100:hover   { background-color: rgba(146,64,14,.35)  !important; }
html.dark .hover\:bg-blue-100:hover    { background-color: rgba(30,58,138,.35)  !important; }
html.dark .hover\:bg-violet-100:hover  { background-color: rgba(76,29,149,.35)  !important; }
html.dark .hover\:bg-sky-100:hover     { background-color: rgba(3,105,161,.30)  !important; }
html.dark .hover\:bg-green-100:hover   { background-color: rgba(5,46,22,.40)    !important; }
html.dark .hover\:bg-orange-100:hover  { background-color: rgba(124,45,18,.35)  !important; }
html.dark .hover\:bg-indigo-100:hover  { background-color: rgba(49,46,129,.35)  !important; }

/* ── Violet border — used on violet tinted buttons ───────────
   Without this, border-violet-200 renders as #ddd6fe (light
   lavender) against #1e0b3a (dark violet bg) — too bright. */
html.dark .border-violet-200  { border-color: #6d28d9 !important; }
html.dark .border-sky-200     { border-color: #0369a1 !important; }
html.dark .border-indigo-200  { border-color: #3730a3 !important; }

/* ── Button borders in dark mode — solid action buttons ──────
   Solid colored buttons (brand, emerald, red, green, amber)
   keep their bg in dark mode. Give borders a matching lighter
   shade so the frame reads clearly against the dark surface. */
html.dark button.border-brand-600:not(:disabled),
html.dark a.border-brand-600   { border-color: #818cf8 !important; }
html.dark button.border-emerald-600:not(:disabled),
html.dark a.border-emerald-600 { border-color: #34d399 !important; }
html.dark button.border-red-700:not(:disabled),
html.dark a.border-red-700     { border-color: #f87171 !important; }
html.dark button.border-green-700:not(:disabled),
html.dark a.border-green-700   { border-color: #6ee7b7 !important; }
html.dark button.border-amber-700:not(:disabled),
html.dark a.border-amber-700   { border-color: #fbbf24 !important; }
html.dark button.border-gray-200:not(:disabled),
html.dark a.border-gray-200    { border-color: #64748b !important; }

/* ══════════════════════════════════════════════════════════════
   v7 — Full readability audit: WCAG AA gap fixes
══════════════════════════════════════════════════════════════ */

/* hover:text-gray-500 / hover:text-gray-400 / hover:text-gray-300
   were missing dark overrides. Tailwind's compiled defaults apply
   light-mode values (#6b7280, #9ca3af) which darken icon text on
   hover — the opposite of what dark mode needs for interactivity. */
html.dark .hover\:text-gray-500:hover  { color: #cbd5e1 !important; }
html.dark .hover\:text-gray-400:hover  { color: #cbd5e1 !important; }
html.dark .hover\:text-gray-300:hover  { color: #94a3b8 !important; }

/* hover:text-gray-200 — e.g. nav links with very light hover on dark
   surfaces. Without override, #e5e7eb (near-white) appears on hover
   which is fine, but guard against themed future uses.               */
html.dark .hover\:text-gray-200:hover  { color: #f1f5f9 !important; }

/* Provider onboarding icon container: inline style="background:#eff2ff"
   (light lavender) shows as a bright box on dark surfaces. Neutralise. */
html.dark [style*="background:#eff2ff"] { background: #1e1b4b !important; }

/* ── text-brand-700: missing dark override — stays as Tailwind #3730a3
   (very dark indigo) on dark surfaces → nearly invisible. Used in the
   import-by-ID panel info box in edit.php.                            */
html.dark .text-brand-700 { color: #a5b4fc !important; }

/* ── bg-orange-100 / ring-orange-300: Tor badge missing dark overrides.
   bg-orange-100 (#ffedd5 light peach) stays light in dark mode while
   text-orange-700 becomes #fdba74 (light) → low contrast on light bg. */
html.dark .bg-orange-100  { background-color: rgba(120,53,15,.45) !important; }
html.dark .ring-orange-300 { --tw-ring-color: rgba(180,83,9,.6) !important; }
html.dark .ring-orange-300.ring-1 { box-shadow: 0 0 0 1px rgba(180,83,9,.6) !important; }

/* ══════════════════════════════════════════════════════════════
   Custom Select Component — light mode base + dark overrides
   Trigger inherits Tailwind classes from native <select>.
   Only structural properties defined here; theming comes from
   the copied Tailwind classes (bg-white, border-gray-300, etc.)
══════════════════════════════════════════════════════════════ */

.cs-wrap { display: block; }

.cs-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
}
.cs-trigger:disabled { cursor: not-allowed; opacity: .55; }

.cs-trigger:focus-visible {
  outline: none;
  border-color: #465FFF !important;
  box-shadow: 0 0 0 3px rgba(70,95,255,0.15) !important;
}
.cs-wrap.cs-on .cs-trigger {
  border-color: #465FFF !important;
  box-shadow: 0 0 0 3px rgba(70,95,255,0.15) !important;
}

.cs-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cs-arr {
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.15s;
  line-height: 0;
}
.cs-wrap.cs-on .cs-arr { transform: rotate(180deg); }

.cs-list {
  /* position:fixed, top/left/width/z-index set by JS (portal — never clipped by overflow:hidden parents) */
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  overflow: hidden;
  overflow-y: auto;
  max-height: 80vh; /* overridden per-open by JS based on actual available space */
}

@keyframes csDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cs-opt {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  color: #111827;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s;
  user-select: none;
}
.cs-opt:last-child { border-bottom: none; }
/* Non-selected hover/keyboard-nav: neutral slate — clearly different from blue-tinted selected */
.cs-opt:hover,
.cs-opt.cs-kb              { background: #f1f5f9; color: #111827; }
/* Selected: blue tint with bold text — distinct from hover */
.cs-opt.cs-sel             { background: #dbeafe; color: #1d4ed8; font-weight: 600; }
/* Selected when hovered or keyboard-focused: darker blue */
.cs-opt.cs-sel:hover,
.cs-opt.cs-sel.cs-kb       { background: #bfdbfe; color: #1e40af; }
.cs-opt.cs-dis             { color: #9ca3af; cursor: not-allowed; }
.cs-opt.cs-dis:hover       { background: transparent; color: #9ca3af; }

/* Dark mode for custom select */
html.dark .cs-trigger:focus-visible,
html.dark .cs-wrap.cs-on .cs-trigger {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.25) !important;
}
html.dark .cs-arr { color: #94a3b8; }
html.dark .cs-list {
  background: #1e293b;
  border-color: #475569;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
html.dark .cs-opt { color: #e2e8f0; border-bottom-color: #334155; }
/* Dark non-selected hover: neutral slate-700 + near-white — distinct from indigo selected */
html.dark .cs-opt:hover,
html.dark .cs-opt.cs-kb          { background: #334155; color: #f1f5f9; }
/* Dark selected: indigo tint + lavender text */
html.dark .cs-opt.cs-sel         { background: rgba(99,102,241,.25); color: #c7d2fe; }
/* Dark selected + hovered: darker indigo */
html.dark .cs-opt.cs-sel:hover,
html.dark .cs-opt.cs-sel.cs-kb   { background: rgba(99,102,241,.38); color: #e0e7ff; }
html.dark .cs-opt.cs-dis         { color: #475569; }
html.dark .cs-opt.cs-dis:hover   { background: transparent; color: #475569; }