/* An Đông 4 CRM V10.58 — viewport/scroll safety QA layer
   Purpose: prevent clipped content in Customer 360, forms, tables and mobile sheets
   without changing the established desktop layout. */

/* ---------- Global modal contract: header fixed, body is the scroll container ---------- */
#admin-modal:not(.hidden),
#customer-modal:not(.hidden){
  overflow:hidden!important;
  overscroll-behavior:contain;
}

#admin-modal .admin-modal,
#customer-modal .customer-modal{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  max-height:min(90vh,calc(100dvh - 28px))!important;
  overflow:hidden!important;
}

#admin-modal .admin-modal>.modal-header,
#customer-modal .customer-modal>.modal-header{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  z-index:5!important;
}

#admin-modal #admin-modal-body,
#customer-modal #modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable both-edges;
}

/* Visible scrollbar on desktop so long records are discoverable. */
#admin-modal #admin-modal-body,
#customer-modal #modal-body{
  scrollbar-width:auto;
  scrollbar-color:#8ca5be #edf3f8;
}
#admin-modal #admin-modal-body::-webkit-scrollbar,
#customer-modal #modal-body::-webkit-scrollbar{width:10px;height:10px}
#admin-modal #admin-modal-body::-webkit-scrollbar-track,
#customer-modal #modal-body::-webkit-scrollbar-track{background:#edf3f8;border-radius:999px}
#admin-modal #admin-modal-body::-webkit-scrollbar-thumb,
#customer-modal #modal-body::-webkit-scrollbar-thumb{background:#8ca5be;border:2px solid #edf3f8;border-radius:999px;min-height:48px}
#admin-modal #admin-modal-body::-webkit-scrollbar-thumb:hover,
#customer-modal #modal-body::-webkit-scrollbar-thumb:hover{background:#6f8da9}

/* A small cue appears only when JS detects more content below. */
.v1058-scroll-cue{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:12;
  display:none;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:6px 10px;
  border:1px solid #cfe0ef;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#24577e;
  box-shadow:0 8px 24px rgba(15,54,88,.16);
  font-size:10px;
  font-weight:800;
  cursor:pointer;
  backdrop-filter:blur(5px);
}
.v1058-has-scroll.v1058-not-at-bottom>.v1058-scroll-cue{display:inline-flex}
.v1058-scroll-cue:hover{background:#f5faff;border-color:#9fc5e8}
/* An ancestor with touch-action:none prevents Android from panning its
   descendants too. Lock the background via overflow, not the touch gesture. */
body.v1058-modal-lock{overflow:hidden!important;touch-action:auto}
body.v1058-modal-lock #admin-modal,
body.v1058-modal-lock #customer-modal{touch-action:auto}
body.v1058-modal-lock .mobile-bottom-nav,
body.v1058-modal-lock #floating-chat-root{display:none!important}

/* Customer 360: keep long values readable instead of stretching/cutting cards. */
#admin-modal-body .v1047-detail-grid,
#admin-modal-body .v1057-profile-grid,
#admin-modal-body .form-grid{min-width:0}
#admin-modal-body .v1047-detail-grid>*,
#admin-modal-body .v1057-profile-grid>*,
#admin-modal-body .form-grid>*{min-width:0}
#admin-modal-body strong,
#admin-modal-body p,
#admin-modal-body span,
#admin-modal-body small{overflow-wrap:anywhere}
#admin-modal-body input,
#admin-modal-body select,
#admin-modal-body textarea{max-width:100%;box-sizing:border-box}
#admin-modal-body .table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}

/* Sticky form actions remain visible but do not cover the final field. */
#admin-modal-body .v1048-approval-form,
#admin-modal-body .v1049-full-edit{
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}
#admin-modal-body .v1048-approval-form>.call-actions,
#admin-modal-body .v1049-sticky-actions{
  position:sticky!important;
  bottom:-1px!important;
  z-index:8!important;
  margin-left:-4px;
  margin-right:-4px;
  padding:12px 4px 4px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.78),#fff 32%)!important;
}

