/* ══════════════════════════════════════════════════════════════════
   EMERGENCY BILLING — counter-billing tool for when Candela POS is
   down (Architecture doc, Phase 3). Follows the app's per-domain CSS
   file convention (stockledger.css, attendance.css) and its shared
   design tokens (css/variables.css) rather than porting POS's own
   css/components.css literally.

   Layout note (desktop redesign): Candela's own Sale-and-Return screen
   splits the working area into a wide product/line-item grid on the
   left and a narrower, always-visible Net Total + payment + save/cancel
   panel on the right. This file mirrors that split (.eb-pos-grid) so
   the person never has to scroll past the whole bill to reach Checkout
   on a desktop-sized screen, while staying inside this app's own token
   palette (var(--teal)/var(--green)/var(--amber)/var(--red)) instead of
   Candela's literal hex values, so it still respects dark mode.
   ══════════════════════════════════════════════════════════════════ */

#page-emergency-billing.page { display: none; }
#page-emergency-billing.page.on { display: block; }

/* Kiosk mode (#pos, see auth.js's _enterKioskMode) — belt-and-braces:
   #nav/#status-bar are already display:none by default and are only
   ever revealed by unlockApp(), which kiosk mode never calls. This
   just makes sure nothing else can accidentally surface them or any
   other page while body carries .bt-kiosk-mode. */
body.bt-kiosk-mode #nav,
body.bt-kiosk-mode #status-bar,
body.bt-kiosk-mode .page:not(#page-emergency-billing) {
  display: none !important;
}

.eb-wrap {
  max-width: 1360px; margin: 0 auto; padding: var(--sp-4) var(--sp-5) var(--sp-7);
  font-family: var(--sans); color: var(--text);
}

.eb-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-3);
}

/* ── Inventory sync status — the actual fix for "No products found" /
   "Inventory data unavailable" showing up for real products: this page
   now proactively refreshes BT Inventory on every visit (see
   emergency-billing-native.js's refreshInventoryStatus()), and always
   shows staff exactly how fresh that data is plus a one-click retry,
   instead of the old silent dependence on having visited Cover or the
   Inventory page first in the same session. ─────────────────────────── */
.eb-inv-status-box { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.eb-inv-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.eb-inv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.eb-inv-dot-ok { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.eb-inv-dot-warn { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
.eb-inv-dot-bad { background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }

/* ── Tab bar (Billing / History / Settings) ─────────────────────────
   Same pill-tab visual language as the rest of the app's sub-nav strips
   (Manager's #mgr-tabs, Credit Ledger's .cl-mode-tabs), scoped to this
   page's own tokens rather than reused classes, since those live in
   files this domain never imports. ─────────────────────────────────── */
.eb-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.eb-tab-btn {
  padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-weight: 700; font-size: 13px;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.eb-tab-btn:hover { border-color: var(--border-strong); }
.eb-tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.eb-tab-panel { display: none; }
.eb-tab-panel.on { display: block; }

/* ── Two-pane desktop layout ─────────────────────────────────────── */
.eb-pos-grid { display: grid; grid-template-columns: 1fr 392px; gap: var(--sp-5); align-items: start; }
.eb-pos-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.eb-pos-side { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }

@media (max-width: 980px) {
  .eb-pos-grid { grid-template-columns: 1fr; }
  .eb-pos-side { position: static; }
}

/* ── Customer box — sits above the search bar so staff capture who the
   sale is for before they start scanning items. Same card language as
   the other billing cards, kept compact (two fields side by side). ── */
.eb-customer-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh); padding: var(--sp-3) var(--sp-4);
}
.eb-customer-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 560px) { .eb-customer-row { grid-template-columns: 1fr; } }
.eb-customer-row label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.eb-customer-row input { width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.eb-customer-row input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }

/* ── Product search — the primary action on this page, so it gets its
   own elevated, accent-bordered "hero" bar instead of a plain text
   input: bigger type, a search glyph, and a visible accent ring even
   before focus so it reads as the thing to use next. ── */
.eb-search-box {
  position: relative; background: var(--surface); border: 2px solid var(--accent);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--sp-2);
}
.eb-search-row { display: flex; align-items: center; gap: var(--sp-2); }
.eb-search-icon { flex: none; font-size: 18px; padding-left: var(--sp-2); opacity: .7; }
.eb-search-row input[type="text"] {
  flex: 1; padding: 16px 14px; border-radius: var(--r-md);
  border: none; background: transparent; color: var(--text); font-size: 17px; font-weight: 600;
}
.eb-search-row input[type="text"]::placeholder { font-weight: 400; color: var(--muted); }
.eb-search-row input[type="text"]:focus { outline: none; }
#eb-qty-input {
  width: 72px; text-align: center; padding: 16px 8px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--s2); color: var(--text); font-size: 15px; font-weight: 700;
}
#eb-search-clear {
  padding: 0 16px; align-self: stretch; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--s2); color: var(--muted); cursor: pointer; font-size: 14px;
}

