/* ============================================
   FN8POS — App Shell (Full Responsive Overhaul)
   Mobile drawer sidebar, cart sheet, all layouts
   ============================================ */

/* ═══ App Shell ═══ */
.app-shell {
  display: flex; height: 100vh; height: 100dvh;
  overflow: hidden; position: fixed; inset: 0;
}

/* ═══ Sidebar ═══ */
.sidebar {
  width: 224px; flex-shrink: 0; background: var(--bg1);
  border-right: 1px solid var(--bd); display: flex; flex-direction: column;
  transition: width .25s ease, transform .3s ease;
  z-index: 60;
}
.sidebar.collapsed { width: 62px; }
.sidebar-logo {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--bd); cursor: pointer; height: 56px; flex-shrink: 0;
}
.sidebar.collapsed .sidebar-logo { justify-content: center; padding: 14px 0; }
.sidebar.collapsed .sidebar-logo-text { display: none; }
.sidebar-logo-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--em), #86efac);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--bg); flex-shrink: 0;
}
.sidebar-logo-name { font-size: 16px; font-weight: 800; color: var(--t); white-space: nowrap; }
.sidebar-logo-sub { font-size: 10px; color: var(--t4); white-space: nowrap; }
.sidebar-nav { flex: 1; padding: 8px; overflow-y: auto; }
.sidebar-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 42px;
  padding: 0 12px; border-radius: 8px; border: none; font-size: 13px;
  font-weight: 500; color: var(--t3); background: transparent; cursor: pointer;
  transition: var(--tr); margin-bottom: 1px; font-family: var(--ff);
}
.sidebar-item:hover { color: var(--t1); background: var(--bg3); }
.sidebar-item.active { background: var(--em9); color: var(--em); font-weight: 700; }
.sidebar-item .sb-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar.collapsed .sidebar-item { justify-content: center; padding: 0; }
.sidebar.collapsed .sidebar-item .sb-label { display: none; }
.sidebar-bottom { padding: 12px; border-top: 1px solid var(--bd); flex-shrink: 0; }
.sidebar.collapsed .sidebar-bottom-content { display: none; }
.sidebar-plan { padding: 10px; border-radius: var(--r); background: var(--em9); border: 1px solid var(--em3); margin-bottom: 8px; }

/* Sidebar overlay for mobile */
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

/* ═══ Main Area ═══ */
.main-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* ═══ Topbar ═══ */
.topbar {
  height: 52px; border-bottom: 1px solid var(--bd); display: flex;
  align-items: center; justify-content: space-between; padding: 0 20px;
  background: var(--bg1); flex-shrink: 0; gap: 8px;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar-clock { font-size: 13px; color: var(--t3); font-family: var(--fm); }
.topbar-bell { position: relative; cursor: pointer; font-size: 17px; padding: 4px; }
.topbar-bell-count {
  position: absolute; top: -3px; right: -5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--rd); font-size: 8px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.topbar-avatar {
  width: 32px; height: 32px; border-radius: var(--r); background: var(--em9);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--em); cursor: pointer; flex-shrink: 0;
}

/* Hamburger in topbar for mobile */
.topbar-hamburger {
  display: none; width: 36px; height: 36px; border-radius: var(--r);
  background: var(--bg3); border: 1px solid var(--bd); color: var(--t);
  font-size: 18px; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}

