/* ============================================================
   LeafyTeam Dark Mode overrides.
   Activated by toggling class="dark" on <html> (see theme-toggle.js).
   Each rule re-points one of the light color tokens already used in
   the markup to its dark equivalent. Scoped under html.dark so it
   outranks the base utility without needing !important.
   Palette mirrors the dark tokens in Scripts/global.js (cx() helpers).
   ============================================================ */

/* ---- Backgrounds ---- */
html.dark .c-bg-\[\#FAFBFC\] { background-color: #070B12; }   /* app / page background */
html.dark .c-bg-white        { background-color: #0D1420; }   /* cards, panels, surfaces */
html.dark .c-bg-white\/80    { background-color: rgba(13, 20, 32, 0.8); }  /* sticky header */
html.dark .c-bg-\[\#E8ECF1\] { background-color: rgba(255, 255, 255, 0.08); } /* dividers */

/* hover backgrounds */
html.dark .hover\:c-bg-\[\#F1F5F9\]:hover { background-color: rgba(255, 255, 255, 0.06); }
html.dark .hover\:c-bg-\[\#F8FAFC\]:hover { background-color: rgba(255, 255, 255, 0.05); }
html.dark .hover\:c-bg-black\/5:hover     { background-color: rgba(255, 255, 255, 0.06); }

/* ---- Text ---- */
html.dark .c-text-\[\#1A2332\]       { color: #E6EAF0; }                    /* body text */
html.dark .c-text-\[\#0F172A\]       { color: #FFFFFF !important; }                    /* headings / strong */
html.dark .hover\:c-text-\[\#0F172A\]:hover { color: #FFFFFF; }
html.dark .c-text-\[\#0B1220\]       { color: rgba(255, 255, 255, 0.85); }  /* button labels */
html.dark .c-text-\[\#0B1220\]\/80   { color: rgba(255, 255, 255, 0.80); }  /* logout label */
html.dark .c-text-\[\#475569\]       { color: rgba(255, 255, 255, 0.70); }  /* menu items */
html.dark .c-text-\[\#64748B\]       { color: rgba(255, 255, 255, 0.65) !important; }  /* muted */
html.dark .c-text-\[\#94A3B8\]       { color: rgba(255, 255, 255, 0.45) !important; }  /* subtle */
html.dark .c-text-\[\#1B7A4D\]       { color: #4ADE80; }                    /* brand green accent */

/* ---- Borders ---- */
html.dark .c-border-\[\#E2E8F0\] { border-color: rgba(255, 255, 255, 0.10) !important; }
html.dark .c-border-\[\#E8ECF1\] { border-color: rgba(255, 255, 255, 0.10); }
html.dark .c-border-black\/10    { border-color: rgba(255, 255, 255, 0.12); }
html.dark .c-border-black\/20    { border-color: rgba(255, 255, 255, 0.18); }

/* ---- Form inputs (Bootstrap .form-control / .single-input, used app-wide) ---- */
html.dark .form-control,
html.dark .single-input {
    background-color: #0D1420;
    color: #E6EAF0;
    border-color: rgba(255, 255, 255, 0.12);
}
html.dark .form-control::placeholder,
html.dark .single-input::placeholder { color: rgba(255, 255, 255, 0.40); }
html.dark .form-control:focus,
html.dark .single-input:focus {
    background-color: #0D1420;
    color: #E6EAF0;
    border-color: rgba(34, 197, 94, 0.40);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.20);
}

/* black-alpha text/icons (e.g. the ☰ menu-toggle glyph in the header) */
html.dark .c-text-black\/80 { color: rgba(255, 255, 255, 0.80); }
html.dark .c-text-black\/70 { color: rgba(255, 255, 255, 0.70); }
html.dark .c-text-black\/40 { color: rgba(255, 255, 255, 0.40); }

/* Make the green brand logo legible on dark surfaces (header, menu, login) */
html.dark img[src$="brand.svg"],
html.dark #mobile-logo img { filter: brightness(0) invert(1); }

/* SVG icon with a hardcoded inline color. Inline style outranks selectors,
   so the override needs !important. (Icons using stroke/fill="currentColor"
   need none of this — they follow the text-color overrides above.) */
html.dark #lock-icon { color: #4ADE80 !important; }

/* Soft divider used on Dashboard cards */
html.dark .c-border-\[\#F1F5F9\] { border-color: rgba(255, 255, 255, 0.08); }

/* Dashboard hero: inline light gradient -> dark (inline style needs !important) */
html.dark .dash-hero { background: linear-gradient(160deg, #0D1420 0%, #0F2A1E 40%, #0D1420 100%) !important; }

/* ============================================================
   Profile pages (Action / DigitalPass / QrCode / Template / Listing)
   and their partials — additional light tokens used there.
   ============================================================ */

/* Soft surfaces */
html.dark .c-bg-\[\#F8FAFC\]  { background-color: #121A27; }                 /* soft section bg */
html.dark .c-bg-\[\#F1F5F9\]  { background-color: rgba(255, 255, 255, 0.06); }
html.dark .c-bg-white\/90     { background-color: rgba(13, 20, 32, 0.92); }
html.dark .c-bg-black\/5      { background-color: rgba(255, 255, 255, 0.06); } /* subtle hover/fill */
html.dark .c-bg-black\/10     { background-color: rgba(255, 255, 255, 0.10); }

/* Danger (delete) accents — keep red but tuned for dark */
html.dark .c-bg-red-50,
html.dark .hover\:c-bg-red-50:hover        { background-color: rgba(239, 68, 68, 0.12); }
html.dark .c-border-red-300,
html.dark .hover\:c-border-red-300:hover   { border-color: rgba(239, 68, 68, 0.40); }

/* Text / borders */
html.dark .c-text-\[\#0B1220\]\/60 { color: rgba(255, 255, 255, 0.55); }
html.dark .c-text-\[\#1F7A4D\]     { color: #4ADE80; }                       /* brand green accent (alt shade) */
html.dark .c-border-\[\#CBD5E1\]   { border-color: rgba(255, 255, 255, 0.18); }

/* Editing panel header: inline light gradient -> dark (.tab-container, needs !important) */
html.dark .tab-container {
    background-image: linear-gradient(135deg, rgba(31, 122, 77, 0.18) 0%, rgba(13, 20, 32, 0.92) 55%, rgba(78, 209, 156, 0.10) 100%) !important;
}

/* Live-preview panel (inline light gradient; now visible on mobile too) */
html.dark #divPrevSection {
    background-image: linear-gradient(135deg, rgba(31, 122, 77, 0.10) 0%, #0D1420 100%) !important;
}

/* ---- Bootstrap modals (used by _MdlCreateCard, _MdlDelete, OCR/Connection, etc.) ---- */
html.dark .modal-content {
    background-color: #0D1420;
    color: #E6EAF0;
    border-color: rgba(255, 255, 255, 0.12);
}
html.dark .modal-header,
html.dark .modal-footer { border-color: rgba(255, 255, 255, 0.10); }
html.dark .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }    /* dark close glyph -> light */

/* ---- Color picker (_ColorPicker.cshtml) — swatch borders/labels, not the colors themselves ---- */
html.dark .cp-ring,
html.dark .cp-color        { border-color: rgba(255, 255, 255, 0.18); }
html.dark .cp-value-text   { color: rgba(255, 255, 255, 0.60); }
html.dark .cp-color.active { border-color: #FFFFFF; box-shadow: 0 0 0 2px #0D1420 inset; } /* readable active ring on dark */

/* ---- Remaining Profile tokens / components (full Views/Profile sweep) ---- */
html.dark .c-border-black\/5  { border-color: rgba(255, 255, 255, 0.06); }
html.dark .c-border-black\/30 { border-color: rgba(255, 255, 255, 0.24); }
html.dark .c-bg-\[\#ECFDF5\]  { background-color: rgba(34, 197, 94, 0.12); }  /* pale-green chip -> green tint */

/* Dashboard stat-card icon chips / hover borders (Card Stock used #ECFDF5 above;
   Master Templates use blue, Employee Profiles use amber) */
html.dark .c-bg-blue-50  { background-color: rgba(59, 130, 246, 0.12); }
html.dark .c-bg-amber-50 { background-color: rgba(245, 158, 11, 0.12); }
html.dark .c-border-blue-300,
html.dark .hover\:c-border-blue-300:hover  { border-color: rgba(59, 130, 246, 0.40); }
html.dark .c-border-amber-300,
html.dark .hover\:c-border-amber-300:hover { border-color: rgba(245, 158, 11, 0.40); }

/* Bootstrap dropdown (e.g. row actions in _ListingProfile) */
html.dark .dropdown-menu {
    background-color: #0D1420;
    border-color: rgba(255, 255, 255, 0.12);
    color: #E6EAF0;
}
html.dark .dropdown-item { color: rgba(255, 255, 255, 0.80); }
html.dark .dropdown-item:hover,
html.dark .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

/* Theme picker selected button (hardcodes pale green #ECFDF5 in Site.css) */
html.dark #theme_list button.selected {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.40);
}

/* Custom employee table (_ListingProfile uses .c-table-*; header text/bg were hardcoded light) */
html.dark .c-table-header-row { border-color: rgba(255, 255, 255, 0.08); }
html.dark .c-table-header-cell {
    color: #E6EAF0;
    background-color: rgba(255, 255, 255, 0.05);
}
html.dark .c-table-row { border-color: rgba(255, 255, 255, 0.08); }
html.dark .c-table-row:hover {
    border-color: rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Page-size select — Site.css gives it the .cs-date-btn recipe, whose brand
   green reads black on a dark panel. The generic `html.dark select` rule above
   already handles the resting colours; only the hover accent needs lifting. */
html.dark .page-size:hover,
html.dark .page-size:focus {
    border-color: #4ADE80;
    color: #4ADE80;
}

/* Same control as an in-page dropdown (analytics history listings). Unlike the
   native select this one is our own DOM all the way down, so the menu surface
   needs its own dark treatment rather than inheriting the browser's. */
html.dark .page-size-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #CBD5E1;
}

html.dark .page-size-btn:hover,
html.dark .page-size-btn:focus {
    border-color: #4ADE80;
    color: #4ADE80;
}

html.dark .page-size-menu {
    background: #131C2B;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.85);
}

html.dark .page-size-item {
    color: #CBD5E1;
}

html.dark .page-size-item:hover,
html.dark .page-size-item:focus {
    background: rgba(255, 255, 255, 0.07);
    color: #4ADE80;
}

html.dark .page-size-item.active {
    background: rgba(74, 222, 128, 0.12);
    color: #4ADE80;
}

/* Brand checkbox (bulk-select) — unchecked sits on a dark row; checked keeps the brand green. */
html.dark .c-check {
    border-color: rgba(255, 255, 255, 0.25);
    background-color: transparent;
}
html.dark .c-check:hover { border-color: #4ED19C; }
html.dark .c-check:checked,
html.dark .c-check:indeterminate {
    background-color: #1F7A4D;
    border-color: #1F7A4D;
}

/* ============================================================
   Profile editor components — Site.css hardcodes light values here,
   so these need element/component overrides (not just token swaps).
   ============================================================ */

/* Form fields lacking .form-control/.single-input (plain w-full inputs, bare <select>, search) */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
html.dark textarea,
html.dark select {
    background-color: #0D1420;
    color: #E6EAF0;
    border-color: rgba(255, 255, 255, 0.12);
}
html.dark select option { background-color: #0D1420; color: #E6EAF0; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: rgba(255, 255, 255, 0.40); }

/* input-group wrapper: Site.css gives `.single-input, .input-group` a white bg +
   #E2E8F0 border. .single-input is handled above; .input-group also needs it,
   else the search icon sits on white and the border reads bright. Border matches
   the other form-field borders (white/0.12). */
html.dark .input-group {
    background-color: #0D1420;
    color: #E6EAF0;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Fields inside the group stay transparent so they take the wrapper's surface
   (Site.css sets this too, but the html.dark input/select rule above outranks it). */
html.dark .input-group > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
html.dark .input-group > select {
    background-color: transparent;
}

/* input-group prefix chips (".input-group-text bg-white") */
html.dark .input-group-text {
    background-color: rgba(255, 255, 255, 0.06);
    color: #E6EAF0;
    border-color: rgba(255, 255, 255, 0.12);
}

/* extra hover fill on the feature-block library buttons (_AvailableProfileContent) */
html.dark .hover\:c-bg-black\/10:hover { background-color: rgba(255, 255, 255, 0.10); }

/* Steps submenu (_ProfileMenu): tab text, step circles, active header, chevron */
html.dark .menu-tab { color: rgba(255, 255, 255, 0.60); }
html.dark button.menu-tab .steps {
    border-color: rgba(255, 255, 255, 0.20);
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.70);
}
html.dark .sidebar-menu .menu-group.active > .menu-header { background: rgba(34, 197, 94, 0.12); color: #4ADE80; }
html.dark .sidebar-menu .collapse-icon { color: rgba(255, 255, 255, 0.55); }
html.dark .sidebar-menu .menu-group.active > .menu-header .collapse-icon { color: #FFFFFF; }

/* Step strip scrollbar: the light slate thumb vanishes on the dark surface. Engine split matches
   Site.css - scrollbar-color must stay out of Blink's way or it discards the styled rail.
   Same breakpoint as the Site.css rules these override; unscoped, they gave the desktop sidebar a
   thumb with no matching ::-webkit-scrollbar/-track rule, so dark rendered a different bar. */
@media (max-width: 1023px) {
    html.dark .sidebar-menu .submenu::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.28); }
    html.dark .sidebar-menu .submenu::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.45); }

    @supports not selector(::-webkit-scrollbar) {
        html.dark .sidebar-menu .submenu { scrollbar-color: rgba(255, 255, 255, 0.28) transparent; }
    }
}

/* Template cards (_ProfileTemplate) — base card bg is white in Site.css */
html.dark .template-library { background-color: #0D1420; border-color: rgba(255, 255, 255, 0.10); }
html.dark .template-library:hover { border-color: rgba(255, 255, 255, 0.24); }

/* Employee name link (Listing) — hardcoded #0F172A text */
html.dark .c-primary-info { color: #FFFFFF; }

/* Invoice subscription description — matches product desc (white on dark) */
html.dark .c-invoice-desc { color: #FFFFFF; }

/* Note box (_MdlCreateCard) — hardcoded black-alpha bg/border/text */
html.dark .c-note {
    border-color: rgba(255, 255, 255, 0.10);
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.80);
}

/* ============================================================
   Card / Purchase pages (Views/Card) — inline-heavy, so several
   elements need marker-class or :disabled hooks with !important.
   ============================================================ */
/* Hero banner (inline near-white gradient) */
html.dark .card-hero {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.10) 0%, rgba(13, 20, 32, 0.98) 50%) !important;
}
/* Product icon chip (inline #DCFCE7) */
html.dark .card-icon-chip { background: rgba(34, 197, 94, 0.15) !important; }
/* Quantity stepper (inline #F8FAFC buttons + white display) */
html.dark .qty-increment,
html.dark .qty-decrement { background: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.65) !important; }
html.dark .qty-display   { background: #0D1420 !important; }
/* Confirm button disabled state (inline #E2E8F0); enabled state stays JS-driven green */
html.dark #confirmBtn:disabled { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.35) !important; }

/* ============================================================
   Invoice page (Views/Invoice). Hero reuses .card-hero (above).
   ============================================================ */
/* Cancel-subscription action card (light red tints) */
html.dark .c-bg-red-50\/50  { background-color: rgba(239, 68, 68, 0.08); }
html.dark .c-bg-red-100     { background-color: rgba(239, 68, 68, 0.15); }
html.dark .c-border-red-100 { border-color: rgba(239, 68, 68, 0.20); }
html.dark .c-border-red-200,
html.dark .hover\:c-border-red-200:hover { border-color: rgba(239, 68, 68, 0.30); }
/* hover states that would otherwise flash light */
html.dark .hover\:c-bg-white:hover            { background-color: rgba(255, 255, 255, 0.06); }
html.dark .hover\:c-bg-\[\#ECFDF5\]:hover     { background-color: rgba(34, 197, 94, 0.12); }
html.dark .hover\:c-border-\[\#CBD5E1\]:hover { border-color: rgba(255, 255, 255, 0.24); }
html.dark .group:hover .group-hover\:c-bg-blue-100    { background-color: rgba(59, 130, 246, 0.18); }
html.dark .group:hover .group-hover\:c-bg-red-200\/70 { background-color: rgba(239, 68, 68, 0.22); }

/* ---- Relocated from inline <style> blocks (mobile dark rules) ---- */
/* Profile editor sidebar pills (_ProfileMenu) */
@media (max-width: 1023px) {
    html.dark .sidebar-menu .menu-header { border-color: rgba(255, 255, 255, 0.12); }
    html.dark .sidebar-menu .submenu     { border-top-color: rgba(255, 255, 255, 0.10); }
}
/* Listing table mobile cards (_ListingProfile / _ListingTemplate) */
@media (max-width: 767px) {
    html.dark .c-table tr.c-table-row { background: #0D1420; border-color: rgba(255, 255, 255, 0.10); }
    html.dark .c-table tr.c-table-row > td:first-child { border-bottom-color: rgba(255, 255, 255, 0.08); }
    html.dark .c-table tr.c-table-row > td[data-label]::before { color: rgba(255, 255, 255, 0.55); }
    html.dark .custom-serial-group > .input-group-text:first-child { color: rgba(255, 255, 255, 0.55); }
}

/* Copy-link icon in the Digital Business Card Link field (_FrmCardInfo) */
html.dark .btn-copy-link { color: rgba(255, 255, 255, 0.45); }
html.dark .btn-copy-link:hover { color: #4ADE80; }
html.dark .btn-copy-link:active { color: #22C55E; }
@media (max-width: 767px) {

    /* Employee listing: the card-header divider moved to the name cell (nth-child 2)
       when the leading checkbox column became first-child. */
    html.dark #tblEmployee tr.c-table-row > td:nth-child(2) { border-bottom-color: rgba(255, 255, 255, 0.08); }
}

/* Smooth the switch */
html.dark body,
html.dark .transition,
html.dark .transition-all { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }

/* ============================================================
   PurchaseCard (Views/PurchaseCard) – supplemental dark rules
   ============================================================ */

/* Order-summary side panel (inline background:white + border) */
html.dark .pc-order-summary {
    background-color: #0D1420 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Running total and per-line green amounts */
html.dark #summaryTotal { color: #4ADE80 !important; }
html.dark .line-total   { color: #4ADE80 !important; }

/* JS-injected summary rows (renderSummaryLines sets inline colors) */
html.dark #summaryLineItems > div                         { color: rgba(255, 255, 255, 0.65) !important; }
html.dark #summaryLineItems > div > span:last-child       { color: #FFFFFF !important; }
html.dark #summaryLineItems > div > span:first-child span { color: rgba(255, 255, 255, 0.45) !important; }

/* Empty-state panel (no-products view) */
html.dark .pc-empty-icon-wrap                 { background: rgba(34, 197, 94, 0.12) !important; }
html.dark .pc-empty-icon-wrap svg             { stroke: #4ADE80 !important; }
html.dark .pc-empty-icon-ring                 { border-color: rgba(34, 197, 94, 0.25) !important; }
html.dark .pc-empty-footer                    { border-top-color: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.30) !important; }

/* ============================================================
   CardStock (Views/CardStock) – supplemental dark rules
   ============================================================ */

/* White panel cards (stock summary, recent purchase, quick actions) */
html.dark .cs-panel {
    background-color: #0D1420 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Usage progress-bar track (inline #EEF2F7) */
html.dark .cs-progress-track { background: rgba(255, 255, 255, 0.10) !important; }

/* Secondary "E-profile Management" action button (inline white bg) */
html.dark .cs-secondary-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
html.dark .cs-secondary-btn:hover,
html.dark .cs-secondary-btn:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

/* ============================================================
   Invoice pages — refactored component-class dark overrides
   (Views/Invoice/: Index, _Invoice, _Subscription, _PurchaseOrderHist)
   ============================================================ */

/* Hero: inline light gradient → dark */
html.dark .inv-hero {
    background: linear-gradient(135deg, rgba(27, 122, 77, 0.10) 0%, rgba(13, 20, 32, 0.98) 50%) !important;
}

/* Subscription card border (c-border-[#1B7A4D]/20 → dim green glow) */
html.dark .c-border-\[\#1B7A4D\]\/20 { border-color: rgba(74, 222, 128, 0.15) !important; }

/* Cancel-subscription label (red text → lighter red on dark) */
html.dark .c-text-red-600 { color: #F87171; }

/* ── Update Payment / Cancel Subscription action buttons ────────────── */
html.dark .inv-action-btn--default {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}
html.dark .inv-action-btn--default:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}
html.dark .inv-action-btn--danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.20);
}
html.dark .inv-action-btn--danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.30);
    box-shadow: none;
}

/* Icon chips inside action buttons — inline style needs !important */
html.dark .inv-action-btn--default .inv-sub-icon {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93C5FD !important;
}
html.dark .inv-action-btn--danger .inv-sub-icon {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #FCA5A5 !important;
}

/* Products "+N more" chip (_ListingPurchaseOrderHist) */
html.dark .inv-prod-chip {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: rgba(74, 222, 128, 0.25);
    color: #4ADE80;
}
html.dark .inv-prod-chip:hover {
    background-color: rgba(34, 197, 94, 0.22);
    border-color: rgba(74, 222, 128, 0.40);
    box-shadow: none;
}

/* Locked action button (subscription cancelled) */
html.dark .inv-action-btn--locked,
html.dark .inv-action-btn--locked:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

/* ── Cancel Subscription modal ──────────────────────────────────────────
   The amber "please note" callout is intentionally left light in dark mode,
   matching the design. */
html.dark .inv-cancel-modal .modal-content {
    background: #0D1420;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

html.dark .inv-cancel-alert  { background: rgba(239, 68, 68, 0.15); }

html.dark .inv-cancel-close  { color: rgba(255, 255, 255, 0.60); }
html.dark .inv-cancel-close:hover { background: rgba(255, 255, 255, 0.10); }

html.dark .inv-cancel-title,
html.dark .inv-cancel-done h2 { color: #FFFFFF; }

html.dark .inv-cancel-lead,
html.dark .inv-cancel-done p  { color: rgba(255, 255, 255, 0.65); }

html.dark .inv-cancel-lead span,
html.dark .inv-cancel-done strong { color: #FFFFFF; }

html.dark .inv-cancel-facts {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.10);
}
html.dark .inv-cancel-fact p      { color: rgba(255, 255, 255, 0.65); }
html.dark .inv-cancel-fact strong { color: #FFFFFF; }

html.dark .inv-cancel-btn--keep {
    background: rgba(255, 255, 255, 0.10);
    color: #FFFFFF;
}
html.dark .inv-cancel-btn--keep:hover { background: rgba(255, 255, 255, 0.15); }

html.dark .inv-cancel-done-icon { background: rgba(34, 197, 94, 0.15); }

/* Date-filter trigger button */
html.dark .cs-date-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
}
html.dark .cs-date-btn:hover,
html.dark .cs-date-btn:focus {
    border-color: #4ADE80;
    color: #4ADE80;
}

/* Date-filter dropdown panel */
html.dark #csDateFilterMenu {
    background-color: #0D1420;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
html.dark #csDateFilterMenu .dropdown-item          { color: rgba(255, 255, 255, 0.75); }
html.dark #csDateFilterMenu .dropdown-item:hover    { background-color: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
html.dark #csDateFilterMenu .dropdown-item.active,
html.dark #csDateFilterMenu .dropdown-item:active   { background-color: rgba(74, 222, 128, 0.12); color: #4ADE80; }
html.dark #csDateFilterMenu .dropdown-divider       { border-color: rgba(255, 255, 255, 0.10); }
html.dark .cs-custom-range label                    { color: rgba(255, 255, 255, 0.45); }

/* Range-picker trigger element (picker.min.css sets .range-picker .inner to background:#fff
   + var(--bs-border-color) which stays light in our custom dark mode) */
html.dark .range-picker .inner {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
}
html.dark .range-picker .inner .material-symbols-outlined { color: rgba(255, 255, 255, 0.45); }

/* Flatpickr calendar — dark surface overrides (picker.min.css loads first via <link>,
   so html.dark-scoped rules here always win on specificity) */
html.dark .flatpickr-calendar {
    background: #0D1420 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
    color: #E6EAF0;
}
html.dark .flatpickr-months                                { background: rgba(74, 222, 128, 0.06); }
html.dark .flatpickr-months .flatpickr-month,
html.dark .flatpickr-months .flatpickr-prev-month,
html.dark .flatpickr-months .flatpickr-next-month          { color: #E6EAF0 !important; fill: #E6EAF0 !important; }
html.dark .flatpickr-current-month                         { color: #E6EAF0; }
html.dark .flatpickr-weekdays                              { background: rgba(74, 222, 128, 0.04); }
html.dark span.flatpickr-weekday                           { color: rgba(255, 255, 255, 0.45); background: transparent; }
html.dark .flatpickr-day                                   { color: rgba(255, 255, 255, 0.75); }
html.dark .flatpickr-day:hover,
html.dark .flatpickr-day:focus                             { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.08); }
html.dark .flatpickr-day.today                             { border-color: #4ADE80; color: #4ADE80; }
html.dark .flatpickr-day.today:hover,
html.dark .flatpickr-day.today:focus                       { background: #4ADE80 !important; border-color: #4ADE80 !important; color: #0D1420 !important; }
html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay                      { color: rgba(255, 255, 255, 0.25); }
html.dark .flatpickr-day.flatpickr-disabled,
html.dark .flatpickr-day.flatpickr-disabled:hover          { color: rgba(255, 255, 255, 0.15); }
html.dark .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #0D1420 !important;
    color: #E6EAF0 !important;
}
html.dark .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: #0D1420 !important;
    color: #E6EAF0 !important;
}
html.dark .flatpickr-current-month input.cur-year          { background: transparent !important; color: #E6EAF0 !important; }
html.dark .numInputWrapper span                             { border-color: rgba(255, 255, 255, 0.12) !important; }
html.dark .numInputWrapper span::after                     { border-top-color: rgba(255, 255, 255, 0.45) !important; border-bottom-color: rgba(255, 255, 255, 0.45) !important; }

/* Custom filter dropdown (.c-filter-dd, see Site.css) */
html.dark .c-filter-dd__btn {
    color: #E6EAF0;
    background-color: #0D1420;
    border-color: rgba(255, 255, 255, 0.12);
}
html.dark .c-filter-dd__caret                { color: rgba(255, 255, 255, 0.55); }
html.dark .c-filter-dd__menu {
    background-color: #0D1420;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
html.dark .c-filter-dd__opt                  { color: rgba(255, 255, 255, 0.75); }
html.dark .c-filter-dd__opt:hover            { background-color: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
html.dark .c-filter-dd__opt.is-selected      { background-color: rgba(74, 222, 128, 0.12); color: #4ADE80; }

/* ============================================================
   Analytics - supplemental dark rules
   ============================================================ */

html.dark .an-panel {
    background-color: #0D1420 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* KPI cards keep their gradients on dark — only the depth cues change, and
   the tones drop a step so they don't glare against the near-black page. */
html.dark .an-card {
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.85),
                inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

html.dark .an-card:hover {
    box-shadow: 0 28px 46px -18px rgba(0, 0, 0, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

html.dark .an-card::before {
    background:
        radial-gradient(circle at 88% -14%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 48%),
        radial-gradient(circle at 2% 112%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 46%);
}

/* Same brand-anchored family as light, pitched a step deeper for the near-black
   page. The old ramps bottomed out at #0A4429 / #172F73 / #7C2D12 / #3F1585,
   which read as a hole rather than a lit tile — the ends stay deep-mid now.
   Energised on the same terms as the light ramps: hue angles untouched,
   saturation up ~x1.45, lightness trimmed enough that no step reads worse
   against the white card text than it did before. */
html.dark .an-card--visits {
    background:
        radial-gradient(circle at 84% 6%, rgba(9, 164, 93, 0.48) 0%, rgba(9, 164, 93, 0) 56%),
        radial-gradient(circle at 8% 96%, rgba(5, 100, 67, 0.52) 0%, rgba(5, 100, 67, 0) 58%),
        linear-gradient(135deg, #09A45D 0%, #07864C 50%, #056443 100%);
}

html.dark .an-card--clicks {
    background:
        radial-gradient(circle at 84% 6%, rgba(15, 153, 188, 0.48) 0%, rgba(15, 153, 188, 0) 56%),
        radial-gradient(circle at 8% 96%, rgba(8, 82, 150, 0.52) 0%, rgba(8, 82, 150, 0) 58%),
        linear-gradient(135deg, #0F99BC 0%, #0772A9 50%, #085296 100%);
}

html.dark .an-card--profile {
    background:
        radial-gradient(circle at 84% 6%, rgba(228, 116, 13, 0.48) 0%, rgba(228, 116, 13, 0) 56%),
        radial-gradient(circle at 8% 96%, rgba(177, 55, 15, 0.52) 0%, rgba(177, 55, 15, 0) 58%),
        linear-gradient(135deg, #E4740D 0%, #C85308 50%, #B1370F 100%);
}

html.dark .an-card--content {
    background:
        radial-gradient(circle at 84% 6%, rgba(136, 94, 209, 0.48) 0%, rgba(136, 94, 209, 0) 56%),
        radial-gradient(circle at 8% 96%, rgba(78, 51, 149, 0.52) 0%, rgba(78, 51, 149, 0) 58%),
        linear-gradient(135deg, #885ED1 0%, #6942B7 50%, #4E3395 100%);
}

html.dark .an-skel-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.08) 100%);
}

html.dark .an-chart-title { color: #FFFFFF; }
html.dark .an-chart-sub   { color: rgba(255, 255, 255, 0.45); }

/* Panel accent ramp — one step brighter so it survives the dark surface */
html.dark .an-chart-panel::before {
    background: linear-gradient(90deg, #09A45D 0%, #0F99BC 28%, #E4740D 55%, #885ED1 78%, #D8497E 100%);
}

html.dark .an-chart-panel--b::before {
    background: linear-gradient(90deg, #D8497E 0%, #885ED1 22%, #E4740D 45%, #0F99BC 72%, #09A45D 100%);
}

/* The light-theme tint wash reads as grime on a near-black panel */
html.dark .an-chart-panel::after,
html.dark .an-chart-panel--b::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.022) 100%);
}

html.dark .an-chart-panel:hover {
    border-color: rgba(39, 165, 107, 0.30) !important;
    box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.8);
}

html.dark .an-chart-dot--a { background: linear-gradient(135deg, #11C473 0%, #07864C 100%); }
html.dark .an-chart-dot--b { background: linear-gradient(135deg, #A47FE4 0%, #6942B7 100%); }

html.dark .an-chart-badge {
    color: #4ADE80;
    background: rgba(39, 165, 107, 0.16);
}

html.dark .an-chart-badge--alt {
    color: #B79DE8;
    background: rgba(141, 112, 191, 0.18);
}

html.dark .an-kpi-pill {
    color: #4ADE80;
    background: rgba(74, 222, 128, 0.12);
}

/* Date-filter trigger + dropdown (same recipe as CardStock's) */
html.dark .an-date-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
}
html.dark .an-date-btn:hover,
html.dark .an-date-btn:focus {
    border-color: #4ADE80;
    color: #4ADE80;
}

html.dark #anDateFilterMenu {
    background-color: #0D1420;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
html.dark #anDateFilterMenu .dropdown-item          { color: rgba(255, 255, 255, 0.75); }
html.dark #anDateFilterMenu .dropdown-item:hover    { background-color: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
html.dark #anDateFilterMenu .dropdown-item.active,
html.dark #anDateFilterMenu .dropdown-item:active   { background-color: rgba(74, 222, 128, 0.12); color: #4ADE80; }
html.dark #anDateFilterMenu .dropdown-divider       { border-color: rgba(255, 255, 255, 0.10); }
html.dark .an-custom-range label                    { color: rgba(255, 255, 255, 0.45); }

/* Back button on history pages */
html.dark .an-back-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
}
html.dark .an-back-btn:hover {
    border-color: #4ADE80;
    color: #4ADE80;
}


/* ============================================================
   PurchaseCard promo code - supplemental dark rules
   ============================================================ */

html.dark .pc-promo-label { color: rgba(255, 255, 255, 0.45) !important; }

html.dark .pc-promo-input {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

html.dark .pc-promo-input::placeholder { color: rgba(255, 255, 255, 0.35) !important; }

html.dark .pc-promo-input:focus {
    border-color: #4ADE80 !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15) !important;
}

html.dark .pc-promo-input:disabled {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

html.dark .pc-promo-btn {
    background-color: #22C55E !important;
    color: #06210F !important;
}

html.dark .pc-promo-btn:hover:not(:disabled) { background-color: #4ADE80 !important; }

html.dark .pc-promo-btn:disabled {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.30) !important;
}

html.dark .pc-promo-remove { color: rgba(255, 255, 255, 0.45) !important; }

html.dark .pc-promo-remove:hover {
    color: #F87171 !important;
    background-color: rgba(248, 113, 113, 0.12) !important;
}

html.dark .pc-promo-msg { color: #F87171 !important; }

html.dark .pc-discount-row,
html.dark .pc-discount-row #summaryDiscount { color: #F87171 !important; }

html.dark .pc-promo-rate { color: rgba(255, 255, 255, 0.35) !important; }

/* Subtotal row sits alongside the existing Quantity row */
html.dark #summarySubTotalRow { color: rgba(255, 255, 255, 0.65) !important; }
html.dark .c-filter-dd__opt.is-selected      { background-color: rgba(74, 222, 128, 0.12); color: #4ADE80; }

/* ============================================================
   Login / account activation pages (Activate.cshtml, ResetPwd.cshtml)
   Overrides for elements styled inline in the view; inline styles
   outrank selectors, so these need !important.
   ============================================================ */

/* User ID identity chip: light green gradient -> dark green tint */
html.dark #userIdDisplay {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    border-color: rgba(74, 222, 128, 0.22) !important;
}

/* "Your login ID" caption under the user ID chip (inline muted green) */
html.dark #userIdCaption { color: rgba(74, 222, 128, 0.55) !important; }

/* Show/Hide password toggle (inline brand green) */
html.dark #toggle-pw { color: #4ADE80 !important; }

/* Login card: light-tinted inline drop shadow -> deeper dark shadow */
html.dark #login-card { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important; }

/* Sidebar account menu (in-flow panel above the identity row):
   light green gradient card -> dark green tint; inline-styled, so !important */
html.dark [data-account-menu-panel] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.10) 0%, #0D1420 60%) !important;
    border-color: rgba(74, 222, 128, 0.22) !important;
}

/* Pencil button open state (styled via aria-expanded in _Menu.cshtml) */
html.dark [data-toggle="account-menu"][aria-expanded="true"] {
    background: rgba(74, 222, 128, 0.12);
    color: #4ADE80;
}

/* Update Profile: phone country-code dropdown - inline light bg/border stay lit
   in dark mode while the text goes pale, so force the whole control dark */
html.dark #PhoneCountryCode {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-right-color: rgba(255, 255, 255, 0.12) !important;
    color: #E6EAF0 !important;
}

/* Native dropdown list itself (Chrome/Edge honor option colors) */
html.dark #PhoneCountryCode option {
    background-color: #0D1420;
    color: #E6EAF0;
}

/* Update Profile: read-only User ID chip (same treatment as #userIdDisplay) */
html.dark #profileUserIdChip {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    border-color: rgba(74, 222, 128, 0.22) !important;
}
html.dark #profileUserIdChip .uid-caption { color: rgba(74, 222, 128, 0.55) !important; }
html.dark #profileUserIdChip .uid-badge {
    color: rgba(74, 222, 128, 0.75) !important;
    background: rgba(74, 222, 128, 0.10) !important;
    border-color: rgba(74, 222, 128, 0.22) !important;
}

/* ============================================================
   Resubscribe flow (login-gated Add Card / confirm-charge overlays,
   Dashboard success modal) - inline light gradients/glows need
   !important; icon colors not covered by the generic rules above.
   ============================================================ */

html.dark .resub-processing-overlay { background: rgba(7, 11, 18, 0.92) !important; }

/* Success modal card: same dark gradient as .dash-hero, for the same "good news" tone */
html.dark .resub-success-card { background: linear-gradient(160deg, #0D1420 0%, #0F2A1E 40%, #0D1420 100%) !important; }

html.dark .resub-success-icon-glow { background: radial-gradient(circle, rgba(74, 222, 128, 0.22) 0%, rgba(15, 42, 30, 0.9) 65%, transparent 100%) !important; }

/* ResubscribeConfirmCharge: "total due today" callout (inline light-green bg) */
html.dark #totalDueBox { background: rgba(74, 222, 128, 0.08) !important; }

html.dark .c-text-amber-600  { color: #FBBF24; }
html.dark .c-text-\[\#059669\] { color: #4ADE80; }

/* PDPA consent tick-box */
html.dark .pdpa-consent { color: #94A3B8 !important; }

html.dark .pdpa-consent a { color: #4ADE80 !important; }

html.dark .pdpa-warning { color: #F87171 !important; }

/* ============================================================
   Purchase Cards - product images, colour chooser, preview lightbox
   ============================================================ */
html.dark .pc-thumb,
html.dark .pc-colour-selected-thumb,
html.dark .pc-lb-thumb                        { background-color: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.10) !important; }
html.dark .pc-thumb:hover                     { border-color: #4ADE80 !important; }
html.dark .pc-media-hint                      { color: rgba(255, 255, 255, 0.35) !important; }

html.dark .pc-colour-label                    { color: #FFFFFF !important; }
html.dark .pc-colour-browse                   { color: #4ADE80 !important; }
html.dark .pc-colour-selected                 { background-color: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.10) !important; }
html.dark .pc-colour-selected:hover           { border-color: rgba(255, 255, 255, 0.25) !important; }
html.dark .pc-colour-selected-name            { color: #FFFFFF !important; }
html.dark .pc-colour-selected-meta            { color: rgba(255, 255, 255, 0.45) !important; }
html.dark .pc-colour-zoom,
html.dark .pc-colour-change                   { background-color: rgba(255, 255, 255, 0.10) !important; border-color: transparent !important; color: rgba(255, 255, 255, 0.70) !important; }
html.dark .pc-colour-zoom:hover               { background-color: rgba(255, 255, 255, 0.20) !important; color: #FFFFFF !important; }
html.dark .pc-colour-noimg                    { color: rgba(255, 255, 255, 0.25) !important; }

html.dark .pc-colour-tile                     { background-color: #0D1420 !important; border-color: rgba(255, 255, 255, 0.10) !important; }
html.dark .pc-colour-tile:hover               { border-color: rgba(255, 255, 255, 0.30) !important; }
html.dark .pc-colour-tile.is-selected         { border-color: #22C55E !important; }
html.dark .pc-colour-tile-media               { background-color: rgba(255, 255, 255, 0.04) !important; }
html.dark .pc-colour-tile-name,
html.dark .pc-colour-tile-price               { color: #FFFFFF !important; }
html.dark .pc-colour-tile-product             { color: rgba(255, 255, 255, 0.35) !important; }
html.dark .pc-colour-tile-desc                { color: rgba(255, 255, 255, 0.55) !important; }

html.dark .pc-mdl-content                     { background-color: #0D1420 !important; border-color: rgba(255, 255, 255, 0.10) !important; }
html.dark .pc-mdl-header                      { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
html.dark .pc-mdl-title                       { color: #FFFFFF !important; }
html.dark .pc-mdl-sub                         { color: rgba(255, 255, 255, 0.40) !important; }
html.dark .pc-mdl .btn-close                  { filter: invert(1) grayscale(100%) brightness(200%); }

html.dark .pc-lb-stage                        { background-color: rgba(255, 255, 255, 0.03) !important; }
html.dark .pc-lb-thumbs                       { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
html.dark .pc-lb-thumb.is-active              { border-color: #4ADE80 !important; }
html.dark .pc-lb-desc                         { color: rgba(255, 255, 255, 0.65) !important; }
html.dark .pc-lb-price                        { color: #4ADE80 !important; }
html.dark .pc-lb-perunit                      { color: rgba(255, 255, 255, 0.35) !important; }
html.dark .pc-lb-back                         { background-color: rgba(34, 197, 94, 0.12) !important; border-color: rgba(34, 197, 94, 0.30) !important; color: #4ADE80 !important; }

html.dark .pc-chip-img { background-color: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.10) !important; }
html.dark .pc-chip-img:hover { border-color: #4ADE80 !important; }
html.dark .pc-colour-selected-desc { color: rgba(255, 255, 255, 0.55) !important; }

/* ============================================================
   Group Order Discounts (_PurchaseCard) - hero toggle, banner, pricing panel.
   All inline-styled, so !important throughout.
   ============================================================ */
html.dark .pc-gp-toggle { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important; }
html.dark .pc-gp-banner { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45) !important; }

html.dark .pc-gp-panel {
    background: #0D1420 !important;
    border-color: rgba(74, 222, 128, 0.25) !important;
}
html.dark .pc-gp-panel .font-semibold { color: #FFFFFF !important; }
html.dark .pc-gp-panel .c-text-sm    { color: rgba(255, 255, 255, 0.55) !important; }

html.dark .pc-gp-table thead tr { background: #111A28 !important; }
html.dark .pc-gp-table thead th { color: rgba(255, 255, 255, 0.75) !important; }
html.dark .pc-gp-table thead th:first-child { color: rgba(255, 255, 255, 0.45) !important; }
html.dark .pc-gp-table tbody tr { border-top-color: rgba(255, 255, 255, 0.08) !important; }
html.dark .pc-gp-table tbody td { color: rgba(255, 255, 255, 0.75) !important; }
html.dark .pc-gp-table tbody td > span { color: #CBD5E1 !important; }
html.dark .pc-gp-table .pc-tier-price { color: #FFFFFF !important; }
html.dark .pc-gp-table .pc-tier-save  { color: rgba(255, 255, 255, 0.45) !important; }
html.dark .pc-gp-table .pc-tier-mine  { color: #4ADE80 !important; }
html.dark .pc-gp-table .pc-tier-carried      { color: rgba(255, 255, 255, 0.55) !important; }
html.dark .pc-gp-table .pc-tier-carried-note { color: rgba(255, 255, 255, 0.35) !important; }
/* the tier the current quantity is priced at (highlightTiers toggles .is-current) */
html.dark .pc-gp-table .pc-tier-cell.is-current .pc-tier-price,
html.dark .pc-gp-table .pc-tier-cell.is-current .pc-tier-save,
html.dark .pc-gp-table .pc-tier-cell.is-current .pc-tier-carried,
html.dark .pc-gp-table .pc-tier-cell.is-current .pc-tier-carried-note { color: #4ADE80 !important; }

/* sticky first column on phones takes the panel surface */
@media (max-width: 767px) {
    html.dark .pc-gp-table th:first-child,
    html.dark .pc-gp-table td:first-child { background: #0D1420; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.08); }
    html.dark .pc-gp-table thead th:first-child { background: #111A28; }
}