/* Property360 Overlay 058 - global mobile regression containment */
:root{
  --p360-visual-vh:100vh;
  --p360-safe-bottom:env(safe-area-inset-bottom,0px);
  --p360-mobile-nav-space:calc(82px + var(--p360-safe-bottom));
}
html,body{max-width:100%;overflow-x:clip}
body{min-height:var(--p360-visual-vh)}
*,*::before,*::after{min-width:0;box-sizing:border-box}
img,video,canvas,svg,iframe{max-width:100%;height:auto}
pre,code,.code,.mono{max-width:100%;overflow-wrap:anywhere;word-break:break-word}

/* Common containers */
main,.app-main,.app-content,.page-content,.content,.container,.shell,.panel,.card,.p360-card,
.form-card,.modal-card,.dialog-card,.section-card{max-width:100%;min-width:0}
.card,.p360-card,.panel,.section-card{overflow-wrap:anywhere}

/* Forms and actions */
input,select,textarea,button,.btn,a.btn{max-width:100%}
textarea{resize:vertical}
.form-row,.form-grid,.action-row,.actions,.toolbar,.button-row,.btn-row,.card-actions,
.modal-actions,.filter-actions,.header-actions,.page-actions,.sticky-actions{
  min-width:0;max-width:100%;flex-wrap:wrap
}
.action-row>* ,.actions>* ,.toolbar>* ,.button-row>* ,.btn-row>* ,.card-actions>* ,
.modal-actions>* ,.filter-actions>* ,.header-actions>* ,.page-actions>*{min-width:0}

/* Tables stay inside their card/page. */
.p360-mobile-table-scroll,.table-responsive,.table-wrap,.data-table-wrap{
  width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch
}
.p360-mobile-table-scroll>table,.table-responsive>table,.table-wrap>table{min-width:max-content;max-width:none}
table{border-collapse:collapse}
th,td{overflow-wrap:anywhere}

/* Dialogs and overlays */
dialog,.modal,.modal-dialog,.dialog,.sheet,.drawer-panel{
  max-width:min(94vw,760px);max-height:calc(var(--p360-visual-vh) - 24px)
}
dialog[open],.modal.is-open,.dialog.is-open{overflow:auto;overscroll-behavior:contain}
.modal-body,.dialog-body,.sheet-body{max-height:calc(var(--p360-visual-vh) - 150px);overflow:auto}

/* Sticky elements must not collide with mobile navigation or keyboard. */
.p360-savebar,.sticky-save,.sticky-actions,.document-toolbar,.mobile-sticky-actions{
  max-width:100%;padding-bottom:max(12px,var(--p360-safe-bottom))
}
body.has-mobile-bottom-nav main,
body.has-mobile-bottom-nav .app-content,
body:has(.mobile-bottom-nav) main,
body:has(.bottom-nav) main{padding-bottom:var(--p360-mobile-nav-space)}

/* Long identifiers, emails, URLs and badges. */
.email,.url,.token,.identifier,.workspace-name,.member-name,.document-title,.listing-title,
.badge,.chip,.tag{overflow-wrap:anywhere;word-break:break-word;white-space:normal}

@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  body{font-size:16px}
  input,select,textarea{font-size:16px!important;width:100%}
  .container,.app-content,.page-content,main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .grid,.form-grid,.stats-grid,.kpi-grid,.cards-grid,.dashboard-grid,.two-col,.three-col,
  .split-layout,.content-grid{grid-template-columns:minmax(0,1fr)!important}
  .action-row,.actions,.toolbar,.button-row,.btn-row,.card-actions,.modal-actions,
  .filter-actions,.header-actions,.page-actions{align-items:stretch}
  .action-row>.btn,.actions>.btn,.button-row>.btn,.btn-row>.btn,.card-actions>.btn,
  .modal-actions>.btn,.filter-actions>.btn,.header-actions>.btn,.page-actions>.btn,
  .action-row>button,.actions>button,.button-row>button,.btn-row>button,.card-actions>button,
  .modal-actions>button,.filter-actions>button,.header-actions>button,.page-actions>button{
    width:100%;justify-content:center;white-space:normal;text-align:center
  }
  .toolbar a,.toolbar button{white-space:normal}
  dialog,.modal,.modal-dialog,.dialog,.sheet{width:calc(100vw - 24px);margin:12px}
  .modal-body,.dialog-body,.sheet-body{max-height:calc(var(--p360-visual-vh) - 132px)}
  .p360-mobile-table-scroll{margin-inline:0}
  .p360-mobile-table-scroll::after{content:'Geser tabel ke samping untuk melihat kolom lain';display:block;font-size:12px;opacity:.62;padding-top:6px}
  .public-sticky-actions,.mobile-sticky-actions{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,var(--p360-safe-bottom))}
}

@media (max-width:420px){
  .container,.app-content,.page-content,main{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .card,.p360-card,.panel,.section-card{border-radius:16px}
  h1{font-size:clamp(24px,8vw,32px)}
  h2{font-size:clamp(20px,6.5vw,27px)}
}