/* ============================================================================
   GMB Ops — bản vá giao diện bổ sung (không cần build lại frontend)
   Nạp bằng <link rel="stylesheet" href="/ux-fixes.css"> trong index.html.
   Chỉ chứa các sửa lỗi hiển thị / tương thích di động; xoá file là trở về như cũ.
   ========================================================================== */

/* 1. Nút đổi ngôn ngữ (VI/EN) cố định ở góc dưới phải đang che nội dung & nút cuối trang trên điện thoại */
@media (max-width: 767px) {
  #gt-switcher {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    right: 10px;
    padding: 3px;
    gap: 1px;
    border-radius: 12px;
    opacity: 0.88;
  }
  #gt-switcher .gt-btn { padding: 5px 8px; font-size: 11px; gap: 5px; }
  #gt-switcher .gt-btn .fi { width: 16px; height: 12px; }
  #gt-switcher .gt-sep { height: 16px; }

  /* Chừa chỗ cuối trang để nội dung cuộn qua khỏi nút ngôn ngữ */
  main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); }
}

/* Khi đang mở hộp thoại / menu, nút ngôn ngữ không được đè lên trên */
body:has([role="dialog"]) #gt-switcher { display: none; }

/* 2. iOS Safari tự phóng to trang khi ô nhập có chữ < 16px */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* 3. Hộp thoại luôn nằm gọn trong màn hình và cuộn được khi nội dung dài */
[role="dialog"] {
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 4. Thanh công cụ trên bảng link (Xuất Excel / Nhập Excel / File mẫu / ...): không cắt chữ, xuống dòng gọn */
main button.h-7.rounded-lg { white-space: nowrap; }
@media (max-width: 767px) {
  main div.border-b.flex.flex-wrap > div.flex.items-center { flex-wrap: wrap; }
}

/* 5. Không cho cả trang bị kéo ngang vì một phần tử tràn (bảng đã có thanh cuộn riêng) */
body { overflow-x: hidden; }

/* 6. Vùng chạm tối thiểu cho thiết bị cảm ứng */
@media (pointer: coarse) {
  main button, main [role="button"], main a { touch-action: manipulation; }
}

/* 7. Tôn trọng chế độ "giảm chuyển động" (đỡ giật trên máy yếu: nhiều badge nhấp nháy) */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}