/**
 * Lite theme — remap utility Tailwind dark (port từ v3) sang tone sáng.
 * Load cuối cùng để ghi đè .text-white / bg-slate-* trên nền sáng.
 */

/* ── Vùng áp dụng ── */
:is(
  #view-profile,
  #checkout-root,
  .lite-catalog-surface,
  #view-proxy .proxy-page-surface
) {
  color: #334155;
}

/* ── Nền dark → sáng ── */
:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  :is(.bg-slate-900, .bg-slate-900\/40, .bg-slate-900\/50) {
  background-color: #ffffff !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .bg-slate-950,
:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  [class*="bg-slate-950"] {
  background-color: #f8fafc !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .bg-slate-800,
:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .bg-slate-800\/80 {
  background-color: #f1f5f9 !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .bg-slate-700 {
  background-color: #e2e8f0 !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .hover\:bg-slate-700:hover,
:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .hover\:bg-slate-800:hover {
  background-color: #e2e8f0 !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  :is(.border-slate-800, .border-slate-700, .border-slate-600) {
  border-color: #e2e8f0 !important;
}

/* ── Chữ trắng trên nền sáng → chữ tối ── */
:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .text-white {
  color: #0f172a !important;
}

/* Giữ chữ trắng trên nút / badge nền màu */
:is(#view-profile, #checkout-root, .lite-catalog-surface)
  :is(
    .bg-primary-600,
    .bg-primary-700,
    .bg-green-500,
    .bg-green-600,
    .bg-red-500,
    .bg-red-600,
    .bg-blue-600,
    .bg-orange-500,
    .bg-purple-600,
    .aff-btn-save,
    .qldv-deposit-btn
  ).text-white,
:is(#view-profile, #checkout-root, .lite-catalog-surface)
  [class*="from-cyan-500"].text-white,
:is(#view-profile, #checkout-root, .lite-catalog-surface)
  [class*="from-blue-600"].text-white,
:is(#view-profile, #checkout-root, .lite-catalog-surface)
  [class*="to-blue-600"].text-white,
.lite-catalog-surface .spcard-best-badge,
.lite-catalog-surface .bg-green-500.text-white,
.lite-header-deposit,
.lite-header-deposit span {
  color: #ffffff !important;
}

/* Tab / nút chọn đang active — chữ cyan trên nền cyan nhạt */
:is(#view-profile, #checkout-root, .lite-catalog-surface)
  :is(.billing-btn, .os-btn, .loc-btn).border-cyan-500,
:is(#view-profile, #checkout-root, .lite-catalog-surface)
  :is(.billing-btn, .os-btn, .loc-btn)[class*="bg-cyan-500"] {
  color: #0e7490 !important;
}

/* ── Slate / cyan text ── */
:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .text-slate-500 {
  color: #64748b !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .text-slate-400 {
  color: #64748b !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .text-slate-300 {
  color: #475569 !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .text-slate-200 {
  color: #334155 !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .text-slate-100 {
  color: #1e293b !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  :is(.text-cyan-300, .text-cyan-200) {
  color: #0891b2 !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  .text-blue-300 {
  color: #2563eb !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  :is(.text-emerald-300, .text-green-400, .text-emerald-400) {
  color: #059669 !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  :is(.text-amber-200, .text-amber-400) {
  color: #b45309 !important;
}

/* ── Input dark → sáng ── */
:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  :is(input, select, textarea).bg-slate-950,
:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  :is(input, select, textarea).text-white {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

:is(#view-profile, #checkout-root, .lite-catalog-surface, #view-proxy .proxy-page-surface)
  :is(input, select, textarea):focus {
  border-color: #0891b2 !important;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12);
}

/* ── Settings panel — biến CSS dark từ v3 ── */
#settings-panel .ttv-member-root {
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --bg-surface: #f8fafc;
  --bg-card: #ffffff;
  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
}

#settings-panel .ttv-member-root .header h1,
#settings-panel .ttv-member-root .ttv-dom-stat-value,
#settings-panel .ttv-member-root .ttv-dom-progress-value-main,
#settings-panel .ttv-member-root .ttv-dom-progress-need,
#settings-panel .ttv-member-root .ttv-dom-tier-row strong {
  color: #0f172a !important;
}

/* ── Payments / billing empty states ── */
#payments-panel :is(.bg-slate-900, .bg-slate-800) {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

#payments-panel .text-white,
#payments-panel h2.text-white {
  color: #0f172a !important;
}

#payments-panel .payment-tx-page.border-cyan-500 {
  color: #0e7490 !important;
}

/* ── Affiliate ── */
#affiliate-panel .text-white {
  color: #0f172a !important;
}

#affiliate-panel #settings-aff-auto-btn[class*="from-cyan-500"] {
  color: #ffffff !important;
}

#affiliate-panel .aff-controls {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

#affiliate-panel .aff-banner {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
}

#affiliate-panel #settings-aff-link-value {
  color: #0f172a !important;
}

#affiliate-panel .rounded-xl[class*="amber-400"] {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

/* ── Catalog misc ── */
.lite-catalog-surface .col-span-full.border-slate-800 {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}

.lite-catalog-surface .billing-btn {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

.lite-catalog-surface .billing-btn:hover {
  border-color: #0891b2 !important;
}

.lite-catalog-surface .os-btn,
.lite-catalog-surface .loc-btn {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

/* ── Checkout sidebar tóm tắt ── */
#checkout-root #summary-total {
  color: #0284c7 !important;
}

#checkout-root .lg\:col-span-1 .border-slate-800 {
  border-color: #e2e8f0 !important;
}