/* =====================================================================
   Sunday Shrimps — dark theme
   Applied when <html data-bs-theme="dark"> (toggle in the header).
   Bootstrap 5.3 handles its own components; this file re-points the
   design tokens and the few hard-coded light surfaces in app.css/shop.css.
   ===================================================================== */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --ss-bg: #0b1120;
  --ss-surface: #131b2e;
  --ss-surface-2: #182238;
  --ss-hover: #1d2840;
  --ss-border: #26324d;
  --ss-ink: #e7ecf6;
  --ss-ink-2: #b5bed2;
  --ss-muted: #8a95ae;
  --ss-orange-ink: #ffa94d;
  --ss-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --ss-shadow-lg: 0 10px 40px rgba(0, 0, 0, .45);

  --bs-body-color: var(--ss-ink);
  --bs-body-bg: var(--ss-bg);
  --bs-secondary-bg: var(--ss-surface-2);
  --bs-tertiary-bg: var(--ss-surface-2);
  --bs-emphasis-color: #fff;
  --bs-link-color: #8fb0ff;
  --bs-link-color-rgb: 143, 176, 255;
  --bs-link-hover-color: #ffb35c;
  --bs-link-hover-color-rgb: 255, 179, 92;
  --bs-border-color: var(--ss-border);
  --bs-heading-color: var(--ss-ink);
}

