/* VQ Restaurant Manager — tablet-first, big-touch, offline */
:root{
  --amber:#d9a441;
  --amber-bg:rgba(217,164,65,.14);
  --bg:#0b0b0e;
  --blue:#7aa2c4;
  --blue-bg:rgba(122,162,196,.14);
  --btn-h:#b9862f;
  --card:#141417;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --green:#7fb069;
  --green-bg:rgba(127,176,105,.14);
  --ink:#ece7db;
  --line:rgba(236,231,219,.12);
  --mut:#a39e93;
  --panel:#141417;
  --panel2:#1c1c21;
  --radius:3px;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; font-family:var(--font-body); background:var(--bg); color:var(--ink); font-size:17px; }

/* top bar */
.topbar { position:sticky; top:0; z-index:50; background:var(--panel); color:var(--ink); padding:10px 14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.brand { font-size:20px; font-weight:800; white-space:nowrap; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; }
.tab { min-height:48px; padding:10px 16px; border:0; border-radius:3px; background:var(--panel); color:#cbd5e1; font-size:16px; font-weight:600; cursor:pointer; }
.tab.active { background:color-mix(in srgb, #f59e0b 16%, transparent); color:color-mix(in srgb, #0f172a 55%, #ece7db); }
.badge { background:#ef4444; color:var(--ink); border-radius:3px; padding:2px 9px; font-size:14px; margin-left:4px; }
.badge.hidden { display:none; }

main { padding:14px; max-width:1200px; margin:0 auto; }
.vtitle { margin:18px 4px 10px; font-size:20px; }
.hint { color:var(--mut); font-size:14px; margin:10px 4px; }
.empty { color:var(--mut); padding:18px; text-align:center; }

/* buttons */
.bigbtn { min-height:var(--btn-h); padding:12px 22px; border:0; border-radius:var(--radius); font-size:17px; font-weight:700; cursor:pointer; }
.bigbtn:disabled { opacity:.4; cursor:not-allowed; }
.bigbtn.primary { background:var(--blue); color:var(--ink); }
.bigbtn.warn { background:color-mix(in srgb, #f59e0b 16%, transparent); color:color-mix(in srgb, #1e293b 55%, #ece7db); }
.bigbtn.ghost { background:var(--panel2); color:var(--ink); }
.bigbtn.danger { background:var(--panel2); color:color-mix(in srgb, #b91c1c 55%, #ece7db); }
.danger { background:var(--panel2); color:color-mix(in srgb, #b91c1c 55%, #ece7db); border:0; border-radius:3px; min-width:44px; min-height:44px; font-size:16px; cursor:pointer; }

/* table grid */
.table-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.table-card { border:3px solid transparent; border-radius:var(--radius); padding:16px 10px; min-height:110px; cursor:pointer; background:var(--card); display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; }
.table-card .tname { font-size:24px; font-weight:800; }
.table-card .tstatus { font-size:13px; font-weight:800; letter-spacing:1px; }
.table-card .titems, .table-card .tseats { font-size:14px; color:var(--mut); }
.table-card.free { background:var(--green-bg); border-color:var(--green); }
.table-card.free .tstatus { color:var(--green); }
.table-card.occupied { background:var(--amber-bg); border-color:var(--amber); }
.table-card.occupied .tstatus { color:var(--amber); }
.table-card.billed { background:var(--blue-bg); border-color:var(--blue); }
.table-card.billed .tstatus { color:var(--blue); }
.tstatus-pill { font-size:12px; font-weight:800; padding:3px 10px; border-radius:3px; letter-spacing:1px; }
.tstatus-pill.free { background:var(--green-bg); color:var(--green); }
.tstatus-pill.occupied { background:var(--amber-bg); color:var(--amber); }
.tstatus-pill.billed { background:var(--blue-bg); color:var(--blue); }

/* drawer (table order panel) */
.drawer { position:fixed; inset:0; z-index:100; background:rgba(15,23,42,.55); display:flex; justify-content:flex-end; }
#drawer.hidden{display:none!important;}
.drawer > * { background:var(--bg); }
#drawer .dhead, #drawer .dsec, #drawer .dfoot { background:var(--card); }
.drawer > div, .drawer > .dhead { width:100%; }
#drawer { flex-direction:column; }
#drawer { background:var(--bg); width:min(860px, 100%); margin-left:auto; height:100%; overflow-y:auto; display:flex; flex-direction:column; }
.dhead { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; }
.dhead h2 { margin:0; font-size:22px; display:flex; gap:10px; align-items:center; }
.dsec { padding:12px 16px; }
.dsec h3 { margin:4px 0 10px; font-size:16px; color:var(--mut); text-transform:uppercase; letter-spacing:1px; }
.dfoot { position:sticky; bottom:0; padding:12px 16px; border-top:2px solid var(--line); background:var(--card); }
.dtot { font-size:20px; margin-bottom:10px; }
.dbtns { display:flex; gap:10px; }
.dbtns .bigbtn { flex:1; }
.bigbtn.full { width:100%; margin-top:10px; }

.oline { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px; border:1px solid var(--line); border-radius:3px; margin-bottom:8px; background:var(--panel); }
.octl { display:flex; align-items:center; gap:8px; }
.octl button { min-width:44px; min-height:44px; font-size:20px; border-radius:3px; border:1px solid var(--line); background:var(--panel2); cursor:pointer; }
.octl .oamt { min-width:80px; text-align:right; font-weight:700; }
.note { font-size:13px; color:var(--mut); }
.senttag { font-size:12px; background:var(--green-bg); color:var(--green); padding:2px 8px; border-radius:3px; font-weight:700; }

.search { width:100%; min-height:52px; font-size:17px; padding:10px 14px; border:2px solid var(--line); border-radius:3px; margin-bottom:10px; }
.mgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
.mitem { min-height:64px; border:2px solid var(--line); background:var(--panel); border-radius:3px; font-size:15px; cursor:pointer; display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; padding:8px; }
.mitem b { font-size:15px; }
.dot { width:12px; height:12px; border-radius:3px; display:inline-block; }
.dot.veg { background:var(--green); border:2px solid var(--green); }
.dot.nonveg { background:#b91c1c; border:2px solid #b91c1c; }
.mitem.veg { border-left:6px solid var(--green); }
.mitem.nonveg { border-left:6px solid #b91c1c; }

/* modal (bill) */
.modal { position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center; padding:12px; }
.modal.hidden { display:none; }
.msheet { background:var(--panel); border-radius:3px; width:min(640px, 100%); max-height:94vh; overflow-y:auto; padding:18px; }
.mhead { display:flex; justify-content:space-between; align-items:center; }
.mhead h2 { margin:0; }
.rname { color:var(--mut); margin:6px 0 12px; font-size:15px; }
.billtable { width:100%; border-collapse:collapse; margin:8px 0; font-size:15px; }
.billtable th, .billtable td { border-bottom:1px solid var(--line); padding:8px 6px; text-align:left; }
.billtable th { color:var(--mut); font-size:13px; text-transform:uppercase; }
.btotals { margin:10px 0; font-size:16px; }
.btotals > div { display:flex; justify-content:space-between; padding:4px 0; }
.btotals .grand { font-size:22px; font-weight:800; border-top:2px solid var(--ink); margin-top:6px; padding-top:8px; }
.splitbox { background:var(--panel2); border-radius:3px; padding:12px; margin:10px 0; }
.splitbox label { font-weight:600; }
.numin { width:70px; min-height:44px; font-size:17px; border-radius:3px; border:1px solid var(--line); text-align:center; }
.splitrow { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.modeseg { display:flex; gap:6px; }
.modeseg button { min-height:44px; padding:8px 14px; border-radius:3px; border:2px solid var(--line); background:var(--panel); font-size:15px; font-weight:600; cursor:pointer; }
.modeseg button.sel { border-color:var(--blue); background:var(--blue-bg); color:var(--blue); }
.mfoot { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.mfoot .bigbtn { flex:1; white-space:nowrap; }

/* KOT */
.kotgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.kotcard { background:var(--panel); border-radius:var(--radius); padding:14px; border-left:8px solid var(--amber); }
.kotcard.preparing { border-left-color:var(--blue); }
.kotcard.served { border-left-color:var(--green); opacity:.75; }
.khead { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; font-size:15px; }
.kstatus { margin-left:auto; font-size:12px; font-weight:800; background:var(--panel2); padding:3px 10px; border-radius:3px; }
.kotcard ul { margin:6px 0 12px; padding-left:18px; }
.kotcard li { margin:4px 0; font-size:16px; }
.kotcard .bigbtn { width:100%; }

/* menu mgmt */
.catchips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.cat-chip { min-height:48px; padding:10px 18px; border-radius:3px; border:2px solid var(--line); background:var(--panel); font-size:15px; font-weight:600; cursor:pointer; }
.cat-chip.sel { background:var(--panel); color:var(--ink); border-color:var(--panel); }
.menulist { display:flex; flex-direction:column; gap:8px; }
.menurow { display:flex; align-items:center; gap:10px; background:var(--panel); border-radius:3px; padding:10px 12px; }
.menurow.off { opacity:.55; }
.minfo { flex:1; display:flex; flex-direction:column; }
.minfo small { color:var(--mut); }
.avail { min-height:44px; padding:8px 14px; border-radius:3px; border:2px solid var(--line); background:var(--panel2); color:color-mix(in srgb, #b91c1c 55%, #ece7db); font-weight:800; font-size:13px; cursor:pointer; }
.avail.on { background:var(--green-bg); color:var(--green); border-color:var(--green); }
.formgrid { display:grid; gap:10px; max-width:560px; background:var(--panel); padding:16px; border-radius:var(--radius); }
.formgrid.inline { grid-template-columns:1fr 120px auto; align-items:end; max-width:720px; }
.formgrid input { min-height:52px; font-size:17px; padding:10px 12px; border:2px solid var(--line); border-radius:3px; width:100%; }
.formgrid label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:15px; }
.check { flex-direction:row !important; align-items:center; gap:10px !important; }
.check input { width:26px; height:26px; }

/* reports */
.repctl { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.repctl input[type=date] { min-height:52px; font-size:17px; border:2px solid var(--line); border-radius:3px; padding:8px 12px; }
.statgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; margin-bottom:8px; }
.stat { background:var(--panel); border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:4px; }
.stat small { color:var(--mut); font-size:13px; text-transform:uppercase; }
.stat b { font-size:24px; }
.modes { background:var(--panel); border-radius:var(--radius); padding:14px; margin-bottom:8px; }
.moderow { display:grid; grid-template-columns:60px 1fr 110px; gap:10px; align-items:center; margin:8px 0; }
.moderow .bar { background:var(--panel2); border-radius:3px; height:26px; }
.moderow .bar div { background:var(--blue); height:100%; border-radius:3px; }
.moderow b { text-align:right; }

/* settings */
.tlist { display:flex; flex-direction:column; gap:8px; max-width:720px; margin-bottom:12px; }
.trow { display:flex; justify-content:space-between; align-items:center; background:var(--panel); padding:10px 14px; border-radius:3px; }

@media print {
  .topbar, .repctl, .mfoot, .dbtns, #drawer .dsec:last-of-type { display:none !important; }
  .modal { position:static; background:none; }
  .msheet { max-height:none; width:100%; }
}
@media (max-width: 640px) {
  .formgrid.inline { grid-template-columns:1fr; }
  .dbtns { flex-direction:column; }
}

/* ===== vq reskin normalization (auto-generated) ===== */
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);}
h1,h2,h3,h4,.brand,.logo{font-family:var(--font-body);}
button{font-family:var(--font-body);}