/* Orders: new order form, open orders, the bill panel, and the printed bill.
   Tokens only; colours come from theme.css. Reuses .dish-section (menu.css),
   .seg / .seg-count (today.css, alerts.css), .list-row and .table. */

#orders-main{display:flex;flex-direction:column;gap:var(--sp-4)}

/* ---- new / edit order ---- */
.ord-lines{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.ord-line{display:grid;grid-template-columns:22px minmax(180px,2fr) auto minmax(140px,1.4fr) 34px;
  gap:var(--sp-2);align-items:center}
.ord-n{font-size:var(--fs-xs);font-weight:800;color:var(--muted);text-align:right}
.ord-dish select{width:100%}
.ord-fixed{display:block;padding:9px 11px;border:1px dashed var(--line-strong);border-radius:var(--r-md);
  font-weight:700;color:var(--ink-2)}
.ord-qty{display:inline-flex;align-items:center;gap:4px}
.ord-qty input{width:58px;text-align:center;padding:8px 4px}
.ord-qty .icon-btn{font-size:var(--fs-lg);font-weight:800}
.ord-note{width:100%}
.ord-who{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-4)}
.ord-who input{width:100%}
.ord-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-4);flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-2)}
.ord-sum{color:var(--ink-2);font-weight:700;font-size:var(--fs-sm)}

/* ---- open orders ---- */
.ord-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-3)}
.ord-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-3) var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-2);box-shadow:var(--shadow-sm)}
.ord-card header{display:flex;flex-direction:column;gap:2px}
.ord-card header b{font-size:var(--fs-lg);font-weight:800}
.oc-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
.oc-lines li{display:flex;justify-content:space-between;gap:var(--sp-2)}
.oc-lines i{display:block;color:var(--amber);font-size:var(--fs-xs)}
.ord-card footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:var(--sp-2);margin-top:auto}
.oc-actions{display:flex;gap:var(--sp-2);align-items:center}
.num{font-variant-numeric:tabular-nums}

/* ---- bill panel ---- */
.seg-lite{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden;
  width:max-content;max-width:100%}
.seg-lite button{background:var(--surface);border:none;border-right:1px solid var(--line-strong);font-size:var(--fs-sm);
  font-weight:700;padding:7px 12px;cursor:pointer;color:var(--ink-2)}
