/* === MOBILE FIXES === */
@media (max-width: 768px){
  /* Chống iOS Safari auto-zoom khi focus input < 16px */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select,
  textarea{font-size:16px !important}
  /* Trừ các input compact cần giữ kích thước nhỏ */
  .att-table input.att-cell,
  .rinput,
  .rinput-wide{font-size:13px !important}
  /* Safe-area padding cho notch / home indicator */
  body{
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  /* Tap target tối thiểu 40px */
  .ni, .nav-link, .emp-tab, .btn, .chat-hdr-btn{min-height:40px}
  /* Chống select & highlight xanh khi tap */
  .ni, .nav-link, .emp-tab, .btn, .chat-hdr-btn{
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  /* Momentum scroll trên iOS */
  .nav, .emp-sidebar, .chat-rooms-list, .wf-sidebar-list, .notif-panel{
    -webkit-overflow-scrolling:touch;
  }
  /* Composer chừa safe-area dưới */
  .chat-input-wrap, .chat-composer{
    padding-bottom:max(8px, env(safe-area-inset-bottom));
  }
  /* === BẢNG cuộn ngang — attempt #4 (final): RESET broken table{display:block} + force min-width === */
  /* CRITICAL: rule cũ ở line 1690 set table{display:block;max-width:100%;white-space:nowrap}
     → cột không xếp ngang được. Reset lại default để table layout hoạt động đúng. */
  table{
    display:table !important;
    max-width:none !important;
    white-space:normal !important;
  }
  /* Phá overflow:hidden của .tc trên mobile để không clip nội dung tràn */
  .tc{ overflow-x:visible !important; }
  /* Outer wrap (#prj-tw, #emp-tw, ...) làm scroll container chính */
  #prj-tw, #emp-tw, #sal-tw, #exp-tw, #adv-tw, #po-tw, #inv-tw, #iof-tw,
  #other-inc-tw, #ep-bon, #ep-raise,
  /* Bổ sung các page content containers các trang lớn — fix scroll ngang trên mobile */
  #att-page-content, #bon-content, #ie-content, #inv-content, #iof-content,
  #balance-content, #inc-content, #exp-content,
  #report-content, #pnl-content, #pm-dashboard-content,
  #verify-content, #cus-tw, #sup-tw, #other-exp-content{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x;
    max-width:100%;
  }
  /* Generic: mọi page chứa table rộng — đảm bảo có scroll ngang */
  .page > div:has(> table), .page > .acc-body{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x;
    max-width:100%;
  }
  /* Inner inline-style div + class .h-scroll-wrap (JS gắn): force scroll mạnh nhất */
  div[style*="overflow-x:auto"], .h-scroll-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x !important;
    max-width:100% !important;
  }
  /* Tables inside scroll wrappers MUST be wider than viewport để trigger scroll. */
  div[style*="overflow-x:auto"] table,
  div[style*="overflow-x:auto"] .att-table,
  .h-scroll-wrap table, .h-scroll-wrap .att-table,
  #prj-tw table, #emp-tw table, #sal-tw table, #exp-tw table,
  #adv-tw table, #po-tw table, #inv-tw table, #iof-tw table{
    min-width:780px !important;
    width:max-content !important;
  }
  /* === HOME (welcome) — căn giữa + đẩy nội dung lên cao + khoá scroll === */
  body.on-home-page, body.emp-on-home{
    overflow:hidden !important;
    height:100dvh;
  }
  body.on-home-page #page-home, body.emp-on-home #emp-pane-home{
    height:100%;
    overflow:hidden;
  }
  .welcome-screen{
    justify-content:flex-start !important;
    padding-top:6vh !important;
    min-height:100% !important;
    overflow:hidden;
  }
  .welcome-screen, .welcome-content{ text-align:center; align-items:center; }
  /* Widget cards — căn giữa toàn bộ children */
  .ww-card{
    text-align:center;
    align-items:center;
    justify-content:center;
  }
  .ww-card > *{ width:100%; text-align:center; }
  /* Weather widget có flex row icon+text — cũng phải center */
  .ww-weather-row{ justify-content:center; }
  /* Thu nhỏ filter bar trên mobile — !important vì default rule (line 238) đặt sau @media này
     theo source order, nên không có !important sẽ bị override. */
  .filter-bar{
    gap:6px !important;
    margin-bottom:10px !important;
    padding-bottom:4px !important;
  }
  /* Compact inputs/selects: giữ font-size 16px để tránh iOS auto-zoom on focus,
     nhưng nén padding + height để visually nhỏ lại. */
  .filter-bar select, .filter-bar input{
    padding:3px 8px !important;
    height:32px !important;
    line-height:1.2 !important;
    border-radius:6px !important;
  }
  .filter-bar .btn{
    padding:4px 10px !important;
    font-size:11.5px !important;
    min-height:32px !important;
    height:32px !important;
  }
  /* Stat cards thu nhỏ — !important đè default .stat-card / .svalue / .schange */
  .stat-card{ padding:8px 10px !important; }
  .svalue{ font-size:15px !important; letter-spacing:-0.3px !important; }
  .schange{ font-size:10px !important; margin-top:2px !important; }
  .ts, .tt{ font-size:10.5px !important; }
  .stat-grid{ gap:8px !important; margin-bottom:12px !important; }
}
/* === Chặn rubber-band / overscroll trên mobile (iOS Safari, Android Chrome) ===
   User muốn màn hình đứng yên, chỉ scroll khi còn nội dung bên dưới.
   Giới hạn vào mobile để tránh ảnh hưởng mouse wheel trên desktop. */
