/* ---------------------------------------------------------------------------
   Dark theme, hand-written layer.

   Loads after dark-generated.css (which mirrors the views' own CSS) and only
   contains rules that a mechanical colour swap cannot get right: design tokens,
   chrome, Bootstrap surfaces, and anything sitting on a gold background.
   Light mode is the untouched original design, so nothing here applies to it.
--------------------------------------------------------------------------- */

/* ------------------------------------------------------------ toggle button */

.gr-theme-toggle .bi-sun-fill { display: none; }
.gr-theme-toggle .bi-moon-stars-fill { display: inline-block; }

html[data-theme="dark"] .gr-theme-toggle .bi-sun-fill { display: inline-block; }
html[data-theme="dark"] .gr-theme-toggle .bi-moon-stars-fill { display: none; }

/* --------------------------------------------------------------- 1. tokens */

html[data-theme="dark"] {
    color-scheme: dark;

    /* site.css */
    --deep-navy: #eaf1f8;          /* overwhelmingly used as text */
    --pure-white: #122234;         /* ...and this one as a surface */
    --gray-soft: #152739;
    --gray-medium: #9aabbb;
    --navy-light: #1b3551;
    --navy-dark: #060f18;
    --glass-navy: rgba(8, 17, 28, 0.92);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.55);

    /* _Layout.cshtml */
    --gr-ink: #eaf1f8;
    --gr-ink-soft: #c7d5e2;
    --gr-paper: #0a1624;
    --gr-white: #101f30;
    --gr-muted: #9aabbb;
    --gr-line: rgba(255, 255, 255, 0.10);
    --gr-gold: #e4c878;
    --gr-gold-soft: #ffd166;

    /* shared dark surfaces */
    --gr-surface: rgba(255, 255, 255, 0.045);
    --gr-surface-solid: #101f30;
    --on-gold: #0b2545;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: #0a1624;
    color: #eaf1f8;
}

/* Defaults for text that was never given a colour of its own. :where() strips
   the specificity so a component still wins — the gold buttons carry navy text
   on purpose, and a link inside one must not be lightened back. */
