/* AAA HOUSE ERP Material Control v2.0.1 — Mobile Keyboard Hotfix */
@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* เมื่อคีย์บอร์ดมือถือเปิดและกำลังพิมพ์ในแบบฟอร์ม ให้ซ่อนแถบหัวเว็บชั่วคราว */
  body.aaa-mobile-keyboard-open .topbar {
    display: none !important;
  }

  body.aaa-mobile-keyboard-open .sidebar {
    display: none !important;
  }

  body.aaa-mobile-keyboard-open .workspace {
    padding-top: 12px !important;
    min-height: 100dvh;
  }

  body.aaa-mobile-keyboard-open input:focus,
  body.aaa-mobile-keyboard-open textarea:focus,
  body.aaa-mobile-keyboard-open select:focus,
  body.aaa-mobile-keyboard-open [contenteditable="true"]:focus {
    scroll-margin-top: 18px;
    scroll-margin-bottom: 180px;
  }
}


/* AAA HOUSE Material Control v2.2.3 — Mobile Approval Modal Final Hotfix */
body.modal-open {
  overflow: hidden !important;
}

@media (max-width: 820px) {
  /* ใช้ native select บนโทรศัพท์ ป้องกันคีย์บอร์ดเปิดและพิมพ์แทนการเลือก */
  #activeProjectCombobox {
    display: none !important;
  }

  #activeProjectSelect {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 9px 42px 9px 12px !important;
    border: 2px solid #9be85f !important;
    border-radius: 14px !important;
    background-color: #fff !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-overflow: ellipsis;
    box-shadow: 0 0 0 4px rgba(114, 238, 0, .10);
  }

  /* Modal เลื่อนเฉพาะเนื้อหา ไม่ให้ปุ่มลอยค้างกลางจอ */
  .modal-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
    overscroll-behavior: none;
  }

  .modal {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-bottom: 0 !important;
  }

  .modal-header {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    background: #fff;
  }

  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 12px calc(22px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important;
  }

  .modal .actions {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    margin-top: 18px !important;
    padding: 0 0 max(8px, env(safe-area-inset-bottom)) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .modal .actions .button {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 52px !important;
  }

  /* ตารางอนุมัติโครงการใช้พื้นที่เลื่อนของตัวเองอย่างเสถียรบน iOS */
  .project-package-approval-table {
    max-height: 52dvh !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .project-package-approval-table table {
    min-width: 1120px !important;
  }

  /* ลดงานวาดซ้ำของ sticky ภายใน modal บน Safari/iOS */
  .project-package-approval-table thead th {
    position: static !important;
  }

  .approval-timeline,
  .approval-summary,
  .approval-comparison {
    contain: layout paint;
  }
}


/* AAA HOUSE Material Control v2.2.3 — Withdrawal approval action bar final fix */
@media (max-width: 820px) {
  #modalBody .withdrawal-modal-actions,
  .modal-body .withdrawal-modal-actions,
  .modal .withdrawal-modal-actions {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 22px 0 0 !important;
    padding: 0 0 max(10px, env(safe-area-inset-bottom)) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
    isolation: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  #modalBody .withdrawal-modal-actions > .button {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  /* The withdrawal detail modal must have only one vertical scroll container. */
  #modalBody:has(.withdrawal-modal-actions) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important;
  }

  #modalBody:has(.withdrawal-modal-actions) .approval-table {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
}