/**
 * Site theme — dark / light full-page overrides (user + guest, not admin).
 * Loaded last via site_theme_tail.php
 */

html.dark { color-scheme: dark; }
html.light { color-scheme: light; }

/* ── DARK: readable light text everywhere ── */
html.dark body:not(.admin),
html.theme-dark body:not(.admin) {
    background: var(--page-shell-bg, var(--home-category-bg-dark, #0a1628)) !important;
    color: var(--site-text-dark, #f1f5f9) !important;
}

html.dark body:not(.admin) main.page,
html.theme-dark body:not(.admin) main.page,
html.dark body:not(.admin) .page,
html.theme-dark body:not(.admin) .page,
html.dark body:not(.admin) .main-page-content,
html.theme-dark body:not(.admin) .main-page-content {
    background: var(--page-shell-bg, var(--home-category-bg-dark, #0a1628));
    color: var(--site-text-dark, #f1f5f9);
}

html.dark body:not(.admin) .dash-page,
html.theme-dark body:not(.admin) .dash-page {
    color: var(--dash-text, var(--site-text-dark, #f1f5f9));
}

html.dark body:not(.admin) :is(
    h1, h2, h3, h4, h5, h6,
    .dash-title, .dash-header__title,
    .card__title, .product-card__name,
    .category-section-card__name, .home-section-card__name, .guest-section-card__name,
    .section__title, .hero__card h4,
    .vip-title, .vip-level-name, .vip-next__name,
    .page-box, .section, .note, .empty-state, .order-title
) {
    color: var(--theme-heading, var(--site-text-dark, #f1f5f9)) !important;
}

html.dark body:not(.admin) :is(
    p, span, div, li, td, th, label, small, dt, dd, figcaption, blockquote, time,
    .dash-subtitle, .form-hint, .hero__card,
    .site-grid[data-products="true"] .product-card .card__title,
    .section-page-critical .card__title,
    .section-page-critical .product-card__name,
    .section-page-critical .category-section-card__name,
    .side-menu__user-name, .side-menu__balance, .side-menu__user-id-label, .side-menu__user-id-value,
    .search-box, .search-input, .search-input::placeholder,
    .wallet-balance, .wallet-label, .orders-list__item, .order-row
) {
    color: var(--site-text-dark, #f1f5f9) !important;
}

html.dark body:not(.admin) :is(
    .dash-subtitle, .form-hint, .text-muted, .muted,
    .vip-subtitle, .vip-progress-meta, .vip-progress-foot
) {
    color: var(--dash-text-secondary, #cbd5e1) !important;
}

html.dark body:not(.admin) a:not(.button):not(.btn):not(.card__link):not(.brand):not(.side-menu__item) {
    color: var(--link-color, #60a5fa) !important;
}

html.dark body:not(.admin) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html.dark body:not(.admin) select,
html.dark body:not(.admin) textarea,
html.theme-dark body:not(.admin) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html.theme-dark body:not(.admin) select,
html.theme-dark body:not(.admin) textarea {
    color: var(--site-text-dark, #f1f5f9) !important;
    background-color: var(--theme-input-bg, rgba(30, 41, 59, 0.85)) !important;
    border-color: var(--theme-input-border, rgba(148, 163, 184, 0.25)) !important;
}

html.dark body:not(.admin) :is(.dash-card, .page-box, .card, .hero__card, .wallet-card, .order-card) {
    background: var(--dash-card, #1e293b) !important;
    border-color: var(--dash-card-border, rgba(148, 163, 184, 0.14)) !important;
    color: var(--dash-text, var(--site-text-dark, #f1f5f9)) !important;
}

html.dark body:not(.admin).page-home,
html.dark body:not(.admin).page-category,
html.dark body:not(.admin).page-wallet,
html.dark body:not(.admin).page-orders,
html.dark body:not(.admin).page-profile,
html.dark body:not(.admin).page-vip,
html.dark body:not(.admin).page-guest,
html.dark body:not(.admin).page-product,
html.theme-dark body:not(.admin).page-home {
    background: var(--page-shell-bg, var(--home-category-bg-dark, #0a1628)) !important;
}

/* Override hardcoded inline dark text */
html.dark body:not(.admin) [style*="color:#111"],
html.dark body:not(.admin) [style*="color: #111"],
html.dark body:not(.admin) [style*="color:#111827"],
html.dark body:not(.admin) [style*="color: #111827"],
html.dark body:not(.admin) [style*="color:#374151"],
html.dark body:not(.admin) [style*="color: #374151"],
html.dark body:not(.admin) [style*="color:#1f2937"],
html.dark body:not(.admin) [style*="color: #1f2937"],
html.dark body:not(.admin) [style*="color:#000"],
html.dark body:not(.admin) [style*="color: #000"],
html.dark body:not(.admin) [style*="color:#000000"],
html.dark body:not(.admin) [style*="color: #000000"],
html.dark body:not(.admin) [style*="color:black"],
html.theme-dark body:not(.admin) [style*="color:#374151"] {
    color: var(--site-text-dark, #f1f5f9) !important;
}

/* Critical section/product page inline styles */
html.dark body:not(.admin) .section-page-critical .card__title,
html.dark body:not(.admin) .section-page-critical .product-card__name,
html.dark body:not(.admin) .section-page-critical .category-section-card__name {
    color: var(--site-text-dark, #f1f5f9) !important;
    background: transparent !important;
}

/* Profile page */
html.dark body.page-profile .profile-page,
html.dark body.page-profile .profile-page *:not(.button):not(.btn):not(.profile-flash):not(.profile-flash *) {
    color: inherit;
}

html.dark body.page-profile .profile-page {
    --prof-text: var(--site-text-dark, #f1f5f9);
    --prof-text-muted: var(--dash-text-secondary, #94a3b8);
}

html.dark body.page-profile .profile-page :is(.profile-field__label, .profile-field__value, .profile-section__title, .profile-card__title) {
    color: var(--site-text-dark, #f1f5f9) !important;
}

/* Wallet neo — dark mode inputs */
html.dark body.page-wallet .wallet-neo-input,
html.dark body.page-wallet input.wallet-input,
html.theme-dark body.page-wallet .wallet-neo-input {
    color: var(--site-text-dark, #f1f5f9) !important;
    -webkit-text-fill-color: var(--site-text-dark, #f1f5f9) !important;
    background-color: var(--theme-input-bg, rgba(30, 41, 59, 0.85)) !important;
}

/* ── LIGHT: site settings colors ── */
html.light body:not(.admin),
html.theme-light body:not(.admin) {
    background: var(--page-shell-bg, var(--home-category-bg-light, #f3f4f6)) !important;
    color: var(--site-text-light, var(--text-color, #374151)) !important;
}

html.light body:not(.admin) main.page,
html.theme-light body:not(.admin) main.page,
html.light body:not(.admin) .page,
html.theme-light body:not(.admin) .page {
    background: var(--page-shell-bg, var(--home-category-bg-light, #f3f4f6));
    color: var(--site-text-light, var(--text-color, #374151));
}

html.light body:not(.admin) :is(
    h1, h2, h3, h4, h5, h6,
    .dash-title, .card__title, .product-card__name,
    .section__title, .vip-title, .vip-level-name
) {
    color: var(--theme-heading, var(--heading-color, #111827)) !important;
}

html.light body:not(.admin) :is(
    p, span, li, label,
    .dash-subtitle, .hero__card,
    .site-grid[data-products="true"] .product-card .card__title
) {
    color: var(--site-text-light, var(--text-color, #374151)) !important;
}

html.light body:not(.admin) a:not(.button):not(.btn):not(.card__link):not(.brand) {
    color: var(--link-color, #2563eb) !important;
}

html.light body:not(.admin) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html.light body:not(.admin) select,
html.light body:not(.admin) textarea,
html.theme-light body:not(.admin) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
html.theme-light body:not(.admin) select,
html.theme-light body:not(.admin) textarea {
    color: var(--site-text-light, #374151) !important;
    background-color: var(--theme-input-bg, #ffffff) !important;
    border-color: var(--theme-input-border, #d1d5db) !important;
}

html.light body:not(.admin) :is(.dash-card, .page-box, .card) {
    background: var(--dash-card, var(--bg-card, #ffffff)) !important;
    border-color: var(--dash-card-border, #e5e7eb) !important;
    color: var(--dash-text, var(--site-text-light, #374151)) !important;
}

html.light body:not(.admin) :is(.search-box, .search-input) {
    background: var(--theme-input-bg, #ffffff) !important;
    color: var(--site-text-light, #374151) !important;
}

html.light body:not(.admin) :is(.vip-subtitle, .vip-progress-meta, .vip-progress-foot) {
    color: var(--text-color, #374151) !important;
}

html.light body:not(.admin).page-home,
html.light body:not(.admin).page-category,
html.light body:not(.admin).page-wallet,
html.light body:not(.admin).page-orders,
html.light body:not(.admin).page-profile,
html.light body:not(.admin).page-vip,
html.light body:not(.admin).page-guest,
html.theme-light body:not(.admin).page-home {
    background: var(--page-shell-bg, var(--home-category-bg-light, #f3f4f6)) !important;
}

html.light body:not(.admin) .section-page-critical .card__title,
html.light body:not(.admin) .section-page-critical .product-card__name,
html.light body:not(.admin) .section-page-critical .category-section-card__name {
    color: var(--site-text-light, var(--text-color, #374151)) !important;
    background: var(--product-card-bg, #ffffff) !important;
}

/* Preserve semantic/status colors in both modes */
html.dark body:not(.admin) :is(.text-success, .status-success, .badge--success, .profile-flash--ok),
html.light body:not(.admin) :is(.text-success, .status-success, .badge--success, .profile-flash--ok) {
    color: var(--success, #059669) !important;
}

html.dark body:not(.admin) :is(.text-error, .status-error, .badge--error, .profile-flash--err),
html.light body:not(.admin) :is(.text-error, .status-error, .badge--error, .profile-flash--err) {
    color: var(--error, #dc2626) !important;
}

html.dark body:not(.admin) :is(.button, .btn, .dash-btn, .topbar .brand, .side-menu__item),
html.light body:not(.admin) :is(.button, .btn, .dash-btn, .topbar .brand, .side-menu__item) {
    /* buttons keep their own colors */
}

/* ── Universal theme cascade (wins over page CSS) ── */
body:not(.admin) .topbar,
body:not(.admin) header.global-header,
body:not(.admin) .topbar--guest,
body:not(.admin) .topbar--user,
body:not(.admin) .global-header {
    background: var(--chrome-bg-top, var(--background-color, var(--page-shell-bg))) !important;
    color: var(--chrome-fg, var(--page-shell-text)) !important;
}

body:not(.admin) .brand,
body:not(.admin) .brand__name,
body:not(.admin) .topbar__title {
    color: var(--chrome-fg, var(--page-shell-text, var(--site-text-dark, #fff))) !important;
}

body:not(.admin) .brand__logo {
    background: var(--theme-gradient-primary, linear-gradient(135deg, var(--brand-logo-c1), var(--brand-logo-c2))) !important;
    color: var(--button-text, #fff) !important;
}

body:not(.admin) .button--primary,
body:not(.admin) .btn-primary,
body:not(.admin) .dash-btn--primary,
body:not(.admin) .wallet-neo-btn--primary {
    background: var(--theme-gradient-primary, linear-gradient(135deg, var(--button-color), var(--button-hover))) !important;
    color: var(--button-text, #fff) !important;
    border-color: transparent !important;
}

body:not(.admin) :is(.dash-card, .page-box, .card, .hero__card, .wallet-card, .order-card, .product-card, .category-section-card, .home-section-card) {
    background: var(--product-card-bg, var(--dash-card, var(--card-color))) !important;
    border-color: var(--dash-card-border, var(--border-color-token, var(--border-color))) !important;
    color: var(--dash-text, var(--page-shell-text)) !important;
}

body:not(.admin) table :is(th, td) {
    color: var(--page-shell-text, var(--text-color)) !important;
    border-color: var(--border-color-token, var(--border-color)) !important;
}

body:not(.admin) .modal,
body:not(.admin) .modal__content,
body:not(.admin) #productModalOverlay .modal-content,
body:not(.admin) .popup,
body:not(.admin) .note {
    background: var(--dash-card, var(--card-color)) !important;
    color: var(--dash-text, var(--page-shell-text)) !important;
    border-color: var(--dash-card-border, var(--border-color)) !important;
}

html.dark body:not(.admin) .wallet-page--neo,
html.theme-dark body:not(.admin) .wallet-page--neo {
    --w-text: var(--site-text-dark) !important;
    --w-text-secondary: var(--dash-text-secondary, var(--site-text-dark)) !important;
    color: var(--w-text-secondary) !important;
}

html.light body:not(.admin) .wallet-page--neo,
html.theme-light body:not(.admin) .wallet-page--neo {
    --w-text: var(--site-text-light) !important;
    --w-text-secondary: var(--site-text-light) !important;
    color: var(--w-text-secondary) !important;
}

body.page-payments:not(.admin) .payments-page-v2 {
    background: var(--pay-bg) !important;
    color: var(--pay-text) !important;
}

body.page-payments:not(.admin) .payments-page-v2 :is(.pay-card, .payments-card, .dash-card) {
    background: var(--pay-card) !important;
    color: var(--pay-text) !important;
}

body:not(.admin) .side-menu {
    background: var(--sidebar-bg, var(--dash-card)) !important;
    color: var(--sidebar-text, var(--page-shell-text)) !important;
}

body:not(.admin) .side-menu__item.is-active,
body:not(.admin) .side-menu__item--active {
    color: var(--sidebar-active, var(--primary-color)) !important;
}

body:not(.admin) .badge--success,
body:not(.admin) .status-success { color: var(--success-color, var(--success)) !important; }
body:not(.admin) .badge--error,
body:not(.admin) .status-error { color: var(--danger-color, var(--error)) !important; }
body:not(.admin) .badge--warning,
body:not(.admin) .status-warning { color: var(--warning-color, var(--warning)) !important; }

/* Ensure readable text on themed backgrounds */
html.dark body:not(.admin) *,
html.theme-dark body:not(.admin) * {
    scrollbar-color: var(--secondary-color) var(--background-color);
}

html.dark body:not(.admin) input::placeholder,
html.dark body:not(.admin) textarea::placeholder,
html.theme-dark body:not(.admin) input::placeholder,
html.theme-dark body:not(.admin) textarea::placeholder {
    color: var(--dash-text-muted, #94a3b8) !important;
    opacity: 1;
}