/*
 * ══════════════════════════════════════════════════════
 *  inPAY — Global Theme System (Dark / Light Mode)
 *  Faylni HEAD.PHP ga qo'shing:
 *  <link rel="stylesheet" href="/assets/css/theme.css">
 * ══════════════════════════════════════════════════════
 */

/* ─── CSS VARIABLES ─── */
:root {
  /* Light */
  --th-bg:          #f8fafc;
  --th-bg2:         #ffffff;
  --th-bg3:         #f1f5f9;
  --th-border:      #e2e8f0;
  --th-border2:     #cbd5e1;
  --th-text:        #1a202c;
  --th-text2:       #475569;
  --th-text3:       #94a3b8;
  --th-accent:      #4f46e5;
  --th-accent-bg:   #ede9fe;
  --th-green:       #16a34a;
  --th-red:         #dc2626;
  --th-shadow:      rgba(0,0,0,0.06);
  --th-shadow2:     rgba(0,0,0,0.12);
  --th-card:        0 1px 6px rgba(0,0,0,.06);
  --th-overlay:     rgba(255,255,255,0.8);
}

/* Dark mode variables — activated by :is(body.dark, html.dark, [data-theme="dark"]) */
:is(body.dark, html.dark, [data-theme="dark"]) {
  --th-bg:          #0f172a;
  --th-bg2:         #1e293b;
  --th-bg3:         #0d1829;
  --th-border:      #334155;
  --th-border2:     #475569;
  --th-text:        #f1f5f9;
  --th-text2:       #94a3b8;
  --th-text3:       #64748b;
  --th-accent:      #818cf8;
  --th-accent-bg:   #1e1b4b;
  --th-green:       #4ade80;
  --th-red:         #f87171;
  --th-shadow:      rgba(0,0,0,0.4);
  --th-shadow2:     rgba(0,0,0,0.6);
  --th-card:        0 1px 6px rgba(0,0,0,.4);
  --th-overlay:     rgba(15,23,42,0.85);
}

/* ─── BASE ─── */
html {
  transition: background-color .25s ease, color .25s ease;
}
body {
  background-color: var(--th-bg) !important;
  color: var(--th-text) !important;
  transition: background-color .25s ease, color .25s ease;
}

/* ─── SCROLLBAR ─── */
:is(body.dark, html.dark, [data-theme="dark"]) ::-webkit-scrollbar { width: 8px; height: 8px; }
:is(body.dark, html.dark, [data-theme="dark"]) ::-webkit-scrollbar-track { background: var(--th-bg3); }
:is(body.dark, html.dark, [data-theme="dark"]) ::-webkit-scrollbar-thumb { background: var(--th-border2); border-radius: 4px; }
:is(body.dark, html.dark, [data-theme="dark"]) ::-webkit-scrollbar-thumb:hover { background: var(--th-text3); }

/* ─── COMMON ELEMENTS ─── */

