/* ==========================================================================
   app.css — the look of Resto, on top of Bootstrap 5.

   1. Design tokens (colours, type, spacing)
   2. Bootstrap overrides (buttons, forms, dropdowns use our tokens)
   3. Base + utilities
   4. App shell: sidebar, top bar, page head
   5. Components: panel, toolbar, stat tile, table, badges, avatar,
      empty state, side panel, toasts
   6. Login page
   8. Public website (web/home.html)
   9. Customer app (QR menu, cart, track)
  10. Service screens (floor, kitchen, waiter)
  12. Billing (bill, payments, register)
  13. Dashboard + reports
  14. Guest app (QR menu, dish details, cart, public menu)
  15. Dine in / Take away
  16. Delivery, rider, table bookings
  17. Separate bills at one table
  19. POS: the staff order screen + the floor's counter chips
  20. App feel on phones and tablets: the bottom bar, safe areas
  21. Cafe profile: tabs, Bill & print, Printers (direct print)
  22. Tables & QR: the order menu's and the view-only menu's QR
  23. Dashboard: period, right now, changes, wide charts
  24. Locations and roles: switcher, works-at boxes, roles table
  18. Small phones (under 375px)
  11. 80 mm thermal print
   7. Motion (kept last)

   Rule: use the tokens below, never a raw colour. One fixed light theme: no dark mode.
   ========================================================================== */

/* ============================== 1. Tokens ============================== */
:root {
  /* brand: one fixed red (#DA3831, the "Save" button red). No light / dark switching. */
  --brand-50: #fdeeed;
  --brand-100: #fad6d4;
  --brand-200: #f4aba7;
  --brand-300: #ee827c;
  --brand-400: #e65a53;
  --brand-500: #da3831;
  --brand-600: #c22c26;   /* red text and links on white (AA contrast) */
  --brand-700: #a3231e;
  --brand-solid: #da3831; /* buttons */
  --brand-solid-hover: #b92c26;
  --brand-rgb: 218, 56, 49; /* for soft shadows: rgba(var(--brand-rgb), 0.3) */

  /* meaning */
  --ok: #15803d;      --ok-bg: #e7f6ec;
  --warn: #a16207;    --warn-bg: #fdf4dc;
  --bad: #b42318;     --bad-bg: #fdeceb;
  --info: #0369a1;    --info-bg: #e3f2fb;    --info-dark: #075985;
  --violet: #6d28d9;  --violet-bg: #f0eafd;  --violet-dark: #5b21b6;

  /* the veg / non-veg marks */
  --veg: #15803d;
  --nonveg: #b42318;

  /* surfaces + text: warm neutrals */
  --bg: #f7f5f2;
  --surface: #ffffff;
  --surface-2: #fbfaf8;
  --surface-3: #f2efeb;
  --line: #ebe6df;
  --line-strong: #dcd4ca;
  --ink: #1d1a17;
  --ink-2: #5b544d;
  --ink-3: #8a8279;

  /* sidebar: the brand red, white text */
  --side-bg: #da3831;
  --side-bg-2: #c22c26;
  --side-ink: rgba(255, 255, 255, 0.86);
  --side-ink-strong: #ffffff;
  --side-hover: rgba(255, 255, 255, 0.12);
  --side-active: rgba(255, 255, 255, 0.2);
  --side-line: rgba(255, 255, 255, 0.18);

  /* type */
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Outfit", var(--font-body);
  --font-tile: "Poppins", var(--font-head); /* bold POS look on the floor's table tiles (staff pages load it) */

  /* shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-xs: 0 1px 2px rgba(29, 26, 23, 0.05);
  --shadow-sm: 0 2px 8px rgba(29, 26, 23, 0.05);
  --shadow-md: 0 8px 22px rgba(29, 26, 23, 0.08);
  --shadow-lg: 0 20px 44px rgba(29, 26, 23, 0.14);
  --ring: 0 0 0 3px rgba(var(--brand-rgb), 0.28);

  /* layout */
  --nav-w: 260px;
  --topbar-h: 58px;
  --gutter: clamp(16px, 2.4vw, 32px);
  --gap: clamp(14px, 1.8vw, 22px);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* hand our tokens to Bootstrap */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 0.9375rem;
  --bs-secondary-color: var(--ink-2);
  --bs-border-color: var(--line);
  --bs-link-color: var(--brand-600);
  --bs-link-color-rgb: 194, 44, 38;
  --bs-link-hover-color: var(--brand-700);
  --bs-link-hover-color-rgb: 163, 35, 30;
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 218, 56, 49;
  --bs-focus-ring-color: rgba(var(--brand-rgb), 0.28);
}


/* ======================== 2. Bootstrap overrides ======================== */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 10px;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 40px;
}
.btn-sm {
  --bs-btn-font-size: 0.8125rem;
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.7rem;
  min-height: 34px;
}
.btn-lg {
  --bs-btn-font-size: 1rem;
  min-height: 48px;
}
.btn-primary {
  --bs-btn-bg: var(--brand-solid);
  --bs-btn-border-color: var(--brand-solid);
  --bs-btn-hover-bg: var(--brand-solid-hover);
  --bs-btn-hover-border-color: var(--brand-solid-hover);
  --bs-btn-active-bg: var(--brand-solid-hover);
  --bs-btn-active-border-color: var(--brand-solid-hover);
  --bs-btn-disabled-bg: var(--brand-solid);
  --bs-btn-disabled-border-color: var(--brand-solid);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
  box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.25);
}
/* coloured action buttons (floor): blue for a delivery, violet for a table booking, like their chips */
.btn-delivery,
.btn-booking {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}
.btn-delivery {
  --bs-btn-bg: var(--info);
  --bs-btn-border-color: var(--info);
  --bs-btn-hover-bg: var(--info-dark);
  --bs-btn-hover-border-color: var(--info-dark);
  --bs-btn-active-bg: var(--info-dark);
  --bs-btn-active-border-color: var(--info-dark);
  --bs-btn-focus-shadow-rgb: 3, 105, 161;
  box-shadow: 0 4px 12px rgba(3, 105, 161, 0.25);
}
.btn-booking {
  --bs-btn-bg: var(--violet);
  --bs-btn-border-color: var(--violet);
  --bs-btn-hover-bg: var(--violet-dark);
  --bs-btn-hover-border-color: var(--violet-dark);
  --bs-btn-active-bg: var(--violet-dark);
  --bs-btn-active-border-color: var(--violet-dark);
  --bs-btn-focus-shadow-rgb: 109, 40, 217;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25);
}
.btn-light {
  --bs-btn-bg: var(--surface);
  --bs-btn-color: var(--ink-2);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-bg: var(--surface-3);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-border-color: var(--ink-3);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-border-color: var(--ink-3);
}
.btn-icon {
  width: 34px;
  padding: 0;
}

.form-control,
.form-select {
  min-height: 40px;
  font-size: 0.9rem;
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--line-strong);
  border-radius: 10px;
}
.form-control::placeholder {
  color: var(--ink-3);
}
.form-control:focus,
.form-select:focus {
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--surface-3);
  color: var(--ink-2);
}
.form-label {
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.form-text {
  font-size: 0.78rem;
  color: var(--ink-3);
}
.form-check-input:checked {
  background-color: var(--brand-solid);
  border-color: var(--brand-solid);
}
/* an on / off switch that is ON reads as "yes, active": green, not the brand red
   (red would look like a warning next to "In stock", "Table is in use" ...) */
.form-switch .form-check-input:checked {
  background-color: var(--ok);
  border-color: var(--ok);
}
.form-switch .form-check-input:focus {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.2);
}
.form-switch .form-check-label {
  padding-left: 4px;
}
.form-check-input:focus {
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}
.form-switch .form-check-input {
  width: 2.4em;
  height: 1.3em;
  margin-top: 0.1em;
}
.form-check-label {
  font-weight: 500;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-link-color: var(--ink-2);
  --bs-dropdown-link-hover-bg: var(--surface-3);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--brand-50);
  --bs-dropdown-link-active-color: var(--brand-600);
  --bs-dropdown-divider-bg: var(--line);
  padding: 0.4rem;
  box-shadow: var(--shadow-lg);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 500;
}
.dropdown-item i {
  font-size: 1.05rem;
}

.alert {
  border-radius: var(--r-md);
  font-size: 0.875rem;
}

/* ============================ 3. Base ============================ */
body {
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-head);
  letter-spacing: -0.01em;
  color: var(--ink);
}
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.tnum,
.data-table td {
  font-variant-numeric: tabular-nums;
}
.truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.min-w-0 {
  min-width: 0;
}
::selection {
  background: var(--brand-200);
  color: #1d1a17;
}

/* ============================ 4. App shell ============================ */
.app-shell {
  min-height: 100vh;
}
@media (min-width: 992px) {
  .app-shell {
    display: grid;
    grid-template-columns: var(--nav-w) minmax(0, 1fr);
  }
}
.app-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 20px var(--gutter) 40px;
}

/* ---- sidebar. Bootstrap's offcanvas-lg turns it into a drawer below 992px.
   It also makes the aside transparent on desktop, so the colour sits on
   .sidebar-inner instead. */
.app-sidebar {
  --bs-offcanvas-width: var(--nav-w);
  --bs-offcanvas-border-color: var(--side-line);
}
@media (min-width: 992px) {
  .app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1030;
  }
}
.sidebar-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  color: var(--side-ink);
  border-right: 1px solid var(--side-line);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--topbar-h);
  flex: 0 0 auto;
  padding: 0 18px;
  border-bottom: 1px solid var(--side-line);
}
.brand-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-300));
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), 0.4);
}
/* on the red sidebar the badge turns white, with a red icon */
.sidebar-brand .brand-mark {
  background: #fff;
  color: var(--brand-solid);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.brand-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--side-ink-strong);
}
.brand-text small {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--side-ink);
  opacity: 0.7;
}

.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--side-line) transparent;
}
.nav-section {
  padding: 18px 12px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--side-ink);
  opacity: 0.55;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: var(--side-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-item i {
  flex: 0 0 auto;
  width: 20px;
  font-size: 1.1rem;
  text-align: center;
}
.nav-item:hover {
  background: var(--side-hover);
  color: var(--side-ink-strong);
}
.nav-item:hover i {
  color: var(--side-ink-strong);
}
.nav-item.active {
  background: var(--side-active);
  color: var(--side-ink-strong);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 4px;
  height: 22px;
  border-radius: 0 4px 4px 0;
  background: #fff;
  transform: translateY(-50%);
}
.nav-item.active i {
  color: #fff;
}
.nav-item.is-soon {
  cursor: default;
  opacity: 0.45;
}
.nav-item.is-soon:hover {
  background: none;
  color: var(--side-ink);
}
.nav-item.is-soon:hover i {
  color: inherit;
}
.nav-soon {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid var(--side-line);
  border-radius: 999px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar-foot {
  flex: 0 0 auto;
  padding: 14px;
  border-top: 1px solid var(--side-line);
}
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--side-line);
}
.plan-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--side-ink-strong);
}
.plan-name i {
  color: #fff;
}
.plan-card small {
  font-size: 0.72rem;
}

/* ---- the folded menu (desktop): icons only, the name shows on hover.
   html.nav-collapsed is set by the button in the top bar (static/js/app.js). */
.icon-btn.nav-toggle {
  display: none; /* phones and tablets use the ☰ drawer */
}
@media (min-width: 992px) {
  .icon-btn.nav-toggle {
    display: grid;
  }
  .app-shell {
    transition: grid-template-columns 0.22s var(--ease);
  }
  .nav-collapsed {
    --nav-w: 76px;
  }
  .nav-collapsed .sidebar-brand {
    justify-content: center;
    padding: 0;
  }
  .nav-collapsed .brand-text,
  .nav-collapsed .nav-label,
  .nav-collapsed .nav-soon {
    display: none;
  }
  .nav-collapsed .sidebar-nav {
    padding: 8px 12px 16px;
    scrollbar-width: none;
  }
  /* a section title becomes a thin line between the groups */
  .nav-collapsed .nav-section {
    height: 1px;
    margin: 12px 8px;
    padding: 0;
    background: var(--side-line);
  }
  .nav-collapsed .nav-section span {
    display: none;
  }
  .nav-collapsed .nav-item {
    justify-content: center;
    padding: 0;
  }
  .nav-collapsed .nav-item i {
    width: auto;
    font-size: 1.2rem;
  }
  .nav-collapsed .sidebar-foot {
    padding: 14px 12px;
  }
  .nav-collapsed .plan-card {
    align-items: center;
    padding: 10px 0;
  }
}

/* ---- top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--topbar-h);
  padding: 0 var(--gutter);
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.topbar-title strong {
  font-family: var(--font-head);
  font-size: 0.98rem;
  font-weight: 600;
}
.topbar-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.icon-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font-size: 1.2rem;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-btn:hover {
  background: var(--surface-3);
  color: var(--ink);
}

/* ---- the bell: new orders (orders/_notification_bell.html) */
.notify-btn {
  position: relative;
}
.notify-btn.has-new {
  color: var(--brand-solid);
}
.notify-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--brand-solid);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.notify-menu {
  width: min(360px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
}
.notify-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.notify-head-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-solid);
  font-size: 0.75rem;
  text-align: center;
}
.notify-read-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--brand-solid);
  font-size: 0.8rem;
  font-weight: 600;
}
.notify-read-all:hover {
  background: var(--brand-50);
}
.notify-list {
  max-height: min(420px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.notify-item {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  color: var(--ink);
}
.notify-item:hover {
  background: var(--surface-2);
}
.notify-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-solid);
  font-size: 1rem;
}
.notify-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.notify-text strong {
  font-size: 0.875rem;
}
.notify-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.notify-text .notify-time {
  color: var(--ink-3);
}
.notify-tag {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-solid);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
}
.notify-empty,
.notify-more {
  margin: 0;
  padding: 18px 14px;
  font-size: 0.85rem;
  color: var(--ink-3);
  text-align: center;
}
.notify-empty i {
  color: var(--brand-solid);
}
.notify-more {
  padding: 10px 14px;
  font-size: 0.78rem;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 3px 8px 3px 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.user-chip:hover,
.user-chip[aria-expanded="true"] {
  background: var(--surface-3);
  border-color: var(--line);
}
.user-chip-text {
  flex-direction: column;
  line-height: 1.15;
}
.user-chip-text strong {
  font-size: 0.82rem;
  font-weight: 600;
}
.user-chip-text small {
  font-size: 0.7rem;
  color: var(--ink-3);
}
.user-chip-caret {
  font-size: 0.75rem;
  color: var(--ink-3);
}
.user-menu {
  min-width: 250px;
}
.user-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 6px;
}
.user-menu-head strong {
  font-size: 0.9rem;
}
.user-menu-head small {
  font-size: 0.75rem;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.user-menu form {
  margin: 0;
}
/* the membership, under Cafe profile / Staff */
.user-menu-plan {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 4px 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--brand-50);
}
.user-menu-plan > i {
  color: var(--brand-600);
  font-size: 1.05rem;
}
.user-menu-plan div {
  display: grid;
}
.user-menu-plan strong {
  font-size: 0.85rem;
}
.user-menu-plan small {
  font-size: 0.75rem;
  color: var(--ink-2);
}

/* ---- membership type (core/plans.py): the Only Menu note in the sidebar, the bills warning */
.sidebar-upgrade {
  display: grid;
  gap: 2px;
  margin: 18px 4px 0;
  padding: 12px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.14);
  color: var(--side-ink-strong);
  font-size: 0.78rem;
  line-height: 1.4;
}
.sidebar-upgrade i {
  font-size: 1.1rem;
}
.sidebar-upgrade span {
  color: var(--side-ink);
}
.nav-collapsed .sidebar-upgrade {
  display: none;
}
.plan-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.plan-alert > i {
  font-size: 1.2rem;
  line-height: 1.3;
}
.plan-alert div {
  display: grid;
  gap: 2px;
}

/* ---- page head */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
}
.page-head-text {
  min-width: 0;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-3);
}
.crumbs a {
  color: var(--brand-600);
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
}
.page-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}
.page-sub {
  margin: 2px 0 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-actions:empty {
  display: none;
}
@media (max-width: 575.98px) {
  .page-actions {
    width: 100%;
  }
  .page-actions .btn {
    flex: 1 1 auto;
  }
}

/* ============================ 5. Components ============================ */

/* ---- panel: the white card everything sits on */
.panel {
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
}
.panel-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
}
.panel-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.panel-body {
  padding: 0 20px 20px;
}
.panel-foot {
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 0.8rem;
  color: var(--ink-3);
}

