*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ─── Dark Cafe Palette ─── */
  --bg-deep: #0f0d0b;
  --bg-surface: #1a1614;
  --bg-card: #231f1b;
  --bg-elevated: #2d2722;
  --bg-glass: rgba(35, 31, 27, .65);
  --border: rgba(196, 164, 120, .1);
  --border-hover: rgba(196, 164, 120, .25);
  --text: #f2ece6;
  --text-secondary: #a89a8c;
  --text-muted: #6b5e52;
  --amber: #c4a478;
  --amber-glow: #e8c896;
  --amber-dim: #8b7355;
  --success: #6abf7b;
  --warning: #e0a84c;
  --danger: #d45f5f;

  /* ─── Spacing (4px base) ─── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* ─── Elevation ─── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  --shadow-glow: 0 0 20px rgba(196,164,120,.08);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;

  /* ─── Transitions ─── */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
  color: var(--text);
  background: var(--bg-deep);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ═══ LOGIN SCREEN ═══ */
.login-screen {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
}

.login-screen::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(196,164,120,.08) 0%, transparent 70%);
  top: 20%; left: 30%;
  animation: breathe 8s ease-in-out infinite;
}

.login-screen::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(196,164,120,.05) 0%, transparent 70%);
  bottom: 10%; right: 20%;
  animation: breathe 8s ease-in-out infinite 4s;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.15); opacity: 1; }
}

.login-box {
  text-align: center;
  position: relative;
  z-index: 1;
  animation: fadeUp .6s var(--ease) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.brand-lg {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}

.brand-lg span { color: var(--amber); }

.login-sub {
  color: var(--text-secondary);
  font-size: .72rem;
  margin-top: var(--sp-2);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 300;
}

.pin-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.2rem;
  color: var(--amber);
  letter-spacing: 14px;
  margin: var(--sp-8) 0 var(--sp-7);
  text-shadow: 0 0 20px rgba(196,164,120,.3);
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  gap: var(--sp-2);
  justify-content: center;
}

.pin-pad button {
  width: 64px; height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  cursor: pointer;
  transition: all .15s var(--ease);
}

.pin-pad button:hover {
  background: rgba(196,164,120,.12);
  border-color: var(--border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.pin-pad button:active { transform: scale(.92); }
.pin-clear { font-size: .85rem !important; }
.pin-enter { background: rgba(196,164,120,.2) !important; color: var(--amber) !important; border-color: var(--amber-dim) !important; }
.pin-enter:hover { background: rgba(196,164,120,.3) !important; }
.login-hint { color: var(--text-muted); font-size: .6rem; margin-top: var(--sp-7); font-family: 'JetBrains Mono', monospace; letter-spacing: .5px; }

/* ═══ APP SHELL ═══ */
.app-shell {
  display: grid;
  grid-template-columns: 78px 1fr;
  grid-template-rows: 60px 1fr;
  height: 100vh;
  background: var(--bg-deep);
}

/* ═══ SIDEBAR ═══ */
.sidebar {
  grid-row: 1 / -1;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-5) 0;
  gap: var(--sp-1);
}

.sidebar-brand {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--amber);
  font-size: 1.1rem;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  width: 48px;
  text-align: center;
}

.sidebar-brand span { color: var(--text-muted); }

.nav-items { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; padding-top: var(--sp-2); }

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-3) var(--sp-2);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all .2s var(--ease);
  width: 62px;
  font-size: .52rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .8px;
  position: relative;
}

.nav-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 24px;
  background: var(--amber);
  border-radius: 0 2px 2px 0;
  transition: transform .2s var(--ease-bounce);
}

.nav-btn:hover { color: var(--text-secondary); background: rgba(196,164,120,.05); }
.nav-btn.active { color: var(--amber); }
.nav-btn.active::before { transform: translateY(-50%) scaleY(1); }
.nav-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.nav-footer { margin-top: auto; }

/* ═══ HEADER ═══ */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-7);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}