:where(html[data-theme="dark"] h1,
       html[data-theme="dark"] h2,
       html[data-theme="dark"] h3,
       html[data-theme="dark"] h4,
       html[data-theme="dark"] .brand-font) { color: #eaf1f8; }

:where(html[data-theme="dark"] a) { color: #dbe6f1; }

html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0a1624; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a4463; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #ffd166; }

html[data-theme="dark"] ::selection { background: rgba(255, 209, 102, 0.3); color: #fff; }

/* Tokens above turn --deep-navy / --gr-ink light, which is right for text but
   wrong for the handful of places that used them as a dark backdrop. */
html[data-theme="dark"] .announcement-bar { background: #060f18; }
html[data-theme="dark"] .gr-bottom { background: #060f18; }
html[data-theme="dark"] .gr-footer { background: #060f18; }
html[data-theme="dark"] .gr-cart-head { background: #060f18; }
html[data-theme="dark"] .gr-cart-head h5 { color: #eaf1f8; }
html[data-theme="dark"] .gr-cart-head-count,
html[data-theme="dark"] .gr-cart-checkout,
html[data-theme="dark"] .gr-cart-shop { color: #0b2545 !important; }
/* Keep the side cart slim even if an older compiled layout still has the wide width. */
html .gr-cart-drawer {
    width: min(290px, 80vw);
}
html[data-theme="dark"] #cookieBanner { background: #12253a; }
html[data-theme="dark"] .product-overlay { background: rgba(6, 15, 24, 0.95); }
html[data-theme="dark"] .color-discovery { background: linear-gradient(180deg, #060f18 0%, #0d1c2c 100%); }

/* A chosen filter is a solid navy chip on a white toolbar. Lifting the navy is
   not enough for something meant to be spotted at a glance, so the selection
   takes the brand accent instead. */
/* The generated rules carry their page's class, so a correction that applies
   everywhere has to say so — hence !important through this block. */
html[data-theme="dark"] .pill.on,
html[data-theme="dark"] .cat-chip.active,
html[data-theme="dark"] .tab-btn.active {
    background: #ffd166 !important;
    border-color: #ffd166 !important;
    color: #0b2545 !important;
}

html[data-theme="dark"] .pill.on .n,
html[data-theme="dark"] .pill.on i,
html[data-theme="dark"] .cat-chip.active i,
html[data-theme="dark"] .tab-btn.active i { color: #0b2545 !important; }

/* Brand green on a dark page: the label needs the darker end of it. */
html[data-theme="dark"] .btn-wa,
html[data-theme="dark"] .support-btn.wa,
html[data-theme="dark"] .home-wa { background: #128c4a !important; color: #fff !important; }

/* The map popup is drawn by Leaflet on a white card of its own. */
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
    background: #12253a;
    color: #eaf1f8;
}

/* The account switch: a light knob on a track that still reads as a track once
   the panel behind it has gone dark. */
html[data-theme="dark"] .lock-switch .track { background: rgba(255, 255, 255, 0.18) !important; }
html[data-theme="dark"] .lock-switch input:checked + .track { background: #ef4444 !important; }
html[data-theme="dark"] .lock-switch .track::after { background: #eaf1f8 !important; }

/* ------------------------------------------------- 2. text on gold surfaces */

html[data-theme="dark"] .btn-gold-fill,
html[data-theme="dark"] .btn-quick-add,
html[data-theme="dark"] .badge-stock,
html[data-theme="dark"] .gr-cart-count,
html[data-theme="dark"] .btn-gold,
html[data-theme="dark"] #acceptCookiesBtn,
html[data-theme="dark"] .btn-apply-filters,
html[data-theme="dark"] .btn-quick-cart:not(.out) { color: var(--on-gold) !important; }

html[data-theme="dark"] .btn-quick-cart:not(.out) i { color: var(--on-gold) !important; }

html[data-theme="dark"] .btn-outline-white:hover { color: #0b2545; }

/* --------------------------------------------------------------- 3. chrome */

html[data-theme="dark"] body:not(.home-page) .gr-topbar,
html[data-theme="dark"] body.home-page .gr-topbar.is-solid {
    background: rgba(10, 22, 36, 0.92);
    color: #eaf1f8;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body.home-page .gr-topbar.is-solid .gr-desk-links a:hover,
html[data-theme="dark"] body:not(.home-page) .gr-desk-links a:hover,
html[data-theme="dark"] .gr-icon-btn:hover { background: rgba(255, 255, 255, 0.10); }

html[data-theme="dark"] .gr-brand-text { color: #eaf1f8; }

html[data-theme="dark"] #mainMenuDrawer,
html[data-theme="dark"] .offcanvas {
    background: #0d1c2c !important;
    color: #eaf1f8 !important;
}

html[data-theme="dark"] #mainMenuDrawer .offcanvas-title,
html[data-theme="dark"] .offcanvas-title { color: #eaf1f8; }

html[data-theme="dark"] .drawer-cat-row > a { color: #eaf1f8; }
html[data-theme="dark"] .drawer-product-link { color: #9aabbb !important; }
html[data-theme="dark"] .drawer-product-link:hover { color: #ffd166 !important; }
html[data-theme="dark"] .color-swatch-menu-circle { border-color: rgba(255, 255, 255, 0.18); }

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(2.2);
}

/* --------------------------------------------------- 4. bootstrap surfaces */

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button {
    background-color: #12253a !important;
    color: #eaf1f8;
    border-color: rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: rgba(255, 255, 255, 0.10); }

html[data-theme="dark"] .dropdown-item { color: #eaf1f8; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.08); color: #fff; }
html[data-theme="dark"] .dropdown-divider { border-color: rgba(255, 255, 255, 0.12); }

html[data-theme="dark"] .text-muted { color: #9aabbb !important; }
html[data-theme="dark"] .text-dark { color: #eaf1f8 !important; }
html[data-theme="dark"] .text-black { color: #eaf1f8 !important; }

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end { border-color: rgba(255, 255, 255, 0.12) !important; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
    background-color: #122234 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #eaf1f8 !important;
}

html[data-theme="dark"] .form-control::placeholder { color: #7f90a1 !important; }

html[data-theme="dark"] .form-control:-webkit-autofill,
html[data-theme="dark"] .form-select:-webkit-autofill,
html[data-theme="dark"] .form-control:-webkit-autofill:focus,
html[data-theme="dark"] .form-select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #122234 inset !important;
    -webkit-text-fill-color: #eaf1f8 !important;
    caret-color: #eaf1f8;
}

/* The open dropdown is painted by the browser on a canvas of its own. With no
   fill of their own the options land on white while still inheriting the light
   text of the closed control, so every list reads as blank. */
html[data-theme="dark"] select option,
html[data-theme="dark"] select optgroup,
html[data-theme="dark"] datalist option {
    background-color: #12253a;
    color: #eaf1f8;
}

html[data-theme="dark"] select option:checked,
html[data-theme="dark"] select option:hover {
    background-color: #27405e;
    color: #fff;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: #152739 !important;
    border-color: #ffd166 !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.15) !important;
}

html[data-theme="dark"] .form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

html[data-theme="dark"] .form-check-input:checked { background-color: #ffd166; border-color: #ffd166; }

html[data-theme="dark"] .table { --bs-table-bg: transparent; color: #eaf1f8; }
html[data-theme="dark"] .table > :not(caption) > * > * { border-color: rgba(255, 255, 255, 0.10); }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table thead th { background-color: #152739 !important; color: #cfdcea; }

html[data-theme="dark"] .btn-light {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #eaf1f8;
}

html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark { color: #cfdcea; border-color: rgba(255, 255, 255, 0.25); }

html[data-theme="dark"] .page-link {
    background-color: #12253a;
    border-color: rgba(255, 255, 255, 0.12);
    color: #eaf1f8;
}

html[data-theme="dark"] .nav-tabs { border-color: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .nav-tabs .nav-link { color: #9aabbb; }
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: #12253a;
    border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) transparent;
    color: #eaf1f8;
}

/* --------------------------------------------------------- 5. home + shop */

/* The hero is already dark in both themes; only the pale sections below it
   need converting. */
/* The pattern PNG is drawn for pale paper, so on the dark base it is blended
   down instead of sitting on top at full strength. */
html[data-theme="dark"] .home {
    background-color: #0a1624;
    background-blend-mode: soft-light;
}

html[data-theme="dark"] .home-sec::before,
html[data-theme="dark"] .home-rails::before,
html[data-theme="dark"] .home-bloom::before {
    opacity: 0.11;
    filter: brightness(1.15) contrast(1.05);
    mix-blend-mode: screen;
}

html[data-theme="dark"] .home-sec-alt { background: #08131f; }

html[data-theme="dark"] .home-rails {
    background:
        radial-gradient(ellipse 70% 55% at 50% -10%, rgba(201, 162, 77, 0.12), transparent 55%),
        linear-gradient(180deg, #0b1826 0%, #0a1624 100%);
    --rail-fade: #0a1624;
}

html[data-theme="dark"] .home-bloom {
    background:
        radial-gradient(ellipse 55% 60% at 50% 50%, rgba(226, 74, 114, 0.12), transparent 65%),
        linear-gradient(180deg, #0a1624 0%, #101d2b 48%, #0a1624 100%);
}

/* Each wave is filled with currentColor and must match the band below it. */
html[data-theme="dark"] .home-splitter.wave-to-rails { color: #0b1826; }
html[data-theme="dark"] .home-splitter.wave-to-footer { color: #060f18; }

/* Shop: dark stage matching the homepage hero. */
html[data-theme="dark"] .shop-main {
    background:
        radial-gradient(ellipse 50% 42% at 50% 8%, rgba(201, 162, 77, 0.20), transparent 58%),
        radial-gradient(ellipse 55% 48% at 12% 45%, rgba(20, 48, 78, 0.55), transparent 55%),
        radial-gradient(ellipse 42% 38% at 88% 75%, rgba(90, 35, 55, 0.28), transparent 52%),
        linear-gradient(180deg, #08131f 0%, #0a1624 55%, #0d1c2c 100%);
}

html[data-theme="dark"] .shop-main::before {
    background-image: url('/images/hero-flower-pattern.png');
    background-size: min(420px, 72vw) auto;
    opacity: 0.12;
    mix-blend-mode: screen;
    filter: brightness(1.15) contrast(1.05);
}

html[data-theme="dark"] .shop-banner {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] .shop-banner::before {
    background: radial-gradient(ellipse 55% 70% at 50% 45%, rgba(201, 162, 77, 0.20), transparent 62%);
    background-image: none;
    inset: -40% 0 0;
    opacity: 1;
    filter: none;
}

html[data-theme="dark"] .shop-controls,
html[data-theme="dark"] .filter-box,
html[data-theme="dark"] .product-card {
    background: var(--gr-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .product-card:hover {
    border-color: rgba(255, 209, 102, 0.45);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .product-img { background: linear-gradient(160deg, #16283b, #0e1c2a); }
html[data-theme="dark"] .shop-variants { background: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .shop-variant-swatch { border-color: rgba(255, 255, 255, 0.22); }
html[data-theme="dark"] .shop-variant-swatch.is-current { box-shadow: 0 0 0 2px #0d1c2c, 0 0 0 3.5px #ffd166; }
/* The admin product table names a badge the same way, so this one stays on the
   storefront card it was written for. */
html[data-theme="dark"] body.page-home-shop .stock-badge { background: #ffd166; color: #0b2545; }
html[data-theme="dark"] .product-info .price { color: #ffd166; }
html[data-theme="dark"] .shop-public-code { color: #d9b878; }
html[data-theme="dark"] .sidebar-panel { background: linear-gradient(180deg, #0a1624 0%, #0d1c2c 100%); }
html[data-theme="dark"] .sidebar-panel .filter-box { background: transparent; border: none; backdrop-filter: none; }
html[data-theme="dark"] .quick-add-box,
html[data-theme="dark"] .toast-box { background: linear-gradient(180deg, #0e1c2b 0%, #12253a 100%); }
html[data-theme="dark"] .active-filter-badge {
    background: rgba(255, 209, 102, 0.14);
    border: 1px solid rgba(255, 209, 102, 0.35);
    color: #ffd166;
}
html[data-theme="dark"] .clear-btn {
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #ff8080;
}

/* Filter swatches carry a colour from the database, so they are excluded from
   the generated rules. A ring keeps the dark ones off the dark panel. */
html[data-theme="dark"] .color-dot-link,
html[data-theme="dark"] .mob-color-link,
html[data-theme="dark"] .color-swatch-menu-circle {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) !important;
}

html[data-theme="dark"] .color-dot-link.active,
html[data-theme="dark"] .mob-color-link.active {
    border-color: #ffd166 !important;
    box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.45) !important;
}

/* Related products on the details page speak the shop card language. */
html[data-theme="dark"] .related-card {
    background: var(--gr-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

html[data-theme="dark"] .related-card:hover {
    border-color: rgba(255, 209, 102, 0.45);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .related-img-wrap { background: linear-gradient(160deg, #16283b, #0e1c2a); }
html[data-theme="dark"] .related-info h4 { color: #eaf1f8; }
html[data-theme="dark"] .related-info .price { color: #ffd166; }
html[data-theme="dark"] .related-info .price small { color: #d9b878; }

/* The wholesale banner and its live hint sit on an amber wash. */
html[data-theme="dark"] .wholesale-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.10));
    border-color: rgba(245, 158, 11, 0.55);
}

html[data-theme="dark"] .wholesale-title { color: #ffd166; }
html[data-theme="dark"] .wholesale-desc { color: #f0cf9a; }
html[data-theme="dark"] .wholesale-desc strong { color: #ffd166; }

/* Page-local palettes. The generator leaves custom properties alone because the
   same value can mean text in one rule and a panel in the next. */
html[data-theme="dark"] .home {
    --blush: #14202e;
    --mist: #101d2b;
    --muted: #9aabbb;
}

html[data-theme="dark"] .home-rails { --rail-fade: #0b1826; }

/* ---------------------------------------------------------- 6. admin + pos */

html[data-theme="dark"] {
    /* Views/Pos/Index.cshtml */
    --bg: #0a1624;
    --card: #12253a;
    --navy: #eaf1f8;
    --text: #eaf1f8;
    --sub: #9aabbb;
    --border: rgba(255, 255, 255, 0.12);
}

/* --navy doubles as a dark backdrop in the POS chrome. */
html[data-theme="dark"] .receipt-head.retail,
html[data-theme="dark"] .topbar { background: #0d1c2c; }
html[data-theme="dark"] .receipt-head.wholesale {
    background: #c8890a !important;
}
html[data-theme="dark"] body.page-pos-index .receipt-head.wholesale,
html[data-theme="dark"] body.page-admin-editorder .receipt-head.wholesale {
    background: #c8890a !important;
}
html[data-theme="dark"] .cat-chip.active,
html[data-theme="dark"] .btn-pay { color: #0b2545; }


html[data-theme="dark"] .content-area { background: #0a1624; }
html[data-theme="dark"] #sidebar { background: #0d1c2c; border-left-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] #sidebar ul li a { color: #9aabbb; }
html[data-theme="dark"] #sidebar ul li a:hover,
html[data-theme="dark"] #sidebar ul li.active > a { color: #ffd166; }
html[data-theme="dark"] .admin-navbar { background: #12253a; border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .btn-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #eaf1f8; }
html[data-theme="dark"] .admin-table tr { background: #12253a; }
html[data-theme="dark"] .admin-table tr:hover { background: #17293e; }

/* Receipts are printed on white paper regardless of the screen theme. */
@media print {
    html[data-theme="dark"],
    html[data-theme="dark"] body,
    html[data-theme="dark"] *,
    html[data-theme="dark"] *::before,
    html[data-theme="dark"] *::after {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        /* Dark borders are pale by design and would vanish on paper. */
        border-color: #ddd !important;
    }
}

/* Phone numbers and Latin digits stay left-to-right inside RTL pages */
.gr-ltr,
.phone-num,
[dir="ltr"] {
    direction: ltr;
    unicode-bidi: isolate;
}

.gr-ltr,
.phone-num {
    display: inline-block;
}

input[type="tel"],
input.gr-ltr,
input[name="Phone"],
input[name="PhoneNumber"],
input[name="ContactInfo"],
input#phoneInput,
input#custPhone {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* POS/EditOrder wholesale chip: dark-generated paints track+knob the same
   colour, so the switch vanishes when turned on. Force contrast. */
html[data-theme="dark"] body.page-pos-index .ws-chip-ui,
html[data-theme="dark"] body.page-admin-editorder .ws-chip-ui {
    background: #3a5168 !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] body.page-pos-index .ws-chip-ui::before,
html[data-theme="dark"] body.page-admin-editorder .ws-chip-ui::before {
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] body.page-pos-index .ws-chip-ui::after,
html[data-theme="dark"] body.page-admin-editorder .ws-chip-ui::after {
    color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="dark"] body.page-pos-index .ws-chip input:checked + .ws-chip-ui,
html[data-theme="dark"] body.page-admin-editorder .ws-chip input:checked + .ws-chip-ui {
    background: #c8890a !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 3px rgba(200, 137, 10, 0.28) !important;
}

html[data-theme="dark"] body.page-pos-index .ws-chip input:checked + .ws-chip-ui::before,
html[data-theme="dark"] body.page-admin-editorder .ws-chip input:checked + .ws-chip-ui::before {
    background: #fff !important;
}

html[data-theme="dark"] body.page-pos-index .cart-row .line-total,
html[data-theme="dark"] body.page-admin-editorder .cart-row .line-total {
    color: #eaf1f8;
}

html[data-theme="dark"] body.page-pos-index .cart-row .line-total.ws-price,
html[data-theme="dark"] body.page-admin-editorder .cart-row .line-total.ws-price {
    color: #ffd166;
}

html[data-theme="dark"] body.page-pos-index .cart-row .line-total small,
html[data-theme="dark"] body.page-admin-editorder .cart-row .line-total small,
html[data-theme="dark"] body.page-pos-index .cart-row .unit-price,
html[data-theme="dark"] body.page-admin-editorder .cart-row .unit-price {
    color: #9aabbb;
}

html[data-theme="dark"] body.page-pos-index .cart-row .unit-price.ws-price,
html[data-theme="dark"] body.page-admin-editorder .cart-row .unit-price.ws-price {
    color: #ffd166;
}

html[data-theme="dark"] .gr-cart-unit .gr-cart-now { color: #86eaab !important; }
html[data-theme="dark"] .gr-cart-unit .gr-cart-was { color: #7f90a1 !important; }
html[data-theme="dark"] .gr-cart-save { background: rgba(34,197,94,0.15) !important; color: #86eaab !important; }
html[data-theme="dark"] .item-unit-price .unit-now { color: #86eaab !important; }
html[data-theme="dark"] .item-line-was { color: #7f90a1 !important; }

/* ===== Config / EditOption (colors & store settings) ===== */
.config-page .config-title { color: #0b2545; font-size: 2rem; }
.config-page .config-subtitle { color: #8a8a8a; font-size: 1rem; margin: 0; }
.config-page .config-label { color: #0b2545; font-weight: 600; margin-bottom: 8px; display: block; font-size: 0.9rem; }
.config-page .config-muted { color: #8a8a8a; font-size: 0.85rem; }
.config-page .config-card { border: 1px solid rgba(11,37,69,0.08); border-radius: 16px; overflow: hidden; }
.config-page .config-card-head { background: #0b2545; color: #ffd166; }
.config-page .config-threshold {
    font-weight: 900; font-size: 1.5rem; border: 2px solid #ffd166; border-radius: 12px;
}
.config-page .config-btn-gold {
    background: #ffd166; color: #0b2545; font-weight: 800; border: 0; border-radius: 12px;
    padding: 14px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.config-page .config-btn-gold:hover { background: #e6b84d; color: #0b2545; }
.config-page .config-alert {
    padding: 15px 20px; border-radius: 12px; margin-bottom: 25px;
    display: flex; align-items: center; gap: 10px; font-weight: 600;
}
.config-page .config-alert.ok { background: #dcfce7; color: #166534; border: 1px solid rgba(22,101,52,0.2); }
.config-page .config-alert.bad { background: rgba(220,53,69,0.05); color: #dc3545; border: 1px solid rgba(220,53,69,0.2); }
.config-page .config-panel {
    background: #fff; border: 1px solid rgba(11,37,69,0.06); border-radius: 25px;
    padding: 30px; box-shadow: 0 4px 25px rgba(0,0,0,0.04);
}
.config-page .config-panel-title {
    color: #0b2545; font-size: 1.3rem; padding-bottom: 15px;
    border-bottom: 2px solid rgba(11,37,69,0.06); margin-bottom: 1.25rem;
}
.config-page .config-panel-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid rgba(11,37,69,0.06);
}
.config-page .config-count {
    background: rgba(11,37,69,0.05); color: #0b2545; padding: 8px 18px;
    border-radius: 20px; font-weight: 700; font-size: 0.85rem;
}
.config-page .config-input {
    width: 100%; padding: 14px; background: #fafafa; border: 2px solid rgba(11,37,69,0.08);
    border-radius: 12px; color: #0b2545; font-size: 0.95rem; outline: none;
}
.config-page .config-input:focus {
    border-color: #ffd166; box-shadow: 0 0 0 3px rgba(255,209,102,0.12);
}
.config-page .config-color-row {
    background: #fafafa; border: 2px solid rgba(11,37,69,0.08); border-radius: 15px;
    padding: 18px; display: flex; align-items: center; gap: 15px;
}
.config-page .config-color-picker {
    width: 55px; height: 55px; border: none; border-radius: 12px; cursor: pointer;
    background: transparent; padding: 0;
}
.config-page .config-color-preview {
    width: 45px; height: 45px; border-radius: 10px;
    border: 2px solid rgba(11,37,69,0.1); box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.config-page .config-hex {
    background: rgba(11,37,69,0.05); color: #0b2545; padding: 6px 12px;
    border-radius: 8px; font-weight: 700; font-size: 1rem; display: inline-block;
}
.config-page .config-empty { text-align: center; padding: 60px 20px; color: #8a8a8a; }
.config-page .config-empty h5 { color: #0b2545; }
.config-page .config-empty i { color: rgba(11,37,69,0.08); }
.config-page .config-group-head {
    display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
}
.config-page .config-group-head h5 {
    color: #c9a24d; font-weight: 700; margin: 0; font-size: 1.1rem; white-space: nowrap;
}
.config-page .config-group-line { flex: 1; height: 1px; background: rgba(11,37,69,0.06); }
.config-page .config-option-card {
    background: #fafafa; border: 1px solid rgba(11,37,69,0.06); border-radius: 15px; padding: 18px;
}
.config-page .config-option-card.archived { opacity: 0.78; border-style: dashed; }
.config-page .config-option-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.config-page .config-swatch {
    width: 35px; height: 35px; border-radius: 10px; flex-shrink: 0;
    border: 2px solid rgba(11,37,69,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.config-page .config-swatch-icon {
    background: rgba(255,209,102,0.1); display: flex; align-items: center; justify-content: center;
}
.config-page .config-option-name { color: #0b2545; font-weight: 700; font-size: 0.95rem; }
.config-page .config-option-actions {
    display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(11,37,69,0.06);
}
.config-page .config-option-actions form { flex: 1; margin: 0; }
.config-page .config-btn-edit,
.config-page .config-btn-archive,
.config-page .config-btn-restore {
    flex: 1; width: 100%; text-align: center; padding: 8px; border-radius: 8px;
    font-weight: 600; font-size: 0.8rem; text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.config-page .config-btn-edit {
    background: #fff; color: #0b2545; border-color: rgba(11,37,69,0.1);
}
.config-page .config-btn-edit:hover { background: #0b2545; color: #fafafa; border-color: #0b2545; }
.config-page .config-btn-archive {
    background: #fff; color: #dc3545; border-color: rgba(220,53,69,0.2);
}
.config-page .config-btn-archive:hover { background: #dc3545; color: #fafafa; border-color: #dc3545; }
.config-page .config-btn-restore {
    background: #dcfce7; color: #166534; border-color: rgba(22,101,52,0.2);
}
.config-page .config-btn-restore:hover { background: #166534; color: #fff; }

html[data-theme="dark"] body.page-admin-config .config-title,
html[data-theme="dark"] body.page-admin-editoption .config-title,
html[data-theme="dark"] body.page-admin-config .config-label,
html[data-theme="dark"] body.page-admin-editoption .config-label,
html[data-theme="dark"] body.page-admin-config .config-panel-title,
html[data-theme="dark"] body.page-admin-editoption .config-panel-title,
html[data-theme="dark"] body.page-admin-config .config-option-name,
html[data-theme="dark"] body.page-admin-editoption .config-option-name,
html[data-theme="dark"] body.page-admin-config .config-empty h5,
html[data-theme="dark"] body.page-admin-editoption .config-empty h5,
html[data-theme="dark"] body.page-admin-config .config-count,
html[data-theme="dark"] body.page-admin-editoption .config-count,
html[data-theme="dark"] body.page-admin-config .config-hex {
    color: #eaf1f8 !important;
}

html[data-theme="dark"] body.page-admin-config .config-subtitle,
html[data-theme="dark"] body.page-admin-editoption .config-subtitle,
html[data-theme="dark"] body.page-admin-config .config-muted,
html[data-theme="dark"] body.page-admin-editoption .config-muted,
html[data-theme="dark"] body.page-admin-config .config-empty,
html[data-theme="dark"] body.page-admin-editoption .config-empty {
    color: #9aabbb !important;
}

html[data-theme="dark"] body.page-admin-config .config-panel,
html[data-theme="dark"] body.page-admin-editoption .config-panel,
html[data-theme="dark"] body.page-admin-config .config-card,
html[data-theme="dark"] body.page-admin-editoption .config-card {
    background: #122234 !important;
    border-color: rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body.page-admin-config .config-card-head {
    background: #0f1c2c !important;
    color: #ffd166 !important;
}

html[data-theme="dark"] body.page-admin-config .config-input,
html[data-theme="dark"] body.page-admin-editoption .config-input,
html[data-theme="dark"] body.page-admin-config .config-color-row,
html[data-theme="dark"] body.page-admin-editoption .config-color-row,
html[data-theme="dark"] body.page-admin-config .config-option-card,
html[data-theme="dark"] body.page-admin-editoption .config-option-card,
html[data-theme="dark"] body.page-admin-config .config-threshold {
    background: #152739 !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #eaf1f8 !important;
}

html[data-theme="dark"] body.page-admin-config .config-input:focus,
html[data-theme="dark"] body.page-admin-editoption .config-input:focus,
html[data-theme="dark"] body.page-admin-config .config-threshold:focus {
    background: #152739 !important;
    color: #fff !important;
    border-color: #ffd166 !important;
}

html[data-theme="dark"] body.page-admin-config .config-hex {
    background: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] body.page-admin-config .config-btn-edit,
html[data-theme="dark"] body.page-admin-config .config-btn-archive {
    background: #152739 !important;
}

html[data-theme="dark"] body.page-admin-config .config-btn-edit {
    color: #eaf1f8 !important;
    border-color: rgba(255,255,255,0.14) !important;
}

html[data-theme="dark"] body.page-admin-config .config-btn-edit:hover {
    background: #27405e !important;
    color: #fff !important;
}

html[data-theme="dark"] body.page-admin-config .config-btn-archive {
    color: #ea858f !important;
    border-color: rgba(234,133,143,0.35) !important;
}

html[data-theme="dark"] body.page-admin-config .config-btn-archive:hover {
    background: #dc3545 !important;
    color: #fff !important;
}

html[data-theme="dark"] body.page-admin-config .config-btn-restore {
    background: rgba(34,197,94,0.15) !important;
    color: #86eaab !important;
    border-color: rgba(134,234,171,0.35) !important;
}

html[data-theme="dark"] body.page-admin-config .config-group-line,
html[data-theme="dark"] body.page-admin-config .config-panel-head,
html[data-theme="dark"] body.page-admin-config .config-panel-title,
html[data-theme="dark"] body.page-admin-config .config-option-actions {
    border-color: rgba(255,255,255,0.1) !important;
}

html[data-theme="dark"] body.page-admin-config .config-count {
    background: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] body.page-admin-config .config-group-head h5 {
    color: #ffd166 !important;
}

html[data-theme="dark"] body.page-admin-editoption input[asp-for],
html[data-theme="dark"] body.page-admin-editoption input.config-input,
html[data-theme="dark"] body.page-admin-editoption input[type="text"],
html[data-theme="dark"] body.page-admin-editoption input[readonly] {
    background: #152739 !important;
    color: #eaf1f8 !important;
    border-color: rgba(255,255,255,0.14) !important;
}

html[data-theme="dark"] body.page-admin-editoption a[asp-action="Config"],
html[data-theme="dark"] body.page-admin-editoption a.config-cancel {
    background: #152739 !important;
    color: #eaf1f8 !important;
    border-color: rgba(255,255,255,0.14) !important;
}

html[data-theme="dark"] .status-badge.prep,
html[data-theme="dark"] .chip.prep,
html[data-theme="dark"] .ol-status.prep {
    background: rgba(139,92,246,0.18) !important;
    color: #c4b5fd !important;
}