/* Online ordering + staff dashboard. Uses the design tokens from style.css. */
[hidden]{ display:none !important; }

.shop-band{ background: var(--ink); color: var(--linen); padding: 120px 0 44px; }
.shop-band .crumb{ color: rgba(255,255,255,.7); font-size:13px; margin-bottom:12px; }
.shop-band h1{ color: var(--white); font-size: 36px; }
.shop-band p{ color: rgba(247,244,238,.72); max-width: 58ch; margin-top: 10px; }
@media (min-width:768px){ .shop-band h1{ font-size: 46px; } }

.price, .num{ font-family:'Inter',Arial,sans-serif; font-variant-numeric: lining-nums tabular-nums; font-weight:600; }

/* ---- Layout ---- */
.shop-layout{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1000px){ .shop-layout{ grid-template-columns: minmax(0,1fr) 380px; } }

/* ---- Category chips ---- */
.cat-tabs{ display:flex; gap:8px; overflow-x:auto; padding:12px 0; margin-bottom:8px; position:sticky; top:64px; z-index:20;
  background: var(--linen); scrollbar-width:thin; }
.cat-tabs button{ flex:none; border:1px solid var(--line); background:var(--white); color:var(--text); border-radius:999px;
  padding:9px 18px; font-size:14px; font-weight:600; transition: all .2s ease; }
.cat-tabs button:hover{ border-color: var(--brass); }
.cat-tabs button[aria-pressed="true"]{ background: var(--ink); color: var(--linen); border-color: var(--ink); }

.cat-section{ margin-bottom: 36px; scroll-margin-top: 130px; }
.cat-section h2{ font-size: 26px; margin-bottom: 16px; }

