/* assets/style.css — สไตล์กลางของระบบ POS */
:root{
  --ink:#20160f; --paper:#faf6ef; --card:#ffffff; --line:#e7ddcd;
  --ember:#c5471f; --ember-dark:#a53914; --olive:#5f6b3a; --blue:#2f6690;
  --gold:#d99a2b; --green:#2e7d46; --red:#c0392b; --muted:#8b7d6b;
  --shadow:0 2px 8px rgba(60,40,20,.06),0 8px 28px rgba(60,40,20,.08);
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'IBM Plex Sans Thai',-apple-system,system-ui,sans-serif;
  background:var(--paper); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono','Sarabun',monospace;font-variant-numeric:tabular-nums}

/* ---------- ปุ่ม ---------- */
.btn{
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  border:none;border-radius:11px;padding:12px 18px;
  background:var(--card);color:var(--ink);border:1.5px solid var(--line);
  transition:transform .06s, box-shadow .12s, background .12s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.btn:active{transform:translateY(1px)}
.btn.em{background:var(--ember);color:#fff;border-color:var(--ember)}
.btn.em:hover{background:var(--ember-dark)}
.btn.green{background:var(--green);color:#fff;border-color:var(--green)}
.btn.blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.ghost{background:transparent}
.btn.lg{padding:15px 24px;font-size:16px;border-radius:13px}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- การ์ด/แผง ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.pill.gray{background:#f0eae0;color:var(--muted)}
.pill.green{background:#e5f3ea;color:var(--green)}
.pill.red{background:#fbe9e7;color:var(--red)}
.pill.gold{background:#fbf0d9;color:#a9761a}
.pill.busy{background:#fdeee9;color:var(--ember)}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:12px;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s;z-index:9999;max-width:90vw;text-align:center;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--red)}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(30,18,10,.5);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:1000;padding:18px}
.overlay.show{display:flex}
.modal{background:var(--card);border-radius:18px;width:100%;max-width:460px;max-height:90vh;overflow:auto;box-shadow:var(--shadow)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.modal-h h3{font-size:18px}
.modal-b{padding:20px 22px}
.modal-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;position:sticky;bottom:0;background:var(--card)}
.x{background:none;border:none;font-size:26px;cursor:pointer;color:var(--muted);line-height:1;width:34px;height:34px;border-radius:8px}
.x:hover{background:var(--paper)}

/* ---------- form ---------- */
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
input,select{font-family:inherit;font-size:15px;width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:11px;background:var(--paper);color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--ember);background:#fff}
.field{margin-bottom:16px}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);width:100%;max-width:400px;padding:38px 32px;border:1px solid var(--line)}
.login-logo{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px}

/* ---------- app shell ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:12px 18px}
.topbar h1{font-size:17px;font-weight:700}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--ember);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.wrap{max-width:1100px;margin:0 auto;padding:18px}
.h2{font-size:20px;font-weight:700;margin-bottom:4px}
.sub{color:var(--muted);font-size:14px;margin-bottom:18px}

/* ---------- grid โต๊ะ/เมนู ---------- */
.grid{display:grid;gap:12px}
.tables-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.menu-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.table-btn{aspect-ratio:1;border-radius:14px;border:2px solid var(--line);background:var(--card);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:700;font-size:17px;transition:.1s}
.table-btn .seats{font-size:11px;font-weight:500;color:var(--muted)}
.table-btn.busy{border-color:var(--ember);background:#fdf2ee}
.table-btn.served{border-color:#2e7d46;background:#eaf6ee}
.table-btn.served .seats{color:#2e7d46}
.tbl-badge{position:absolute;top:6px;right:6px;background:#2e7d46;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:999px}
.table-btn{position:relative}
.table-btn.sel{border-color:var(--ember);background:var(--ember);color:#fff}
.table-btn.sel .seats{color:#ffe}

/* ---------- ตาราง ---------- */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-size:14px}
th{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}

.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty .big{font-size:44px;opacity:.4;margin-bottom:8px}

@media(max-width:600px){
  .wrap{padding:12px}
  .topbar h1{font-size:15px}
}