/* ============================================================
   BAN BAI MAI CAFE' — Design System
   ============================================================ */
:root{
  --green:#1b5e3f; --green-2:#2e8b57; --green-3:#3faf74;
  --green-soft:#e9f4ee; --green-tint:#f3f9f5;
  --amber:#e0a437; --amber-soft:#fff5e2;
  --red:#d6503c; --red-soft:#fdecea;
  --blue:#2f7fd1; --purple:#6b4bb0;
  --ink:#1f2a24; --muted:#7c8a82; --line:#e6ece8;
  --bg:#eef3ef; --card:#ffffff;
  --shadow:0 4px 20px rgba(20,50,30,.06);
  --shadow-lg:0 12px 36px rgba(20,50,30,.14);
  --radius:16px;
  --font:"Sarabun","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1200px 600px at 100% -10%, #e4efe7 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #e7f1ea 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  letter-spacing:.1px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font);font-weight:700;letter-spacing:.2px}
a{text-decoration:none;transition:.15s}
.text-green{color:var(--green)!important}
.bg-green{background:var(--green)!important}
.text-muted{color:var(--muted)!important}
code{background:var(--green-soft);color:var(--green);padding:.05rem .35rem;border-radius:6px;font-size:.85em}

/* ---------- Nav ---------- */
.brand-bar{
  background:linear-gradient(100deg,#123f2b 0%,var(--green) 45%,var(--green-2) 100%);
  box-shadow:0 2px 18px rgba(15,40,25,.22);
}
.brand-bar .navbar-brand{color:#fff;font-weight:800;letter-spacing:.4px;font-size:1.12rem}
.brand-bar .nav-link{border-radius:10px;padding:.4rem .7rem!important;transition:.15s;color:#eaf3ee!important}
.brand-bar .nav-link:hover{background:rgba(255,255,255,.14)}
.brand-bar .nav-link.fw-bold{background:rgba(255,255,255,.2)}
.navbar-text .badge{font-weight:600}
/* Mobile: side-sliding offcanvas menu (below the lg breakpoint) */
@media (max-width:991.98px){
  .brand-bar .offcanvas{
    background:linear-gradient(160deg,#123f2b,#1b5e3f);color:#fff;width:82vw;max-width:300px;
    box-shadow:6px 0 28px rgba(0,0,0,.28)
  }
  .brand-bar .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.14)}
  .brand-bar .offcanvas-body{display:flex;flex-direction:column;gap:.15rem}
  .brand-bar .offcanvas .nav-link{color:#eaf3ee!important;padding:.7rem .8rem!important;border-radius:10px;font-size:1.02rem}
  .brand-bar .offcanvas .nav-link.fw-bold{background:rgba(255,255,255,.18)}
  .brand-bar .offcanvas .navbar-text{margin:.6rem 0 .4rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.14)}
  .brand-bar .offcanvas .btn-outline-light{width:100%}
}

/* ---------- Buttons ---------- */
.btn{border-radius:11px;font-weight:600;transition:.15s;padding:.5rem .95rem}
.btn-sm{border-radius:9px;padding:.32rem .7rem}
.btn-green{background:linear-gradient(180deg,var(--green-2),var(--green));border:none;color:#fff;box-shadow:0 4px 12px rgba(27,94,63,.25)}
.btn-green:hover{filter:brightness(1.07);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(27,94,63,.32)}
.btn-green:active{transform:translateY(0)}
.btn-green:disabled{background:#b7c9bf;box-shadow:none}
.btn-outline-green{border:1.5px solid var(--green-2);color:var(--green)}
.btn-outline-green:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-1px)}
.btn-light{background:#fff;border:1px solid var(--line)}
.btn-light:hover{background:var(--green-tint);border-color:var(--green-3)}

/* ---------- Cards ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.card-soft{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(230,236,232,.7)}
.card-soft:hover{box-shadow:var(--shadow)}

/* ---------- Chips / badges ---------- */
.chip{display:inline-block;padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.2px;line-height:1.3}
.chip-received{background:var(--red-soft);color:var(--red)}
.chip-cooking{background:var(--amber-soft);color:#b5771a}
.chip-ready{background:var(--green-soft);color:#1f8a44}
.chip-served{background:#eef1ef;color:#5a6b60}
.badge.bg-green{background:var(--green)!important}
.badge.bg-secondary{background:#8a988f!important;font-weight:600}

/* ---------- Station (kitchen/bar) display ---------- */
.station-tile{
  background:linear-gradient(180deg,#16241c,#0e1913);color:#e9efe9;
  border-radius:14px;border:1px solid rgba(255,255,255,.05);
  box-shadow:0 8px 24px rgba(0,0,0,.18)
}
.station-tile .border-top{border-color:rgba(255,255,255,.09)!important}

/* ---------- POS table tiles ---------- */
.table-tile{
  cursor:pointer;border-radius:14px;border:1.5px solid var(--line);background:#fff;
  transition:.15s;text-align:center;padding:1rem .4rem;position:relative
}
.table-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--green-3)}
.table-tile.occupied{background:linear-gradient(180deg,#fffaf1,#fff6ea);border-color:#f0d6a8}
.table-tile.billing{background:linear-gradient(180deg,#fdf0ef,#fdeeee);border-color:#e6b7b2}
.table-tile .badge{position:absolute;top:-8px;right:-6px}

/* ---------- Menu cards ---------- */
.menu-card{cursor:pointer;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;height:100%;transition:.15s}
.menu-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.menu-thumb{height:120px;background:linear-gradient(135deg,var(--green-soft),#dcefe3);display:flex;align-items:center;justify-content:center;font-size:2.4rem}

/* ---------- Qty control ---------- */
.qty-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:800;color:var(--green);transition:.12s}
.qty-btn:hover{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- Forms ---------- */
.form-control,.form-select{border-radius:10px;border:1px solid var(--line);padding:.5rem .8rem;transition:.15s}
.form-control:focus,.form-select:focus{border-color:var(--green-3);box-shadow:0 0 0 .2rem rgba(63,175,116,.18)}
.form-label{margin-bottom:.25rem}

/* ---------- Tables ---------- */
.table{--bs-table-hover-bg:var(--green-tint)}
.table thead th{border-bottom:2px solid var(--line);color:var(--muted);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.4px}
.table td,.table th{vertical-align:middle}

/* ---------- Stat numbers ---------- */
.stat-num{font-size:1.85rem;font-weight:800;line-height:1.1;letter-spacing:-.5px}

/* ---------- Modal ---------- */
.modal-content{border-radius:18px;border:none;box-shadow:var(--shadow-lg);overflow:hidden}
.modal-header{border-bottom:1px solid var(--line);background:var(--green-tint)}
.modal-title{font-weight:700}
.modal-footer{border-top:1px solid var(--line)}

/* ---------- Receipt ---------- */
.receipt{font-family:"Sarabun","Consolas",monospace;max-width:340px}
.receipt hr{border-top:1px dashed #b7c3bb}

/* ---------- Misc ---------- */
.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.fade-in{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.divider-soft{height:1px;background:var(--line);border:0;margin:.6rem 0}
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:#cfdcd4;border-radius:8px}

@media print{.no-print{display:none!important}body{background:#fff}}