/* main content + side column, one column when narrow */
.split-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (max-width: 1099.98px) {
  .split-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- toolbar above a table: search + filters */
.panel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.search-box {
  position: relative;
  flex: 1 1 220px;
  max-width: 340px;
}
.search-box i {
  position: absolute;
  top: 50%;
  left: 13px;
  color: var(--ink-3);
  transform: translateY(-50%);
  pointer-events: none;
}
.search-box .form-control {
  padding-left: 38px;
  border-color: transparent;
  border-radius: 999px;
  background-color: var(--surface-3);
}
.search-box .form-control:focus {
  background-color: var(--surface);
}
.toolbar-select {
  width: auto;
  min-width: 150px;
}
@media (max-width: 575.98px) {
  .search-box {
    max-width: none;
    flex-basis: 100%;
  }
  .toolbar-select {
    flex: 1 1 auto;
  }
}

/* ---- stat tiles */
.stat-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1199.98px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 359.98px) {
  .stat-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.stat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.stat-tile::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tile-color, var(--brand-500));
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.stat-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.stat-tile:hover::after {
  opacity: 1;
}
.stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.stat-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-2);
}
.stat-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  color: var(--tile-color, var(--brand-500));
  background: var(--surface-3);
  background: color-mix(in srgb, var(--tile-color, var(--brand-500)) 13%, transparent);
  font-size: 1.2rem;
}
.stat-value {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-foot {
  font-size: 0.78rem;
  color: var(--ink-3);
}
@media (max-width: 575.98px) {
  .stat-tile {
    padding: 14px;
  }
  .stat-value {
    font-size: 1.35rem;
  }
  .stat-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
}

/* ---- definition list (restaurant profile) */
.info-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 24px;
  margin: 0;
}
.info-list dt {
  margin-bottom: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.info-list dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* ---- tables. On phones (.table-stack) each row becomes a card, and each
   cell shows its column name from data-label. */
.table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.data-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table thead th {
  padding: 10px 16px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.data-table tbody td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.data-table tbody tr {
  transition: background-color 0.15s var(--ease);
}
.data-table tbody tr:hover {
  background: var(--surface-2);
}
.data-table tbody tr:last-child td {
  border-bottom: 0;
}
.data-table .num {
  text-align: right;
  white-space: nowrap;
}

/* ---- a long list scrolls inside its box (.table-scroll), not the whole page, with
   the pager below it. On a computer the header row stays on top and a report's
   totals at the bottom; on a phone the row cards scroll in the box. */
.table-scroll {
  max-height: max(360px, 70vh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}
@media (min-width: 768px) {
  .table-scroll {
    max-height: max(320px, calc(100vh - 380px));
  }
  .table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: inset 0 -1px 0 var(--line);
  }
  .table-scroll tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: inset 0 2px 0 var(--line-strong);
  }
}

/* ---- the pager under a list (partials/_pager.html): "1–100 of 834 bills", pages, All */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.pager-info strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pager-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.pager-btn {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.pager-btn:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.pager-btn.is-current {
  background: var(--brand-solid);
  border-color: var(--brand-solid);
  color: #fff;
  cursor: default;
}
.pager-btn.is-off {
  opacity: 0.4;
  cursor: default;
}
.pager-all {
  margin-left: 6px;
}
.pager-gap {
  padding: 0 4px;
  color: var(--ink-3);
}

@media (max-width: 767.98px) {
  .table-stack thead {
    display: none;
  }
  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
    width: 100%;
  }
  .table-stack tbody tr {
    padding: 12px 16px;
    border-bottom: 8px solid var(--bg);
  }
  .table-stack tbody tr:last-child {
    border-bottom: 0;
  }
  .table-stack tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    text-align: right;
    border-bottom: 1px dashed var(--line);
  }
  .table-stack tbody tr td:last-child {
    border-bottom: 0;
  }
  .table-stack tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: left;
  }
  .table-stack td.cell-main {
    text-align: left;
  }
  .table-stack td.cell-main::before,
  .table-stack td.cell-actions::before {
    display: none;
  }
  .table-stack td.cell-actions {
    justify-content: flex-end;
  }
}

/* ---- person cell: avatar + name + username */
.person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.person strong {
  font-weight: 600;
}
.person small {
  font-size: 0.78rem;
  color: var(--ink-3);
}
.you-tag {
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}

.avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.72rem;
}

/* ---- badges: status (with dot) and role (no dot).
   Status classes are reused later for KOT, order and bill states. */
.status-badge,
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--badge-ink, var(--ink-2));
  background: var(--badge-bg, var(--surface-3));
}
.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-success { --badge-ink: var(--ok);    --badge-bg: var(--ok-bg); }
.status-warning { --badge-ink: var(--warn);  --badge-bg: var(--warn-bg); }
.status-danger { --badge-ink: var(--bad);   --badge-bg: var(--bad-bg); }
.status-info { --badge-ink: var(--info);  --badge-bg: var(--info-bg); }
.status-brand { --badge-ink: var(--brand-600); --badge-bg: var(--brand-50); }
.status-muted { --badge-ink: var(--ink-2); --badge-bg: var(--surface-3); }

.role-admin { --badge-ink: var(--brand-600); --badge-bg: var(--brand-50); }
.role-manager { --badge-ink: var(--violet);    --badge-bg: var(--violet-bg); }
.role-cashier { --badge-ink: var(--ok);        --badge-bg: var(--ok-bg); }
.role-kitchen { --badge-ink: var(--warn);      --badge-bg: var(--warn-bg); }
.role-waiter { --badge-ink: var(--info);      --badge-bg: var(--info-bg); }
.role-rm { --badge-ink: var(--violet-dark); --badge-bg: var(--violet-bg); }
.role-all { --badge-ink: var(--ink);       --badge-bg: var(--surface-3); }
.role-rider { --badge-ink: var(--ink-2);     --badge-bg: var(--surface-3); }

/* ---- empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 20px;
  text-align: center;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 1.7rem;
}
.empty-icon--danger {
  background: var(--bad-bg);
  color: var(--bad);
}
.empty-state h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.empty-state p {
  max-width: 46ch;
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* ---- side panel: add / edit forms slide in from the right */
.side-panel {
  --bs-offcanvas-width: min(460px, 100vw);
  --bs-offcanvas-bg: var(--surface);
  --bs-offcanvas-border-color: var(--line);
}
.side-panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.side-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.side-panel-head h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.side-panel-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}
.side-panel-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.form-section {
  margin: 6px 0 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.form-section:not(:first-child) {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.field-block {
  margin-bottom: 14px;
}
.req {
  color: var(--bad);
}
.field-error {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bad);
}
.has-error .form-control,
.has-error .form-select {
  border-color: var(--bad);
}

/* ---- toasts (top right) */
.toast-area {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: 16px;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.app-toast {
  --toast-color: var(--info);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--toast-color);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
  font-weight: 500;
  pointer-events: auto;
  animation: toast-in 0.25s var(--ease);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.app-toast i {
  color: var(--toast-color);
  font-size: 1.1rem;
  line-height: 1.3;
}
.app-toast--success { --toast-color: var(--ok); }
.app-toast--error { --toast-color: var(--bad); }
.app-toast--warning { --toast-color: var(--warn); }
.app-toast.is-leaving {
  opacity: 0;
  transform: translateX(16px);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ---- small buttons in a table row */
.row-actions {
  display: inline-flex;
  gap: 6px;
}
.btn-danger-soft:hover,
.btn-danger-soft:focus-visible {
  --bs-btn-hover-color: var(--bad);
  --bs-btn-hover-bg: var(--bad-bg);
  --bs-btn-hover-border-color: var(--bad);
}
.order-chip {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}
.data-table .col-order {
  width: 90px;
}
.count-link {
  font-weight: 600;
  text-decoration: none;
}
.count-link:hover {
  text-decoration: underline;
}

/* ---- the veg / non-veg mark: a square with a dot, as on Indian menus */
.food-dot {
  --dot: var(--veg);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--dot);
  border-radius: 3px;
  background: var(--surface);
  vertical-align: -2px;
}
.food-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot);
}
.food-non_veg { --dot: var(--nonveg); }

/* ---- dish cell: photo + name + description */
.dish {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dish-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface-3);
}
.dish-thumb--empty {
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 1.1rem;
}
.dish-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.dish small {
  max-width: 340px;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.stock-toggle {
  margin: 0;
}
.stock-toggle .form-check-label {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- form helpers inside the side panel */
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
.photo-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.photo-current img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
}
/* a logo is shown whole (wide logos are not cropped) */
.photo-current--logo img {
  padding: 5px;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain;
}
.photo-current--wide img {
  width: 128px;
}
/* restaurant settings: the public menu slider's photo slots */
.form-hint {
  margin: -4px 0 12px;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.slide-slot {
  margin-bottom: 12px;
  padding: 12px 12px 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.slide-slot-title {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
}
.form-note {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  font-size: 0.8rem;
  color: var(--ink-2);
}
.form-note i {
  color: var(--brand-600);
}

/* ---- "Delete this?" box */
.confirm-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 8px;
  text-align: center;
}
.confirm-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bad-bg);
  color: var(--bad);
  font-size: 1.5rem;
}
.confirm-box--blocked .confirm-icon {
  background: var(--warn-bg);
  color: var(--warn);
}
.confirm-box strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
}
.confirm-box p {
  max-width: 36ch;
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* ---- tables page: one card per table with its QR code */
.table-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  padding: 20px;
}
@media (max-width: 575.98px) {
  .table-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    padding: 14px;
  }
}
.table-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.table-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}
.table-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 6px;
}
.table-card-name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.table-card-head small {
  font-size: 0.78rem;
  color: var(--ink-3);
}
.table-card-qr {
  display: grid;
  place-items: center;
  padding: 8px 16px 14px;
}
.table-card-qr img {
  width: 148px;
  height: 148px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff; /* a QR code needs a white background, even in dark mode */
  transition: transform 0.2s var(--ease);
}
.table-card-qr:hover img {
  transform: scale(1.03);
}
.table-card.is-off .table-card-qr img {
  opacity: 0.4;
  filter: grayscale(1);
}
.table-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

/* ---- printable QR sheet (tables/qr_sheet.html): 3 x 3 cards on A4 */
.qr-sheet-page {
  --qr-size: 42mm;
  background: #ebe6e0;
}
.qr-sheet-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.qr-sheet-bar strong {
  display: block;
  font-family: var(--font-head);
}
.qr-sheet-bar small {
  color: var(--ink-3);
}
.qr-sheet-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.qr-sheet {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 194mm;
  max-width: calc(100% - 32px);
  margin: 24px auto;
  background: #fff;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 720px) {
  .qr-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.qr-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2mm;
  padding: 6mm 4mm;
  border: 1px dashed #c9c1b6;
  color: #1d1a17;
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
}
.qr-card-brand {
  display: flex;
  align-items: center;
  gap: 2mm;
  max-width: 100%;
  font-family: var(--font-head);
  font-size: 11pt;
  font-weight: 600;
}
.qr-card-logo {
  width: auto;
  height: 7mm;
}
.qr-card-code {
  width: var(--qr-size);
  height: var(--qr-size);
  image-rendering: pixelated;
}
.qr-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.5mm;
  padding: 1.5mm 4mm;
  border-radius: 999px;
  background: var(--brand-solid);
  color: #fff;
  font-size: 10pt;
  font-weight: 700;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.qr-card-table {
  font-family: var(--font-head);
  font-size: 19pt;
  font-weight: 700;
  line-height: 1.1;
}
.qr-card-section {
  font-size: 9pt;
  color: #5b544d;
}
@media print {
  @page {
    size: A4;
    margin: 8mm;
  }
  .qr-sheet-page {
    background: #fff;
  }
  .qr-sheet-bar {
    display: none;
  }
  .qr-sheet {
    width: auto;
    max-width: none;
    margin: 0;
    box-shadow: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================ 6. Login page ============================ */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(900px 500px at 0% 0%, var(--brand-100), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, var(--brand-50), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 940px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 767.98px) {
  .auth-card {
    max-width: 440px;
    grid-template-columns: minmax(0, 1fr);
  }
}

.auth-card--single {
  max-width: 480px;
  grid-template-columns: minmax(0, 1fr);
}
/* the login page: a standard-size card, centred (.auth-page centres it) */
.auth-card--login {
  max-width: 400px;
  grid-template-columns: minmax(0, 1fr);
}
.auth-card--login .auth-form {
  padding: 32px 28px;
}
.auth-card--login .auth-logo--small {
  justify-content: center;
  margin-bottom: 20px;
}
.auth-card--login h1 {
  font-size: 1.35rem;
  text-align: center;
}
.auth-card--login .auth-form > p {
  margin-bottom: 20px;
  font-size: 0.85rem;
  text-align: center;
}
@media (max-width: 575.98px) {
  .auth-card--login .auth-form {
    padding: 26px 20px;
  }
}
.auth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-logo strong {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}
.auth-logo--small {
  margin-bottom: 24px;
}
.auth-logo--small strong {
  color: var(--ink);
}
.feature-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--brand-400);
  font-size: 1.05rem;
}

.auth-form {
  padding: 44px 40px;
}
@media (max-width: 767.98px) {
  .auth-form {
    padding: 30px 22px;
  }
}
.auth-form h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  font-weight: 600;
}
.auth-form > p {
  margin-bottom: 24px;
  font-size: 0.9rem;
}
.input-icon {
  position: relative;
}
.input-icon > i {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--ink-3);
  transform: translateY(-50%);
  pointer-events: none;
}
.input-icon .form-control {
  min-height: 46px;
  padding-left: 40px;
  padding-right: 44px;
}
.input-icon-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  transform: translateY(-50%);
}
.input-icon-btn:hover {
  color: var(--ink);
  background: var(--surface-3);
}
.auth-submit {
  margin-top: 8px;
}
/* "Sign in as restaurant admin" tick box */
.auth-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.auth-check:has(input:checked) {
  border-color: var(--brand-500);
  background: var(--brand-50);
}
.auth-check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand-solid);
}
.auth-check span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.auth-check strong {
  font-size: 0.875rem;
}
.auth-check small {
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* "3 / 5 logins" on the Staff page */
.usage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.82rem;
  color: var(--ink-2);
}
.usage-pill.is-full {
  border-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}
.usage-full {
  padding: 0 7px;
  border-radius: 999px;
  background: var(--warn);
  color: var(--surface);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}
.stat-of {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--ink-3);
}
.auth-help {
  margin: 18px 0 0;
  font-size: 0.8rem;
  color: var(--ink-3);
  text-align: center;
}
/* the error pages (templates/errors/_page.html): the login card with an icon and two buttons */
.error-page {
  text-align: center;
}
.error-page-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 8px auto 14px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 1.75rem;
}
.error-page-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

/* ========================= 8. Public website ========================== */
/* templates/web/home.html: one page, mobile first */
.site {
  background: var(--bg);
}
.site section[id] {
  scroll-margin-top: 72px; /* the sticky top bar */
}
html:has(.site) {
  scroll-behavior: smooth;
}
.site-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .site-container {
    padding: 0 28px;
  }
}
.site-container--narrow {
  max-width: 820px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.eyebrow--light {
  background: rgba(255, 255, 255, 0.12);
  color: var(--brand-200);
}

/* ---- top bar */
.site-nav {
  --bs-navbar-padding-y: 10px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-nav .site-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}
.site-brand:hover {
  color: var(--ink);
}
.site-toggler {
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink);
  font-size: 1.4rem;
}
.site-toggler:focus {
  box-shadow: var(--ring);
}
.site-links {
  gap: 4px;
  margin: 0 auto;
}
.site-link {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.site-link:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.site-nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse {
    flex-basis: 100%;
  }
  .site-links {
    padding: 10px 0;
  }
  .site-nav-actions {
    padding-bottom: 12px;
  }
  .site-nav-actions .btn {
    flex: 1 1 auto;
  }
}

/* ---- hero */
.site-hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 56px;
  background:
    radial-gradient(700px 420px at 85% 10%, var(--brand-100), transparent 65%),
    radial-gradient(600px 400px at 0% 100%, var(--brand-50), transparent 60%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}
@media (min-width: 992px) {
  .site-hero {
    padding: 72px 0 88px;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}
.hero-copy h1 {
  margin: 16px 0 16px;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.hero-copy h1 span {
  color: var(--brand-600);
}
.hero-lead {
  max-width: 56ch;
  margin: 0 0 28px;
  font-size: 1.08rem;
  color: var(--ink-2);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 575.98px) {
  .hero-ctas .btn {
    flex: 1 1 100%;
  }
}
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-2);
}
.hero-points i {
  color: var(--ok);
}

