/* Old POS — Colour themes (v12.3.0). Loaded after every other stylesheet.
   Default = "Classic" (no attribute, the blue look). Other themes set <html data-skin="…">; light / dark mode still works on top of each one.
   Everything in the app reads --primary / --primary2 / --psoft / --ptext / --grad / --ring, so changing them re-colours the whole software. */

html[data-skin="emerald"]{--primary:#059669;--primary2:#10b981;--psoft:#e6f7f0;--ptext:#065f46;--bg:#f1f8f5;--info:#059669;--infosoft:#e6f7f0;--sk-deep:#047857;--sk-rgb:5,150,105;
  --grad:linear-gradient(135deg,#10b981 0%,#047857 100%);--ring:rgba(5,150,105,.30);--shadow-lg:0 14px 32px -14px rgba(5,150,105,.45)}
html.dark[data-skin="emerald"]{--primary:#10b981;--primary2:#34d399;--psoft:#0f2f27;--ptext:#a7f3d0;--bg:#0a1512;--info:#34d399;--infosoft:#0f2f27;--sk-deep:#059669;
  --grad:linear-gradient(135deg,#10b981 0%,#059669 100%);--ring:rgba(5,150,105,.45)}
html[data-skin="ocean"]{--primary:#0891b2;--primary2:#06b6d4;--psoft:#e2f5fa;--ptext:#155e75;--bg:#f0f7fa;--info:#0891b2;--infosoft:#e2f5fa;--sk-deep:#0e7490;--sk-rgb:8,145,178;
  --grad:linear-gradient(135deg,#06b6d4 0%,#0e7490 100%);--ring:rgba(8,145,178,.30);--shadow-lg:0 14px 32px -14px rgba(8,145,178,.45)}
html.dark[data-skin="ocean"]{--primary:#06b6d4;--primary2:#22d3ee;--psoft:#0e2f3a;--ptext:#a5f3fc;--bg:#09151b;--info:#22d3ee;--infosoft:#0e2f3a;--sk-deep:#0891b2;
  --grad:linear-gradient(135deg,#06b6d4 0%,#0891b2 100%);--ring:rgba(8,145,178,.45)}
html[data-skin="sunset"]{--primary:#ea580c;--primary2:#f97316;--psoft:#fff0e5;--ptext:#9a3412;--bg:#fbf6f2;--info:#ea580c;--infosoft:#fff0e5;--sk-deep:#c2410c;--sk-rgb:234,88,12;
  --grad:linear-gradient(135deg,#f97316 0%,#c2410c 100%);--ring:rgba(234,88,12,.30);--shadow-lg:0 14px 32px -14px rgba(234,88,12,.45)}
html.dark[data-skin="sunset"]{--primary:#f97316;--primary2:#fb923c;--psoft:#3a1d0e;--ptext:#fed7aa;--bg:#170f0a;--info:#fb923c;--infosoft:#3a1d0e;--sk-deep:#ea580c;
  --grad:linear-gradient(135deg,#f97316 0%,#ea580c 100%);--ring:rgba(234,88,12,.45)}
html[data-skin="royal"]{--primary:#7c3aed;--primary2:#8b5cf6;--psoft:#f0eaff;--ptext:#5b21b6;--bg:#f6f4fb;--info:#7c3aed;--infosoft:#f0eaff;--sk-deep:#6d28d9;--sk-rgb:124,58,237;
  --grad:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);--ring:rgba(124,58,237,.30);--shadow-lg:0 14px 32px -14px rgba(124,58,237,.45)}
html.dark[data-skin="royal"]{--primary:#8b5cf6;--primary2:#a78bfa;--psoft:#241b4a;--ptext:#ddd6fe;--bg:#100d1c;--info:#a78bfa;--infosoft:#241b4a;--sk-deep:#7c3aed;
  --grad:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);--ring:rgba(124,58,237,.45)}
html[data-skin="rose"]{--primary:#e11d48;--primary2:#f43f5e;--psoft:#ffebef;--ptext:#9f1239;--bg:#fbf4f5;--info:#e11d48;--infosoft:#ffebef;--sk-deep:#be123c;--sk-rgb:225,29,72;
  --grad:linear-gradient(135deg,#f43f5e 0%,#be123c 100%);--ring:rgba(225,29,72,.30);--shadow-lg:0 14px 32px -14px rgba(225,29,72,.45)}
html.dark[data-skin="rose"]{--primary:#f43f5e;--primary2:#fb7185;--psoft:#3b1420;--ptext:#fecdd3;--bg:#170c10;--info:#fb7185;--infosoft:#3b1420;--sk-deep:#e11d48;
  --grad:linear-gradient(135deg,#f43f5e 0%,#e11d48 100%);--ring:rgba(225,29,72,.45)}
html[data-skin="graphite"]{--primary:#334155;--primary2:#475569;--psoft:#eceff3;--ptext:#1e293b;--bg:#f4f5f7;--info:#334155;--infosoft:#eceff3;--sk-deep:#1e293b;--sk-rgb:51,65,85;
  --grad:linear-gradient(135deg,#475569 0%,#1e293b 100%);--ring:rgba(51,65,85,.30);--shadow-lg:0 14px 32px -14px rgba(51,65,85,.45)}
html.dark[data-skin="graphite"]{--primary:#94a3b8;--primary2:#cbd5e1;--psoft:#1e2635;--ptext:#e2e8f0;--bg:#0d1117;--info:#cbd5e1;--infosoft:#1e2635;--sk-deep:#334155;
  --grad:linear-gradient(135deg,#94a3b8 0%,#334155 100%);--ring:rgba(51,65,85,.45)}
/* Parts of the app that had the blue written in directly */
html[data-skin] .hero2{background:linear-gradient(135deg,var(--primary2) 0%,var(--primary) 50%,var(--sk-deep) 100%);box-shadow:0 18px 36px -18px rgba(var(--sk-rgb),.75)}
html[data-skin] .h2-sell,html[data-skin] .cb-count{color:var(--sk-deep)}
html[data-skin] body .bottom-nav .bn-scan,html[data-skin] .bottom-nav .bn-scan{background:linear-gradient(135deg,var(--primary2),var(--sk-deep));box-shadow:0 8px 18px -6px rgba(var(--sk-rgb),.55),0 0 0 5px var(--card)}
html[data-skin] body .btn-primary,html[data-skin] .btn-primary{background:var(--primary);box-shadow:0 6px 14px -8px rgba(var(--sk-rgb),.8)}
html[data-skin] .btn-primary:hover:not(:disabled){background:var(--sk-deep)}
html[data-skin] .cart-bar:not(.empty){background:var(--primary);box-shadow:0 10px 24px -10px rgba(var(--sk-rgb),.7)}
html[data-skin] .nav-link.active{background:var(--primary);box-shadow:0 10px 22px -10px rgba(var(--sk-rgb),.7)}
html[data-skin] .chip.on{background:var(--primary);box-shadow:0 6px 14px -6px rgba(var(--sk-rgb),.6)}
html[data-skin] .stat.hl{background:linear-gradient(135deg,var(--primary),var(--sk-deep))}
html[data-skin] .lp-strip{background:linear-gradient(135deg,var(--sk-deep),var(--primary) 70%,var(--sk-deep))}
html[data-skin] .lp-signin,html[data-skin] .lp-steps li span{background:var(--primary)}
html[data-skin] .lock{background:linear-gradient(160deg,var(--sk-deep),var(--primary))}
html[data-skin] ::selection{background:rgba(var(--sk-rgb),.22)}
html[data-skin] .welcome,html[data-skin] .lp-hero{background:radial-gradient(900px 520px at 85% -10%,rgba(var(--sk-rgb),.22),transparent 60%),radial-gradient(700px 420px at -10% 110%,rgba(var(--sk-rgb),.14),transparent 60%),var(--bg)}

/* ---------- theme picker (Settings → Appearance) ---------- */
.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.skin-card{position:relative;display:block;text-align:left;padding:8px;border-radius:16px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font:inherit;cursor:pointer;min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
.skin-card:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
.skin-card:active{transform:scale(.98)}
.skin-card.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.skin-card b{display:block;margin:8px 2px 0;font-size:13.5px;font-weight:600}
.skin-card small{display:block;margin:1px 2px 2px;font-size:11.5px;color:var(--muted)}
.skin-card .sk-tick{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;background:var(--sk-c,var(--primary));color:#fff;display:none;align-items:center;justify-content:center;font-size:10px}
.skin-card.on .sk-tick{display:flex}
.sk-prev{display:block;height:74px;border-radius:11px;overflow:hidden;background:var(--sk-bg,#f3f6fb);position:relative;border:1px solid rgba(0,0,0,.06)}
.sk-prev i{position:absolute;display:block}
.sk-prev .a{left:0;top:0;bottom:0;width:22%;background:var(--sk-c)}
.sk-prev .b{left:30%;top:10px;right:10px;height:22px;border-radius:7px;background:var(--sk-c);opacity:.92}
.sk-prev .c{left:30%;top:40px;width:28%;height:16px;border-radius:6px;background:var(--sk-w,#fff)}
.sk-prev .d{left:62%;top:40px;right:10px;height:16px;border-radius:6px;background:var(--sk-w,#fff)}
.sk-prev .e{left:30%;bottom:6px;width:40%;height:6px;border-radius:4px;background:var(--sk-c);opacity:.35}
.skin-card.dark-prev .sk-prev{--sk-bg:#0f1624;--sk-w:#1a2438}
.mode-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:13px;background:var(--hover);border:1px solid var(--border)}
.mode-seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:500;padding:9px 6px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.mode-seg button.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mode-seg button.on i{color:var(--primary)}