/* ==========================================
   Chị Ơi! — Global Responsive CSS
   Tương thích mọi kích thước điện thoại
   Mobile-first: 320px → 430px → tablet → desktop
   ========================================== */

/* ===== VIEWPORT & BASE RESET ===== */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(255, 126, 54, 0.1);
  scroll-behavior: smooth;
  touch-action: manipulation;       /* VĐ2+6: Chặn double-tap zoom, fix tap delay 300ms */
  overscroll-behavior: none;        /* VĐ4: Chặn bounce effect khi cuộn quá đầu/cuối */
  background-color: #fcf9f8;        /* VĐ4: Nền khi bounce không lộ màu lạ */
  height: 100%;                     /* VĐ1: Đảm bảo cuộn tự nhiên */
  scrollbar-width: none;            /* Ẩn scrollbar Firefox */
  -ms-overflow-style: none;         /* Ẩn scrollbar IE/Edge cũ */
}
html::-webkit-scrollbar {
  display: none;                    /* Ẩn scrollbar Chrome/Safari/Edge trên html */
}
body {
  overflow-x: hidden;
  overflow-y: auto;                 /* VĐ1: Cho phép cuộn bằng 1 ngón tay */
  -webkit-overflow-scrolling: touch;/* VĐ1: Smooth scroll iOS */
  overscroll-behavior-y: none;      /* VĐ4: Chặn vertical bounce */
  min-height: 100%;                 /* VĐ1: Body chiếm full chiều cao */
  scrollbar-width: none;            /* Ẩn scrollbar Firefox */
  -ms-overflow-style: none;         /* Ẩn scrollbar IE/Edge cũ */
}
body::-webkit-scrollbar {
  display: none;                    /* Ẩn scrollbar Chrome/Safari/Edge trên body */
}
/* Ẩn scrollbar toàn bộ app — giống app native */
*::-webkit-scrollbar {
  display: none !important;
}
* {
  scrollbar-width: none !important;
}

/* ===== SAFE AREA (Notch iPhone X+, Dynamic Island) ===== */
body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ===== TOUCH TARGETS — min 44px theo Apple HIG ===== */
button, a, input[type="submit"], select, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}
/* Ngoại trừ inline links, small badges */
a:not(.btn):not([class*="flex"]):not([class*="rounded"]) {
  min-height: auto;
  min-width: auto;
}

/* ===== INPUTS — Chống zoom iOS khi focus (font < 16px) ===== */
input, select, textarea {
  font-size: max(16px, 1em) !important; /* VĐ9: Không bao giờ < 16px */
}
input[type="date"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
}