/* the drawn phone */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
}
.hero-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-rgb), 0.28), transparent 70%);
}
.phone {
  position: relative;
  width: 272px;
  padding: 10px;
  border-radius: 40px;
  background: #1c1916;
  box-shadow: 0 30px 60px rgba(29, 26, 23, 0.28), inset 0 0 0 2px #3a332d;
  transform: rotate(-3deg);
}
.phone-notch {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 2;
  width: 84px;
  height: 20px;
  border-radius: 999px;
  background: #1c1916;
  transform: translateX(-50%);
}
.phone-screen {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  padding: 40px 14px 70px;
  border-radius: 31px;
  background: #fbfaf8;
  color: #1d1a17;
  font-size: 12px;
}
.pm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.pm-head strong {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
}
.pm-head small {
  color: #8a8279;
  font-size: 11px;
}
.pm-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-300));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.pm-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
.pm-chips span {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid #ebe6df;
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  font-size: 11px;
}
.pm-chips .is-on {
  border-color: var(--brand-solid);
  background: var(--brand-solid);
  color: #fff;
}
.pm-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0 18px;
  border-bottom: 1px dashed #ebe6df;
}
.pm-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pm-text b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
.pm-text small {
  color: #8a8279;
  font-size: 10.5px;
}
.pm-text em {
  font-style: normal;
  font-weight: 700;
}
.phone .food-dot {
  --veg: #15803d;
  --nonveg: #b42318;
  width: 12px;
  height: 12px;
  background: #fff;
}
.phone .food-dot::after {
  width: 5px;
  height: 5px;
}
.pm-img {
  position: relative;
  flex: 0 0 auto;
  width: 74px;
  height: 66px;
  border-radius: 12px;
}
.pm-img--1 { background: radial-gradient(circle at 30% 30%, #f7b267, #d9480f 70%); }
.pm-img--2 { background: radial-gradient(circle at 60% 40%, #f4845f, #9c2a12 75%); }
.pm-img--3 { background: radial-gradient(circle at 40% 60%, #a0522d, #4a2511 75%); }
.pm-add,
.pm-step {
  position: absolute;
  left: 50%;
  bottom: -11px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 4px 10px rgba(29, 26, 23, 0.15);
}
.pm-add {
  border: 1px solid var(--brand-solid);
  background: #fff;
  color: var(--brand-solid);
}
.pm-step {
  background: var(--brand-solid);
  color: #fff;
}
.pm-cart {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--brand-solid);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(var(--brand-rgb), 0.35);
}
.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 0.82rem;
}
.float-card strong {
  display: block;
  font-size: 0.85rem;
}
.float-card small {
  color: var(--ink-3);
}
.float-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 1rem;
}
.float-card--kot {
  top: 70px;
  left: 0;
}
.float-card--kot .float-icon {
  background: var(--bad-bg);
  color: var(--bad);
}
.float-card--paid {
  right: 0;
  bottom: 60px;
}
.float-card--paid .float-icon {
  background: var(--ok-bg);
  color: var(--ok);
}
@media (prefers-reduced-motion: no-preference) {
  .float-card--kot { animation: bob 5s ease-in-out infinite; }
  .float-card--paid { animation: bob 5s ease-in-out 2.5s infinite; }
}
@keyframes bob {
  50% { transform: translateY(-8px); }
}
@media (max-width: 420px) {
  .hero-visual {
    min-height: 470px;
  }
  .phone {
    width: 236px;
  }
  .phone-screen {
    min-height: 450px;
  }
  .float-card {
    font-size: 0.75rem;
    padding: 8px 10px;
  }
  .float-card--kot { left: -4px; top: 30px; }
  .float-card--paid { right: -4px; bottom: 30px; }
}

/* ---- "made for" strip */
.site-strip {
  padding: 18px 0;
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 28px;
  font-weight: 600;
  color: var(--ink-2);
}
.strip-row i {
  color: var(--brand-500);
}
.strip-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- sections */
.site-section {
  padding: 64px 0;
}
@media (min-width: 992px) {
  .site-section {
    padding: 96px 0;
  }
}
.site-section--tint {
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}
.section-head {
  max-width: 660px;
  margin: 0 auto 40px;
  text-align: center;
}
.section-head h2 {
  margin: 14px 0 10px;
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.section-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.02rem;
}

.feature-grid,
.role-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.role-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.feature-card,
.role-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.feature-card:hover,
.role-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 1.3rem;
}
.feature-card h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 600;
}
.feature-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.93rem;
}
.role-card ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.role-card li {
  position: relative;
  padding: 7px 0 7px 22px;
  border-bottom: 1px dashed var(--line);
  font-size: 0.92rem;
  color: var(--ink-2);
}
.role-card li:last-child {
  border-bottom: 0;
}
.role-card li::before {
  content: "\2713"; /* ✓ */
  position: absolute;
  left: 2px;
  top: 7px;
  font-weight: 700;
  color: var(--ok);
}

/* ---- how it works */
.steps {
  position: relative;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
}
.step-no {
  position: absolute;
  top: -13px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-solid);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  transform: translateX(-50%);
}
.step-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 1.5rem;
}
.step h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 600;
}
.step p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
}

/* ---- plans */
.plan-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  max-width: 820px;
  margin: 0 auto;
}
.plan-box {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.plan-box--best {
  border: 2px solid var(--brand-500);
  box-shadow: var(--shadow-md);
}
.plan-ribbon {
  position: absolute;
  top: -12px;
  right: 22px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--brand-solid);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.plan-box h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
}
.plan-tagline {
  margin: 2px 0 18px;
  color: var(--ink-3);
}
.plan-list {
  flex: 1;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.plan-list li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.93rem;
}
.plan-list i {
  color: var(--ok);
  font-size: 1.1rem;
}
.plan-note {
  margin: 22px 0 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-3);
}

/* ---- FAQ */
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.02rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 1.1rem;
}
.faq details[open] summary::after {
  content: "\2212";
  background: var(--brand-50);
  color: var(--brand-600);
}
.faq p {
  margin: 0 0 18px;
  max-width: 68ch;
  color: var(--ink-2);
}

/* ---- demo + contact */
.site-cta {
  background: linear-gradient(155deg, var(--brand-solid) 0%, var(--brand-700) 100%);
  color: rgba(255, 255, 255, 0.88);
}
.cta-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 992px) {
  .cta-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
}
.cta-copy h2 {
  margin: 14px 0 12px;
  color: #fff;
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
  font-weight: 700;
}
.cta-copy p {
  max-width: 48ch;
  font-size: 1.02rem;
}
.cta-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.cta-contact i {
  color: #fff;
}
.cta-contact a {
  color: #fff;
  font-weight: 600;
}
.cta-card {
  padding: 26px;
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 575.98px) {
  .cta-card {
    padding: 20px 16px;
  }
  .cta-card .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.cta-card-title {
  margin: 0 0 16px;
  font-size: 1.25rem;
  font-weight: 600;
}
.cta-small {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.demo-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 8px;
  text-align: center;
}
.demo-thanks .empty-icon {
  background: var(--ok-bg);
  color: var(--ok);
}
.demo-thanks h3 {
  margin: 6px 0 0;
  font-size: 1.3rem;
}
.demo-thanks p {
  margin: 0;
  color: var(--ink-2);
}

/* ---- footer */
.site-footer {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.footer-links a {
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--brand-600);
}
.site-footer small {
  color: var(--ink-3);
}

/* ===================== 9. Customer app (QR pages) ===================== */
/* base_customer.html: a phone-sized column, centred on bigger screens */
.customer-body {
  background: var(--surface-3);
}
.c-app {
  position: relative;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
}
@media (min-width: 481px) {
  .c-app {
    box-shadow: var(--shadow-lg);
  }
}
.c-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px 120px; /* room under the sticky cart bar */
}

/* ---- sticky header */
.c-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 16px 0;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.c-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
}
.c-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
}
.c-logo--text {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-300));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
}
.c-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.c-title strong {
  font-family: var(--font-head);
  font-size: 1.08rem;
  font-weight: 600;
}
.c-title small {
  font-size: 0.8rem;
  color: var(--ink-3);
}
.c-table-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.c-icon-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--ink);
  font-size: 1.2rem;
  text-decoration: none;
}
.c-icon-btn:hover {
  color: var(--brand-600);
}

/* ---- category chips: one row that scrolls sideways */
.c-chips {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.c-chips::-webkit-scrollbar {
  display: none;
}
.c-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.c-chip.is-active {
  border-color: var(--brand-solid);
  background: var(--brand-solid);
  color: #fff;
}
.c-chip[hidden] {
  display: none;
}

/* ---- search + veg only */
.c-veg-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.c-veg-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--veg);
}
.c-veg-toggle:has(input:checked) {
  border-color: var(--veg);
  color: var(--veg);
}

/* ---- notices */
.c-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 500;
}
.c-notice i {
  font-size: 1.1rem;
  line-height: 1.3;
}
.c-notice--info {
  background: var(--info-bg);
  color: var(--info);
}
.c-notice--error {
  background: var(--bad-bg);
  color: var(--bad);
}

/* ---- menu sections and dishes */
.c-section {
  scroll-margin-top: 136px; /* the sticky header + chips */
}
.c-section[hidden],
.c-item[hidden] {
  display: none;
}
.c-section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 2px;
  font-size: 1.15rem;
  font-weight: 700;
}
.c-section-title small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-3);
}
.c-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0 22px;
  border-bottom: 1px dashed var(--line-strong);
}
.c-item:last-child {
  border-bottom: 0;
}
.c-item-text {
  min-width: 0;
}
.c-item-name {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.c-item-name .food-dot {
  margin-top: 3px;
}
.c-item-price {
  font-weight: 700;
}
.c-item.is-out .c-item-text,
.c-item.is-out img {
  opacity: 0.5;
}
.c-item.is-out img {
  filter: grayscale(1);
}

/* ---- Add / − 2 + (44px touch targets) */
.qty-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100px;
  height: 44px;
  border: 1px solid var(--brand-solid);
  border-radius: 12px;
  background: var(--surface);
  color: var(--brand-600);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
  transition: transform 0.1s var(--ease);
}
.qty-add:active {
  transform: scale(0.96);
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-solid);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.qty-stepper button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1rem;
}
.qty-stepper button:disabled {
  opacity: 0.4;
}
.qty-count {
  min-width: 20px;
  font-weight: 800;
  text-align: center;
}
.qty-stepper--sm {
  width: 96px;
  box-shadow: none;
}
.qty-out {
  display: inline-grid;
  place-items: center;
  height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.htmx-request .qty-stepper,
.qty-control.htmx-request {
  opacity: 0.75;
}

/* ---- sticky cart bar */
.cart-bar-slot {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 30;
  width: 100%;
  max-width: 480px;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  pointer-events: none;
}
.cart-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--brand-solid);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(var(--brand-rgb), 0.4);
  pointer-events: auto;
  animation: cart-bump 0.25s var(--ease);
}
.cart-bar:hover {
  color: #fff;
}
.cart-bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-bar-sep {
  opacity: 0.5;
}
.cart-bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}
@keyframes cart-bump {
  from {
    transform: translateY(6px) scale(0.98);
  }
}

/* ---- cards (cart, track) */
.c-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.c-card-title {
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 600;
}
.c-card-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
  font-size: 1.4rem;
}
.c-muted {
  color: var(--ink-3);
  font-size: 0.875rem;
}
.c-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  font-size: 1rem;
}
.c-total small {
  color: var(--ink-3);
}
.c-total strong {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.c-tax-note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* ---- order placed + tracking */
.c-placed {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 8px 4px;
  text-align: center;
}
.c-placed-check {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  font-size: 2.2rem;
  box-shadow: 0 10px 24px rgba(21, 128, 61, 0.3);
  animation: pop-in 0.45s var(--ease);
}
@keyframes pop-in {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}
.c-placed h1 {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 700;
}
.c-placed p {
  margin: 0;
  color: var(--ink-2);
}
.c-order-no {
  margin: 4px 0 6px;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--brand-600);
  letter-spacing: -0.02em;
}
.c-placed-help {
  font-size: 0.82rem;
}
.c-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.c-headline {
  display: flex;
  align-items: center;
  gap: 14px;
}
.c-headline strong {
  display: block;
  font-size: 1rem;
}
.c-headline small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.c-headline-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 1.4rem;
}
.c-headline--closed .c-headline-icon {
  background: var(--ok-bg);
  color: var(--ok);
}
.c-headline--billed .c-headline-icon {
  background: var(--info-bg);
  color: var(--info);
}
.c-headline--cancelled .c-headline-icon {
  background: var(--bad-bg);
  color: var(--bad);
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot {
    animation: pulse 1.6s ease-in-out infinite;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.3;
  }
}
.c-kot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.c-kot-head strong {
  display: block;
}
.c-kot-head small {
  color: var(--ink-3);
  font-size: 0.8rem;
}
.c-kot.is-cancelled {
  opacity: 0.7;
}

/* the Placed → Preparing → Ready → Served line */
.kot-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.kot-progress li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-3);
  text-align: center;
}
.kot-progress li::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 50%;
  width: 100%;
  height: 3px;
  background: var(--line-strong);
}
.kot-progress li:first-child::before {
  display: none;
}
.kot-progress li.is-done::before {
  background: var(--ok);
}
.kot-dot {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  border: 3px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}
.kot-progress li.is-done .kot-dot {
  border-color: var(--ok);
  background: var(--ok);
}
.kot-progress li.is-done {
  color: var(--ink);
}
.kot-progress li.is-current .kot-dot {
  box-shadow: 0 0 0 5px var(--ok-bg);
}
.kot-progress li.is-current {
  color: var(--ok);
}
/* a delivery's progress: Placed, Confirmed, Cooking, On the way, Delivered */
.kot-progress--five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.kot-progress--five li {
  text-align: center;
  font-size: 0.66rem;
}
.c-headline--pending .c-headline-icon {
  background: var(--warn-bg);
  color: var(--warn);
}
.c-delivery-info {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 0.85rem;
}
.c-delivery-info div {
  display: grid;
  gap: 2px;
}
.c-delivery-info dt {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.c-delivery-info dd {
  margin: 0;
}
.c-kot-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-kot-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
  font-size: 0.9rem;
}
.c-kot-items li.is-cancelled {
  color: var(--ink-3);
  text-decoration: line-through;
}
.c-kot-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.82rem;
}
.c-closed {
  min-height: 70vh;
  justify-content: center;
}
.c-item-price .qty-out {
  height: auto;
  padding: 2px 8px;
  font-size: 0.7rem;
}
.toast-area--customer {
  top: 12px;
  left: 50%;
  right: auto;
  width: min(448px, calc(100vw - 32px));
  transform: translateX(-50%);
}

/* ================ 10. Service screens (floor, kitchen, waiter) ================ */
.empty-icon--ok {
  background: var(--ok-bg);
  color: var(--ok);
}

/* ---- floor */
.floor {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.floor-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tile-ink);
}
.legend-free { --tile-ink: var(--ok); }
.legend-reserved { --tile-ink: var(--bad); }
.legend-occupied { --tile-ink: var(--warn); }
.legend-billed { --tile-ink: var(--info); }
.floor-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.floor-section-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* POS-style tiles: about 215px wide (room for a booking's date and time), two in a row on a phone */
.floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
@media (max-width: 575.98px) {
  .floor-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
}
/* a solid colour per state, white text: green free, red booked, amber occupied, blue bill printed */
.table-tile {
  --tile-ink: var(--ok);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  min-height: 116px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--tile-ink);
  box-shadow: 0 2px 6px rgba(29, 26, 23, 0.12);
  color: #fff;
  font-family: var(--font-tile);
  text-decoration: none;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}
