/* ============================================================================================
   TEST FEATURE: Light / Dark / System themes for all three Zeu websites.
   Everything for it lives in ui/theme.css (this file) and ui/theme.js.
   • Turn it off:  THEME_OPTIONS=off in .env, then redeploy (sites go back to the normal light look).
   • Remove it:    see THEME-TEST.md in the project folder.
   Light is the normal look, so this file only describes the dark one, on <html data-theme="dark">.
   ============================================================================================ */

/* ---------- Theme picker: Liquid Glass (Account / Store settings / admin sidebar) ----------
   A frosted glass capsule with a clear glass lens that glides to the chosen option (like Apple's
   Liquid Glass controls). Only the picker animates; the page changes colour straight away. theme.js moves it by setting --i (0, 1, 2). */
.theme-pick {
  --i: 0; --pad: 4px; --lens-w: calc((100% - 2 * var(--pad)) / 3);
  position: relative; isolation: isolate; display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--pad); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)), rgba(11,20,112,.05);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 2px rgba(11,20,112,.08), 0 6px 20px -10px rgba(11,20,112,.35), 0 0 0 1px rgba(11,20,112,.06);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
}
/* The sliding glass lens */
.theme-pick .tp-lens {
  position: absolute; z-index: 0; top: var(--pad); bottom: var(--pad); left: calc(var(--pad) + var(--i) * var(--lens-w)); width: var(--lens-w);
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6));
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(11,20,112,.08), 0 2px 6px -1px rgba(11,20,112,.18), 0 8px 18px -8px rgba(11,20,112,.3);
  -webkit-backdrop-filter: blur(6px) saturate(200%) brightness(1.06); backdrop-filter: blur(6px) saturate(200%) brightness(1.06);
  transition: left .32s cubic-bezier(.4, 0, .2, 1), transform .32s cubic-bezier(.4, 0, .2, 1);
}
/* Specular highlight across the top of the lens, and a sheen that sweeps over it while it slides */
.theme-pick .tp-lens::before { content: ""; position: absolute; inset: 1px 10% auto; height: 45%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); }
.theme-pick .tp-lens::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); background-size: 250% 100%; background-position: 120% 0; opacity: 0; }
.theme-pick.is-moving .tp-lens { transform: scaleX(1.04); }
.theme-pick.is-moving .tp-lens::after { animation: tp-sheen .4s ease-out; }
@keyframes tp-sheen { 0% { opacity: .35; background-position: 120% 0; } 100% { opacity: 0; background-position: -20% 0; } }
.theme-pick button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 36px; padding: 0 14px;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: color .3s ease, transform .2s ease;
}
.theme-pick button svg { width: 17px; height: 17px; flex-shrink: 0; }
.theme-pick button:hover { color: var(--ink); }
.theme-pick button:active { transform: scale(.94); }
.theme-pick button[aria-checked="true"] { color: var(--navy); }
.theme-pick button:focus-visible { outline: 2px solid var(--navy-400); outline-offset: 2px; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.theme-row p { color: var(--muted); font-size: 13.5px; margin-top: 2px; }

/* Dark glass */
:root[data-theme="dark"] .theme-pick {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)), rgba(15,17,28,.4);
  border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.7);
}
:root[data-theme="dark"] .theme-pick .tp-lens {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07));
  border-color: rgba(255,255,255,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.25), 0 4px 14px -4px rgba(0,0,0,.6);
}
:root[data-theme="dark"] .theme-pick .tp-lens::before { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); }
:root[data-theme="dark"] .theme-pick button[aria-checked="true"] { color: #fff; }

/* On the admin's dark sidebar: glass on navy, icons above the labels so all three fit */
.sidebar.dark .theme-pick { width: 100%; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px -12px rgba(0,0,0,.6); border-radius: 18px; }
.sidebar.dark .theme-pick .tp-lens { border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08)); border-color: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px -4px rgba(0,0,0,.5); }
.sidebar.dark .theme-pick .tp-lens::before { background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)); border-radius: 12px; }
.sidebar.dark .theme-pick button { flex-direction: column; gap: 3px; padding: 6px 2px; height: auto; border-radius: 14px; color: rgba(255,255,255,.6); font-size: 11.5px; line-height: 1.1; }
.sidebar.dark .theme-pick button svg { width: 16px; height: 16px; }
.sidebar.dark .theme-pick button:hover, .sidebar.dark .theme-pick button[aria-checked="true"] { color: #fff; }
.sb-theme { padding: 0 2px 10px; }
@media (max-width: 600px) { .theme-pick { width: 100%; } .theme-pick button { padding: 0 8px; } }

@media (prefers-reduced-motion: reduce) {
  .theme-pick .tp-lens, .theme-pick button, .theme-pick button svg { transition: none; }
  .theme-pick.is-moving .tp-lens { transform: none; }
  .theme-pick.is-moving .tp-lens::after { animation: none; }
}

/* ---------- Dark colours ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --navy-50: #1A1E3F; --navy-100: #242A5A; --navy-200: #343C80; --navy-400: #8A93F5;
  --navy: #A3ABFF; --navy-600: #5560E0; --navy-800: #C9CEFF; --navy-900: #0B0E1F; /* 800 is used for big numbers, 900 for the admin sidebar */
  --ink: #ECEEF7; --ink-2: #C8CBDA; --muted: #9CA2BA; --muted-2: #7D839C; --line: #2C3047; --line-2: #23273B;
  --surface: #171A29; --canvas: #0F111C; --canvas-2: #141724;
  --green: #3CC48E; --green-bg: #12322A; --green-dot: #2BB673;
  --amber: #F3B44E; --amber-bg: #36290F;
  --red: #FF7E73; --red-bg: #3B1816;
  --blue: #8DB0FF; --blue-bg: #17264A;
  --gp-green: #3CC48E;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 10px 28px -12px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
  --sh-3: 0 24px 60px -20px rgba(0,0,0,.75);
  --fill: #4650D6;      /* buttons, chips, steppers: Zeu blue that white text reads well on */
  --fill-deep: #1A2080; /* big blue panels */
}
:root[data-theme="dark"] body { background: var(--canvas); color: var(--ink); }