@media (max-width: 768px){
  html, body{ overscroll-behavior:none; }
}
/* PWA standalone: chặn long-press select trừ trong editor */
@media (display-mode: standalone){
  body{-webkit-user-select:none; user-select:none}
  textarea, input, [contenteditable]{-webkit-user-select:text; user-select:text}
}
/* dvh: chiều cao động (trừ thanh URL iOS) */
@supports (height: 100dvh){
  @media (max-width: 768px){
    body{min-height:100dvh}
    #login-screen{min-height:100dvh}
    .layout{min-height:100dvh}
    .sidebar{height:100dvh}
    .main{min-height:100dvh}
    #emp-screen{min-height:100dvh}
    body.emp-active #emp-screen{height:100dvh}
    .emp-layout{height:calc(100dvh - 60px)}
    .chat-shell{height:calc(100dvh - 140px); max-height:calc(100dvh - 140px)}
    #emp-pane-chat .chat-shell{height:calc(100dvh - 110px); max-height:calc(100dvh - 110px)}
  }
}

/* ========================================
   MOBILE RESPONSIVE — đồng bộ với desktop
   ======================================== */
@media (max-width: 768px){
  /* Feed: post căn vừa khít, action bar gọn lại */
  .feed-container{padding:8px !important}
  .feed-post{border-radius:10px;margin-bottom:8px}
  .feed-post-head{padding:10px 12px;gap:8px}
  .feed-post-avatar{width:36px;height:36px;font-size:14px}
  .feed-post-author{font-size:13.5px}
  .feed-post-time{font-size:10.5px}
  .feed-post-content{padding:10px 12px;font-size:13px;line-height:1.5}
  .feed-post-images{max-height:380px}
  .feed-post-image{min-height:120px;max-height:240px}
  /* Action bar mobile: compact icon + count, vẫn Facebook-style */
  .feed-post-action-bar{padding:6px 10px;gap:2px;min-height:42px}
  .feed-post-btn{padding:7px 9px;font-size:13px;gap:6px}
  .feed-btn-icon{width:20px;height:20px}
  .feed-btn-emoji{font-size:17px}
  .feed-post-btn-count{font-size:13px}
  /* Comment section mobile */
  .feed-comments-list{padding:6px 12px 4px}
  .feed-comment-input{padding:6px 12px 10px}
  .feed-comment-input input{padding:7px 12px;font-size:13px}
  .feed-comment-bubble{padding:6px 10px;font-size:12.5px}
  /* Reaction picker compact */
  .feed-react-picker{padding:4px;gap:1px}
  .feed-react-emoji{width:36px;height:36px;font-size:22px}
  /* Composer mobile */
  .feed-composer{padding:10px 12px;border-radius:10px}
  .feed-composer textarea{font-size:14px;min-height:60px}
  /* Filter bar có thể scroll ngang */
  .feed-filter-bar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .feed-filter-btn{flex-shrink:0;font-size:12px;padding:6px 10px}
  /* Composer wrap NV portal */
  #emp-feed-posts .feed-composer{margin:0 0 10px}
}