.table-tile:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.08);
}
.table-tile:focus-visible {
  outline: 3px solid rgba(var(--brand-rgb), 0.45);
  outline-offset: 2px;
}
.tile-booked { --tile-ink: var(--bad); }  /* no order yet, booked for later today */
.tile-occupied { --tile-ink: var(--warn); }
.tile-billed { --tile-ink: var(--info); }
.tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.tile-name {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-tile);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile-state {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.94);
}
.tile-amount {
  margin-top: auto;
  font-size: 1.12rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tile-meta {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}
.tile-free .tile-meta,
.tile-booked .tile-meta {
  margin-top: auto;
}
.tile-booked .tile-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* a booked tile: the booking's day and time, one per line */
.tile-when {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.tile-when i {
  margin-right: 2px;
  opacity: 0.85;
}
/* "1 round ready" bell: a white pill on the coloured tile */
.tile-alert {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff;
  color: var(--ok);
  font-size: 0.68rem;
  font-weight: 800;
}
@media (prefers-reduced-motion: no-preference) {
  .tile-alert {
    animation: pulse 1.6s ease-in-out infinite;
  }
}

/* ---- one table's order */
.kot-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.kot-row {
  padding: 14px 18px;
}
.kot-row.is-late {
  border-color: var(--bad);
  box-shadow: 0 0 0 1px var(--bad);
}
.kot-row.is-cancelled {
  opacity: 0.6;
}
.kot-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.kot-row-head strong {
  display: block;
}
.kot-row-head small {
  color: var(--ink-3);
  font-size: 0.8rem;
}
.kot-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kot-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
  font-size: 0.9rem;
}
.kot-lines li.is-cancelled,
.kot-card-items li.is-cancelled {
  color: var(--ink-3);
  text-decoration: line-through;
}
.kot-note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.85rem;
  font-weight: 600;
}
.kot-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.order-summary {
  align-self: start;
}
@media (min-width: 1100px) {
  .order-summary {
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
  }
}
.info-list--tight {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.summary-total small {
  color: var(--ink-3);
}
.summary-total strong {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}
.summary-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- waiter: take an order (the POS screen is section 19); the phone bar */
.waiter-bar-slot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1010;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.waiter-bar-slot .cart-bar {
  max-width: 560px;
  margin: 0 auto;
}

/* ---- kitchen board: three columns; on phones they scroll sideways */
.kitchen-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
/* tablets: all three columns side by side, no sideways scroll */
@media (min-width: 640px) and (max-width: 991.98px) {
  .kitchen-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}
.kitchen-col {
  --col-ink: var(--brand-600);
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  scroll-snap-align: start;
}
.kitchen-col--preparing { --col-ink: var(--warn); }
.kitchen-col--ready { --col-ink: var(--ok); }
.kitchen-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 3px solid var(--col-ink);
}
.kitchen-col-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--col-ink);
}
.kitchen-count {
  min-width: 30px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--col-ink);
  color: var(--surface);
  font-weight: 700;
  text-align: center;
}
.kitchen-col-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
  padding: 12px;
}
.kitchen-empty {
  margin: auto 0;
  padding: 24px 8px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-3);
}
.kot-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--col-ink);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.kot-card.is-late {
  border-color: var(--bad);
  border-left-color: var(--bad);
  background: var(--bad-bg);
}
.kot-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.kot-card-table {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}
.kot-card-no {
  font-size: 0.8rem;
  color: var(--ink-3);
}
.kot-card-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.9rem;
  font-weight: 700;
}
.kot-card-time small {
  font-weight: 500;
  color: var(--ink-3);
}
.is-late-text {
  color: var(--bad);
}
.kot-card-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kot-card-items li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px dashed var(--line);
  font-size: 1rem;
  font-weight: 600;
}
.kot-qty {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--surface-3);
  font-weight: 800;
  text-align: center;
}
.kot-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kot-main-btn {
  flex: 1;
  min-height: 46px;
  white-space: nowrap;
}
.kot-wait {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ok);
}
.late-badge {
  margin-left: 4px;
}

/* the kitchen board's KOT cards (orders/_kot_card.html): small and tight, the
   whole width of the column. Stacked in a narrow column:
       info   time
       dishes
       buttons
   one row in a wide one (440px+, e.g. a big screen or full screen):
       info | dishes | time
            |        | buttons
   The waiter's ready list keeps its own bigger cards. */
.kitchen-board .kitchen-col-head {
  padding: 10px 14px;
}
.kitchen-board .kitchen-col-body {
  gap: 10px;
  padding: 10px;
  container-type: inline-size; /* the cards switch to a row by this width */
}
.kitchen-board .kot-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "info time"
    "body body"
    "actions actions";
  gap: 6px 10px;
  padding: 9px 10px;
  border-left-width: 4px;
  border-radius: 10px;
}
.kot-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.kitchen-board .kot-card-time {
  grid-area: time;
}
.kot-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kitchen-board .kot-card-actions {
  grid-area: actions;
}
@container (min-width: 440px) {
  .kitchen-board .kot-card {
    grid-template-columns: minmax(70px, 96px) minmax(0, 1fr) 136px;
    grid-template-areas:
      "info body time"
      "info body actions";
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 6px 14px;
  }
  .kot-info {
    align-self: stretch;
    padding-right: 10px;
    border-right: 1px dashed var(--line-strong);
  }
  .kitchen-board .kot-card-items li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  /* the right column: the big button on top, the small ones under it */
  .kitchen-board .kot-card-actions {
    flex-wrap: wrap;
    align-self: end;
    justify-content: flex-end;
  }
  .kitchen-board .kot-main-btn {
    flex: 1 1 100%;
  }
  .kitchen-board .kot-wait {
    flex: 1 1 auto;
    text-align: right;
  }
}
.kitchen-board .kot-card-table {
  font-size: 1.1rem;
}
.kitchen-board .kot-card-table i {
  font-size: 0.85rem;
}
.kitchen-board .kot-card-no {
  font-size: 0.72rem;
}
.kitchen-board .parcel-tag {
  padding: 0 6px;
  font-size: 0.6rem;
}
.kitchen-board .kot-card-time {
  font-size: 0.76rem;
}
.kitchen-board .kot-card-time small {
  font-size: 0.68rem;
}
.kitchen-board .kot-card-items li {
  gap: 7px;
  padding: 3px 0;
  font-size: 0.84rem;
}
.kitchen-board .kot-qty {
  min-width: 24px;
  padding: 0 4px;
  font-size: 0.78rem;
}
.kitchen-board .kot-note {
  margin: 0;
  padding: 5px 8px;
  font-size: 0.76rem;
}
.kitchen-board .kot-card-actions {
  gap: 6px;
}
.kitchen-board .kot-main-btn {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.8rem;
}
.kitchen-board .kot-card-actions .btn-icon {
  width: 32px;
  height: 32px;
  min-height: 32px;
}
.kitchen-board .kot-wait {
  font-size: 0.7rem;
  line-height: 1.2;
}

/* ---- stock list in the kitchen's side panel */
.stock-list {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.stock-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}

/* ---- waiter: ready to serve */
.ready-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ready-card {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}
.ready-card.is-waiting {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px var(--warn);
}
.ready-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  border-radius: var(--r-md);
  background: var(--ok-bg);
  color: var(--ok);
}
.ready-table span {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.ready-table strong {
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1.1;
}
.ready-head strong {
  display: block;
}
.ready-head small {
  color: var(--ink-3);
}
.ready-btn {
  min-height: 48px;
}
@media (max-width: 575.98px) {
  .ready-card {
    grid-template-columns: 74px minmax(0, 1fr);
  }
  .ready-btn {
    grid-column: 1 / -1;
  }
}

/* ============================ 12. Billing ============================ */

/* ---- Bills page: "To bill", the orders still waiting for their bill (billing/_to_bill.html) */
.to-bill .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.to-bill .panel-title > i {
  color: var(--warn);
}
.to-bill-count {
  min-width: 26px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--warn);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}
.to-bill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 0 20px 18px; /* like .panel-body */
}
.to-bill-card {
  --to-bill-ink: var(--warn);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--to-bill-ink);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.to-bill-card--parcel { --to-bill-ink: var(--brand-solid); }
.to-bill-card--delivery { --to-bill-ink: var(--info); }
.to-bill-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.to-bill-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--to-bill-ink);
  color: #fff;
}
.to-bill-what {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.to-bill-what strong {
  font-family: var(--font-tile);
  font-size: 0.95rem;
  font-weight: 700;
}
.to-bill-what small {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.to-bill-amount {
  font-family: var(--font-tile);
  font-size: 1.1rem;
  font-weight: 700;
}
.to-bill-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.to-bill-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.bill-side {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
@media (min-width: 1100px) {
  .bill-side {
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
  }
}
.bill-totals {
  margin: 0 0 16px;
}
.bill-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.9rem;
}
.bill-totals dt {
  font-weight: 500;
  color: var(--ink-2);
}
.bill-totals dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.bill-totals .is-discount dd {
  color: var(--ok);
}
.bill-grand {
  margin-top: 6px;
  padding-top: 12px !important;
  border-top: 2px solid var(--ink);
}
.bill-grand dt,
.bill-grand dd {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink) !important;
}

/* two-choice pills (discount ₹ / %) and payment modes */
.seg-radio,
.mode-grid {
  display: grid;
  gap: 8px;
}
.seg-radio {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mode-grid {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.seg-option,
.mode-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.seg-option input,
.mode-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg-option span,
.mode-option span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.seg-option input:checked + span,
.mode-option input:checked + span {
  border-color: var(--brand-solid);
  background: var(--brand-50);
  color: var(--brand-600);
}
.seg-option input:focus-visible + span,
.mode-option input:focus-visible + span {
  box-shadow: var(--ring);
}

/* payment box */
.pay-box {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.pay-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.pay-figures > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
}
.pay-figures > div + div {
  border-left: 1px solid var(--line);
}
.pay-figures span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pay-figures strong {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.pay-balance strong {
  color: var(--bad);
}
.pay-balance.is-zero strong {
  color: var(--ok);
}
@media (max-width: 400px) {
  .pay-figures strong {
    font-size: 0.95rem;
  }
}
.change-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 16px 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 1rem;
}
.change-box i {
  font-size: 1.4rem;
}
.change-live {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--warn);
}
.pay-rows {
  margin: 0;
  padding: 6px 16px;
  list-style: none;
}
.pay-rows li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.pay-rows li:last-child {
  border-bottom: 0;
}
.pay-mode {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 0.75rem;
  font-weight: 700;
}
.pay-mode--cash { background: var(--ok-bg); color: var(--ok); }
.pay-mode--upi { background: var(--violet-bg); color: var(--violet); }
.pay-mode--credit_card,
.pay-mode--debit_card { background: var(--info-bg); color: var(--info); }
.pay-mode--online { background: var(--brand-50); color: var(--brand-600); }
.pay-meta {
  overflow: hidden;
  font-size: 0.78rem;
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.paid-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 16px;
  text-align: center;
}
.paid-box strong {
  font-family: var(--font-head);
  font-size: 1.2rem;
}
.paid-box > span:not(.empty-icon) {
  color: var(--ink-2);
  font-size: 0.875rem;
}
.paid-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.pay-form [hidden] {
  display: none !important;
}
/* "Split: 2 modes": the second payment shows only while it is on (static/js/billing.js) */
.pay-form:not(.is-split) [data-split-only],
.pay-form.is-split [data-split-hide] {
  display: none !important;
}
.pay-form-head {
  align-items: center;
}
.pay-split {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
}
.pay-split .form-check-input {
  margin-top: 0;
}
.pay-part-title {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pay-part-title small {
  margin-left: 4px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.pay-part--second {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.pay-part--second .field-block:last-child {
  margin-bottom: 0;
}
.pay-split-total {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-size: 0.86rem;
  text-align: center;
}

/* bill register */
.date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
}
.date-range .form-control {
  width: auto;
}
.panel-toolbar > .form-select {
  width: auto;
  min-width: 140px;
}
@media (max-width: 575.98px) {
  .date-range {
    width: 100%;
  }
  .date-range .form-control {
    flex: 1;
    min-width: 0;
  }
  .panel-toolbar > .form-select {
    flex: 1;
  }
}
.row-cancelled td {
  color: var(--ink-3);
}
.row-cancelled .cell-main strong {
  text-decoration: line-through;
}
.register-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: 0.85rem;
  color: var(--ink-2);
}
.register-foot strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ======================= 13. Dashboard + reports ======================= */
.dash-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.dash-empty {
  margin: 0;
  padding: 18px 0;
  color: var(--ink-3);
  text-align: center;
}

/* horizontal bars (payment modes): one hue; label and value in ink */
.hbar-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hbar-list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 96px;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
}
.hbar-label {
  font-weight: 600;
  color: var(--ink-2);
}
.hbar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.hbar-fill {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--brand-500);
}
.hbar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hbar-list li:hover .hbar-fill {
  background: var(--brand-600);
}

/* vertical bars (7 days): shared baseline, rounded data end, 2px gaps */
.vbar-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  height: 190px;
  padding-top: 4px;
}
.vbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  cursor: default;
}
.vbar-value {
  min-height: 18px;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
}
.vbar-col {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--line-strong);
}
.vbar-fill {
  width: min(70%, 34px);
  border-radius: 4px 4px 0 0;
  background: var(--brand-200);
  transition: background-color 0.15s var(--ease);
}
.vbar.is-today .vbar-fill,
.vbar:hover .vbar-fill {
  background: var(--brand-500);
}
.vbar-day {
  padding-top: 6px;
  font-size: 0.72rem;
  text-align: center;
  color: var(--ink-3);
}

.rank-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rank-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.9rem;
}
.rank-list li:last-child {
  border-bottom: 0;
}
.rank-no {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 0.75rem;
  font-weight: 700;
}
.rank-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-qty {
  font-size: 0.8rem;
  color: var(--ink-3);
}
.account-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.account-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  padding: 16px 20px;
  border-right: 1px solid var(--line);
}
.account-item:last-child {
  border-right: 0;
}
.account-item i {
  grid-row: span 3;
  color: var(--brand-600);
  font-size: 1.2rem;
}
.account-item span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.account-item small,
.account-item a {
  font-size: 0.78rem;
  color: var(--ink-3);
}
.account-item a {
  color: var(--brand-600);
}

