/* ============================================================
   Mary Coffee — "Crème Fraîche" design
   Airy ivory canvas · white cards · matcha green · soft round
   ============================================================ */
:root {
  --canvas:#FBF8F2; --surface:#FFFFFF; --soft:#F6F2E9;
  --ink:#33302A; --muted:#98917F; --line:#EFE8DC; --line-2:#E4DCCB;
  --matcha:#5F7A5C; --matcha-dark:#4F6A4C; --matcha-soft:#EBF1E8; --matcha-text:#3F5A3C;
  --latte:#F0EAD9; --latte-text:#6B5B3E;
  --ok:#4E7A4A; --ok-bg:#EBF1E8; --bad:#B0604F; --bad-bg:#FCEEEA;
  --warn:#9A6E1F; --warn-bg:#F8F0DC;
  --r:18px; --shadow:0 2px 10px rgba(70,60,40,.05);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); min-height:100vh;
  font:15px/1.6 system-ui, -apple-system, "Segoe UI", "Noto Sans Khmer", sans-serif;
  -webkit-font-smoothing:antialiased; }
main { max-width:1060px; margin:0 auto; padding:26px 20px 90px; }
h1 { font-size:24px; font-weight:750; letter-spacing:-.015em; margin:0 0 4px; }
h2 { font-size:14px; font-weight:700; color:var(--ink); margin:26px 0 10px; }
.card h2:first-child { margin-top:0; }
.sub { color:var(--muted); font-size:13.5px; margin:0 0 22px; }
a { color:var(--matcha-text); text-underline-offset:3px; }

/* ---- top bar ---- */
.topbar { position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--line); }
.topbar-in { max-width:1060px; margin:0 auto; padding:0 20px; min-height:60px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none;
  font-weight:750; font-size:16.5px; letter-spacing:-.01em; padding:12px 0; }
.brand .mark { width:32px; height:32px; border-radius:11px; background:var(--matcha);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; }
.topbar nav { display:flex; gap:3px; flex-wrap:wrap; }
.topbar nav a { color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:7px 14px; border-radius:99px; transition:background .15s, color .15s; }
.topbar nav a:hover { color:var(--ink); background:var(--soft); }
.topbar nav a.on { color:var(--matcha-text); background:var(--matcha-soft); }
.badge { display:inline-block; min-width:17px; text-align:center; font-size:11px; font-weight:800;
  background:var(--bad); color:#fff; border-radius:99px; padding:1px 5px; margin-left:2px; }
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; padding:8px 0; }
.topright select { width:auto; padding:7px 11px; font-size:13px; border-radius:11px; }
.who { color:var(--muted); font-size:13px; font-weight:600; }

/* ---- surfaces ---- */
.card { background:var(--surface); border:none; border-radius:var(--r);
  padding:18px 22px; margin-bottom:14px; box-shadow:var(--shadow); }
.grid { display:grid; gap:14px; }
.grid.c3 { grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); }
.stat .label { font-size:12px; font-weight:600; color:var(--muted); }
.stat .value { font-size:29px; font-weight:750; letter-spacing:-.02em; margin:2px 0;
  font-variant-numeric:tabular-nums; }