.eb-search-results {
  display: none; position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  box-shadow: var(--sh-lg); max-height: 360px; overflow-y: auto;
}
.eb-sr-row {
  display: grid; grid-template-columns: 24px 1fr 90px 56px 80px;
  gap: var(--sp-2); align-items: center; padding: 8px 12px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--border); border-left: 3px solid transparent;
}
.eb-sr-row:last-child { border-bottom: none; }
/* Was var(--alt), a near-white tint indistinguishable from the row
   background — keyboard ↑/↓ looked like it did nothing. A saturated
   accent tint + left bar makes the active row obvious, same idea as
   Candela's own selected-row bar. */
.eb-sr-row:hover, .eb-sr-row.selected {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-left-color: var(--accent);
}
.eb-sr-num { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.eb-sr-code { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.eb-sr-generic { color: var(--t2); font-size: 12px; }
.eb-sr-stock { font-family: var(--mono); text-align: right; }
.eb-sr-stock.low { color: var(--red); font-weight: 700; }
.eb-sr-price { font-family: var(--mono); text-align: right; font-weight: 600; }
.eb-search-no-results { display: none; padding: var(--sp-3); color: var(--amber); font-size: 13px; font-weight: 600; }

.eb-f9-hint {
  display: none; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-dk);
  font-weight: 700; font-size: 12px; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--accent); border-radius: var(--r-sm);
}

/* ── Bill grid (left pane) — Candela's own product/line grid is a tall,
   dense table with a sticky header; scoping the scroll to this card
   (instead of the whole page) keeps the right-hand totals/checkout
   panel in view even on a long bill. ────────────────────────────── */
.eb-cart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); overflow: hidden; }
.eb-cart-head {
  display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border); background: var(--grad-header); color: #fff;
}
.eb-cart-head h3 { font-size: 14px; font-weight: 700; letter-spacing: .01em; }
#eb-cart-count { color: rgba(255,255,255,.85); font-size: 12px; font-weight: 600; }

.eb-cart-scroll { max-height: 52vh; overflow-y: auto; }
/* Full grid (header + body, every cell bordered on all four sides) —
   matches Candela's own Sale-and-Return grid rather than the old
   horizontal-rules-only table. */
table.eb-cart-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
table.eb-cart-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--grad-header); color: #fff;
  text-align: left; padding: 10px 12px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--accent-dk); border-top: none;
}
table.eb-cart-table thead th:first-child { border-left: none; }
table.eb-cart-table thead th:last-child { border-right: none; }
table.eb-cart-table td { padding: 8px 12px; border: 1px solid var(--grid); vertical-align: middle; }
table.eb-cart-table td:first-child { border-left: none; }
table.eb-cart-table td:last-child { border-right: none; }
table.eb-cart-table tbody tr:last-child td { border-bottom: none; }
table.eb-cart-table tbody tr:nth-child(even) { background: var(--alt); }
table.eb-cart-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
/* Column widths — Qty widened so the −/input/+ controls never wrap or
   get clipped; # and the trailing delete column stay narrow. */
table.eb-cart-table th:nth-child(1), table.eb-cart-table td.eb-tc-sr { width: 34px; text-align: center; }
table.eb-cart-table th:nth-child(4), table.eb-cart-table td.eb-tc-qty { width: 148px; }
table.eb-cart-table th:nth-child(3), table.eb-cart-table td.eb-tc-price,
table.eb-cart-table th:nth-child(5), table.eb-cart-table td.eb-tc-total { width: 110px; }
table.eb-cart-table th:last-child, table.eb-cart-table td.eb-tc-act { width: 40px; text-align: center; }
/* F9 row-edit highlight — was var(--purple-lt), a near-white tint that
   was indistinguishable from the surface/banding colors, so toggling
   F9 and pressing ↑/↓ looked like nothing was happening. A strong
   accent tint + left bar makes the active row unmistakable. */
