/* =============================================================================
   HTIT Sprint 4 Phase B — Mobile-First Responsive Stylesheet
   Áp dụng cho ≤768px. Desktop giữ nguyên layout cũ.
   ============================================================================= */

/* ===== TOUCH-FRIENDLY DEFAULTS ===== */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: contain;
  }

  /* Touch target minimum 44x44 (Apple HIG) */
  button, .btn, a.nav-link, input[type="checkbox"], input[type="radio"] {
    min-height: 40px;
  }
  button, .btn {
    min-width: 40px;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Tap highlight off (cleaner UX) */
  * { -webkit-tap-highlight-color: transparent; }

  /* Form inputs — bigger to avoid iOS zoom (≥16px) */
  input[type="text"], input[type="number"], input[type="date"], input[type="time"],
  input[type="email"], input[type="tel"], input[type="password"], select, textarea {
    font-size: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    min-height: 42px;
  }

  /* ===== MODAL — fix tràn màn hình trên mobile =====
     Bug cũ: #modalCard có min-width:600px → trên iPhone (428px) modal tràn ngang,
     nút × + footer bị đẩy ra ngoài. Fix: full-width, bỏ min-width, chừa safe-area.
     Cấu trúc: header + footer flex-shrink-0 (cố định), #modalBody flex-1 overflow (cuộn).
  */
  #modal {
    /* Chừa safe-area trên/dưới để card không bị notch + home indicator che */
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 6px
             calc(env(safe-area-inset-bottom, 0px) + 6px) 6px !important;
    align-items: center !important;
  }
  #modalCard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    /* Cao tối đa = viewport trừ safe-area trên/dưới + 24px đệm — chắc chắn không tràn dọc.
       Dòng 1: fallback 100vh cho trình duyệt cũ.
       Dòng 2: 100dvh (dynamic viewport height) — chính xác hơn trên iOS, tránh quirk
       100vh > vùng nhìn thấy. Trình duyệt hỗ trợ dvh sẽ dùng dòng 2. */
    max-height: calc(100vh  - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;
    margin: 0 !important;
    border-radius: 12px !important;
  }
  /* Header + footer: padding gọn lại trên mobile */
  #modal .border-b { padding: 12px 16px !important; }
  #modalBody { padding: 12px 16px !important; }
  #modalFooter { padding: 10px 16px !important; }
  /* Nút footer: cao đủ chạm (≥44px), giãn đều khi nhiều nút */
  #modalFooter button {
    min-height: 44px;
    flex: 1 1 auto;
    font-size: 14px;
  }

  /* Header sticky compact */
  header, .app-header {
    padding-top: env(safe-area-inset-top, 0);
  }
}

/* ===== TABLES → CARDS ON MOBILE =====
   Add class `mobile-cards` to a table's parent .bg-white.rounded.shadow
   to enable. Otherwise tables retain horizontal scroll.
*/
@media (max-width: 768px) {
  .mobile-cards > table { display: block; min-width: 0 !important; }
  .mobile-cards > table thead { display: none; }
  .mobile-cards > table tbody { display: block; }
  .mobile-cards > table tr {
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 8px;
    padding: 12px;
    background: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .mobile-cards > table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    border-bottom: 1px dashed #f1f5f9;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .mobile-cards > table td:last-child { border-bottom: none; }
  .mobile-cards > table td:before {
    content: attr(data-label);
    font-weight: 600;
    color: #475569;
    font-size: 12px;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .mobile-cards > table td:empty { display: none; }
}

/* ===== BOTTOM NAVIGATION =====
   LƯU Ý: KHÔNG dùng .htit-bottom-nav nữa — app đã có sẵn #mobileBottomNav built-in
   (role-based, chỉ hiện sau đăng nhập). Module M40 chỉ còn lo FAB.
*/

/* ===== QUICK ACTION FAB =====
   Vị trí: dời LÊN CAO (mid-right) để không bị bottom nav (~60px) + iPhone home
   indicator che mất, và để ngón tay với tới dễ hơn.
*/
.htit-fab {
  display: none;
  position: fixed;
  bottom: 150px;          /* cao hơn hẳn bottom nav + safe area */
  right: 14px;
  background: #2563eb;
  color: white;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(37,99,235,0.4);
  font-size: 24px;
  border: none;
  cursor: pointer;
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.htit-fab:active { transform: scale(0.95); }
@media (max-width: 768px) {
  .htit-fab.active { display: flex; }
}

/* ===== AI FLOATING BUTTON — reposition trên mobile =====
   M36 legacy đã disable; M91 (active) tạo #htitAiButton với inline style bottom:24px;right:24px → đè lên bottom nav.
   Trên mobile: dời lên THẲNG HÀNG (cùng right) và NGAY DƯỚI nút FAB (➕).
   Stack dọc mép phải: bottom-nav (0-70) → AI (90-142) → FAB (150-202) → FAB-menu (212+).
*/
@media (max-width: 768px) {
  #aiFloatBtn,
  #htitAiButton {
    bottom: 90px !important;
    right: 14px !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 24px !important;
    z-index: 998 !important;   /* dưới FAB (999), trên bottom nav (55) */
  }
  /* Panel AI mở lên: cũng cần lift để không che bottom nav.
     bottom:90+52+8=150 (trên AI button), hoặc dùng calc với safe-area. */
  #htitAiPanel {
    bottom: 150px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 220px) !important;
  }
}

/* FAB menu (đa lựa chọn quick action) — mở LÊN TRÊN, ngay trên nút "Tạo nhanh" ở thanh menu dưới.
   ★ 2026-05-27: nút FAB nổi đã bỏ; menu mở từ bottom-nav nên hạ xuống sát thanh menu. */
.htit-fab-menu {
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));   /* ngay trên thanh bottom-nav (~60px) */
  right: 10px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 8px;
  z-index: 999;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  max-height: 50vh;
  overflow-y: auto;
  animation: fabMenuIn 0.18s ease;
}
.htit-fab-menu.open { display: flex; }
.htit-fab-menu button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: #1e293b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.htit-fab-menu button:hover { background: #f1f5f9; }
@keyframes fabMenuIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== UTILITIES ===== */
@media (max-width: 768px) {
  /* Hide elements marked desktop-only */
  .htit-desktop-only { display: none !important; }
  /* Reverse: only show on mobile */
  .htit-mobile-only { display: block !important; }

  /* Grid 4-cols → 2-cols on mobile */
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* 3-cols → 2-cols */
  .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Reduce kpi font */
  .kpi-value { font-size: 20px; }
  .kpi-card { padding: 12px; }

  /* Header h2 smaller */
  h2.text-2xl { font-size: 18px !important; }

  /* Form modal: full width */
  #modalBody .grid-cols-2 { grid-template-columns: 1fr !important; gap: 8px !important; }
}

.htit-mobile-only { display: none; }

/* ===== PRINT-FRIENDLY (no nav) ===== */
@media print {
  .htit-bottom-nav, .htit-fab, .htit-fab-menu, #sidebar, #htitInstallBtn { display: none !important; }
  #mainContent { padding-bottom: 0 !important; }
}