.stat .note { font-size:12.5px; color:var(--muted); }
.stat .note.up { color:var(--ok); font-weight:600; }
.stat .note.down { color:var(--bad); font-weight:600; }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 2px; border-top:1px solid var(--line); font-size:14px; }
.row:first-child, .card > .row:first-of-type { border-top:none; }
.row .r { font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ---- pills, alerts ---- */
.pill { display:inline-block; font-size:11.5px; font-weight:700; padding:3px 11px; border-radius:99px; }
.pill.ok { background:var(--ok-bg); color:var(--ok); }
.pill.danger { background:var(--bad-bg); color:var(--bad); }
.pill.warn { background:var(--warn-bg); color:var(--warn); }
.alert { border-radius:16px; padding:13px 18px; font-size:14px; margin-bottom:14px; }
.alert.danger { background:var(--bad-bg); color:var(--bad); }
.alert.ok { background:var(--ok-bg); color:var(--ok); }
.alert a { color:inherit; font-weight:700; }

/* ---- forms ---- */
form.stack { display:grid; gap:12px; max-width:480px; }
label { font-size:12.5px; font-weight:700; color:var(--muted); display:block; margin-bottom:4px; }
input, select, textarea { width:100%; padding:10px 13px; border:1.5px solid var(--line-2);
  border-radius:13px; font:inherit; background:#fff; color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--matcha);
  box-shadow:0 0 0 3px var(--matcha-soft); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--matcha); color:#fff; border:1.5px solid var(--matcha); cursor:pointer;
  padding:11px 22px; border-radius:15px; font:inherit; font-size:14.5px; font-weight:700;
  text-decoration:none; transition:background .15s, transform .1s; }
.btn:hover { background:var(--matcha-dark); }
.btn:active { transform:scale(.985); }
.btn.ghost { background:#fff; color:var(--matcha-text); border-color:var(--line-2); }
.btn.ghost:hover { background:var(--soft); }
.btn.small { padding:6px 14px; font-size:13px; border-radius:11px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* ---- stock bars ---- */
.bar { height:9px; background:var(--latte); border-radius:99px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--matcha); border-radius:99px;
  transition:width .3s; }
.bar.low > i { background:var(--bad); }

/* ---- POS ---- */
.pos-grid { display:grid; gap:18px; align-items:start; }
@media (min-width: 900px) { .pos-grid { grid-template-columns: 1fr 370px; }
  .pos-side { position:sticky; top:80px; } }
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:13px; }
.tile { background:var(--surface); border-radius:20px; padding:16px 10px 13px;
  text-align:center; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .12s, box-shadow .12s; }
.tile:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(70,60,40,.1); }
.tile.sel { box-shadow:0 0 0 2.5px var(--matcha), var(--shadow); }
.tile .ico { width:56px; height:56px; border-radius:17px; margin:0 auto 8px;
  background:var(--latte); color:var(--latte-text); display:flex; align-items:center;
  justify-content:center; font-size:16px; font-weight:800; letter-spacing:.02em; }
.tile img { width:56px; height:56px; border-radius:17px; object-fit:cover; margin:0 auto 8px;
  display:block; }
.tile .nm { font-size:13.5px; font-weight:700; line-height:1.3; }
.tile .pr { font-size:12.5px; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; }
.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chip { padding:7px 15px; border:1.5px solid var(--line-2); border-radius:99px; background:#fff;
  font-size:13px; font-weight:600; cursor:pointer; transition:all .12s; color:var(--ink); }
.chip:hover { border-color:var(--matcha); }
.chip.sel { background:var(--matcha); border-color:var(--matcha); color:#fff; font-weight:700; }

/* ---- tables ---- */
table.list { width:100%; border-collapse:collapse; font-size:14px; }
table.list th { text-align:left; font-size:12px; font-weight:700; color:var(--muted); padding:8px 10px; }
table.list td { padding:11px 10px; border-top:1px solid var(--line); vertical-align:middle; }

/* ---- login ---- */
body.auth { display:grid; place-items:center;
  background:linear-gradient(180deg, #FBF8F2 0%, #F3EDE1 100%); }
body.auth main { padding:20px; width:100%; }
.login-wrap { max-width:390px; margin:0 auto; }
.login-wrap .card { padding:32px 30px; border-radius:24px; box-shadow:0 10px 34px rgba(70,60,40,.09); }
.login-brand { display:flex; align-items:center; gap:11px; color:var(--ink);
  font-weight:800; font-size:19px; margin-bottom:2px; }
.login-brand .mark { width:38px; height:38px; border-radius:13px; background:var(--matcha);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px; }

@media (max-width: 680px) {
  main { padding:18px 14px 70px; }
  .topbar-in { padding:0 12px; gap:10px; }
  .stat .value { font-size:24px; }
}