/* ═══ Page Content ═══ */
.page-content { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; position: relative; }
/* When POS/KDS is active, page-content must NOT scroll — the inner layout handles its own scroll */
.page-content.full-page { overflow: hidden; }
.page-content:has(.pos-layout),
.page-content:has(.kds-layout) { overflow: hidden; }
.page-pad { padding: 24px; }
.page-title { font-size: 20px; font-weight: 800; color: var(--t); margin-bottom: 4px; }
.page-sub { font-size: 13px; color: var(--t3); margin-bottom: 20px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.stats-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.stats-row .card { flex: 1; min-width: 150px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

/* ═══════════════════════════════════════
   POS Layout — Fixed & Responsive
   ═══════════════════════════════════════ */
.pos-layout {
  display: flex; height: 100%; overflow: hidden;
  position: absolute; inset: 0;
}
.pos-menu-area {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}
.pos-topbar {
  padding: 8px 12px; border-bottom: 1px solid var(--bd);
  display: flex; gap: 5px; align-items: center;
  flex-shrink: 0; flex-wrap: wrap;
  background: var(--bg1);
}
.pos-type-btn {
  height: 32px; padding: 0 14px; border-radius: 99px; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: var(--ff); transition: all .2s ease; flex-shrink: 0;
}
.pos-type-btn.active {
  background: var(--em); color: var(--bg);
  box-shadow: 0 2px 10px rgba(34,197,94,.2);
}
.pos-type-btn:not(.active) { background: var(--bg3); color: var(--t3); }
.pos-type-btn:not(.active):hover { background: var(--bg4); color: var(--t1); }

.pos-categories {
  padding: 6px 12px; border-bottom: 1px solid var(--bd);
  display: flex; gap: 4px; overflow-x: auto; flex-shrink: 0;
  -webkit-overflow-scrolling: touch; background: var(--bg);
}
.pos-categories::-webkit-scrollbar { height: 0; }
.pos-cat-btn {
  height: 30px; padding: 0 12px; border-radius: 7px; border: none;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  font-family: var(--ff); transition: all .2s ease; display: flex;
  align-items: center; gap: 4px; flex-shrink: 0;
}
.pos-cat-btn.active { background: var(--em9); color: var(--em); box-shadow: inset 0 0 0 1px var(--em3); }
.pos-cat-btn:not(.active) { background: transparent; color: var(--t4); }
.pos-cat-btn:not(.active):hover { background: var(--bg3); color: var(--t2); }
.pos-cat-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 9px; font-size: 10px;
  font-weight: 700; padding: 0 4px;
}
.pos-cat-btn.active .pos-cat-count { background: var(--em); color: var(--bg); }
.pos-cat-btn:not(.active) .pos-cat-count { background: var(--bg4); color: var(--t3); }

/* ── Product Grid — flex wrap, fixed card size, always scrollable ── */
.pos-products {
  flex: 1 1 0%;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  display: flex; flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}

/* ── Product Card — fixed width & height, always shows name + price ── */
.pos-product {
  width: 160px; height: 210px;
  display: flex; flex-direction: column;
  border-radius: 10px; border: 1.5px solid var(--bd);
  background: var(--bg2);
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .2s, background .2s, box-shadow .25s, transform .25s;
  flex-shrink: 0;
}
.pos-product:hover {
  border-color: var(--bd2); background: var(--bg3);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.pos-product:active { transform: scale(.96); transition-duration: .08s; }
.pos-product.in-cart {
  border-color: var(--em3); background: var(--em9);
  box-shadow: 0 0 0 1px rgba(34,197,94,.08);
}
.pos-product .p-img-wrap {
  width: 100%; height: 100px; overflow: hidden;
  background: var(--bg3); flex-shrink: 0;
}
.pos-product .p-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.pos-product:hover .p-img-wrap img { transform: scale(1.05); }
.pos-product .p-body {
  padding: 8px 10px 10px;
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.pos-product .p-name {
  font-size: 12.5px; font-weight: 700; color: var(--t); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 2px;
}
.pos-product .p-desc {
  font-size: 10px; color: var(--t4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pos-product .p-cat {
  font-size: 9.5px; font-weight: 600; color: var(--t3);
  display: flex; align-items: center; gap: 3px;
}
.pos-product .p-price {
  font-size: 13px; font-weight: 800; color: var(--em);
  font-family: var(--fm); margin-top: auto; padding-top: 3px;
}
.pos-product .p-badge {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--em); color: var(--bg);
  font-size: 11px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 8px rgba(34,197,94,.3); z-index: 2;
}
/* Quick add flash */
.pos-product .p-added {
  position: absolute; inset: 0; background: rgba(34,197,94,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; z-index: 3; pointer-events: none;
  animation: addedFlash .45s ease forwards;
}
@keyframes addedFlash {
  0%   { opacity: 1; transform: scale(.8); }
  50%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.2); }
}
/* Sold out product */
.pos-sold-out { opacity: .45; cursor: not-allowed; pointer-events: none; }
.pos-sold-out .p-img-wrap { filter: grayscale(.7); }
.p-sold-label {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  background: rgba(239,68,68,.85); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  text-align: center; padding: 3px 0;
}

/* ═══ Cart ═══ */
.pos-cart {
  width: 340px; border-left: 1px solid var(--bd); display: flex;
  flex-direction: column; background: var(--bg1); flex-shrink: 0;
  transition: transform .3s ease;
}
.pos-cart-header {
  padding: 8px 12px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; flex-shrink: 0;
}
.pos-cart-items {
  flex: 1 1 0%; overflow-y: auto; padding: 8px;
  -webkit-overflow-scrolling: touch;
}
.pos-cart-empty { text-align: center; padding: 40px 16px; color: var(--t4); }
.pos-ci {
  background: var(--bg2); border: 1px solid var(--bd); border-radius: var(--r);
  padding: 10px; margin-bottom: 6px;
  transition: border-color .15s;
}
.pos-ci:hover { border-color: var(--bd2); }
.pos-ci-top { display: flex; gap: 10px; align-items: center; }
.pos-ci-img {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  flex-shrink: 0; background: var(--bg3);
}
.pos-ci-info { flex: 1; min-width: 0; }
.pos-ci-name { font-size: 12.5px; font-weight: 700; color: var(--t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-ci-note {
  font-size: 10px; color: var(--am); margin-top: 2px; font-weight: 500;
  background: rgba(245,158,11,.06); padding: 2px 6px; border-radius: 4px;
  display: inline-block;
}
.pos-ci-total { font-size: 13px; font-weight: 700; color: var(--em); font-family: var(--fm); white-space: nowrap; }
.pos-ci-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.pos-ci-unit { font-size: 11px; color: var(--t4); font-family: var(--fm); }
.qty-wrap { display: flex; gap: 4px; align-items: center; }
.qty-btn {
  width: 32px; height: 32px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; font-size: 15px;
  font-weight: 700; cursor: pointer; font-family: var(--ff);
  transition: all .15s ease; border: none;
}
.qty-btn.m { background: var(--bg4); color: var(--t1); border: 1px solid var(--bd1); }
.qty-btn.m:hover { background: var(--bg5); }
.qty-btn.p { background: var(--em); color: var(--bg); }
.qty-btn.p:hover { background: var(--em2); }
.qty-num { min-width: 24px; text-align: center; font-size: 14px; font-weight: 800; color: var(--t); font-family: var(--fm); }

.pos-disc {
  padding: 8px 12px; border-top: 1px solid var(--bd);
  display: flex; gap: 4px; align-items: center; flex-shrink: 0; flex-wrap: wrap;
}
.pos-totals { padding: 14px; border-top: 1px solid var(--bd); background: var(--bg); flex-shrink: 0; }
.pos-tl { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12px; color: var(--t3); }
.pos-tl .v { font-family: var(--fm); }
.pos-tl.disc { color: var(--am); }
.pos-tl.big {
  font-size: 20px; font-weight: 800; color: var(--t);
  margin-top: 8px; margin-bottom: 12px; padding-top: 8px;
  border-top: 1px solid var(--bd);
}
.pos-tl.big .v { color: var(--em); font-family: var(--fm); }

.pos-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pos-pay-btn {
  height: 48px; border-radius: var(--r); border: 1px solid var(--bd);
  background: var(--bg2); color: var(--t2); font-size: 11px; font-weight: 700;
  cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; font-family: var(--ff);
  transition: all .2s ease;
}
.pos-pay-btn:hover {
  border-color: var(--em); color: var(--em); background: var(--emA);
}
.pos-pay-btn .pay-icon { font-size: 18px; line-height: 1; }

/* Mobile cart FAB */
.pos-cart-fab {
  display: none; position: fixed; bottom: 20px; right: 16px;
  z-index: 50; width: 56px; height: 56px; border-radius: 50%;
  background: var(--em); color: var(--bg); font-size: 22px;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(34,197,94,.35); border: none; cursor: pointer;
}
.pos-cart-fab:active { transform: scale(.9); }
.pos-cart-fab-count {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px;
  border-radius: 10px; background: var(--rd); color: #fff; font-size: 10px;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.pos-cart-overlay {
  display: none; position: fixed; inset: 0; z-index: 65;
  background: rgba(0,0,0,.5);
}
.pos-cart-overlay.open { display: block; }
.pos-cart-close-mobile {
  display: none; width: 36px; height: 36px; border-radius: var(--r);
  background: var(--bg4); color: var(--t); font-size: 16px;
  align-items: center; justify-content: center; cursor: pointer; border: none;
}

/* Success overlay */
.pay-ok {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6,8,8,.94); display: flex; align-items: center;
  justify-content: center; flex-direction: column;
  backdrop-filter: blur(12px); animation: fadeIn .3s;
  padding: 20px; text-align: center;
}
.pay-ok-ic {
  width: 80px; height: 80px; border-radius: 50%; background: var(--em9);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; margin-bottom: 20px;
}
.pay-ok-amount { font-size: 24px; font-weight: 800; color: var(--em); font-family: var(--fm); }
.pay-ok-method { font-size: 14px; color: var(--t3); margin-top: 6px; }
.pay-ok-print { font-size: 13px; color: var(--t4); margin-top: 20px; }

/* ═══ KDS — Professional Kitchen Display ═══ */
.kds-layout { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.kds-header {
  padding: 12px 16px; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; flex-wrap: wrap; gap: 8px; background: var(--bg1);
}
.kds-columns {
  flex: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 12px; overflow: hidden;
}
.kds-column { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r2); background: var(--bg1); border: 1px solid var(--bd); }
.kds-col-head {
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.kds-col-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px; -webkit-overflow-scrolling: touch; }
.kds-order {
  padding: 14px; border-radius: var(--r); background: var(--bg2);
  border: 1px solid var(--bd); border-left-width: 4px;
  transition: border-color .2s, box-shadow .2s;
}
.kds-order:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* ═══ Notif Dropdown ═══ */
.notif-wrap { position: relative; }
.notif-drop {
  position: absolute; top: calc(100% + 8px); right: -8px; width: 320px;
  background: var(--bg2); border: 1px solid var(--bd1); border-radius: var(--r2);
  box-shadow: 0 16px 48px rgba(0,0,0,.5); z-index: 200;
  display: none; max-height: 400px; overflow: hidden;
}
.notif-drop.open { display: block; }
.notif-head { padding: 12px 16px; border-bottom: 1px solid var(--bd); display: flex; justify-content: space-between; align-items: center; }
.notif-list { overflow-y: auto; max-height: 340px; }
.notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bd); cursor: pointer; }
.notif-item:hover { background: var(--bg3); }
.notif-item.unread { background: rgba(34,197,94,.03); }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--em); flex-shrink: 0; margin-top: 6px; }

