/* Lecker Asia — staff reservations dashboard.
   iPad-first host-stand tool. 8px grid, high-contrast, calm.

   REBRAND: this dashboard now wears the Lecker Asia website's design system
   (leckerasia-preview.pages.dev) so the two read as one brand. Ported verbatim
   from that site: the self-hosted Zilla Slab type family, the monochrome
   white/black palette, hairline #ddd rules, square corners, and the black
   "Lecker Asia" wordmark. Everything reads as the restaurant's site.

   Where brand and floor-utility conflict, utility wins (the site's house rule
   inverted for a working tool): the reservation STATUS colours (confirm green,
   seat amber, new blue, cancel grey, error red) are kept — they are the only
   colour on an otherwise monochrome page, which is exactly what makes a booking's
   state readable across a busy floor at a glance. Touch targets stay >=44px
   (primary actions 56px). Zero external requests (fonts are self-hosted). */

/* ---- self-hosted fonts, copied from the Lecker Asia site (fonts/) -------- */
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/zilla-slab-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/zilla-slab-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Zilla Slab';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/zilla-slab-700.woff2) format('woff2');
}

:root {
  /* spacing — everything snaps to 8 */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;

  /* surfaces — ported from the site: white page, faint tint, hairline rules */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f2ec;
  --ink: #000000;
  --ink-2: #555555;
  --ink-3: #8a8a8a;
  --line: #dddddd;
  --line-strong: #c9c9c9;

  /* the site has NO accent: interactive/brand elements are ink (black). */
  --accent: #000000;
  --accent-press: #333333;
  --on-accent: #ffffff;

  /* status hues (text / soft bg / hairline) — KEPT for floor legibility.
     These are the only colour on the page; they make a booking's state pop. */
  --new-ink: #1f5aa8;     --new-bg: #eef4fb;   --new-line: #cfe0f5;
  --conf-ink: #1f6f5c;    --conf-bg: #e6f1ec;  --conf-line: #c4e2d5;
  --seat-ink: #9a5a00;    --seat-bg: #fbefd8;  --seat-line: #f0dcae;
  --canc-ink: #7a7d78;    --canc-bg: #f0efeb;  --canc-line: #ddd9d0;
  --proc-ink: #6b6f79;    --proc-bg: #eeeef1;  --proc-line: #dddde2;
  --err-ink:  #a83232;    --err-bg:  #fbe9e9;  --err-line: #f2cccc;

  /* square corners, to match the site (which is strictly border-radius: 0) */
  --radius: 2px;
  --radius-sm: 2px;
  --font: "Zilla Slab", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; }

.wrap {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* ---------- top bar ---------- */
/* Solid white with a hairline bottom rule, mirroring the site header (no blur,
   no translucency). Still sticky — useful on a scrolling floor tool. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar__row {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 72px; padding-block: var(--s2);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand__mark {
  width: 40px; height: 40px; border-radius: 2px; flex: none;
  background: var(--ink); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 700; letter-spacing: .5px;
  font-size: 16px;
}
/* the wordmark: Zilla Slab 700, exactly the site's "Lecker Asia" brand type */
.brand__name { font-weight: 700; font-size: 22px; letter-spacing: -.01em; line-height: 1.05; }
.brand__sub { font-size: 13px; color: var(--ink-2); font-weight: 500; margin-top: 1px; }

.livedot {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-2); font-weight: 600; white-space: nowrap;
}
.livedot i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--conf-ink);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--conf-ink) 60%, transparent);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--conf-ink) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .livedot i { animation: none; } }