/* ---- Dish cards ---- */
.dish-grid{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .dish-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.dish{ display:flex; gap:14px; background:var(--white); border:1px solid var(--line-soft); border-radius: var(--radius);
  padding:14px; box-shadow: var(--shadow-card); transition: transform .2s ease; }
.dish img{ width:96px; height:96px; object-fit:cover; border-radius:8px; flex:none; background: var(--linen-deep); }
.dish-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.dish h3{ font-size:17px; }
.dish p{ font-size:13.5px; color:#6b6357; line-height:1.45; }
.dish-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.dish .price{ color:#70512D; font-size:15px; }
.dish.sold-out img{ filter: grayscale(1); opacity:.6; }
.badge{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; background:var(--linen-deep); color:var(--wood); }
.badge.bad{ background:#F7E7E1; color:#8A3B24; }
.btn-add{ padding:9px 18px; font-size:13.5px; }

/* ---- Quantity stepper ---- */
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; background:var(--white); }
.qty button{ width:36px; height:36px; border:0; background:none; font-size:18px; line-height:1; color:var(--ink); border-radius:50%; }
.qty button:hover:not(:disabled){ background: var(--linen-deep); }
.qty button:disabled{ opacity:.35; cursor:not-allowed; }
.qty output{ min-width:28px; text-align:center; font-weight:600; font-size:14.5px; }

/* ---- Cart ---- */
.cart{ background:var(--white); border:1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding:22px; }
@media (min-width:1000px){ .cart{ position:sticky; top:96px; max-height: calc(100vh - 120px); overflow:auto; } }
.cart h2{ font-size:22px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; }
.cart-close{ display:none; border:0; background:none; font-size:26px; line-height:1; color:var(--ink); }
.cart-line{ display:grid; grid-template-columns: 1fr auto; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.cart-line .name{ font-weight:600; font-size:14.5px; }
.cart-line .price{ text-align:right; font-size:14.5px; }
.cart-line .unit{ font-size:12.5px; color:#8a8378; }
.cart-totals{ margin:14px 0; font-size:14.5px; }
.cart-totals div{ display:flex; justify-content:space-between; padding:3px 0; }
.cart-totals .grand{ font-size:18px; border-top:1px solid var(--line); margin-top:8px; padding-top:10px; }
.discount-row{ display:flex; gap:8px; }
.discount-row input{ flex:1; min-width:0; }
.checkout fieldset{ border:0; padding:0; margin:18px 0 0; }
.checkout legend{ font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--wood); margin-bottom:10px; padding:0; }
.checkout .field{ margin-bottom:14px; }
.field .err{ display:none; color:#8A3B24; font-size:12.5px; margin-top:5px; }
.field.invalid .err{ display:block; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#C0553A; }
.opt-row{ display:flex; gap:8px; flex-wrap:wrap; }
.opt-row label{ flex:1 1 90px; text-align:center; border:1px solid var(--line); border-radius:8px; padding:10px 8px; font-size:13.5px; font-weight:600; cursor:pointer; background:var(--linen); }
.opt-row input{ position:absolute; opacity:0; pointer-events:none; }
.opt-row input:checked + span{ color:var(--ink); }
.opt-row label:has(input:checked){ border-color:var(--brass); background:var(--white); box-shadow: 0 0 0 2px rgba(200,155,90,.35); }
.opt-row label:has(input:focus-visible){ outline:3px solid var(--brass); outline-offset:2px; }
.empty{ text-align:center; padding:32px 12px; color:#6b6357; }
.empty strong{ display:block; color:var(--ink); font-family:'Playfair Display',Georgia,serif; font-size:19px; margin-bottom:6px; }
.banner{ border-radius:8px; padding:12px 16px; font-size:14px; margin-bottom:16px; }
.banner.error{ background:#F7E7E1; color:#8A3B24; border:1px solid #E7BBA8; }
.banner.info{ background:var(--linen-deep); color:var(--text); border:1px solid var(--line); }
.banner.ok{ background:#E6F1E4; color:#285A2A; border:1px solid #BCD9B8; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.spinner{ display:inline-block; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation: spin .7s linear infinite; vertical-align:-3px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Skeletons */
.skel{ background: linear-gradient(90deg, var(--linen-deep) 25%, #f6efe2 50%, var(--linen-deep) 75%); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius:var(--radius); }
.skel-card{ height:124px; }
@keyframes shimmer{ to{ background-position:-200% 0; } }

/* Mobile cart drawer */
.cart-fab{ display:none; }
@media (max-width:999px){
  .cart{ position:fixed; inset:0; z-index:130; border-radius:0; overflow:auto; transform:translateY(102%); transition: transform .3s ease; visibility:hidden; }
  .cart.open{ transform:none; visibility:visible; }
  .cart-close{ display:block; }
  .cart-fab{ display:flex; position:fixed; left:16px; right:16px; bottom:70px; z-index:95; justify-content:space-between; align-items:center;
    background:var(--ink); color:var(--linen); border:1px solid var(--brass); border-radius:999px; padding:13px 22px; font-weight:600; font-size:14.5px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .cart-fab[hidden]{ display:none; }
}
@media (min-width:1000px){ .cart-fab{ display:none !important; } }

/* Confirmation */
.confirm-card{ text-align:center; max-width:560px; margin:0 auto; background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:36px 24px; box-shadow: var(--shadow-card); }
.confirm-card .check{ width:64px; height:64px; border-radius:50%; background:#E6F1E4; color:#285A2A; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.confirm-card .order-no{ font-size:30px; font-family:'Inter',Arial,sans-serif; font-weight:700; color:var(--ink); }
.confirm-lines{ text-align:left; margin:20px 0; border-top:1px solid var(--line); }
.confirm-lines div{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px; }
.status-steps{ display:flex; justify-content:space-between; gap:4px; margin:22px 0; font-size:12px; }
.status-steps span{ flex:1; padding-top:10px; border-top:4px solid var(--line); color:#8a8378; font-weight:600; }
.status-steps span.done{ border-color:var(--brass); color:var(--ink); }

/* Status badges */
.st{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700; }
.st-pending{ background:#FBEFD2; color:#7A5410; }
.st-preparing{ background:#DCE9F7; color:#1D4673; }
.st-ready{ background:#E0F0DC; color:#285A2A; }
.st-completed{ background:#EAE6DD; color:#4a443b; }
.st-cancelled{ background:#F7E7E1; color:#8A3B24; }

/* Toast */
.shop-toast{ position:fixed; left:50%; bottom:80px; transform:translate(-50%,20px); z-index:200; max-width:min(92vw,460px);
  background:var(--ink); color:var(--linen); padding:12px 20px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition: all .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.shop-toast.show{ opacity:1; transform:translate(-50%,0); }
.shop-toast.error{ background:#8A3B24; }

/* ===================== Staff dashboard ===================== */
.st-wrap{ padding:36px 0 72px; }
.st-login{ max-width:420px; margin:0 auto; background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-card); }
.st-login h2{ font-size:26px; margin-bottom:6px; }
.st-bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; font-size:14px; }
.st-tabs{ display:flex; gap:6px; overflow-x:auto; border-bottom:1px solid var(--line); margin-bottom:22px; }
.st-tabs button{ flex:none; border:0; border-bottom:3px solid transparent; background:none; padding:11px 16px; font-size:14.5px; font-weight:600; color:#6b6357; }
.st-tabs button[aria-selected="true"]{ color:var(--ink); border-color:var(--brass); }
.st-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:16px; }
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chips button{ border:1px solid var(--line); background:var(--white); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; }
.chips button[aria-pressed="true"]{ background:var(--ink); color:var(--linen); border-color:var(--ink); }
.live-dot{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#6b6357; }
.live-dot::before{ content:""; width:9px; height:9px; border-radius:50%; background:#B8B2A6; }
.live-dot.on::before{ background:#2E9B3F; box-shadow:0 0 0 4px rgba(46,155,63,.18); }

.order-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .order-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1180px){ .order-grid{ grid-template-columns:repeat(3,1fr); } }
.o-card{ background:var(--white); border:1px solid var(--line-soft); border-left:5px solid var(--brass); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-card); }
.o-card.fresh{ animation: flash 2.4s ease-out; }
@keyframes flash{ from{ background:#FBEFD2; } }
.o-head{ display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:6px; }
.o-head .num{ font-size:18px; }
.o-meta{ font-size:13px; color:#6b6357; line-height:1.5; }
.o-items{ margin:10px 0; padding:10px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); font-size:14px; }
.o-items div{ display:flex; justify-content:space-between; gap:10px; padding:2px 0; }
.o-note{ font-size:13px; background:var(--linen); border-radius:6px; padding:8px 10px; margin-bottom:10px; }
.o-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.o-actions button{ flex:1 1 auto; padding:9px 10px; font-size:13px; border-radius:8px; border:1px solid var(--line); background:var(--linen); font-weight:600; }
.o-actions button:hover:not(:disabled){ border-color:var(--brass); }
.o-actions button[aria-current="true"]{ background:var(--ink); color:var(--linen); border-color:var(--ink); }
.o-actions button:disabled{ opacity:.5; cursor:not-allowed; }

.tbl-wrap{ overflow-x:auto; background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); }
table.tbl{ width:100%; border-collapse:collapse; font-size:14px; min-width:640px; }
.tbl th{ text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--wood); padding:12px 14px; border-bottom:1px solid var(--line); background:var(--linen); white-space:nowrap; }
.tbl td{ padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl img{ width:44px; height:44px; object-fit:cover; border-radius:6px; }
.tbl .row-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.btn-xs{ padding:6px 12px; font-size:12.5px; border-radius:6px; border:1px solid var(--line); background:var(--white); font-weight:600; }
.btn-xs:hover{ border-color:var(--brass); }
.btn-xs.danger{ color:#8A3B24; }
.old{ color:#8a8378; text-decoration:line-through; margin-right:6px; }

dialog.st-dialog{ border:0; border-radius:var(--radius); padding:0; width:min(560px, 94vw); max-height:92vh; box-shadow:0 30px 80px rgba(0,0,0,.4); }
dialog.st-dialog::backdrop{ background:rgba(20,17,14,.55); }
.st-dialog form{ padding:24px; }
.st-dialog h3{ font-size:22px; margin-bottom:16px; }
.st-dialog .grid-fields{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:520px){ .st-dialog .grid-fields{ grid-template-columns:1fr 1fr; } .st-dialog .span2{ grid-column:1 / -1; } }
.st-dialog .check-field{ display:flex; align-items:center; gap:10px; font-size:14px; }
.st-dialog .check-field input{ width:auto; }
.dialog-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ===================== Staff dashboard v2 ===================== */
.shop-band.compact{ padding: 92px 0 18px; }
.shop-band.compact h1{ font-size: 28px; }
.shop-band.compact p{ display:none; }

.st-bar{ background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); padding:10px 16px; }
.st-tabs{ position:sticky; top:56px; z-index:30; background:var(--linen); padding-top:4px; scrollbar-width:thin; }
.tab-badge{ display:inline-block; min-width:20px; padding:1px 6px; margin-left:4px; border-radius:999px; background:#C0553A; color:#fff; font-size:11.5px; font-weight:700; text-align:center; }

.tool-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.st-search, .st-select{ border:1px solid var(--line); border-radius:8px; background:var(--white); padding:9px 12px; font:inherit; font-size:14px; min-width:0; }
.st-search{ width:210px; max-width:100%; }
.st-search:focus, .st-select:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(200,155,90,.25); }
.chip-n{ display:inline-block; min-width:18px; padding:0 5px; border-radius:999px; background:rgba(28,25,22,.09); font-size:11.5px; text-align:center; }
.chips button[aria-pressed="true"] .chip-n{ background:rgba(255,255,255,.22); }
.count-line{ font-size:13px; color:#8a8378; margin:0 0 8px; }
.btn-danger{ background:#B42318; color:#fff; border-color:#B42318; }
.btn-danger:hover{ background:#8F1B12; }

/* Stat tiles */
.stat-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:18px; }
@media (min-width:760px){ .stat-row{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--white); border:1px solid var(--line-soft); border-left:5px solid var(--line); border-radius:var(--radius); padding:12px 16px; }
.stat-n{ font-family:'Inter',Arial,sans-serif; font-weight:700; font-size:26px; line-height:1.15; font-variant-numeric:lining-nums tabular-nums; }
.stat-l{ font-size:12.5px; color:#6b6357; font-weight:600; letter-spacing:.03em; }
.stat.st-pending{ border-left-color:#E0A93B; background:var(--white); color:inherit; }
.stat.st-preparing{ border-left-color:#4A82C2; background:var(--white); color:inherit; }
.stat.st-ready{ border-left-color:#3E9B4F; background:var(--white); color:inherit; }
.stat.st-sales{ border-left-color:var(--brass); }

/* Kanban board */
.kanban{ display:grid; gap:16px; grid-template-columns:1fr; align-items:start; }
@media (min-width:1000px){ .kanban{ grid-template-columns:repeat(3,1fr); } }
.kcol{ background:rgba(28,25,22,.035); border-radius:var(--radius); padding:12px; display:grid; gap:12px; }
.kcol h3{ font-family:'Inter',Arial,sans-serif; font-size:14px; display:flex; align-items:center; gap:8px; }
.kempty{ text-align:center; color:#8a8378; font-size:13px; padding:18px 0; }
.o-card{ border-left-width:5px; border-left-style:solid; }
.o-card.s-pending{ border-left-color:#E0A93B; }
.o-card.s-preparing{ border-left-color:#4A82C2; }
.o-card.s-ready{ border-left-color:#3E9B4F; }
.o-card.s-completed{ border-left-color:#B8B2A6; }
.o-card.s-cancelled{ border-left-color:#C0553A; opacity:.85; }
.o-card.late{ box-shadow:0 0 0 2px rgba(192,85,58,.45), var(--shadow-card); }
.late-txt{ color:#B42318; font-weight:700; }
.o-total{ border-top:1px dashed var(--line); margin-top:4px; padding-top:6px; }
.o-actions{ align-items:center; }
.o-actions .btn{ flex:1 1 150px; }

/* Switch */
.switch{ position:relative; display:inline-block; width:42px; height:24px; vertical-align:middle; }
.switch input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; }
.switch span{ position:absolute; inset:0; border-radius:999px; background:#CFC8BA; transition:background .2s ease; }
.switch span::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s ease; }
.switch input:checked + span{ background:#3E9B4F; }
.switch input:checked + span::after{ transform:translateX(18px); }
.switch input:focus-visible + span{ outline:3px solid var(--brass); outline-offset:2px; }
.switch input:disabled{ cursor:not-allowed; }
.switch input:disabled + span{ opacity:.5; }

/* Quick price edit */
.qprice{ border:1px dashed transparent; background:none; border-radius:6px; padding:3px 8px; font:inherit; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.qprice:hover, .qprice:focus-visible{ border-color:var(--brass); background:var(--linen); }
.qp-form{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.qp-form input{ width:110px; border:1px solid var(--brass); border-radius:6px; padding:6px 8px; font:inherit; font-size:14px; }
.qp-err{ width:100%; color:#8A3B24; font-size:12.5px; }
.tbl .img-cell{ width:64px; }
.tbl td.actions-cell{ text-align:right; white-space:nowrap; }
.delta.up{ color:#B42318; font-weight:700; }
.delta.down{ color:#285A2A; font-weight:700; }
.tbl tbody tr:hover{ background:rgba(200,155,90,.07); }
.st-confirm{ width:min(420px, 92vw); }

/* Tables become stacked cards on phones */
@media (max-width:700px){
  .st-wrap{ padding-top:20px; }
  .st-search{ width:100%; flex:1 1 100%; }
  .tool-right{ width:100%; }
  table.tbl.resp{ min-width:0; }
  .tbl.resp thead{ position:absolute; left:-9999px; }
  .tbl.resp tr{ display:block; padding:10px 14px; border-bottom:1px solid var(--line); }
  .tbl.resp td{ display:flex; justify-content:space-between; align-items:center; gap:12px; border:0; padding:6px 0; text-align:right; }
  .tbl.resp td::before{ content:attr(data-label); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--wood); text-align:left; }
  .tbl.resp td.img-cell{ display:block; text-align:left; width:auto; }
  .tbl.resp td.img-cell::before{ display:none; }
  .tbl.resp td.actions-cell{ display:block; text-align:right; }
  .tbl.resp td.actions-cell::before{ display:none; }
  .tbl.resp .row-actions{ justify-content:flex-end; }
  .qp-form{ justify-content:flex-end; }
}

/* Inquiries */
.o-card.i-new{ border-left-color:#E0A93B; }
.o-card.i-contacted{ border-left-color:#4A82C2; }
.o-card.i-closed{ border-left-color:#B8B2A6; opacity:.85; }
.o-items.kv div{ align-items:baseline; }
.o-items.kv span{ color:#6b6357; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; }
.o-items.kv strong{ font-weight:500; text-align:right; overflow-wrap:anywhere; }

/* Price history list */
.hday{ font-family:'Inter',Arial,sans-serif; font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--wood); margin:20px 0 8px; }
.hlist{ list-style:none; margin:0; padding:0; background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.h-row{ display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:10px 14px; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.h-row:last-child{ border-bottom:0; }
.h-name{ font-weight:600; font-size:14.5px; min-width:0; overflow-wrap:anywhere; }
.h-change{ text-align:right; white-space:nowrap; font-size:14.5px; }
.h-sub{ grid-column:1 / -1; font-size:12.5px; color:#8a8378; }
@media (min-width:760px){
  .h-row{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; }
  .h-sub{ grid-column:auto; order:2; }
  .h-change{ order:3; }
}

/* Date range + sort row */
.range-row{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:end; background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); padding:10px 14px; margin-bottom:16px; }
.range-row label{ display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wood); }
.range-row input[type=date], .range-row select{ border:1px solid var(--line); border-radius:8px; background:var(--linen); padding:7px 10px; font:inherit; font-size:14px; color:var(--text); text-transform:none; letter-spacing:0; font-weight:500; }
.range-row input[type=date]:focus, .range-row select:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(200,155,90,.25); }
.range-row .presets{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.range-row .sort-sel{ margin-left:auto; }
@media (max-width:640px){
  .range-row label{ flex:1 1 40%; }
  .range-row input[type=date], .range-row select{ width:100%; }
  .range-row .sort-sel{ margin-left:0; flex:1 1 100%; }
}

/* Photo upload field */
.img-field{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.img-prev{ width:96px; height:96px; object-fit:cover; border:1px solid var(--line); border-radius:2px; background:var(--linen-deep); }
.img-ctl{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; min-width:0; }
.img-note{ font-size:12px; color:#8a8378; }

/* Staff accounts */
.add-staff{ background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px; margin-bottom:22px; }
.add-staff h3{ font-size:20px; margin-bottom:14px; }
.add-staff-grid{ display:grid; gap:14px; grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .add-staff-grid{ grid-template-columns:1.2fr 1.4fr .8fr; } }
.add-staff .hint, .st-dialog .hint{ font-size:12.5px; color:#8a8378; margin:12px 0 14px; }
.pw-row{ display:flex; gap:8px; align-items:center; }
.pw-row input{ flex:1; min-width:0; }
.pw-row .btn-xs{ white-space:nowrap; flex:none; }

/* Main / Roof Deck tabs on the ordering page (same look as the Restaurant page) */
.venue-tabs{ display:flex; border-bottom:1px solid var(--line); margin-bottom:6px; }
.venue-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; background:none; border:0; border-bottom:2px solid transparent;
  margin:0 36px -1px 0; padding:12px 4px 14px; font-family:'Playfair Display',Georgia,serif; font-size:19px; color:#8a8378; text-align:left; cursor:pointer; }
.venue-btn .venue-sub{ font-family:'Inter',Arial,sans-serif; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#8a8378; }
.venue-btn:hover{ color:var(--ink); }
.venue-btn[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--brass); }
.venue-btn[aria-selected="true"] .venue-sub{ color:var(--wood); }
.venue-btn:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.link-btn{ background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--wood); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.empty-sec{ margin:0; padding:16px 0 4px; color:#8a8378; font-size:14.5px; }
@media (max-width:560px){
  .venue-btn{ flex:1; margin-right:14px; }
  .venue-btn:last-child{ margin-right:0; }
}

/* Stock note next to a price on the ordering page */
.dish-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.stock-note{ font-size:12px; font-weight:600; letter-spacing:.04em; color:#8F3B28; }

/* ---- Phones: staff dashboard ---- */
@media (max-width:768px){
  .chips button, .btn-xs{ min-height:40px; }
  .chips{ flex-wrap:wrap; }
  #st-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-wrap:nowrap; }
  #st-tabs::-webkit-scrollbar{ display:none; }
  #st-tabs button{ white-space:nowrap; flex:none; min-height:44px; }
  .subtabs{ overflow-x:auto; scrollbar-width:none; }
  .subtabs button{ min-height:44px; white-space:nowrap; }
  .st-toolbar{ flex-wrap:wrap; gap:10px; }
  .st-toolbar .tool-right{ width:100%; flex-wrap:wrap; }
  .st-search, .st-select{ width:100%; min-height:44px; }
  .range-row{ flex-wrap:wrap; }
  .range-row input[type=date], .range-row select{ min-height:42px; }
  .purge-row select{ min-height:42px; }
  .table-wrap, #r-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #signout{ min-height:42px; }
}

/* delete-section dialog */
.sd-opt{ display:flex; align-items:center; gap:10px; margin:10px 0; font-size:14.5px; flex-wrap:wrap; }
.sd-opt select{ flex:1; min-width:160px; min-height:40px; }

/* Main / Roof Deck switch: same segmented control as the Restaurant page */
.venue-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; border-bottom:0; margin-bottom:14px; }
.venue-btn{ margin:0 !important; flex:none; padding:14px 18px 13px; border:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:14px; background:var(--white); color:#8a8378;
  transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease; }
.venue-btn:hover{ border-color:var(--brass); }
.venue-btn[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:var(--linen); box-shadow:0 10px 24px -14px rgba(15,12,9,.6); }
.venue-btn[aria-selected="true"] .venue-sub{ color:#E6BC6A; }
.venue-btn .venue-sub{ line-height:1.35; }
@media (max-width:560px){ .venue-tabs{ gap:10px; } .venue-btn{ padding:12px 14px 11px; font-size:17px; } }

/* Delivery: map pin + fee */
.pin-help{ margin:0 0 8px; font-size:13px; color:#6b6357; }
.pin-map{ height:220px; margin-top:10px; border-radius:12px; border:1px solid var(--line); overflow:hidden; background:#ece6da; z-index:0; }
.pin-status{ margin-top:8px; font-size:13.5px; color:#6b6357; }
.pin-status.ok{ color:#2f6b3a; font-weight:600; }
.pin-status.bad{ color:#a33a2a; font-weight:600; }
#t-fee-row small{ color:#8a8378; font-weight:400; }
#pin-field.invalid .pin-map{ border-color:#a33a2a; }
.pin-map{ height:260px; }
.pin-key{ background:rgba(255,255,255,.92); padding:6px 9px; border-radius:8px; font-size:12px; line-height:1.6; color:#3a342c; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.pin-key span{ display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:-2px; margin-right:4px; }
.pin-key .k-out{ border:2px dashed #B8893A; background:rgba(184,137,58,.12); }
.pin-key .k-in{ border:2px solid #2f6b3a; background:rgba(47,107,58,.12); }
.ring-label span{ position:absolute; transform:translate(-50%,-50%); padding:1px 6px; border-radius:10px; font:700 11px/1.4 Inter,sans-serif; white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.25); }

/* "Your orders" lookup */
.mo-dlg{ width:min(560px,94vw); max-height:88vh; padding:22px; border:0; border-radius:16px; background:var(--white,#fff); box-shadow:0 30px 80px -20px rgba(0,0,0,.5); overflow:auto; }
.mo-dlg::backdrop{ background:rgba(15,12,9,.55); }
.mo-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.mo-head h2{ font-size:26px; margin:0; }
.mo-note{ font-size:12.5px; color:#8a8378; margin:12px 0 0; }
.mo-order{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:14px; }
.mo-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.mo-top .num{ font-weight:700; font-size:18px; }
.mo-meta{ font-size:13px; color:#6b6357; margin:4px 0 8px; }
.mo-lines div{ display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:2px 0; }
.mo-lines .tot{ border-top:1px solid var(--line); margin-top:6px; padding-top:6px; }

/* Dish photo preview */
.dish-img{ flex:none; width:96px; height:96px; padding:0; border:0; background:none; border-radius:8px; cursor:zoom-in; position:relative; }
.dish-img img{ display:block; width:96px; height:96px; }
.dish-img::after{ content:""; position:absolute; right:6px; bottom:6px; width:22px; height:22px; border-radius:50%; background:rgba(20,17,14,.72) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6'/><path d='M15 15l5 5M10.5 8v5M8 10.5h5'/></svg>") center/14px no-repeat; }
.dish-img:hover img{ filter:brightness(1.06); }
.dish-img:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.dish.sold-out .dish-img img{ filter:grayscale(1); opacity:.6; }
.photo-dlg{ width:min(720px,94vw); max-height:92vh; padding:0; border:0; border-radius:16px; background:var(--white,#fff); overflow:hidden; box-shadow:0 30px 90px -20px rgba(0,0,0,.6); }
.photo-dlg::backdrop{ background:rgba(15,12,9,.7); }
.photo-dlg #photo-img{ display:block; width:100%; max-height:62vh; object-fit:contain; background:#14110e; }
.photo-x{ position:absolute; right:12px; top:12px; width:42px; height:42px; border:0; border-radius:50%; background:rgba(20,17,14,.78); color:#fff; font-size:28px; line-height:1; cursor:pointer; z-index:2; }
.photo-x:hover{ background:#14110e; }
.photo-cap{ padding:16px 20px 20px; }
.photo-row{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; font-size:19px; }
.photo-cap p{ margin:6px 0 14px; color:#6b6357; font-size:14.5px; line-height:1.5; }
.photo-cap p:empty{ display:none; }

/* long unbroken descriptions (for example "Lettuce,tomatoes,onion") must wrap instead of pushing the card off the screen */
.dish{ min-width:0; }
.dish-body p, .dish-body h3{ overflow-wrap:anywhere; }

/* Editing an order that has already been placed */
.edit-banner{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.edit-banner[hidden]{ display:none; }
.checkout.editing [data-edit-hide]{ display:none; }
.confirm-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.confirm-locked{ font-size:13px; color:#8a8378; margin:0 0 14px; }
.mo-order .mo-edit{ margin-top:12px; }

/* product photos on the staff order cards */
.o-it{ display:flex; align-items:center; gap:10px; min-width:0; }
.o-it > span:last-child{ min-width:0; overflow-wrap:anywhere; }
.o-thumb{ width:46px; height:46px; border-radius:8px; object-fit:cover; flex:none; background:#ece6da; }
.o-items div:has(.o-thumb){ align-items:center; padding:4px 0; }
.o-thumbbtn{ flex:none; padding:0; border:0; background:none; border-radius:8px; cursor:zoom-in; line-height:0; }
.o-thumbbtn:hover .o-thumb{ filter:brightness(1.08); }
.o-thumbbtn:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

/* The total and the order button stay in view while the order panel scrolls */
.place-bar{ position:sticky; bottom:-1px; z-index:3; background:var(--white); margin:10px -2px 0; padding:12px 2px 2px; border-top:1px solid var(--line-soft); }
.place-bar::before{ content:""; position:absolute; left:0; right:0; top:-26px; height:26px; pointer-events:none; background:linear-gradient(to bottom, rgba(255,255,255,0), var(--white)); }
.place-total{ display:flex; justify-content:space-between; align-items:baseline; font-size:15px; margin-bottom:8px; }
.place-total .price{ font-size:20px; }
.place-note{ font-size:12.5px; color:#8a8378; margin:10px 0 0; text-align:center; }

/* confirmation before an order is placed or changed */
.cf-dlg{ width:min(460px,94vw); }
.cf-lines{ max-height:34vh; overflow:auto; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:8px 0; font-size:14.5px; }
.cf-lines div{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.cf-total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; font-size:16px; }
.cf-total .price{ font-size:22px; }
.cf-where{ margin:10px 0 0; font-size:13.5px; color:#6b6357; line-height:1.5; }
.cf-actions{ display:flex; gap:10px; margin-top:18px; }
.cf-actions .btn{ flex:1; justify-content:center; }
.o-extra{ display:block; margin-top:2px; font-size:12.5px; font-weight:600; color:#8B6A3E; line-height:1.35; }

/* extras (paid add-ons) */
.ex-list{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:6px 0; max-height:42vh; overflow:auto; }
.ex-group{ border:0; padding:0; margin:0; }
.ex-group + .ex-group{ border-top:1px solid var(--line-soft); margin-top:6px; padding-top:6px; }
.ex-group legend{ color:#70512D; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 2px; }
.ex-opt{ display:flex; align-items:center; gap:12px; padding:11px 2px; cursor:pointer; font-size:15px; border-bottom:1px solid var(--line-soft); }
.ex-opt:last-child{ border-bottom:0; }
.ex-opt input{ width:20px; height:20px; accent-color:#B8893A; flex:none; }
.ex-opt span{ flex:1; }
.ex-opt b{ color:#70512D; font-weight:600; white-space:nowrap; }
.ex-qty{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:15px; }
.cart-extras{ font-size:12.5px; color:#70512D; line-height:1.4; margin-top:2px; }
.cart-extras span{ color:#8a8378; }
.in-cart{ font-size:12.5px; color:#2f6b3a; font-weight:600; margin-right:8px; align-self:center; white-space:nowrap; }
.dish .controls{ display:flex; align-items:center; justify-content:flex-end; }
.cf-lines .o-extra, .mo-lines .o-extra, .confirm-lines .o-extra{ display:block; font-size:12.5px; font-weight:600; color:#70512D; margin-top:1px; }

/* search the menu */
.menu-search{ position:relative; margin-bottom:14px; }
.menu-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#8a8378; pointer-events:none; }
.menu-search input{ width:100%; height:48px; padding:0 44px 0 44px; border:1px solid var(--line); border-radius:12px; background:var(--white); font:inherit; font-size:15.5px; color:var(--ink); }
.menu-search input::-webkit-search-cancel-button{ display:none; }
.menu-search input:focus{ outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass); }
.menu-search button{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:0; border-radius:50%; background:#ece6da; color:#3a342c; font-size:20px; line-height:1; cursor:pointer; }
.menu-search button[hidden]{ display:none; }
.search-note{ margin:0 0 14px; font-size:13.5px; color:#6b6357; }
mark.hit{ background:#f3dfae; color:inherit; border-radius:3px; padding:0 1px; }