/* Blue fills (in light mode these use the navy, which is now the light text accent) */
:root[data-theme="dark"] :is(.brand-mark, .btn-primary, .chip.active, .sb-item .count, .tabbar .count, .tracker .s.on::before, .bars .bar, .meter > span,
  .detail-head .avatar.xl, .icon-btn .badge-n, .add-btn, .stepper, .st-card .avatar, .slot.on, .cb-circle, .notif-ic, .op-rewards .ic, .cartbar,
  .rank-row:first-child .rank, .rank.gold, .na-bell, .breathe .br-core, .breathe .br-ring, .ap-radio input:checked + span::after) { background-color: var(--fill); }
:root[data-theme="dark"] .btn-primary:hover:not(:disabled) { background-color: #5560E0; }
:root[data-theme="dark"] :is(.s-hero, .auth-hero, .op-hero) { background-color: var(--fill-deep); }
:root[data-theme="dark"] :is(.rewards, .restock) { background: linear-gradient(135deg, var(--fill-deep) 0%, #2A33A8 100%); }
:root[data-theme="dark"] .tracker .s.now::before { background: linear-gradient(90deg, var(--fill) 50%, var(--navy-200) 50%); }
:root[data-theme="dark"] .min-bar span { background: linear-gradient(90deg, #6670E8, var(--fill)); }
:root[data-theme="dark"] .mdo-range { --navy: var(--fill); }
:root[data-theme="dark"] :is(.btn-success, .pd-off) { background-color: #1E9E6F; }
/* White chips with blue text */
:root[data-theme="dark"] :is(.cartbar-n, .brand.on-dark .brand-mark, .sidebar.dark .sb-item .count, .bulk .btn) { color: #1A2080; }

/* Bars, panels and inputs that were white or light grey */
:root[data-theme="dark"] :is(.main-top, .c-top) { background: rgba(23,26,41,.92); }
:root[data-theme="dark"] .tabbar { background: rgba(23,26,41,.96); }
:root[data-theme="dark"] :is(.tabbar .count, .icon-btn .badge-n) { border-color: var(--surface); }
:root[data-theme="dark"] .skel { background: linear-gradient(90deg, var(--line-2) 0%, #2A2E44 50%, var(--line-2) 100%); background-size: 200% 100%; }
:root[data-theme="dark"] .switch .track { background: #3A3F57; }
:root[data-theme="dark"] :is(.input:hover, .select:hover) { border-color: #3A3F57; }
:root[data-theme="dark"] :is(.input, .select, .textarea) { background-color: var(--surface); color: var(--ink); }
:root[data-theme="dark"] :is(.shop-tools .input:focus, .radio, .addr-row.picked .addr-ic, .op-code) { background: var(--surface); }
:root[data-theme="dark"] .add-btn:disabled { background-color: #3A3F57; }
:root[data-theme="dark"] .stepper.soft button:hover:not(:disabled) { background: rgba(163,171,255,.12); }
:root[data-theme="dark"] .code-box { border-color: #3A3F5A; }
:root[data-theme="dark"] .ap-map-wrap { background: #1D2133; }
:root[data-theme="dark"] .ap-loader { background: rgba(15,17,28,.94); }
:root[data-theme="dark"] .op-rewards { background: linear-gradient(135deg, var(--navy-50) 0%, var(--surface) 100%); }
:root[data-theme="dark"] .celebrate.green { background: radial-gradient(circle at 50% 38%, #12322A 0%, var(--surface) 55%); }
:root[data-theme="dark"] .rw-ic { background: var(--green-bg); }
:root[data-theme="dark"] .danger-zone { border-color: #5A2A26; }
:root[data-theme="dark"] .pk-list::-webkit-scrollbar-thumb { background: #3A3F57; border: 4px solid transparent; background-clip: padding-box; }

/* Coloured notes and badges: light text on dark tints */
:root[data-theme="dark"] .banner.warn { color: #F3C27A; }
:root[data-theme="dark"] .banner.danger, :root[data-theme="dark"] :is(.cancel-note b, .cancel-note span) { color: #FF9C93; }
:root[data-theme="dark"] .banner.success { color: #6FDDB0; }
:root[data-theme="dark"] :is(.bill-save, .fo-banner) { background: linear-gradient(90deg, #12322A, #10271F); border-color: #2F6B55; color: #7BE0B5; }
:root[data-theme="dark"] .bill-nudge { background: #2E240E; border-color: #6B5320; color: #F3C27A; }
:root[data-theme="dark"] :is(.pd-save, .pd-stock, .pk-n.on) { color: #7BE0B5; }
:root[data-theme="dark"] .pd-stock.low { color: #F3C27A; }
:root[data-theme="dark"] .pk-n.off { background: #36290F; color: #F3C27A; }

/* Product photos keep their white background (they're shot on white). */
:root[data-theme="dark"] .sc-wheel circle { fill: #0B0F3A; }
:root[data-theme="dark"] .sc-ticket { background: linear-gradient(135deg, var(--fill-deep) 0%, var(--fill) 100%); }
:root[data-theme="dark"] .sc-prize { background: radial-gradient(circle at 50% 40%, #4A3B12 0%, #36290F 100%); color: #FFD98A; }
:root[data-theme="dark"] .wr-tiles.mini .wr-pill.on { background: var(--fill); }
:root[data-theme="dark"] :is(.rw-hero, .wr-hero) { background: radial-gradient(120% 140% at 100% 0%, #3A44C4 0%, transparent 55%), linear-gradient(135deg, var(--fill-deep) 0%, #141A66 100%); }