/* RK Xerox Shops design system — tokens and shared components.
   Ported from the Claude Design handoff (RK Xerox Shops UI.dc.html). */

/* ponytail: fonts load from Google's CDN like the prototype did. Self-host
   Lora + DM Sans when the shop PCs start running on flaky counter wifi. */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --teal:#123c39; --gold:#c9a24b;
  --bg:#f6f1e7; --card:#fff; --screen:#fffdf8; --warm:#fbf6ea;
  --border:#eee1c8; --hair:#f5f0e4; --hair2:#f0e9d8;
  --ink:#1c1c1a; --body:#4a463c; --muted:#6b6357; --faint:#8a8172; --fainter:#a39a86;
  --ok:#3f8a5c; --warn:#a8781f; --warn2:#b5722a;
  --warn-bg:#fff8ea; --warn-border:#efd9a0; --warn-ink:#6b5320;
  --bad:#b23b3b; --bad-deep:#8a2e2e;
  --on-teal:#e7e1d2; --hint-teal:#a9c2be;
  --shadow-card:0 12px 28px rgba(18,60,57,.06);
  --serif:'Lora',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); }
a { color:var(--teal); }
a:hover { color:var(--gold); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#d8cdb4; border-radius:8px; }

.hidden { display:none !important; }
.serif { font-family:var(--serif); }

/* ---------- app chrome (desktop roles) ---------- */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px;
          padding:18px 32px; background:var(--teal); flex-wrap:wrap; }
.brand { display:flex; align-items:baseline; gap:10px; }
.brand b { font-family:var(--serif); font-weight:700; font-size:22px; color:var(--bg); }
.brand span { font-size:13px; color:var(--gold); letter-spacing:.04em; }
.page { max-width:1360px; margin:0 auto; padding:36px 32px 80px; }
h1.title { font-family:var(--serif); font-size:28px; margin:0 0 4px; color:var(--teal); font-weight:600; }
.subtitle { font-size:13.5px; color:var(--muted); margin:0; }

/* ---------- cards / stats ---------- */
.card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; }
.card.pad0 { padding:0; overflow:hidden; border-radius:16px; }
.card-head { padding:16px 20px; border-bottom:1px solid var(--hair2);
             display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.card-head b { font-weight:600; font-size:14px; color:var(--teal); }
.card-head span { font-size:11.5px; color:var(--faint); }

.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px) { .grid-3, .grid-4 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .grid-3, .grid-4 { grid-template-columns:1fr; } }

.stat .label { font-size:12px; color:var(--faint); }
.stat .value { font-family:var(--serif); font-size:26px; font-weight:600; color:var(--teal); margin-top:4px; }
.stat .delta { font-size:11.5px; margin-top:2px; color:var(--faint); }
.stat .delta.up { color:var(--ok); }
.stat.alert { background:var(--warn-bg); border-color:var(--warn-border); }
.stat.alert .label { color:var(--warn); }
.stat.alert .body { font-size:13px; color:var(--warn-ink); margin-top:6px; line-height:1.5; }

/* ---------- buttons / pills ---------- */
button, .btn { font:inherit; border:0; border-radius:10px; cursor:pointer; }
.btn-solid { background:var(--teal); color:#fff; font-size:12px; font-weight:600;
             padding:7px 13px; border-radius:8px; white-space:nowrap; }
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--body);
             font-size:12px; font-weight:600; padding:7px 13px; border-radius:8px; white-space:nowrap; }
.btn-gold { background:var(--gold); color:var(--teal); font-weight:700; font-size:13.5px;
            padding:11px 26px; border-radius:10px; }
.btn-cta { display:block; width:100%; text-align:center; padding:13px; border-radius:12px;
           background:var(--gold); color:var(--teal); font-weight:700; font-size:14px; }
.btn-cta:disabled { opacity:.45; cursor:default; }
.btn-solid:hover, .btn-gold:hover, .btn-cta:hover:enabled { filter:brightness(.94); }
.btn-ghost:hover { background:var(--warm); }
button, .btn, .pill, .seg { transition:background .15s, color .15s; }

