/* =====================================================================================================
   Design system layer for the POS (loaded after css/tokens.css and css/style.css).
   The same tokens as every Gomok screen (gomok-supermarket app/css/tokens.css, names --ds-*), bound here to this POS's own
   colours (--panel, --text, --pink = the client's main colour, --violet = its second colour; Viola: burgundy + gold), so the
   shared pieces below look right in Night and Day. Also: no jumping (stable scrollbar gutter, tabular numbers, logos that keep
   their shape), a soft cross-fade between screens, and the memory bars of js/memory.js.
   Classes start with gk- (the same names as the company program, so pages look alike everywhere).
   ===================================================================================================== */
body {
  --ds-bg: var(--bg); --ds-surface: var(--panel); --ds-surface-2: var(--panel2); --ds-ink: var(--text); --ds-muted: var(--muted); --ds-line: var(--line);
  --ds-primary: var(--pink); --ds-primary-ink: #fff; --ds-accent: var(--violet); --ds-top: var(--panel3); --ds-top-ink: var(--text);
  --ds-success: var(--green); --ds-warn: var(--amber); --ds-danger: var(--red);
  --ds-primary-soft: color-mix(in srgb, var(--pink) 16%, var(--panel));
  --ds-focus: 0 0 0 3px color-mix(in srgb, var(--pink) 40%, transparent);
  --ds-hero: linear-gradient(135deg, color-mix(in srgb, var(--pink) 78%, #000), color-mix(in srgb, var(--pink) 45%, var(--violet)));
  font-family: var(--ds-font);
}

/* one focus ring, keyboard only */
:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.btn:focus-visible, .home-tile:focus-visible, .nav-btn:focus-visible { box-shadow: var(--ds-focus); }

/* shared pieces (same names as the company program) */
.gk-hero { position: relative; overflow: hidden; border-radius: var(--ds-r-xl); padding: var(--ds-s-5); color: #fff; background: var(--ds-hero); box-shadow: var(--ds-e-2), inset 0 1px 0 rgb(255 255 255 / .12); }
.gk-hero::after { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; height: 140%; background: radial-gradient(closest-side, rgb(255 255 255 / .14), transparent); pointer-events: none; }
.gk-hero > * { position: relative; z-index: 1; }
.gk-hero small { color: inherit; opacity: .8; font-size: var(--ds-fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.gk-hero b { display: block; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: var(--ds-fw-heavy); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gk-ic { display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; flex-shrink: 0; border-radius: var(--ds-r-md); font-size: 1.1rem; line-height: 1;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c, var(--ds-primary)) 14%, var(--ds-surface)), color-mix(in srgb, var(--c, var(--ds-primary)) 30%, var(--ds-surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--ds-primary)) 22%, transparent); }
.gk-ic.sm { width: 1.9em; height: 1.9em; border-radius: var(--ds-r-sm); font-size: .95rem; }
.gk-sec { display: flex; align-items: center; gap: var(--ds-s-2); margin: var(--ds-s-5) 0 var(--ds-s-3); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-heavy); text-transform: uppercase; letter-spacing: .09em; color: var(--ds-muted); }
.gk-sec::before { content: ""; width: 4px; height: 1.1em; border-radius: var(--ds-r-pill); background: linear-gradient(180deg, var(--ds-primary), var(--ds-accent)); }
.gk-sec::after { content: ""; flex: 1; height: 1px; background: var(--ds-line); }
.gk-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); padding: var(--ds-s-4); box-shadow: var(--ds-e-1); }
.gk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); background: var(--ds-surface-2); color: var(--ds-muted); }
.skel, .gk-skel { position: relative; overflow: hidden; border-radius: var(--ds-r-sm); background: var(--ds-surface-2); color: transparent !important; }
.skel::after, .gk-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .08), transparent); animation: ds-shimmer 1.3s infinite; }
@keyframes ds-shimmer { to { transform: translateX(100%); } }
/* KPI boxes: a thin colour line on top (decoration only — nothing moves) */
.kpi { position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c, var(--ds-primary)), transparent); opacity: .7; pointer-events: none; }
.kpi.neg { --c: var(--ds-danger); } .kpi.pos { --c: var(--ds-success); }

/* no jumping, no distortion */
html { scrollbar-gutter: stable; }
.main, .nav { scrollbar-gutter: stable; }
.kpi b, .badge, .tot, .pill, .grid-table td, .line-total, .price { font-variant-numeric: tabular-nums; }
.brand .logo, .login-logo, img.logo { object-fit: contain; }
.nav-btn .badge { pointer-events: none; }
/* a soft cross-fade when the screen changes (js/memory.js adds .gk-in on the new screen only — renders of the same screen do not flash) */
.main.gk-in > * { animation: gk-in var(--ds-dur-2) var(--ds-ease); }
@keyframes gk-in { from { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .main.gk-in > *, .skel::after, .gk-skel::after, .mem-bar { animation: none !important; } }

/* memory (js/memory.js) */
.mem-bar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; width: min(620px, calc(100% - 24px));
  display: flex; align-items: center; gap: var(--ds-s-3); padding: var(--ds-s-3) var(--ds-s-3) var(--ds-s-3) var(--ds-s-4); border-radius: var(--ds-r-lg);
  color: #fff; background: var(--ds-hero); box-shadow: 0 30px 80px -10px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .12); animation: mem-in var(--ds-dur-3) var(--ds-ease-out); }
.mem-bar .mem-tx { flex: 1; min-width: 0; line-height: 1.3; } .mem-bar .mem-tx b { display: block; } .mem-bar small { color: inherit; opacity: .85; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-bar .btn.primary { background: #fff; color: #111; }
.mem-bar .mem-x { background: rgb(255 255 255 / .16); border: 0; color: inherit; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
@keyframes mem-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 520px) { .mem-bar { flex-wrap: wrap; } .mem-bar .mem-tx { flex-basis: calc(100% - 50px); } .mem-bar .btn { flex: 1; } }
.mem-draft { display: flex; align-items: center; gap: var(--ds-s-2); flex-wrap: wrap; margin: 0 0 var(--ds-s-3); padding: var(--ds-s-2) var(--ds-s-3); border-radius: var(--ds-r-md);
  background: color-mix(in srgb, var(--cyan) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }
.mem-draft .mem-yes { background: var(--ds-primary); color: var(--ds-primary-ink, #fff); border-color: transparent; }
.mem-draft span { flex: 1; min-width: 160px; font-size: var(--ds-fs-sm); }
.mem-set { display: grid; gap: var(--ds-s-2); }
.mem-tog { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 10px 12px; border-radius: var(--ds-r-md); border: 1px solid var(--line); background: var(--panel2); }
.mem-tog i { width: 40px; height: 24px; border-radius: 999px; background: var(--line); position: relative; flex-shrink: 0; transition: background var(--ds-dur-1); }
.mem-tog i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left var(--ds-dur-1); }
.mem-tog.on i { background: var(--pink); } .mem-tog.on i::after { left: 19px; }