@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #2563eb;
  --emerald: #059669;
  --rose: #e11d48;
  --amber: #d97706;
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

html {
  height: 100%;
  height: -webkit-fill-available;
  overflow: hidden;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f1f5f9;
  user-select: none;
  height: 100%;
  height: 100dvh;
  height: -webkit-fill-available;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* ===== APP HEADER (Chống tràn Dynamic Island & Tai thỏ iPhone) ===== */
.app-header {
  padding-top: env(safe-area-inset-top, 0px);
  min-height: calc(3.5rem + env(safe-area-inset-top, 0px));
}
@media (min-width: 1024px) {
  .app-header {
    padding-top: 0;
    min-height: 4rem;
  }
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== TAB ANIMATION ===== */
.tab-content { display: none; animation: slideFade .18s cubic-bezier(.16,1,.3,1); }
.tab-content.active { display: block; }
@keyframes slideFade {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== MODAL ===== */
.modal-backdrop {
  backdrop-filter: blur(4px);
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.modal-sheet { animation: slideUp .22s cubic-bezier(.16,1,.3,1); }
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ===== BOTTOM NAV ===== */
.mobile-bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px -2px rgba(0,0,0,.08);
}
.bottom-nav-item.active { color: #2563eb; }
.bottom-nav-item.active .nav-pill {
  background: #eff6ff;
  transform: translateY(-2px);
}

/* ===== CONTENT PADDING (avoid bottom nav overlap) ===== */
.content-pad { padding-bottom: 96px; }
@media (min-width: 1024px) { .content-pad { padding-bottom: 24px; } }

/* ===== INVENTORY LIST ===== */
.product-row { transition: background .12s; }
.product-row:active { background: #f8fafc; }
.product-row.low-stock { background: #fff7f7; }
.product-row.low-stock .stock-badge { background: #fee2e2; color: #be123c; }
.product-row .stock-badge { background: #f0fdf4; color: #15803d; }
.detail-panel { animation: slideFade .15s ease; }

/* ===== RECEIPT ROW ===== */
.receipt-row + .receipt-row { border-top: 1px solid #f1f5f9; }

/* ===== STATUS BADGES ===== */
.badge-cash     { background: #ecfdf5; color: #065f46; }
.badge-transfer { background: #eff6ff; color: #1e40af; }
.badge-debt     { background: #fff7ed; color: #9a3412; }

/* ===== TOAST ANIMATION ===== */
.toast-pill {
  animation: toastPop .2s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.18), 0 8px 10px -6px rgba(0,0,0,0.1);
}
@keyframes toastPop {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== PAYMENT RADIO CARDS ===== */
.pay-option input[type=radio]:checked ~ .pay-label {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1e40af;
}
.pay-label { transition: all .12s; }

/* ===== PRINT ===== */
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; left: 0; top: 0; width: 100%; padding: 16px; background: white; }
  .no-print { display: none !important; }
}

/* =========================================================================
   SENIOR MODE (CHẾ ĐỘ DỄ NHÌN / CHỮ LỚN - TINH GỌN, KHÔNG BỊ VỠ KHUNG)
   ========================================================================= */
body.senior-mode {
  font-size: 15.5px;
}

/* 1. Nâng cao độ tương phản màu chữ để dễ đọc */
body.senior-mode .text-slate-400 {
  color: #475569 !important;
}
body.senior-mode .text-slate-500 {
  color: #1e293b !important;
}

/* 2. Cỡ chữ to rõ cho tên hàng, giá tiền, số lượng */
body.senior-mode .product-name,
body.senior-mode .pos-item-name {
  font-size: 15px !important;
  font-weight: 700 !important;
}
body.senior-mode .stock-badge {
  font-size: 14px !important;
  padding: 4px 10px !important;
  font-weight: 800 !important;
}

/* 3. Nút bấm thao tác chính & Nút điều chỉnh số lượng */
body.senior-mode .stepper-btn,
body.senior-mode .qty-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.senior-mode .btn-checkout,
body.senior-mode form button[type="submit"] {
  min-height: 46px !important;
  font-size: 15px !important;
}

/* Ô nhập liệu */
body.senior-mode input[type="text"]:not(.inline-input),
body.senior-mode input[type="number"]:not(.inline-input),
body.senior-mode select {
  font-size: 15px !important;
}

/* Thanh điều hướng dưới mobile */
body.senior-mode .mobile-bottom-nav {
  height: 68px !important;
}
body.senior-mode .mobile-bottom-nav span {
  font-size: 11px !important;
  font-weight: 700 !important;
}
body.senior-mode .mobile-bottom-nav i {
  font-size: 17px !important;
}

/* Hàng danh sách thoáng mắt */
body.senior-mode .product-row {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}