/* ═══ Modal ═══ */
.modal-bg {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.modal-bg.show { display: flex; }
.modal-box {
  background: var(--bg2); border: 1px solid var(--bd1); border-radius: var(--r2);
  padding: 24px; width: min(500px, 100%); max-height: 85vh; overflow-y: auto;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-head h3 { font-size: 17px; font-weight: 800; color: var(--t); }
.modal-close {
  width: 36px; height: 36px; border-radius: var(--r); background: var(--bg4);
  color: var(--t3); font-size: 16px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; border: none; flex-shrink: 0;
}
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; gap: 8px; margin-top: 4px; }
.modal-actions .btn { flex: 1; }


/* ════════════════════════════════════════════
   RESPONSIVE — App
   ════════════════════════════════════════════ */

/* ─── Tablet (1024px) ─── */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    transform: translateX(-100%); z-index: 60;
    width: 260px;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 16px 0 48px rgba(0,0,0,.4);
  }
  .sidebar.collapsed { width: 260px; } /* Don't collapse on mobile */
  .sidebar.collapsed .sidebar-logo-text,
  .sidebar.collapsed .sidebar-item .sb-label,
  .sidebar.collapsed .sidebar-bottom-content { display: block; }
  .sidebar.collapsed .sidebar-logo { justify-content: flex-start; padding: 14px 16px; }
  .sidebar.collapsed .sidebar-item { justify-content: flex-start; padding: 0 12px; }

  .topbar-hamburger { display: flex; }
  .pos-cart { width: 300px; }
  .pos-product { width: 145px; height: 195px; }
  .pos-product .p-img-wrap { height: 90px; }

  /* Dashboard grids */
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* ─── Small tablet / Large phone (768px) ─── */
@media (max-width: 768px) {
  .page-pad { padding: 16px; }
  .page-title { font-size: 18px; }

  /* Dashboard chart row responsive */
  .dash-chart-row { grid-template-columns: 1fr !important; }

  /* POS: stack vertically, cart as sheet */
  .pos-layout { position: relative; inset: auto; flex-direction: column; height: 100%; }
  .pos-cart {
    position: fixed; bottom: 0; left: 0; right: 0;
    width: 100% !important; max-height: 75vh;
    border-left: none; border-top: 1px solid var(--bd);
    border-radius: var(--r3) var(--r3) 0 0;
    z-index: 70; transform: translateY(100%);
    box-shadow: 0 -16px 48px rgba(0,0,0,.4);
  }
  .pos-cart.mobile-open {
    transform: translateY(0);
  }
  .pos-cart-fab { display: flex; }
  .pos-cart-close-mobile { display: flex; }

  .pos-topbar { gap: 4px; padding: 6px 8px; }
  .pos-type-btn { height: 28px; padding: 0 10px; font-size: 11px; }
  .pos-products { padding: 8px; gap: 8px; }
  .pos-product { width: calc(50% - 4px); height: 185px; }
  .pos-product .p-img-wrap { height: 85px; }
  .pos-product .p-body { padding: 6px 8px 8px; }
  .pos-product .p-name { font-size: 12px; }
  .pos-product .p-desc { display: none; }
  .pos-product .p-cat { display: none; }
  .pos-product .p-price { font-size: 12px; }

  /* KDS: 2 columns */
  .kds-columns { grid-template-columns: 1fr 1fr; }

  /* Dashboard */
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stats-row .card { min-width: 130px; }

  /* Topbar adjustments */
  .topbar { padding: 0 12px; }
  .topbar-clock { display: none; }

  /* Notif dropdown full width */
  .notif-drop { position: fixed; top: 52px; left: 8px; right: 8px; width: auto; }

  /* Modal bottom sheet */
  .modal-bg { padding: 0; align-items: flex-end; }
  .modal-box {
    border-radius: var(--r2) var(--r2) 0 0;
    width: 100%; max-height: 90vh;
    padding-bottom: calc(20px + var(--sai-b));
  }
  .modal-row { grid-template-columns: 1fr; }
}

