/* POS v2.3 — hal fayl oo style ah. Receipt print CSS (80mm/58mm) wuxuu ku jiraa hoosta. */

:root {
  --brand:#6B1D3A; --brand-2:#8D3C57; --brand-3:#B25E7A; --brand-soft:#F7ECF0; --brand-tint:#FBF5F7;
  --ink:#1F1418; --ink-2:#4A3A41; --muted:#7C6C74; --line:#E9DFE3; --line-2:#F1EAED;
  --bg:#F6F2F4; --card:#FFFFFF; --hover:#FAF5F7;
  --good:#1E7A4B; --good-soft:#E4F4EB; --warn:#9A5B12; --warn-soft:#FCF0DC; --bad:#B2263F; --bad-soft:#FBE6EA; --info:#2E5AAC; --info-soft:#E6EEFB;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(31,20,24,.05), 0 8px 24px -12px rgba(31,20,24,.12);
  --shadow-lg:0 24px 64px -16px rgba(31,20,24,.35);
  --ring:0 0 0 4px rgba(107,29,58,.14);
  --topbar-h:60px;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#F4ECEF; --ink-2:#D9CCD2; --muted:#A8969F; --line:#3A2C33; --line-2:#2E2228; --bg:#161013; --card:#211820; --hover:#2A1E26;
          --brand-soft:#3A2230; --brand-tint:#2A1A24; --good-soft:#173324; --warn-soft:#3A2A12; --bad-soft:#3E1A22; --info-soft:#1B2740;
          --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5); }
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body {
  font:15px/1.5 -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  background:var(--bg); color:var(--ink); -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { margin:0 0 .3em; line-height:1.25; letter-spacing:-.01em; font-weight:650; }
h1{font-size:1.3rem} h2{font-size:1.35rem} h3{font-size:1rem}
.muted{color:var(--muted)} .small{font-size:.83rem}
.error{color:var(--bad);font-size:.88rem;margin:.4rem 0 0}
.warning{color:var(--warn)} .good{color:var(--good)} .danger-text{color:var(--bad)}
.w-auto { width:auto !important; }
[hidden] { display:none !important; }
::selection { background:var(--brand-soft); }

/* ---- icons ---- */
.ico { display:inline-flex; width:1.15em; height:1.15em; vertical-align:-.22em; flex:none; }
.ico svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ---- buttons ---- */
button, .btn-link { font:inherit; font-size:.92rem; cursor:pointer; border-radius:var(--radius-sm); border:1px solid transparent; padding:.55rem .95rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; line-height:1.25; min-height:38px; transition:background .15s, border-color .15s, color .15s, transform .05s; }
button:active:not(:disabled) { transform:translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .chip:focus-visible { outline:none; box-shadow:var(--ring); border-color:var(--brand); }
.primary { background:var(--brand); color:#fff; font-weight:600; }
.primary:hover:not(:disabled) { background:var(--brand-2); }
.secondary { background:var(--brand-soft); color:var(--brand); font-weight:600; }
.secondary:hover:not(:disabled) { background:#F0DDE5; }
.quiet { background:var(--card); color:var(--ink-2); border-color:var(--line); }
.quiet:hover:not(:disabled) { background:var(--hover); color:var(--ink); border-color:#D8CBD1; }
.danger { background:transparent; color:var(--bad); border-color:var(--line); }
.block { width:100%; }
.lg { min-height:48px; font-size:1.02rem; }
button.small, .quiet.small { padding:.35rem .65rem; min-height:32px; font-size:.84rem; }
.icon-only { padding:.5rem; width:40px; }
.icon-only .ico { width:1.3em; height:1.3em; }
button:disabled { opacity:.45; cursor:not-allowed; }
.icon-btn { background:transparent; border:none; font-size:1.3rem; padding:.3rem .5rem; color:inherit; min-height:0; }
.link-btn { background:none; border:none; color:var(--brand); padding:.2rem .3rem; min-height:0; font-weight:600; font-size:.86rem; }
.link-btn:hover { text-decoration:underline; }

/* ---- inputs ---- */
input, select, textarea {
  font:inherit; width:100%; padding:.55rem .75rem; min-height:40px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--card); color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color:#A9999F; }
input:hover, select:hover, textarea:hover { border-color:#D8CBD1; }
select { appearance:none; -webkit-appearance:none; padding-right:2rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C6C74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right .6rem center; }
input[type="checkbox"] { width:18px; height:18px; min-height:0; accent-color:var(--brand); margin:0; }
input[type="file"] { padding:.4rem; }
input[type="date"], input[type="number"] { font-variant-numeric:tabular-nums; }
textarea { min-height:74px; resize:vertical; }
label { display:block; margin-bottom:.8rem; }
label > span { display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:.3rem; letter-spacing:.01em; }
label > span em { font-style:normal; font-weight:400; }
.form menu { display:flex; gap:.6rem; justify-content:flex-end; margin:1.1rem 0 0; padding:0; }
.inline { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.inline > .field { flex:1 1 150px; }
.inline-form { display:flex; gap:.6rem; align-items:center; }
.inline-form .search-box { flex:1; }
.search-box { position:relative; display:flex; align-items:center; flex:1; min-width:0; }
.search-box > .ico { position:absolute; left:.75rem; color:var(--muted); pointer-events:none; }
.search-box input { padding-left:2.35rem; padding-right:2.3rem; }
.search-box .clear-btn { position:absolute; right:.35rem; min-height:0; padding:.3rem; border:none; background:transparent; color:var(--muted); }
.search-box .clear-btn:hover { color:var(--ink); }
.toolbar { display:flex; gap:.6rem; align-items:center; margin-bottom:.8rem; }

/* ---- chips ---- */
.chips { display:flex; gap:.45rem; flex-wrap:wrap; margin:.2rem 0 1rem; }
.chip { border:1px solid var(--line); background:var(--card); color:var(--ink-2); border-radius:999px; padding:.32rem .8rem .32rem .9rem; min-height:32px; font-size:.84rem; font-weight:550; }
.chip span { background:var(--line-2); color:var(--muted); border-radius:999px; padding:0 .45rem; font-size:.74rem; font-weight:600; margin-left:.15rem; }
.chip:hover { border-color:var(--brand-3); color:var(--brand); }
.chip.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.chip.active span { background:rgba(255,255,255,.22); color:#fff; }

/* ---- badges / tags ---- */
.badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:650; padding:.15rem .55rem; border-radius:999px; background:var(--line-2); color:var(--ink-2); white-space:nowrap; line-height:1.4; }
.badge.ok { background:var(--good-soft); color:var(--good); }
.badge.warn { background:var(--warn-soft); color:var(--warn); }
.badge.bad { background:var(--bad-soft); color:var(--bad); }
.badge.sm { font-size:.68rem; padding:.08rem .45rem; }
.tag { display:inline-block; font-size:.78rem; padding:.12rem .55rem; border-radius:7px; background:var(--brand-tint); color:var(--brand); border:1px solid var(--brand-soft); white-space:nowrap; }
.status { font-size:.74rem; padding:.15rem .55rem; border-radius:99px; background:var(--brand-soft); color:var(--brand); font-weight:600; white-space:nowrap; }
.status.PAID { background:var(--good-soft); color:var(--good); }
.status.CREDIT, .status.PARTIALLY_PAID { background:var(--warn-soft); color:var(--warn); }
.pill { font-size:.74rem; padding:.2rem .6rem; border-radius:99px; background:var(--good-soft); color:var(--good); white-space:nowrap; font-weight:600; }
.pill::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:.35rem; vertical-align:middle; }
.pill.off { background:var(--bad-soft); color:var(--bad); }
.pill.warn { background:var(--warn-soft); color:var(--warn); }

/* ---- auth ---- */
.auth-screen { min-height:100%; display:grid; place-items:center; padding:1.2rem;
  background:radial-gradient(1200px 600px at 10% -10%, #F3DDE5 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #F7ECF0 0%, transparent 60%), var(--bg); }
.auth-card { width:100%; max-width:430px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:1.9rem; box-shadow:var(--shadow-lg); }
.brand { display:flex; gap:.9rem; align-items:center; margin-bottom:1.5rem; }
.brand-mark { width:48px; height:48px; border-radius:14px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:1.3rem; flex:none; overflow:hidden; }
.brand-mark.has-logo { width:112px; height:88px; background:#fff; border:1px solid var(--line); padding:6px; }
.brand-mark.has-logo img { width:100%; height:100%; object-fit:contain; display:block; }
.setup-block { margin-top:1.3rem; border-top:1px solid var(--line); padding-top:.9rem; }
.setup-block summary { cursor:pointer; color:var(--muted); font-size:.88rem; }
.auth-foot { display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-top:1.2rem; }

/* ---- shell ---- */
.app { min-height:100%; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; gap:.8rem; padding:0 1rem; height:var(--topbar-h);
  background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.topbar-title { display:flex; align-items:center; gap:.6rem; flex:1; min-width:0; }
.topbar-title strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1.02rem; letter-spacing:-.01em; }
.topbar-logo { height:34px; width:auto; max-width:64px; object-fit:contain; background:#fff; border-radius:8px; padding:2px; flex:none; border:1px solid var(--line); }
.topbar-right { display:flex; align-items:center; gap:.8rem; }
.topbar-right #signOut { padding:.4rem .75rem; }
#currentUser { display:flex; align-items:center; gap:.55rem; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; font-weight:700; font-size:.82rem; flex:none; }
.user-meta { display:flex; flex-direction:column; line-height:1.15; }
.user-meta b { font-size:.86rem; } .user-meta small { color:var(--muted); font-size:.72rem; }

.body { display:flex; flex:1; min-height:0; }
.sidebar { width:224px; flex:none; background:var(--card); border-right:1px solid var(--line);
  padding:.8rem .65rem; display:flex; flex-direction:column; gap:.1rem; overflow-y:auto; position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); }
.nav-group { font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; padding:.85rem .75rem .3rem; }
.nav-item { text-align:left; justify-content:flex-start; background:transparent; border:none; padding:.55rem .75rem; border-radius:10px; color:var(--ink-2); font-weight:500; gap:.65rem; min-height:38px; position:relative; }
.nav-item .ico { width:1.25em; height:1.25em; color:var(--muted); }
.nav-item:hover { background:var(--hover); color:var(--brand); }
.nav-item:hover .ico { color:var(--brand); }
.nav-item.active { background:var(--brand-soft); color:var(--brand); font-weight:650; }
.nav-item.active .ico { color:var(--brand); }
.nav-item.active::before { content:""; position:absolute; left:-.65rem; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--brand); }
.nav-foot { margin-top:auto; padding:1rem .75rem .3rem; font-size:.72rem; }
.content { flex:1; padding:1.4rem 1.6rem 2rem; overflow-y:auto; min-width:0; }

.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.15rem 1.2rem; box-shadow:var(--shadow); }
.card-head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.7rem; }
.card-head h3 { margin:0; }
.section { margin-top:1.1rem; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:.8rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.page-head h2 { margin:0; }
.page-head p { margin:.15rem 0 0; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.8rem; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem; }
.grid-3 { display:grid; grid-template-columns:2fr 1fr; gap:1rem; }
.grid-3 .span-2 { min-width:0; }
.stat { padding:1rem 1.1rem; position:relative; }
.stat-top { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.stat small { display:block; color:var(--muted); font-size:.76rem; }
.stat .stat-top small { text-transform:uppercase; letter-spacing:.06em; font-weight:650; font-size:.68rem; }
.stat strong { display:block; font-size:1.45rem; margin-top:.35rem; letter-spacing:-.02em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.stat > small { margin-top:.3rem; }
.stat-ico { width:30px; height:30px; border-radius:9px; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; }
.stat-ico svg { width:17px; height:17px; }
.stat.attention .stat-ico { background:var(--warn-soft); color:var(--warn); }
.stat.attention strong { color:var(--warn); }

.table-wrap { overflow-x:auto; border:1px solid var(--line-2); border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--muted); padding:.6rem .75rem; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--brand-tint); position:sticky; top:0; }
td { padding:.6rem .75rem; border-bottom:1px solid var(--line-2); vertical-align:middle; }
tbody tr:hover td { background:var(--hover); }
tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.actions { white-space:nowrap; text-align:right; }
td.actions button { margin-left:.2rem; }
.empty { text-align:center; color:var(--muted); padding:1.6rem; }
.empty-state { text-align:center; color:var(--muted); padding:1.8rem 1rem; }
.empty-state .ico { width:2.2em; height:2.2em; color:var(--brand-3); opacity:.6; }
.empty-state p { margin:.5rem 0 .2rem; font-weight:600; color:var(--ink-2); }
.list-row { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.6rem 0; border-bottom:1px solid var(--line-2); }
.list-row:last-child { border-bottom:none; }
.list-row b { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- POS ---- */
.pos { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:1.1rem; align-items:start; }
.pos-main { min-width:0; }
.pos-toolbar { display:flex; gap:.6rem; align-items:center; padding:.7rem .8rem; margin-bottom:.9rem; }
.pos-toolbar .search-box input { font-size:1.05rem; min-height:46px; }
.pos-groups { display:flex; flex-direction:column; gap:.7rem; }
.pgroup { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.pgroup-head { width:100%; justify-content:flex-start; gap:.6rem; background:transparent; border:none; border-radius:0; padding:.85rem 1rem; text-align:left; color:var(--ink); min-height:52px; }
.pgroup-head:hover { background:var(--hover); }
.pgroup-head .chev { color:var(--muted); transition:transform .18s; }
.pgroup.open .pgroup-head .chev { transform:rotate(180deg); color:var(--brand); }
.pgroup-name { font-weight:650; font-size:1rem; }
.pgroup-count { color:var(--muted); font-size:.82rem; margin-left:.1rem; }
.pgroup-head .badge { margin-left:auto; }
.pgroup .products { display:none; padding:.2rem .9rem .9rem; border-top:1px solid var(--line-2); }
.pgroup.open .products, .pgroup.searching .products { display:grid; }
.pgroup.searching .pgroup-head .chev { transform:rotate(180deg); }
.products { grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:.6rem; padding-top:.8rem; }
.product { text-align:left; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.75rem .8rem;
  display:flex; flex-direction:column; align-items:stretch; gap:.25rem; min-height:112px; transition:border-color .15s, box-shadow .15s, transform .1s; }
.product:hover:not(:disabled) { border-color:var(--brand-3); box-shadow:0 6px 18px -10px rgba(107,29,58,.45); transform:translateY(-1px); }
.product strong { font-size:.88rem; line-height:1.3; font-weight:600; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.product small { font-size:.72rem; }
.product-foot { display:flex; justify-content:space-between; align-items:center; gap:.4rem; margin-top:auto; padding-top:.35rem; flex-wrap:wrap; }
.product .price { color:var(--brand); font-weight:700; font-size:.95rem; font-variant-numeric:tabular-nums; }
.product.out { border-style:dashed; }
.product.out strong { color:var(--muted); }
.product:disabled { opacity:.5; cursor:not-allowed; }
.product.added { animation:pop .35s ease; border-color:var(--good); }
@keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.04); background:var(--good-soft)} 100%{transform:scale(1)} }

.cart { position:sticky; top:calc(var(--topbar-h) + 1.2rem); display:flex; flex-direction:column; max-height:calc(100vh - var(--topbar-h) - 2.4rem); padding:1rem 1.1rem; }
.cart-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.cart-head h3 { display:flex; align-items:center; gap:.4rem; margin:0; font-size:1.05rem; }
.cart-head .count { background:var(--brand); color:#fff; border-radius:999px; font-size:.72rem; padding:.05rem .5rem; }
.cart-lines { flex:1; overflow-y:auto; min-height:80px; margin:.2rem 0 .5rem; }
.cart-line { display:flex; flex-direction:column; gap:.35rem; padding:.6rem 0; border-bottom:1px solid var(--line-2); }
.cart-line-top { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.cart-line-top b { font-size:.87rem; line-height:1.3; font-weight:600; }
.cart-line-bottom { display:flex; align-items:center; gap:.6rem; }
.cart-line-bottom small { font-size:.76rem; }
.line-total { font-size:.92rem; font-variant-numeric:tabular-nums; margin-left:auto; }
.line-remove { min-height:0; padding:.3rem; background:transparent; border:none; color:var(--muted); }
.line-remove:hover { color:var(--bad); }
.qty { display:flex; align-items:center; gap:.15rem; background:var(--brand-tint); border-radius:999px; padding:.15rem; }
.qty button { padding:0; width:28px; height:28px; min-height:0; border-radius:50%; background:var(--card); color:var(--brand); border:1px solid var(--brand-soft); }
.qty button .ico { width:1em; height:1em; }
.qty span { min-width:1.6rem; text-align:center; font-variant-numeric:tabular-nums; font-weight:650; font-size:.9rem; }
.totals > div { display:flex; justify-content:space-between; align-items:center; padding:.3rem 0; font-size:.9rem; }
.totals input { width:110px; text-align:right; padding:.3rem .5rem; min-height:34px; }
.totals .grand { border-top:2px solid var(--line); margin-top:.4rem; padding-top:.55rem; font-size:1.2rem; font-weight:700; }
.pay-rows { display:flex; flex-direction:column; gap:.45rem; margin:.6rem 0; }
.pay-row { display:flex; gap:.4rem; align-items:center; }
.pay-row select { flex:0 0 118px; } .pay-row input { flex:1; }
.pay-ref { font-size:.86rem; }
.note { margin:.6rem 0 .2rem; padding:.55rem .8rem; border-radius:9px; font-size:.88rem; }
.cart-notes .note { margin:.2rem 0 .5rem; padding:.5rem .7rem; font-size:.86rem; }
.note.warn { background:var(--warn-soft); color:var(--warn); } .note.ok { background:var(--good-soft); color:var(--good); }
.keys { text-align:center; margin:.6rem 0 0; font-size:.74rem; }

/* ---- chart ---- */
.chart { display:flex; align-items:flex-end; gap:.6rem; height:180px; padding-top:1.4rem; }
.chart-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0; }
.chart-bar { width:100%; max-width:56px; background:linear-gradient(180deg, var(--brand-2), var(--brand)); border-radius:8px 8px 3px 3px; min-height:3px; transition:height .3s; }
.chart-col:last-child .chart-bar { background:linear-gradient(180deg, var(--brand-3), var(--brand-2)); }
.chart-col small { color:var(--muted); font-size:.72rem; margin-top:.35rem; }
.chart-val { font-size:.68rem; color:var(--muted); margin-bottom:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; font-variant-numeric:tabular-nums; }

/* ---- receipt preview (modal) ---- */
.receipt-preview { background:#fff; color:#111; border:1px solid var(--line); border-radius:10px; padding:1rem; max-height:55vh; overflow:auto;
  font-family:"Courier New", ui-monospace, monospace; font-size:.82rem; margin-bottom:1rem; }
.receipt-preview .r-row { display:flex; justify-content:space-between; gap:.5rem; }
.receipt-preview .r-center { text-align:center; }
.receipt-preview .r-title { font-weight:700; font-size:1rem; }
.receipt-preview .r-line { border-top:1px dashed #999; margin:.4rem 0; }
.receipt-preview .r-grand { font-weight:700; font-size:.95rem; }
.receipt-preview .r-logo { max-width:120px; max-height:60px; }
.receipt-preview .r-item { margin:.15rem 0; }
.btn-link { text-decoration:none; background:var(--card); color:var(--ink-2); border-color:var(--line); }
menu { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; padding:0; margin:.6rem 0 0; }

/* ---- toast & modal ---- */
.toast { position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,300%); visibility:hidden; background:var(--ink);
  color:#fff; padding:.75rem 1.1rem; border-radius:12px; z-index:200; transition:transform .25s, visibility 0s .25s;
  max-width:90vw; box-shadow:var(--shadow-lg); font-size:.92rem; display:flex; gap:.6rem; align-items:center; }
.toast.show { transform:translate(-50%,0); visibility:visible; transition:transform .25s; }
.toast.bad { background:var(--bad); color:#fff; }
.toast .quiet { background:rgba(255,255,255,.15); color:#fff; border-color:transparent; }

dialog { border:none; border-radius:18px; padding:0; max-width:min(580px,94vw); width:100%;
  background:var(--card); color:var(--ink); box-shadow:var(--shadow-lg); }
dialog::backdrop { background:rgba(31,20,24,.45); backdrop-filter:blur(2px); }
.modal { padding:1.35rem 1.4rem 1.4rem; }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:.8rem; }
.modal-head h2 { font-size:1.15rem; }
.modal-x { background:transparent; border:none; color:var(--muted); padding:.35rem; min-height:0; border-radius:50%; }
.modal-x:hover { background:var(--hover); color:var(--ink); }

.receipt-sheet { display:none; }
.cart-bar { display:none; }
.cart-backdrop { display:none; }
.stack { display:grid; gap:1rem; align-content:start; }
.camera-wrap video { width:100%; max-height:60vh; background:#000; border-radius:10px; }
.r-logo { max-width:40mm; max-height:20mm; margin-bottom:2mm; }

/* ---- responsive ---- */
@media (max-width: 1100px) { .pos { grid-template-columns:minmax(0,1fr) 320px; } .grid-3 { grid-template-columns:1fr; } }
@media (max-width: 900px) {
  .cart-bar { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:space-between; align-items:center;
    padding:.8rem 1.1rem; background:var(--brand); color:#fff; border:0; border-radius:0; font-size:1rem; box-shadow:0 -4px 16px rgba(0,0,0,.18); min-height:56px; }
  .cart-bar b { font-size:1.15rem; }
  .cart-bar-cta { font-weight:700; }
  .cart { position:fixed; left:0; right:0; bottom:0; z-index:39; max-height:88vh; overflow:auto; border-radius:18px 18px 0 0;
    transform:translateY(110%); transition:transform .22s ease; padding-bottom:4.8rem; box-shadow:0 -8px 30px rgba(0,0,0,.25); }
  .cart.open { transform:none; }
  .cart-lines { flex:0 0 auto; max-height:38vh; }
  .pgroup-head { flex-wrap:wrap; row-gap:.2rem; }
  .pgroup-count { white-space:nowrap; }
  .content { padding:1rem; padding-bottom:5.5rem; }
  .qty button { width:34px; height:34px; }
  .pos { grid-template-columns:1fr; }
  .sidebar { position:fixed; top:var(--topbar-h); left:0; bottom:0; z-index:30; transform:translateX(-100%);
    transition:transform .2s; box-shadow:var(--shadow-lg); width:250px; height:auto; }
  .sidebar.open { transform:none; }
  .cart-backdrop { display:block; position:fixed; inset:0; background:rgba(31,20,24,.35); z-index:38; }
  .stat strong { font-size:1.25rem; }
  .chips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:.3rem; scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .chip { flex:none; }
}
@media (min-width: 901px) { #menuToggle { display:none; } }
@media (max-width: 600px) {
  .user-meta { display:none; }
  .topbar-logo { display:none; }
  .topbar { padding:0 .7rem; gap:.5rem; }
  .topbar-title strong { font-size:.95rem; }
  .topbar-right #signOut { padding:.4rem .6rem; }
  .cards { grid-template-columns:repeat(2,1fr); gap:.6rem; }
  .card { padding:.9rem; }
  .page-head h2 { font-size:1.2rem; }
  .products { grid-template-columns:repeat(2,1fr); }
  .product { min-height:104px; }
  dialog { max-width:100vw; width:100vw; margin:auto 0 0; border-radius:16px 16px 0 0; max-height:92vh; overflow:auto; }
  .chart { height:140px; }
  .pay-row select { flex:0 0 100px; }
  .content { padding:.8rem; padding-bottom:5.5rem; }
  td, th { padding:.5rem .55rem; }
}

/* ================== DAABACAADDA RASIIDHKA 80mm ================== */
@media print {
  @page { size:80mm auto; margin:0; }
  html[data-paper="58"] .receipt-sheet { width:50mm; font-size:11px; }
  body { background:#fff; }
  .app, .auth-screen, .toast, dialog { display:none !important; }
  .receipt-sheet {
    display:block !important; width:72mm; margin:0 auto; padding:3mm 0;
    font:12px/1.45 "Courier New", ui-monospace, monospace; color:#000;
  }
  .receipt-sheet * { color:#000 !important; }
  .cart-bar { display:none !important; }
  .r-center { text-align:center; }
  .r-title { font-size:15px; font-weight:700; }
  .r-line { border-top:1px dashed #000; margin:2mm 0; }
  .r-row { display:flex; justify-content:space-between; gap:4px; }
  .r-row span:last-child { white-space:nowrap; }
  .r-item { margin-bottom:1mm; }
  .r-item .r-name { font-weight:700; }
  .r-grand { font-size:14px; font-weight:700; }
  .r-foot { margin-top:3mm; font-size:11px; }
}

/* ---- daily close (v2.4) ---- */
.daily-top { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; }
.daily-status { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.daily-recon .list-row.grand { border-top:2px solid var(--line); font-size:1.05rem; }
.daily-recon .list-row b { font-variant-numeric:tabular-nums; }
.note.warn .ico { vertical-align:-.2em; }
@media (max-width: 600px) { .daily-status { align-items:flex-start; } }