.eb-cart-row.f9-active {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface)) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
.eb-cart-row.f9-active td { font-weight: 600; }
.eb-cc-name { font-weight: 600; }
.eb-cc-code { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.eb-tc-price, .eb-tc-total { font-family: var(--mono); text-align: right; white-space: nowrap; }
.eb-tc-total { font-weight: 700; }
.eb-qwrap { display: flex; align-items: center; gap: 6px; }
.eb-qbtn { width: 26px; height: 26px; flex: none; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--s2); cursor: pointer; font-size: 15px; line-height: 1; }
.eb-qbtn:hover { background: var(--alt); border-color: var(--accent); }
.eb-qinp { width: 56px; text-align: center; padding: 5px 2px; border-radius: var(--r-xs); border: 1px solid var(--border); font-size: 13px; }
/* F9 mode's inline "type a digit to overwrite qty" edit (see onGlobalKeydown
   in emergency-billing-native.js) focuses this field directly — a clear
   focus ring makes it obvious editing has actually started. */
.eb-qinp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
/* Native number-input up/down arrows — redundant next to the custom
   −/+ eb-qbtn buttons already beside this field, and the pair together
   looked like two competing sets of stepper controls. Hidden on both
   the cart qty field and its refund-modal twin (same field, same fix). */
.eb-qinp, .eb-refund-qty-inp { -moz-appearance: textfield; }
.eb-qinp::-webkit-inner-spin-button, .eb-qinp::-webkit-outer-spin-button,
.eb-refund-qty-inp::-webkit-inner-spin-button, .eb-refund-qty-inp::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.eb-del { border: none; background: none; color: var(--red); cursor: pointer; font-size: 14px; }
.eb-empty { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--muted); font-size: 14px; }

/* ── Right pane — totals / payment / actions, one continuous card so it
   reads as a single "till panel" the way Candela's own right rail does. ── */
.eb-total-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }

.eb-summary { padding: var(--sp-4); }
.eb-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; }
.eb-discount-row input { width: 110px; text-align: right; padding: 4px 8px; border-radius: var(--r-xs); border: 1px solid var(--border); }
/* ── Discount: Flat / % mode toggle + 1–5% quick presets ──────────── */
.eb-discount-row { flex-wrap: wrap; row-gap: 6px; }
.eb-discount-controls { display: flex; align-items: center; gap: 6px; }
.eb-discount-mode-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--r-xs); overflow: hidden; }
.eb-discount-mode-btn {
  padding: 4px 9px; font-size: 12px; font-weight: 700; border: none; background: var(--s2);
  color: var(--muted); cursor: pointer;
}
.eb-discount-mode-btn.active { background: var(--accent); color: #fff; }
.eb-discount-row .eb-discount-mode-btn:first-child { border-right: 1px solid var(--border); }
.eb-discount-presets-row { padding-top: 0; }
.eb-discount-presets { display: flex; gap: 6px; margin-left: auto; }
.eb-discount-preset-btn {
  padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--s2);
  color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer;
}
.eb-discount-preset-btn:hover { border-color: var(--accent); }
.eb-discount-preset-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.eb-discount-amount-row { font-size: 11.5px; color: var(--muted); padding-top: 0; }
/* Big, Candela-style Net Total display — this is the number a person
   scans for from across the counter, so it gets its own tinted panel
   and a much larger, bolder numeral than the rest of the summary. */
.eb-summary-row.eb-net {
  margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-md); border: 1px solid var(--teal);
  background: var(--tlt); flex-direction: column; align-items: flex-start; gap: 4px;
}
.eb-summary-row.eb-net span:first-child { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--teal-dk); align-self: flex-start; }
.eb-summary-row.eb-net span:last-child { font-size: 30px; font-weight: 800; color: var(--teal-dk); font-family: var(--mono); line-height: 1; }

.eb-meta-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4); border-top: 1px solid var(--border); }
.eb-meta-grid label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.eb-meta-grid input { width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); }

.eb-pay-section { padding: var(--sp-4); border-top: 1px solid var(--border); }
.eb-pay-modes { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.eb-pay-btn { flex: 1; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 13px; transition: background .15s,border-color .15s,color .15s; }
.eb-pay-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.eb-cash-row { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }
.eb-cash-row input { flex: 1; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); }
.eb-change-row { display: none; justify-content: space-between; font-weight: 700; padding: 6px 0; }

/* ── Actions — colour-coded like Candela's own bottom toolbar (green
   save, amber hold, red cancel/refund, neutral clear), built from this
   app's existing semantic tokens rather than Candela's literal hex. ── */