/* reports (templates/reports/): the grouped list, then one report: toolbar, striped tables */
.report-group + .report-group {
  margin-top: 26px;
}
.report-group-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.report-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.report-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.report-card:hover {
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.report-card .feature-icon {
  flex: 0 0 auto;
  margin: 0;
}
.report-switch {
  width: auto;
  min-width: 220px;
}
.report-body {
  position: relative;
  display: grid;
  gap: var(--gap);
}
/* while the report loads again: the old one fades and three dots bounce over it.
   Shown only after 0.2s, so a quick answer does not flicker. */
.report-loading {
  display: none;
}
.report-body.is-loading .report-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: start center;
  padding-top: 120px;
  border-radius: var(--r-md);
  background: rgba(247, 245, 242, 0.7);
  animation: loading-show 0.15s 0.2s both;
}
.loading-dots {
  display: inline-flex;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.loading-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-solid);
  animation: loading-dot 1s infinite ease-in-out both;
}
.loading-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.loading-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes loading-show {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes loading-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-dots i {
    animation-name: loading-show;
    animation-direction: alternate;
  }
}
.report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.report-period {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  color: var(--ink-2);
}
.report-exports {
  display: flex;
  gap: 6px;
}
.report-section-title {
  margin: 0;
  padding: 16px 20px 10px;
  font-size: 1rem;
  font-weight: 700;
}
/* drill down, as in Tally: a row with details behind it, and the way back (reports/report.html) */
.report-drill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.report-drill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 0.85rem;
  font-weight: 600;
}
.report-drill-chip span {
  color: var(--ink-2);
  font-weight: 500;
}
.report-drill-hint {
  margin-left: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-3);
}
.report-table tr.is-drill {
  cursor: pointer;
}
.drill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-600);
  font-weight: 600;
  text-decoration: none;
}
.drill-link .bi {
  font-size: 0.75em;
  opacity: 0.55;
  transition: transform 0.15s, opacity 0.15s;
}
.report-table tr.is-drill:hover .drill-link {
  text-decoration: underline;
}
.report-table tr.is-drill:hover .drill-link .bi {
  opacity: 1;
  transform: translateX(2px);
}
/* the stripes: every other row tinted, so a long line stays easy to follow */
.report-table tbody tr:nth-child(even) td {
  background: var(--bg);
}
.report-table tbody tr:hover td {
  background: var(--surface-3);
}
.report-table thead th {
  background: var(--surface-3);
  color: var(--ink);
}
.report-table tfoot td {
  padding: 12px 16px;
  background: var(--surface-3);
  border-top: 2px solid var(--line-strong);
  white-space: nowrap;
}
.empty-state--small {
  padding: 28px 20px;
}
/* the letterhead shows on paper only (the CSV and PDF have their own) */
.report-letterhead {
  display: none;
}
@media (max-width: 767.98px) {
  .report-switch {
    min-width: 0;
    flex: 1 1 100%;
  }
  .report-exports {
    flex: 1 1 100%;
  }
  .report-exports .btn {
    flex: 1;
  }
  /* a phone shows each row as a card: the whole card is striped, and the totals are one more card */
  .report-table tbody tr:nth-child(even) {
    background: var(--surface-2);
  }
  .report-table tbody tr:nth-child(even) td,
  .report-table tbody tr:hover td {
    background: transparent;
  }
  .table-stack tfoot,
  .table-stack tfoot tr {
    display: block;
  }
  .table-stack tfoot tr {
    padding: 12px 16px;
    background: var(--surface-3);
    border-top: 2px solid var(--line-strong);
  }
  .report-table tfoot td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    background: transparent;
    border: 0;
  }
  .report-table tfoot td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .report-table tfoot td.cell-main::before,
  .report-table tfoot td.cell-blank {
    display: none;
  }
}
@media print {
  .app-sidebar,
  .topbar,
  .page-head,
  .page-actions,
  .floor-filter,
  .report-toolbar,
  .report-drill,
  .drill-link .bi,
  .bottom-nav,
  .pager-pages,
  .toast-area {
    display: none !important;
  }
  .table-scroll {
    max-height: none !important;
    overflow: visible !important;
  }
  .app-shell {
    display: block;
  }
  .app-content {
    padding: 0;
  }
  .panel {
    box-shadow: none;
    break-inside: auto;
  }
  .report-letterhead {
    display: grid;
    gap: 2px;
    padding-bottom: 10px;
    border-bottom: 2px solid #000;
    font-size: 10pt;
    color: #333;
  }
  .report-letterhead-name {
    font-size: 15pt;
    color: #000;
  }
  .report-letterhead-title {
    display: grid;
    margin-top: 8px;
  }
  .report-letterhead-title strong {
    font-size: 12pt;
    color: #000;
  }
  .drill-link {
    color: inherit;
    font-weight: inherit;
  }
  .report-table tbody tr:nth-child(even) td {
    background: #f3f1ee !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============ 14. Guest app (QR menu, dish details, cart, public menu) ============ */
/* Light and airy, photo-led: round plate photos, clear type, one strong
   action per card. Made for phones first; tablets get two columns. */
/* the guest pages sit on a warm cream so the white dish cards stand out */
:root {
  --gm-bg: #f6f1ea;
  --gm-inner: #fcf9f5; /* a dish card inside a white category card */
}

/* the dish sheet lives in #sheet, outside .gm-page, so it needs the tokens too */
.gm-page,
.gm-sheet {
  --gm-ink: var(--ink);
  --gm-soft: var(--ink-3);
  --gm-line: var(--line);
  --gm-card: var(--surface);
  --gm-shadow: 0 1px 2px rgba(29, 26, 23, 0.04), 0 8px 24px rgba(29, 26, 23, 0.06);
  --font-menu: "Fraunces", Georgia, "Times New Roman", serif;
}
.gm-page {
  max-width: none;
  background: var(--gm-bg);
  box-shadow: none !important;
}
.gm-page .c-main {
  display: block;
  padding: 0 0 40px;
}
.gm-page--ordering .c-main {
  padding-bottom: 130px; /* room under the cart / place-order bar */
}
.customer-body:has(.gm-page) {
  background: var(--gm-bg);
}
.gm-wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 14px;
}
@media (min-width: 768px) {
  .gm-wrap {
    padding: 0 28px;
  }
}
.gm-notice {
  margin-top: 12px;
}

/* ---- top bar: logo + name + table, one action on the right */
.gm-top {
  background: var(--gm-bg);
}
/* the top bar is a white card of its own */
.gm-top {
  padding-top: 10px;
}
.gm-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--gm-line);
  border-radius: 18px;
  background: var(--gm-card);
  box-shadow: var(--gm-shadow);
}
.gm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.gm-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
}
/* an uploaded logo is shown whole on a white tile: wide logos are not cropped */
img.gm-logo {
  padding: 4px;
  border: 1px solid var(--gm-line);
  background: #fff;
  object-fit: contain;
  box-shadow: 0 2px 6px rgba(29, 26, 23, 0.08);
}
.gm-logo--text {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-300));
  color: #fff;
  font-family: var(--font-menu);
  font-size: 1.2rem;
  font-weight: 700;
}
.gm-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.gm-brand-text strong {
  overflow: hidden;
  font-family: var(--font-menu);
  font-size: 1.12rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gm-brand-text small {
  font-size: 0.78rem;
  color: var(--gm-soft);
}
.gm-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--gm-ink);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.gm-pill:hover {
  color: var(--gm-ink);
  background: var(--line);
}
.gm-pill--live {
  background: var(--ok-bg);
  color: var(--ok);
}
/* the public menu's Call: a solid green button that stands out */
.gm-pill--call {
  padding: 0 16px;
  background: #15803d;
  color: #fff;
  box-shadow: 0 6px 16px rgba(21, 128, 61, 0.3);
}
.gm-pill--call:hover,
.gm-pill--call:focus-visible {
  background: #116a32;
  color: #fff;
}
.gm-top-row--title {
  min-height: 56px;
  padding: 0 8px;
}
.gm-top-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
}
/* inner pages (cart, order status, booking): a centred title and a line under it */
.gm-top-heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  line-height: 1.25;
  text-align: center;
}
.gm-top-heading small {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.76rem;
  color: var(--gm-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* cart, order status and booking read best as one centred column, even on a laptop */
.gm-wrap--narrow {
  max-width: 720px;
}
.gm-inner-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 14px;
}
.gm-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--gm-ink);
  font-size: 1.2rem;
  text-decoration: none;
}
.gm-icon:hover {
  background: var(--surface-3);
  color: var(--gm-ink);
}
.gm-icon--ghost {
  visibility: hidden;
}

/* ---- welcome banner: a soft card with a plate on the right */
.gm-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  min-height: 150px;
  margin-top: 12px;
  padding: 20px 18px 20px 22px;
  border-radius: 24px;
  background:
    radial-gradient(260px 160px at 100% 50%, rgba(var(--brand-rgb), 0.14), transparent 70%),
    linear-gradient(120deg, #fff6f5 0%, #fde3e1 100%);
  color: var(--ink);
  box-shadow: var(--gm-shadow);
}

.gm-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 0 6px 6px 0;
  background: var(--brand-500);
}
.gm-banner-text {
  position: relative;
  flex: 1;
  min-width: 0;
}
.gm-banner-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.gm-banner h1 {
  margin: 4px 0 6px;
  font-family: var(--font-menu);
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.05;
  color: inherit;
}
.gm-banner p {
  margin: 0;
  max-width: 36ch;
  font-size: 0.85rem;
  opacity: 0.8;
}
.gm-banner-art {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin-right: -6px;
  color: var(--brand-500);
  font-size: 3rem;
}
@media (min-width: 768px) {
  .gm-banner {
    min-height: 190px;
    padding: 28px 28px 28px 34px;
  }
  .gm-banner-art {
    width: 160px;
    height: 160px;
  }
}
/* ---- public menu slider: slide 1 the restaurant, then its photos (static/js/menu.js) */
.gm-slider {
  margin-top: 12px;
}
.gm-slides {
  position: relative; /* slides measure their place from here */
  display: flex;
  gap: 10px;
  overflow-x: auto;
  border-radius: 24px;
  box-shadow: var(--gm-shadow);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.gm-slides::-webkit-scrollbar {
  display: none;
}
.gm-slides:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.gm-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 160px;
  overflow: hidden;
  margin: 0;
  border-radius: 24px;
  scroll-snap-align: start;
}
.gm-slider .gm-banner {
  margin-top: 0;
  box-shadow: none;
}
.gm-slide--photo {
  background: var(--surface-3);
}
.gm-slide--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gm-slide--photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 18px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
@media (min-width: 768px) {
  .gm-slide {
    min-height: 210px;
  }
  .gm-slide--photo figcaption {
    padding: 50px 26px 20px;
    font-size: 1.2rem;
  }
}
/* the logo on slide 1: whole, on a white rounded tile */
.gm-banner-logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 14px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(29, 26, 23, 0.12);
}
.gm-banner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.gm-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 6px;
}
/* a 24px tap target with a small pill inside */
.gm-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
}
.gm-dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width 0.25s var(--ease), background-color 0.25s var(--ease);
}
.gm-dot.is-active::after {
  width: 20px;
  background: var(--brand-solid);
}

/* ---- search */
.gm-search {
  position: relative;
  display: block;
  margin: 14px 0 2px;
}
.gm-search i {
  position: absolute;
  top: 50%;
  left: 15px;
  font-size: 0.9rem;
  color: var(--gm-soft);
  transform: translateY(-50%);
  pointer-events: none;
}
.gm-search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--gm-line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--gm-ink);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
  box-shadow: var(--gm-shadow);
}
.gm-search input:focus {
  border-color: var(--brand-500);
  box-shadow: var(--ring);
}

/* ---- sticky tabs: category names with an underline, then food-type chips */
.gm-tabsbar {
  position: sticky;
  top: 0;
  z-index: 25;
  padding: 8px 0;
  background: var(--gm-bg);
  background: color-mix(in srgb, var(--gm-bg) 92%, transparent);
  backdrop-filter: blur(12px);
}
/* category tabs + food-type chips, together in one white card */
.gm-tabs-card {
  padding: 0 14px;
  overflow: hidden;
  border: 1px solid var(--gm-line);
  border-radius: 18px;
  background: var(--gm-card);
  box-shadow: var(--gm-shadow);
}
.gm-tabs {
  display: flex;
  gap: 22px;
  margin: 0 -14px;
  padding: 0 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--gm-line);
  scrollbar-width: none;
}
.gm-tabs::-webkit-scrollbar {
  display: none;
}
.gm-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 11px 0 12px;
  color: var(--gm-soft);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.gm-tab:hover {
  color: var(--gm-ink);
}
.gm-tab.is-active {
  color: var(--gm-ink);
  font-weight: 800;
}
.gm-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand-solid);
}
.gm-tab[hidden] {
  display: none;
}
.gm-chips {
  display: flex;
  gap: 8px;
  padding: 10px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gm-chips::-webkit-scrollbar {
  display: none;
}
.gm-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--gm-line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.76rem;
  font-weight: 700;
}
.gm-chip.is-active {
  border-color: var(--brand-solid);
  background: var(--brand-50);
  color: var(--brand-700);
}
.gm-chip.is-active .food-dot {
  background: var(--surface);
}

/* ---- the dish list: one column on phones, two on tablets */
.gm-list {
  padding-top: 4px;
}
/* each category is a white card: its name, then its dish cards inside */
.gm-section {
  margin-top: 6px;
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid var(--gm-line);
  border-radius: 22px;
  background: var(--gm-card);
  box-shadow: var(--gm-shadow);
  scroll-margin-top: 130px;
}
@media (min-width: 768px) {
  .gm-section {
    padding: 14px;
  }
}
.gm-section[hidden],
.gm-dish[hidden] {
  display: none;
}
.gm-dishes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@media (min-width: 760px) {
  .gm-dishes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* one dish card: photo tile | name, description, meta | + and price */
.gm-dish {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  min-height: 148px;
  padding: 8px 14px 8px 8px; /* a thin even edge round the photo */
  border: 1px solid var(--gm-line);
  border-radius: 20px;
  background: var(--gm-inner);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
@media (hover: hover) {
  .gm-dish:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(29, 26, 23, 0.05), 0 14px 32px rgba(29, 26, 23, 0.1);
  }
}
.gm-dish:active {
  transform: scale(0.99);
}
@media (max-width: 759.98px) {
  .gm-dish {
    gap: 12px;
  }
}
@media (min-width: 760px) {
  .gm-dish {
    min-height: 164px;
    padding: 9px 16px 9px 9px;
  }
}
/* the photo: big, filling the card's height, with only the card's thin edge round it */
.gm-dish-photo {
  position: relative;
  width: 116px;
  min-height: 130px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-3);
}
.gm-dish-photo .gm-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.gm-dish-photo .gm-plate-blank {
  font-size: 2.2rem;
}
@media (min-width: 760px) {
  .gm-dish-photo {
    width: 136px;
    min-height: 144px;
  }
}
.gm-dish-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
}
.gm-dish-link:focus-visible {
  box-shadow: var(--ring);
}
/* name, description, veg / non-veg ... then price and + pinned to the bottom */
.gm-dish-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 6px 0 2px;
}
.gm-dish-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}
.gm-dish-foot .gm-ctl {
  position: relative;
  z-index: 2; /* the + sits above the "open details" link */
}
.gm-dish-name {
  margin: 0 0 3px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}
.gm-dish-desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--gm-soft);
}
.gm-dish-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 7px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gm-soft);
}
.gm-dish-meta:empty {
  display: none;
}
.gm-sold {
  color: var(--bad);
}
/* the dish card's food type: a small chip like the Veg / Non-veg filter */
.gm-food {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 6px;
  border: 1px solid var(--gm-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 700;
  line-height: 1.5;
}
.gm-food .food-dot {
  width: 12px;
  height: 12px;
}
.gm-price {
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gm-price small {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--gm-soft);
}
.gm-dish.is-out .gm-plate,
.gm-dish.is-out .gm-dish-name,
.gm-dish.is-out .gm-price {
  opacity: 0.5;
}
.gm-dish.is-out .gm-plate {
  filter: grayscale(1);
}

/* the round plate photo */
.gm-plate {
  --size: 76px;
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--surface-3);
  box-shadow: 0 8px 20px rgba(29, 26, 23, 0.16), 0 0 0 1px var(--gm-line);
}
.gm-plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gm-plate--sm { --size: 58px; }
.gm-plate--md { --size: 78px; }
.gm-plate--lg { --size: 200px; border-width: 6px; }
.gm-plate--xl { --size: 118px; border-width: 5px; }
@media (min-width: 768px) {
  .gm-plate--md { --size: 88px; }
  .gm-plate--xl { --size: 160px; }
}
.gm-plate-blank {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-menu);
  font-size: calc(var(--size) * 0.4);
  font-weight: 700;
}
/* a warm tile per food type when there is no photo */
.food-bg-veg { background: radial-gradient(circle at 30% 25%, #9bd06a, #2f7a4a 75%); }
.food-bg-non_veg { background: radial-gradient(circle at 30% 25%, #f7a35c, #9c2a16 75%); }

/* + and − 1 + */
/* "Add +": a red pill with a soft glow, the card's one clear action.
   Same size as the − 1 + it turns into, so the card does not jump. */
.gm-plus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 84px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-solid) 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.15s var(--ease), transform 0.1s var(--ease), filter 0.15s var(--ease);
}
.gm-plus i {
  font-size: 0.9rem;
  -webkit-text-stroke: 0.4px; /* a slightly bolder + */
}
.gm-plus:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 18px rgba(var(--brand-rgb), 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.gm-plus:active {
  transform: scale(0.95);
  box-shadow: 0 3px 8px rgba(var(--brand-rgb), 0.3);
}
.gm-plus:focus-visible {
  outline: 3px solid rgba(var(--brand-rgb), 0.35);
  outline-offset: 2px;
}
.gm-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--gm-ink);
  color: var(--surface);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 16px;
}
.gm-stepper {
  display: inline-flex;
  align-items: center;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-solid) 100%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(var(--brand-rgb), 0.28);
}
.gm-stepper button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 38px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.15rem;
}
.gm-stepper button:disabled {
  opacity: 0.4;
}
.gm-stepper span,
.gm-stepper input {
  min-width: 22px;
  font-weight: 800;
  text-align: center;
}
.gm-stepper input {
  width: 36px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}
.gm-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.gm-stepper--sm {
  height: 34px;
  border: 1px solid var(--gm-line);
  background: var(--surface);
  color: var(--gm-ink);
  box-shadow: none;
}
.gm-stepper--sm button {
  width: 32px;
  height: 34px;
}
.gm-stepper--lg {
  height: 52px;
  border: 1px solid var(--gm-line);
  border-radius: 16px;
  background: var(--surface-3);
  color: var(--gm-ink);
  box-shadow: none;
}
.gm-stepper--lg button {
  width: 46px;
  height: 52px;
  font-size: 1.3rem;
}

