/* mobile.css — Lớp responsive CHUNG cho điện thoại (PWA). Tiêm mọi trang.
 * Nguyên tắc: VÁ lỗi mobile phổ biến + ÉP nội dung vừa bề ngang màn (các trang desktop-first
 * có nhiều chiều rộng cố định px). KHÔNG đổi bố cục desktop (mọi thứ trong @media ≤640px).
 * Nạp SAU Tailwind CDN nên thắng được util khi cần (!important có chọn lọc).
 */

/* ---- Chặn CỨNG cuộn ngang cả trang (overflow-x:clip giữ được position:sticky) ---- */
html, body { overflow-x: clip; }

/* ---- Ảnh/pre không tràn; khung cuộn bảng ---- */
img, svg, video, canvas { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }
.hd-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* CHỈ bảng DỮ LIỆU mới giữ nguyên bề ngang để cuộn ngang (kiểu bảng tính).
   Dấu hiệu nhận biết: bảng dữ liệu CÓ <thead> (kế toán/dự án/thủ kho), còn bảng nhãn–giá trị
   (kh360 `table.kv`: SĐT / Địa chỉ / Phụ trách) thì KHÔNG có <thead>.
   Nếu ép cả bảng nhãn–giá trị theo max-content thì địa chỉ dài bị dồn 1 dòng -> phải kéo ngang
   mới đọc được. Trình duyệt cũ không hiểu :has() thì bỏ qua luật này -> bảng tự xuống dòng,
   vẫn đọc được (thoái lui an toàn). */
.hd-tscroll > table:has(thead) { min-width: max-content; }

/* ===== Thanh tab module: 1 hàng CUỘN NGANG gọn (thay vì bung nhiều hàng chiếm nửa màn) =====
   mobile.js tag khối chứa .tabBtn thành .hd-tabscroll. Chỉ áp mobile. */
@media (max-width: 640px) {
  .hd-tabscroll {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 6px !important; margin-left: 0 !important;
    padding-bottom: 3px; scroll-snap-type: x proximity;
    flex: 1 1 100% !important; min-width: 0 !important;  /* chiếm trọn 1 hàng -> tab con/user xuống dòng dưới */
    /* Vệt mờ mép phải: báo hiệu "còn tab bên phải, vuốt để xem" -> hết cảnh cắt cụt trông như lỗi */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .hd-tabscroll::-webkit-scrollbar { display: none; }
  .hd-tabscroll > * { flex: 0 0 auto !important; white-space: nowrap; scroll-snap-align: start; }
  /* Nút tab gọn, ĐỀU nhau, chạm dễ trên điện thoại */
  .hd-tabscroll > button, .hd-tabscroll > a {
    padding: 7px 13px !important; font-size: 13px !important; line-height: 1.2 !important;
    min-height: 34px !important; display: inline-flex !important; align-items: center !important;
    border-radius: 9px !important; font-weight: 600 !important;
  }
}

/* ===== NÉN GỌN thanh lọc/điều khiển trên điện thoại (ngày · preset · công ty · chip team) ===== */
@media (max-width: 640px) {
  /* Ngày: ÉP 2 ô chia đôi CÙNG 1 hàng (date input rất "cứng đầu" -> phải set width + min-width:0) */
  #headerFilter { gap: 6px !important; flex-wrap: wrap !important; }
  #headerFilter #from, #headerFilter #to { flex: 1 1 40% !important; width: 40% !important; min-width: 0 !important; padding: 5px 6px !important; }
  #headerFilter > span { align-self: center; }
  /* Preset / chip team / chip kỳ / nút Áp dụng: THẤP lại (ghi đè min-height 40px), chữ nhỏ, đều nhau */
  .preset, .teamChip, .kdPd, #apply, #teamCoFilter {
    min-height: 30px !important; padding: 5px 10px !important; font-size: 12px !important; line-height: 1.15 !important;
  }
  .preset { border-radius: 0 !important; }
  /* NHÓM LẠI GỌN: 2 khối lọc thành panel trắng bo góc, đọc liền mạch (bớt rời rạc) */
  #headerFilter, #teamChips { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 12px !important; padding: 8px !important; }
  /* Khối team: công ty 1 hàng trên, chip team CUỘN NGANG 1 hàng (thay vì bung 2-3 hàng) */
  #teamChips { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  #teamCoFilter { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
  #tcChips { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px !important;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
  #tcChips::-webkit-scrollbar { display: none; }
  #tcChips > * { flex: 0 0 auto !important; white-space: nowrap; }
  /* Bớt khoảng trống dọc giữa các khối để lên số liệu nhanh hơn */
  #view-facebook.space-y-4 > * + *, #view-google.space-y-4 > * + * { margin-top: 10px !important; }
}