.header-left { display: flex; align-items: center; gap: var(--sp-4); }
.header-left h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.15rem; letter-spacing: -.3px; }
.sync-status { font-family: 'JetBrains Mono', monospace; font-size: .6rem; color: var(--success); opacity: .8; }
.header-meta { display: flex; align-items: center; gap: var(--sp-5); }
.clock { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--text-muted); }
.staff-badge {
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
}

/* ═══ CONTENT ═══ */
.content-area { overflow: hidden; }
.view { display: none; height: 100%; overflow-y: auto; }
.view.active { display: block; }

/* ═══ BILLING LAYOUT ═══ */
.billing-layout { display: grid; grid-template-columns: 1fr 370px; height: 100%; }

.billing-menu {
  padding: var(--sp-6);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--bg-deep);
}

.billing-menu::-webkit-scrollbar { width: 4px; }
.billing-menu::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 2px; }

.search-bar input {
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Outfit', sans-serif;
  font-size: .82rem;
  background: var(--bg-card);
  color: var(--text);
  outline: none;
  transition: all .2s var(--ease);
}

.search-bar input::placeholder { color: var(--text-muted); }
.search-bar input:focus { border-color: var(--amber-dim); box-shadow: 0 0 0 3px rgba(196,164,120,.08), var(--shadow-glow); }

.category-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.cat-tab {
  font-family: 'Outfit', sans-serif;
  font-size: .7rem;
  font-weight: 500;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .15s var(--ease);
}

.cat-tab:hover { border-color: var(--border-hover); color: var(--text); background: var(--bg-card); }
.cat-tab.active { background: var(--amber); color: var(--bg-deep); border-color: var(--amber); font-weight: 600; }
.cat-tab:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
  cursor: pointer;
  transition: all .2s var(--ease);
  position: relative;
  overflow: hidden;
}

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196,164,120,.06) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .2s;
}

.product-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.product-card:hover::after { opacity: 1; }
.product-card:active { transform: translateY(0) scale(.97); transition: all .08s; }
.product-card.unavailable { opacity: .3; pointer-events: none; }
.product-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.product-name { font-weight: 500; font-size: .8rem; margin-bottom: var(--sp-1); position: relative; z-index: 1; }
.product-price { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--amber); font-weight: 600; position: relative; z-index: 1; }
.product-variants { font-size: .58rem; color: var(--text-muted); margin-top: var(--sp-1); position: relative; z-index: 1; }

/* ═══ TICKET PANEL ═══ */
.billing-ticket {
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: relative;
}

.billing-ticket::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(196,164,120,.03) 0%, transparent 100%);
  pointer-events: none;
}

.ticket-top { padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--border); position: relative; }
.ticket-header { display: flex; justify-content: space-between; align-items: center; }
.ticket-header h3 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: .95rem; }
.ticket-number { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--amber-dim); letter-spacing: 1px; }
.ticket-table-info { font-size: .68rem; color: var(--text-muted); margin-top: var(--sp-1); font-family: 'JetBrains Mono', monospace; }

.held-orders-bar { margin-top: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.held-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  padding: var(--sp-1) var(--sp-3);
  background: rgba(196,164,120,.08);
  border: 1px solid var(--amber-dim);
  border-radius: 20px;
  color: var(--amber);
  cursor: pointer;
  transition: all .12s var(--ease);
}
.held-chip:hover { background: rgba(196,164,120,.2); transform: scale(1.03); }

.order-items { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); position: relative; }
.order-items::-webkit-scrollbar { width: 3px; }
.order-items::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 2px; }

.empty-order { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; opacity: .3; font-size: .78rem; gap: var(--sp-3); color: var(--text-muted); }
.empty-order::before { content: '☕'; font-size: 2rem; filter: grayscale(.5); }

.order-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  animation: itemSlide .2s var(--ease) both;
}