/* ---- dish details: a sheet that slides up (phones) / a centred card (tablets) */
.gm-sheet {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 768px) {
  .gm-sheet {
    align-items: center;
  }
}
.gm-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 12, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.gm-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--surface);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.25);
  transform: translateY(100%);
  transition: transform 0.3s var(--ease);
}
@media (min-width: 768px) {
  .gm-sheet-panel {
    border-radius: 28px;
    transform: translateY(24px) scale(0.98);
    opacity: 0;
    transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
  }
}
.gm-sheet.is-open .gm-sheet-backdrop {
  opacity: 1;
}
.gm-sheet.is-open .gm-sheet-panel {
  transform: none;
  opacity: 1;
}
.gm-sheet-grip {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: var(--line-strong);
}
@media (min-width: 768px) {
  .gm-sheet-grip {
    display: none;
  }
}
body.gm-sheet-open {
  overflow: hidden;
}

.gm-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.gm-detail-heading {
  font-size: 1rem;
  font-weight: 800;
}
.gm-detail-hero {
  position: relative;
  display: grid;
  place-items: center;
  padding: 10px 0 6px;
}
.gm-detail-hero .gm-plate {
  box-shadow: 0 22px 44px rgba(29, 26, 23, 0.22), 0 0 0 1px var(--gm-line);
}
.gm-sold--big {
  position: absolute;
  bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.gm-detail-name {
  margin: 12px 0 4px;
  font-family: var(--font-menu);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.gm-detail-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin: 0 0 14px;
  font-size: 0.85rem;
  color: var(--gm-soft);
}
.gm-dot-sep {
  opacity: 0.6;
}
.gm-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}
.gm-type--veg { color: var(--veg); }
.gm-type--non_veg { color: var(--nonveg); }
.gm-detail-block {
  padding: 14px 0;
  border-top: 1px solid var(--gm-line);
}
.gm-detail-block h3 {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 800;
}
.gm-detail-block p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.gm-detail-order {
  padding-top: 14px;
  border-top: 1px solid var(--gm-line);
}
.gm-sizes {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.gm-sizes legend {
  float: none;
  width: auto;
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 800;
}
.gm-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}
.gm-sizes legend {
  grid-column: 1 / -1;
}
.gm-size {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.gm-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gm-size span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: 2px solid var(--gm-line);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.gm-size strong {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.gm-size em {
  font-family: var(--font-menu);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
}
.gm-size input:checked + span {
  border-color: var(--brand-solid);
  background: var(--brand-50);
}
.gm-size input:focus-visible + span {
  box-shadow: var(--ring);
}
.gm-detail-buy {
  display: flex;
  gap: 10px;
}
.gm-add-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 16px;
  background: var(--brand-solid);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(var(--brand-rgb), 0.3);
}
.gm-add-btn:hover {
  color: #fff;
  background: var(--brand-solid-hover);
}
.gm-add-btn:disabled {
  opacity: 0.6;
}
.gm-add-btn--block {
  width: 100%;
  margin-top: 14px;
}
.gm-add-total {
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
}
.gm-in-cart,
.gm-detail-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--gm-soft);
}
.gm-in-cart {
  color: var(--ok);
  font-weight: 700;
}
.gm-detail-price {
  margin: 14px 0 0;
  font-family: var(--font-menu);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}
.gm-size-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.gm-size-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--gm-line);
  border-radius: 14px;
}
.gm-size-list span {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--gm-soft);
}
.gm-size-list strong {
  font-family: var(--font-menu);
  font-size: 1.15rem;
}

/* a dish page of its own */
.gm-dish-page {
  padding-top: 16px;
}
.gm-card {
  padding: 16px 18px;
  border: 1px solid var(--gm-line);
  border-radius: 22px;
  background: var(--gm-card);
  box-shadow: var(--gm-shadow);
}
.gm-dish-page .gm-card {
  max-width: 560px;
  margin: 0 auto;
}

/* ---- the cart page */
.gm-cart-page {
  padding-top: 14px;
}
.gm-cart {
  padding: 4px 16px;
}
.gm-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--gm-line);
}
.gm-line-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.gm-line-name {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.95rem;
  line-height: 1.3;
}
.gm-line-name .food-dot {
  margin-top: 3px;
}
.gm-line-desc {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--gm-soft);
}
.gm-line-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 6px;
}
.gm-line-time {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gm-soft);
}
.gm-line-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.gm-line-each {
  font-size: 0.72rem;
  color: var(--gm-soft);
}
.gm-trash {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  background: var(--bad-bg);
  color: var(--bad);
  font-size: 1rem;
}
.gm-trash:hover {
  background: var(--bad);
  color: #fff;
}
.gm-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  font-weight: 700;
}
.gm-total-row small {
  font-weight: 500;
  color: var(--gm-soft);
}
.gm-total-row strong {
  font-size: 1.1rem;
}
.gm-add-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 4px 18px;
  font-weight: 700;
  text-decoration: none;
}
.gm-details {
  padding: 18px;
}
.gm-block-title {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 800;
}
.gm-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-3);
  font-size: 0.9rem;
}
.gm-info-row span {
  color: var(--gm-soft);
}
.gm-small-note {
  display: flex;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--gm-soft);
}
.gm-place-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 664px; /* the width of the centred cart column */
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gm-line);
  background: var(--surface);
  transform: translateX(-50%);
  box-shadow: 0 -10px 30px rgba(29, 26, 23, 0.08);
}
.gm-place-total {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.gm-place-total small {
  font-size: 0.75rem;
  color: var(--gm-soft);
}
.gm-place-total strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
/* the cart bar on these wide pages: centred */
.gm-page .cart-bar-slot {
  max-width: 600px;
}

/* ---- public menu footer */
.gm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 8px 0 12px;
  padding: 18px;
  border: 1px solid var(--gm-line);
  border-radius: 22px;
  background: var(--gm-card);
  box-shadow: var(--gm-shadow);
  font-size: 0.875rem;
  color: var(--ink-2);
}
.gm-foot > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gm-foot strong {
  font-family: var(--font-menu);
  font-size: 1.1rem;
  color: var(--gm-ink);
}
.gm-foot a {
  font-weight: 600;
  text-decoration: none;
}
.gm-foot small {
  color: var(--gm-soft);
}

/* ---- staff: portions in the dish form, prices in the list, waiter sizes */
.form-section-note {
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.portion-box {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.portion-head,
.portion-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
}
.portion-head {
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.portion-row + .portion-row {
  margin-top: 8px;
}
.portion-error {
  grid-column: 1 / -1;
  margin-top: 0;
}
.portion-remove {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 8px;
  color: var(--ink-3);
  cursor: pointer;
}
.portion-remove input {
  position: absolute;
  opacity: 0;
}
.portion-remove:has(input:checked) {
  background: var(--bad-bg);
  color: var(--bad);
}
.portion-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--ink-3);
}
.portion-prices {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.portion-prices strong {
  color: var(--ink);
}

/* ===================== 15. Dine in / Take away ===================== */
/* a box that shows only for some order types (cart page script) */
[data-show-for][hidden] {
  display: none !important;
}
.gm-delivery-note {
  margin: 0 0 14px;
}
/* cart: two big choices */
.c-type {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.c-type legend {
  float: none;
  width: auto;
}
.c-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.c-type-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.c-type-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.c-type-option > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 8px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.c-type-option i {
  font-size: 1.5rem;
  color: var(--ink-3);
}
.c-type-option small {
  font-size: 0.75rem;
  color: var(--ink-3);
}
.c-type-option input:checked + span {
  border-color: var(--brand-solid);
  background: var(--brand-50);
}
.c-type-option input:checked + span i {
  color: var(--brand-600);
}
.c-type-option input:focus-visible + span {
  box-shadow: var(--ring);
}
.seg-option span i {
  margin-right: 4px;
}
.c-placed-type {
  margin: 4px 0 !important;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600) !important;
  font-weight: 700;
}

/* the list of open take-away orders (the floor's counter chips are in section 19) */
.takeaway-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.takeaway-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.takeaway-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}
.takeaway-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 56px;
  height: 46px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
}
.takeaway-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.takeaway-who small {
  color: var(--ink-3);
}
.takeaway-actions {
  display: flex;
  gap: 6px;
}
@media (max-width: 767.98px) {
  .takeaway-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .takeaway-actions {
    grid-column: 1 / -1;
  }
  .takeaway-actions .btn {
    flex: 1;
  }
}

/* kitchen + ready list: a parcel stands out */
.kot-card.is-parcel {
  border-left-style: double;
  border-left-width: 6px;
}
.parcel-tag {
  display: inline-block;
  margin: 2px 0 2px;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.kot-card-table i {
  font-size: 1.1rem;
}
.ready-table--parcel {
  background: var(--brand-50);
  color: var(--brand-600);
}
.slip-parcel {
  margin: 2px 0;
  font-size: 13px;
  font-weight: 700;
}

/* ======================= 11. 80 mm thermal print ======================= */
/* print/kot.html (and the bill print in Phase 5) */
.print-80 {
  margin: 0;
  background: #ece8e3;
  color: #000;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  line-height: 1.35;
}
.print-tools {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px;
}
.print-tools button {
  padding: 6px 14px;
  border: 1px solid #999;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.slip {
  width: 72mm;
  margin: 0 auto 24px;
  padding: 4mm;
  background: #fff;
}
.slip-center {
  text-align: center;
}
.slip-strong {
  font-size: 14px;
  font-weight: 700;
}
.slip-title {
  margin-top: 2px;
  font-weight: 700;
  letter-spacing: 1px;
}
.slip-small {
  font-size: 10px;
}
.slip-rule {
  margin: 4px 0;
  border-top: 1px dashed #000;
}
.slip-rule--thin {
  border-top-style: dotted;
}
.slip-row,
.slip-big,
.slip-item {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.slip-big {
  margin: 2px 0;
  font-size: 18px;
  font-weight: 700;
}
.slip-head {
  font-weight: 700;
}
.slip-item {
  justify-content: flex-start;
  padding: 2px 0;
  font-size: 14px;
  font-weight: 700;
}
.slip-qty {
  flex: 0 0 9mm;
}
/* bill lines: item | qty | rate | amount */
.slip-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8mm 15mm 17mm;
  gap: 1mm;
  padding: 1px 0;
}
.slip-line span:not(:first-child) {
  text-align: right;
}
.slip-note {
  font-weight: 700;
  white-space: pre-wrap;
}
/* the logo and the UPI QR code (Cafe profile > Bill & print), printed black and white */
.slip-logo {
  display: block;
  max-width: 40mm;
  max-height: 22mm;
  margin: 0 auto 2mm;
  object-fit: contain;
  filter: grayscale(1) contrast(1.4);
}
.slip-upi-qr {
  display: block;
  width: 32mm;
  height: 32mm;
  margin: 1mm auto;
  object-fit: contain;
}
@media print {
  @page {
    size: 80mm auto;
    margin: 0;
  }
  .print-80 {
    background: #fff;
  }
  .print-tools {
    display: none;
  }
  .slip {
    margin: 0;
    padding: 2mm 4mm;
  }
}

/* ============================== 7. Motion ============================== */
@media (prefers-reduced-motion: no-preference) {
  /* not the live blocks that replace themselves every few seconds (kitchen
     board, floor), or they would fade in again on every refresh */
.app-content > *:not([hx-trigger]) {
    animation: rise 0.4s var(--ease) both;
  }
  .app-content > *:nth-child(2) { animation-delay: 0.04s; }
  .app-content > *:nth-child(3) { animation-delay: 0.08s; }
  .app-content > *:nth-child(4) { animation-delay: 0.12s; }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ 16. Delivery, rider, table bookings ============ */

/* ---- floor: the "Bookings today" chip (a booked table's red tile is in section 10) */
.legend-booked {
  color: var(--violet);
  text-decoration: none;
}
.legend-booked:hover {
  color: var(--violet);
  border-color: var(--violet);
}

/* ---- the Deliveries board: five columns, scrolls sideways on small screens */
.delivery-board {
  grid-template-columns: repeat(4, minmax(250px, 1fr));
}
/* laptops and tablets: two columns a row (four never fit beside the menu, and
   the last one would hide off the edge), phones: one under the other (a sideways
   board with forms in it makes phone and tablet browsers zoom the whole page out) */
@media (max-width: 1399.98px) {
  .delivery-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }
  .delivery-board .kitchen-col-body {
    min-height: 0;
  }
}
@media (max-width: 575.98px) {
  .delivery-board {
    grid-template-columns: minmax(0, 1fr);
  }
}
.delivery-col--confirm { --col-ink: var(--warn); }
.delivery-col--kitchen { --col-ink: var(--brand-600); }
.delivery-col--ready { --col-ink: var(--ok); }
.delivery-col--out { --col-ink: var(--info); }
.delivered-today {
  margin-top: var(--gap);
}
.delivered-today .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.delivery-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--col-ink);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.delivery-card-head,
.rider-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.delivery-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 40px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-family: var(--font-head);
  font-weight: 700;
  text-decoration: none;
}
.delivery-who {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.delivery-who strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-who small {
  color: var(--ink-3);
  font-size: 0.75rem;
}
.delivery-amount {
  font-family: var(--font-head);
}
.delivery-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-2);
  text-decoration: none;
}
.delivery-line i {
  margin-top: 2px;
  color: var(--ink-3);
}
.delivery-items {
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface-3);
  font-size: 0.78rem;
  color: var(--ink-2);
}
.delivery-rider {
  display: flex;
  gap: 6px;
}
.delivery-rider .form-select {
  flex: 1;
  min-width: 0;
}
.delivery-rider .btn {
  flex: 0 0 auto;
}
.delivery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.delivery-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.rider-cash,
.rider-times {
  margin-top: var(--gap);
}
.rider-cash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.rider-cash-row:last-child {
  border-bottom: 0;
}
.rider-cash-row small {
  color: var(--ink-3);
}

/* ---- the rider's phone screen: big targets, the address first */
.rider-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}
.rider-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 575.98px) {
  .rider-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* phones: two by two */
  }
}
/* a ride's time, picked up to delivered; 30 minutes or more: in red (with the stopwatch and the words) */
.ride-time {
  white-space: nowrap;
  color: var(--ink-2);
}
.ride-time.is-slow {
  color: var(--bad);
  font-weight: 600;
}
.rider-summary div {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.rider-summary small {
  font-size: 0.72rem;
  color: var(--ink-3);
}
.rider-summary strong {
  font-family: var(--font-head);
  font-size: 1.25rem;
}
.rider-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-left: 5px solid var(--ok);
}
.rider-card.is-out {
  border-left-color: var(--info);
}
.rider-address {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.rider-address i {
  margin-top: 3px;
  color: var(--bad);
}
.rider-collect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 700;
}
.rider-collect strong {
  font-family: var(--font-head);
  font-size: 1.35rem;
  color: var(--ink);
}
.rider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rider-actions > .btn {
  flex: 1 1 auto;
}
.rider-deliver {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rider-deliver .btn {
  flex: 1;
}
/* how the customer paid (orders/_collect_fields.html): mode + reference, split below; then Delivered */
.collect-fields {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 6px;
}
.collect-split {
  grid-column: 1 / -1;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 0.85rem;
}
.collect-split summary {
  padding: 6px 10px;
  color: var(--ink-2);
  font-weight: 600;
  cursor: pointer;
}
.collect-split-body {
  display: grid;
  gap: 4px;
  padding: 0 10px 10px;
}
.collect-split-body label {
  color: var(--ink-3);
  font-size: 0.78rem;
}
.delivery-rider:has(.collect-fields) {
  flex-wrap: wrap;
}
.delivery-rider:has(.collect-fields) .btn {
  flex: 1 1 100%;
}
@media (max-width: 420px) {
  .collect-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- staff Bookings */
.booking-board {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.booking-requests {
  border-color: var(--warn);
}
.booking-requests .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.booking-list {
  display: flex;
  flex-direction: column;
}
.booking-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.booking-row:last-child {
  border-bottom: 0;
}
.booking-row--cancelled,
.booking-row--no_show {
  opacity: 0.6;
}
.booking-when {
  display: flex;
  flex-direction: column;
}
.booking-when strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
}
.booking-when small,
.booking-who small {
  color: var(--ink-3);
  font-size: 0.78rem;
}
.booking-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.booking-who a {
  text-decoration: none;
}
.booking-table,
.booking-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 767.98px) {
  .booking-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }
  .booking-table,
  .booking-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ---- guest: the booking page (/r/<slug>/book/) and its status */
.gm-book-icon,
.gm-booking-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--violet-bg);
  color: var(--violet);
  font-size: 1.2rem;
}
.gm-book-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px 16px;
}
.gm-book-intro p {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: var(--gm-soft);
}
.gm-book-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
.gm-booking {
  padding: 18px;
}
.gm-booking-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.gm-booking-head strong {
  display: block;
  font-size: 1rem;
  line-height: 1.3;
}
.gm-booking-head small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--gm-soft);
}
.gm-booking--confirmed .gm-booking-icon,
.gm-booking--seated .gm-booking-icon {
  background: var(--ok-bg);
  color: var(--ok);
}
.gm-booking--requested .gm-booking-icon {
  background: var(--warn-bg);
  color: var(--warn);
}
.gm-booking--cancelled .gm-booking-icon,
.gm-booking--no_show .gm-booking-icon {
  background: var(--bad-bg);
  color: var(--bad);
}
.gm-booking-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0 0 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--gm-line);
}
.gm-booking-facts .is-wide {
  grid-column: 1 / -1;
}
.gm-booking-facts dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gm-soft);
}
.gm-booking-facts dd {
  margin: 0;
  font-weight: 600;
}
.gm-booking-call {
  justify-content: center;
  width: 100%;
}

