/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  LAYER 5 — RESPONSIVE 4 TẦNG                                         ║
   ║                                                                      ║
   ║  Tầng 1 │ ≤ 1024px           │ Tablet & Mobile — bố cục chung        ║
   ║  Tầng 2 │ ≤ 768px            │ Phone — thu gọn thêm                  ║
   ║  Tầng 3 │ ≤ 768px portrait   │ Phone dọc — card 1 cột, ẩn stats      ║
   ║  Tầng 4 │ ≤ 768px landscape  │ Phone ngang — card 2 cột              ║
   ║                                                                      ║
   ║  QUY TẮC BẮT BUỘC:                                                    ║
   ║  - Mỗi cột <td> dạng card PHẢI có thuộc tính data-label="..."         ║
   ║    để hiển thị nhãn khi bảng chuyển sang dạng thẻ.                    ║
   ║  - Mọi nút bấm có min-height 40px trên mobile (touch-friendly).       ║
   ║  - Input/select size 16px trở lên để chống iOS auto-zoom.             ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─── TẦNG 1: ≤ 1024px — Tablet & tất cả mobile ─── */
@media (max-width: 1024px) {
  /* Header thu gọn dạng cột */
  header {
    height: auto;
    flex-direction: column;
    padding: 10px 15px;
    gap: 10px;
    align-items: center;
  }
  .hdr-text      { text-align: center; }
  .hdr-text h1   { font-size: 13px; line-height: 1.4; }
  .hdr-text p    { font-size: 10px; }
  .hdr-badge     { display: none; }

  /* Tabs — dạng pill row */
  .tabs-bar {
    padding: 4px 6px;
    gap: 3px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn {
    font-size: 11px;
    padding: 8px 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Main padding thu hẹp */
  main { padding: 10px 10px 36px; }

  /* Grid collapse sớm */
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }

  /* Scroll wrap bỏ max-height trên mobile để page scroll tự nhiên */
  .tbl-scroll-wrap,
  .cmp-tbl-scroll-wrap { max-height: unset; overflow-x: auto; }

  /* Input — chống iOS zoom khi focus */
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=date], textarea, select {
    font-size: 16px;
  }
}

/* ─── TẦNG 2: ≤ 768px — Phone chung ─── */
@media (max-width: 768px) {
  /* Grid 1 cột */
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }

  /* Tabs — thu nhỏ hơn, cho phép icon + chữ xếp dọc */
  .tabs-bar {
    padding: 4px;
    background: rgba(255,255,255,.95);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.10);
    justify-content: space-around;
  }
  .tab-btn {
    flex: 1;
    font-size: 10px;
    padding: 6px 4px;
    line-height: 1.2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--navy);
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    white-space: normal;
    word-break: break-word;
  }
  .tab-btn.active {
    background: var(--navy);
    color: #ffffff;
    border-radius: 6px;
  }
  .tab-btn.active::after { display: none; }

  /* Nút bấm touch-friendly */
  .btn { padding: 9px 14px; min-height: 40px; }

  /* Upload zone thu gọn */
  .upload-zone       { padding: 18px 12px; }
  .upload-zone h4    { font-size: 13px; }
  .upload-zone p     { font-size: 11px; }

  /* Pagination thu gọn */
  .pagination        { padding: 8px 4px; }
  .pagination button { min-width: 30px; height: 28px; font-size: 11px; padding: 0 6px; }
  .pagination .page-info { font-size: 11px; margin: 0 4px; }

  /* Search controls: nút và label xếp cột */
  .search-controls {
    display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  }
  .search-controls > label { font-size: 11px; text-align: center; }

  /* Nút toggle thống kê hiện lên trên thiết bị di động */
  #stats-toggle-btn { display: flex; }
}

/* ─── TẦNG 3: ≤ 768px + Portrait — Phone dọc ─── */
@media (max-width: 768px) and (orientation: portrait) {
  /* Hiện nút toggle thống kê */
  .stats-toggle-btn { display: inline-flex !important; }

  /* Ẩn body card thống kê mặc định; nút toggle bật lại */
  #stats-card-body { display: none; }

  /* Bảng chuyển sang dạng thẻ card (1 cột) */
  table,
  table tr,
  table td,
  table tbody {
    display: block; width: 100%;
    word-break: break-word; white-space: normal;
  }
  table thead { display: none; }

  /* Group row (dòng nhóm) giữ flex để icon và text cùng hàng */
  table .group-row,
  table .group-row td { display: flex; flex-wrap: wrap; align-items: center; }
  table .group-row { gap: 0; }
  table .group-row td { width: 100%; }

  table tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  table tbody tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    margin: 0;
  }
  table tbody td {
    font-size: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
    line-height: 1.4;
  }
  table tbody td:last-child { border-bottom: none; }

  /* HIỂN THỊ NHÃN CỘT — bắt buộc <td data-label="..."> */
  table tbody td::before {
    content: attr(data-label);
    font-size: 8.5px; font-weight: 700; color: var(--navy);
    display: block; text-transform: uppercase;
    margin-bottom: 2px; opacity: 0.6;
  }

  /* Badges bỏ khung, hiển thị inline */
  .badge, .badge-red, .badge-orange,
  .badge-gold, .badge-blue, .badge-green, .badge-gray, .badge-navy {
    background: transparent; border: none; padding: 0;
    font-weight: 700; display: inline; white-space: normal;
  }
  .badge::before { content: "• "; }

  /* Modal full chiều cao */
  .modal-box { max-height: 95vh; }
  .detail-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .detail-key  { border-bottom: 1px solid var(--border); padding-bottom: 2px; }
}

/* ─── TẦNG 4: ≤ 768px + Landscape — Phone ngang ─── */
@media (max-width: 768px) and (orientation: landscape) {
  /* Bảng dạng thẻ 2 cột */
  table,
  table tr,
  table td,
  table tbody {
    display: block; width: 100%;
    word-break: break-word; white-space: normal;
  }
  table thead { display: none; }

  table .group-row,
  table .group-row td { display: flex; flex-wrap: wrap; align-items: center; }
  table .group-row td { width: 100%; }

  table tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  table tbody tr {
    border: 1px solid var(--border); border-radius: 8px;
    padding: 10px; background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05); margin: 0;
  }
  table tbody td {
    font-size: 12px; padding: 5px 0;
    border-bottom: 1px dashed #eee; line-height: 1.4;
  }
  table tbody td:last-child { border-bottom: none; }
  table tbody td::before {
    content: attr(data-label);
    font-size: 8.5px; font-weight: 700; color: var(--navy);
    display: block; text-transform: uppercase; margin-bottom: 2px; opacity: 0.6;
  }

  /* Badges bỏ khung */
  .badge, .badge-red, .badge-orange,
  .badge-gold, .badge-blue, .badge-green, .badge-gray, .badge-navy {
    background: transparent; border: none; padding: 0;
    font-weight: 700; display: inline; white-space: normal;
  }
  .badge::before { content: "• "; }

  /* Header ngang thu gọn hơn */
  header { padding: 6px 15px; gap: 8px; }
  main   { padding: 8px 8px 24px; }
}