/* ==========================================================================
   Storefront — Dark theme (screen only; linked with media="screen" so print stays light).
   Light is the approved design and is NOT touched: everything here is scoped to
   html[data-bs-theme="dark"]. The storefront is token-driven (theme.css :root), so Dark is a
   token remap plus targeted fixes for hardcoded colours in bootstrap/eshop bundles and page styles.
   ========================================================================== */
html[data-bs-theme="dark"] {
  color-scheme: dark;
  --bg: #0F141B;           /* page */
  --panel: #171F2A;        /* cards, navigation, dialogs */
  --panel-2: #202B38;      /* elevated / tinted surface */
  --tint: #1C2532;         /* quiet fill: hovers, thumbnails */
  --line: #2C3A4B;
  --line-2: #243142;
  --ink: #E8EDF5;
  --muted: #A8B5C5;
  --muted-2: #8493A6;
  --brand: #A78BFA;        /* purple as text / outline on dark */
  --brand-press: #C4B5FD;
  --brand-subtle: #1D1535;
  --brand-ink: #EDE9FE;
  --brand-fill: #6D28D9;   /* purple as a filled surface carrying white text */
  --brand-fill-press: #5B21B6;
  --brand-soft: #2A1B4D;
  --coral: #FF8A7C;
  --coral-fill: #C2382C;
  --coral-soft: #3A1F20;
  --green: #5BCB8C;
  --green-soft: #15341F;
  --gold: #E5C15A;
  --accent: #C4B5FD;
  --accent-ink: #2E1065;
  --rail: #1A0F33;
  --sh-sm: 0 1px 0 rgba(0,0,0,.3);
  --sh: 0 2px 6px rgba(0,0,0,.4), 0 22px 44px -22px rgba(0,0,0,.7);
  --primary-color: var(--brand);
  --font-color: #ffffff;
  background-color: #0F141B;
}
html[data-bs-theme="dark"] body { background: var(--bg) !important; color: var(--ink); }
html[data-bs-theme="dark"] ::selection { background: var(--brand-fill); color: #fff; }

/* ---------- filled brand surfaces keep white text (need the deeper green) ---------- */
html[data-bs-theme="dark"] :is(.wordmark__mono, .search .go, .hic .c b, #user_notification_badge, .hd-act .c b, .hd-nav a.on, .hd-act .lang a.on, .hd-act .hd-cart,
  .btn-primary, .btn-yellow, .btn-c, .badge.bg-primary, .badge-success, .bg-primary, .nav-pills .nav-link.active, .nav-pills .show > .nav-link,
  .dropdown-item:active, .dropdown-item.active, .form-check-input:checked, .app-swal .app-swal-confirm,
  .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm, body .acc-grid .aside a.on, .aformbtns .save,
  #modal-signin_v2 .btn-primary, #modal-signup_v2 .btn-primary) {
  background: var(--brand-fill) !important; border-color: var(--brand-fill) !important; color: #fff !important;
}
html[data-bs-theme="dark"] :is(.search .go:hover, .btn-primary:is(:hover,:focus,:active), .btn-primary.active, .btn-c:is(:hover,:focus), .hd-act .hd-cart:hover,
  .pc .add:hover, .pc .add:focus-visible, .btn-outline-primary:hover, .app-swal .app-swal-confirm:hover,
  .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm:hover, #offcanvas-cart .cart-stepper .cs-btn:hover) {
  background: var(--brand-fill-press) !important; border-color: var(--brand-fill-press) !important; color: #fff !important;
}
html[data-bs-theme="dark"] .wordmark__mono { color: #fff !important; }
html[data-bs-theme="dark"] .btn-danger, html[data-bs-theme="dark"] .btn-red { background: var(--coral-fill) !important; border-color: var(--coral-fill) !important; }
html[data-bs-theme="dark"] .btn-primary:disabled, html[data-bs-theme="dark"] .btn-primary.disabled {
  background: var(--panel-2) !important; border-color: var(--line) !important; color: var(--muted-2) !important;
}
html[data-bs-theme="dark"] .search .go, html[data-bs-theme="dark"] .search .go:hover { color: #fff !important; }

/* ---------- surfaces that hardcode white ---------- */
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-soft-grape,
html[data-bs-theme="dark"] .bg-soft-primary { background: var(--panel) !important; }
html[data-bs-theme="dark"] #offcanvas-cart,
html[data-bs-theme="dark"] #offcanvas-notifications { background: var(--panel) !important; }
html[data-bs-theme="dark"] header.top,
html[data-bs-theme="dark"] .hd-sticky .hd { background: color-mix(in srgb, var(--bg) 94%, transparent); }
/* product photography stays on a white mat so packshots keep their true colours */
html[data-bs-theme="dark"] .pc .th { background: #fff; }
html[data-bs-theme="dark"] img { filter: none; }

/* ---------- native controls ---------- */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .select2-container .select2-selection { background-color: var(--panel) !important; color: var(--ink) !important; }
html[data-bs-theme="dark"] input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--panel) inset; }
html[data-bs-theme="dark"] .form-control:disabled, html[data-bs-theme="dark"] .form-control[readonly] { background-color: var(--panel-2) !important; color: var(--muted) !important; }
html[data-bs-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A8B5C5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
html[data-bs-theme="dark"] .select2-dropdown { background: var(--panel); border-color: var(--line); color: var(--ink); }
html[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); }
html[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--panel-2); }
html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-striped-bg: var(--panel-2); --bs-table-hover-bg: var(--panel-2); color: var(--ink); }
html[data-bs-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--ink); border-bottom-color: var(--line-2); }
html[data-bs-theme="dark"] .alert-success { background: var(--green-soft); color: var(--green); }
html[data-bs-theme="dark"] .alert-danger { background: var(--coral-soft); color: var(--coral); }
html[data-bs-theme="dark"] .alert-warning { background: #3A2F14; color: #F0C766; border-color: #5A4A1E; }
html[data-bs-theme="dark"] .alert-info { background: #14304A; color: #8CC8F2; border-color: #1F4A70; }
html[data-bs-theme="dark"] .dropdown-item { color: var(--ink); }
html[data-bs-theme="dark"] .dropdown-item:hover { background: var(--panel-2); color: var(--ink); }
html[data-bs-theme="dark"] .page-link { background: var(--panel); }
html[data-bs-theme="dark"] .list-group-item { background: var(--panel); color: var(--ink); border-color: var(--line); }
html[data-bs-theme="dark"] .modal-backdrop { background: #000; }
html[data-bs-theme="dark"] hr { border-color: var(--line); opacity: 1; }

/* ---------- third-party widgets ---------- */
/* daterangepicker */
html[data-bs-theme="dark"] .daterangepicker { background: var(--panel); border-color: var(--line); color: var(--ink); }
html[data-bs-theme="dark"] .daterangepicker:before { border-bottom-color: var(--line); }
html[data-bs-theme="dark"] .daterangepicker:after { border-bottom-color: var(--panel); }
html[data-bs-theme="dark"] .daterangepicker .calendar-table { background: var(--panel); border-color: var(--line); }
html[data-bs-theme="dark"] .daterangepicker td.off, html[data-bs-theme="dark"] .daterangepicker td.off.in-range,
html[data-bs-theme="dark"] .daterangepicker td.off.start-date, html[data-bs-theme="dark"] .daterangepicker td.off.end-date { background: var(--panel); color: var(--muted-2); }
html[data-bs-theme="dark"] .daterangepicker td.available:hover, html[data-bs-theme="dark"] .daterangepicker th.available:hover { background: var(--panel-2); color: var(--ink); }
html[data-bs-theme="dark"] .daterangepicker td.in-range { background: var(--brand-soft); color: var(--ink); }
html[data-bs-theme="dark"] .daterangepicker td.disabled, html[data-bs-theme="dark"] .daterangepicker option.disabled { color: var(--muted-2); }
html[data-bs-theme="dark"] .daterangepicker select.monthselect, html[data-bs-theme="dark"] .daterangepicker select.yearselect,
html[data-bs-theme="dark"] .daterangepicker select.hourselect, html[data-bs-theme="dark"] .daterangepicker select.minuteselect,
html[data-bs-theme="dark"] .daterangepicker select.ampmselect { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
html[data-bs-theme="dark"] .daterangepicker .ranges li { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
html[data-bs-theme="dark"] .daterangepicker .ranges li:hover { background: var(--line); }
html[data-bs-theme="dark"] .daterangepicker .ranges li.active { background: var(--brand-fill); color: #fff; }
html[data-bs-theme="dark"] .daterangepicker .drp-buttons { border-top-color: var(--line); }
html[data-bs-theme="dark"] .daterangepicker .calendar-table .next span, html[data-bs-theme="dark"] .daterangepicker .calendar-table .prev span { border-color: var(--ink); }
/* SweetAlert2 */
html[data-bs-theme="dark"] .swal2-popup { background: var(--panel); color: var(--ink); }
html[data-bs-theme="dark"] .swal2-title, html[data-bs-theme="dark"] .swal2-html-container { color: var(--ink); }
html[data-bs-theme="dark"] .swal2-styled.swal2-cancel { background: var(--panel-2) !important; color: var(--ink) !important; }
html[data-bs-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-icon .swal2-success-fix,
html[data-bs-theme="dark"] .swal2-success-circular-line-left, html[data-bs-theme="dark"] .swal2-success-circular-line-right { background: transparent !important; }
/* iziModal, intl-tel-input, star rating, scrollbars */
html[data-bs-theme="dark"] .iziModal { background: var(--panel) !important; color: var(--ink); }
html[data-bs-theme="dark"] .iti__country-list { background: var(--panel); border-color: var(--line); color: var(--ink); }
html[data-bs-theme="dark"] .iti__country.iti__highlight { background: var(--panel-2); }
html[data-bs-theme="dark"] .iti__divider { border-bottom-color: var(--line); }
html[data-bs-theme="dark"] .rating-container .empty-stars { color: var(--line) !important; }
html[data-bs-theme="dark"] * { scrollbar-color: var(--line) transparent; }

/* ---------- header, drawer, footer, overlays (theme.css hardcodes #fff / #f3f4f6 here) ---------- */
html[data-bs-theme="dark"] :is(.hd, .hd-search, .hd-quickbar, .hd-sticky, footer.storefront-footer, #modal-signin_v2.modal, #modal-signup_v2.modal,
  #modal-signin_v2 .modal-content, #modal-signup_v2 .modal-content, body .acc-grid .aside) { background: var(--panel) !important; }
html[data-bs-theme="dark"] .hd-search { border-bottom-color: var(--line); }
html[data-bs-theme="dark"] .hd-sticky { box-shadow: 0 1px 0 var(--line); }
html[data-bs-theme="dark"] :is(.hd-act .acct .m, .hd-suggest, .lc-side .fpop, #offcanvas-notifications, #offcanvas-cart) {
  background: var(--panel) !important; border-color: var(--line) !important; box-shadow: var(--sh);
}
html[data-bs-theme="dark"] :is(.hd-nav a:hover, .hd-act > a:hover, .hd-act .acct-t:hover, #user_notification_nav > a:hover, .hd-act .acct .m a:hover,
  .hd-suggest a:hover, .hd-suggest a:focus, .lc-side .fgrp:hover h5, .lc-side .fgrp:focus-within h5, body .acc-grid .aside a:hover) { background: var(--panel-2) !important; }
html[data-bs-theme="dark"] .lc-side .fgrp h5 { background: var(--panel); }
html[data-bs-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel { background: var(--panel-2) !important; border-color: var(--line) !important; color: var(--ink) !important; }
html[data-bs-theme="dark"] .swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel:hover { background: var(--line) !important; }
/* footer: ink/muted tokens already flip; keep the hover/social inversions readable */
html[data-bs-theme="dark"] footer.storefront-footer .fsoc a:hover,
html[data-bs-theme="dark"] footer.storefront-footer .fsoc a:hover i { background: var(--ink); color: var(--bg) !important; }
/* mini thumbnails inside cart / search stay on a white mat like product photography */
html[data-bs-theme="dark"] #search_items .mini-image img, html[data-bs-theme="dark"] #offcanvas-cart .cart-img { background: #fff; }
/* shadows read as depth, not as a light halo */
html[data-bs-theme="dark"] .hd-search .search { box-shadow: 0 8px 24px -14px rgba(0,0,0,.7); }
html[data-bs-theme="dark"] .pc:hover { box-shadow: 0 14px 30px -20px rgba(0,0,0,.8); }

/* ---------- page-level filled controls (views set background:var(--brand|--ink) + white text) ---------- */
html[data-bs-theme="dark"] :is(.bbtn, .oc-go, .sbtn, .cosec h3 .n, .ordok .acts .pri, .aside .u .av, .tl-find b, .tl-cta .acts .p, .obtn.pri, .tstep.cur .dot,
  .subchips a:hover, .subchips a.on, .vtog a.on, .fchip.on, .fapply .f-apply-btn, .addbig, .supcard .lg, .addrev #rating-submit-btn, .avrow .avbig, .psave,
  .pf-new .aside a.on, .rr-btn.primary, .mini .mth .q, .promo .ap, .ltools .fbtn, .delivery #validate_city, .oc-step:hover:not(:disabled),
  .binfo .qty .num-in .minus:hover, .binfo .qty .num-in .plus:hover) {
  background: var(--brand-fill) !important; border-color: var(--brand-fill) !important; color: #fff !important;
}
html[data-bs-theme="dark"] :is(.sbtn:hover, .ordok .acts .pri:hover, .tl-cta .acts .p:hover, .obtn.pri:hover, .fapply .f-apply-btn:hover, .addbig:hover, .psave:hover, .rr-btn.primary:hover,
  #modal-signin_v2 .btn-primary:hover, #modal-signup_v2 .btn-primary:hover) { background: var(--brand-fill-press) !important; border-color: var(--brand-fill-press) !important; color: #fff !important; }
/* status tints used by order/approval pages that hardcode pale backgrounds */
html[data-bs-theme="dark"] .bstat.pending { background: #3A2F14; border-color: #5A4A1E; }
html[data-bs-theme="dark"] .bstat.approved { background: var(--green-soft); border-color: var(--brand-fill); }
html[data-bs-theme="dark"] .bstat.rejected { background: var(--coral-soft); border-color: #7A3A33; }

/* ---------- status / alert tints hardcoded in page views (cart, orders, returns, business, checkout) ---------- */
html[data-bs-theme="dark"] .bcard :is(input[type=text], input[type=email], input[type=date], select, textarea) { background: var(--panel) !important; color: var(--ink); }
html[data-bs-theme="dark"] .bcard :is(input:disabled, select:disabled) { background: var(--panel-2) !important; }
html[data-bs-theme="dark"] .berr { background: var(--coral-soft); border-color: #7A3A33; }
html[data-bs-theme="dark"] .oc-banner { background: var(--coral-soft); border-color: #7A3A33; color: #FFB4AA; }
html[data-bs-theme="dark"] .oc-pill.ok { background: var(--green-soft); color: #7BE0A8; }
html[data-bs-theme="dark"] .oc-pill.bad { background: var(--coral-soft); color: #FFB4AA; }
html[data-bs-theme="dark"] .oc-line.has-error { background: #2A1B1D; }
html[data-bs-theme="dark"] .stripe-hosted-wrap { background: #1B2236; border-color: #3A3F6B; }
html[data-bs-theme="dark"] :is(.noti-state.unread, .st-awaiting, .rr-status.pending) { background: #3A2F14; color: #F0C766; }
html[data-bs-theme="dark"] :is(.st-processed, .rr-status.returned) { background: #14304A; color: #8CC8F2; }
html[data-bs-theme="dark"] .st-shipped { background: #2A2347; color: #BBA9F0; }
html[data-bs-theme="dark"] :is(.gal-main, .lhero .himg) { background: #fff; }
html[data-bs-theme="dark"] .pf-new .aside { background: var(--panel); }
html[data-bs-theme="dark"] .pf-new .aside a:hover { background: var(--panel-2); }
html[data-bs-theme="dark"] .page_404 { background: var(--bg); color: var(--ink); }

/* bootstrap/sandbox heading colours (#343f52) that theme.css only overrides for h1-h4 */
html[data-bs-theme="dark"] :where(h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) { color: var(--ink); }
html[data-bs-theme="dark"] .error_404_fullscreen { background: var(--bg); }
html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-body-secondary { color: var(--muted) !important; }

/* ---------- storefront components (workspace.css) ---------- */
html[data-bs-theme="dark"] .ws-brands { background: var(--panel); }
html[data-bs-theme="dark"] .ws-brands a { background: #fff; border-color: var(--line); }
html[data-bs-theme="dark"] .ws-brands a:hover { background: #f4f1fb; }
html[data-bs-theme="dark"] .sv-badge { background: var(--brand-soft); color: var(--brand-ink); }
html[data-bs-theme="dark"] .sv-badge svg { color: #8B5CF6; }
html[data-bs-theme="dark"] .pc .sup .sv-badge { background: transparent; }
html[data-bs-theme="dark"] .ws-board .banner-arrow { background: rgba(23,31,42,.92); color: var(--ink); border-color: var(--line); }
html[data-bs-theme="dark"] .hd-act .hd-cart b { color: #4C1D95; }