@keyframes itemSlide { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

.order-item-name { font-size: .78rem; font-weight: 400; }
.order-item-note { font-size: .58rem; color: var(--amber-dim); cursor: pointer; margin-top: 2px; transition: color .1s; }
.order-item-note:hover { color: var(--amber); }

.order-item-qty { display: flex; align-items: center; gap: var(--sp-2); }

.qty-btn {
  width: 24px; height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s var(--ease);
}

.qty-btn:hover { background: var(--amber); color: var(--bg-deep); border-color: var(--amber); transform: scale(1.1); }
.qty-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.qty-num { font-family: 'JetBrains Mono', monospace; font-size: .7rem; min-width: 14px; text-align: center; font-weight: 600; color: var(--text); }
.order-item-price { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 600; min-width: 50px; text-align: right; color: var(--amber); }

/* ═══ ORDER FOOTER ═══ */
.order-footer { border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-5) var(--sp-5); background: var(--bg-card); }

.discount-row { margin-bottom: var(--sp-3); }
.disc-btn {
  font-family: 'Outfit', sans-serif;
  font-size: .62rem;
  font-weight: 500;
  background: none;
  border: 1px dashed var(--amber-dim);
  color: var(--amber-dim);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 20px;
  cursor: pointer;
  transition: all .12s;
}
.disc-btn:hover { color: var(--amber); border-color: var(--amber); background: rgba(196,164,120,.06); }

.order-totals { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.total-row { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-secondary); }
.total-row.grand { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; font-weight: 600; color: var(--text); padding-top: var(--sp-3); border-top: 1px solid var(--border); }

.order-actions { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--sp-2); }

.btn {
  font-family: 'Outfit', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s var(--ease);
}

.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: .6rem; }
.btn-hold { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); }
.btn-hold:hover { background: var(--bg-surface); color: var(--text); border-color: var(--border-hover); }
.btn-clear { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn-clear:hover { background: var(--danger); color: var(--text); }
.btn-pay { background: linear-gradient(135deg, var(--amber) 0%, var(--amber-glow) 100%); color: var(--bg-deep); }
.btn-pay:hover { box-shadow: 0 4px 16px rgba(196,164,120,.3); transform: translateY(-1px); }
.btn-pay:active { transform: translateY(0) scale(.97); }
.full-w { width: 100%; }

/* ═══ MODALS ═══ */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.modal-box {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: var(--sp-7);
  border-radius: var(--radius);
  width: 380px;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(196,164,120,.05);
  animation: modalIn .25s var(--ease-bounce) both;
}
.modal-box.sm { width: 300px; }
.modal-box h3 { font-family: 'Playfair Display', serif; font-weight: 600; margin-bottom: var(--sp-5); }

@keyframes modalIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-box label { display: block; font-size: .7rem; font-weight: 500; margin-bottom: var(--sp-3); color: var(--text-secondary); }
.modal-box input[type="text"],
.modal-box input[type="number"] {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-size: .8rem;
  margin-top: var(--sp-1);
  outline: none;
  background: var(--bg-surface);
  color: var(--text);
  transition: border-color .15s;
}

.modal-box input:focus { border-color: var(--amber-dim); box-shadow: 0 0 0 3px rgba(196,164,120,.06); }
.toggle-label { display: flex !important; align-items: center; gap: var(--sp-3); flex-direction: row; }

.pay-total { font-family: 'JetBrains Mono', monospace; font-size: 2rem; font-weight: 600; text-align: center; margin-bottom: var(--sp-6); color: var(--amber-glow); text-shadow: 0 0 30px rgba(196,164,120,.2); }

.pay-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-6); }
.pay-method {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  font-family: 'Outfit', sans-serif;
  font-size: .62rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .12s var(--ease);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.pay-method:hover { border-color: var(--border-hover); color: var(--text); }
.pay-method.active { background: var(--amber); color: var(--bg-deep); border-color: var(--amber); }
.pay-method:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.split-fields { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.split-fields label { display: flex; align-items: center; gap: var(--sp-3); font-family: 'JetBrains Mono', monospace; font-size: .68rem; }
.split-fields input { width: 100px; padding: 6px 8px; }
.split-remaining { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--danger); margin-top: var(--sp-2); }

.disc-options { display: flex; gap: var(--sp-5); margin-bottom: var(--sp-4); font-size: .73rem; color: var(--text-secondary); }
.disc-options input[type="radio"] { accent-color: var(--amber); }
.disc-input { width: 100%; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: var(--sp-5); outline: none; font-family: 'JetBrains Mono', monospace; background: var(--bg-surface); color: var(--text); }
.disc-input:focus { border-color: var(--amber-dim); }

/* ═══ TABLES ═══ */
.tables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: var(--sp-4); padding: var(--sp-6); }