/* Cards / panels */
:is(body.dark, html.dark, [data-theme="dark"]) .card,
:is(body.dark, html.dark, [data-theme="dark"]) [class*="-card"],
:is(body.dark, html.dark, [data-theme="dark"]) [class*="card-"],
:is(body.dark, html.dark, [data-theme="dark"]) .panel,
:is(body.dark, html.dark, [data-theme="dark"]) [class*="-panel"],
:is(body.dark, html.dark, [data-theme="dark"]) [class*="panel-"],
:is(body.dark, html.dark, [data-theme="dark"]) .box,
:is(body.dark, html.dark, [data-theme="dark"]) [class*="-box"] {
  background-color: var(--th-bg2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

/* White backgrounds */
:is(body.dark, html.dark, [data-theme="dark"]) .bg-white,
:is(body.dark, html.dark, [data-theme="dark"]) [style*="background:#fff"],
:is(body.dark, html.dark, [data-theme="dark"]) [style*="background: #fff"],
:is(body.dark, html.dark, [data-theme="dark"]) [style*="background:white"],
:is(body.dark, html.dark, [data-theme="dark"]) [style*="background: white"] {
  background-color: var(--th-bg2) !important;
}

/* Gray/light backgrounds */
:is(body.dark, html.dark, [data-theme="dark"]) .bg-gray-50,
:is(body.dark, html.dark, [data-theme="dark"]) .bg-gray-100,
:is(body.dark, html.dark, [data-theme="dark"]) [class*="bg-gray"],
:is(body.dark, html.dark, [data-theme="dark"]) [style*="background:#f"],
:is(body.dark, html.dark, [data-theme="dark"]) [style*="background: #f"] {
  background-color: var(--th-bg3) !important;
}

/* Borders */
:is(body.dark, html.dark, [data-theme="dark"]) [class*="border"],
:is(body.dark, html.dark, [data-theme="dark"]) hr,
:is(body.dark, html.dark, [data-theme="dark"]) .divider {
  border-color: var(--th-border) !important;
}

/* Text colors */
:is(body.dark, html.dark, [data-theme="dark"]) [class*="text-gray"],
:is(body.dark, html.dark, [data-theme="dark"]) [class*="text-slate"],
:is(body.dark, html.dark, [data-theme="dark"]) .muted,
:is(body.dark, html.dark, [data-theme="dark"]) .text-muted,
:is(body.dark, html.dark, [data-theme="dark"]) small {
  color: var(--th-text2) !important;
}

/* Inputs */
:is(body.dark, html.dark, [data-theme="dark"]) input,
:is(body.dark, html.dark, [data-theme="dark"]) textarea,
:is(body.dark, html.dark, [data-theme="dark"]) select {
  background-color: var(--th-bg3) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) input::placeholder,
:is(body.dark, html.dark, [data-theme="dark"]) textarea::placeholder {
  color: var(--th-text3) !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) input:focus,
:is(body.dark, html.dark, [data-theme="dark"]) textarea:focus,
:is(body.dark, html.dark, [data-theme="dark"]) select:focus {
  border-color: var(--th-accent) !important;
  background-color: var(--th-bg2) !important;
}

/* Tables */
:is(body.dark, html.dark, [data-theme="dark"]) table,
:is(body.dark, html.dark, [data-theme="dark"]) thead,
:is(body.dark, html.dark, [data-theme="dark"]) tbody,
:is(body.dark, html.dark, [data-theme="dark"]) tr,
:is(body.dark, html.dark, [data-theme="dark"]) th,
:is(body.dark, html.dark, [data-theme="dark"]) td {
  background-color: transparent !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) thead tr,
:is(body.dark, html.dark, [data-theme="dark"]) .table-header {
  background-color: var(--th-bg3) !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) tbody tr:hover {
  background-color: var(--th-bg3) !important;
}

/* Buttons - keep accent buttons, fix ghost/outline */
:is(body.dark, html.dark, [data-theme="dark"]) .btn-outline,
:is(body.dark, html.dark, [data-theme="dark"]) [class*="btn-light"],
:is(body.dark, html.dark, [data-theme="dark"]) [class*="btn-secondary"],
:is(body.dark, html.dark, [data-theme="dark"]) [class*="btn-white"] {
  background-color: var(--th-bg3) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) .btn-outline:hover {
  background-color: var(--th-bg2) !important;
}

/* Dropdowns / menus */
:is(body.dark, html.dark, [data-theme="dark"]) .dropdown-menu,
:is(body.dark, html.dark, [data-theme="dark"]) [class*="dropdown"],
:is(body.dark, html.dark, [data-theme="dark"]) [class*="menu"] {
  background-color: var(--th-bg2) !important;
  border-color: var(--th-border) !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) .dropdown-item:hover {
  background-color: var(--th-bg3) !important;
}

/* Badges */
:is(body.dark, html.dark, [data-theme="dark"]) .badge {
  filter: brightness(.85) saturate(.9);
}

/* Modals */
:is(body.dark, html.dark, [data-theme="dark"]) .modal-content,
:is(body.dark, html.dark, [data-theme="dark"]) [class*="modal"] {
  background-color: var(--th-bg2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

/* ─── NAVBAR (text color only — fon/border tegmaymiz) ─── */
:is(body.dark, html.dark, [data-theme="dark"]) .nav-link,
:is(body.dark, html.dark, [data-theme="dark"]) [class*="nav-item"] {
  color: var(--th-text2) !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) .nav-link:hover,
:is(body.dark, html.dark, [data-theme="dark"]) [class*="nav-item"]:hover {
  color: var(--th-text) !important;
}

/* ─── INPAY SPECIFIC CLASSES ─── */

/* Tailwind utility overrides in dark mode */
:is(body.dark, html.dark, [data-theme="dark"]) .bg-white { background-color: #1e293b !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .bg-gray-50 { background-color: #0d1829 !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .bg-gray-100 { background-color: #0f172a !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .text-gray-800, :is(body.dark, html.dark, [data-theme="dark"]) .text-gray-900 { color: #f1f5f9 !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .text-gray-700 { color: #cbd5e1 !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .text-gray-600 { color: #94a3b8 !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .text-gray-500 { color: #64748b !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .text-gray-400 { color: #475569 !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .border-gray-100 { border-color: #1e293b !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .border-gray-200 { border-color: #334155 !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .divide-gray-100 > * { border-color: #1e293b !important; }
:is(body.dark, html.dark, [data-theme="dark"]) .divide-y > * { border-color: #334155 !important; }

/* Receipt / checkout panels */
:is(body.dark, html.dark, [data-theme="dark"]) .panel-left,
:is(body.dark, html.dark, [data-theme="dark"]) .panel-right > div {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Method items in checkout */
:is(body.dark, html.dark, [data-theme="dark"]) .mitem,
:is(body.dark, html.dark, [data-theme="dark"]) .method-item {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) .mitem .method-name,
:is(body.dark, html.dark, [data-theme="dark"]) .text-gray-500 { color: #94a3b8 !important; }

/* OTP inputs */
:is(body.dark, html.dark, [data-theme="dark"]) .otp-d {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) .otp-d:focus {
  border-color: #818cf8 !important;
  background-color: #1e293b !important;
}

/* Card input */
:is(body.dark, html.dark, [data-theme="dark"]) .card-wrap,
:is(body.dark, html.dark, [data-theme="dark"]) #cardWrap {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) .card-wrap input,
:is(body.dark, html.dark, [data-theme="dark"]) #cardWrap input {
  background-color: transparent !important;
  color: #f1f5f9 !important;
}

/* Toast dark */
:is(body.dark, html.dark, [data-theme="dark"]) .toast-item {
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}

/* Index/landing page */
:is(body.dark, html.dark, [data-theme="dark"]) .hero-section,
:is(body.dark, html.dark, [data-theme="dark"]) .features-section,
:is(body.dark, html.dark, [data-theme="dark"]) .pricing-section {
  background-color: var(--th-bg) !important;
}
:is(body.dark, html.dark, [data-theme="dark"]) .glass-card {
  background: rgba(30,41,59,0.7) !important;
  border-color: rgba(51,65,85,0.5) !important;
}

/* ─── THEME TOGGLE BUTTON ─── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--th-border);
  background: var(--th-bg2);
  color: var(--th-text2);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
  white-space: nowrap;
}
.theme-toggle-btn:hover {
  border-color: var(--th-accent);
  color: var(--th-accent);
  background: var(--th-accent-bg);
}
.theme-toggle-btn .th-icon {
  font-size: 15px;
  transition: transform .3s ease;
}
.theme-toggle-btn:hover .th-icon {
  transform: rotate(20deg);
}

/* ─── SETTINGS PAGE: THEME PANEL ─── */
.th-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.th-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border: 2px solid var(--th-border);
  border-radius: 14px;
  cursor: pointer;
  transition: all .2s;
  background: var(--th-bg3);
  color: var(--th-text2);
  font-size: .76rem;
  font-weight: 700;
}
.th-opt:hover {
  border-color: var(--th-accent);
  background: var(--th-accent-bg);
  color: var(--th-accent);
}
.th-opt.sel {
  border-color: var(--th-accent);
  background: var(--th-accent-bg);
  color: var(--th-accent);
}
.th-opt .th-preview {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 2px;
}
.th-preview.light { background: #f8fafc; border: 1.5px solid #e2e8f0; color: #1a202c; }
.th-preview.dark  { background: #1e293b; border: 1.5px solid #334155; color: #f1f5f9; }
.th-preview.auto  { background: linear-gradient(135deg,#f8fafc 50%,#1e293b 50%); border: 1.5px solid #e2e8f0; color: transparent; position: relative; overflow: hidden; }
.th-preview.auto::after { content: '🌗'; position: absolute; font-size: 18px; top: 50%; left: 50%; transform: translate(-50%,-50%); }

/* Accent color selector */
.th-accents {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.th-accent-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all .2s;
  position: relative;
}
.th-accent-dot:hover { transform: scale(1.15); }
.th-accent-dot.sel { border-color: #fff; box-shadow: 0 0 0 2px currentColor; }
.th-accent-dot.sel::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  font-weight: 900;
}

/* Font size selector */
.th-font-options {
  display: flex;
  gap: 8px;
}
.th-font-opt {
  flex: 1;
  padding: 10px;
  text-align: center;
  border: 2px solid var(--th-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
  background: var(--th-bg3);
  color: var(--th-text2);
  font-weight: 700;
}
.th-font-opt:hover, .th-font-opt.sel {
  border-color: var(--th-accent);
  color: var(--th-accent);
  background: var(--th-accent-bg);
}
.th-font-opt span { display: block; font-size: .65rem; margin-top: 2px; opacity: .7; font-weight: 500; }

/* Font size application */
body.font-sm { font-size: 13px; }
body.font-md { font-size: 15px; }
body.font-lg { font-size: 17px; }

/* ─── TRANSITION for all theme-affected elements ─── */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color;
  transition-duration: .2s;
  transition-timing-function: ease;
}
/* But NOT for transforms/animations */
*[style*="animation"],
.pulse, .spin, .bounce, .blink, .tin, .fup,
[class*="animate"] {
  transition: none !important;
}

/* ═══════════════════════════════════════════════
 *  v2: Yanada kuchli override layer
 *  Inline styles, Tailwind, eski klasslarga qarshi.
 * ═══════════════════════════════════════════════
 */

/* Dark variables on html (data-theme) — duplicate of body.dark for early apply */
html.dark, html[data-theme="dark"] {
  --th-bg:        #0f172a;
  --th-bg2:       #1e293b;
  --th-bg3:       #0d1829;
  --th-border:    #334155;
  --th-border2:   #475569;
  --th-text:      #f1f5f9;
  --th-text2:     #94a3b8;
  --th-text3:     #64748b;
  --th-accent:    #818cf8;
  --th-accent-bg: #1e1b4b;
  --th-green:     #4ade80;
  --th-red:       #f87171;
  --th-shadow:    rgba(0,0,0,0.4);
  --th-shadow2:   rgba(0,0,0,0.6);
  --th-card:      0 1px 6px rgba(0,0,0,.4);
  --th-overlay:   rgba(15,23,42,0.85);
  background-color: #0f172a;
  color-scheme: dark;
}
html.dark body, html[data-theme="dark"] body {
  background-color: var(--th-bg) !important;
  color: var(--th-text) !important;
}

/* Common section/wrapper backgrounds */
:is(html.dark, [data-theme="dark"]) section,
:is(html.dark, [data-theme="dark"]) main,
:is(html.dark, [data-theme="dark"]) article,
:is(html.dark, [data-theme="dark"]) aside,
:is(html.dark, [data-theme="dark"]) header,
:is(html.dark, [data-theme="dark"]) footer {
  background-color: transparent;
  color: var(--th-text);
}

/* Containers commonly using white inline bg */
:is(html.dark, [data-theme="dark"]) [style*="background-color:#fff"],
:is(html.dark, [data-theme="dark"]) [style*="background-color: #fff"],
:is(html.dark, [data-theme="dark"]) [style*="background-color:#ffffff"],
:is(html.dark, [data-theme="dark"]) [style*="background-color: #ffffff"],
:is(html.dark, [data-theme="dark"]) [style*="background-color:white"],
:is(html.dark, [data-theme="dark"]) [style*="background-color: white"],
:is(html.dark, [data-theme="dark"]) [style*="background:#fff"],
:is(html.dark, [data-theme="dark"]) [style*="background: #fff"],
:is(html.dark, [data-theme="dark"]) [style*="background:#ffffff"],
:is(html.dark, [data-theme="dark"]) [style*="background: #ffffff"],
:is(html.dark, [data-theme="dark"]) [style*="background:white"],
:is(html.dark, [data-theme="dark"]) [style*="background: white"] {
  background-color: var(--th-bg2) !important;
  color: var(--th-text) !important;
}

/* Inline text colors (#000, #111, #222 …) */
:is(html.dark, [data-theme="dark"]) [style*="color:#000"],
:is(html.dark, [data-theme="dark"]) [style*="color: #000"],
:is(html.dark, [data-theme="dark"]) [style*="color:#111"],
:is(html.dark, [data-theme="dark"]) [style*="color: #111"],
:is(html.dark, [data-theme="dark"]) [style*="color:#222"],
:is(html.dark, [data-theme="dark"]) [style*="color: #222"],
:is(html.dark, [data-theme="dark"]) [style*="color:#1a"],
:is(html.dark, [data-theme="dark"]) [style*="color: #1a"],
:is(html.dark, [data-theme="dark"]) [style*="color:#0f"],
:is(html.dark, [data-theme="dark"]) [style*="color: #0f"],
:is(html.dark, [data-theme="dark"]) [style*="color:black"],
:is(html.dark, [data-theme="dark"]) [style*="color: black"] {
  color: var(--th-text) !important;
}

/* Tailwind extra: bg-slate, bg-zinc, bg-stone */
:is(html.dark, [data-theme="dark"]) [class*="bg-slate-50"],
:is(html.dark, [data-theme="dark"]) [class*="bg-slate-100"],
:is(html.dark, [data-theme="dark"]) [class*="bg-zinc-50"],
:is(html.dark, [data-theme="dark"]) [class*="bg-zinc-100"],
:is(html.dark, [data-theme="dark"]) [class*="bg-stone-50"],
:is(html.dark, [data-theme="dark"]) [class*="bg-stone-100"],
:is(html.dark, [data-theme="dark"]) [class*="bg-neutral-50"],
:is(html.dark, [data-theme="dark"]) [class*="bg-neutral-100"] {
  background-color: var(--th-bg3) !important;
  color: var(--th-text) !important;
}
:is(html.dark, [data-theme="dark"]) [class*="text-slate"],
:is(html.dark, [data-theme="dark"]) [class*="text-zinc"],
:is(html.dark, [data-theme="dark"]) [class*="text-stone"],
:is(html.dark, [data-theme="dark"]) [class*="text-neutral"] {
  color: var(--th-text2) !important;
}
:is(html.dark, [data-theme="dark"]) [class*="text-slate-800"],
:is(html.dark, [data-theme="dark"]) [class*="text-slate-900"],
:is(html.dark, [data-theme="dark"]) [class*="text-zinc-800"],
:is(html.dark, [data-theme="dark"]) [class*="text-zinc-900"],
:is(html.dark, [data-theme="dark"]) [class*="text-black"] {
  color: var(--th-text) !important;
}

/* Bootstrap overrides */
:is(html.dark, [data-theme="dark"]) .container,
:is(html.dark, [data-theme="dark"]) .container-fluid {
  background-color: transparent;
}
:is(html.dark, [data-theme="dark"]) .bg-light,
:is(html.dark, [data-theme="dark"]) .bg-body,
:is(html.dark, [data-theme="dark"]) .bg-body-tertiary {
  background-color: var(--th-bg3) !important;
}
:is(html.dark, [data-theme="dark"]) .text-dark,
:is(html.dark, [data-theme="dark"]) .text-body,
:is(html.dark, [data-theme="dark"]) .text-body-emphasis {
  color: var(--th-text) !important;
}
:is(html.dark, [data-theme="dark"]) .text-secondary,
:is(html.dark, [data-theme="dark"]) .text-body-secondary {
  color: var(--th-text2) !important;
}
:is(html.dark, [data-theme="dark"]) .border,
:is(html.dark, [data-theme="dark"]) .border-top,
:is(html.dark, [data-theme="dark"]) .border-bottom,
:is(html.dark, [data-theme="dark"]) .border-start,
:is(html.dark, [data-theme="dark"]) .border-end {
  border-color: var(--th-border) !important;
}
:is(html.dark, [data-theme="dark"]) .shadow,
:is(html.dark, [data-theme="dark"]) .shadow-sm,
:is(html.dark, [data-theme="dark"]) .shadow-lg {
  box-shadow: 0 4px 16px rgba(0,0,0,.45) !important;
}

/* Forms enhancement */
:is(html.dark, [data-theme="dark"]) .form-control,
:is(html.dark, [data-theme="dark"]) .form-select,
:is(html.dark, [data-theme="dark"]) .form-check-input {
  background-color: var(--th-bg3) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
:is(html.dark, [data-theme="dark"]) .form-control:focus,
:is(html.dark, [data-theme="dark"]) .form-select:focus {
  background-color: var(--th-bg2) !important;
  border-color: var(--th-accent) !important;
  box-shadow: 0 0 0 .2rem rgba(129,140,248,.18) !important;
}

/* List groups */
:is(html.dark, [data-theme="dark"]) .list-group,
:is(html.dark, [data-theme="dark"]) .list-group-item {
  background-color: var(--th-bg2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
:is(html.dark, [data-theme="dark"]) .list-group-item-action:hover {
  background-color: var(--th-bg3) !important;
}

/* Mobile bottom nav / sticky bars */
:is(html.dark, [data-theme="dark"]) .bottom-nav,
:is(html.dark, [data-theme="dark"]) .mobile-nav,
:is(html.dark, [data-theme="dark"]) .footer-nav,
:is(html.dark, [data-theme="dark"]) .tabbar {
  background-color: var(--th-bg2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

/* Code/pre */
:is(html.dark, [data-theme="dark"]) code,
:is(html.dark, [data-theme="dark"]) pre,
:is(html.dark, [data-theme="dark"]) kbd {
  background-color: #0d1424 !important;
  color: #e2e8f0 !important;
  border-color: var(--th-border) !important;
}

/* Headings — ensure readable */
:is(html.dark, [data-theme="dark"]) h1,
:is(html.dark, [data-theme="dark"]) h2,
:is(html.dark, [data-theme="dark"]) h3,
:is(html.dark, [data-theme="dark"]) h4,
:is(html.dark, [data-theme="dark"]) h5,
:is(html.dark, [data-theme="dark"]) h6 {
  color: var(--th-text);
}

/* Images that rely on white — soften */
:is(html.dark, [data-theme="dark"]) img[src*=".svg"]:not([src*="logo"]):not([src*="brand"]) {
  filter: brightness(.92);
}

/* Disable transition smoothing on first paint to avoid flicker on theme switch via JS */
html.theme-no-transition,
html.theme-no-transition *,
html.theme-no-transition *::before,
html.theme-no-transition *::after {
  transition: none !important;
}