.eb-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); padding: var(--sp-4); border-top: 1px solid var(--border); }
.eb-btn { padding: 11px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 13px; transition: filter .1s, background .15s, border-color .15s; }
.eb-btn:hover:not(:disabled) { filter: brightness(0.97); }
.eb-btn:active:not(:disabled) { filter: brightness(0.93); }
.eb-btn:disabled { opacity: .5; cursor: not-allowed; }
.eb-btn-sm { padding: 6px 10px; font-size: 12px; }
.eb-btn-danger { color: var(--red); }
.eb-btn-danger-outline { color: var(--red); border-color: var(--red); background: var(--rlt); }
.eb-btn-hold { color: var(--amber); border-color: var(--amber); background: var(--alt2); }
.eb-btn-primary { background: var(--green); border-color: var(--green); color: #fff; grid-column: 1 / -1; padding: 14px 16px; font-size: 15px; }
.eb-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.eb-btn-ghost { color: var(--muted); }

.eb-held-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh); padding: var(--sp-4); }
.eb-held-card h3 { font-size: 14px; margin-bottom: var(--sp-3); }
.eb-held-empty { color: var(--muted); font-size: 13px; padding: var(--sp-3) 0; }
.eb-held-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.eb-held-row:last-child { border-bottom: none; }
.eb-held-tag { font-weight: 600; font-size: 13px; }
.eb-held-meta { color: var(--muted); font-size: 12px; }
.eb-held-actions { display: flex; gap: 6px; }

.eb-recon-loading { color: var(--muted); font-size: 13px; padding: var(--sp-3) 0; }

/* ── Billing History — filters + results ─────────────────────────── */
.eb-hist-filter-card { margin-bottom: var(--sp-4); }
.eb-hist-presets { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.eb-hist-preset-btn {
  padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--s2); color: var(--muted); font-weight: 600; font-size: 12px; cursor: pointer;
}
.eb-hist-preset-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.eb-hist-filter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}
.eb-hist-filter-grid label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.eb-hist-filter-grid input, .eb-hist-filter-grid select { width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.eb-hist-check-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.eb-hist-check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.eb-hist-filter-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

.eb-hist-results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); flex-wrap: wrap; gap: var(--sp-2); }
.eb-hist-summary { font-size: 12px; color: var(--muted); font-weight: 600; }

.eb-hist-table-wrap { overflow-x: auto; }
table.eb-hist-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
table.eb-hist-table thead th {
  position: sticky; top: 0; background: var(--grad-header); color: #fff;
  text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
}
table.eb-hist-table tbody tr { cursor: pointer; border-bottom: 1px solid var(--border); transition: background .1s; }
table.eb-hist-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
table.eb-hist-table td { padding: 8px 10px; vertical-align: middle; }
table.eb-hist-table td.eb-hist-num { font-family: var(--mono); font-weight: 700; }
table.eb-hist-table td.eb-hist-total { font-family: var(--mono); text-align: right; font-weight: 700; }
.eb-hist-badge { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-size:11px; font-weight: 700; }
.eb-hist-badge-refund { background: var(--rlt); color: var(--red); border: 1px solid var(--red); }
.eb-hist-badge-unrecon { background: var(--alt2); color: var(--amber); border: 1px solid var(--amber); }
.eb-hist-badge-recon { background: var(--glt); color: var(--green); border: 1px solid var(--green); }

/* ── Saved-bill detail view (inside #eb-history-detail-modal, reuses
   .eb-refund-box's shell) ─────────────────────────────────────────── */
.eb-hist-detail-meta { font-size: 12px; color: var(--muted); margin-bottom: var(--sp-3); line-height: 1.6; }
.eb-hist-detail-meta strong { color: var(--text); }
table.eb-hist-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: var(--sp-3); }
table.eb-hist-detail-table th { text-align: left; padding: 6px 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
table.eb-hist-detail-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); }
table.eb-hist-detail-table td.num { text-align: right; font-family: var(--mono); }
.eb-hist-detail-totals { border-top: 1px dashed var(--border-strong); padding-top: var(--sp-2); margin-bottom: var(--sp-3); }
.eb-hist-detail-totals .eb-summary-row { font-size: 13px; }
.eb-hist-detail-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Settings form ─────────────────────────────────────────────────── */
.eb-set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }
.eb-set-card h3 { font-size: 14px; margin-bottom: var(--sp-3); }
.eb-set-field { margin-bottom: var(--sp-3); }
.eb-set-field label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.eb-set-field input, .eb-set-field select, .eb-set-field textarea {
  width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-family: var(--sans); resize: vertical;
}
.eb-set-check { margin-bottom: var(--sp-2); }
.eb-set-check label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.eb-set-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-4); flex-wrap: wrap; }
.eb-set-status { font-size: 12px; color: var(--green); font-weight: 700; opacity: 0; transition: opacity .2s; }
.eb-set-status.visible { opacity: 1; }

