/* ============================================================
   Scale v2 — in-page product UI previews (dark)
   Dashboards, POS, floor, recipe/requests/assets. Illustrative.
   ============================================================ */
:root{
  --m-rail:#06121f;
  --m-bg:#0a1d31;
  --m-bg2:#0e2742;
  --m-card:#0c2138;
  --m-line:rgba(238,245,251,.10);
  --m-line2:rgba(238,245,251,.18);
  --m-ink:#E6EEF7;
  --m-muted:#8DA2B8;
  --m-faint:#5E7389;
  --m-accent:#EEF5FB;
  --m-glow:rgba(120,180,235,.28);
}

.mock{display:flex;border-radius:11px;overflow:hidden;background:var(--m-bg);
  font-family:var(--font-body);color:var(--m-ink);font-size:13px;border:1px solid var(--m-line);min-block-size:340px}
.mock .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mock .cur{font-size:.72em;color:var(--m-faint)}
.mock .r{text-align:end}
.mock .mut{color:var(--m-faint)}

/* side rail */
.m-rail{inline-size:52px;background:var(--m-rail);display:flex;flex-direction:column;align-items:center;gap:6px;padding-block:14px;flex-shrink:0;border-inline-end:1px solid var(--m-line)}
.m-rail .logo{inline-size:30px;block-size:30px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(150deg,var(--navy-2),var(--navy-deep));color:var(--m-accent);font-family:var(--font-display);font-weight:700;margin-block-end:10px;border:1px solid var(--m-line2)}
.m-rail i{inline-size:34px;block-size:34px;display:grid;place-items:center;border-radius:8px;color:var(--m-faint);font-size:18px;transition:.2s}
.m-rail i.act{color:var(--m-accent);background:rgba(238,245,251,.08)}