/* ===== FLOATING NAV BAR — Responsive bottom spacing ===== */
nav[class*="fixed"][class*="bottom"] {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  bottom: max(12px, env(safe-area-inset-bottom, 6px)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(92%, 430px) !important;
}

/* ===== MAIN CONTENT — Đủ padding cho bottom nav ===== */
main, [class*="pb-32"], body > div[class*="pb-"] {
  padding-bottom: max(140px, calc(100px + env(safe-area-inset-bottom, 0px))) !important; /* VĐ3: Tăng padding tránh nav che nội dung */
}

/* ===== IMAGES — Không bao giờ tràn container ===== */
img, video, svg {
  max-width: 100%;
  height: auto;
}

/* ===== TEXT OVERFLOW PREVENTION ===== */
h1, h2, h3, h4, p, span, label {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ===== PRESET BUTTONS (Nạp tiền) — Tự động xuống dòng ===== */
#preset-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#preset-container button {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 90px;
  white-space: nowrap;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

/* ===== OTP INPUTS — Responsive sizing ===== */
.otp-input, input[maxlength="1"][class*="otp"] {
  width: clamp(40px, 12vw, 52px) !important;
  height: clamp(48px, 14vw, 60px) !important;
  font-size: clamp(20px, 6vw, 28px) !important;
}

/* ===== HEADER — Safe cho tất cả kích thước ===== */
header {
  width: 100%;
  max-width: 100vw;
}
/* VĐ7: Fix sticky header nhảy trên Safari iOS */
header[class*="sticky"] {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ===== MODAL — Full-width trên mobile ===== */
[class*="modal"], .modal-overlay {
  max-width: 100vw;
  max-height: 100vh;
}

/* ===== SCROLLABLE TABS (Lịch sử hoạt động) ===== */
[class*="overflow-x-auto"],
[class*="overflow-y-auto"] {
  -webkit-overflow-scrolling: touch; /* VĐ8: Momentum scroll trên iOS */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[class*="overflow-x-auto"]::-webkit-scrollbar,
[class*="overflow-y-auto"]::-webkit-scrollbar {
  display: none;
}
/* VĐ8: Scroll snap cho horizontal scroll (Tasker cards, filter chips) */
.no-scrollbar[class*="overflow-x"] {
  scroll-snap-type: x proximity;
}
.no-scrollbar[class*="overflow-x"] > * {
  scroll-snap-align: start;
}

/* ===============================================
   BREAKPOINTS: Điện thoại nhỏ (320px - 374px)
   Galaxy S5, iPhone SE 1st gen, etc.
   =============================================== */
@media (max-width: 374px) {
  /* Giảm padding chung */
  main, [class*="px-container-padding"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  header [class*="px-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Font size nhỏ hơn cho header */
  header h1 {
    font-size: 16px !important;
  }
  
  /* Nút preset nạp tiền — 2 cột trên màn hình nhỏ */
  #preset-container button {
    flex: 1 1 calc(50% - 8px);
    font-size: 12px !important;
    padding: 6px 8px !important;
  }
  
  /* Grid dịch vụ — nhỏ hơn */
  .grid.grid-cols-3 img, [class*="w-28"] {
    width: 80px !important;
    height: 80px !important;
  }
  
  /* Service type buttons */
  .service-type-btn {
    font-size: 13px !important;
    padding: 10px 8px !important;
  }
  
  /* Tổng kết section text */
  [id="summary-total"], [id="summary-service"] {
    font-size: 14px !important;
  }
  
  /* Bottom nav icons & text */
  nav[class*="fixed"] span[class*="text-label"] {
    font-size: 10px !important;
  }
  nav[class*="fixed"] span[class*="material-symbols"] {
    font-size: 24px !important;
  }
  nav[class*="fixed"] {
    padding: 8px 8px !important;
  }
  
  /* Chat messages — smaller */
  .chat-bubble, [class*="chat"] [class*="rounded"] {
    max-width: 85% !important;
    font-size: 13px !important;
  }
  
  /* Balance card */
  [class*="divide-x"] {
    flex-direction: column !important;
  }
  [class*="divide-x"] > * {
    border-left: none !important;
    border-top: 1px solid #dfc0b3;
    padding-top: 8px;
    padding-left: 0 !important;
  }
  [class*="divide-x"] > *:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* ===============================================
   BREAKPOINTS: Điện thoại trung bình (375px - 413px)
   iPhone 12/13/14, Pixel 5, Galaxy S21
   =============================================== */
@media (min-width: 375px) and (max-width: 413px) {
  /* Standard mobile — mặc định design đã OK */
  #preset-container button {
    flex: 1 1 calc(33.333% - 8px);
    font-size: 13px !important;
  }
}

/* ===============================================
   BREAKPOINTS: Điện thoại lớn (414px - 480px)
   iPhone Plus/Max, Galaxy S Ultra, Pixel 7 Pro
   =============================================== */
@media (min-width: 414px) and (max-width: 480px) {
  #preset-container button {
    flex: 1 1 calc(33.333% - 8px);
  }
}

/* ===============================================
   BREAKPOINTS: Tablet nhỏ / Landscape phone (481px+)
   =============================================== */
@media (min-width: 481px) {
  /* Cho phép nội dung giãn ra trên iPad thay vì khoá ở 430px */
  body {
    background: #e8e5e5;
  }
  
  /* Background gradient tự động giãn */
  body > div[class*="absolute"][class*="pointer-events-none"] {
    max-width: 100%;
    left: 0 !important;
    transform: none;
  }
  /* Không ghi đè main và header nữa, để Tailwind lo */
  /* Vẫn giữ background toàn trang cho body */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #fef6f0 0%, #e8e5e5 30%);
    z-index: -1;
  }
}

/* ===============================================
   BREAKPOINTS: Desktop (768px+) — Hiển thị dạng phone mockup
   =============================================== */
@media (min-width: 768px) {
  body {
    min-height: 100vh;
  }
}

/* ===== ANIMATION HELPERS ===== */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

/* ===== LOADING OVERLAY — Global ===== */
#loading-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
}

/* ===== TOAST — Responsive positioning ===== */
[class*="toast"], #toast-container, .toast-msg {
  max-width: min(90vw, 380px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ===== FORM ELEMENTS — Consistent mobile sizing ===== */
input[type="text"], input[type="tel"], input[type="email"], 
input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  max-width: 100%;
}

/* ===== LONG TEXT HANDLING ===== */
td, th {
  word-break: break-word;
}
table {
  table-layout: fixed;
  width: 100%;
}

/* ===== QR CODE IMAGE — Responsive ===== */
img[alt*="QR"], img[alt*="qr"] {
  width: min(200px, 50vw) !important;
  height: min(200px, 50vw) !important;
}

/* ===== LANDSCAPE MODE — Điều chỉnh chiều cao ===== */
@media (orientation: landscape) and (max-height: 500px) {
  nav[class*="fixed"][class*="bottom"] {
    padding: 6px 8px !important;
  }
  nav[class*="fixed"] span[class*="text-label"] {
    display: none !important;
  }
  main {
    padding-bottom: 80px !important;
  }
}

/* ===== DARK MODE SUPPORT (tương lai) ===== */
@media (prefers-color-scheme: dark) {
  /* Placeholder cho dark mode */
}

/* ===== REDUCED MOTION — Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== PRINT — Ẩn nav khi in ===== */
@media print {
  nav[class*="fixed"] { display: none !important; }
  body { background: white !important; }
}