/* ============================================================
   FreshBowl POS — stylesheet (no framework, self-contained)
   Signature: category colour-coding carried across the whole app.
   ============================================================ */

/* ---- Fonts (vendored, offline) ---- */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/sg-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/sg-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/sg-700.woff2') format('woff2'); }

:root {
  --bg1:#fffaf3; --bg2:#fff5ea;
  --surface:#ffffff; --surface-2:#fffdf9;
  --ink:#1c1917; --ink-2:#44403c; --muted:#78716c;
  --line:#efe7db; --line-2:#f6efe5;
  --primary:#0d9488; --primary-600:#0f766e; --primary-50:#ecfdfa;
  --coffee:#b45309; --juice:#16a34a; --snack:#e11d48; --amber:#f59e0b;
  --danger:#dc2626;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(28,25,23,.05), 0 1px 3px rgba(28,25,23,.04);
  --shadow:0 4px 12px rgba(28,25,23,.06), 0 2px 4px rgba(28,25,23,.04);
  --shadow-lg:0 14px 40px rgba(28,25,23,.16);
  --font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-ui:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Base ---- */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { font-family:var(--font-ui); color:var(--ink); background:linear-gradient(160deg,var(--bg1),var(--bg2)); background-attachment:fixed; min-height:100vh; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
img { max-width:100%; display:block; }
.ic { display:block; }
.muted { color:var(--muted); }
.print-only { display:none; }
#cart-backdrop, #fb-print-mount { display:none; }
:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---- Buttons ---- */
.btn { font:600 14px/1 var(--font-display); padding:.62rem 1rem; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:background .15s, border-color .15s, transform .1s; }
.btn:active { transform:translateY(1px); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-600); }
.btn-ghost { background:#fff; border-color:var(--line); color:var(--ink-2); }
.btn-ghost:hover { border-color:var(--muted); }
.btn-danger { background:#fff; border-color:#f1c9c9; color:var(--danger); }
.btn-danger:hover { background:#fef2f2; }
.btn-block { width:100%; justify-content:center; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer; transition:.15s; }
.btn-icon:hover { border-color:var(--muted); color:var(--ink); }
.btn-icon.danger:hover { color:var(--danger); border-color:#f1c9c9; background:#fef2f2; }

.chip { font:600 13px/1 var(--font-display); padding:.42rem .8rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink-2); cursor:pointer; white-space:nowrap; transition:.15s; }
.chip:hover { border-color:var(--muted); }
.chip.is-active { background:var(--c,var(--ink)); border-color:var(--c,var(--ink)); color:#fff; }

.pill { font:600 11px/1 var(--font-display); padding:4px 9px; border-radius:999px; display:inline-block; }
.pill-on { background:var(--primary-50); color:var(--primary-600); }
.pill-off { background:#f5f5f4; color:var(--muted); }
.pill-cash { background:#ecfdf3; color:#15803d; }
.pill-card { background:#eff6ff; color:#1d4ed8; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:middle; }

/* ---- Header + nav ---- */
.app-header { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1rem; padding:.6rem 1.1rem; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:.6rem; color:var(--ink); }
.brand-mark { border-radius:9px; }
.brand-txt { display:flex; flex-direction:column; line-height:1.15; }
.brand-name { font:700 16px var(--font-display); }
.brand-tag { font:500 11px var(--font-ui); color:var(--muted); }
.app-nav { display:flex; gap:.25rem; margin-left:.4rem; }
.nav-link { display:flex; align-items:center; gap:.45rem; padding:.5rem .8rem; border-radius:9px; color:var(--ink-2); font:600 13px var(--font-display); transition:.15s; }
.nav-link:hover { background:var(--surface-2); color:var(--ink); }
.nav-link.is-active { background:var(--primary-50); color:var(--primary-600); }
.nav-link svg { flex:none; }
.app-user { margin-left:auto; display:flex; align-items:center; gap:.6rem; }
.user-chip { display:flex; align-items:center; gap:.45rem; font:600 13px var(--font-ui); color:var(--ink-2); }
.user-dot { width:8px; height:8px; border-radius:50%; background:var(--juice); }

/* ---- Layout ---- */
.app-main { max-width:1240px; margin:0 auto; padding:1.2rem 1.1rem 2rem; }
.page-register .app-main { max-width:1360px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; }
.page-title { font:700 22px var(--font-display); }
.page-desc { font:500 13px var(--font-ui); color:var(--muted); margin-top:.15rem; }
.clock { display:flex; align-items:center; gap:.45rem; font:600 13px var(--font-display); color:var(--ink-2); background:#fff; border:1px solid var(--line); padding:.5rem .8rem; border-radius:10px; font-variant-numeric:tabular-nums; }
.empty { grid-column:1/-1; text-align:center; color:var(--muted); padding:2rem; font:500 14px var(--font-ui); }
.inline { display:inline; }

/* ---- Notices ---- */
.notice { padding:.7rem .95rem; border-radius:10px; font:600 13px var(--font-ui); margin-bottom:1.1rem; }
.notice-ok { background:var(--primary-50); color:var(--primary-600); border:1px solid #b6ebe3; }
.notice-err { background:#fef2f2; color:var(--danger); border:1px solid #f1c9c9; }

/* ---- Search ---- */
.search { display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); border-radius:10px; padding:.5rem .7rem; color:var(--muted); }
.search input { border:none; outline:none; font:inherit; color:var(--ink); width:100%; background:transparent; }
.search svg { flex:none; }

/* ============================================================
   POS / Register
   ============================================================ */
.pos { display:grid; grid-template-columns:1fr 380px; gap:1.1rem; align-items:start; }
.pos-catalog { min-width:0; }
.pos-toolbar { display:flex; flex-direction:column; gap:.7rem; margin-bottom:.9rem; }
.cat-chips { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.2rem; }

.menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.mi { display:flex; flex-direction:column; gap:.55rem; text-align:left; padding:.8rem .85rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); cursor:pointer; min-height:104px; transition:border-color .15s, transform .12s, box-shadow .15s; }
.mi:hover { border-color:var(--c); transform:translateY(-2px); box-shadow:var(--shadow); }
.mi-cat { align-self:flex-start; font:600 10px/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase; color:var(--c); border:1px solid var(--c); padding:3px 7px; border-radius:999px; }
.mi-name { flex:1; font:500 15px/1.28 var(--font-ui); color:var(--ink); }
.mi-foot { display:flex; align-items:center; justify-content:space-between; }
.mi-price { font:700 15px var(--font-display); color:var(--ink); font-variant-numeric:tabular-nums; }
.mi-stock { font:500 11px var(--font-ui); color:var(--muted); }
.mi.is-out { opacity:.5; cursor:not-allowed; }
.mi.is-out:hover { transform:none; box-shadow:none; border-color:var(--line); }
.mi.is-out .mi-stock { color:var(--danger); }

/* Cart */
.pos-cart { position:sticky; top:80px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; max-height:calc(100vh - 96px); overflow:hidden; }
.cart-head { display:flex; align-items:center; justify-content:space-between; padding:.95rem 1.1rem; border-bottom:1px solid var(--line); }
.cart-title { font:700 16px var(--font-display); }
.cart-count { font:500 12px var(--font-ui); color:var(--muted); }
.cart-body { flex:1; overflow:auto; padding:.6rem .7rem; min-height:96px; }
.cart-empty { display:flex; flex-direction:column; align-items:center; gap:.55rem; color:var(--muted); padding:2rem 1rem; text-align:center; font:500 13px var(--font-ui); }
.cart-lines { display:flex; flex-direction:column; gap:.3rem; }
.line { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; align-items:center; gap:.5rem; padding:.5rem; border-radius:10px; }
.line.is-sel { background:var(--primary-50); }
.line-dot { width:10px; height:10px; border-radius:50%; }
.line-main { text-align:left; background:none; border:none; cursor:pointer; min-width:0; padding:0; }
.line-name { display:block; font:600 14px var(--font-ui); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.line-sub { display:block; font:500 12px var(--font-display); color:var(--muted); font-variant-numeric:tabular-nums; }
.qty { display:flex; align-items:center; gap:.3rem; }
.qbtn { width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:#fff; font:700 15px var(--font-display); color:var(--ink-2); cursor:pointer; line-height:1; }
.qbtn:hover { border-color:var(--primary); color:var(--primary); }
.qnum { min-width:20px; text-align:center; font:700 14px var(--font-display); font-variant-numeric:tabular-nums; }
.line-total { font:700 14px var(--font-display); font-variant-numeric:tabular-nums; white-space:nowrap; }
.line-del { border:none; background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; width:24px; height:24px; border-radius:6px; }
.line-del:hover { color:var(--danger); background:#fef2f2; }

.cart-keypad { padding:.6rem .8rem; border-top:1px solid var(--line); }
.kp-label { font:500 11px var(--font-ui); color:var(--muted); text-align:center; margin-bottom:.5rem; }
.kp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.kp { padding:.65rem 0; border-radius:9px; border:1px solid var(--line); background:#fff; font:600 17px var(--font-display); color:var(--ink); cursor:pointer; font-variant-numeric:tabular-nums; }
.kp:hover { border-color:var(--primary); }
.kp:active { background:var(--primary-50); }
.kp-alt { color:var(--muted); font-size:15px; }

.cart-foot { border-top:1px solid var(--line); padding:.9rem 1.1rem 1.1rem; background:var(--surface-2); }
.cart-totals { margin-bottom:.8rem; }
.cart-totals > div { display:flex; justify-content:space-between; padding:.18rem 0; font:500 13px var(--font-ui); color:var(--ink-2); }
.cart-totals .grand { font:700 18px var(--font-display); color:var(--ink); border-top:1px solid var(--line); margin-top:.35rem; padding-top:.5rem; font-variant-numeric:tabular-nums; }
.pay-methods { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.7rem; }
.pay { display:flex; align-items:center; justify-content:center; gap:.45rem; padding:.6rem; border-radius:10px; border:1px solid var(--line); background:#fff; font:600 13px var(--font-display); color:var(--ink-2); cursor:pointer; }
.pay.is-active { border-color:var(--primary); background:var(--primary-50); color:var(--primary-600); }
.cash-box { margin-bottom:.8rem; }
.cash-quick { display:grid; grid-template-columns:repeat(5,1fr); gap:.35rem; margin-bottom:.55rem; }
.cash-quick button { padding:.5rem 0; border-radius:8px; border:1px solid var(--line); background:#fff; font:600 12px var(--font-display); color:var(--ink-2); cursor:pointer; }
.cash-quick button:hover { border-color:var(--primary); color:var(--primary); }
.cash-row { display:flex; align-items:flex-end; justify-content:space-between; gap:.7rem; }
.cash-row label { flex:1; font:600 12px var(--font-ui); color:var(--ink-2); display:flex; flex-direction:column; gap:.3rem; }
.cash-row input { padding:.55rem .65rem; border:1px solid var(--line); border-radius:9px; font:600 15px var(--font-display); font-variant-numeric:tabular-nums; }
.cash-row input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-50); }
.change { font:500 12px var(--font-ui); color:var(--muted); text-align:right; }
.change strong { display:block; font:700 16px var(--font-display); color:var(--primary-600); font-variant-numeric:tabular-nums; }

.btn-charge { width:100%; justify-content:space-between; font:700 16px var(--font-display); padding:.95rem 1.1rem; background:var(--primary); color:#fff; border:none; border-radius:12px; cursor:pointer; box-shadow:0 6px 16px rgba(13,148,136,.28); font-variant-numeric:tabular-nums; transition:background .15s; }
.btn-charge:hover { background:var(--primary-600); }
.btn-charge:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }

.cart-bar { display:none; }

/* ============================================================
   KPI cards + charts
   ============================================================ */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1.1rem; }
.kpi { border-radius:var(--radius); padding:1rem 1.1rem; color:#fff; display:flex; flex-direction:column; gap:.4rem; box-shadow:var(--shadow); }
.kpi-label { font:600 12px var(--font-ui); opacity:.92; display:flex; align-items:center; gap:.4rem; }
.kpi-value { font:700 26px var(--font-display); font-variant-numeric:tabular-nums; }
.kpi-teal { background:linear-gradient(135deg,#0d9488,#0f766e); }
.kpi-amber { background:linear-gradient(135deg,#f59e0b,#d97706); }
.kpi-green { background:linear-gradient(135deg,#16a34a,#15803d); }
.kpi-berry { background:linear-gradient(135deg,#e11d48,#be123c); }
.live-dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)} 70%{box-shadow:0 0 0 8px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.15rem; box-shadow:var(--shadow-sm); margin-bottom:1.1rem; }
.chart-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.chart-head h2 { font:700 16px var(--font-display); }
.chart-note { font:500 12px var(--font-ui); color:var(--muted); }
.chart-box { position:relative; height:280px; }
.chart-box-sm { height:260px; }
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.seg { display:inline-flex; background:#f5f3f0; border-radius:9px; padding:3px; gap:2px; }
.seg button { border:none; background:transparent; font:600 12px var(--font-display); padding:.35rem .7rem; border-radius:7px; color:var(--muted); cursor:pointer; }
.seg button.is-active { background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }

/* ============================================================
   Tables (reports + menu)
   ============================================================ */
.table-title { font:700 16px var(--font-display); margin-bottom:.85rem; display:flex; align-items:center; gap:.1rem; }
.muted-count { font:600 12px var(--font-ui); color:var(--muted); margin-left:.45rem; }
.table-scroll { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:14px; }
.tbl th { text-align:left; font:600 11px var(--font-ui); color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding:.5rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl td { padding:.6rem; border-bottom:1px solid var(--line-2); color:var(--ink-2); }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mono { font:600 13px var(--font-display); }
.ta-r { text-align:right; }
.tbl-empty td { text-align:center; color:var(--muted); padding:1.5rem; }
#txn-table tbody tr[data-reprint] { cursor:pointer; }
#txn-table tbody tr[data-reprint]:hover td { background:var(--surface-2); }
.row-actions { display:flex; gap:.35rem; justify-content:flex-end; align-items:center; }
.is-hidden-row td { opacity:.55; }

/* Reports controls */
.report-controls { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
.tabs { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; flex:1; }
.tab { font:600 13px var(--font-display); padding:.5rem .85rem; border-radius:9px; color:var(--ink-2); border:1px solid var(--line); background:#fff; }
.tab:hover { border-color:var(--muted); }
.tab.is-active { background:var(--primary); color:#fff; border-color:var(--primary); }
.tab-sep { flex:1; min-width:8px; }
.custom-range { display:flex; align-items:center; gap:.4rem; font:500 12px var(--font-ui); color:var(--muted); }
.custom-range input[type=date] { padding:.45rem .55rem; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); }
.report-search { max-width:320px; flex:1; }
.report-summary { margin-bottom:1.1rem; }
.report-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; align-items:start; }
.report-print-head { margin-bottom:1rem; font-size:13px; line-height:1.6; }

/* ============================================================
   Forms (menu + settings)
   ============================================================ */
.menu-search { max-width:360px; margin-bottom:1.1rem; }
.form-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
.form-card-head h2 { font:700 16px var(--font-display); }
.card-hint { font:500 13px var(--font-ui); color:var(--muted); margin:-.3rem 0 .9rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.field { display:flex; flex-direction:column; gap:.35rem; font:600 12px var(--font-ui); color:var(--ink-2); }
.field input, .field select { font:500 14px var(--font-ui); color:var(--ink); padding:.55rem .65rem; border:1px solid var(--line); border-radius:9px; background:#fff; }
.field input:focus, .field select:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-50); }
.span-2 { grid-column:1 / -1; }
.check { display:flex; align-items:center; gap:.55rem; font:600 13px var(--font-ui); color:var(--ink-2); align-self:end; padding-bottom:.55rem; cursor:pointer; }
.check input { width:18px; height:18px; accent-color:var(--primary); }
.form-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; align-items:start; }
.data-actions { display:flex; flex-wrap:wrap; gap:.6rem; }

/* ============================================================
   Toast + modal
   ============================================================ */
#fb-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:.5rem; align-items:center; }
.toast { background:var(--ink); color:#fff; font:600 13px var(--font-ui); padding:.7rem 1.1rem; border-radius:10px; box-shadow:var(--shadow-lg); opacity:0; transform:translateY(10px); transition:.2s; }
.toast.in { opacity:1; transform:translateY(0); }
.toast-err { background:#b91c1c; }

#fb-modal { position:fixed; inset:0; z-index:150; display:none; }
#fb-modal.open { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(28,25,23,.5); }
.modal-panel { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff; border-radius:16px; padding:1.2rem; width:min(92vw,400px); max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg); }
.modal-actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1rem; }
body.modal-lock { overflow:hidden; }
.receipt-wrap { display:flex; justify-content:center; }

/* ============================================================
   Login
   ============================================================ */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.login-card { background:#fff; border:1px solid var(--line); border-radius:20px; padding:2rem 1.8rem; width:min(94vw,380px); box-shadow:var(--shadow-lg); text-align:center; }
.login-mark { border-radius:16px; margin:0 auto .9rem; }
.login-title { font:700 24px var(--font-display); }
.login-sub { color:var(--muted); font:500 13px var(--font-ui); margin:.2rem 0 1.4rem; }
.login-form { display:flex; flex-direction:column; gap:.9rem; text-align:left; }
.login-form .field span { margin-bottom:.1rem; }
.login-form input { font:500 15px var(--font-ui); color:var(--ink); padding:.65rem .7rem; border:1px solid var(--line); border-radius:10px; }
.login-form input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-50); }
.login-error { background:#fef2f2; color:var(--danger); border:1px solid #f1c9c9; padding:.6rem .8rem; border-radius:10px; font:600 13px var(--font-ui); margin-bottom:1rem; }

/* ============================================================
   Receipt + invoice
   ============================================================ */
.receipt { width:300px; background:#fff; color:#1c1917; font:400 13px var(--font-ui); }
.rc-head { text-align:center; margin-bottom:.5rem; }
.rc-shop { font:700 18px var(--font-display); }
.rc-tag { font:500 12px var(--font-ui); color:var(--muted); }
.rc-line { font-size:12px; color:var(--muted); }
.rc-meta { display:flex; justify-content:space-between; gap:.5rem; font:600 12px var(--font-display); border-top:1px dashed #d6cfc4; border-bottom:1px dashed #d6cfc4; padding:.45rem 0; margin:.5rem 0; }
.rc-items { width:100%; border-collapse:collapse; }
.rc-items td { padding:.22rem 0; vertical-align:top; font-size:13px; }
.rc-q { width:32px; color:var(--muted); font-variant-numeric:tabular-nums; }
.rc-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; }
.rc-lt { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rc-tot { border-top:1px dashed #d6cfc4; margin-top:.5rem; padding-top:.5rem; }
.rc-tot > div { display:flex; justify-content:space-between; padding:.14rem 0; font-size:13px; }
.rc-grand { font:700 16px var(--font-display); border-top:1px solid #1c1917; margin-top:.35rem; padding-top:.4rem; font-variant-numeric:tabular-nums; }
.rc-pay { border-top:1px dashed #d6cfc4; margin-top:.5rem; padding-top:.5rem; }
.rc-pay > div { display:flex; justify-content:space-between; font-size:12px; padding:.12rem 0; color:var(--ink-2); }
.rc-foot { text-align:center; margin-top:.8rem; font:500 12px var(--font-ui); color:var(--muted); }

.invoice-body { min-height:100vh; padding:1.4rem; }
.invoice-bar { display:flex; justify-content:space-between; max-width:340px; margin:0 auto 1rem; }
.invoice-sheet { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.6rem 1.4rem; max-width:340px; margin:0 auto; box-shadow:var(--shadow); display:flex; justify-content:center; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:980px) {
  .pos { grid-template-columns:1fr; }
  .chart-grid, .settings-grid, .report-cols { grid-template-columns:1fr; }
  .pos-cart {
    position:fixed; left:0; right:0; bottom:0; top:auto; max-width:none; z-index:70;
    max-height:88vh; border-radius:20px 20px 0 0;
    transform:translateY(110%); transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:0 -14px 44px rgba(0,0,0,.24);
  }
  body.cart-open .pos-cart { transform:translateY(0); }
  #cart-backdrop { display:block; position:fixed; inset:0; background:rgba(28,25,23,.45); opacity:0; visibility:hidden; transition:.25s; z-index:65; }
  body.cart-open #cart-backdrop { opacity:1; visibility:visible; }
  .cart-bar { display:flex; align-items:center; justify-content:space-between; gap:.8rem; position:fixed; left:12px; right:12px; bottom:74px; z-index:60; padding:.85rem 1.1rem; border:none; border-radius:14px; background:var(--primary); color:#fff; cursor:pointer; font:700 14px var(--font-display); box-shadow:0 8px 22px rgba(13,148,136,.34); }
  .cart-bar[hidden] { display:none; }
  .cart-bar-count { font-weight:600; opacity:.92; }
  .cart-bar-total { font-variant-numeric:tabular-nums; }
  .app-nav { position:fixed; left:0; right:0; bottom:0; margin:0; z-index:55; background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line); justify-content:space-around; padding:.3rem .2rem calc(.3rem + env(safe-area-inset-bottom)); box-shadow:0 -2px 12px rgba(0,0,0,.05); }
  .nav-link { flex-direction:column; gap:2px; font-size:11px; padding:.35rem .4rem; }
  .nav-link.is-active { background:transparent; color:var(--primary-600); }
  .app-main { padding-bottom:96px; }
  #fb-toast { bottom:150px; }
  .page-head { flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px) {
  .kpi-row { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr; }
  .brand-tag { display:none; }
  .user-chip .user-name { display:none; }
}

/* ============================================================
   Print (clone target into #fb-print-mount, hide the rest)
   ============================================================ */
@media print {
  .no-print { display:none !important; }
  html, body { background:#fff !important; }
  .app-header, .app-nav, .cart-bar, #cart-backdrop, #fb-toast { display:none !important; }

  body.is-printing > *:not(#fb-print-mount) { display:none !important; }
  body.is-printing #fb-print-mount { display:block; }
  #fb-print-mount .receipt { width:80mm; margin:0 auto; }
  #fb-print-mount .report { width:100%; }
  #fb-print-mount .print-only { display:block; }
  #fb-print-mount .kpi { color:#111 !important; background:#fff !important; border:1px solid #ddd; box-shadow:none; }
  #fb-print-mount .card { box-shadow:none; border:1px solid #e5e5e5; }

  /* Standalone invoice page prints directly */
  .invoice-bar { display:none !important; }
  .invoice-sheet { box-shadow:none !important; border:none !important; padding:0 !important; }
  .invoice-body .receipt { width:80mm; margin:0 auto; }
}