/*
 * DadaXWear Theme Engine v8 — Complete Fix
 * ─────────────────────────────────────────
 * Strategy:
 *  1. body.light-theme overrides ALL CSS custom properties from
 *     every page (help, history, profile, notification, checkout,
 *     customize, index, product-details) — because body is a child
 *     of :root, custom props defined on body.light-theme shadow the
 *     :root definitions for all descendants.
 *  2. Class selectors handle hardcoded hex / rgba values that are
 *     NOT CSS variables (e.g. history header, help bottom-nav).
 *  3. !important is used only where inline styles or high-specificity
 *     rules need to be beaten.
 */

/* ═══════════════════════════════════════════════
   PART 1 — CSS VARIABLE OVERRIDES
   Covers every page's local :root custom properties
═══════════════════════════════════════════════ */
body.light-theme {
    color-scheme: light;

    /* ── index.html / style.css ── */
    --bg:       #f0f4fa;
    --card:     #ffffff;
    --card2:    #edf1f7;
    --border:   rgba(0,0,0,0.08);
    --border2:  rgba(0,0,0,0.14);
    --tx:       #1a202c;
    --tx2:      #4a5568;
    --tx3:      #718096;
    --glass:    rgba(255,255,255,0.97);
    --px:       #0055dd;
    --px-glow:  rgba(0,85,221,0.30);
    --px-dim:   rgba(0,85,221,0.10);
    --red:      #e53e3e;
    --amber:    #b7791f;
    --green:    #276749;

    /* ── help.html / notification.html (--accent, --bg-dark, --card-bg) ── */
    --accent:      #0055dd;
    --bg-dark:     #f0f4fa;
    --card-bg:     #ffffff;
    --text-white:  #1a202c;
    --text-main:   #1a202c;
    --text-dim:    #718096;

    /* ── history.html (--bg, --card, --text, --primary, --danger) ── */
    --text:     #1a202c;
    --primary:  #0055dd;
    --danger:   #e53e3e;
    --success:  #276749;

    /* ── checkout.html / customize.html ── */
    --border-color: rgba(0,0,0,0.08);
    --input-bg:     #f8fafc;

    /* ── product-details.html ── */
    --surface:  #f5f5f7;
    --surface2: #ffffff;
    --surface3: #ebebed;

    /* body itself */
    background-color: #f0f4fa;
    color: #1a202c;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Dark stays as-is — just ensure class is present */
body.dark-theme {
    color-scheme: dark;
}


/* ═══════════════════════════════════════════════
   PART 2 — HARDCODED COLOR OVERRIDES
   For hex/rgba values that are NOT CSS variables
═══════════════════════════════════════════════ */

/* ────────────────────────────────────────────
   INDEX.HTML — uses style.css (class-based)
──────────────────────────────────────────── */
body.light-theme .top-header {
    background: rgba(255,255,255,0.97) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
body.light-theme .hdr-inner { color: #1a202c; }
body.light-theme .brand-name { color: #1a202c !important; }
body.light-theme .hdr-btn {
    background: rgba(0,0,0,0.04) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #4a5568 !important;
}
body.light-theme .notif-btn {
    background: rgba(0,85,221,0.08) !important;
    border-color: rgba(0,85,221,0.2) !important;
    color: #0055dd !important;
}
body.light-theme .search-wrap {
    background: #f0f4fa !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
body.light-theme .search-box {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.1) !important;
}
body.light-theme #search-inp { color: #1a202c !important; }
body.light-theme #search-inp::placeholder { color: #9ca3af !important; }
body.light-theme .cat-pill {
    background: #edf1f7 !important;
    color: #4a5568 !important;
    border-color: rgba(0,0,0,0.1) !important;
}
body.light-theme .cat-pill.active {
    background: #0055dd !important;
    color: #fff !important;
    border-color: #0055dd !important;
    box-shadow: 0 4px 12px rgba(0,85,221,0.25) !important;
}
body.light-theme .sec-title { color: #1a202c !important; }
body.light-theme .cnt-badge {
    background: #edf1f7 !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #0055dd !important;
}
body.light-theme .filter-bar {
    background: rgba(0,85,221,0.07) !important;
    border-color: rgba(0,85,221,0.2) !important;
    color: #0055dd !important;
}
/* Trending cards */
body.light-theme .t-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
}
body.light-theme .t-name { color: #1a202c !important; }
body.light-theme .t-price { color: #0055dd !important; }
body.light-theme .price-strike { color: #9ca3af !important; }
/* Grid cards */
body.light-theme .product-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
}
body.light-theme .card-name { color: #1a202c !important; }
body.light-theme .product-price { color: #0055dd !important; }
body.light-theme .add-btn-small,
body.light-theme .add-sm {
    background: linear-gradient(135deg,#0055dd,#4488ff) !important;
    box-shadow: 0 3px 10px rgba(0,85,221,0.3) !important;
}
/* Bottom nav (index uses floating pill) */
body.light-theme .bottom-nav {
    background: rgba(255,255,255,0.97) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12) !important;
}
body.light-theme .nav-link { color: #9ca3af !important; }
body.light-theme .nav-link.active { color: #0055dd !important; }
body.light-theme .nav-link.active::before { background: #0055dd !important; }
body.light-theme #cart-count-badge { background: #0055dd !important; }
/* Side FABs */
body.light-theme .fab-customize {
    background: linear-gradient(145deg,#0055dd,#4488ff) !important;
    box-shadow: 0 4px 16px rgba(0,85,221,0.35) !important;
}
body.light-theme .fab-history {
    background: #edf1f7 !important;
    color: #0055dd !important;
    border-color: rgba(0,85,221,0.3) !important;
}
/* Cart drawer */
body.light-theme .cart-drawer { background: #f8fafc !important; }
body.light-theme .cart-hd { border-color: rgba(0,0,0,0.08) !important; }
body.light-theme .cart-close {
    background: #edf1f7 !important;
    color: #1a202c !important;
}
body.light-theme .cart-item {
    background: rgba(0,0,0,0.02) !important;
    border-color: rgba(0,0,0,0.07) !important;
}
body.light-theme .qty-ctrl {
    background: #edf1f7 !important;
    border-color: rgba(0,0,0,0.1) !important;
}
body.light-theme .cart-foot {
    background: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}
body.light-theme .checkout-btn {
    background: #0055dd !important;
    box-shadow: 0 8px 22px rgba(0,85,221,0.35) !important;
}
/* Cart overlay */
body.light-theme #cart-overlay {
    background: rgba(0,0,0,0.5) !important;
}

/* ────────────────────────────────────────────
   HISTORY.HTML
   header { background: rgba(10,10,10,0.95) } — hardcoded
──────────────────────────────────────────── */
body.light-theme header {
    background: rgba(255,255,255,0.97) !important;
    border-color: rgba(0,0,0,0.08) !important;
    color: #1a202c !important;
}
body.light-theme .header-title { color: #1a202c !important; }
body.light-theme .back-btn {
    background: #edf1f7 !important;
    color: #1a202c !important;
}
body.light-theme .order-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
}
body.light-theme .order-header { border-color: rgba(0,0,0,0.06) !important; }
body.light-theme .order-id { color: #0055dd !important; }
body.light-theme .order-date { color: #718096 !important; }
body.light-theme .order-summary { border-color: rgba(0,0,0,0.06) !important; }
body.light-theme .total-text { color: #718096 !important; }
body.light-theme .total-val { color: #1a202c !important; }
body.light-theme .prod-info h4 { color: #1a202c !important; }
body.light-theme .prod-meta { color: #718096 !important; }
body.light-theme .prod-price { color: #0055dd !important; }
body.light-theme .product-item { border-color: rgba(0,0,0,0.05) !important; }
body.light-theme .prod-thumb { border-color: rgba(0,0,0,0.1) !important; }
body.light-theme .prod-thumb-placeholder {
    background: #edf1f7 !important;
    border-color: rgba(0,0,0,0.1) !important;
}
body.light-theme .go-shop { background: #0055dd !important; }
body.light-theme #clear-all-btn {
    background: rgba(229,62,62,0.07) !important;
    color: #e53e3e !important;
    border-color: rgba(229,62,62,0.2) !important;
}
body.light-theme .spinner {
    border-color: rgba(0,85,221,0.15) !important;
    border-top-color: #0055dd !important;
}
body.light-theme .order-status.status-pending { background: rgba(183,121,31,0.12); color: #b7791f; }
body.light-theme .order-status.status-delivered { background: rgba(39,103,73,0.1); color: #276749; }

/* ────────────────────────────────────────────
   HELP.HTML
   .bottom-nav { background: #1a1d24 } — hardcoded
   .step-card uses var(--card-bg) ✅ (variable covers it)
──────────────────────────────────────────── */
body.light-theme .help-header h2 { color: #1a202c !important; }
body.light-theme .welcome-box h1 { color: #0055dd !important; }
body.light-theme .welcome-box p { color: #718096 !important; }
body.light-theme .section-title { color: #1a202c !important; }
body.light-theme .section-title i { color: #0055dd !important; }
body.light-theme .step-card { color: #1a202c !important; }
body.light-theme .step-card h4 { color: #1a202c !important; }
body.light-theme .step-card p { color: #718096 !important; }

/* ────────────────────────────────────────────
   NOTIFICATION.HTML
──────────────────────────────────────────── */
body.light-theme .notification-page { background: #f0f4fa !important; }
body.light-theme .top-bar {
    background: #f0f4fa !important;
    color: #1a202c !important;
}
body.light-theme .top-bar h2 { color: #1a202c !important; }
body.light-theme .clear-all { color: #0055dd !important; }
body.light-theme .notif-card { color: #1a202c !important; }
body.light-theme .notif-title { color: #1a202c !important; }
body.light-theme .notif-msg { color: #718096 !important; }
body.light-theme .notif-time { color: #9ca3af !important; }
body.light-theme .notif-icon {
    background: rgba(0,85,221,0.08) !important;
    color: #0055dd !important;
}
body.light-theme .delete-btn { color: #9ca3af !important; }
body.light-theme .delete-btn:hover { color: #e53e3e !important; }
body.light-theme .empty-state { color: #9ca3af !important; }

/* ────────────────────────────────────────────
   PROFILE.HTML — uses external profile.css
   Target by class names visible in HTML
──────────────────────────────────────────── */
body.light-theme .profile-dashboard { background: #f0f4fa !important; }
body.light-theme .profile-top-bar { background: #f0f4fa !important; }
body.light-theme .profile-main-card {
    background: #f0f4fa !important;
    color: #1a202c !important;
}
body.light-theme #display-name { color: #1a202c !important; }
body.light-theme #display-username { color: #0055dd !important; }
body.light-theme .profile-avatar img {
    border: 3px solid #0055dd !important;
}
body.light-theme .info-container {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
}
body.light-theme .info-row {
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
body.light-theme .info-label { color: #718096 !important; }
body.light-theme .info-value { color: #1a202c !important; }
body.light-theme .info-label i { color: #0055dd !important; }
body.light-theme .edit-profile-btn {
    color: #1a202c !important;
    border-color: rgba(0,0,0,0.15) !important;
    background: #ffffff !important;
}
body.light-theme .help-action-btn { color: #1a202c !important; }
body.light-theme .history-action-btn {
    background: rgba(0,85,221,0.08) !important;
    color: #0055dd !important;
    border-color: rgba(0,85,221,0.25) !important;
}
body.light-theme .settings-action-btn {
    color: #4a5568 !important;
}
body.light-theme .profile-footer-actions { background: #f0f4fa !important; }

/* ────────────────────────────────────────────
   CHECKOUT.HTML
──────────────────────────────────────────── */
body.light-theme .checkout-section {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .section-heading {
    border-color: rgba(0,0,0,0.08) !important;
    color: #1a202c !important;
}
body.light-theme .section-heading h3 { color: #1a202c !important; }
body.light-theme .step-num { background: #0055dd !important; }
body.light-theme .input-box-modern label { color: #718096 !important; }
body.light-theme .input-box-modern input,
body.light-theme .input-box-modern select,
body.light-theme .input-box-modern textarea {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #1a202c !important;
}
body.light-theme .pay-card {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #1a202c !important;
}
body.light-theme .pay-card.active {
    background: rgba(0,85,221,0.05) !important;
    border-color: #0055dd !important;
}
body.light-theme .price-breakdown { border-color: rgba(0,0,0,0.08) !important; }
body.light-theme .price-line { color: #718096 !important; }
body.light-theme .total-highlight { color: #1a202c !important; }
body.light-theme .final-price { color: #0055dd !important; }
body.light-theme .master-checkout-btn {
    background: #0055dd !important;
    color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,85,221,0.35) !important;
}

/* ────────────────────────────────────────────
   CUSTOMIZE.HTML
──────────────────────────────────────────── */
body.light-theme .top-header.customize-header,
body.light-theme .customize-container .top-header {
    background: rgba(255,255,255,0.97) !important;
}
body.light-theme .option-group-box {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .jersey-3d-card { background: #ffffff !important; }
body.light-theme .canvas-3d-simulation {
    background: radial-gradient(circle, #e8edf5 0%, #d4dae6 100%) !important;
}
body.light-theme .input-field,
body.light-theme .textarea-field {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #1a202c !important;
}
body.light-theme .select-wrapper select {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #1a202c !important;
}
body.light-theme .jersey-spec-card {
    background: rgba(0,0,0,0.02) !important;
    border-color: rgba(0,0,0,0.1) !important;
}
body.light-theme .jersey-card-index { color: #0055dd !important; }
body.light-theme label { color: #718096 !important; }
body.light-theme .cost-summary-card {
    background: #ffffff !important;
    border-color: rgba(0,85,221,0.15) !important;
}
body.light-theme .cost-row { color: #718096 !important; }
body.light-theme .cost-row.total-row { color: #1a202c !important; }
body.light-theme .product-catalog-card {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .product-catalog-card .p-title { color: #1a202c !important; }
body.light-theme .product-catalog-card .p-price { color: #0055dd !important; }
body.light-theme .admin-select-card {
    background: #f8fafc !important;
    border-color: rgba(0,0,0,0.08) !important;
}
body.light-theme .admin-select-card p.title { color: #1a202c !important; }
body.light-theme .admin-select-card p.price-tag { color: #0055dd !important; }

/* ────────────────────────────────────────────
   PRODUCT-DETAILS.HTML — already has its own
   body.light-theme block in inline CSS, but
   reinforce a few structural bits
──────────────────────────────────────────── */
body.light-theme .back-nav {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #1a202c !important;
}
body.light-theme .details-card { color: #1a202c !important; }
body.light-theme .p-name { color: #1a202c !important; }
body.light-theme .sticky-actions {
    background: #f5f5f7 !important;
    border-color: rgba(0,0,0,0.1) !important;
}
body.light-theme .cart-icon-btn {
    background: #ebebed !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #1a202c !important;
}
body.light-theme .buy-now-full {
    background: #0055dd !important;
    box-shadow: 0 4px 24px rgba(0,85,221,0.35) !important;
}
body.light-theme .size-pill {
    background: #ebebed !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #5a5a62 !important;
}
body.light-theme .size-pill.active {
    background: rgba(0,85,221,0.1) !important;
    border-color: #0055dd !important;
    color: #0055dd !important;
}
body.light-theme .rec-card { background: #ebebed !important; }
body.light-theme .rec-name { color: #111214 !important; }
body.light-theme .rec-btn-cart {
    background: #e2e2e2 !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #5a5a62 !important;
}
body.light-theme .rec-btn-buy { background: #0055dd !important; }

/* ────────────────────────────────────────────
   TOAST (all pages)
──────────────────────────────────────────── */
body.light-theme #toast {
    background: #1a202c !important;
    color: #ffffff !important;
}