/* =====================================================
   XB247 Dark Mode — Shared Overrides
   Centralised from 7+ template <style> blocks.
   Activated by html.dark class toggle.
   ===================================================== */

/* ─── Tailwind Utility Overrides ──────────────────────────────── */
html.dark .text-gray-900  { color: var(--text-primary); }
html.dark .text-gray-800  { color: var(--text-primary); }
html.dark .text-gray-700  { color: var(--text-secondary); }
html.dark .text-gray-600  { color: var(--text-secondary); }
html.dark .text-gray-500  { color: var(--text-tertiary); }
html.dark .text-gray-400  { color: var(--text-tertiary); }
html.dark .text-gray-300  { color: var(--text-tertiary); }
html.dark .bg-white        { background-color: var(--bg-surface); }
html.dark .bg-gray-50      { background-color: var(--bg-elevated); }
html.dark .bg-gray-100     { background-color: var(--bg-inset); }
html.dark .bg-\[\#fafafa\] { background-color: var(--bg-primary); }
html.dark .border-gray-50  { border-color: var(--border-subtle); }
html.dark .border-gray-100 { border-color: var(--border-default); }
html.dark .border-gray-200 { border-color: var(--border-default); }
html.dark .hover\:bg-gray-50:hover  { background-color: var(--bg-elevated); }
html.dark .hover\:bg-gray-100:hover { background-color: var(--bg-inset); }

/* ─── Semantic Color Containers ───────────────────────────────── */
html.dark .bg-brand-50        { background-color: rgba(20,184,166,0.15); }
html.dark .border-brand-100   { border-color: rgba(20,184,166,0.25); }
html.dark .bg-orange-50       { background-color: rgba(249,115,22,0.15); }
html.dark .bg-red-50          { background-color: rgba(239,68,68,0.1); }
html.dark .bg-blue-50         { background-color: rgba(59,130,246,0.15); }
html.dark .bg-purple-50       { background-color: rgba(168,85,247,0.15); }
html.dark .bg-green-50        { background-color: rgba(34,197,94,0.15); }
html.dark .border-blue-100    { border-color: rgba(59,130,246,0.25); }
html.dark .border-purple-100  { border-color: rgba(168,85,247,0.25); }
html.dark .border-brand-100   { border-color: rgba(20,184,166,0.25); }
html.dark .border-green-100   { border-color: rgba(34,197,94,0.25); }

/* ─── Border / Misc Utility ───────────────────────────────────── */
html.dark .border-4.border-white { border-color: var(--bg-elevated); }
html.dark .border-2.border-gray-100 { border-color: var(--border-default); }
html.dark .bg-gray-900.hover\:bg-gray-800 { background-color: var(--bg-elevated); }
html.dark .bg-gray-100.text-gray-600 { background-color: var(--bg-inset); color: var(--text-secondary); }
html.dark .bg-gray-100.-translate-x-1\/2 { background-color: var(--border-default); }
html.dark span.bg-gray-50 { background-color: var(--bg-elevated); border-color: var(--border-default); }
html.dark .hover\:border-brand-200:hover { border-color: var(--border-default); }

/* ─── Footer ──────────────────────────────────────────────────── */
html.dark .xb247-footer .text-gray-900 { color: var(--text-primary); }
html.dark .xb247-footer .text-gray-500 { color: var(--text-tertiary); }
html.dark .xb247-footer .text-gray-400 { color: var(--text-tertiary); }
html.dark .xb247-footer .text-gray-300 { color: var(--text-tertiary); }
html.dark .xb247-footer .bg-gray-100  { background-color: var(--bg-inset); }
html.dark .xb247-footer .bg-gray-900  { background-color: var(--bg-elevated); }

/* ─── Account Shell & Components ──────────────────────────────── */
html.dark .xb247-account-header { background: rgba(11,15,26,0.88); border-bottom-color: rgba(255,255,255,0.04); }
html.dark .xb247-account-header.scrolled { box-shadow: 0 1px 24px rgba(0,0,0,0.3); }
html.dark .xb247-card { background: var(--bg-surface) !important; border-color: var(--border-default) !important; color: var(--text-primary); }
html.dark .xb247-card h2,
html.dark .xb247-card h3 { color: var(--text-primary); }
html.dark .xb247-card p { color: var(--text-secondary); }
html.dark .xb247-sidebar { background: var(--bg-surface); border-color: var(--border-default); }
html.dark .xb247-sidebar a.xb247-nav-item { color: var(--text-secondary); border-bottom-color: var(--border-default); }
html.dark .xb247-sidebar a.xb247-nav-item:hover { background: rgba(20,184,166,0.06); color: var(--brand-500); }
html.dark .xb247-sidebar a.xb247-nav-item.active { background: rgba(20,184,166,0.1); color: var(--brand-500); border-left-color: var(--brand-500); }
html.dark .xb247-sidebar a.xb247-nav-item.logout { color: #ef4444; }
html.dark .xb247-sidebar-head { background: linear-gradient(135deg, #0b0f1a 0%, #1e293b 100%); }

/* Forms */
html.dark .xb247-input,
html.dark .xb247-form input,
html.dark .xb247-form select,
html.dark .xb247-form textarea { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
html.dark .xb247-input:focus,
html.dark .xb247-form input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(20,184,166,0.12); }
html.dark .xb247-form-group label { color: var(--text-secondary); }

/* Buttons */
html.dark .xb247-btn-primary { background: var(--brand-500); }
html.dark .xb247-btn-primary:hover { background: var(--brand-600); }
html.dark .xb247-btn-outline { border-color: var(--border-default); color: var(--text-secondary); }
html.dark .xb247-btn-outline:hover { border-color: var(--brand-500); color: var(--brand-500); }

/* Order cards */
html.dark .xb247-order-card { background: var(--bg-surface); border-color: var(--border-default); }
html.dark .xb247-order-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.25); }

/* Order detail */
html.dark .xb247-od-topL p { color: var(--text-tertiary); }
html.dark .xb247-od-item { background: var(--bg-surface); border-color: var(--border-default); }
html.dark .xb247-od-item-logo { background: var(--bg-inset); }
html.dark .xb247-od-item-name { color: var(--text-primary); }
html.dark .xb247-od-panel { background: var(--bg-surface); border-color: var(--border-default); }
html.dark .xb247-od-row { border-color: var(--border-default); }
html.dark .xb247-od-row .val { color: var(--text-primary); }
html.dark .xb247-od-note { background: var(--bg-surface); border-left-color: var(--brand-500); }
html.dark .xb247-od-note p { color: var(--text-primary); }
html.dark .xb247-tl-dot { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-tertiary); }
html.dark .xb247-tl-bar { background: var(--border-default); }

/* Stat cards */
html.dark .xb247-stat-card { background: var(--bg-elevated); border-color: var(--border-default); }
html.dark .xb247-stat-card .lbl { color: var(--text-tertiary); }

/* Menu tiles */
html.dark .xb247-menu-tile { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-secondary); }
html.dark .xb247-menu-tile:hover { border-color: rgba(20,184,166,0.3); color: var(--brand-500); box-shadow: 0 4px 20px rgba(20,184,166,0.08); }
html.dark .xb247-menu-tile svg { color: var(--brand-500); }

