/* NEXA app shell: one page grid, one spacing rhythm, one set of sizes for every screen except the till.
   Loaded last so it settles the layout of every view. Tokens are prefixed --nx-. */
:root {
  --nx-gap: 20px;            /* space between cards */
  --nx-pad: 24px;            /* inside a card */
  --nx-radius: 18px;
  --nx-ctl: 44px;            /* control height */
  --nx-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- page frame ---- */
.app-frame { --nx-max: 1440px; }
.app-frame.nav-collapsed { --nx-max: 1760px; }   /* the freed sidebar width goes to the content */
.app-main:not(.is-pos) { max-width: none !important; padding-block-start: 0; scroll-padding-top: 88px; padding-inline: max(clamp(20px, 3vw, 44px), calc((100% - var(--nx-max)) / 2)); }
@media (min-width: 821px) {
  /* the title bar stays on top while the page scrolls, softly blurred */
  .app-main:not(.is-pos) .view.active > .view-head {
    position: sticky; top: 0; z-index: 30; padding: 20px 0 14px;
    background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  }
}

/* ---- the grid: cards sit side by side, wide content takes the full row ---- */
@media (min-width: 821px) {
  .app-main .view.active:not(#view-pos) {
    display: grid !important; columns: auto !important; column-width: auto !important; column-gap: normal !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: var(--nx-gap); align-items: start; grid-auto-flow: row dense;
    padding-block-end: 48px;
  }
  .app-main .view.active:not(#view-pos) > * { grid-column: 1 / -1; margin: 0 !important; min-width: 0; column-span: none !important; }
  .app-main .view.active:not(#view-pos) > .card:not(.stat):not(#platformReportCard):not(#salesLedgerCard):not(#integrityCard):not(#payrollLineItemsCard):not(#freshnessBoardCard):not(#onlineHistoryCard):not(#supplierDetailCard):not(#invCountCard):not(#invAuditCard):not(#aiInsightsCard):not(:has(table, .filter-tabs, .product-grid, canvas, .ledger-controls, .seg-scroll, .wide)) { grid-column: auto; }
  .app-main .view.active:not(#view-pos) > .card.stat { grid-column: auto; }
}
/* packed layout (js/masonry.js): rows are 4px, each block spans as many as it is tall */
@media (min-width: 821px) {
  .app-main .view.active.nx-mas:not(#view-pos) { grid-auto-rows: 4px; row-gap: 0; }
}
.card { border-radius: var(--nx-radius); padding: var(--nx-pad); }
.card h3 { margin-block-end: 14px; }

/* ---- numbers: one look for every figure ---- */
.card.stat { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 112px; padding: 20px 22px; }
.card.stat .eyebrow { margin: 0; font-size: .84rem; font-weight: 600; color: var(--ink-dim); }
.card.stat h2 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.card.stat h2[style] { font-size: clamp(1.15rem, 1.6vw, 1.45rem) !important; }
.report-grid, .source-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--nx-gap); }
.report-grid > .card { margin: 0; }
@media (min-width: 821px) { .app-main .view.active > .report-grid, .app-main .view.active > .source-tiles { order: -1; } .app-main .view.active > .view-head { order: -2; } }

/* ---- forms: one control height, quiet labels ---- */
.card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .card select { min-height: var(--nx-ctl); border-radius: 12px; }
.card label { font-size: .84rem; font-weight: 600; color: var(--ink-dim); }

/* ---- tables ---- */
.card table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.card table th { position: sticky; top: 0; font-size: .78rem; font-weight: 600; color: var(--ink-dim); text-align: start; padding: 10px 12px; background: color-mix(in srgb, var(--panel) 92%, var(--ink)); border-block: 1px solid var(--line); }
.card table td { padding: 12px; border-bottom: 1px solid var(--line); }
.card table tbody tr { transition: background .15s; }
.card table tbody tr:hover { background: color-mix(in srgb, var(--copper) 6%, transparent); }

/* ---- surfaces that respond ---- */
.card { transition: border-color .25s var(--nx-ease), box-shadow .25s var(--nx-ease); }
@media (hover: hover) { .card.stat:hover { border-color: color-mix(in srgb, var(--copper) 40%, var(--line)); } }

/* ---- finishing: scrollbars, selection, focus ---- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
::selection { background: color-mix(in srgb, var(--copper) 35%, transparent); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 8px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ---- screen change handled by GSAP when it is running (js/shell.js) ---- */
html.gx .view.active, html.gx .view.active .card { animation: none; }
@media (max-width: 820px) { .card { padding: 18px; } .card.stat { min-height: 96px; } }

/* The till always uses the full width that is left, so collapsing the sidebar widens the products and the cart. */
:root .app-main.is-pos { max-width: none !important; }

/* ---- one primary button everywhere (till checkout included) ---- */
:root[data-skin="nexa"] {
  --nx-btn-a: color-mix(in srgb, var(--copper) 60%, #2a1478);
  --nx-btn-b: color-mix(in srgb, var(--copper) 46%, #1c0d58);
}
:root[data-skin="nexa"] button.primary-btn, :root[data-skin="nexa"] a.primary-btn {
  background: linear-gradient(135deg, var(--nx-btn-a), var(--nx-btn-b)); color: #fff; border: 0; border-radius: 12px;
  font-weight: 700; letter-spacing: .01em; min-height: var(--nx-ctl);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--copper) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .2s var(--nx-ease), box-shadow .3s var(--nx-ease), filter .2s;
}
:root[data-skin="nexa"] button.primary-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
:root[data-skin="nexa"] button.primary-btn:active:not(:disabled) { transform: translateY(0) scale(.99); filter: brightness(.96); }
:root[data-skin="nexa"] button.primary-btn:disabled { filter: grayscale(.5) brightness(.85); opacity: .7; }
/* checkout: same button, only bigger; the opaque band behind it (so totals never show through) stays */
:root[data-skin="nexa"] .pos-cart #checkoutBtn { min-height: 54px; font-size: 1.05rem; border-radius: 14px; }
:root[data-skin="nexa"] .pos-cart #checkoutBtn:not(.x) { box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--copper) 75%, transparent), inset 0 1px 0 rgba(255,255,255,.2); }
.app-main.is-pos .pos-cart #checkoutBtn { margin-top: 4px; }

/* ---- checkboxes & radios: our own, on every browser ---- */
:root input[type="checkbox"], :root input[type="radio"] {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; min-width: 0; max-width: 20px; flex: none; margin: 0; cursor: pointer;
  display: inline-grid; place-content: center; border: 1.6px solid color-mix(in srgb, var(--ink) 34%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, var(--panel)); transition: background-color .18s, border-color .18s, box-shadow .18s, transform .18s var(--nx-ease);
}
:root input[type="checkbox"] { border-radius: 7px; }
:root input[type="radio"] { border-radius: 50%; }
:root input[type="checkbox"]::before { content: ""; width: 12px; height: 12px; transform: scale(0) rotate(-12deg); transition: transform .22s var(--nx-ease); background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
:root input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; transform: scale(0); transition: transform .22s var(--nx-ease); background: #fff; }
:root input[type="checkbox"]:checked, :root input[type="radio"]:checked { background: linear-gradient(135deg, var(--nx-btn-a, var(--copper)), var(--nx-btn-b, var(--copper))); border-color: var(--copper); }
:root input[type="checkbox"]:checked::before { transform: scale(1) rotate(0); }
:root input[type="radio"]:checked::before { transform: scale(1); }
:root input[type="checkbox"]:hover:not(:disabled), :root input[type="radio"]:hover:not(:disabled) { border-color: var(--copper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--copper) 14%, transparent); }
:root input[type="checkbox"]:active:not(:disabled) { transform: scale(.92); }
:root input[type="checkbox"]:focus-visible, :root input[type="radio"]:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
:root input[type="checkbox"]:disabled, :root input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { cursor: pointer; }

/* ---- touch: every tap target is at least 40px (small icon buttons keep their look, the hit area grows) ---- */
@media (max-width: 1024px), (pointer: coarse) {
  .seg-btn, .filter-tab, .void-btn, .ghost-btn, .primary-btn, .ghost-btn.small, .primary-btn.small, :root[data-skin] button.ghost-btn.small, :root[data-skin] .ghost-btn.small { min-height: 40px; height: auto; padding-block: 8px; }
  .quick-edit-btn, .chip-edit-btn, .st-remove, .info-dot { position: relative; }
  .quick-edit-btn::after, .chip-edit-btn::after, .st-remove::after, .info-dot::after { content: ""; position: absolute; inset: -10px; }
  .seg-scroll, .filter-tabs { scrollbar-width: none; }
}
/* phones */
@media (max-width: 560px) {
  .app-main:not(.is-pos) { padding-inline: 14px; }
  .card { padding: 16px; border-radius: 16px; }
  .view-head { flex-wrap: wrap; gap: 10px; }
  .view-head h2 { font-size: 1.35rem; }
  .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .card.stat h2 { font-size: 1.35rem; }
  input, select, textarea { font-size: 16px; }   /* iOS Safari zooms the page on smaller text in a focused field */
}

/* 12-hour reading beside a time field: «9:00 ص» / «5:00 م» */
.wp-t12 { display: inline-block; min-width: 4.2em; padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--copper); background: color-mix(in srgb, var(--copper) 12%, transparent); font-variant-numeric: tabular-nums; vertical-align: middle; white-space: nowrap; }

/* ---- attendance: today's roster ---- */
.att-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.att-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .84rem; color: var(--ink-dim); border: 1px solid var(--line); }
.att-chip b { font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.att-chip.in b { color: var(--ok); }
.att-roster { display: flex; flex-direction: column; gap: 8px; }
.att-roster .att-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; }
.att-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: color-mix(in srgb, var(--copper) 18%, transparent); color: var(--copper); }
.att-who { display: flex; flex-direction: column; min-width: 0; }
.att-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-state { font-size: .78rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); white-space: nowrap; }
.att-state.in { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.att-state.overdue { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.att-row.done { opacity: .72; }
@media (max-width: 560px) { .att-roster .att-row { grid-template-columns: 38px minmax(0, 1fr) auto; } .att-roster .att-row > button { grid-column: 1 / -1; } }

/* the staff board is a full-width page: summary tiles in one row, employee cards in a grid */
@media (min-width: 821px) {
  .app-main .view.active:not(#view-pos) > #staffBoardCard { grid-column: 1 / -1 !important; }
}

/* ---- freshness: the live board first, a compact entry form beside/below it ---- */
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }
.fb-head h3 { margin: 0; }
.fb-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(70px, .6fr) minmax(0, 1fr); gap: 10px; margin-block-start: 6px; }
.fb-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-block-start: 8px; }
.fb-presets .choice-btn { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: transparent; justify-content: center; }
.fb-presets .choice-btn.selected { border-color: var(--copper); }
.fb-custom { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; margin-block: 12px 4px; font-size: .85rem; color: var(--ink-dim); }
@media (max-width: 560px) { .fb-fields { grid-template-columns: 1fr 1fr; } .fb-fields #fbName { grid-column: 1 / -1; } .fb-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 821px) { .app-main .view.active:not(#view-pos) > #freshnessBoardCard { grid-column: 1 / -1 !important; } }
#freshnessEmpty:empty { display: none; }

/* v87 — Products: list first, full width; tidy category chips */
#productListCard { grid-column: 1 / -1 !important; }
#productListCard > h3 { margin: 0 0 12px; }
#productListCard .product-grid.manage { margin: 0; }
#categoryChips { gap: 8px; margin-top: 12px; }
#categoryChips .chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; }

/* v91 -- account & privacy card, legal links */
.legal-note { font-size: .8rem; color: var(--ink-dim); text-align: center; }
.legal-note a { color: var(--copper); text-decoration: underline; text-underline-offset: 2px; }
.danger-zone { border-color: color-mix(in srgb, var(--danger, #e5484d) 30%, var(--line)); }
.danger-zone .danger-btn { color: var(--danger, #e5484d); border-color: color-mix(in srgb, var(--danger, #e5484d) 45%, transparent); }
.danger-zone .danger-btn:hover { background: color-mix(in srgb, var(--danger, #e5484d) 12%, transparent); }
.danger-solid { min-height: 44px; border: 0; border-radius: 12px; background: var(--danger, #e5484d); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: transform .14s cubic-bezier(.23, 1, .32, 1), opacity .16s ease-out; }
.danger-solid:disabled { opacity: .4; cursor: not-allowed; }
.danger-solid:not(:disabled):active { transform: scale(.97); }

/* Android app (Capacitor): print setup is the in-app printer box; the Windows-only setup and web-browser printing help are hidden. */
.native-only { display: none; }
html.is-native-app .native-only:not([hidden]) { display: block; }
html.is-native-app .web-only { display: none !important; }
#nativePrintBox { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }

/* Store build: prices, payment instructions and code redemption stay on the website; the app only shows the subscription status. */
html.is-native-app .pay-only, html.is-native-app #lockedPlanRow, html.is-native-app #lockedPaymentInstructions { display: none !important; }

/* ---- v189: line icons instead of colour emoji on the till toolbar and the install button.
   Same 24px grid, 1.8 stroke and currentColor as the sidebar icons, so they follow every skin. ---- */
#promoCheckBtn, #openCustomerDisplayBtn, #shareCustomerDisplayBtn, #toggleCompactCategoriesBtn, .nx-install-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#promoCheckBtn::before, #openCustomerDisplayBtn::before, #shareCustomerDisplayBtn::before, #toggleCompactCategoriesBtn::before, .nx-install-btn::before {
  content: ""; width: 17px; height: 17px; flex: none; background: currentColor;
  -webkit-mask: var(--nx-ico) center / contain no-repeat; mask: var(--nx-ico) center / contain no-repeat;
}
.nx-install-btn[hidden] { display: none !important; }
#promoCheckBtn { --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); }
#openCustomerDisplayBtn { --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='19' height='13' rx='2'/%3E%3Cpath d='M8 20.5h8M12 16.5v4'/%3E%3C/svg%3E"); }
#shareCustomerDisplayBtn { --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
#toggleCompactCategoriesBtn { --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l-5 5 5 5M17 7l5 5-5 5M2 12h20'/%3E%3C/svg%3E"); }
#toggleCompactCategoriesBtn.is-compact { --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l5-5 5 5M7 17l5 5 5-5M12 2v20'/%3E%3C/svg%3E"); }
.nx-install-btn { --nx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M12 6.5v7M9 10.5l3 3 3-3M10.5 18h3'/%3E%3C/svg%3E"); }

/* ---- v189: phones: no page may slide sideways. The scrolling area of the app is .app-main
   (overflow-y:auto makes it a scroller on both axes), so anything 1px too wide made the whole
   screen pan left/right under the finger, most visibly on Subscription & identity. ---- */
@media (max-width: 820px) {
  .app-main { overflow-x: hidden; overscroll-behavior-x: none; }
  .app-main > .view, .app-main .card { min-width: 0; max-width: 100%; }
  .app-main .inline-form input, .app-main .inline-form select { min-width: 0 !important; max-width: 100%; }
  .app-main .inline-form.row > input { flex: 1 1 100%; }
  .skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .skin-card { min-width: 0; }
  .skin-card .skin-name, .skin-card .skin-desc { overflow-wrap: anywhere; }
  #appearanceCard input, #appearanceCard select { max-width: 100%; }
}

/* ---- v190: empty cart is one compact line (the picture is gone, so payment and split stay in view) ---- */
.cart-items .empty-hint.cart-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; margin: 0; font-size: .84rem; color: var(--ink-dim); text-align: start; }
.cart-items .empty-hint.cart-empty svg { flex: none; opacity: .7; }

/* ---- v190: split bill ---- */
#splitBillModal .sb-box { width: min(520px, 100%); max-width: 520px; max-height: min(90dvh, 820px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.sb-head h3 { margin: 0; font-size: 1.15rem; }
.sb-x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.sb-x:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.sb-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 20px 0; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--copper) 10%, transparent); border: 1px solid color-mix(in srgb, var(--copper) 28%, transparent); }
.sb-total span { color: var(--ink-dim); font-size: .88rem; }
.sb-total b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.sb-note { margin: 8px 20px 0; font-size: .78rem; color: var(--ink-dim); }
.sb-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 14px 20px 0; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sb-modes .split-mode-btn { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-dim); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.sb-modes .split-mode-btn.selected { background: var(--panel); color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 0 0 1px var(--line); }
.sb-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 20px 0; font-size: .9rem; }
.sb-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sb-stepper button { width: 40px; height: 36px; border: 0; background: transparent; color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.sb-stepper button:disabled { opacity: .3; cursor: default; }
.sb-stepper button:not(:disabled):hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.sb-stepper output { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the scrolling middle: items (by-item mode) then the people */
.sb-items, .sb-people { padding: 0 20px; }
#splitBillModal .sb-box > .sb-items, #splitBillModal .sb-box > .sb-people { flex: 0 1 auto; }
#splitBillModal .sb-box { overflow-y: auto; overscroll-behavior: contain; }
.sb-hint { margin: 14px 0 8px; font-size: .8rem; color: var(--ink-dim); }
.sb-unit { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 12px; }
.sb-unit.is-open { border-style: dashed; border-color: color-mix(in srgb, var(--copper) 45%, var(--line)); }
.sb-unit-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .86rem; }
.sb-unit-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-unit-name small { color: var(--ink-dim); font-size: .74rem; }
.sb-unit-name b { font-size: .8rem; color: var(--ink-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 60%; }
.sb-chip { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background-color .12s ease-out, border-color .12s ease-out, transform .12s ease-out; }
.sb-chip:hover { border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.sb-chip:active { transform: scale(.94); }
.sb-chip.on { background: var(--copper); border-color: var(--copper); color: var(--on-accent, #fff); }
.sb-people { margin-top: 14px; display: grid; gap: 8px; padding-bottom: 4px; }
.sb-person { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; }
.sb-badge { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--copper) 16%, transparent); color: var(--ink); font-size: .8rem; font-weight: 700; }
.sb-person .sb-name { min-width: 0; width: 100%; min-height: 36px; padding: 6px 10px; font-size: .88rem; }
.sb-person .sb-method { min-height: 36px; padding: 4px 8px; font-size: .82rem; max-width: 110px; }
.sb-amount { min-width: 72px; text-align: end; font-variant-numeric: tabular-nums; }
.sb-amt-edit { display: flex; align-items: center; gap: 4px; }
.sb-amt-edit .sb-amt { width: 92px; min-height: 36px; padding: 4px 8px; text-align: end; font-variant-numeric: tabular-nums; direction: ltr; }
.sb-rest { min-height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--copper); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sb-rest:hover { background: color-mix(in srgb, var(--copper) 10%, transparent); }
.sb-foot { position: sticky; bottom: 0; margin-top: 14px; padding: 12px 20px 18px; background: var(--panel); border-top: 1px solid var(--line); }
.sb-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.sb-status span { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sb-status small { font-size: .74rem; color: var(--ink-dim); }
.sb-status b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.sb-status .sb-rem b { color: var(--danger); }
.sb-status.is-done .sb-rem b { color: var(--ok); }
.sb-status.is-over .sb-rem b { color: var(--danger); }
.sb-foot .form-error { margin: 0 0 10px; }
.sb-foot .primary-btn { margin: 0; }
@media (max-width: 520px) {
  .sb-person { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .sb-person .sb-method { grid-column: 2; grid-row: 2; max-width: none; width: 100%; }
  .sb-person .sb-amount, .sb-person .sb-amt-edit { grid-column: 3; grid-row: 1 / span 2; }
  .sb-chips { max-width: 55%; }
}

/* v190: dialogs open above the phone cart sheet (z 72) and the drawer (z 70). They sat at z 50, so a
   dialog opened from the cart on a phone (split bill, edit item) opened BEHIND the cart and looked dead.
   95 keeps them under toasts (100), entity sheets (120) and confirm prompts (140). */
.modal-overlay { z-index: 95; }