/* ---------- Page-level overflow safety ---------- */
.workspace,.main,.crm-panel,.v1044-page,.v1047-page{min-width:0}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
img,video,canvas{max-width:100%}

@media(max-width:820px){
  /* Use dynamic viewport height so Safari/Chrome bars and virtual keyboard cannot cut a sheet. */
  #admin-modal:not(.hidden),#customer-modal:not(.hidden){
    padding:max(5px,env(safe-area-inset-top)) 5px max(5px,env(safe-area-inset-bottom))!important;
    place-items:end center!important;
    align-items:flex-end!important;
  }
  #admin-modal .admin-modal,#customer-modal .customer-modal{
    width:100%!important;
    max-width:100%!important;
    height:min(94dvh,900px)!important;
    max-height:calc(100dvh - max(10px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))!important;
    border-radius:20px 20px 12px 12px!important;
  }
  #admin-modal .admin-modal>.modal-header,#customer-modal .customer-modal>.modal-header{
    padding:11px 12px 10px!important;
    background:#fff!important;
  }
  #admin-modal .modal-header h2,#customer-modal .modal-header h2{
    font-size:17px!important;
    line-height:1.2!important;
    max-width:calc(100vw - 80px)!important;
    overflow-wrap:anywhere!important;
  }
  #admin-modal #admin-modal-body,#customer-modal #modal-body{
    padding:10px 11px calc(18px + env(safe-area-inset-bottom))!important;
    scrollbar-gutter:auto;
    scrollbar-width:thin;
  }
  #admin-modal #admin-modal-body::-webkit-scrollbar,#customer-modal #modal-body::-webkit-scrollbar{width:5px}
  #admin-modal #admin-modal-body::-webkit-scrollbar-thumb,#customer-modal #modal-body::-webkit-scrollbar-thumb{border:0;background:#9ab0c5}
  .v1058-scroll-cue{
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    min-width:34px;
    width:34px;
    height:34px;
    justify-content:center;
    padding:0;
    font-size:0;
  }
  .v1058-scroll-cue::after{content:'↓';font-size:17px;line-height:1}

  /* Customer 360 sheet: compact while keeping all data accessible. */
  body.v1043-mobile-ui #admin-modal-body .v1047-detail-head{margin-bottom:2px!important}
  body.v1043-mobile-ui #admin-modal-body .v1047-detail-tabs{position:sticky;top:0;z-index:6;background:#fff;padding-top:4px!important}
  body.v1043-mobile-ui #admin-modal-body .v1057-profile-section{margin-top:6px!important}
  body.v1043-mobile-ui #admin-modal-body .v1057-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.v1043-mobile-ui #admin-modal-body .v1057-profile-grid article{min-height:50px!important;padding:7px 8px!important}
  body.v1043-mobile-ui #admin-modal-body .v1057-profile-grid article.wide{grid-column:1/-1!important}

  /* Generic mobile form/list hardening. */
  .modal-body .form-grid{grid-template-columns:1fr!important;gap:8px!important}
  .modal-body .call-actions{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
  .modal-body .call-actions>.btn{min-height:42px;flex:1 1 120px}
  .modal-body textarea{min-height:72px}
  .modal-body input,.modal-body select,.modal-body textarea{width:100%!important;min-width:0!important}
  .modal-body .table-wrap{overflow:auto!important}

  /* Prevent mobile page controls/tables from escaping the viewport. */
  .main>*{max-width:100%;min-width:0}
  .v1044-filters,.v1045-filters,.v1047-range-controls{max-width:100%}
}

@media(max-width:370px){
  body.v1043-mobile-ui #admin-modal-body .v1057-profile-grid{grid-template-columns:1fr!important}
  body.v1043-mobile-ui #admin-modal-body .v1057-profile-grid article,
  body.v1043-mobile-ui #admin-modal-body .v1057-profile-grid article.wide{grid-column:1!important;border-right:0!important}
  .v1058-scroll-cue{right:7px}
}