/* Tracker steps */
html.dark .xb247-tracker-step { background: var(--bg-elevated); color: var(--text-tertiary); border-color: var(--border-default); }
html.dark .xb247-tracker-step.done { background: rgba(20,184,166,0.1); color: var(--brand-500); border-color: rgba(20,184,166,0.2); }
html.dark .xb247-tracker-step.active { background: var(--brand-500); color: #fff; }

/* Alerts & badges */
html.dark .xb247-alert { background: rgba(30,58,138,0.15) !important; border-color: rgba(59,130,246,0.2) !important; color: #93c5fd !important; }
html.dark .xb247-badge { opacity: .9; }

/* Gift card items (account) */
html.dark .xb247-gc-item { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); }
html.dark .xb247-gc-item:hover { border-color: rgba(20,184,166,0.3); }
html.dark .xb247-gc-item .gc-date { color: var(--text-tertiary); }

/* Token groups */
html.dark .xb247-group-head { background: var(--bg-elevated); color: var(--text-primary); }
html.dark .xb247-group { border-color: var(--border-default); }
html.dark .xb247-group-body { background: var(--bg-surface); }
html.dark .xb247-token-row { border-bottom-color: var(--border-default); color: var(--text-primary); }
html.dark .xb247-copy-btn { border-color: var(--border-default); color: var(--text-tertiary); }
html.dark .xb247-reveal-btn { border-color: var(--border-default); color: var(--text-tertiary); }
html.dark .xb247-masked { color: var(--text-tertiary); }

/* Pagination */
html.dark .xb247-pagination a,
html.dark .xb247-pagination span { border-color: var(--border-default); color: var(--text-secondary); }
html.dark .xb247-pagination span.current { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }

/* Mobile nav */
html.dark .xb247-mobile-nav { background: rgba(17,24,39,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top-color: var(--border-default); }
html.dark .xb247-mobile-nav a { color: var(--text-tertiary); }
html.dark .xb247-mobile-nav a.active { color: var(--brand-500); background: rgba(20,184,166,0.1); }

/* Featured btn */
html.dark .xb247-featured-btn { box-shadow: 0 4px 20px rgba(20,184,166,0.3); }

/* Auth forms (account page logged-out state) */
html.dark .xb247-auth-shell .xb247-auth-card { background: var(--bg-surface); border-color: var(--border-default); }
html.dark .xb247-auth-shell .xb247-auth-card h2 { color: var(--text-primary); }
html.dark .xb247-auth-shell .subtitle { color: var(--text-tertiary); }
html.dark .xb247-auth-shell .xb247-input { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
html.dark .xb247-auth-shell .xb247-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(20,184,166,0.12); }
html.dark .xb247-auth-shell .xb247-form-group label { color: var(--text-secondary); }
html.dark .xb247-auth-shell .xb247-auth-footer { border-top-color: var(--border-default); color: var(--text-tertiary); }
html.dark .xb247-auth-shell .xb247-pw-toggle { color: var(--text-tertiary); }

/* Activity items */
html.dark .xb247-activity-item { border-bottom-color: var(--border-default); color: var(--text-secondary); }
html.dark .xb247-pw-wrap .xb247-pw-toggle { color: var(--text-tertiary); }

/* ─── Checkout ────────────────────────────────────────────────── */
html.dark .xb247-checkout-card { background: var(--bg-surface); border-color: var(--border-default); box-shadow: none; }
html.dark .xb247-checkout-title { color: var(--text-primary); }
html.dark .xb247-checkout-copy { color: var(--text-secondary); }
html.dark .xb247-summary-item { background: var(--bg-elevated); border-color: var(--border-default); }
html.dark .xb247-summary-name,
html.dark .xb247-summary-price,
html.dark .xb247-summary-line strong,
html.dark .xb247-checkout-panel-title { color: var(--text-primary); }
html.dark .xb247-summary-sub,
html.dark .xb247-summary-line { color: var(--text-secondary); }
html.dark .xb247-checkout-form--app input,
html.dark .xb247-checkout-form--app select { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
html.dark .xb247-checkout-note { background: rgba(242, 140, 56, 0.12); color: #fdba74; }
html.dark .xb247-status-actions .secondary { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }

/* ─── Products Catalog ────────────────────────────────────────── */
html.dark input.xb247-shop-search { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
html.dark input.xb247-shop-search::placeholder { color: var(--text-tertiary); }

/* ─── Product Page ────────────────────────────────────────────── */
html.dark .xb247-qty { background-color: var(--bg-inset); border-color: var(--border-default); }
html.dark .xb247-qty .qty-input { border-color: var(--border-default); color: var(--text-primary); }
html.dark article.bg-white { background-color: var(--bg-surface); border-color: var(--border-default); }

/* ─── Gift Cards Shop ────────────────────────────────────────── */
html.dark .xb247-gc-item .bg-gray-50 { background-color: var(--bg-inset); }
html.dark .xb247-gc-thumb {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.96));
}
html.dark .xb247-gc-thumb::after {
    background: linear-gradient(180deg, transparent, rgba(2, 6, 23, 0.32));
}
html.dark .xb247-gc-thumb .xb247-product-media {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 48px rgba(2, 6, 23, 0.28);
}
html.dark .xb247-gc-search input { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
html.dark .xb247-gc-region-select { background-color: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }

/* ─── Cart ────────────────────────────────────────────────────── */
html.dark .xb247-cart-card { background: var(--bg-surface); border-color: var(--border-default); box-shadow: none; }
html.dark .xb247-cart-item { background: var(--bg-elevated); border-color: var(--border-default); }
html.dark .xb247-coupon-wrap input { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
html.dark .xb247-coupon-wrap button { background: var(--bg-elevated); border-color: var(--border-default); color: var(--text-primary); }
html.dark .xb247-cart-qty { border-color: var(--border-default); }
html.dark .xb247-cart-qty input { color: var(--text-primary); }
html.dark .xb247-cart-empty-icon { background: var(--bg-elevated); }

/* ─── Homepage Specific ───────────────────────────────────────── */
html.dark .xb247-marquee .text-gray-300 { color: var(--border-default); }
html.dark .xb247-gc-item .bg-gray-50.text-gray-900 { background-color: var(--bg-inset); color: var(--text-primary); }
html.dark .xb247-toast-title { color: var(--text-primary); }
html.dark .xb247-toast-sub { color: var(--text-tertiary); }

/* ─── Procurement ─────────────────────────────────────────────── */
html.dark .xb247-proc-step { background: var(--bg-surface); border-color: var(--border-default); }
html.dark .xb247-proc-step:hover { border-color: rgba(20,184,166,0.3); }
html.dark .xb247-proc-auth-gate { background: var(--bg-surface); border-color: var(--border-default); }
html.dark .shadow-premium { box-shadow: 0 8px 30px rgba(0,0,0,0.25); }

/* ── Homepage dark mode overrides ─────────────────────────────────────── */
html.dark .xb-home {
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.18), transparent 28%),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 24%),
        linear-gradient(180deg, #07111f 0%, #0b1627 34%, var(--bg-primary) 34%, var(--bg-primary) 100%);
    color: var(--text-primary);
}

html.dark .xb-home-section--white,
html.dark .xb-home-section--light {
    background: var(--bg-primary);
}

html.dark .xb-home-service {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-primary);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.25);
}

html.dark .xb-home-service:hover {
    border-color: rgba(20, 184, 166, 0.4);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
}

html.dark .xb-home-service p,
html.dark .xb-home-step p {
    color: var(--text-secondary);
}

html.dark .xb-home-service__meta { color: var(--text-muted); }
html.dark .xb-home-service__cta { color: var(--text-primary); }

html.dark .xb-home-step {
    background: var(--bg-surface);
    border-color: var(--border-default);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.2);
}

html.dark .xb-home-step h3,
html.dark .xb-home-signal h3 {
    color: var(--text-primary);
}

html.dark .xb-home-final {
    background: var(--bg-surface);
    border-color: var(--border-default);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.25);
}

html.dark .xb-home-final h2 { color: var(--text-primary); }
html.dark .xb-home-final p { color: var(--text-secondary); }

html.dark .xb-home-btn--ghost {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}

html.dark .xb-home-btn--ghost:hover {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}

html.dark .xb-home-head p { color: var(--text-secondary); }

html.dark .xb-home-kicker { color: #5eead4; }

html.dark .xb-home-statline {
    background: var(--bg-surface);
    border-color: var(--border-default);
}

html.dark .xb-home-statline strong { color: var(--text-primary); }
html.dark .xb-home-statline span { color: var(--text-secondary); }