/* ============ 17. Separate bills at one table ============ */

/* "Which bill?" on the cart and the waiter screen */
.bill-choice {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.bill-choice legend {
  margin-bottom: 4px;
  font-size: 0.85rem;
  font-weight: 700;
}
.bill-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.bill-option:has(input:checked) {
  border-color: var(--brand-500);
  background: var(--brand-50);
}
.bill-option input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-solid);
}
.bill-option span {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.bill-option strong {
  font-size: 0.9rem;
}
.bill-option small {
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* a table's page: one tab per order (bill) */
.bill-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--gap);
}
.bill-tab {
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.3;
  text-decoration: none;
}
.bill-tab:hover {
  color: var(--ink);
  border-color: var(--brand-500);
}
.bill-tab.is-active {
  border-color: var(--brand-solid);
  background: var(--brand-50);
}
.bill-tab small {
  font-size: 0.75rem;
  color: var(--ink-3);
}
.bill-tab--new {
  border-style: dashed;
  color: var(--brand-600);
}

/* ============ 19. POS: the staff order screen + the floor's counter chips ============ */

/* ---- layout: categories | dish tiles | the bill
   phones:   one column (category chips, tiles, bill) + the bottom bar
   992px+:   chips above the tiles | the bill sticks on the right
   1200px+:  categories as a list on the left | tiles | bill */
.pos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cats" "menu" "bill";
  gap: 14px;
  padding-bottom: 72px; /* room for the phone bar */
}
.pos-cats {
  grid-area: cats;
}
.pos-menu {
  grid-area: menu;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: calc(var(--topbar-h) + 70px);
}
.pos-bill {
  grid-area: bill;
  min-width: 0;
  scroll-margin-top: calc(var(--topbar-h) + 12px);
}
@media (min-width: 992px) {
  .pos {
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "cats bill" "menu bill";
    align-items: start;
    padding-bottom: 0;
  }
  .pos-bill {
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
  }
}
@media (min-width: 1200px) {
  .pos {
    grid-template-columns: 180px minmax(0, 1fr) 350px;
    grid-template-rows: auto;
    grid-template-areas: "cats menu bill";
  }
}

/* ---- categories: a chip row that scrolls sideways and sticks under the top bar */
.pos-cats {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  display: flex;
  gap: 8px;
  margin: -6px calc(var(--gutter) * -1) 0;
  padding: 8px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
}
.pos-cats::-webkit-scrollbar {
  display: none;
}
.pos-cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.pos-cat small {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-3);
}
.pos-cat:hover {
  border-color: var(--brand-300);
  color: var(--ink);
}
.pos-cat.is-active {
  border-color: var(--brand-solid);
  background: var(--brand-solid);
  color: #fff;
}
.pos-cat.is-active small {
  color: rgba(255, 255, 255, 0.82);
}
.pos-cat:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
@media (min-width: 992px) {
  .pos-cats {
    margin: -6px 0 0;
    padding: 6px 0 8px;
  }
}
/* 1200px+: a list on the left that stays in view */
@media (min-width: 1200px) {
  .pos-cats {
    top: calc(var(--topbar-h) + 16px);
    flex-direction: column;
    gap: 2px;
    max-height: calc(100vh - var(--topbar-h) - 32px);
    margin: 0;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
  }
  .pos-cat {
    justify-content: space-between;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    white-space: normal;
  }
  .pos-cat:hover {
    background: var(--surface-3);
  }
  .pos-cat.is-active {
    background: var(--brand-solid);
  }
}

/* ---- search + veg only */
.pos-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pos-tools .search-box {
  flex: 1 1 auto;
  min-width: 0;
}
.pos-section-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---- dish cards: tap one to add it (a coloured strip: green veg, red non-veg).
   Wide and short: name on top, price and − qty + under it; on phones one card
   a row, all on one line (name | price − qty +). */
.pos-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
@media (max-width: 575.98px) {
  .pos-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pos-tile {
  --food: var(--veg);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  min-height: 70px;
  margin: 0;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  color: var(--ink);
  font: inherit;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.1s var(--ease);
}
.pos-tile.food-non_veg {
  --food: var(--nonveg);
}
.pos-tile::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--food);
}
button.pos-tile:hover,
.pos-tile:has(> .pos-tile-hit:hover) {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-sm);
}
button.pos-tile:active,
.pos-tile:has(> .pos-tile-hit:active) {
  transform: scale(0.97);
}
.pos-tile:focus-visible,
.pos-tile:has(> .pos-tile-hit:focus-visible) {
  outline: none;
  box-shadow: var(--ring);
}
/* a dish without sizes: one button stretched over the whole tile adds one;
   the name and price let taps through, the − qty + takes its own */
.pos-tile-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.pos-tile-hit:focus-visible {
  outline: none;
  box-shadow: none; /* the tile shows the ring */
}
.pos-tile-hit:disabled {
  cursor: not-allowed;
}
.pos-tile > .pos-tile-name,
.pos-tile > .pos-tile-foot {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.pos-tile .pos-step {
  pointer-events: auto;
}
.pos-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 30px;
}
.pos-tile:has(.pos-tile-hit.htmx-request) {
  opacity: 0.6;
}
/* in the round: the tile turns light red */
.pos-tile:has(.pos-step--tile:not([hidden])) {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
[data-dish][hidden] {
  display: none;
}
.pos-tile-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pos-tile-name .food-dot {
  margin-right: 3px;
}
.pos-tile-price {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pos-tile-price small {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-3);
}
.pos-tile-out {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bad);
}
.pos-tile.is-out {
  background: var(--surface-3);
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
}
.pos-tile.htmx-request,
.pos-step button.htmx-request {
  opacity: 0.6;
}
/* the red count: how many of this dish are in the round */
.pos-tile-qty {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-solid);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}
.pos-tile:has(.pos-tile-qty:not([hidden])) {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.pos-tile:has(.pos-tile-qty:not([hidden])) .pos-tile-name {
  padding-right: 24px; /* room for the count */
}
/* phones: one card a row, on one line: name | price  − qty + */
@media (max-width: 575.98px) {
  .pos-tile {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 6px 10px 6px 14px;
  }
  .pos-tile > .pos-tile-name,
  .pos-tile > .pos-tile-foot {
    flex: 1 1 auto;
    min-width: 0;
  }
  .pos-tile > .pos-tile-foot {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
  }
  /* a dish with sizes: name | "3 sizes · from ₹199" (and its count) */
  button.pos-tile > .pos-tile-price,
  button.pos-tile > .pos-tile-out {
    flex: 0 0 auto;
    text-align: right;
  }
  .pos-tile .pos-tile-qty {
    top: 50%;
    transform: translateY(-50%);
  }
  .pos-tile:has(.pos-tile-qty:not([hidden])) {
    padding-right: 40px;
  }
  .pos-tile:has(.pos-tile-qty:not([hidden])) .pos-tile-name {
    padding-right: 0;
  }
}
/* a dish with sizes: the tile opens a small menu of its sizes */
.pos-tile-box > .pos-tile {
  width: 100%;
  height: 100%;
}
.pos-tile[aria-expanded="true"] {
  border-color: var(--brand-solid);
  box-shadow: var(--ring);
}
.pos-size-menu {
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}
.pos-size-head {
  margin: 2px 8px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-3);
}
/* one size: name and price, then − qty + (or "Add +" while none) */
.pos-size {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 46px;
  padding: 4px 4px 4px 10px;
  border-radius: 8px;
}
.pos-size + .pos-size {
  border-top: 1px dashed var(--line);
}
.pos-size-name span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pos-size-name strong {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.pos-size:has(.pos-step-count) {
  background: var(--brand-50);
}
/* − qty + on a tile or a size: a little smaller than the bill's (.pos-step, below) */
.pos-step.pos-step--tile {
  flex: 0 0 auto;
  height: 30px;
  border-radius: 9px;
}
.pos-step.pos-step--tile button {
  width: 28px;
}
.pos-step.pos-step--tile .pos-step-count {
  min-width: 20px;
  font-size: 0.85rem;
}
.pos-step.pos-step--tile:has(.pos-size-add) {
  border: 0;
  background: none;
}
.pos-step.pos-step--tile .pos-size-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--brand-300);
  border-radius: 9px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 0.78rem;
  font-weight: 700;
}
.pos-step.pos-step--tile .pos-size-add:hover {
  background: var(--brand-100);
}
.pos-bill .seg-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ---- the bill: head, (scrolling) lines and guest details, total + Send */
.pos-bill-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.pos-bill-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.pos-bill-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 1.15rem;
}
.pos-bill-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.pos-bill-head small {
  font-size: 0.78rem;
  color: var(--ink-3);
}
.pos-bill-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 16px;
}
.pos-bill-scroll .bill-choice {
  margin: 0;
}
.pos-bill-foot {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
@media (min-width: 992px) {
  /* the whole bill fits the screen under the page title, so Send is always in
     view; only its middle scrolls */
  .pos-bill-card {
    max-height: calc(100vh - var(--topbar-h) - 140px);
  }
  .pos-bill-scroll {
    overflow-y: auto;
  }
}
.pos-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pos-total span {
  font-weight: 700;
}
.pos-total small {
  margin-left: 4px;
  font-weight: 500;
  color: var(--ink-3);
}
.pos-total strong {
  font-family: var(--font-head);
  font-size: 1.4rem;
}

/* one line: name and rate | − qty + | amount */
.pos-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pos-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 64px;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.pos-line:first-child {
  padding-top: 0;
}
.pos-line:last-child {
  border-bottom: 0;
}
.pos-line-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}
.pos-line-name strong {
  font-size: 0.86rem;
  font-weight: 600;
}
.pos-line-name small {
  font-size: 0.72rem;
  color: var(--ink-3);
}
.pos-line-amount {
  font-size: 0.88rem;
  text-align: right;
}
.pos-step {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.pos-step button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--brand-600);
  cursor: pointer;
}
.pos-step button:hover {
  background: var(--brand-50);
}
.pos-step button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(var(--brand-rgb), 0.5);
}
.pos-step button.htmx-request {
  opacity: 0.5;
}
.pos-step-count {
  min-width: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.pos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 22px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.82rem;
  text-align: center;
}
.pos-empty i {
  font-size: 1.6rem;
  color: var(--brand-300);
}
.pos-empty strong {
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* guest details + kitchen note: folded away until needed */
.pos-guest {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
/* "Add items" to a delivery: whose order it is, instead of the guest form */
.pos-adding {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 0.875rem;
}
.pos-adding p {
  margin: 0;
}
.pos-adding p i {
  color: var(--ink-3);
}
.pos-adding-state {
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 600;
}
.pos-guest summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  font-size: 0.86rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.pos-guest summary::-webkit-details-marker {
  display: none;
}
.pos-guest summary::after {
  content: "\f282"; /* bi-chevron-down */
  margin-left: auto;
  font-family: "bootstrap-icons";
  color: var(--ink-3);
  transition: transform 0.15s var(--ease);
}
.pos-guest[open] summary::after {
  transform: rotate(180deg);
}
.pos-guest summary:focus-visible {
  outline: none;
  border-radius: var(--r-md);
  box-shadow: var(--ring);
}
.pos-guest-body {
  padding: 2px 12px 0;
}
.pos-guest-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}
.pos-guest .field-block {
  margin-bottom: 12px;
}
.pos-guest-hint {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--info-bg);
  color: var(--info);
  font-size: 0.78rem;
  font-weight: 600;
}
/* phones: no "Review & send" bar while the bill itself is on screen (static/js/waiter.js) */
.pos-bill-in-view .waiter-bar-slot {
  display: none;
}

/* ---- floor: the filter row (which days' bookings show + search) */
.floor-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.floor-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
}
.floor-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Today | This week | This month | Range: one segmented control */
.floor-periods {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  border-radius: 12px;
  background: var(--surface-3);
}
.floor-period {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.floor-period input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.floor-period span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.floor-period:hover span {
  color: var(--ink);
}
.floor-period input:checked + span {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.25);
}
.floor-period input:focus-visible + span {
  box-shadow: var(--ring);
}
/* the kitchen's Newest first / Oldest first: the same switch, in the page's buttons */
.kitchen-sort {
  align-self: center;
}
.kitchen-sort .floor-period span {
  min-height: 34px;
}
@media (max-width: 575.98px) {
  .kitchen-sort {
    display: flex;
    width: 100%;
  }
  .kitchen-sort .floor-period {
    flex: 1 1 0;
  }
  .kitchen-sort .floor-period span {
    justify-content: center;
    width: 100%;
  }
}
/* the two dates: only while Range is picked */
.floor-range {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-3);
}
.floor-when:has(input[value="range"]:checked) .floor-range {
  display: inline-flex;
}
.floor-range .form-control {
  width: 150px;
  min-height: 36px;
}
.floor-search {
  flex: 1 1 220px;
  max-width: 320px;
  margin-left: auto;
}
/* This week / This month / Range: the date-wise booking summary (orders/_booking_summary.html) */
.summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.summary-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}
.summary-title i {
  color: var(--violet);
}
.summary-sub {
  margin: 2px 0 0;
  font-size: 0.84rem;
  color: var(--ink-3);
}
.summary-day {
  padding: 14px 18px 4px;
}
.summary-day-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.summary-day-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.summary-day-head small {
  color: var(--ink-3);
  font-size: 0.8rem;
}
/* the calendar-leaf date: 24 / Oct */
.summary-date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 52px;
  border-radius: 12px;
  background: var(--violet);
  color: #fff;
  line-height: 1;
}
.summary-date strong {
  font-family: var(--font-tile);
  font-size: 1.35rem;
  font-weight: 800;
}
.summary-date small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* the tables of a day: small cards the size of the date, coloured like the floor's tiles */
.mini-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.mini-tile {
  --tile-ink: var(--ok);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 52px;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: var(--tile-ink);
  box-shadow: 0 2px 6px rgba(29, 26, 23, 0.12);
  color: #fff;
  font-family: var(--font-tile);
  line-height: 1.05;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s var(--ease), filter 0.12s var(--ease);
}
.mini-tile.tile-booked { --tile-ink: var(--bad); }
.mini-tile.tile-occupied { --tile-ink: var(--warn); }
.mini-tile.tile-billed { --tile-ink: var(--info); }
.mini-tile:hover {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.mini-tile:focus-visible {
  outline: 3px solid rgba(var(--brand-rgb), 0.45);
  outline-offset: 2px;
}
.mini-tile strong {
  font-size: 0.95rem;
  font-weight: 800;
  white-space: nowrap;
}
.mini-tile small {
  margin-top: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  opacity: 0.92;
  white-space: nowrap;
}
.summary-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
}
.summary-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.summary-tag {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--violet-bg);
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: 2px;
}
.tile-more {
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-weight: 700;
}
/* a green (free) table booked later today: a red "Booked 9:30 PM" note, the table is still free now */
.tile-later {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bad);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
/* "+1": more bookings for this table later today */
.tile-later-more,
.mini-tile-more {
  margin-left: 2px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--bad);
  font-size: 0.66rem;
  font-weight: 800;
}
.tile-state .tile-more {
  margin-left: 6px;
  padding: 1px 7px;
  background: #fff;
  color: var(--bad);
  font-size: 0.7rem;
}
/* the Floor's arrival panel (tables/_booking_arrive.html) */
.arrive-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--bad);
  border-radius: var(--r-md);
  background: var(--bad-bg);
}
.arrive-time {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 58px;
  border-radius: 12px;
  background: var(--bad);
  color: #fff;
  line-height: 1;
}
.arrive-time strong {
  font-family: var(--font-tile);
  font-size: 1.25rem;
  font-weight: 800;
}
.arrive-time small {
  margin-top: 3px;
  font-size: 0.7rem;
  font-weight: 700;
}
.arrive-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.arrive-who strong {
  font-size: 1.05rem;
}
.arrive-who span {
  font-size: 0.82rem;
  color: var(--ink-2);
}
.arrive-who a {
  font-size: 0.85rem;
  text-decoration: none;
}
.arrive-help {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--ink-2);
}
/* the booking form: "How long" buttons between From and Until */
.length-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: -4px 0 14px;
}
.length-label {
  margin-right: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-3);
}
.length-chip {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.length-chip:hover {
  border-color: var(--violet);
  color: var(--violet);
}
.length-chip.is-active {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
}
/* a booking's length on its row, e.g. "2 h", "2 days" */
.booking-length {
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--violet-bg);
  color: var(--violet);
  font-size: 0.7rem;
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .floor-search {
    max-width: none;
    margin-left: 0;
  }
  .floor-period span {
    padding: 0 9px;
    font-size: 0.8rem;
  }
}

