/* SoftSTM's look, from the design canvas: warm black staff ground, cream paper for the guest and the settings,
   saffron for the one main action, an age ramp of blue, orange and coral on the tickets, green for ready.
   Bricolage Grotesque for headings and table codes, Hanken Grotesk for body, Cairo for Arabic. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=Cairo:wght@400;600;700;800&display=swap');

:root {
  --ground: #17140F; --bar: #100E0A; --raised: #242017; --raised-2: #2A2419; --line-dark: #5A4E3A; --hair-dark: #2E281D;
  --paper: #F6EFE2; --card: #FFFAF0; --sand: #E9DDC3; --hair: #E5DAC4; --line: #8E8368; --line-soft: #CDBF9F; --line-paper: #DCCFB4; --line-dash: #BDB29B;
  --ink: #17140F; --muted: #6B5E48; --muted-dark: #B9AE98; --soft-dark: #DDD3BE;
  --saffron: #F2B233; --fresh: #6FA0F2; --fresh-ink: #3A5E9A; --fresh-pale: #8FB8FF; --warm: #FF8A3D; --warm-ink: #9A4300; --warm-pale: #FF9A5E;
  --late: #E4572E; --late-ink: #B33A17; --late-pale: #FF9A7A; --ready: #5FD08F; --ready-ground: #1D3A2B; --ready-line: #2F6B4B; --ready-pale: #9ADDB7; --ready-text: #CFEBDA; --ready-ink: #0B2216;
  --ok: #1E9E6A; --ok-ink: #0A6A45;
  --head: 'Bricolage Grotesque', 'Cairo', system-ui, sans-serif; --body: 'Hanken Grotesk', 'Cairo', system-ui, sans-serif;
  --r: 12px; --r-lg: 16px; --r-ctl: 10px; --r-pill: var(--r-ctl); /* one corner for every control */
}
html[dir="rtl"] { --head: 'Cairo', system-ui, sans-serif; --body: 'Cairo', system-ui, sans-serif; }
html[dir="rtl"] .caps { letter-spacing: 0; text-transform: none; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--body); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
body.dark { background: var(--ground); color: var(--paper); }
body.paper { background: var(--paper); color: var(--ink); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { opacity: .5; cursor: default; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--head); margin: 0; line-height: 1.1; }
.h-page { font-size: 30px; font-weight: 800; }
.h-card { font-size: 28px; font-weight: 800; }
.h-sm { font-size: 22px; font-weight: 800; }
.code { font-family: var(--head); font-weight: 800; }
.muted { color: var(--muted); }
.dark .muted { color: var(--muted-dark); }
.caps { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex-grow: 1; min-width: 0; }
.col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.num { font-variant-numeric: tabular-nums; }

/* buttons: the main action is saffron; the quiet ones are outlined on their ground */
.btn { height: 48px; padding: 0 20px; border-radius: var(--r-ctl); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn.main { background: var(--saffron); color: var(--ink); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.quiet { border: 1px solid var(--line-dark); color: var(--paper); background: transparent; }
.paper .btn.quiet { border-color: var(--line); color: var(--ink); }
.btn.ready { background: var(--ready); color: var(--ready-ink); }
.btn.late { border: 1px solid var(--late); color: var(--late-pale); background: transparent; }
.btn.sm { height: 44px; padding: 0 16px; font-size: 14px; }
.btn.xl { height: 60px; border-radius: var(--r-ctl); font-size: 16px; font-weight: 800; }
.btn.block { width: 100%; }
.pill { height: 44px; padding: 0 18px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; border: 1px solid var(--line); color: var(--ink); background: transparent; white-space: nowrap; }
.pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }
.dark .pill { border-color: var(--line-dark); color: var(--paper); }
.dark .pill.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.toggle { min-width: 76px; height: 44px; border-radius: var(--r-ctl); padding: 0 16px; font-size: 13px; font-weight: 800; background: #fff; color: var(--ink); border: 2px solid var(--line); }
.toggle.on { background: var(--ink); color: var(--saffron); border-color: var(--ink); }
.round { width: 44px; height: 44px; border-radius: var(--r-ctl); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; line-height: 1; }
.round.main { background: var(--saffron); color: var(--ink); }
.round.quiet { border: 1px solid var(--line); color: var(--ink); background: transparent; font-size: 22px; }

/* fields */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea { height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: #fff; padding: 0 12px; font-size: 15px; width: 100%; }
.field textarea { height: auto; min-height: 72px; padding: 10px 12px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--saffron); outline-offset: 1px; }
.search { height: 48px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--card); padding: 0 14px; font-size: 15px; width: 100%; }

/* cards and the docket: a cream ticket with a colour rule on top and asymmetric corners */
.card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 16px; }
.card.topped { border-top: 5px solid var(--ink); border-radius: 6px 6px 14px 14px; }
.docket { background: var(--paper); color: var(--ink); border-radius: 6px 6px 14px 14px; border-top: 6px solid var(--line-dark); padding: 14px 16px; }
.docket.fresh { border-top-color: var(--fresh); } .docket.warm { border-top-color: var(--warm); } .docket.late { border-top-color: var(--late); }
.docket .age { font-size: 15px; font-weight: 700; margin-top: 4px; }
.docket.fresh .age { color: var(--fresh-ink); } .docket.warm .age { color: var(--warm-ink); } .docket.late .age { color: var(--late-ink); }
.docket .note { font-size: 13px; color: var(--muted); font-weight: 400; }
.ready-card { background: var(--ready-ground); border: 2px solid var(--ready); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; color: var(--paper); }
.ready-card .when { font-size: 13px; font-weight: 700; color: var(--ready-pale); }
.ready-card .lines { font-size: 15px; line-height: 1.55; color: var(--ready-text); }