@media (max-width: 640px) {
  /* ===== ÉP VỪA BỀ NGANG: gốc rễ chống tràn =====
     Mọi phần tử không rộng hơn màn — TRỪ BẢNG (cần rộng để cuộn ngang) và nội dung khung cuộn.
     Bảng nằm trong khung overflow-auto/.hd-tscroll -> để nó rộng thì khung mới cuộn được. */
  body :not(.hd-tscroll):not(.hd-tscroll *):not(table):not(table *) { max-width: 100% !important; }

  /* min-width cố định (Tailwind min-w-[980px] hoặc inline style) đẩy trang rộng -> bỏ trên mobile
     (trừ bảng trong khung cuộn). Đây là nguồn tràn ngang #1 ở các trang desktop-first. */
  [class*="min-w-["]:not(.hd-tscroll *):not(.hd-tscroll),
  [style*="min-width"]:not(.hd-tscroll *):not(.hd-tscroll) { min-width: 0 !important; }

  /* ===== Ô BẢNG: không bẻ GIỮA con số, nhưng VẪN cho xuống dòng giữa các TỪ =====
     `word-break/overflow-wrap: normal` là ĐỦ để "194.050.000" không bị bẻ (nó là MỘT từ liền).
     ⚠️ ĐỪNG thêm `white-space: nowrap` vào đây. Đã từng thêm (16/07) và gây lỗi nặng:
     địa chỉ dài trong bảng nhãn-giá trị (kh360 `table.kv`) bị ép 1 dòng -> bảng phình rộng ->
     cả trang phình -> `overflow-x: clip` ở trên cắt mất phần thừa -> KHÔNG kéo tới được ->
     trang như bị "khoá cứng". Bảng nhiều cột cần cuộn ngang đã có .hd-tscroll lo (bên dưới),
     không cần nowrap toàn cục. */
  table td, table th { word-break: normal !important; overflow-wrap: normal !important; }

  /* Chuỗi dài NGOÀI bảng (ghi chú, URL) mới cho xuống dòng — KHÔNG đụng số trong thẻ/bảng */
  p, .note, textarea, [class*="whitespace-normal"] { overflow-wrap: anywhere; }

  /* Ô grid/flex mặc định min-width:auto -> không co -> nội dung đẩy tràn. Cho co lại. */
  .grid > *, .flex > * { min-width: 0; }

  /* ===== RESPONSIVE TYPOGRAPHY: cỡ chữ lớn TỰ CO theo bề ngang màn (clamp + vw) =====
     Số tiền/tiêu đề lớn trong thẻ grid co lại vừa ô thay vì tràn. */
  .text-4xl { font-size: clamp(1.15rem, 6vw, 2.25rem) !important; line-height: 1.15 !important; }
  .text-3xl { font-size: clamp(1.05rem, 5.2vw, 1.875rem) !important; line-height: 1.15 !important; }
  .text-2xl { font-size: clamp(0.95rem, 4.6vw, 1.5rem) !important; line-height: 1.2 !important; }
  .text-xl  { font-size: clamp(0.9rem, 4vw, 1.25rem) !important; line-height: 1.2 !important; }

  /* ===== Ô nhập / select: vừa khung, chữ 16px (chống iOS auto-zoom) ===== */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px !important; max-width: 100% !important; box-sizing: border-box; }

  /* ===== Vùng chạm đủ lớn ===== */
  button, [role=button], a.btn, .btn, input[type=submit], input[type=button] { min-height: 40px; }
  td button, td a, th button { min-height: 0; }

  /* ===== Modal/hộp thoại vừa màn ===== */
  .fixed.inset-0 > div, [class*="max-w-"][class*="rounded"] { max-width: 96vw !important; }

  /* ===== Lưới nhiều cột chưa tự responsive -> 2 cột ===== */
  .grid.grid-cols-3:not([class*="sm:"]):not([class*="md:"]),
  .grid.grid-cols-4:not([class*="sm:"]):not([class*="md:"]),
  .grid.grid-cols-5:not([class*="sm:"]):not([class*="md:"]),
  .grid.grid-cols-6:not([class*="sm:"]):not([class*="md:"]) { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* ===== Padding bớt để tận dụng bề ngang ===== */
  .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
  .p-6 { padding: 14px !important; }

  /* ===== Vùng an toàn dưới (thanh home iPhone) ===== */
  .fixed.bottom-0, .sticky.bottom-0 { padding-bottom: env(safe-area-inset-bottom); }
}

/* ===== NÉN GỌN TOÀN CỤC (rà 1 lượt) — chỉ đụng padding/gap/margin/font, KHÔNG đổi bố cục/màu =====
   Card/section trên mobile để cỡ desktop (p-4=16px, p-3=12px) tốn bề ngang + chiều cao. Giảm vừa phải
   để lên nội dung nhanh hơn, KHÔNG chật. Bỏ qua gap-2 & padding ô bảng (đã tối thiểu). */
@media (max-width: 640px) {
  /* Padding thẻ/section — 2 mức phổ biến nhất (p-4: ~205 chỗ, p-3: ~135) */
  .p-4 { padding: 12px !important; }
  .p-3 { padding: 10px !important; }
  .p-5 { padding: 14px !important; }
  .p-8 { padding: 16px !important; }
  .p-2\.5 { padding: 8px !important; }
  /* KHÔNG nén .px-4: nó đè 'html.en-compact header{padding-left:3rem}' (chừa chỗ nút ☰) -> ☰ che nút back */
  /* Khoảng cách lưới/flex (chừa gap-2 vì đã 8px) */
  .gap-4 { gap: 10px !important; }
  .gap-3 { gap: 8px !important; }
  /* Khoảng cách dọc giữa các khối */
  .space-y-4 > * + * { margin-top: 10px !important; }
  .space-y-3 > * + * { margin-top: 8px !important; }
  .mb-4 { margin-bottom: 10px !important; }
  .mb-6 { margin-bottom: 14px !important; }
  /* Tiêu đề section 18px hơi to -> co theo màn (đồng bộ chuỗi clamp text-xl/2xl…) */
  .text-lg { font-size: clamp(0.95rem, 4.2vw, 1.125rem) !important; line-height: 1.25 !important; }
}