/* ============================================================
   Meza POS Cloud — design system
   Warm restaurant identity: cream + charcoal + ember.
   FOH: light warm theme. KDS: dark, chrome-free.
   Phone-first: bottom tab bar, >=44px touch targets.
   ============================================================ */
:root{
  --cream:#fffbeb; --card:#ffffff; --ink:#1c1917; --muted:#78716c;
  --line:#e7e5e4; --ember:#c2410c; --ember-d:#9a3412; --ember-l:#ffedd5;
  --amber:#f59e0b; --green:#16a34a; --green-l:#dcfce7;
  --red:#dc2626; --red-l:#fee2e2; --blue:#2563eb; --blue-l:#dbeafe;
  --kds-bg:#0c0a09; --kds-card:#1c1917; --kds-line:#44403c;
  --r:14px; --sh:0 2px 12px rgba(28,25,23,.07);
  --tap:48px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--cream); color:var(--ink); font-size:16px; line-height:1.45;
}
.hidden{display:none !important}
h1,h2,h3{margin:.4em 0}
h2{font-size:1.25rem} h3{font-size:1.05rem}
.muted{color:var(--muted)} .small{font-size:.85rem}
.num{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
#app{display:flex; min-height:100vh}
#sidebar{
  width:220px; background:#1c1917; color:#fafaf9; flex-shrink:0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{display:flex; gap:.6rem; align-items:center; padding:1rem .9rem; border-bottom:1px solid #44403c}
.brand .plate{font-size:1.7rem}
.brand b{font-size:1.05rem; display:block; line-height:1.1}
.brand small{color:#a8a29e; font-size:.75rem}
#mainNav{padding:.6rem; display:flex; flex-direction:column; gap:2px; overflow-y:auto}
.navbtn{
  display:flex; align-items:center; gap:.7rem; width:100%;
  background:none; border:0; color:#e7e5e4; padding:.7rem .8rem; border-radius:10px;
  font-size:.95rem; cursor:pointer; min-height:var(--tap); text-align:left;
}
.navbtn .ic{font-size:1.25rem; width:1.8rem; text-align:center}
.navbtn:hover{background:#292524}
.navbtn.active{background:var(--ember); color:#fff}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
#topbar{
  display:flex; align-items:center; gap:1rem; padding:.7rem 1.1rem;
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40;
}
#pageTitle{margin:0; font-size:1.2rem; flex:1}
.topright{display:flex; align-items:center; gap:.6rem}
.shopname{font-weight:700; color:var(--ember-d); white-space:nowrap}
.netpill{
  font-size:.78rem; font-weight:700; padding:.28rem .6rem; border-radius:999px;
  background:var(--green-l); color:#15803d; white-space:nowrap;
}
.netpill.offline{background:#fef3c7; color:#b45309}
.userbox{display:flex; align-items:center; gap:.6rem}
.uchip{font-size:.85rem; color:var(--muted)}
.uchip b{color:var(--ink)}
.rolebadge{
  display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase;
  background:var(--ember-l); color:var(--ember-d); border-radius:6px; padding:.1rem .4rem; margin-left:.35rem;
}
#view{padding:1rem 1.1rem 5.5rem; max-width:1200px; width:100%; margin:0 auto}
#appfoot{text-align:center; color:var(--muted); font-size:.78rem; padding:1rem; margin-top:auto}

/* bottom tab bar (phones) */
#bottomNav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--card); border-top:1px solid var(--line);
  padding:.35rem .2rem calc(.35rem + env(safe-area-inset-bottom));
}
.tabbtn{
  flex:1; background:none; border:0; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:.45rem 0; min-height:56px; color:var(--muted); font-size:.7rem; cursor:pointer;
  border-radius:10px;
}
.tabbtn .ic{font-size:1.45rem}
.tabbtn.active{color:var(--ember); font-weight:700}
.tabbtn.kds.active{color:var(--ember)}

/* ---------- components ---------- */
.card{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:1rem; margin-bottom:1rem}
.card h3{margin-top:0}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--ember); color:#fff; border:0; border-radius:10px;
  padding:.7rem 1.2rem; font-size:1rem; font-weight:600; cursor:pointer; min-height:var(--tap);
}
.btn:hover{background:var(--ember-d)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.ghost{background:#f5f5f4; color:var(--ink)}
.btn.ghost:hover{background:var(--line)}
.btn.danger{background:var(--red)}
.btn.ok{background:var(--green)}
.btn.warn{background:var(--amber); color:#1c1917}
.btn.sm{min-height:38px; padding:.4rem .8rem; font-size:.88rem}
.btn.block{width:100%}
.btn.big{font-size:1.15rem; padding:1rem 1.4rem}
.rowbtns{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.8rem}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
input,select,textarea{
  font:inherit; padding:.65rem .7rem; border:1px solid var(--line); border-radius:10px;
  background:#fff; width:100%; min-height:var(--tap);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ember); border-color:var(--ember)}
label.f{display:block; margin:.6rem 0 .25rem; font-weight:600; font-size:.9rem}
table.tbl{width:100%; border-collapse:collapse; font-size:.92rem}
table.tbl th,table.tbl td{padding:.55rem .5rem; border-bottom:1px solid var(--line); text-align:left}
table.tbl th{color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em}
table.tbl td.r,table.tbl th.r{text-align:right}
.alert{background:var(--red-l); border:1px solid #fca5a5; color:#991b1b; border-radius:10px; padding:.8rem; margin-bottom:1rem}
.okbox{background:var(--green-l); border:1px solid #86efac; color:#166534; border-radius:10px; padding:.8rem; margin-bottom:1rem}
.kpi{background:var(--card); border-radius:var(--r); box-shadow:var(--sh); padding:.9rem}
.kpi .v{font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums}
.kpi .l{color:var(--muted); font-size:.82rem}
.chip{
  display:inline-block; font-size:.75rem; font-weight:700; border-radius:999px; padding:.2rem .6rem;
  background:#f5f5f4; color:var(--muted); margin:.1rem;
}
.chip.green{background:var(--green-l); color:#15803d}
.chip.amber{background:#fef3c7; color:#b45309}
.chip.red{background:var(--red-l); color:#b91c1c}
.chip.blue{background:var(--blue-l); color:#1d4ed8}
.chip.ember{background:var(--ember-l); color:var(--ember-d)}

/* ---------- floor map ---------- */
.floorchips{display:flex; gap:.5rem; overflow-x:auto; padding:.2rem 0 .8rem}
.fchip{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:.55rem 1.1rem;
  font-weight:600; cursor:pointer; white-space:nowrap; min-height:44px;
}
.fchip.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.floormap{
  position:relative; width:100%; aspect-ratio:16/10; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  touch-action:none;
}
.tabletile{
  position:absolute; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:18px; border:3px solid #d6d3d1;
  background:#fafaf9; display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; box-shadow:var(--sh);
}
.tabletile .tn{font-size:1.35rem; font-weight:800; line-height:1}
.tabletile .ts{font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-top:2px}
.tabletile .tt{font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums}
.tabletile.free{border-color:#d6d3d1}
.tabletile.free .ts{color:var(--muted)}
.tabletile.occupied{border-color:var(--green); background:#f0fdf4}
.tabletile.occupied .ts{color:#15803d}
.tabletile.bill_requested{border-color:var(--blue); background:#eff6ff}
.tabletile.bill_requested .ts{color:#1d4ed8}
.tabletile.needs_clearing{border-color:var(--red); background:#fef2f2}
.tabletile.needs_clearing .ts{color:#b91c1c}
.tabletile .tw{font-size:.68rem; color:var(--muted)}
.tabletile .tot{font-size:.72rem; font-weight:700; color:var(--ember-d); font-variant-numeric:tabular-nums}
.mapedit .tabletile{cursor:move; border-style:dashed}

/* ---------- order taking ---------- */
.orderwrap{display:grid; grid-template-columns:150px 1fr 320px; gap:.8rem; align-items:start}
.catrail{display:flex; flex-direction:column; gap:.4rem; position:sticky; top:70px}
.catbtn{
  border:1px solid var(--line); background:#fff; border-radius:12px; padding:.8rem .4rem;
  font-weight:700; cursor:pointer; min-height:56px; font-size:.9rem;
}
.catbtn.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.itemgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:.6rem}
.itembtn{
  border:1px solid var(--line); background:#fff; border-radius:12px; padding:.8rem .5rem;
  cursor:pointer; min-height:96px; display:flex; flex-direction:column; justify-content:center; gap:.25rem;
  text-align:center;
}
.itembtn:hover{border-color:var(--ember)}
.itembtn .nm{font-weight:700; font-size:.92rem; line-height:1.2}
.itembtn .pr{color:var(--ember-d); font-weight:800; font-variant-numeric:tabular-nums}
.itembtn.off{opacity:.45; filter:grayscale(.6)}
.itembtn .off86{font-size:.7rem; font-weight:800; color:var(--red)}
.ticket{
  background:#fff; border-radius:var(--r); box-shadow:var(--sh); padding:.9rem;
  position:sticky; top:70px; max-height:calc(100vh - 140px); overflow-y:auto;
}
.ticket h3{margin:0 0 .4rem}
.tline{display:flex; justify-content:space-between; gap:.5rem; padding:.5rem 0; border-bottom:1px dashed var(--line); font-size:.92rem}
.tline .qn{font-weight:800; color:var(--ember-d); white-space:nowrap}
.tline .mods{font-size:.78rem; color:var(--muted)}
.tline.fired{opacity:.75}
.tline .st{font-size:.68rem; font-weight:800; text-transform:uppercase}
.typetoggle{display:flex; background:#f5f5f4; border-radius:12px; padding:4px; gap:4px; margin-bottom:.8rem}
.typetoggle button{flex:1; border:0; background:none; border-radius:9px; padding:.6rem; font-weight:700; cursor:pointer; min-height:44px}
.typetoggle button.active{background:#fff; box-shadow:var(--sh); color:var(--ember-d)}
.sendbtn{width:100%; font-size:1.2rem; padding:1.05rem; margin-top:.7rem}
.modopt{
  display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  border:1px solid var(--line); border-radius:10px; padding:.7rem .8rem; margin-bottom:.45rem;
  cursor:pointer; min-height:52px; font-weight:600;
}
.modopt.sel{border-color:var(--ember); background:var(--ember-l)}
.modopt .pd{color:var(--ember-d); font-weight:800; font-variant-numeric:tabular-nums}

/* ---------- KDS (dark, chrome-free) ---------- */
.kds-shell{background:var(--kds-bg); border-radius:var(--r); padding:.8rem; min-height:60vh}
.kds-top{display:flex; align-items:center; gap:.8rem; margin-bottom:.7rem; color:#fafaf9}
.kds-top .clock{font-size:1.3rem; font-weight:800; font-variant-numeric:tabular-nums}
.kds-filters{display:flex; gap:.5rem}
.kds-filters button{
  border:1px solid var(--kds-line); background:var(--kds-card); color:#e7e5e4;
  border-radius:999px; padding:.5rem 1rem; font-weight:700; cursor:pointer; min-height:44px;
}
.kds-filters button.active{background:var(--ember); border-color:var(--ember); color:#fff}
.kds-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem}
.kds-col h4{
  margin:.2rem 0 .6rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em;
  display:flex; justify-content:space-between; align-items:center;
}
.kds-col.new h4{color:var(--amber)} .kds-col.preparing h4{color:#fb923c} .kds-col.ready h4{color:var(--green)}
.kds-card{
  background:var(--kds-card); border:1px solid var(--kds-line); border-left:6px solid var(--amber);
  border-radius:12px; padding:.7rem; margin-bottom:.6rem; color:#fafaf9;
}
.kds-col.preparing .kds-card{border-left-color:#fb923c}
.kds-col.ready .kds-card{border-left-color:var(--green)}
.kds-card.flash{animation:kdsflash 1s infinite}
@keyframes kdsflash{50%{box-shadow:0 0 0 3px var(--green)}}
.kds-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.35rem}
.kds-ord{font-size:1.15rem; font-weight:800}
.kds-timer{font-size:1.15rem; font-weight:800; font-variant-numeric:tabular-nums}
.kds-timer.ok{color:var(--green)} .kds-timer.warn{color:var(--amber)} .kds-timer.over{color:var(--red)}
.kds-meta{font-size:.78rem; color:#a8a29e; margin-bottom:.4rem}
.kds-line{padding:.3rem 0; border-top:1px dashed var(--kds-line); font-size:.95rem}
.kds-line .q{font-weight:800; color:var(--amber); margin-right:.4rem; font-variant-numeric:tabular-nums}
.kds-line .m{font-size:.78rem; color:#d6d3d1; display:block; margin-left:1.6rem}
.kds-note{background:#713f12; color:#fef3c7; border-radius:8px; padding:.35rem .6rem; font-size:.82rem; font-weight:700; margin-top:.35rem}
.kds-bump{
  width:100%; margin-top:.6rem; border:0; border-radius:10px; padding:.85rem;
  font-size:1.05rem; font-weight:800; cursor:pointer; min-height:56px;
  background:var(--amber); color:#1c1917;
}
.kds-col.preparing .kds-bump{background:#fb923c}
.kds-col.ready .kds-bump{background:var(--green); color:#fff}

/* ---------- bills / tender ---------- */
.tendergrid{display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; margin:.6rem 0}
.tenderbtn{
  border:2px solid var(--line); background:#fff; border-radius:12px; padding:1rem;
  font-size:1.05rem; font-weight:800; cursor:pointer; min-height:76px;
}
.tenderbtn:hover{border-color:var(--ember)}
.tenderbtn.sel{border-color:var(--ember); background:var(--ember-l)}
.cashdenoms{display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; margin:.5rem 0}
.cashdenoms button{
  border:1px solid var(--line); background:#f5f5f4; border-radius:10px; padding:.6rem;
  font-weight:700; cursor:pointer; min-height:48px; font-variant-numeric:tabular-nums;
}
.billhead{background:var(--ink); color:#fff; border-radius:var(--r); padding:.9rem; margin-bottom:1rem}
.billhead .bt{font-size:1.3rem; font-weight:800}
.billhead .bm{color:#d6d3d1; font-size:.85rem}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:linear-gradient(160deg,#431407,#9a3412)}
.login-card{background:#fffbeb; border-radius:18px; padding:1.8rem; width:100%; max-width:400px; box-shadow:0 8px 40px rgba(0,0,0,.35)}
.login-card h1{margin:0 0 .2rem; color:var(--ember-d); font-size:1.6rem}
.pinpad{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.8rem}
.pinpad button{
  border:1px solid var(--line); background:#fff; border-radius:12px; font-size:1.5rem; font-weight:800;
  padding:.9rem; cursor:pointer; min-height:64px;
}
.pinpad button:hover{border-color:var(--ember)}
.pindots{display:flex; gap:.6rem; justify-content:center; margin:.8rem 0}
.pindots span{width:16px; height:16px; border-radius:50%; background:var(--line)}
.pindots span.on{background:var(--ember)}

/* ---------- modal / toast / print ---------- */
#modalRoot{display:none}
#modalRoot.open{display:block}
.overlay{position:fixed; inset:0; background:rgba(28,25,23,.55); z-index:100; display:flex; align-items:flex-end; justify-content:center}
.sheet{
  background:var(--cream); border-radius:18px 18px 0 0; padding:1.2rem; width:100%; max-width:560px;
  max-height:88vh; overflow-y:auto; position:relative;
}
.sheet.wide{max-width:860px}
.mclose{
  position:absolute; top:.6rem; right:.8rem; border:0; background:#f5f5f4; border-radius:50%;
  width:40px; height:40px; font-size:1.3rem; cursor:pointer;
}
.morerow{
  display:flex; width:100%; align-items:center; gap:.7rem; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:.85rem; margin-bottom:.5rem; font-size:1rem; font-weight:600; cursor:pointer;
  min-height:56px; text-align:left;
}
.morerow .chev{margin-left:auto; color:var(--muted)}
#toast{position:fixed; bottom:84px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:.4rem; align-items:center; pointer-events:none; width:max-content; max-width:92vw}
.toastmsg{background:#1c1917; color:#fff; border-radius:10px; padding:.7rem 1.1rem; font-size:.92rem; opacity:0; transition:opacity .25s}
.toastmsg.show{opacity:1}
.toastmsg.err{background:var(--red)}
#printArea{display:none}
@media print{
  body>*{display:none !important}
  #printArea{display:block !important}
  .rt{width:100%; border-collapse:collapse; font-size:12px}
  .rt td.r{text-align:right}
  .rcpt{width:72mm; font-family:monospace; font-size:12px; color:#000}
  .rcpt h2{font-size:15px; margin:.2em 0}
  .rcpt .c{text-align:center} .rcpt .r{text-align:right}
  .rcpt hr{border:0; border-top:1px dashed #000; margin:.3em 0}
  .kot{width:72mm; font-family:monospace; font-size:13px; color:#000}
  .kot h2{font-size:16px}
}

/* skeleton shimmer */
.skel{background:linear-gradient(90deg,#f5f5f4 25%,#e7e5e4 50%,#f5f5f4 75%); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:8px}
@keyframes sk{to{background-position:-200% 0}}
.skelwrap{padding:.4rem 0}

/* shift chip */
.shchip{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:.4rem .8rem;
  font-size:.8rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.shchip.open{background:var(--green-l); border-color:#86efac; color:#15803d}

/* responsive */
@media (max-width:900px){
  #sidebar{display:none}
  #bottomNav{display:flex}
  #view{padding:.8rem .8rem 6rem}
  .orderwrap{grid-template-columns:1fr}
  .catrail{flex-direction:row; overflow-x:auto; position:static}
  .catbtn{white-space:nowrap; min-height:48px}
  .ticket{position:static; max-height:none}
  .kds-cols{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr 1fr}
  #pageTitle{font-size:1.05rem}
  .shopname{display:none}
}
@media (min-width:901px){
  .overlay{align-items:center; padding:1rem}
  .sheet{border-radius:18px}
}
.view-in{animation:vin .18s ease-out}
@keyframes vin{from{opacity:0; transform:translateY(6px)}}