/* lists */
.hr { border-top: 1px solid var(--hair); }
.dark .hr { border-top-color: var(--hair-dark); }
.dash { border-top: 1px dashed var(--line-dash); }
.money-row { display: flex; justify-content: space-between; font-size: 15px; }
.money-row.small { font-size: 13px; color: var(--muted); }
.money-row.total { font-size: 20px; font-weight: 800; margin-top: 4px; }

/* the alert strip for a call from a table */
.alert { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--late); border-radius: var(--r); padding: 8px 14px; }
.alert .dot { width: 10px; height: 10px; border-radius: 5px; background: var(--late); flex-shrink: 0; }
.alert .what { flex-grow: 1; font-size: 15px; font-weight: 700; color: var(--late-pale); }
.banner { display: flex; align-items: center; gap: 14px; border-radius: var(--r); padding: 10px 16px; font-size: 15px; font-weight: 700; }
.banner.off { background: #3A2219; border: 1px solid var(--late); color: var(--late-pale); }
.banner.ok { background: var(--ready-ground); border: 1px solid var(--ready-line); color: var(--ready-text); }

/* the toast and the modal sheet */
.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: var(--paper); color: var(--ink); padding: 12px 18px; border-radius: var(--r); font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 50; max-width: 90vw; }
.dark .toast { background: var(--paper); }
.scrim { position: fixed; inset: 0; background: rgba(16,14,10,.6); display: flex; align-items: center; justify-content: center; z-index: 40; padding: 16px; }
.sheet { background: var(--card); color: var(--ink); border-radius: var(--r-lg); padding: 22px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.sheet.wide { width: min(960px, 100%); }
.sheet h2 { font-size: 24px; }
.sheet-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
/* a sheet is light on a dark screen: its quiet buttons and pills take ink, not paper (11 Oct 2026: the split sheet's Cash, Card and mode pills were nearly invisible) */
.sheet .btn.quiet, .sheet .pill { color: var(--ink); border-color: var(--line); background: transparent; }
.sheet .btn.late { background: var(--late); border-color: var(--late); color: #fff; }
.sheet .pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sheet .pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sheet .btn.quiet:hover, .sheet .pill:hover { border-color: var(--ink); }

/* the PIN pad */
.pin-dots { display: flex; justify-content: center; gap: 10px; margin: 8px 0 12px; }
.pin-dots span { width: 14px; height: 14px; border-radius: 7px; border: 2px solid var(--line); }
.pin-dots span.on { background: var(--ink); border-color: var(--ink); }
.pin-dots.bad span { background: var(--late); border-color: var(--late); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pad button { height: 64px; border-radius: var(--r-ctl); background: #fff; border: 1px solid var(--line-soft); font-size: 24px; font-weight: 700; color: var(--ink); }
.pad button.ghost { background: var(--sand); font-size: 15px; }
.pin-error { color: var(--late); font-weight: 700; text-align: center; min-height: 20px; font-size: 14px; }

/* status dot */
.dot { width: 10px; height: 10px; border-radius: 5px; display: inline-block; }
.dot.ok { background: var(--ready); } .dot.off { background: var(--late); }
@media (max-width: 880px) { .h-page { font-size: 24px; } }