.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  cursor: pointer;
  transition: all .2s var(--ease);
  position: relative;
  overflow: hidden;
}

.table-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(196,164,120,.04) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .3s;
}

.table-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.table-card:hover::before { opacity: 1; }
.table-card.occupied { border-color: var(--amber-dim); }
.table-card.occupied::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--amber), var(--amber-glow)); }
.table-card .t-num { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.4rem; }
.table-card .t-status { display: none; }
.table-card.occupied .t-status { display: none; }
.table-card .t-amount { font-family: 'JetBrains Mono', monospace; font-size: .65rem; margin-top: var(--sp-2); color: var(--text-muted); }

/* ═══ KITCHEN ═══ */
.kitchen-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-6) var(--sp-6) 0; }
.kitchen-header h3 { font-family: 'Playfair Display', serif; font-weight: 600; }

.kitchen-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); }

.kot-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  animation: itemSlide .25s var(--ease) both;
}

.kot-card-items { padding: var(--sp-4); }

/* ═══ ORDERS ═══ */
.orders-tabs { display: flex; gap: var(--sp-2); padding: var(--sp-6) var(--sp-6) 0; }
.otab {
  font-family: 'Outfit', sans-serif;
  font-size: .65rem;
  font-weight: 500;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .12s var(--ease);
}
.otab:hover { border-color: var(--border-hover); color: var(--text); }
.otab.active { background: var(--amber); color: var(--bg-deep); border-color: var(--amber); font-weight: 600; }

.orders-list { padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }

.o-status.active { background: rgba(196,164,120,.12); color: var(--amber); }
.o-status.completed { background: rgba(106,191,123,.1); color: var(--success); }
.o-status.cancelled { background: rgba(212,95,95,.1); color: var(--danger); }

/* ═══ MENU MGMT ═══ */
.mgmt-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-6); }
.mgmt-header h3 { font-family: 'Playfair Display', serif; font-weight: 600; }

.avail-toggle {
  width: 36px; height: 20px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: all .2s var(--ease);
}
.avail-toggle.on { background: var(--success); border-color: var(--success); }
.avail-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text);
  transition: transform .2s var(--ease-bounce);
}
.avail-toggle.on::after { transform: translateX(16px); }
.avail-toggle:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.edit-btn {
  font-family: 'Outfit', sans-serif;
  font-size: .6rem;
  font-weight: 500;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .12s;
}
.edit-btn:hover { border-color: var(--amber); color: var(--amber); }

/* ═══ TOAST ═══ */
.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--bg-card);
  border: 1px solid var(--amber-dim);
  color: var(--amber-glow);
  font-family: 'Outfit', sans-serif;
  font-size: .75rem;
  font-weight: 500;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg), 0 0 30px rgba(196,164,120,.1);
  opacity: 0;
  transition: all .3s var(--ease-bounce);
  z-index: 300;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ REPORTS — ENHANCED ═══ */
.reports-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-6) var(--sp-6) 0; }
.reports-header h3 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.1rem; }
.report-date { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--text-muted); }

.reports-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); padding: var(--sp-5) var(--sp-6); }

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--amber-glow));
  opacity: .6;
}

.stat-label { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: var(--sp-2); }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.4rem; font-weight: 600; color: var(--amber-glow); }

.reports-charts { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-4); padding: 0 var(--sp-6); }
.reports-details { padding: var(--sp-4) var(--sp-6) var(--sp-6); }

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.chart-card--wide { grid-column: 1 / -1; }
.chart-card h4 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: .82rem; margin-bottom: var(--sp-4); }

.chart-scroll { overflow-x: auto; padding-bottom: var(--sp-2); }
.chart-scroll::-webkit-scrollbar { height: 3px; }
.chart-scroll::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 2px; }