.btn {
  appearance: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font-weight: 600; font-size: 15px;
  border-radius: var(--radius-sm); padding: 10px 16px; min-height: 44px;
  cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .04s ease;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- day nav ---------- */
.daynav { display: flex; align-items: center; gap: var(--s2); padding-block: var(--s2); flex-wrap: wrap; }
.dayjump { display: flex; align-items: center; gap: 8px; }
.dayjump__btn {
  width: 48px; height: 48px; border-radius: 2px; font-size: 22px; line-height: 1;
  display: grid; place-items: center; padding: 0;
}
.daylabel { min-width: 168px; }
.daylabel__day { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.daylabel__date { font-size: 13px; color: var(--ink-2); font-weight: 500; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.chip {
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 2px; padding: 9px 15px; min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.chip:hover { background: var(--surface-2); }
/* selected filter = inverted black, matching the site's inverted button style */
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip__count {
  font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2); min-width: 22px; text-align: center;
}
.chip[aria-pressed="true"] .chip__count { background: rgba(255,255,255,.22); color: #fff; }

/* quick upcoming-day pills */
.dayrail { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 var(--s2); scrollbar-width: thin; }
.daypill {
  flex: none; border: 1px solid var(--line); background: var(--surface);
  border-radius: 2px; padding: 8px 14px; min-height: 56px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 84px;
}
.daypill:hover { border-color: var(--line-strong); }
/* selected day = black hairline + faint tint, monochrome (no accent) */
.daypill[aria-pressed="true"] { border-color: var(--ink); background: var(--surface-2); }
.daypill__dow { font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.daypill__num { font-size: 18px; font-weight: 700; }
.daypill__count { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.daypill[aria-pressed="true"] .daypill__dow,
.daypill[aria-pressed="true"] .daypill__num,
.daypill[aria-pressed="true"] .daypill__count { color: var(--ink); }

/* ---------- demo banner ---------- */
.demobar {
  background: repeating-linear-gradient(45deg, #fbefd8, #fbefd8 12px, #f7e8c8 12px, #f7e8c8 24px);
  color: #7a4b00; border: 1px solid var(--seat-line);
  border-radius: 2px; padding: 10px 16px; margin-top: var(--s2);
  font-size: 14px; font-weight: 600; text-align: center;
}

/* ---------- card grid ---------- */
.board { padding-block: var(--s3) var(--s6); }
.section__head { display: flex; align-items: baseline; gap: 10px; margin: var(--s3) 0 var(--s2); }
.section__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.section__rule { flex: 1; height: 1px; background: var(--line); }

.grid {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  align-items: start;
}

/* Cards: hairline border, no drop shadow — the site leans on rules, not shadow.
   Left status stripe kept as the fast colour cue for a booking's state. */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2);
  display: flex; flex-direction: column; gap: var(--s2);
  border-left: 4px solid var(--line-strong);
}
.card[data-floor="confirmed"] { border-left-color: var(--conf-ink); }
.card[data-floor="seated"]    { border-left-color: var(--seat-ink); }
.card[data-floor="cancelled"] { border-left-color: var(--canc-line); opacity: .72; }
.card[data-floor="new"]       { border-left-color: var(--new-ink); }

.card__top { display: flex; align-items: flex-start; gap: var(--s2); }
.card__time { display: flex; flex-direction: column; gap: 2px; }
.card__time b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.card__time small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.card__party {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 2px; padding: 6px 13px; font-weight: 700; font-size: 16px; white-space: nowrap;
}
.card__party svg { width: 17px; height: 17px; opacity: .6; }

.card__name { font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.card__name.is-missing { color: var(--ink-3); font-style: italic; font-weight: 600; }

.meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; color: var(--ink-2); }
/* links: black + underline, exactly the site's link treatment (no accent hue) */
.meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.meta a:hover { color: var(--ink-2); }
.meta__item { display: inline-flex; align-items: center; gap: 6px; }
.meta__item svg { width: 15px; height: 15px; opacity: .55; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 2px;
  border: 1px solid transparent; text-transform: uppercase; letter-spacing: .03em;
}
.badge--phone { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.badge--web   { background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.badge svg { width: 13px; height: 13px; }

.note {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 14px; color: var(--ink); line-height: 1.45;
}
.note b { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); display: block; margin-bottom: 3px; }
.note--flag { background: #fdf4e7; border-color: var(--seat-line); }
.note--flag b { color: var(--seat-ink); }

/* status pill + actions */
.statusrow { display: flex; align-items: center; gap: 10px; }
.pill {
  font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 2px;
  border: 1px solid transparent; text-transform: uppercase; letter-spacing: .04em;
}
.pill--new  { color: var(--new-ink); background: var(--new-bg); border-color: var(--new-line); }
.pill--confirmed { color: var(--conf-ink); background: var(--conf-bg); border-color: var(--conf-line); }
.pill--seated { color: var(--seat-ink); background: var(--seat-bg); border-color: var(--seat-line); }
.pill--cancelled { color: var(--canc-ink); background: var(--canc-bg); border-color: var(--canc-line); }
.pill--processing { color: var(--proc-ink); background: var(--proc-bg); border-color: var(--proc-line); }
.pill--awaiting { color: var(--seat-ink); background: var(--seat-bg); border-color: var(--seat-line); }
.pill--error { color: var(--err-ink); background: var(--err-bg); border-color: var(--err-line); }

.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 2px; }
.act {
  appearance: none; border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font-weight: 700; font-size: 15px; border-radius: 2px;
  min-height: 56px; padding: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s ease, border-color .12s ease, transform .04s ease, color .12s ease;
}
.act svg { width: 18px; height: 18px; }
.act:active { transform: translateY(1px); }
.act:hover { background: var(--surface-2); }
/* pressed states keep their status colour — the point of the tool */
.act[aria-pressed="true"][data-act="confirmed"] { background: var(--conf-ink); border-color: var(--conf-ink); color: #fff; }
.act[aria-pressed="true"][data-act="seated"]    { background: var(--seat-ink); border-color: var(--seat-ink); color: #fff; }
.act[aria-pressed="true"][data-act="cancelled"] { background: var(--canc-ink); border-color: var(--canc-ink); color: #fff; }
.act:disabled { opacity: .5; cursor: default; }

.card--processing { border-left-color: var(--proc-line); }
.processing-hint { font-size: 13px; color: var(--ink-3); font-weight: 600; }

/* ---------- states (empty / loading / error) ---------- */
.state {
  text-align: center; padding: clamp(48px, 12vh, 96px) var(--s3);
  max-width: 480px; margin-inline: auto;
}
.state svg { width: 56px; height: 56px; color: var(--ink-3); margin-bottom: var(--s2); }
.state h2 { font-size: 24px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.state p { font-size: 15px; color: var(--ink-2); margin: 0 auto; max-width: 42ch; }
.state .btn { margin-top: var(--s3); }
.state--error svg { color: var(--err-ink); }

.spinner {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto var(--s2);
  border: 3px solid var(--line); border-top-color: var(--ink); animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.hidden { display: none !important; }

/* ---------- login ---------- */
/* Reads as the Lecker Asia site: white hairline card (no heavy shadow), black
   "LA" wordmark mark, Zilla Slab headings, black submit button (the site's own
   inverted-button style). */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--s3); }
.login {
  width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(28px, 5vw, 40px);
}
.login__mark {
  width: 60px; height: 60px; border-radius: 2px; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 22px; margin-bottom: var(--s3);
  letter-spacing: .5px;
}
.login h1 { font-size: 30px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.login p { font-size: 15px; color: var(--ink-2); margin: 0 0 var(--s3); line-height: 1.5; }
.login label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
.login input {
  width: 100%; font-size: 17px; padding: 14px 16px; min-height: 56px;
  border: 1px solid var(--ink); border-radius: 2px; background: var(--surface);
  color: var(--ink); font-family: inherit;
}
.login input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.login__submit {
  width: 100%; margin-top: var(--s2); min-height: 56px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; font-weight: 700; font-size: 17px;
  border-radius: 2px; cursor: pointer; transition: opacity .15s ease;
}
.login__submit:hover { opacity: .82; }
.login__submit:disabled { opacity: .6; cursor: default; }
.login__err { margin-top: var(--s2); font-size: 14px; color: var(--err-ink); font-weight: 600; min-height: 20px; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }