/* ===================================================================
   DASHBOARD
   Sidebar nav + the Overview, Tables and Orders tabs.
   Only used by #view-dashboard (plus the modals that sit alongside it
   — see the Wi-Fi QR block near the bottom of this file).
=================================================================== */
#view-dashboard{display:flex;min-height:100vh;background:var(--ink-navy);color:var(--text-on-navy);}

/* --- Sidebar --- */
.sidebar{
  width:230px;flex-shrink:0;background:var(--surface-navy);border-right:1px solid var(--line-navy);
  display:flex;flex-direction:column;padding:26px 18px;position:sticky;top:0;height:100vh;
}
.sidebar .brand{color:var(--text-on-navy);margin-bottom:34px;padding:0 6px;}
.navlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;flex:1;}
.nav-section-label{
  font-family:var(--ff-mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-on-navy-dim);opacity:.65;padding:16px 14px 4px;
}
.nav-section-label:first-child{padding-top:2px;}
.navlist button{
  width:100%;text-align:left;background:none;border:none;color:var(--text-on-navy-dim);
  padding:11px 14px;border-radius:9px;font-size:14.5px;font-weight:500;
  display:flex;align-items:center;gap:11px;transition:background .15s, color .15s;
}
.navlist button svg{width:17px;height:17px;flex-shrink:0;}
.navlist button:hover{background:var(--surface-navy-raised);color:var(--text-on-navy);}
.navlist button.active{background:var(--lamp-soft);color:var(--lamp);}
.sidebar-foot{border-top:1px solid var(--line-navy);padding-top:16px;margin-top:10px;}
.theme-toggle{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);color:var(--text-on-navy-dim);
  padding:9px 14px;border-radius:9px;font-size:13px;font-weight:600;margin-bottom:14px;
  transition:border-color .15s, color .15s;
}
.theme-toggle:hover{border-color:var(--lamp);color:var(--lamp);}
.theme-toggle svg{width:15px;height:15px;flex-shrink:0;}
.theme-toggle .icon-sun{display:none;}
[data-theme="day"] .theme-toggle .icon-moon{display:none;}
[data-theme="day"] .theme-toggle .icon-sun{display:block;}
.sidebar-foot .who{font-size:12.5px;color:var(--text-on-navy-dim);margin:0 0 10px;padding:0 6px;}
.sidebar-foot .who b{color:var(--text-on-navy);display:block;font-size:14px;font-weight:600;}
.logout-btn{
  width:100%;background:none;border:1px solid var(--line-navy);color:var(--text-on-navy-dim);
  padding:9px 14px;border-radius:9px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:9px;
}
.logout-btn:hover{border-color:var(--coral);color:var(--coral);}

/* --- Main content area --- */
.main{flex:1;padding:38px 44px;overflow-y:auto;}
.main-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;flex-wrap:wrap;gap:14px;}
.main-head h1{font-family:var(--ff-display);font-size:30px;margin:0 0 6px;font-weight:600;}
.main-head p{margin:0;color:var(--text-on-navy-dim);font-size:14.5px;}

/* --- Overview: stat cards --- */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:36px;}
.stat-card{background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:var(--radius);padding:22px;}
.stat-card .slabel{font-family:var(--ff-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-on-navy-dim);margin-bottom:10px;}
.stat-card .sval{font-family:var(--ff-display);font-size:28px;font-weight:600;}
.stat-card .sval.lamp{color:var(--lamp);}

.panel{background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:var(--radius);padding:26px;}
.panel h2{font-family:var(--ff-display);font-size:18px;margin:0 0 18px;font-weight:600;}

/* --- Tables tab: table grid (POS-style cards) ---
   Redesigned for peak-hour scanability: a colored left edge reads
   status from across the room, a "ticket" block puts time-left and
   running total side by side in large mono figures, and actions live
   in a fixed icon toolbar at the bottom so every card has controls in
   the same place regardless of content length. */
.desk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.desk-card{
  background:var(--surface-navy);border:1px solid var(--line-navy);border-left:4px solid var(--line-navy);
  border-radius:var(--radius);padding:16px 16px 12px;position:relative;overflow:hidden;
  transition:border-color .2s, transform .15s;cursor:pointer;
  display:flex;flex-direction:column;min-height:272px;
}
.desk-card:hover{border-color:var(--sage);transform:translateY(-2px);}
.desk-card.available{border-left-color:var(--sage);}
.desk-card.occupied{border-color:var(--lamp);border-left-color:var(--lamp);box-shadow:0 0 0 1px var(--lamp) inset, 0 0 26px -10px var(--lamp-glow);animation:lampPulse 3.2s ease-in-out infinite;}
.desk-card.occupied:hover{border-color:var(--lamp);}
.desk-card.occupied.is-overdue{border-left-color:var(--coral);}
@keyframes lampPulse{0%,100%{box-shadow:0 0 0 1px var(--lamp) inset,0 0 18px -10px var(--lamp-glow);}50%{box-shadow:0 0 0 1px var(--lamp) inset,0 0 30px -8px var(--lamp-glow);}}

.desk-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.desk-name{font-family:var(--ff-display);font-size:19px;font-weight:600;}
.lamp-icon{width:22px;height:22px;color:var(--line-navy);transition:color .2s;}
.desk-card.occupied .lamp-icon{color:var(--lamp);}

.desk-status-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.desk-status{font-family:var(--ff-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px;display:inline-block;}
.desk-status.available{background:var(--sage-soft);color:var(--sage);}
.desk-status.occupied{background:var(--lamp-soft);color:var(--lamp);}
.desk-status.overdue{background:var(--coral-soft);color:var(--coral);}
.desk-status-row .food-pill{margin:0;}

/* Ticket block — the one thing staff need to read at a glance */
.desk-ticket{background:var(--surface-navy-raised);border:1px solid var(--line-navy);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
.desk-customer{font-size:13.5px;font-weight:600;color:var(--text-on-navy);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.desk-ticket-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;}
.desk-figure{display:flex;flex-direction:column;gap:2px;min-width:0;}
.desk-figure.align-right{align-items:flex-end;text-align:right;}
.desk-figure-label{font-family:var(--ff-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-on-navy-dim);opacity:.75;}
.desk-timer{font-family:var(--ff-mono);font-size:21px;font-weight:700;color:var(--text-on-navy);line-height:1.15;}
.desk-timer.overdue{color:var(--coral);}
.desk-total{font-family:var(--ff-mono);font-size:19px;font-weight:700;color:var(--lamp);line-height:1.15;}
.desk-submeta{font-size:11px;color:var(--text-on-navy-dim);margin-top:8px;}

/* Extend hint — makes it obvious an occupied card is tappable to extend
   the customer's time. Sits in place of the old plain-text submeta. */
.extend-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:10px;
  padding:7px 10px;
  border-radius:8px;
  background:var(--lamp-soft);
  border:1px dashed var(--lamp);
  color:var(--lamp);
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  animation:extendHintPulse 2.4s ease-in-out infinite;
}
.desk-card.occupied.is-overdue .extend-hint{
  background:var(--coral-soft);
  border-color:var(--coral);
  color:var(--coral);
}
.extend-hint-icon{font-size:13px;line-height:1;}
@keyframes extendHintPulse{
  0%,100%{box-shadow:0 0 0 0 var(--lamp-glow);}
  50%{box-shadow:0 0 0 4px transparent;}
}

/* Open (available) slot — one big obvious tap target, no hunting */
.desk-open-slot{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1.5px dashed var(--line-navy);border-radius:10px;padding:18px 10px;margin:2px 0 10px;
  transition:border-color .2s;
}
.desk-card.available:hover .desk-open-slot{border-color:var(--sage);}
.desk-open-icon{font-size:24px;line-height:1;color:var(--sage);opacity:.85;}
.desk-card .start-hint{font-size:12.5px;color:var(--text-on-navy-dim);margin:0;text-align:center;}

.voucher-status{font-size:11.5px;margin:0 0 8px;line-height:1.4;}
.voucher-status b{font-family:var(--ff-mono);letter-spacing:.02em;}
.voucher-status.pending{color:var(--coral,#c0392b);}
.voucher-status.active{color:var(--sage);}
.voucher-shared-note{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  line-height:1.4;
  color:var(--sage);
  background:var(--sage-soft);
  border-radius:7px;
  padding:6px 9px;
  margin:0 0 8px;
}
.vsn-icon{font-size:12px;line-height:1;flex-shrink:0;}

/* Action toolbar — equal-width icon buttons, min 44px tall, always
   pinned to the bottom of the card so taps land in the same spot
   table after table during a rush. */
.desk-actions{display:flex;gap:6px;margin-top:auto;}
.desk-action-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);color:var(--text-on-navy);
  padding:7px 4px;border-radius:8px;font-size:10.5px;font-weight:600;min-height:46px;line-height:1.2;
  transition:border-color .15s, color .15s, background .15s;
}
.desk-action-btn .dab-icon{font-size:16px;line-height:1;}
.desk-action-btn:hover{border-color:var(--lamp);color:var(--lamp);}
.desk-action-btn.primary{background:var(--sage-soft);color:var(--sage);border-color:transparent;}
.desk-action-btn.primary:hover{background:var(--sage);color:#fff;}
.desk-action-btn.warn{background:var(--coral-soft);color:var(--coral);border-color:transparent;}
.desk-action-btn.warn:hover{background:var(--coral);color:#fff;}
.desk-card .activity-link{align-self:center;}

/* --- Orders tab: filters + ticket-stub receipt cards --- */
.order-filters{display:flex;gap:8px;margin-bottom:20px;}
.chip{background:var(--surface-navy);border:1px solid var(--line-navy);color:var(--text-on-navy-dim);
  padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;}
.chip.active{background:var(--lamp-soft);color:var(--lamp);border-color:transparent;}
.order-list{display:flex;flex-direction:column;gap:14px;}
.ticket{
  background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:10px;
  padding:20px 22px;position:relative;
  background-image:repeating-linear-gradient(to right, var(--line-navy) 0 8px, transparent 0 16px);
  background-repeat:no-repeat;background-position:top left;background-size:100% 2px;
}
.ticket-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;flex-wrap:wrap;gap:10px;}
.ticket-id{font-family:var(--ff-mono);font-size:13px;color:var(--text-on-navy-dim);}
.ticket-id b{color:var(--text-on-navy);font-size:15px;}
.ticket-status{font-family:var(--ff-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:4px 10px;border-radius:999px;}
.ticket-status.active{background:var(--lamp-soft);color:var(--lamp);}
.ticket-status.completed{background:var(--sage-soft);color:var(--sage);}
.ticket-body{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.ticket-detail{font-size:13.5px;color:var(--text-on-navy-dim);line-height:1.8;}
.ticket-detail b{color:var(--text-on-navy);}
.ticket-addons{margin-top:4px;font-size:12.5px;}
.ticket-total{text-align:right;}
.ticket-total .amt{font-family:var(--ff-mono);font-size:24px;font-weight:600;color:var(--text-on-navy);}
.ticket-actions{margin-top:12px;text-align:right;}
.ticket-actions button{background:var(--sage-soft);color:var(--sage);border:none;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;}
.ticket-actions button:hover{background:var(--sage);color:#fff;}

.empty-state{padding:50px 20px;text-align:center;color:var(--text-on-navy-dim);}
.empty-state .eyebrow{justify-content:center;}
.empty-state h3{font-family:var(--ff-display);color:var(--text-on-navy);font-size:19px;margin:0 0 8px;font-weight:600;}

/* --- Orders tab: silog / food-order ticket variant --- */
.ticket-food{border-color:var(--sage);}
.food-badge{
  display:inline-block;background:var(--sage-soft);color:var(--sage);font-family:var(--ff-mono);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:999px;margin-right:8px;
}
.ticket-status.active{background:var(--lamp-soft);color:var(--lamp);}
.ticket-food .ticket-status.active{background:var(--sage-soft);color:var(--sage);}

/* Small pill shown on a table card when that table has a pending silog order */
.food-pill{
  display:inline-block;margin:8px 0 0;font-family:var(--ff-mono);font-size:11px;
  background:var(--sage-soft);color:var(--sage);padding:4px 10px;border-radius:999px;
}

/* --- Memberships (Membership tab) --- */
.panel-sub{margin:-10px 0 18px;color:var(--text-on-navy-dim);font-size:13.5px;}
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.tier-tile{
  text-align:left;border:none;border-radius:var(--radius);
  padding:20px 18px;display:flex;flex-direction:column;gap:6px;color:#fff;
  transition:transform .15s;cursor:pointer;
}
.tier-tile:hover{transform:translateY(-2px);}
.tier-tile.tier-bronze{background:linear-gradient(135deg,#c17f42,#5c3a1e);}
.tier-tile.tier-silver{background:linear-gradient(135deg,#b7bec7,#5b6470);}
.tier-tile.tier-gold{background:linear-gradient(135deg,#e8c46b,#8a6a1e);}
.tier-tile.tier-platinum{background:linear-gradient(135deg,#e4e9ef,#8b96a6);color:#12151a;}
.tier-name{font-family:var(--ff-display);font-size:19px;font-weight:700;}
.tier-price{font-family:var(--ff-mono);font-size:13px;opacity:.9;}
.tier-perks{font-size:12.5px;opacity:.85;line-height:1.4;}

/* --- Membership self-serve QR cards (reuses .qr-card/.qr-actions from
   the Table QR tab; .desk-top there is just a generic top badge slot,
   colored here per tier the same way .tier-tile/.member-card are) --- */
.member-qr-badge{padding:9px 0;border-radius:8px;font-family:var(--ff-display);font-weight:700;font-size:15px;color:#fff;}
.member-qr-badge.tier-bronze{background:linear-gradient(135deg,#c17f42,#5c3a1e);}
.member-qr-badge.tier-silver{background:linear-gradient(135deg,#b7bec7,#5b6470);color:#12151a;}
.member-qr-badge.tier-gold{background:linear-gradient(135deg,#e8c46b,#8a6a1e);}
.member-qr-badge.tier-platinum{background:linear-gradient(135deg,#e4e9ef,#8b96a6);color:#12151a;}

/* Overrides just for the membership QR grid: .qr-cards-row's fixed
   repeat(4,1fr) is fine on the wider Table QR tab, but here it was
   forcing 4 columns regardless of available width and overflowing.
   auto-fit/minmax lets cards wrap instead, and this whole block is
   collapsed behind a toggle by default (see #memberQrToggleBtn). */
#memberQrGrid.qr-cards-row{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:16px;}
.panel-head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.panel-head-row .btn{flex-shrink:0;}

/* --- Members list (Membership tab) --- */
.member-summary{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;}
.member-row-tier{
  font-family:var(--ff-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  padding:4px 10px;border-radius:999px;color:#fff;flex-shrink:0;white-space:nowrap;
}
.member-row-tier.tier-bronze{background:linear-gradient(135deg,#c17f42,#5c3a1e);}
.member-row-tier.tier-silver{background:linear-gradient(135deg,#b7bec7,#5b6470);color:#12151a;}
.member-row-tier.tier-gold{background:linear-gradient(135deg,#e8c46b,#8a6a1e);}
.member-row-tier.tier-platinum{background:linear-gradient(135deg,#e4e9ef,#8b96a6);color:#12151a;}

.member-row-list{display:flex;flex-direction:column;gap:10px;}
.member-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);border-radius:10px;
  padding:14px 16px;
}
.member-row-info{flex:1;min-width:160px;}
.member-row-name{font-size:14px;font-weight:600;color:var(--text-on-navy);}
.member-row-meta{font-family:var(--ff-mono);font-size:11.5px;color:var(--text-on-navy-dim);margin-top:3px;}
.member-row-date{font-size:12.5px;color:var(--text-on-navy-dim);white-space:nowrap;}
.member-row .mini-btn{width:auto;flex-shrink:0;margin-top:0;padding:8px 14px;}
.member-row .mini-btn:hover{border-color:var(--sage);color:var(--sage);}

/* --- Barkada Bundle tile (Tables tab) --- */
.barkada-tile{
  width:100%;text-align:left;background:var(--surface-navy);border:1px solid var(--sage);
  border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:4px;
  color:var(--text-on-navy);transition:transform .15s;cursor:pointer;
}
.barkada-tile:hover{transform:translateY(-2px);}
.barkada-tile-name{font-family:var(--ff-display);font-size:18px;font-weight:700;color:var(--sage);}
.barkada-tile-desc{font-size:13px;color:var(--text-on-navy-dim);}
.barkada-tile-price{font-family:var(--ff-mono);font-size:13px;color:var(--text-on-navy);margin-top:4px;}

/* --- Membership payment modal: cash / cashless choice --- */
.payment-method-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.payment-tile{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--surface-navy);border:1.5px solid var(--line-navy);border-radius:var(--radius);
  padding:16px 10px;color:var(--text-on-navy-dim);cursor:pointer;transition:border-color .15s,color .15s,background .15s;
  font-family:var(--ff-body,inherit);font-size:14px;font-weight:600;
}
.payment-tile svg{width:26px;height:26px;}
.payment-tile:hover{border-color:var(--sage);}
.payment-tile.active{background:var(--lamp-soft);border-color:var(--lamp);color:var(--lamp);}
.payment-detail-panel{margin-bottom:16px;}
.payment-detail-panel .wifi-note{margin-bottom:12px;}
.payment-detail-panel .wifi-qr-box{margin-bottom:0;}

/* ===================================================================
   MEMBERSHIP CARD (ATM/ID card look)
   Rendered inside the "Issue card" confirmation modal. Same note as
   the Wi-Fi QR block below: this modal lives outside #view-dashboard,
   so fallback colors are included in case css/modal.css sets its own
   theme for .modal that these should otherwise inherit.
=================================================================== */
.member-card{
  border-radius:16px;padding:24px;color:#fff;margin-bottom:20px;
  min-height:170px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.35);
}
.member-card.tier-bronze{background:linear-gradient(135deg,#c17f42,#4a2c15);}
.member-card.tier-silver{background:linear-gradient(135deg,#b7bec7,#4b525c);}
.member-card.tier-gold{background:linear-gradient(135deg,#e8c46b,#7a5c17);}
.member-card.tier-platinum{background:linear-gradient(135deg,#eef1f5,#8b96a6);color:#12151a;}
.member-card-top{display:flex;justify-content:space-between;align-items:flex-start;}
.member-card-brand{font-family:var(--ff-display,serif);font-weight:700;font-size:16px;letter-spacing:.02em;}
.member-card-tier{font-family:var(--ff-mono,monospace);font-size:11.5px;letter-spacing:.12em;opacity:.9;border:1px solid currentColor;padding:3px 9px;border-radius:999px;}
.member-card-code{font-family:var(--ff-mono,monospace);font-size:21px;letter-spacing:.08em;margin:22px 0;}
.member-card-bottom{display:flex;justify-content:space-between;gap:16px;}
.member-card-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.75;margin-bottom:3px;}
.member-card-name{font-size:14.5px;font-weight:600;}
.member-card-issued{font-size:13px;font-family:var(--ff-mono,monospace);}

/* --- Walk-in Silog tab (POS) --- */
.pos-destination{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:20px;
}
.pos-destination label{
  font-family:var(--ff-mono);font-size:11.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-on-navy-dim);flex-shrink:0;
}
.pos-destination select{
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);border-radius:8px;
  padding:9px 12px;color:var(--text-on-navy);font-size:13.5px;font-family:inherit;outline:none;
  min-width:200px;
}
.pos-destination select:focus{border-color:var(--lamp);}
.pos-destination-note{font-size:12.5px;color:var(--text-on-navy-dim);}

.pos-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}

/* Wraps the category chips + menu grid so they sit in the left column
   as a single unit above the cart panel. */
.pos-menu-col{display:flex;flex-direction:column;gap:14px;}
/* Category chips (Silog Meals / Bundles) reuse .chip/.order-filters
   styling from the Orders tab, so no extra rules needed there. */

.pos-menu{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.pos-tile{
  position:relative;text-align:center;background:var(--surface-navy);border:1px solid var(--line-navy);
  border-radius:var(--radius);padding:14px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--text-on-navy);transition:border-color .15s, transform .15s;
}
.pos-tile:hover{border-color:var(--lamp);transform:translateY(-2px);}
.pos-tile:active{transform:translateY(0);}
.pos-tile-img{
  width:100%;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:var(--surface-navy-raised);margin-bottom:2px;flex-shrink:0;
}
.pos-tile-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pos-tile-img .img-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:34px;background:var(--surface-navy-raised);
}
.pos-tile-name{font-family:var(--ff-display);font-size:14.5px;font-weight:600;line-height:1.3;}
.pos-tile-price{
  font-family:var(--ff-mono);font-size:16px;font-weight:800;color:#231705;
  background:var(--lamp);padding:3px 10px;border-radius:999px;margin-top:2px;
  box-shadow:0 4px 10px -3px var(--lamp-glow);letter-spacing:.2px;
}
.pos-tile-badge{
  position:absolute;top:-8px;right:-8px;background:var(--lamp);color:#231705;
  font-family:var(--ff-mono);font-size:12px;font-weight:700;min-width:22px;height:22px;
  border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 6px;
  box-shadow:0 4px 10px -3px var(--lamp-glow);
}

/* Category picker — bottom icon-tab bar (was top chips), same role as
   the source screenshot's Coffee/Beverages/BBQ/etc row along the base
   of the menu column. */
.pos-category-bar{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:2px;}
.pos-cat-tile{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;
  background:var(--surface-navy);border:1.5px solid var(--line-navy);border-radius:10px;
  padding:9px 10px;color:var(--text-on-navy-dim);font-size:13px;font-weight:600;
  transition:border-color .15s,color .15s,background .15s;
}
.pos-cat-tile svg{width:17px;height:17px;flex-shrink:0;}
.pos-cat-tile:hover{border-color:var(--sage);color:var(--text-on-navy);}
.pos-cat-tile.active{background:var(--lamp-soft);border-color:var(--lamp);color:var(--lamp);}

.pos-cart{position:sticky;top:38px;display:flex;flex-direction:column;}
.pos-cart h2{margin-bottom:16px;}

/* Destination picker, now inline inside the Checkout panel instead of
   its own bar above the menu. */
.pos-destination-inline{
  display:flex;flex-direction:column;gap:6px;
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);border-radius:9px;
  padding:12px 14px;margin-bottom:16px;
}
.pos-destination-inline label{
  font-family:var(--ff-mono);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-on-navy-dim);
}
.pos-destination-inline select{
  background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:7px;
  padding:8px 10px;color:var(--text-on-navy);font-size:13.5px;font-family:inherit;outline:none;
}
.pos-destination-inline select:focus{border-color:var(--lamp);}
.pos-destination-inline .pos-destination-note{font-size:12px;color:var(--text-on-navy-dim);}

.pos-cart-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;max-height:38vh;overflow-y:auto;}
.pos-cart-empty{font-size:13.5px;color:var(--text-on-navy-dim);margin:6px 0 0;line-height:1.5;}
.pos-cart-row{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);border-radius:9px;padding:10px 12px;
}
.pos-cart-row-remove{
  flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--text-on-navy-dim);border-radius:6px;
}
.pos-cart-row-remove svg{width:16px;height:16px;}
.pos-cart-row-remove:hover{color:var(--coral);background:var(--coral-soft);}
.pos-cart-row-info{display:flex;flex-direction:column;flex:1;min-width:0;}
.pos-cart-row-name{font-size:13.5px;font-weight:600;color:var(--text-on-navy);}
.pos-cart-row-price{font-family:var(--ff-mono);font-size:11.5px;color:var(--text-on-navy-dim);}
.pos-cart-summary{margin:0 0 16px;padding-top:14px;border-top:1px dashed var(--line-navy);}
.pos-cart-actions{display:flex;flex-direction:column;gap:10px;}
.pos-cart-actions-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.btn-cancel-order{width:100%;justify-content:center;color:var(--coral);}
.btn-cancel-order:hover{border-color:var(--coral);color:var(--coral);}
.btn-hold-order{width:100%;justify-content:center;color:var(--lamp);}
.btn-hold-order:hover{border-color:var(--lamp);color:var(--lamp);}
.walkin-submit{width:100%;justify-content:center;}
.walkin-submit:disabled{opacity:.4;cursor:not-allowed;transform:none !important;box-shadow:none !important;}

/* --- Held orders panel (Walk-in Silog tab) --- */
.held-orders-panel{margin-bottom:20px;}
.held-orders-panel .panel-sub{margin:-8px 0 16px;color:var(--text-on-navy-dim);font-size:13px;}
.held-orders-list{display:flex;flex-direction:column;gap:10px;}
.held-order-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);border-radius:9px;padding:12px 14px;
}
.held-order-info{display:flex;flex-direction:column;gap:2px;}
.held-order-dest{font-size:14px;font-weight:600;color:var(--text-on-navy);}
.held-order-meta{font-size:12.5px;color:var(--text-on-navy-dim);font-family:var(--ff-mono);}
.held-order-actions{display:flex;gap:8px;flex-shrink:0;}

/* --- Small button variant, used inside modals/lists where the
   default .btn padding is too roomy (held-order actions, manage-menu
   row actions). --- */
.btn-sm{padding:6px 12px;font-size:12.5px;}
.btn-danger-text{color:var(--coral);}
.btn-danger-text:hover{border-color:var(--coral);color:var(--coral);}

/* --- Manage Menu modal ---
   Widened and enlarged vs. the default modal size: staff use this to
   fly through add/edit/delete on many items in a row, so rows need
   to be scannable and buttons need to be easy to hit without
   fat-fingering the wrong item. Grid lets two items sit side by side
   on desktop width and collapses to one column automatically as the
   modal narrows on smaller screens. */
#manageMenuModalOverlay .modal{max-width:760px;}
.manage-menu-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:12px;margin-top:16px;max-height:62vh;overflow-y:auto;padding-right:2px;
}
.manage-menu-row{
  display:flex;align-items:center;gap:14px;
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);border-radius:11px;padding:12px 14px;
  transition:border-color .15s;
}
.manage-menu-row:hover{border-color:var(--lamp);}
.manage-menu-row-img{width:60px;height:60px;border-radius:9px;overflow:hidden;flex-shrink:0;background:var(--surface-navy);}
.manage-menu-row-img img{width:100%;height:100%;object-fit:cover;display:block;}
.manage-menu-row-img .img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;}
.manage-menu-row-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
.manage-menu-row-name{font-size:15px;font-weight:700;color:var(--text-on-navy);line-height:1.25;}
.manage-menu-row-price{font-family:var(--ff-mono);font-size:13.5px;font-weight:700;color:var(--lamp);}
.manage-menu-row-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.manage-menu-row-actions .btn{padding:8px 16px;font-size:13px;min-width:72px;justify-content:center;}
.manage-menu-add-btn{width:100%;justify-content:center;margin-top:2px;padding:12px;font-size:14.5px;}

.walkin-item-modal-desc{font-size:13.5px;color:var(--text-on-navy-dim);margin:-8px 0 18px;line-height:1.5;}

/* --- Add/Edit menu item: upload-or-link photo field --- */
.field-hint{font-size:11.5px;color:var(--text-on-navy-dim);margin:6px 0;line-height:1.4;}
.menu-img-preview-wrap{
  display:flex;align-items:center;gap:12px;margin-top:10px;
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);border-radius:9px;padding:10px;
}
.menu-img-preview{width:56px;height:56px;border-radius:7px;object-fit:cover;flex-shrink:0;background:var(--surface-navy);}

/* --- Manage Menu modal: pending "edit the menu" requests --- */
.menu-requests-section{margin-bottom:22px;}

/* --- Table QR tab --- */
.qr-cards-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.qr-card{
  background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:var(--radius);
  padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.qr-card .desk-top{width:100%;margin-bottom:16px;}
.qr-imgwrap{background:#fff;padding:10px;border-radius:10px;margin-bottom:12px;}
.qr-imgwrap img{width:140px;height:140px;}
.qr-hint{font-size:13px;color:var(--text-on-navy-dim);margin:0 0 10px;}
.qr-link{
  width:100%;font-family:var(--ff-mono);font-size:11px;color:var(--text-on-navy-dim);
  background:var(--surface-navy-raised);border-radius:8px;padding:8px 10px;margin-bottom:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.qr-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%;}
.qr-actions .mini-btn{
  flex:1 1 calc(50% - 4px);text-decoration:none;display:flex;align-items:center;justify-content:center;
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);color:var(--text-on-navy);
  padding:9px;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:border-color .15s,color .15s;
}
.qr-actions .mini-btn:hover{border-color:var(--lamp);color:var(--lamp);}
.qr-actions .mini-btn.danger{flex-basis:100%;}
.qr-actions .mini-btn.danger:hover{border-color:var(--coral);color:var(--coral);}

/* --- Table QR tab: section headers + the generate-QR form --- */
.qr-section-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--ff-display);font-size:18px;font-weight:600;margin:0 0 6px;
}
.qr-section-title.qr-section-title-custom{margin-top:44px;margin-bottom:18px;}
.qr-add-btn{padding:9px 16px;font-size:13px;}

.qr-add-form{
  background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:var(--radius);
  padding:20px;margin:14px 0 8px;display:flex;flex-direction:column;gap:14px;max-width:420px;
}
.qr-add-form .field{display:flex;flex-direction:column;gap:6px;}
.qr-add-form label{font-size:12.5px;font-weight:600;color:var(--text-on-navy-dim);}
.qr-add-form input{
  background:var(--surface-navy-raised);border:1px solid var(--line-navy);border-radius:8px;
  padding:10px 12px;color:var(--text-on-navy);font-size:13.5px;outline:none;font-family:inherit;
}
.qr-add-form input:focus{border-color:var(--lamp);}
.qr-add-actions{display:flex;justify-content:flex-end;gap:10px;}
.qr-add-error{color:var(--coral);font-size:12.5px;margin:0;}
.qr-empty{color:var(--text-on-navy-dim);font-size:13.5px;padding:6px 2px;grid-column:1/-1;}

/* Scoped override: .btn-ghost is defined in modal.css, which this tab
   doesn't control — pin its color/border here explicitly so "Print
   all" stays legible no matter what modal.css sets it to elsewhere. */
#tab-qrcodes .btn-ghost{
  background:transparent;border:1.5px solid var(--line-navy);color:var(--text-on-navy);
}
#tab-qrcodes .btn-ghost:hover{border-color:var(--lamp);color:var(--lamp);}

/* ===================================================================
   PAYMENT / VOUCHER SHARED BITS
   .wifi-note and .wifi-qr-box are used by the cashless payment panels
   (booking + membership). This modal block lives outside
   #view-dashboard in the markup, so rules are standalone rather than
   scoped under #view-dashboard.
=================================================================== */
.wifi-note{font-size:13.5px;color:var(--text-on-navy-dim,#666);margin:-6px 0 18px;line-height:1.5;}
.wifi-qr-box{display:flex;justify-content:center;background:#fff;padding:16px;border-radius:12px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.12);}
.wifi-qr-box img{width:200px;height:200px;display:block;}

/* ===================================================================
   VOUCHER CARD
   Replaces the old Wi-Fi QR box: staff hand the customer this code
   directly (no scanning) after payment is confirmed. Reuses the same
   ticket-stub perforation look as the Orders tab for visual continuity.
=================================================================== */
.voucher-card{
  background:var(--surface-navy-raised,#f4f4f4);border:1.5px dashed var(--lamp,#B4915A);
  border-radius:14px;padding:22px;margin-bottom:18px;
  background-image:repeating-linear-gradient(to right, var(--line-navy,#e2e2e2) 0 8px, transparent 0 16px);
  background-repeat:no-repeat;background-position:top left;background-size:100% 2px;
}
.voucher-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.voucher-card-brand{font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--text-on-navy,#1a1a1a);}
.voucher-card-table{
  font-family:var(--ff-mono);font-size:11.5px;color:var(--text-on-navy-dim,#666);
  border:1px solid var(--line-navy,#e2e2e2);padding:3px 9px;border-radius:999px;
}
.voucher-card-code{
  font-family:var(--ff-mono,monospace);font-size:26px;font-weight:700;letter-spacing:.05em;
  color:var(--lamp,#B4915A);text-align:center;margin:16px 0 22px;word-break:break-all;
}
.voucher-card-bottom{display:flex;justify-content:space-between;gap:16px;}
.voucher-card-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-on-navy-dim,#666);margin-bottom:3px;}
.voucher-card-value{font-size:14px;font-weight:600;color:var(--text-on-navy,#1a1a1a);}

/* Inline validation message for the voucher-code entry field. */
.field-error{display:none;color:var(--coral,#c0392b);font-size:13px;margin:-10px 0 14px;}

/* ===================================================================
   BOOKING MODAL: duration presets
   1 Hour / 3 Hours / Whole Day tiles that replace the old +/- stepper
   for a brand-new session (the stepper still exists for the extend
   flow — see #extendStep in dashboard.html).
=================================================================== */
.duration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 6px;}
.duration-tile{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  background:var(--surface-navy,#fff);border:1.5px solid var(--line-navy,#e2e2e2);border-radius:var(--radius,12px);
  padding:14px 8px;color:var(--text-on-navy-dim,#666);cursor:pointer;font-family:inherit;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
}
.duration-tile:hover{border-color:var(--sage,#4f7a5e);transform:translateY(-1px);}
.duration-tile.active{background:var(--lamp-soft);border-color:var(--lamp);color:var(--lamp);}
.duration-tile-name{font-family:var(--ff-display);font-size:14.5px;font-weight:600;}
.duration-tile-price{font-family:var(--ff-mono);font-size:12px;}
.duration-hint{font-size:12.5px;color:var(--text-on-navy-dim,#666);margin:2px 0 18px;line-height:1.5;}

/* ===================================================================
   TABLE ACTIVITY (per-table voucher history + extend)
   The "View activity" link on a desk card opens #tableActivityModalOverlay
   (see dashboard.html), which reuses .member-row / .member-row-list
   for the list styling. This just styles the trigger link itself.
=================================================================== */
.desk-card .activity-link{
  display:inline-block;margin-top:8px;background:none;border:none;padding:0;
  font-family:var(--ff-mono);font-size:12px;color:var(--text-on-navy-dim);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.desk-card .activity-link:hover{color:var(--lamp);}
/* ===================================================================
   NEW ORDER TOAST
   Non-blocking "new order came in from the QR menu" notification.
   Stacks top-right (unlike the blocking time's-up modal in
   #timeAlertModalOverlay, several of these can be visible at once —
   a busy shop might get a few QR orders back to back). Each toast
   auto-dismisses after a few seconds, shows a countdown bar, and can
   be tapped to jump to the Orders tab. See alerts.js for the sound +
   showNewOrderToast()/testNewOrderAlert() logic that drives this.
=================================================================== */
.new-order-toast-container{
  position:fixed;top:18px;right:18px;z-index:1000;
  display:flex;flex-direction:column;gap:10px;
  width:340px;max-width:calc(100vw - 32px);
  pointer-events:none;
}
.new-order-toast{
  pointer-events:auto;cursor:pointer;position:relative;overflow:hidden;
  display:flex;align-items:flex-start;gap:12px;
  background:var(--surface-navy);border:1px solid var(--line-navy);border-radius:var(--radius);
  box-shadow:0 12px 32px -10px rgba(0,0,0,.45), 0 0 0 1px var(--lamp) inset;
  padding:14px 34px 16px 14px;
  transform:translateX(120%);opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.25,1),opacity .32s ease;
}
.new-order-toast.show{transform:translateX(0);opacity:1;}
.new-order-toast.hide{transform:translateX(120%);opacity:0;}
.new-order-toast:hover{border-color:var(--lamp);}
.new-order-toast-icon{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--lamp-soft);color:var(--lamp);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.new-order-toast-body{min-width:0;}
.new-order-toast-title{font-family:var(--ff-display);font-weight:600;font-size:14.5px;color:var(--text-on-navy);}
.new-order-toast-note{
  font-size:12.5px;color:var(--text-on-navy-dim,#9aa1ad);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.new-order-toast-close{
  position:absolute;top:8px;right:10px;background:none;border:none;
  font-size:16px;line-height:1;color:var(--text-on-navy-dim,#9aa1ad);cursor:pointer;padding:2px;
}
.new-order-toast-close:hover{color:var(--lamp);}
.new-order-toast-bar{
  position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--lamp);transform-origin:left;
  animation:newOrderToastShrink linear forwards;
  animation-play-state:paused;
}
.new-order-toast.show .new-order-toast-bar{animation-play-state:running;}
@keyframes newOrderToastShrink{from{transform:scaleX(1);}to{transform:scaleX(0);}}