.bar-chart { width: 100%; height: 140px; min-width: 300px; }

.bar-group {
  animation: barGrow .4s var(--ease) both;
}

@keyframes barGrow {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.donut-wrap { display: flex; align-items: center; gap: var(--sp-5); }
.donut-chart { width: 100px; height: 100px; transform: rotate(-90deg); flex-shrink: 0; }

.donut-chart text { transform: rotate(90deg); transform-origin: center; }

.donut-seg {
  animation: donutDraw .6s var(--ease) both;
}

@keyframes donutDraw {
  from { stroke-dasharray: 0 999; opacity: 0; }
}

.donut-legend { display: flex; flex-direction: column; gap: var(--sp-2); }
.legend-item { display: flex; align-items: center; gap: var(--sp-2); font-size: .68rem; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-val { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--text-muted); }

/* Top sellers horizontal bars */
.top-sellers-list { display: flex; flex-direction: column; gap: var(--sp-3); }

.ts-row {
  display: grid;
  grid-template-columns: 20px 100px 1fr 36px;
  align-items: center;
  gap: var(--sp-3);
  animation: itemSlide .3s var(--ease) both;
}

.ts-rank { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--text-muted); text-align: center; }
.ts-name { font-size: .72rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-bar-wrap { height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; }
.ts-bar { height: 100%; background: linear-gradient(90deg, var(--amber), var(--amber-glow)); border-radius: 3px; transition: width .6s var(--ease); }
.ts-qty { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--amber); text-align: right; }

/* ═══ MENU MGMT — ENHANCED ═══ */
.mgmt-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-6) var(--sp-6) 0; }
.mgmt-header h3 { font-family: 'Playfair Display', serif; font-weight: 600; }
.mgmt-actions { display: flex; gap: var(--sp-2); }

.mgmt-categories { display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); flex-wrap: wrap; }

.mgmt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
  padding: 0 var(--sp-6) var(--sp-6);
}

.mgmt-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: all .2s var(--ease);
  position: relative;
  overflow: hidden;
}

.mgmt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber));
  opacity: 0;
  transition: opacity .2s;
}

.mgmt-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.mgmt-card:hover::before { opacity: 1; }
.mgmt-card--off { opacity: .45; }
.mgmt-card--off:hover { opacity: .7; }

.mgmt-card-top { display: flex; justify-content: space-between; align-items: center; }

.mgmt-card-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--amber);
  background: rgba(196,164,120,.08);
  padding: 3px 8px;
  border-radius: 10px;
}

.mgmt-card-body { flex: 1; }
.mgmt-card-name { font-size: .85rem; font-weight: 600; margin-bottom: var(--sp-1); }

.mgmt-card-variants {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.mgmt-card-variants span {
  font-size: .55rem;
  padding: 2px 6px;
  background: var(--bg-elevated);
  border-radius: 8px;
  color: var(--text-secondary);
}

.mgmt-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.mgmt-card-price { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 600; color: var(--amber); }
.mgmt-card-actions { display: flex; gap: var(--sp-1); }

.edit-btn.del { color: var(--danger); border-color: transparent; }
.edit-btn.del:hover { border-color: var(--danger); color: var(--danger); }

/* ═══ TABLES — ENHANCED ═══ */
.tables-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-6) var(--sp-6) 0; }
.tables-header h3 { font-family: 'Playfair Display', serif; font-weight: 600; }
.tables-legend { display: flex; gap: var(--sp-4); font-size: .65rem; color: var(--text-muted); }
.legend-free { color: var(--success); }
.legend-occ { color: var(--warning); }

.tables-grid { padding: var(--sp-5) var(--sp-6); }

.table-card { position: relative; padding: var(--sp-7) var(--sp-5) var(--sp-5); }

.t-timer {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 8px;
}

.t-status-dot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: var(--sp-3);
  color: var(--text-muted);
}

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.dot.occupied { background: var(--warning); animation: pulse 2s ease infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.t-close-btn {
  margin-top: var(--sp-3);
  font-family: 'Outfit', sans-serif;
  font-size: .58rem;
  font-weight: 500;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--danger);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  transition: all .12s;
}