/* ─── Phone (480px) ─── */
@media (max-width: 480px) {
  .page-pad { padding: 12px; }
  .page-title { font-size: 16px; }
  .page-header { gap: 8px; }
  .page-header > div:last-child { width: 100%; }
  .page-header .tabs { width: 100%; }
  .page-header .btn { flex: 1; }

  .stats-row { gap: 8px; }
  .stats-row .card { min-width: 0; flex-basis: calc(50% - 4px); }

  .pos-products { padding: 6px; gap: 6px; }
  .pos-product { width: calc(50% - 3px); height: 170px; }
  .pos-product .p-img-wrap { height: 75px; }
  .pos-product .p-body { padding: 5px 7px 7px; }
  .pos-product .p-desc { display: none; }
  .pos-product .p-cat { display: none; }
  .pos-product .p-name { font-size: 11.5px; }
  .pos-product .p-price { font-size: 11.5px; padding-top: 2px; }

  .pos-tl.big { font-size: 16px; }
  .pos-pay-grid { grid-template-columns: repeat(2, 1fr); }
  .pos-cart-fab { bottom: 16px; right: 16px; width: 52px; height: 52px; font-size: 20px; }

  /* KDS single column */
  .kds-columns { grid-template-columns: 1fr; overflow-y: auto; }

  /* Tables grid */
  .table-wrap { border-radius: var(--r); }

  /* Stats compact */
  .stat-card .stat-value { font-size: 16px; }
  .stat-card .stat-label { font-size: 11px; }
}

/* ─── Very small phone (380px) ─── */
@media (max-width: 380px) {
  .pos-product { width: calc(50% - 3px); height: 160px; }
  .pos-product .p-img-wrap { height: 65px; }
  .pos-type-btn { padding: 0 10px; font-size: 10px; }
  .stats-row .card { flex-basis: 100%; }
}

/* ═══ Landscape phone fix ═══ */
@media (max-height: 500px) and (orientation: landscape) {
  .pos-cart { max-height: 90vh; }
  .pay-ok-ic { width: 56px; height: 56px; font-size: 28px; }
}