/* Mobile chat: tin nhắn rộng hơn, không cắt */
@media (max-width: 768px){
  .chat-shell{height:calc(100vh - 100px) !important;border-radius:8px}
  .chat-msg{max-width:88%}
  .chat-msg-bubble{font-size:13.5px;padding:7px 11px}
  .chat-msg-avatar{width:28px;height:28px;font-size:12px}
  .chat-messages{padding:10px}
  .chat-header{padding:8px 10px;gap:6px;flex-wrap:wrap}
  .chat-input-area{padding:8px}
  .chat-input-row{gap:6px}
  /* Float chat: trên mobile, hẹp hơn */
  .float-chats-wrap{right:8px;bottom:8px}
  /* Reaction chip nhỏ hơn */
  .chat-rxn-chip{font-size:10.5px;padding:1px 6px}
  /* Action buttons hiện luôn (mobile không có hover) */
  .chat-msg-actions{display:flex;position:static;margin-top:4px;background:transparent;border:none;box-shadow:none;padding:0;flex-wrap:wrap}
  .chat-msg-action{font-size:13px;padding:3px 6px}
  /* Split panel ẩn hoàn toàn trên mobile (không đủ không gian) */
  .chat-shell.has-split .chat-split-panel{display:none !important}
  .chat-shell.has-split{grid-template-columns:1fr !important}
}

/* Mobile EMP portal: responsive đúng cách */
@media (max-width: 768px){
  body.emp-active #emp-screen{overflow-y:auto;height:auto;min-height:100vh}
  body.emp-active{overflow:auto}
  .emp-topbar{padding:8px 10px;gap:6px;flex-wrap:wrap}
  .emp-content{padding:10px !important}
  .emp-pane{padding:0}
  /* NV chat: full height */
  #emp-pane-chat .chat-shell{height:calc(100vh - 200px) !important;min-height:400px}

  /* THANH CÔNG CỤ tràn — cho phép scroll ngang trên mobile */
  /* filter-bar (Dự án/Khách hàng/Chi phí…): scroll ngang thay vì wrap nhiều dòng */
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-width:thin}
  .filter-bar > *{flex-shrink:0}
  /* emp-tabs cũng scroll ngang */
  .emp-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .emp-tabs > *{flex-shrink:0;min-width:auto}
  /* Workflow bar */
  .wf-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .wf-bar > *{flex-shrink:0}
  /* Chat header actions (pin/bookmark/manage/lock) */
  .chat-header-actions{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;scrollbar-width:none}
  .chat-header-actions::-webkit-scrollbar{display:none}
  /* RULE CŨ ĐÃ XOÁ: trước đây table{display:block;max-width:100%} biến table thành block,
     phá vỡ table layout → cột không xếp ngang được → min-width vô tác dụng.
     Giờ dùng wrapper-based scroll (xem CSS đầu file) thay thế. */
  /* Generic: bất kỳ container con nào có overflow-x:auto đều thoát overflow body */
  .h-scroll{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  /* Hidden scrollbar style cho các bar (UX gọn) */
  .filter-bar::-webkit-scrollbar,.emp-tabs::-webkit-scrollbar,.wf-bar::-webkit-scrollbar{height:3px}
  .filter-bar::-webkit-scrollbar-thumb,.emp-tabs::-webkit-scrollbar-thumb,.wf-bar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
}

/* Mobile small phones (≤480px) */
@media (max-width: 480px){
  .feed-post-action-bar{padding:5px 8px}
  .feed-post-btn{padding:6px 7px;font-size:12.5px}
  .feed-btn-icon{width:18px;height:18px}
  .feed-post-btn-count{font-size:12.5px}
  .feed-react-emoji{width:32px;height:32px;font-size:20px}
  .feed-react-summary{font-size:11px;gap:2px}
  .feed-react-summary-emojis span{font-size:13px}
  .feed-post-content{font-size:12.5px;padding:9px 11px}
  .feed-post-author{font-size:13px}
  .feed-post-avatar{width:32px;height:32px;font-size:13px}
  /* Modal QCG: chiếm full màn hình mobile */
  #qcg-overlay{padding-top:0 !important;align-items:stretch !important}
  .qcg-modal{width:100% !important;max-width:100% !important;border-radius:0;max-height:100vh;height:100vh}
  .qcg-emp-list{max-height:none}
  /* Feed share modal full screen mobile */
  #feed-share-overlay{padding-top:0 !important;align-items:stretch !important}
  #feed-share-overlay > div{width:100% !important;max-width:100% !important;border-radius:0;max-height:100vh;height:100vh}
  /* Project detail: stack Invoice + PO trên mobile */
  .prj-inv-po-row{grid-template-columns:1fr !important}
}