.t-close-btn:hover { background: var(--danger); color: var(--text); }

/* ═══ KITCHEN — ENHANCED ═══ */
.kitchen-meta { display: flex; align-items: center; gap: var(--sp-4); }
.kitchen-count { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--amber); }

.kot-card { display: flex; flex-direction: column; }

.kot-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}

.kot-id-wrap { display: flex; align-items: center; gap: var(--sp-3); }
.kot-id { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 600; color: var(--amber); }
.kot-badge {
  font-size: .55rem;
  padding: 2px 7px;
  background: rgba(196,164,120,.1);
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
}

.kot-time-wrap { display: flex; align-items: center; }
.kot-elapsed { font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: var(--text-muted); }
.kot-elapsed.urgent { color: var(--danger); font-weight: 600; }

.kot-card-items { padding: var(--sp-4); flex: 1; }

.kot-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: .76rem;
}

.kot-item:last-child { border-bottom: none; }
.kot-item-qty { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--amber); font-weight: 600; min-width: 22px; }
.kot-item-name { flex: 1; }
.kot-item-note { font-size: .62rem; color: var(--amber-dim); font-style: italic; }

.kot-card-footer { border-top: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); }

.kot-progress {
  height: 3px;
  background: var(--bg-elevated);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.kot-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--amber-dim), var(--amber));
  border-radius: 2px;
  transition: width 1s linear;
}

.kot-urgent .kot-progress-bar { background: linear-gradient(90deg, var(--danger), #e87070); }
.kot-urgent { border-color: rgba(212,95,95,.3); }

.kot-card-actions { display: flex; gap: var(--sp-2); }

.kitchen-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  opacity: .4;
}

.kitchen-empty-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(106,191,123,.15);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: var(--sp-3);
}

.kitchen-empty p { font-size: .8rem; color: var(--text-muted); }

/* ═══ ORDERS — ENHANCED ═══ */
.orders-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-6) var(--sp-6) 0; }
.orders-summary { font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: var(--text-muted); }
.orders-count { background: var(--bg-card); padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border); }

.order-card-v2 {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all .15s var(--ease);
}

.order-card-v2:hover { border-color: var(--border-hover); }
.order-card-v2.expanded { border-color: var(--amber-dim); }

.oc-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
}

.oc-left { display: flex; flex-direction: column; gap: 2px; }
.oc-id { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 600; color: var(--amber); }
.oc-time { font-family: 'JetBrains Mono', monospace; font-size: .58rem; color: var(--text-muted); }

.oc-center { display: flex; flex-direction: column; gap: 2px; }
.oc-preview { font-size: .72rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-table { font-family: 'JetBrains Mono', monospace; font-size: .58rem; color: var(--text-muted); }

.oc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.oc-total { font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 600; }

.oc-details {
  border-top: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  animation: expandIn .2s var(--ease);
  cursor: default;
}

@keyframes expandIn { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 400px; } }

.oc-items-list { margin-bottom: var(--sp-3); }
.oc-detail-item { display: flex; justify-content: space-between; font-size: .72rem; padding: var(--sp-1) 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); }

.oc-detail-totals { margin-bottom: var(--sp-3); padding-top: var(--sp-2); }
.oc-dt-row { display: flex; justify-content: space-between; font-size: .68rem; color: var(--text-muted); padding: 2px 0; }
.oc-dt-row.grand { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text); font-size: .78rem; border-top: 1px solid var(--border); padding-top: var(--sp-2); margin-top: var(--sp-2); }

.oc-detail-meta { font-size: .62rem; color: var(--text-muted); margin-bottom: var(--sp-3); text-transform: uppercase; letter-spacing: .5px; }
.oc-detail-actions { display: flex; gap: var(--sp-2); }

.orders-empty { display: flex; align-items: center; justify-content: center; padding: var(--sp-8); opacity: .35; font-size: .78rem; }