/* ── Cover signal card ──────────────────────────────────────────── */
.eb-cover-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--alt2); border: 1px solid var(--amber);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-3); cursor: pointer;
}
.eb-cover-banner-icon { font-size: 18px; }
.eb-cover-banner-text { font-size: 13px; color: var(--amber); }
.eb-cover-banner-text strong { font-weight: 700; }

/* ── History's Saved Bill modal shell — also hosts the inline Refund
   form now (renderRefundFormInline() swaps #eb-history-detail-body's
   contents in place; same modal, same .eb-refund-box shell). ───────── */
#eb-history-detail-modal { display: none; position: fixed; inset: 0; background: rgba(15,20,40,.5); z-index: 200; align-items: center; justify-content: center; padding: var(--sp-4); }
#eb-history-detail-modal.visible { display: flex; }
.eb-refund-box { background: var(--surface); color: var(--text); width: 480px; max-width: 100%; max-height: 88vh; overflow-y: auto; border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: var(--sp-4); }
.eb-refund-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.eb-refund-head h3 { font-size: 15px; }
.eb-refund-status { color: var(--muted); font-size: 13px; padding: var(--sp-2) 0; }
.eb-refund-status.eb-refund-error { color: var(--red); }
.eb-refund-orig-meta { font-size: 12px; color: var(--muted); margin-bottom: var(--sp-2); }
table.eb-refund-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: var(--sp-3); }
table.eb-refund-table th { text-align: left; padding: 6px 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; border-bottom: 1px solid var(--border); }
table.eb-refund-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.eb-refund-qty-inp { width: 56px; text-align: center; padding: 4px; border-radius: var(--r-xs); border: 1px solid var(--border); }
.eb-refund-meta-grid { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.eb-refund-meta-grid > div { flex: 1; }
.eb-refund-meta-grid label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.eb-refund-meta-grid select, .eb-refund-meta-grid input { width: 100%; padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--border); }
.eb-refund-total-row { display: flex; justify-content: space-between; font-weight: 700; padding: var(--sp-2) 0; border-top: 1px dashed var(--border-strong); margin-bottom: var(--sp-3); }
.eb-refund-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* ── Receipt modal (screen) ─────────────────────────────────────── */
#eb-receipt-modal { display: none; position: fixed; inset: 0; background: rgba(15,20,40,.5); z-index: 200; align-items: center; justify-content: center; }
#eb-receipt-modal.visible { display: flex; }
.eb-receipt-box { background: #fff; color: #111; width: 320px; max-height: 82vh; overflow-y: auto; border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: var(--sp-4); font-family: var(--mono); font-size: 12px; }
.eb-rcpt-head { text-align: center; margin-bottom: var(--sp-3); }
.eb-rcpt-head h3 { font-size: 14px; margin-bottom: 2px; }
.eb-rcpt-head .eb-rcpt-branch { font-weight: 700; font-size: 11px; }
.eb-rcpt-head p { font-size: 11px; color: #555; }
.eb-rcpt-row { display: flex; justify-content: space-between; padding: 2px 0; }
.eb-rcpt-sep { border-top: 1px dashed #999; margin: 8px 0; }
.eb-rcpt-item { padding: 4px 0; }
.eb-rcpt-item-meta { display: flex; justify-content: space-between; color: #444; }
.eb-rcpt-net { font-weight: 700; font-size: 13px; }
.eb-rcpt-foot { margin-top: var(--sp-3); font-size:11px; color: #777; text-align: center; }
.eb-receipt-modal-actions { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-4); }

/* ── Print — only the receipt shows, everything else on the page is
   hidden. Same pattern POS's own print.css uses for its receipt slip:
   a dedicated print-only block rather than routing through this app's
   shared Print.render() engine (js/print.js), which targets full-page
   KPI/table reports, not a narrow thermal-style slip. ─────────────── */
@media print {
  body * { visibility: hidden; }
  #eb-receipt-print, #eb-receipt-print * { visibility: visible; }
  #eb-receipt-print {
    position: fixed; top: 0; left: 0; width: 80mm; padding: 4mm;
    color: #000; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  }
  /* Settings tab's "Receipt Width: 58mm (narrow)" option — applied as a
     class on #eb-receipt-print itself (see showReceipt() in
     emergency-billing-native.js) rather than a second print stylesheet. */
  #eb-receipt-print.eb-w58 { width: 58mm; font-size:11px; padding: 3mm; }
  #eb-receipt-modal, .eb-receipt-modal-actions, #eb-history-detail-modal { display: none !important; }
}