/* =========================================
   THEME – Brown/Cream (mobile-first, a11y)
   Author: you ✨  |  Last update: 2025-10-29
========================================= */

/* -------------------------------
   CSS VARIABLES
-------------------------------- */
:root{
  /* Palette */
  --bg:#f7f3ef; --bg-2:#f3eee8; --card:#fff8f0;
  --ink:#3e2e20; --muted:#8b6f47;
  --accent:#c07a42; --accent-2:#d0925e;
  --line:#ead9c4; --chip:#fffdf9;
  --ok:#2e7d32; --warn:#e1a325; --danger:#d64545;

  /* Layout scale (mobile-first) */
  --radius:1rem;
  --radius-sm:.6rem;
  --shadow-1:0 10px 30px rgba(139,111,71,.14);
  --shadow-inset:inset 0 0 0 2px #ecd6bd;

  /* Typo – fluid with clamp for better mobile legibility */
  --fz-100: clamp(.85rem, .8rem + .2vw, .95rem);
  --fz-200: clamp(.95rem, .9rem + .35vw, 1.05rem);
  --fz-300: clamp(1.05rem, 1rem + .6vw, 1.22rem);
  --fz-400: clamp(1.2rem, 1.05rem + .9vw, 1.45rem);

  /* Spacing scale */
  --sp-1:.35rem; --sp-2:.55rem; --sp-3:.8rem; --sp-4:1rem; --sp-5:1.25rem;

  /* Sticky sizes */
  --topbar-h:56px; /* default mobile */
  --menubar-top-offset: var(--topbar-h);

  /* Hit target */
  --hit:44px;

  /* iOS notch safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Larger screens can scale up a bit */
@media (min-width:900px){
  :root{ --topbar-h:64px; }
}

/* =========================================
   RESET / BASE
========================================= */
*{box-sizing:border-box}
html,body{margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:var(--fz-200);
  line-height:1.55;
  background:
    radial-gradient(1200px 600px at 10% -20%, #f0e6dc 0%, transparent 60%),
    linear-gradient(180deg,#f9f5f1 0%, #f3eee8 100%);
  color:var(--ink);
  /* safe area padding on iOS */
  padding-top:var(--safe-top);
  padding-bottom:var(--safe-bottom);
}
a{color:var(--accent); text-decoration:none}
a:hover{filter:brightness(.98)}
img{max-width:100%; height:auto; display:block}
picture{display:block}

::selection{background:#ffe4cc; color:#4b3320}

/* Remove tap highlight on mobile while keeping focus ring for keyboard */
*{-webkit-tap-highlight-color:rgba(0,0,0,0)}

/* Focus a11y */
:where(a,button,.btn,.hamburger):focus,
:where(a,button,.btn,.hamburger):focus-visible{
  outline:2px solid #d9bfa2; outline-offset:2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

/* =========================================
   LAYOUT
========================================= */
.container{max-width:1200px; margin:0 auto; padding:var(--sp-4)}
@media (min-width:900px){ .container{padding:var(--sp-5)} }

.card{
  background:var(--card);
  border:1px solid #eddccc;
  border-radius:var(--radius);
  padding:var(--sp-4);
  margin-bottom:var(--sp-4);
  box-shadow:var(--shadow-1);
}

/* Grid – mobile-first */
.grid{display:grid; gap:var(--sp-4)}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}

@media (min-width:960px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* Utilities for responsive gutters */
.gap-sm{gap:.6rem}
.gap-lg{gap:1.25rem}

/* =========================================
   BUTTONS / LINKS
========================================= */
.btn,button{
  font:inherit; cursor:pointer; border:none;
  min-height:var(--hit); /* mobile tap target */
  line-height:1; padding:.55rem .9rem; border-radius:.7rem;
}
a.btn,.btn-primary{
  background:var(--accent); color:#fff;
  font-weight:700; box-shadow:0 3px 0 #9a5e2f;
  display:inline-flex; align-items:center; gap:.45rem;
  transition:filter .15s ease, transform .15s ease;
}
a.btn:hover,.btn-primary:hover{filter:brightness(.98); transform:translateY(-1px)}
a.btn:active,.btn-primary:active{transform:translateY(0)}

.btn-outline{
  background:#fff; color:#5b4022; border:1px solid #d9c1a5;
  display:inline-flex; gap:.45rem; align-items:center;
}
.btn-outline:hover{background:#fff3e6}

.btn.login{background:#e8f0ff; color:#1a3c74; border:1px solid #cddcff}
.btn.logout{background:#ffeaea; color:#7a2626; border:1px solid #ffd1d1}

.btn.block{display:flex; width:100%; justify-content:center}

/* =========================================
   HEADER – ROW 1 (Brand + User)
========================================= */
.topbar.row-1{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:var(--sp-3);
  padding:.6rem 1rem;
  background:#fff8f0cc; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition: box-shadow .25s ease, background-color .25s ease;
  height:var(--topbar-h);
}
.topbar.row-1.scrolled{ box-shadow:0 6px 18px rgba(139,111,71,.18); background:#fff7edee }

.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px}
.brand-name{ font-size:var(--fz-300); font-weight:700; color:#5a3a1a; letter-spacing:.5px }
.spacer{flex:1}

.userbar{display:flex; align-items:center; gap:.6rem}
.userbar .hello{
  color:#6c4a2e; background:#fff4e6;
  padding:.34rem .55rem; border-radius:.4rem; border:1px solid #e7c9ab; font-size:.95rem;
}

/* Hamburger – show on mobile */
.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--hit); height:var(--hit);
  background:transparent; border:0; font-size:1.3rem;
  color:#6b4f27; cursor:pointer; padding:.25rem; border-radius:.5rem;
  transition: background .2s ease, transform .2s ease;
}
.hamburger:hover{ background:#fff3e6; transform: translateY(-1px); }
@media (min-width:901px){ .hamburger{display:none} }

/* =========================================
   HEADER – ROW 2 (Menubar)
========================================= */
.menubar.row-2{
  position:sticky; top:var(--menubar-top-offset); z-index:999;
  background:#fffdf9; border-bottom:1px solid var(--line);
}
.menubar .menu{
  max-width:1200px; margin:0 auto; padding:.45rem 1rem;
  display:flex; align-items:center; gap:.4rem;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.menubar .menu::-webkit-scrollbar{ display:none }
.menubar .menu a{
  display:flex; align-items:center; gap:.45rem;
  padding:.48rem .7rem; border-radius:.6rem; color:#6b4f27;
  border:1px solid transparent; white-space:nowrap;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  scroll-snap-align:start;
}
.menubar .menu a:hover{
  background:#fff3e6; border-color:#ecd6bd; box-shadow:0 1px 0 #e5caaa inset; transform:translateY(-1px);
}
.menubar .menu a.active{ background:#ffe9d5; border-color:#e9c9a8 }

/* Mobile – row 2 collapsible */
@media (max-width:900px){
  .menubar.row-2{ position:static; border-top:1px solid #ecd6bd }
  .menubar .menu{
    display:block; padding:0 1rem;
    max-height:0; overflow:hidden; opacity:0; transform:translateY(-6px);
    transition:max-height .35s ease, opacity .25s ease, transform .25s ease, padding .2s ease;
  }
  .menubar.open .menu{
    max-height:70vh; opacity:1; transform:translateY(0);
    padding:.6rem 1rem 1rem;
  }
  .menubar .menu a{
    display:flex; padding:.8rem .6rem; border-bottom:1px dashed #e9d5bf; border-radius:.4rem;
  }
  .menubar .menu a:last-child{ border-bottom:none }
}

/* =========================================
   TABLES / FORMS / TAGS
========================================= */
.table{width:100%; border-collapse:collapse; font-size:.98rem}
.table th,.table td{padding:.65rem .6rem; border-bottom:1px solid #ecd8c5}
.table th{text-align:left; color:var(--muted)}
.table tr:hover{background:#fff3e6}

/* Responsive table wrapper */
.table-responsive{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid #ecd8c5; border-radius:var(--radius-sm);
}
.table-responsive .table{margin:0; min-width:640px}

/* Form row */
.row{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}

/* Inputs – full width on mobile */
.input,select,.file,textarea{
  background:#fff; color:var(--ink);
  border:1px solid #e2cdb6; border-radius:.7rem; padding:.6rem .75rem;
  min-height:var(--hit); width:100%;
}
textarea{min-height:120px; resize:vertical}
.input:focus,select:focus,textarea:focus{outline:2px solid #f0dfcb; border-color:#d9bfa2}

/* Inline inputs on wider screens */
@media (min-width:720px){
  .input.inline, select.inline, .file.inline, textarea.inline{width:auto; min-width:280px}
}

/* Tags & badges */
.tag{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .55rem; border-radius:.6rem; font-size:.85rem;
  border:1px solid #e2cdb6; color:var(--muted); background:#fffdf9
}

.badge{padding:.2rem .55rem; border-radius:.6rem; font-size:.82rem}
.badge.ok{background:#eaf5ea; color:#2f6c36; border:1px solid #cfe8cf}
.badge.warn{background:#fff6df; color:#8c6a12; border:1px solid #f1e1b8}
.badge.danger{background:#fdeaea; color:#8a2323; border:1px solid #f3c4c4}

/* Footer */
.footer{color:#8f7b63; text-align:center; padding:1rem}
hr.sep{border:none; border-top:1px dashed #e6cfb5; margin:1rem 0}

/* =========================================
   KPI (optional)
========================================= */
.stat{display:flex; gap:.8rem; align-items:center}
.stat .icon{font-size:1.5rem; color:#a16833}
.stat .value{font-size:1.4rem; font-weight:800; color:#5b4022}

/* =========================================
   BOARD – Sơ đồ bàn
   (mobile-first, auto-fit with min width)
========================================= */
.board{
  display:grid; gap:1rem; width:100%;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.board.board-5{grid-template-columns: repeat(5, 1fr)} /* giữ class cũ nếu cần */

@media (max-width:1200px){ .board.board-5{grid-template-columns:repeat(4, 1fr)} }
@media (max-width:900px) { .board.board-5{grid-template-columns:repeat(3, 1fr)} }
@media (max-width:650px) { .board.board-5{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:420px) { .board.board-5{grid-template-columns:repeat(1, 1fr)} }

.table-card{
  background:#fffdf9; border:1px solid #ead6c0; border-radius:.9rem; padding:.9rem;
  display:flex; flex-direction:column; gap:.45rem; min-height:130px; height:100%;
  box-shadow:0 2px 0 #ecd6bd;
}
.table-card .name{font-weight:700; color:#5b4022}
.table-card .meta{display:flex; align-items:center; gap:.5rem; color:var(--muted); flex-wrap:wrap}
.table-card .actions{margin-top:auto; display:flex; gap:.5rem; flex-wrap:wrap}
.table-card.trong{box-shadow:inset 0 0 0 2px #cfe8cf}
.table-card.co_khach{box-shadow:inset 0 0 0 2px #f1e1b8}
.table-card.dang_phuc_vu{box-shadow:inset 0 0 0 2px #d9c1a5}

.status-dot{display:inline-block; width:.6rem; height:.6rem; border-radius:50%}
.dot-trong{background:#2e7d32}
.dot-co_khach{background:#e1a325}
.dot-dang_phuc_vu{background:#c07a42}

/* =========================================
   MENU-GRID – Thẻ món
========================================= */
.menu-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (max-width:400px){
  .menu-grid{grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))}
}
.product-card{
  background:#fffdf9; border:1px solid var(--line); border-radius:1rem;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 6px 16px rgba(139,111,71,.10);
}
.product-media{
  background:linear-gradient(180deg,#fff3e6 0%, #fff 100%);
  border-bottom:1px solid #f0e3d2;
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center
}
.product-media img{width:100%; height:100%; object-fit:cover}
.media-placeholder{font-size:2rem; color:#a16833}

.product-body{padding:.8rem .9rem .4rem; display:flex; gap:.35rem; flex-direction:column}
.product-title{
  font-weight:800; color:#5b4022; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden
}
.product-desc{
  color:var(--muted); font-size:.92rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden
}
.product-foot{
  padding:.7rem .9rem .9rem; display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; flex-wrap:wrap
}
.price-badge{
  background:#fff; color:#5b4022; border:1px solid #ead6c0;
  border-radius:.6rem; padding:.25rem .6rem; font-weight:700
}

/* =========================================
   UTILITIES
========================================= */
.hidden{display:none !important}
.active{background:#ffe9d5 !important; border-color:#e9c9a8 !important}
.muted{color:var(--muted)}
.center{display:flex; align-items:center; justify-content:center}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.max-w-sm{max-width:640px}
.w-100{width:100%}

/* Visually hidden for screen-readers */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================
   RESPONSIVE TWEAKS FOR SMALL DEVICES
========================================= */
@media (max-width:480px){
  .brand-name{font-size:var(--fz-200)}
  .card{padding:var(--sp-3)}
  .table th,.table td{padding:.55rem .5rem}
  .product-foot{gap:.5rem}
}

/* =========================================
   OPTIONAL DARK MODE (auto if user prefers)
========================================= */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#231a14; --bg-2:#2a211a; --card:#2f261f;
    --ink:#efe7de; --muted:#cdb69b;
    --accent:#e0a46f; --accent-2:#f0b783;
    --line:#3e3025; --chip:#3a2e24;
  }
  body{
    background:
      radial-gradient(1200px 600px at 10% -20%, #2a2019 0%, transparent 60%),
      linear-gradient(180deg,#2b211a 0%, #241c16 100%);
  }
  .card,.product-card,.table-card{box-shadow:none}
}