/* ═══ SHIFT BAR ═══ */
.shift-bar { display: flex; align-items: center; gap: var(--sp-3); }
.shift-active { font-family: 'JetBrains Mono', monospace; font-size: .6rem; color: var(--success); background: rgba(106,191,123,.08); padding: 4px 10px; border-radius: 12px; }

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .billing-layout { grid-template-columns: 1fr 320px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr 56px;
  }

  /* Sidebar → bottom nav */
  .sidebar {
    grid-row: 3;
    flex-direction: row;
    padding: 0 8px;
    border-right: none;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    gap: 0;
    z-index: 50;
    position: relative;
  }

  .sidebar-brand, .nav-footer { display: none; }
  .nav-items { flex-direction: row; gap: 0; padding: 0; }

  .nav-btn {
    width: auto;
    min-width: 56px;
    padding: 8px 10px;
    font-size: .48rem;
  }

  .nav-btn::before { display: none; }
  .nav-btn svg { width: 18px; height: 18px; }

  /* Header */
  .top-bar { padding: 0 16px; }
  .header-left h2 { font-size: .95rem; }
  .shift-bar { display: none; }

  /* Content area must not overflow behind bottom nav */
  .content-area { overflow-y: auto; height: calc(100vh - 112px); }
  .view { height: auto; overflow-y: visible; }
  .view.active { display: flex; flex-direction: column; }

  /* Billing → stacked */
  .billing-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; overflow-y: auto; }

  .billing-menu { padding: 16px; gap: 12px; overflow-y: visible; max-height: none; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .product-card { padding: 12px 10px; }
  .product-name { font-size: .72rem; }
  .product-price { font-size: .68rem; }

  .billing-ticket {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: none;
    overflow-y: visible;
    padding-bottom: 8px;
  }

  .ticket-top { padding: 12px 14px 10px; }
  .order-items { padding: 10px 14px; max-height: 150px; overflow-y: auto; }
  .order-footer { padding: 12px 14px; }

  /* Category tabs scroll */
  .category-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .category-tabs::-webkit-scrollbar { display: none; }
  .cat-tab { white-space: nowrap; flex-shrink: 0; }

  /* Tables */
  .tables-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; padding: 16px; padding-bottom: 16px; }
  .tables-header { padding: 16px 16px 0; }

  /* Kitchen */
  .kitchen-board { grid-template-columns: 1fr; padding: 12px 16px; }
  .kitchen-header { padding: 16px 16px 0; }

  /* Orders */
  .orders-header { padding: 16px 16px 0; flex-direction: column; align-items: flex-start; gap: 8px; }
  .orders-list { padding: 12px 16px; }
  .order-card-v2 .oc-main { grid-template-columns: auto 1fr auto; gap: 10px; padding: 12px 14px; }
  .oc-preview { max-width: 140px; }

  /* Menu mgmt */
  .mgmt-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: 0 16px 16px; }
  .mgmt-header { padding: 16px; }
  .mgmt-categories { padding: 8px 16px; }

  /* Reports */
  .reports-header { padding: 16px 16px 0; }
  .reports-stats { grid-template-columns: repeat(2, 1fr); padding: 12px 16px; }
  .reports-charts { grid-template-columns: 1fr; padding: 0 16px; }
  .reports-details { padding: 12px 16px; }
  .stat-value { font-size: 1.1rem; }

  /* Modals → fullscreen on mobile */
  .modal-box { width: 92vw; max-height: 85vh; overflow-y: auto; padding: 20px; }
  .modal-box.sm { width: 88vw; }
  .pay-methods { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .billing-menu { max-height: 50vh; padding: 12px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .product-card { padding: 10px 8px; }
  .product-name { font-size: .65rem; }

  .order-actions { grid-template-columns: 1fr 1fr 1fr; }
  .btn { padding: 10px 8px; font-size: .6rem; }

  .tables-grid { grid-template-columns: repeat(3, 1fr); }
  .mgmt-grid { grid-template-columns: 1fr; }

  .reports-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 14px; }

  .ts-row { grid-template-columns: 16px 80px 1fr 28px; }
}

/* Admin link */
a.nav-btn { text-decoration: none; color: var(--amber); }
a.nav-btn:hover { background: rgba(196,164,120,.1); }