/* Colour tints: translucent backgrounds, lighter ink */
[data-bs-theme="dark"] .c-navy { --c: #8fb0ff; --c-soft: rgba(96, 140, 255, .16); --c-solid: #2f56c6; }
[data-bs-theme="dark"] .c-orange { --c: #ffa94d; --c-soft: rgba(247, 127, 0, .16); }
[data-bs-theme="dark"] .c-purple { --c: #b69cff; --c-soft: rgba(139, 92, 246, .18); --c-solid: #7c3aed; }
[data-bs-theme="dark"] .c-green { --c: #4ade80; --c-soft: rgba(22, 163, 74, .18); --c-solid: #16a34a; }
[data-bs-theme="dark"] .c-teal { --c: #2dd4bf; --c-soft: rgba(13, 148, 136, .2); --c-solid: #0d9488; }
[data-bs-theme="dark"] .c-blue { --c: #7aa7ff; --c-soft: rgba(37, 99, 235, .2); --c-solid: #2563eb; }
[data-bs-theme="dark"] .c-red { --c: #f87171; --c-soft: rgba(220, 38, 38, .18); --c-solid: #dc2626; }
[data-bs-theme="dark"] .c-indigo { --c: #a5b4fc; --c-soft: rgba(79, 70, 229, .2); --c-solid: #4f46e5; }
[data-bs-theme="dark"] .c-gray { --c: #a3adc2; --c-soft: rgba(148, 163, 184, .14); --c-solid: #64748b; }

/* Buttons */
[data-bs-theme="dark"] .btn-soft { background: var(--ss-surface-2); color: var(--ss-ink); border-color: var(--ss-border); }
[data-bs-theme="dark"] .btn-soft:hover { background: var(--ss-hover); color: #fff; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #8fb0ff; --bs-btn-border-color: #3b5bab; --bs-btn-hover-bg: #2f56c6; --bs-btn-hover-border-color: #2f56c6; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #2f56c6; --bs-btn-border-color: #2f56c6; --bs-btn-hover-bg: #3b64d8; --bs-btn-hover-border-color: #3b64d8; }
[data-bs-theme="dark"] .btn-demo { background: repeating-linear-gradient(135deg, rgba(247,127,0,.12), rgba(247,127,0,.12) 8px, rgba(247,127,0,.2) 8px, rgba(247,127,0,.2) 16px); border-color: rgba(253, 186, 116, .5); }
[data-bs-theme="dark"] .btn-link { --bs-btn-color: #8fb0ff; }

/* Top bar, search, dropdowns */
[data-bs-theme="dark"] .ss-topbar { background: rgba(15, 22, 40, .92); }
[data-bs-theme="dark"] .ss-search input,
[data-bs-theme="dark"] .icon-btn,
[data-bs-theme="dark"] .user-chip { background: var(--ss-surface-2); color: var(--ss-ink-2); }
[data-bs-theme="dark"] .ss-search input:focus { background: var(--ss-surface); border-color: #3b5bab; }
[data-bs-theme="dark"] .icon-btn:hover,
[data-bs-theme="dark"] .user-chip:hover { background: var(--ss-hover); color: #fff; }
[data-bs-theme="dark"] .icon-btn .dot { border-color: var(--ss-surface); }
[data-bs-theme="dark"] .ss-search-results { background: var(--ss-surface); }
[data-bs-theme="dark"] .ss-search-results a { border-color: var(--ss-border); }
[data-bs-theme="dark"] .ss-search-results a:hover,
[data-bs-theme="dark"] .ss-search-results a.focus,
[data-bs-theme="dark"] .ss-notif .item:hover { background: var(--ss-hover); }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--ss-surface); --bs-dropdown-link-color: var(--ss-ink); --bs-dropdown-link-hover-bg: var(--ss-hover); --bs-dropdown-link-hover-color: #fff; }
[data-bs-theme="dark"] .dropdown-item.active, [data-bs-theme="dark"] .dropdown-item:active { background: #2f56c6; }
[data-bs-theme="dark"] .ss-sidebar { background: linear-gradient(180deg, #050b1c 0%, #08142f 60%, #0b1a3d 100%); border-right: 1px solid var(--ss-border); }

/* Cards, tables, forms */
[data-bs-theme="dark"] .ss-card > .card-head { border-color: var(--ss-border); }
[data-bs-theme="dark"] .ss-card > .card-foot { background: var(--ss-surface-2); border-color: var(--ss-border); }
[data-bs-theme="dark"] a.kpi-link:hover .ss-card { border-color: #3b5bab; }
[data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--ss-ink); }
[data-bs-theme="dark"] .table > :not(caption) > * > * { border-color: var(--ss-border); }
[data-bs-theme="dark"] .table thead th { background: var(--ss-surface-2); border-color: var(--ss-border); }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--ss-hover); }
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--ss-surface-2); border-color: #2e3b59; color: var(--ss-ink); }
[data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[readonly] { background-color: #10172a; }
[data-bs-theme="dark"] .input-group-text { background: #10172a; border-color: #2e3b59; }
[data-bs-theme="dark"] .form-section::after { background: var(--ss-border); }
[data-bs-theme="dark"] .modal-content { background: var(--ss-surface); }
@keyframes filled-dark { 0% { background: rgba(247, 127, 0, .3); } 100% { background: var(--ss-surface-2); } }
[data-bs-theme="dark"] .was-filled { animation-name: filled-dark; }

/* Workflow, timeline, journey */
[data-bs-theme="dark"] .wf-progress .wf-step::before { background: var(--ss-border); }
[data-bs-theme="dark"] .wf-progress .wf-dot { background: var(--ss-surface-2); color: #6b7690; border-color: var(--ss-surface); box-shadow: 0 0 0 1px var(--ss-border); }
[data-bs-theme="dark"] .wf-progress .done .wf-dot { box-shadow: 0 0 0 1px var(--ss-green); }
[data-bs-theme="dark"] .step-card,
[data-bs-theme="dark"] .journey .j-card,
[data-bs-theme="dark"] .pill-tabs a,
[data-bs-theme="dark"] .role-card,
[data-bs-theme="dark"] .auth-panel { background: var(--ss-surface); }
[data-bs-theme="dark"] .journey .j-item.pending .j-card { background: var(--ss-surface-2); }
[data-bs-theme="dark"] .tl-dot, [data-bs-theme="dark"] .journey .j-node { border-color: var(--ss-surface); box-shadow: 0 0 0 1px var(--ss-border); }
[data-bs-theme="dark"] .tl-item.pending .tl-dot,
[data-bs-theme="dark"] .journey .j-item.pending .j-node { background: var(--ss-surface-2); color: #5d6883; }
[data-bs-theme="dark"] .pill-tabs a.active { background: #2f56c6; border-color: #2f56c6; }
[data-bs-theme="dark"] .checklist .item:has(input:checked) { background: rgba(22, 163, 74, .14); border-color: rgba(74, 222, 128, .4); }
[data-bs-theme="dark"] .channel-opt:has(input:checked) { background: rgba(96, 140, 255, .12); border-color: #3b5bab; }
[data-bs-theme="dark"] .activity-item { border-color: var(--ss-border); }
[data-bs-theme="dark"] .sim-label, [data-bs-theme="dark"] .otp-reveal { background: rgba(247, 127, 0, .12); color: #ffb35c; border-color: rgba(253, 186, 116, .45); }
[data-bs-theme="dark"] .rating label { color: #3a4560; }
[data-bs-theme="dark"] .map-sim { background: repeating-linear-gradient(0deg, #1d2840 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, #1d2840 0 1px, transparent 1px 38px), #10172a; }
/* QR codes, barcodes and print labels stay on white so they remain scannable. */
[data-bs-theme="dark"] .qr-box, [data-bs-theme="dark"] .label-sheet { background: #fff; color: #0f1c3f; }

/* ---------- Customer shop ---------- */
[data-bs-theme="dark"] .shop-body { background: var(--ss-bg); }
[data-bs-theme="dark"] .shop-header { background: linear-gradient(135deg, #050b1c 0%, #0a1838 70%, #12275a 100%); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
[data-bs-theme="dark"] .shop-search input { background: var(--ss-surface-2); color: var(--ss-ink); }
[data-bs-theme="dark"] .shop-search input::placeholder { color: var(--ss-muted); }
[data-bs-theme="dark"] .hdr-icon .count { border-color: #0a1838; }
[data-bs-theme="dark"] .bottom-nav { background: var(--ss-surface); border-color: var(--ss-border); }
[data-bs-theme="dark"] .bottom-nav a { color: var(--ss-muted); }
[data-bs-theme="dark"] .bottom-nav a.active { color: #fff; }
[data-bs-theme="dark"] .offer-card,
[data-bs-theme="dark"] .seller-block,
[data-bs-theme="dark"] .bill { background: var(--ss-surface); border-color: var(--ss-border); }
[data-bs-theme="dark"] .offer-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
[data-bs-theme="dark"] .offer-card .eta { color: #2dd4bf; }
[data-bs-theme="dark"] .var-badge { background: rgba(10, 16, 32, .85); }
[data-bs-theme="dark"] .oos { background: rgba(11, 17, 32, .72); color: #f87171; }
[data-bs-theme="dark"] .oos-mark { background: rgba(11, 17, 32, .5); }
[data-bs-theme="dark"] .oos-mark > span { background: rgba(11, 17, 32, .92); color: #f87171; border-color: #f87171; }
[data-bs-theme="dark"] .btn-add { background: rgba(247, 127, 0, .12); }
[data-bs-theme="dark"] .btn-add:hover { background: var(--ss-orange); color: #fff; }
[data-bs-theme="dark"] .chip,
[data-bs-theme="dark"] .variant-chip,
[data-bs-theme="dark"] .size-opt span,
[data-bs-theme="dark"] .seller-opt,
[data-bs-theme="dark"] .pay-opt { background: var(--ss-surface); border-color: var(--ss-border); color: var(--ss-ink); }
[data-bs-theme="dark"] .chip:hover { border-color: #3b5bab; }
[data-bs-theme="dark"] .chip.active { background: #2f56c6; border-color: #2f56c6; color: #fff; }
[data-bs-theme="dark"] .variant-chip.active { border-color: var(--c); background: var(--c-soft); }
[data-bs-theme="dark"] .size-opt input:checked + span,
[data-bs-theme="dark"] .stepper { background: rgba(247, 127, 0, .12); border-color: var(--ss-orange); color: #ffb35c; }
[data-bs-theme="dark"] .seller-opt.active,
[data-bs-theme="dark"] .pay-opt:has(input:checked) { background: rgba(96, 140, 255, .12); border-color: #3b5bab; }
[data-bs-theme="dark"] .sticky-cta { background: var(--ss-surface); border-color: var(--ss-border); }
@media (min-width: 992px) { [data-bs-theme="dark"] .sticky-cta.lg-static { background: none; } }
[data-bs-theme="dark"] .seller-block .hd, [data-bs-theme="dark"] .cart-line, [data-bs-theme="dark"] .bill .total { border-color: var(--ss-border); }
[data-bs-theme="dark"] .track::before { background: var(--ss-border); }
[data-bs-theme="dark"] .track .dot { background: var(--ss-surface); border-color: #3a4560; }
[data-bs-theme="dark"] .track .st.done .dot { background: #16a34a; border-color: #16a34a; }
[data-bs-theme="dark"] .track .st.now .dot { background: var(--ss-blue); border-color: var(--ss-blue); }
[data-bs-theme="dark"] .track .st.todo .t { color: #5d6883; }
[data-bs-theme="dark"] .cat-tile .ic { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }

/* Light/dark toggle: show the icon for the mode you would switch to */
.theme-toggle .bi-sun-fill { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }

/* Inline light panels in a few views (notes, PM remarks, item rows, highlighted lot) */
[data-bs-theme="dark"] [style*="background:#f6f8fc"],
[data-bs-theme="dark"] [style*="background:#fafbfd"] { background: var(--ss-surface-2) !important; }
[data-bs-theme="dark"] [style*="background:#fff7ed"],
[data-bs-theme="dark"] [style*="background:#fffaf3"] { background: rgba(247, 127, 0, .1) !important; }
[data-bs-theme="dark"] .map-pin .bg-white { background: var(--ss-surface) !important; color: var(--ss-ink); }

/* Navy text that needs a lighter tone on dark surfaces */
[data-bs-theme="dark"] .table a.ref,
[data-bs-theme="dark"] .form-section,
[data-bs-theme="dark"] .nav-tabs.ss-tabs .nav-link.active { color: #8fb0ff; }
[data-bs-theme="dark"] .table a.ref:hover { color: #ffb35c; }
[data-bs-theme="dark"] .bulk-variant span { background: #131b2e; border-color: #2c3650; color: #e6ebf5; }
[data-bs-theme="dark"] .bulk-variant input:checked + span { background: rgba(247,127,0,.14); border-color: #f77f00; color: #ffb35c; }