.pill { display:inline-block; font-size:11.5px; font-weight:600; padding:5px 11px;
        border-radius:999px; white-space:nowrap; }

/* ---------- forms ---------- */
.field { display:block; }
.field > span { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.field input, .field select, .field textarea {
  width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--card);
  border:1.5px solid var(--border); border-radius:10px; padding:11px 14px; }
.field input:focus, .field select:focus { outline:0; background:var(--warm); border-color:var(--gold); }
.field .hint { font-size:11.5px; color:var(--faint); margin-top:4px; }
.fields { display:flex; flex-direction:column; gap:14px; }
.frow { display:flex; gap:12px; }
.frow > * { flex:1; min-width:0; }

/* Two-up segmented choice — colour/B&W, all pages/range, Windows/Pi. */
.seg { flex:1; text-align:center; padding:9px 6px; border-radius:10px; font-size:11.5px;
       cursor:pointer; white-space:nowrap; background:var(--card); color:var(--body);
       border:1px solid var(--border); font-weight:400; }
.seg.on { background:var(--teal); color:#fff; border-color:var(--teal); font-weight:600; }
.segs { display:flex; gap:8px; }

.switch { width:42px; height:24px; border-radius:999px; padding:3px; flex:none;
          display:flex; justify-content:flex-start; background:#d8cdb4; cursor:pointer; }
.switch.on { justify-content:flex-end; background:var(--teal); }
.switch.on.green { background:var(--ok); }
.switch.off-limits { opacity:.55; cursor:not-allowed; background:#ebe4d4; }
.switch i { display:block; width:18px; height:18px; border-radius:50%; background:#fff;
            box-shadow:0 1px 3px rgba(0,0,0,.25); }

/* Mobile-number and password inputs. Shared by the shop keeper sign-in and the
   super admin's Manage modal, which ask for the same things. */
.mobilebox, .passbox { display:flex; align-items:center; gap:9px; background:var(--card);
                       border:1.5px solid var(--border); border-radius:11px; padding:11px 14px; }
.mobilebox.bad, .passbox.bad { border-color:var(--bad); }
.mobilebox:focus-within, .passbox:focus-within { border-color:var(--gold); background:var(--warm); }
.mobilebox .cc { font-size:14px; font-weight:600; color:var(--faint); }
.mobilebox i { width:1px; height:18px; background:var(--border); display:block; }
.mobilebox input, .passbox input { flex:1; min-width:0; border:0; outline:0; background:transparent;
                                   font:inherit; font-size:15px; color:var(--ink); }
.mobilebox input { font-weight:600; letter-spacing:.04em; }
.linkish { font-size:12px; font-weight:600; color:var(--teal); cursor:pointer; user-select:none; }
.linkish:hover { color:var(--gold); }
.checkrow { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;
            font-size:12.5px; color:var(--body); }
.checkbox { width:18px; height:18px; flex:none; border-radius:5px; border:1.5px solid var(--border);
            display:flex; align-items:center; justify-content:center; font-size:12px;
            font-weight:700; color:#fff; }
.checkbox.on { background:var(--teal); border-color:var(--teal); }

/* ---------- banners ---------- */
.banner { border-radius:12px; padding:14px 18px; margin-bottom:20px; display:flex;
          gap:10px; align-items:center; font-size:13.5px; }
.banner.stop { background:var(--bad-deep); color:#fff; }
.banner.warn { background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn-ink); }

/* ---------- tables / rows ---------- */
.trow { padding:13px 20px; border-bottom:1px solid var(--hair); }
.trow:hover { background:var(--warm); }
.thead { padding:10px 20px; font-size:11px; color:var(--faint); text-transform:uppercase;
         letter-spacing:.04em; border-bottom:1px solid var(--hair); }
.empty { text-align:center; color:var(--faint); padding:40px 20px; font-size:13.5px; }

/* Order token, shown identically on the customer's phone and the shop's queue. */
.ordchip { width:46px; height:36px; border-radius:8px; background:var(--teal); flex:none;
           display:flex; align-items:center; justify-content:center;
           font-family:var(--serif); font-size:14px; font-weight:700; color:var(--gold); }