/* ---- floor: Take away and Deliveries as chips in the Free / Occupied row */
.legend-sep {
  width: 1px;
  height: 22px;
  margin: 0 2px;
  background: var(--line-strong);
}
.legend-counter {
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.legend-counter i {
  color: var(--brand-600);
}
.legend-counter:hover {
  border-color: var(--brand-300);
  color: var(--ink);
}
.legend-counter.has-orders {
  border-color: var(--brand-solid);
  background: var(--brand-50);
  color: var(--brand-700);
}
.legend-counter--delivery i {
  color: var(--info);
}
.legend-counter--delivery.has-orders {
  border-color: var(--info);
  background: var(--info-bg);
  color: var(--info);
}
/* "ready" bell / "to confirm" phone on a chip */
.legend-alert {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ok);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}
.legend-alert i,
.legend-counter .legend-alert i {
  color: #fff;
}
.legend-alert--call {
  background: var(--warn);
}
@media (prefers-reduced-motion: no-preference) {
  .legend-alert {
    animation: pulse 1.6s ease-in-out infinite;
  }
}

/* ============ 20. App feel on phones and tablets: the bottom bar, safe areas ============ */
/* Below 992px the staff pages work like a phone app: the sidebar becomes a
   drawer (opened by More), and a bottom bar holds the role's main pages
   (partials/_bottom_nav.html). Safe areas keep everything clear of a phone's
   notch and home bar, also once the app is added to the home screen. */
:root {
  --bottom-nav-h: 62px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* taps feel like an app: no grey flash, no double-tap zoom on controls */
body {
  -webkit-tap-highlight-color: transparent;
}
a,
button,
.btn,
label,
summary,
[role="button"] {
  touch-action: manipulation;
}
.bottom-nav,
.topbar-mark {
  display: none;
}
@media (max-width: 991.98px) {
  .bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1025; /* over the page, under the drawer and side panel */
    display: flex;
    align-items: stretch;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) var(--safe-bottom) max(6px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 -6px 20px rgba(29, 26, 23, 0.06);
  }
  .bottom-nav {
    justify-content: center; /* tablets: the items stay together in the middle */
  }
  .bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-3);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
  }
  .bottom-nav-item i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 30px;
    border-radius: 999px;
    font-size: 1.2rem;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
  }
  .bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-nav-item:hover,
  .bottom-nav-item:focus-visible {
    color: var(--ink);
    box-shadow: none;
  }
  .bottom-nav-item:focus-visible i,
  .bottom-nav-item:active i {
    background: var(--surface-3);
  }
  .bottom-nav-item.active {
    color: var(--brand-600);
  }
  .bottom-nav-item.active i {
    background: var(--brand-50);
    color: var(--brand-solid);
  }
  /* room under every page for the bar */
  .app-content {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 28px);
  }
  /* the POS screen's "Review & send" bar sits just above it */
  .waiter-bar-slot {
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: 10px;
  }
  /* the top bar: ☰ at the far left, then the brand mark, like an app's header */
  .topbar-menu {
    margin-left: -8px;
    font-size: 1.5rem;
    color: var(--ink);
  }
  .topbar-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand-solid);
    color: #fff;
    font-size: 1rem;
  }
}

/* ============ 21. Cafe profile: tabs, Bill & print, Printers (direct print) ============ */
.profile-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  scrollbar-width: none;
}
.profile-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.profile-tab:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.profile-tab.is-active {
  background: var(--brand-solid);
  color: #fff;
}

/* Bill & print: the bill as it prints, small */
.bill-preview {
  display: grid;
  gap: 4px;
  max-width: 300px;
  margin: 0 auto;
  padding: 18px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  text-align: center;
  color: var(--ink);
}
.bill-preview strong {
  font-size: 0.95rem;
}
.bill-preview small {
  color: var(--ink-2);
}
.bill-preview-logo {
  max-width: 96px;
  max-height: 64px;
  margin: 0 auto 4px;
  object-fit: contain;
  filter: grayscale(1);
}
.bill-preview-title {
  margin: 6px 0;
  padding: 4px 0;
  border-block: 1px dashed var(--line-strong);
  font-weight: 700;
}
.bill-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}
.bill-preview-total {
  margin: 4px 0;
  padding-top: 4px;
  border-top: 1px dashed var(--line-strong);
  font-weight: 700;
}
.bill-preview-qr {
  width: 110px;
  height: 110px;
  margin: 6px auto 0;
  object-fit: contain;
}
.photo-current--qr img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.helper-off {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--warn-bg);
  color: var(--warn);
}
.helper-off > i {
  font-size: 1.3rem;
}
.helper-off > div {
  flex: 1 1 220px;
  display: grid;
  gap: 2px;
  font-size: 0.875rem;
}
.helper-off strong {
  color: var(--ink);
}
.printer-choice {
  margin-bottom: 18px;
}
.printer-choice .form-label i {
  margin-right: 4px;
  color: var(--ink-3);
}
.printer-pick {
  display: flex;
  gap: 8px;
}
.printer-pick .form-select {
  flex: 1 1 auto;
  min-width: 0;
}
.printer-pick .btn {
  flex: 0 0 auto;
}
.setup-steps {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding-left: 1.3rem;
  font-size: 0.9rem;
}
.setup-steps li::marker {
  font-weight: 700;
  color: var(--brand-solid);
}
.setup-steps .btn {
  display: flex;
  width: fit-content;
}
/* a print button while its slip is on the way */
[data-print-slip].is-printing {
  opacity: 0.55;
  pointer-events: none;
}

/* the festival offer running today, on the bill screen (Cafe profile > Offers) */
.offer-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--violet-bg);
  color: var(--ink);
  font-size: 0.875rem;
}
.offer-note i {
  color: var(--violet);
  font-size: 1.05rem;
}

/* ============ 22. Tables & QR: the order menu's and the view-only menu's QR ============ */
.menu-qr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
  padding: 0 20px 20px;
}
.menu-qr-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.menu-qr-code {
  flex: 0 0 auto;
  padding: 6px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--line);
}
.menu-qr-code img {
  display: block;
  width: 112px;
  height: 112px;
}
.menu-qr-text {
  min-width: 0;
}
.menu-qr-text h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
}
.menu-qr-text h3 i {
  color: var(--brand-solid);
}
.menu-qr-text p {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-size: 0.85rem;
}
.menu-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 420px) {
  .menu-qr-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .menu-qr-actions {
    justify-content: center;
  }
}

/* ============ 23. Dashboard: period, right now, changes, wide charts ============ */
.now-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-bottom: var(--gap);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  font-size: 0.875rem;
}
.now-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink);
}
.now-strip a {
  color: var(--ink-2);
  text-decoration: none;
}
.now-strip a:hover {
  color: var(--brand-solid);
}
.now-strip strong {
  color: var(--ink);
}
.dash-period {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0 0 10px;
}
.dash-period span {
  color: var(--ink-3);
  font-size: 0.85rem;
}
.delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
}
.delta-up {
  color: var(--ok);
}
.delta-down {
  color: var(--bad);
}
.delta-flat {
  font-weight: 500;
  color: var(--ink-3);
}
.dash-wide {
  grid-column: 1 / -1;
}
/* the trend: as many bars as hours or days */
.dash-wide .vbar-chart,
.ceo .vbar-chart {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.vbar-chart--dense .vbar-fill {
  width: 80%;
  border-radius: 2px 2px 0 0;
}
.hbar-label small {
  margin-left: 4px;
  font-weight: 500;
  color: var(--ink-3);
}

/* ---- the CEO dashboard (core/_dashboard_body.html) ----
   Chart colours are the validated reference palette (dataviz method), never the
   brand red: red means "late / bad" in this app. One hue for one series; three
   slots for the three order types (blue, orange, aqua: validated all-pairs on the
   white panel, aqua below 3:1 so every value is written beside its mark); a
   one-hue light-to-dark ramp for the heat map. */
.ceo {
  --viz-1: #2a78d6;
  --viz-1-soft: #9ec5f4;
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
  --heat-0: #f2f1ee;
  --heat-1: #cde2fb;
  --heat-2: #9ec5f4;
  --heat-3: #5598e7;
  --heat-4: #2a78d6;
  --heat-5: #184f95;
  --viz-good: #0ca30c;
  --viz-warn: #fab219;
  --viz-bad: #d03b3b;
}
.ceo .hbar-fill,
.ceo .vbar.is-today .vbar-fill,
.ceo .vbar:hover .vbar-fill {
  background: var(--viz-1);
}
.ceo .vbar-fill {
  background: var(--viz-1-soft);
}
.ceo .hbar-list li:hover .hbar-fill {
  background: #1c5cab;
}
.viz-1 { background: var(--viz-1); }
.viz-2 { background: var(--viz-2); }
.viz-3 { background: var(--viz-3); }

/* section headings: the dashboard reads top to bottom like a board report */
.ceo-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.ceo-section i {
  color: var(--ink-3);
}
.ceo-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}
.ceo-label i {
  color: var(--ink-3);
}

/* the headline: one hero figure, then six tiles */
.ceo-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  gap: var(--gap);
}
.ceo-hero > *,
.ceo-kpis > *,
.ceo-leaks > * {
  min-width: 0;
}
.ceo-hero-card,
.ceo-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
a.ceo-hero-card:hover,
a.ceo-kpi:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
.ceo-hero-value {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.ceo-hero-delta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.ceo-hero-delta > span:last-child {
  color: var(--ink-3);
}
.ceo-spark {
  width: 100%;
  height: 56px;
  margin-top: auto;
}
.ceo-spark polyline {
  stroke: var(--viz-1);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ceo-hero-note {
  color: var(--ink-3);
  font-size: 0.78rem;
}
.ceo-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.ceo-kpi strong {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}
.ceo-kpi .delta {
  font-size: 0.8rem;
}

/* the sections' grids: two panels a row (a wide chart takes both), or three */
.ceo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.ceo-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ceo-span-2 {
  grid-column: span 2;
}
.ceo-grid > * {
  min-width: 0;  /* a wide chart scrolls inside its panel, never widens the page */
}
.ceo-grid > .panel {
  height: 100%;
}
.ceo .panel-title i {
  color: var(--ink-3);
}

/* a stacked bar: 2px surface gap between segments, 4px rounded ends */
.stack-bar {
  display: flex;
  gap: 2px;
  height: 22px;
  margin-bottom: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
}
.stack-seg {
  min-width: 2px;
}
.ceo-legend {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.ceo-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 10px;
}
.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.ceo-legend-label {
  color: var(--ink-2);
  font-weight: 600;
}
.ceo-legend-label small {
  margin-left: 4px;
  font-weight: 500;
  color: var(--ink-3);
}
.ceo-legend strong,
.ceo-legend-share {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ceo-legend-share {
  color: var(--ink-3);
}

/* the pivot heat map: weekday x hour; cells in one hue from light to dark */
.heat-wrap {
  position: relative;
  overflow-x: auto;
}
.heat {
  width: 100%;
  min-width: 420px;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 0.72rem;
}
.heat th {
  padding: 2px 4px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: center;
  white-space: nowrap;
}
.heat tbody th {
  text-align: left;
  width: 38px;
}
.heat td {
  position: relative;  /* keeps each cell's hidden value (for screen readers) inside the scroll box */
  height: 26px;
  border-radius: 4px;
}
.heat-0 { background: var(--heat-0); }
.heat-1 { background: var(--heat-1); }
.heat-2 { background: var(--heat-2); }
.heat-3 { background: var(--heat-3); }
.heat-4 { background: var(--heat-4); }
.heat-5 { background: var(--heat-5); }
.heat td:hover {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}
.heat-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.heat-legend i {
  width: 18px;
  height: 12px;
  border-radius: 3px;
}
.heat-legend span:first-child {
  margin-right: 4px;
}
.heat-legend span:last-child {
  margin-left: 4px;
}

/* small figures inside an operations panel */
.ceo-mini {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.ceo-mini div {
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.ceo-mini dt {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-3);
}
.ceo-mini dd {
  margin: 2px 0 0;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}
.ceo-small-title {
  margin: 16px 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hbar-list--tight {
  gap: 8px;
}
.hbar-list--tight li {
  grid-template-columns: 84px minmax(0, 1fr) 72px;
  gap: 10px;
}
.ceo-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.ceo-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.ceo-list li:last-child {
  border-bottom: 0;
}
.ceo-list small {
  margin-left: 4px;
  color: var(--ink-3);
}
.ceo-list strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* a meter for a rate: the fill carries the state (with an icon and the number) */
.meter {
  display: grid;
  gap: 6px;
}
.meter-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--ink-2);
}
.meter-top strong {
  color: var(--ink);
  white-space: nowrap;
}
.meter-track {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--viz-1);
}
.meter--good .meter-fill { background: var(--viz-good); }
.meter--good .meter-top i { color: var(--viz-good); }
.meter--warn .meter-fill { background: var(--viz-warn); }
.meter--warn .meter-top i { color: #a16207; }
.meter--bad .meter-fill { background: var(--viz-bad); }
.meter--bad .meter-top i { color: var(--viz-bad); }

/* what leaks away: four tiles in a row */
.ceo-leaks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.ceo-bills {
  margin-top: var(--gap);
}

/* laptops and tablets: fewer columns; phones: one */
@media (max-width: 1199.98px) {
  .ceo-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .ceo-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ceo-leaks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .ceo-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ceo-grid,
  .ceo-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .ceo-span-2 {
    grid-column: auto;
  }
  .ceo-kpi,
  .ceo-hero-card {
    padding: 14px 16px;
  }
}

/* ============ 24. Locations and roles ============ */
/* the top bar's location switcher */
.location-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 200px;
  margin-right: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}
.location-chip > i:first-child {
  color: var(--brand-solid);
}
.location-chip:hover {
  border-color: var(--line-strong);
}
@media (max-width: 575.98px) {
  .location-chip {
    max-width: 130px;
    margin-right: 4px;
    padding: 6px 10px;
  }
}
/* a list of tick boxes (the staff form's "Works at") */
.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px 14px;
}
.check-list .form-check {
  margin: 0;
}
/* the Staff tab's "Who can do what" */
.role-matrix th,
.role-matrix td {
  white-space: nowrap;
}
.role-matrix td:first-child {
  font-weight: 600;
  white-space: normal;
}
.role-yes {
  color: var(--ok);
}
.role-no {
  color: var(--ink-3);
}

/* ============ 18. Small phones (under 375px wide, e.g. 320 / 360) ============ */
/* the guest menu keeps its look, just a little tighter so names fit on one line */
@media (max-width: 374.98px) {
  .gm-banner {
    min-height: 0;
    padding: 16px 14px 16px 18px;
  }
  .gm-banner h1 {
    font-size: 1.45rem;
  }
  .gm-banner p {
    font-size: 0.78rem;
  }
  .gm-banner-art {
    width: 84px;
    height: 84px;
    margin-right: 0;
  }
  .gm-banner-logo {
    padding: 10px;
    border-radius: 16px;
  }
  .gm-section {
    padding: 8px;
  }
  .gm-dish {
    gap: 10px;
    min-height: 128px;
    padding: 7px 10px 7px 7px;
  }
  .gm-dish-photo {
    width: 92px;
    min-height: 112px;
  }
  .gm-dish-name {
    font-size: 0.9rem;
  }
  .gm-plus {
    min-width: 70px;
    padding: 0 10px;
  }
  .gm-stepper button {
    width: 28px;
  }
}