.seg-lite button:last-child{border-right:none}
.seg-lite button.active{background:var(--chalk);color:var(--chalk-ink)}
#bill-disc-value input,#bill-disc-value select{margin-top:var(--sp-2);width:220px;max-width:100%}
.bill-table td{vertical-align:top}
.comp-row td{background:var(--chalk-soft);padding-top:6px;padding-bottom:8px}
.comp-edit{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;font-size:var(--fs-sm);font-weight:700}
.comp-edit input[type=number]{width:64px;margin-left:6px;padding:5px 6px}
.comp-reason{flex:1;display:flex;align-items:center;gap:6px;min-width:220px}
.comp-reason input{flex:1;padding:6px 8px}
.bill-totals dl{margin:0;display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);padding-top:var(--sp-2)}
.bill-totals dl div{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--ink-2)}
.bill-totals dd{margin:0;font-variant-numeric:tabular-nums}
.bill-totals .grand{font-size:var(--fs-lg);font-weight:800;color:var(--ink);border-top:1px solid var(--line);padding-top:6px;margin-top:4px}
.pay-split{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.pay-split label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.pay-split input{width:120px}
#bill-pay .edit-link{margin-top:var(--sp-2);display:inline-block}

/* ---- the printed bill (also shown on screen in .receipt-view) ---- */
#print-area{display:none}
.receipt{width:72mm;margin:0 auto;font-family:"Courier New",ui-monospace,monospace;font-size:12px;line-height:1.35;
  color:#000;background:#fff;padding:4mm 2mm}
.receipt-view{background:var(--surface-2);align-items:center}
.receipt-view .receipt{box-shadow:var(--shadow-md)}
.rc-cafe{text-align:center;font-weight:800;font-size:15px}
.rc-c{text-align:center}
.rc-rule{border-top:1px dashed #000;margin:5px 0}
.rc-kv{display:flex;justify-content:space-between;gap:8px}
.rc-total{font-weight:800;font-size:14px;margin-top:3px}
.rc-items{width:100%;border-collapse:collapse;font-size:12px}
.rc-items th{text-align:right;font-weight:700;border-bottom:1px solid #000}
.rc-items td{text-align:right;vertical-align:top;padding:1px 0}
.rc-items th:first-child,.rc-items td:first-child{text-align:left;padding-right:4px}
.rc-free{font-size:10px;font-style:italic}
.rc-thanks{margin-top:4px}
.rc-void{text-align:center;font-weight:800;font-size:16px;border:2px solid #000;padding:3px;margin-bottom:6px}
.rc-void small{display:block;font-size:10px;font-weight:400}

@media print{
  body.printing-receipt > *:not(#print-area){display:none!important}
  body.printing-receipt{background:#fff}
  body.printing-receipt #print-area{display:block}
  body.printing-receipt .receipt{margin:0;padding:0 2mm}
  @page{margin:3mm}
}

/* Stock: the warning under an order line, who checked, a bill being changed,
   the stock-check popup, the Bills tab's day + search, a bill's change log. */
.ord-warn{grid-column:2 / -1;display:flex;gap:6px;align-items:flex-start;font-size:var(--fs-xs);font-weight:700;
  color:var(--brick);background:var(--brick-soft);border-radius:var(--r-sm);padding:5px 8px}
.ord-warn.soft{color:var(--amber);background:var(--amber-soft);font-weight:600}
.ord-warn .i{flex-shrink:0;margin-top:1px}
.oc-checked{display:block;color:var(--amber);font-size:var(--fs-xs)}
.ord-card.editing{border-color:var(--amber);border-left:4px solid var(--amber)}
.ord-card header .badge{align-self:flex-start}
.stock-warn-list{margin:var(--sp-2) 0 var(--sp-3) 18px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
.bills-toolbar{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--sp-3)}
.bills-toolbar .field{margin-bottom:0}
.bills-toolbar .search-box{flex:1;min-width:220px}
.bill-edits{margin-top:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-3);text-align:left}
.bill-edits h3{font-size:var(--fs-sm);font-weight:800;margin-bottom:var(--sp-2)}
.bill-edit{font-size:var(--fs-sm);padding:6px 0;border-bottom:1px dashed var(--line)}
.bill-edit:last-child{border-bottom:none}
.bill-edit-diff{font-size:var(--fs-xs);color:var(--ink-2);margin-top:3px}

@media (max-width:700px){
  .ord-line{grid-template-columns:18px 1fr auto;grid-template-areas:"n dish dish" "n qty del" "n note note" "n warn warn"}
  .ord-warn{grid-area:warn}
  .ord-n{grid-area:n}
  .ord-dish{grid-area:dish}
  .ord-qty{grid-area:qty}
  .ord-line > .icon-btn{grid-area:del;justify-self:end}
  .ord-note{grid-area:note}
  .ord-line{padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
  .ord-who{grid-template-columns:1fr}
  .ord-foot{justify-content:space-between}
  .bill-table th:nth-child(3),.bill-table td:nth-child(3){display:none}
}

/* QR orders tab: the pause switch, a guest's order with tick boxes */
.qr-pause{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);background:var(--mint-soft);color:var(--mint);font-weight:700}
.qr-pause span{display:flex;align-items:center;gap:6px}
.qr-pause.paused{background:var(--amber-soft);color:var(--amber)}
.qr-card-in{border-left:4px solid var(--chalk)}
.qr-lines label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.qr-lines input[type=checkbox]{margin-top:3px;width:16px;height:16px;flex-shrink:0}
.qr-lines li.dropped label > span,.qr-lines li.dropped .num{text-decoration:line-through;color:var(--muted)}
.qr-short{display:flex;align-items:center;gap:4px;color:var(--amber);font-style:normal;font-weight:700}
.oc-lines .badge{margin-left:4px}
.oc-lines li.oc-addon{padding-left:18px;font-size:var(--fs-sm);color:var(--ink-2)}