.m-main{flex:1;min-inline-size:0;display:flex;flex-direction:column}
.m-top{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-block-end:1px solid var(--m-line)}
.m-crumb{display:inline-flex;align-items:center;gap:6px;font-size:12.5px}
.m-crumb .lnk{color:var(--m-muted)}
.m-crumb .cur{color:var(--m-ink);font-weight:600;font-size:12.5px}
.m-crumb .sep{color:var(--m-faint);display:inline-flex}
.m-tools{display:inline-flex;align-items:center;gap:7px}
.m-pill{font-size:11px;padding:5px 9px;border-radius:7px;border:1px solid var(--m-line);color:var(--m-muted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.m-pill.act{color:var(--m-accent);border-color:var(--m-line2);background:rgba(238,245,251,.07)}
.m-btn{font-size:11.5px;padding:6px 11px;border-radius:7px;background:var(--m-accent);color:var(--navy-deep);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.m-body{padding:14px;flex:1}
.m-grid{display:grid;gap:10px}
.m-card{background:var(--m-card);border:1px solid var(--m-line);border-radius:10px;padding:13px}
.m-card .lbl,.lbl{font-size:11.5px;color:var(--m-muted)}
.m-card .val,.val{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--m-ink);margin-block-start:3px}

.m-hero-kpi{background:linear-gradient(155deg,rgba(18,58,96,.5),var(--m-card));border:1px solid var(--m-line2);border-radius:10px;padding:15px}
.m-hero-kpi .val{font-size:2rem;color:var(--m-accent);text-shadow:0 0 24px var(--m-glow)}
.delta{font-size:11px;color:var(--ok);margin-block-start:6px;font-family:var(--font-mono)}
.m-kpi .val{font-size:1.4rem}
.m-up{font-size:11px;color:var(--ok);font-family:var(--font-mono);margin-block-start:4px}
.m-soon{color:var(--m-faint)!important}

.m-bars{display:flex;align-items:flex-end;gap:6px;block-size:70px;margin-block-start:6px}
.m-bars div{flex:1;background:linear-gradient(180deg,var(--ice-3),rgba(120,180,235,.12));border-radius:3px 3px 0 0;opacity:.75}
.m-bars div.hi{background:linear-gradient(180deg,var(--m-accent),var(--ice-3));opacity:1;box-shadow:0 0 14px var(--m-glow)}

.m-trackbar{block-size:6px;border-radius:4px;background:rgba(238,245,251,.08);overflow:hidden;margin-block-start:5px}
.m-trackbar span{display:block;block-size:100%;border-radius:4px}

.donut{inline-size:74px;block-size:74px;border-radius:50%;flex-shrink:0;
  -webkit-mask:radial-gradient(circle 22px at center,transparent 98%,#000 100%);
  mask:radial-gradient(circle 22px at center,transparent 98%,#000 100%)}

/* tables (recipe / requests / assets) */
.m-tabs{display:flex;gap:16px;padding:0 14px;border-block-end:1px solid var(--m-line)}
.m-tabs span{font-size:12px;color:var(--m-muted);padding-block:10px;border-block-end:2px solid transparent}
.m-tabs span.act{color:var(--m-accent);border-block-end-color:var(--m-accent)}
.m-table{inline-size:100%;border-collapse:collapse;font-size:12px}
.m-table th{text-align:start;font-weight:500;color:var(--m-faint);font-size:11px;padding:7px 9px;border-block-end:1px solid var(--m-line);text-transform:uppercase;letter-spacing:.04em}
.m-table td{padding:8px 9px;border-block-end:1px solid var(--m-line);color:var(--m-ink)}
.m-table th.r,.m-table td.r{text-align:end}
.m-side{inline-size:160px;flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.m-kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--m-faint);margin-block-end:8px;font-family:var(--font-mono)}
.m-badge{font-size:10px;padding:2px 7px;border-radius:5px;font-family:var(--font-mono);font-weight:500;white-space:nowrap}
.bg-brand{background:rgba(120,180,235,.16);color:var(--ice-3)}
.bg-ok{background:rgba(95,201,162,.16);color:var(--ok)}
.bg-info{background:rgba(127,178,230,.16);color:var(--info)}
.bg-warn{background:rgba(226,182,82,.16);color:var(--warn)}
.bg-mut{background:rgba(238,245,251,.08);color:var(--m-faint)}

/* ---------- POS ---------- */
.mock.pos,.mock.floor{flex-direction:column;background:var(--m-rail)}
.pos-top{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--navy-deep);border-block-end:1px solid var(--m-line)}
.pos-top .brand{font-family:var(--font-display);font-weight:700;color:var(--m-accent);font-size:1.05rem}
.pos-tabs{display:inline-flex;gap:4px}
.pos-tabs span{font-size:11.5px;color:rgba(238,245,251,.6);padding:5px 10px;border-radius:6px}
.pos-tabs span.act{background:rgba(238,245,251,.14);color:var(--m-accent)}
.pos-meta{display:inline-flex;gap:12px;font-size:11.5px;color:rgba(238,245,251,.7);font-family:var(--font-mono)}
.pos-meta i{margin-inline-end:3px}
.pos-on{color:var(--ok)}
.pos-wrap{display:grid;grid-template-columns:300px 1fr;flex:1;min-block-size:0}
.pos-cart{background:var(--m-bg);padding:12px;border-inline-end:1px solid var(--m-line);display:flex;flex-direction:column;gap:9px}
.pos-cart-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600}
.pos-cart-h span:first-child{display:inline-flex;align-items:center;gap:5px;color:var(--m-accent)}
.pos-ot{display:flex;gap:5px}
.pos-ot span{flex:1;text-align:center;font-size:11px;padding:6px;border-radius:6px;border:1px solid var(--m-line);color:var(--m-muted)}
.pos-ot span.act{background:rgba(238,245,251,.08);color:var(--m-accent);border-color:var(--m-line2)}
.pos-lines{display:flex;flex-direction:column;gap:5px;flex:1}
.pos-lh,.pos-line{display:grid;grid-template-columns:1fr 34px 56px;font-size:12px;align-items:center}
.pos-lh{color:var(--m-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding-block-end:4px;border-block-end:1px solid var(--m-line)}
.pos-line{padding:6px 0}
.pos-line .q,.pos-line .p{text-align:end;font-family:var(--font-mono)}
.pos-line.sent{color:var(--m-accent)}
.pos-line.sent .nm::before{content:"●";font-size:7px;margin-inline-end:5px;color:var(--ice-3);vertical-align:middle}
.pos-mod{font-size:10.5px;color:var(--m-faint);padding-inline-start:2px;margin-block-start:-3px}
.pos-tot{border-block-start:1px solid var(--m-line);padding-block-start:8px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.pos-tot .r{display:flex;justify-content:space-between;color:var(--m-muted)}
.pos-tot .r span:last-child{font-family:var(--font-mono);color:var(--m-ink)}
.pos-tot .net{display:flex;justify-content:space-between;font-weight:700;color:var(--m-accent);font-size:13.5px;margin-block-start:2px}
.pos-tot .net span:last-child{font-family:var(--font-mono)}
.pos-acts{display:grid;gap:5px}
.pos-acts.g3{grid-template-columns:repeat(3,1fr)}
.pos-acts.g4{grid-template-columns:repeat(4,1fr)}
.pos-acts span{text-align:center;font-size:10.5px;padding:7px 2px;border-radius:6px;border:1px solid var(--m-line);color:var(--m-muted)}
.pos-acts span.pri{background:var(--m-accent);color:var(--navy-deep);font-weight:600;border-color:var(--m-accent)}
.pos-pay{text-align:center;font-size:12.5px;font-weight:600;padding:9px;border-radius:7px;background:linear-gradient(120deg,var(--navy-2),var(--navy-deep));color:var(--m-accent);border:1px solid var(--m-line2)}
.pos-menu{padding:12px;display:flex;flex-direction:column;gap:10px;min-block-size:0}
.pos-cats{display:flex;gap:6px;flex-wrap:wrap}
.pos-cats span{font-size:11.5px;padding:6px 12px;border-radius:7px;border:1px solid var(--m-line);color:var(--m-muted)}
.pos-cats span.act{background:rgba(238,245,251,.08);color:var(--m-accent);border-color:var(--m-line2)}
.pos-prod{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pos-item{padding:11px;border-radius:9px;background:var(--m-card);border:1px solid var(--m-line);cursor:pointer;transition:.2s}
.pos-item:hover{border-color:var(--m-line2);transform:translateY(-2px);background:var(--m-bg2)}
.pos-item .ico{display:flex;gap:4px;color:var(--m-faint);font-size:12px;margin-block-end:14px}
.pos-item .nm{font-size:12px;font-weight:500;margin-block-end:3px}
.pos-item .pr{font-family:var(--font-mono);font-size:12px;color:var(--m-accent)}

/* ---------- floor ---------- */
.floor-secs{display:flex;gap:6px;padding:10px 14px;flex-wrap:wrap;background:var(--m-bg)}
.floor-secs span{font-size:11.5px;padding:5px 11px;border-radius:7px;border:1px solid var(--m-line);color:var(--m-muted)}
.floor-secs span.act{background:rgba(238,245,251,.08);color:var(--m-accent);border-color:var(--m-line2)}
.floor-leg{display:flex;gap:14px;padding:8px 14px;flex-wrap:wrap;font-size:11px;color:var(--m-muted);border-block:1px solid var(--m-line)}
.floor-leg span{display:inline-flex;align-items:center;gap:5px}
.floor-leg i{font-size:9px}
.c-avail{color:var(--ok)}.c-occ{color:var(--info)}.c-res{color:var(--warn)}.c-bill{color:var(--m-accent)}.c-clean{color:var(--m-faint)}
.floor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;background:var(--m-bg)}
.tbl{padding:13px;border-radius:10px;border:1px solid var(--m-line);background:var(--m-card)}
.tbl .th{display:flex;justify-content:space-between;align-items:center;margin-block-end:10px}
.tbl .no{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--m-ink)}
.tbl .stt{font-size:10px;font-family:var(--font-mono);padding:2px 6px;border-radius:4px}
.tbl .sub{font-size:11px;color:var(--m-muted);display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono)}
.tbl.avail{border-color:rgba(95,201,162,.3)}.tbl.avail .stt{background:rgba(95,201,162,.16);color:var(--ok)}
.tbl.occ{border-color:rgba(127,178,230,.3)}.tbl.occ .stt{background:rgba(127,178,230,.16);color:var(--info)}
.tbl.res{border-color:rgba(226,182,82,.3)}.tbl.res .stt{background:rgba(226,182,82,.16);color:var(--warn)}
.tbl.bill{border-color:var(--m-line2)}.tbl.bill .stt{background:rgba(238,245,251,.12);color:var(--m-accent)}
.tbl.clean .stt{background:rgba(238,245,251,.06);color:var(--m-faint)}

@media (max-width:640px){
  .pos-wrap{grid-template-columns:1fr}
  .pos-cart{border-inline-end:none;border-block-end:1px solid var(--m-line)}
  .pos-prod,.floor-grid{grid-template-columns:repeat(2,1fr)}
  .m-rail{display:none}
}