/* =========================================================
   FINAL RESPONSIVE / FULL-VIEWPORT FIX - 2026-09-04
   Loaded last so it can safely override legacy layout rules.
   ========================================================= */
html{
  width:100%;
  min-width:0;
  min-height:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  min-width:0;
  max-width:none;
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
}
.layout,
.layout.offcanvas-layout,
.layout.overlay-layout{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:100vh!important;
  min-height:100dvh!important;
}
.main,
.offcanvas-layout .main,
.overlay-layout .main{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  margin:0!important;
  overflow-x:hidden!important;
}
.main > *,
.card,
.page-title,
.modern-card,
.table-toolbar,
.form-card,
.chart-card{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
img,svg,video,canvas,iframe{
  max-width:100%;
}
img,video{height:auto}
input,select,textarea,button{
  max-width:100%;
  min-width:0;
}

/* Any data table can scroll inside its own area instead of widening the page. */
.table-responsive,
.responsive-table-wrap{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.responsive-table-wrap > table,
.table-responsive > table{
  width:100%;
  margin:0;
}

/* Flexible toolbars/actions. */
.actions,
.table-toolbar,
.report-toolbar,
.segmented,
.form-footer{
  min-width:0;
  flex-wrap:wrap;
}
.actions > *,
.table-toolbar > *,
.form-footer > *{
  min-width:0;
}

/* Keep common grids fluid before reaching phone size. */
@media (max-width:1200px){
  .grid-4,.pivot-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .chart-row{grid-template-columns:minmax(0,1fr)!important}
}

@media (max-width:900px){
  .offcanvas-layout .main,
  .overlay-layout .main,
  .main{
    width:100%!important;
    max-width:none!important;
    padding:84px 16px 22px!important;
  }
  .page-title{padding:18px!important;border-radius:20px!important}
  .page-title h1{font-size:clamp(22px,7vw,30px)!important;overflow-wrap:anywhere}
  .card,.modern-card{padding:16px!important;border-radius:20px!important}
  .grid-4,.pivot-controls,.pivot-summary,.chart-row,.form-grid,.profile-content-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .notify-banner{align-items:flex-start!important;flex-direction:column!important}
  .notify-banner a{width:100%;text-align:center}
  .table-toolbar{align-items:stretch!important}
  .table-toolbar .table-search,
  .table-toolbar input[type="search"],
  .table-toolbar input[type="text"]{width:100%!important;max-width:none!important}
  .modal{padding:16px!important}
  .modal-card{width:100%!important;max-width:100%!important}
}

@media (max-width:640px){
  body{font-size:15px!important}
  .offcanvas-layout .main,
  .overlay-layout .main,
  .main{padding:80px 12px 18px!important}
  .sidebar.offcanvas-sidebar,
  .sidebar.overlay-sidebar{
    width:min(304px,calc(100vw - 18px))!important;
    max-width:calc(100vw - 18px)!important;
  }
  .sidebar-toggle,
  .sidebar-toggle[data-sidebar-open]{
    left:12px!important;
    top:12px!important;
    width:52px!important;
    height:52px!important;
  }
  .grid-4,.grid-3,.grid-2,.app-grid,.role-check-grid,.attach-switch,.flow-step-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .actions,
  .form-footer{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .actions .btn,
  .form-footer .btn,
  .actions button,
  .actions a{
    width:100%;
    justify-content:center;
  }
  .pagination{gap:6px!important;flex-wrap:wrap!important}
  .pagination .btn,.pagination .page-num{min-width:42px}
  .modern-login,.login-shell{width:100%;min-width:0}
  .login-shell{padding:20px 12px!important}
  .modern-login-panel{width:100%!important;max-width:560px!important}
  .login-brand-row{gap:12px!important}
  .modern-login-panel .login-brand-copy h1{font-size:clamp(24px,8vw,34px)!important}
}

@media (min-width:1601px){
  /* Previous UX stylesheet capped the content at 1600px; remove that cap. */
  .main{max-width:none!important}
}

@media print{
  html,body,.layout,.main{overflow:visible!important;width:100%!important;max-width:none!important}
  .responsive-table-wrap,.table-responsive{overflow:visible!important}
}