:root {
  --bg: #0f1420; --surface: #171d2e; --surface-2: #202940; --surface-3: #2a3450;
  --text: #f5f3ef; --text-dim: #a9b0c3; --text-faint: #6b7590; --border: rgba(255,255,255,0.08);
  --accent: #ff7a45; --accent-ink: #1a1206; --new: #60a5fa; --preparing: #fbbf24; --danger: #f87171;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --testing-banner-h: 0px;
  color-scheme: dark;
}
body.testing-mode-active { --testing-banner-h: 38px; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); }
body { padding-top: calc(env(safe-area-inset-top, 0px) + var(--testing-banner-h)); padding-bottom: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
button { font-family: inherit; }

.login-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.brand-mark {
  width: 190px; height: auto; padding: 10px 14px; background: #fff; border-radius: 14px;
  animation: brandIn 0.6s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.brand-mark.small { width: 84px; padding: 6px 8px; border-radius: 9px; flex: none; }
@keyframes brandIn { from { opacity: 0; transform: translateY(-8px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
.login-screen h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0; }
.login-screen p { color: var(--text-dim); margin: 0; }
.pin-input {
  font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; width: 220px; padding: 14px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.login-screen button.primary { padding: 13px 28px; border: none; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 1rem; cursor: pointer; }
.login-error { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; }
.remote-unlock-note {
  max-width: 280px; font-size: 0.8rem; line-height: 1.5; color: var(--text-dim);
  background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; padding: 12px 14px;
}
.link-btn {
  background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

.board-header {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--testing-banner-h)); z-index: 10; display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 10px;
  padding: 16px 20px; background: rgba(15,20,32,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.testing-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 38px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: #d97706; color: #fff; text-align: center; font-size: 0.78rem; font-weight: 700; padding: 0 14px;
}
.board-brand { display: flex; align-items: center; gap: 12px; }
.board-header h1 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.board-header .sub { font-size: 0.78rem; color: var(--text-faint); }
.board-header button.logout { background: none; border: 1px solid var(--border); color: var(--text-dim); padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; cursor: pointer; }
.board-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.clock-btn { background: none; border: 1px solid var(--accent); color: var(--accent); padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
@media (max-width: 420px) {
  .board-header { padding: 14px 16px; }
  .board-brand .sub { display: none; }
  .board-header button.logout { padding: 7px 11px; font-size: 0.74rem; }
}

/* Deliberately a different color family (amber) from both the order-status
   colors and the plain surface used for real orders — a glance should be
   enough to tell "nothing's been ordered yet here" apart from an actual
   ticket, even in a busy moment. */
.live-carts-section {
  margin: 12px 18px 4px; padding: 14px 14px 16px; border-radius: 16px;
  background: rgba(217, 119, 6, 0.08); border: 1px solid rgba(217, 119, 6, 0.25);
}
.live-carts-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em;
  color: #d97706; margin-bottom: 10px;
}
.live-carts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.live-cart-card {
  background: var(--surface); border: 1.5px dashed rgba(217, 119, 6, 0.4); border-radius: 14px; padding: 12px 14px;
}
.live-cart-table { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.live-cart-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.live-cart-card li { font-size: 0.82rem; color: var(--text-faint); }
.live-cart-card li .qty { color: var(--text-dim); font-weight: 700; margin-right: 5px; }
.still-deciding {
  display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--border); font-size: 0.74rem; color: #d97706; font-weight: 600;
}

.deciding-dots { display: inline-flex; gap: 3px; }
.deciding-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block;
  animation: decidingBounce 1.1s ease-in-out infinite;
}
.deciding-dots i:nth-child(2) { animation-delay: 0.15s; }
.deciding-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes decidingBounce { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

.board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; padding: 18px;
}
.date-group-header {
  grid-column: 1 / -1; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  padding: 10px 4px 0; color: var(--text);
}
.date-filter-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.new-order-banner {
  position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 90;
  background: var(--accent); color: var(--accent-ink); border: none; border-radius: 14px;
  padding: 13px 16px; font-size: 0.88rem; font-weight: 600; text-align: left; line-height: 1.4;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35); cursor: pointer; animation: bannerIn 0.3s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.new-order-banner strong { font-weight: 800; }
@keyframes bannerIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
.empty-state { padding: 60px 20px; text-align: center; color: var(--text-faint); grid-column: 1 / -1; }

.order-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px;
  border-top: 4px solid var(--border); transition: border-top-color 0.3s;
  display: flex; flex-direction: column; gap: 10px;
}
.order-card.tile-in {
  animation: tileIn 0.45s cubic-bezier(0.2, 0.85, 0.25, 1) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes tileIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* The border tracks the same urgency the timer badge does — how long
   it's actually been waiting — rather than just which status it's in. */
.order-card.timer-warning { border-top-color: var(--preparing); }
.order-card.timer-critical { border-top-color: var(--danger); }
.order-card .head { display: flex; justify-content: space-between; align-items: baseline; }
.order-card .table-no { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.order-card .customer-name { font-size: 0.82rem; color: var(--text-dim); font-weight: 600; }
.order-card .meta { font-size: 0.78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.order-card .status-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--new); }
.order-card.preparing .status-tag { color: var(--preparing); }
.test-chip {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px;
  border-radius: 999px; background: rgba(217, 119, 6, 0.22); color: #fbbf24; margin-left: 4px;
}
.cash-due-chip {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px;
  border-radius: 999px; background: rgba(34, 197, 94, 0.2); color: #4ade80; margin-left: 4px;
}
.cash-paid-chip {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px;
  border-radius: 999px; background: rgba(148, 163, 184, 0.18); color: var(--text-dim); margin-left: 4px;
}
.order-card .head-right { display: flex; align-items: center; gap: 8px; }
.order-timer {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.82rem; color: var(--text-dim);
  padding: 2px 8px; border-radius: 999px; background: var(--surface-3); transition: background 0.3s, color 0.3s;
}
.order-timer.warning { background: rgba(251, 191, 36, 0.18); color: var(--preparing); }
.order-timer.critical { background: rgba(248, 113, 113, 0.2); color: var(--danger); animation: timerPulse 1.4s ease-in-out infinite; }
@keyframes timerPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.order-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.order-card li { display: flex; justify-content: space-between; font-size: 0.9rem; }
.order-card li .qty { color: var(--accent); font-weight: 700; margin-right: 6px; }
.order-card .note { font-size: 0.82rem; color: var(--text-dim); background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
.cancel-reason-note { font-size: 0.82rem; color: var(--danger); background: rgba(248, 113, 113, 0.12); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }

.cancel-modal .field { margin-bottom: 14px; text-align: left; }
.cancel-modal .field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.cancel-modal .field select, .cancel-modal .field input[type="text"] {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 0.9rem; box-sizing: border-box; font-family: inherit;
}
.cancel-modal-actions { display: flex; gap: 10px; margin-top: 6px; }
.cancel-modal-actions button { flex: 1; border: none; border-radius: 10px; padding: 12px; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.cancel-modal-actions .subtle-btn { background: var(--surface-3); color: var(--text-dim); }
.cancel-modal-actions .danger-btn { background: var(--danger); color: #2a0a0a; }
.order-card .money { border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.order-card .money .row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.order-card .money .row.dim { font-size: 0.72rem; color: var(--text-faint); }
.order-card .money .row.total { color: var(--text); font-weight: 700; font-size: 0.88rem; }
.order-card.needs-attention { box-shadow: 0 0 0 2px var(--new); animation: attentionPulse 1.8s ease-in-out infinite; }
@keyframes attentionPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--new); } 50% { box-shadow: 0 0 0 2px transparent; } }
.details-link { background: none; border: none; color: var(--text-faint); font-size: 0.76rem; font-weight: 700; text-decoration: underline; padding: 0; text-align: left; cursor: pointer; }

.duration-chip {
  display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.duration-chip.good { background: rgba(74, 222, 128, 0.16); color: #4ade80; }
.duration-chip.warning { background: rgba(251, 191, 36, 0.18); color: var(--preparing); }
.duration-chip.critical { background: rgba(248, 113, 113, 0.2); color: var(--danger); }

/* ---- modal (order detail) ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 260; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px;
  width: 100%; max-width: 440px; max-height: 88dvh; overflow-y: auto;
}
.modal h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.detail-sub { font-size: 0.85rem; color: var(--text-faint); margin: 0 0 14px; }
.detail-timeline { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.detail-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; padding: 5px 0; color: var(--text-dim); }
.detail-row span:first-child { font-weight: 600; color: var(--text); flex: none; }
.detail-row span:last-child { text-align: right; }
.detail-items { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.detail-items li { display: flex; justify-content: space-between; font-size: 0.9rem; }
.detail-items .qty { color: var(--accent); font-weight: 700; margin-right: 6px; }
.modal button.primary.block { width: 100%; margin-top: 14px; border: none; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 12px; font-size: 0.9rem; cursor: pointer; }

.order-card .actions { display: flex; gap: 8px; margin-top: 4px; }
.order-card .actions.stacked { flex-direction: column; }
.order-card .actions.stacked .cancel { flex: none; width: 100%; }
.order-card .actions button {
  flex: 1; border: none; border-radius: 10px; padding: 10px; font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.order-card .actions .advance { background: var(--accent); color: var(--accent-ink); }
.order-card .actions .cancel { background: var(--surface-2); color: var(--text-faint); flex: 0 0 auto; padding: 10px 14px; }
.order-card .actions .cash-paid-btn { background: #22c55e; color: #06210f; }

/* nowrap (+ a horizontal-scroll fallback for anything still too narrow to
   fit) keeps the date nav on the same row as Active/History instead of
   wrapping onto a line of its own underneath them. */
.tabs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px 12px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.tabs-row::-webkit-scrollbar { display: none; }
.tabs { display: flex; gap: 8px; flex: none; }
.tabs button { border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); padding: 8px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tabs button.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.tabs button .tab-badge {
  display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 16px; text-align: center;
}
.tabs button.active .tab-badge { background: var(--accent-ink); color: var(--accent); }

.date-nav { display: flex; align-items: center; gap: 6px; position: relative; flex: none; margin-left: auto; }
.date-arrow {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex: none;
}
.date-arrow:disabled { opacity: 0.35; cursor: default; }
.date-label-btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); padding: 7px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; flex: none;
}
.date-label-btn svg { width: 15px; height: 15px; color: var(--text-faint); flex: none; }

@media (max-width: 420px) {
  .date-label-btn { padding: 7px 10px; font-size: 0.78rem; }
  .date-arrow { width: 26px; height: 26px; font-size: 1rem; }
}

.busy-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 13, 20, 0.78); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.busy-spin { position: relative; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; }
.busy-spin img { width: 52px; height: 52px; }
.busy-ring { position: absolute; inset: 0; width: 92px; height: 92px; animation: busyRotate 1.1s linear infinite; }
.busy-ring circle { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 70 200; transform-origin: 50% 50%; }
@keyframes busyRotate { to { transform: rotate(360deg); } }
.busy-label { color: var(--text-dim); font-size: 0.85rem; font-weight: 600; }
.busy-overlay.big .busy-spin, .busy-overlay.big .busy-ring { width: 128px; height: 128px; }
.busy-overlay.big .busy-spin img { width: 72px; height: 72px; }
.busy-overlay.big .busy-label { font-size: 1.15rem; max-width: 320px; text-align: center; }

/* ---------- face camera (clock in/out verification) ---------- */

.face-camera-overlay {
  position: fixed; inset: 0; z-index: 300; background: #000; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.face-camera-overlay video {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);
}
.face-camera-overlay canvas { display: none; }
.face-guide-oval {
  position: relative; z-index: 1; width: 62vw; max-width: 280px; aspect-ratio: 3 / 4; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.85); box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
}
.face-hint {
  position: absolute; z-index: 1; top: calc(env(safe-area-inset-top, 0px) + 22px); left: 20px; right: 20px;
  color: #fff; font-size: 0.9rem; font-weight: 700; text-align: center; margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.face-camera-actions {
  position: absolute; z-index: 1; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px); left: 0; right: 0;
  display: flex; gap: 14px; justify-content: center;
}
.face-cancel-btn {
  background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.45);
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.face-capture-btn {
  background: #fff; color: #171d2e; border: none; padding: 12px 30px; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Loyverse: receipt status and the "Mark paid" sheet ---- */
.lv-chip { font-size: 0.72rem; font-weight: 700; padding: 5px 9px; border-radius: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.lv-chip.sent { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.lv-chip.pending { background: rgba(251, 191, 36, 0.14); color: var(--preparing); }
.lv-chip.failed { background: rgba(248, 113, 113, 0.16); color: var(--danger); }
.lv-chip.skipped { background: var(--surface-2); color: var(--text-dim); }
.modal .lv-chip { margin: 0 0 12px; }
.line-mods { color: var(--text-faint); font-size: 0.78rem; }
.pay-modal .pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.pay-method { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 1.5rem; padding: 16px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; }
.pay-method span { font-size: 1rem; font-weight: 700; }
.pay-method:active { transform: scale(0.97); }
.pay-method.pay-tab { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; padding: 12px 8px; }
.pay-method small { font-size: 0.75rem; color: var(--text-dim); font-weight: 400; }
.pay-hint { font-size: 0.8rem; color: var(--text-dim); margin: 0 0 10px; line-height: 1.45; }
.pay-modal .link-btn { display: block; margin: 8px 0; font-size: 0.85rem; }
.split-part { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.split-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.split-sum { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.split-seg { display: inline-flex; background: var(--surface-3); border-radius: 999px; padding: 2px; }
.split-seg button { border: none; background: none; color: var(--text-dim); font-weight: 700; font-size: 0.78rem; padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.split-seg button.on { background: var(--accent); color: var(--accent-ink); }
.split-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.85rem; padding: 4px 0; }
.split-line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.split-step { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.split-step button { width: 32px; height: 32px; border-radius: 9px; border: none; background: var(--surface-3); color: var(--text); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.split-step button:disabled { opacity: 0.35; }
.split-step b { min-width: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.split-left { font-size: 0.8rem; color: var(--text-dim); margin: 6px 0 0; }
.modal button.primary.block:disabled { opacity: 0.45; }

/* icon set (js/icons.js): lines take the text colour, the soft fill --icon-2 */
svg.i { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; overflow: visible; --icon-2: color-mix(in srgb, currentColor 18%, transparent); }