/* =====================================================================
   WPU Research Hub V40.39.1 — System-Wide Responsive Optimization
   Final cascade layer for public, researcher, admin, and auth surfaces.
   Target widths: desktop 1440+, laptop 1024–1366, tablet 768–1024,
   mobile 360–480. This layer fixes layout behavior only.
   ===================================================================== */
:root{
  --wpu-responsive-inline:clamp(12px,2.2vw,32px);
  --wpu-responsive-gap:clamp(12px,1.6vw,24px);
  --wpu-responsive-card-gap:clamp(12px,1.35vw,20px);
  --wpu-responsive-touch:44px;
  --wpu-responsive-readable:78rem;
}

html,body{max-width:100%;min-width:0}
body{overflow-wrap:break-word}
main,.content-area,.main-wrap,.rp-main,.container,.container-fluid,.row,.row>*{min-width:0;max-width:100%}
img,video,picture,svg,canvas,iframe,object,embed{max-width:100%}
img,video{height:auto}
iframe,object,embed{width:100%}
pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
code,kbd,samp{overflow-wrap:anywhere}

/* Prevent long titles, URLs, identifiers, badges and metadata from colliding. */
:is(h1,h2,h3,h4,h5,h6,.page-title,.brand-title,.brand-subtitle,.rp-page-head,.rp-card,.panel,.kpi-card,.card,.alert,.dropdown-item,.form-text,.help,.meta,.badge,.badge-soft,.nav-link,.wpu-footer,.rp-footer){
  overflow-wrap:anywhere;
  word-break:normal;
}
:is(.card,.panel,.kpi-card,.rp-card,.rh-section,.rh-quick-card,.rh-continue-card,.rh-resource-card,.featured-db-card,.usedfor-card,.aira-profile-card)>*{min-width:0}

/* Shared flex/action rows may wrap rather than overlap. */
main :is(.d-flex.justify-content-between,.d-flex.justify-content-end,.d-flex.align-items-center.justify-content-between,.page-actions,.toolbar,.actions,.action-row,.button-row,.filter-actions,.rp-page-head,.rp-workspace-actions){
  column-gap:.75rem;
  row-gap:.625rem;
}
main :is(.d-flex.justify-content-between,.d-flex.align-items-center.justify-content-between,.page-actions,.toolbar,.actions,.action-row,.button-row,.filter-actions){flex-wrap:wrap}
.btn,button,input,select,textarea{max-width:100%}
.btn,button{min-width:0}
.input-group{min-width:0;max-width:100%}
.input-group>.form-control,.input-group>.form-select{min-width:0}

/* Forms: never let a fixed child width force the page wider. */
form,.form-group,.field,.field-shell,.password-wrap,.form-floating{min-width:0;max-width:100%}
.form-control,.form-select,textarea,input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="password"],input[type="number"],input[type="date"],input[type="datetime-local"]{max-width:100%}

/* Tables keep semantic width inside their own scroll region, not on the page. */
.table-responsive,.rp-table-wrap,.table-wrap,[data-responsive-table-wrap]{display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
.table-responsive table,.rp-table-wrap table,.table-wrap table,[data-responsive-table-wrap] table{margin-bottom:0;max-width:none}
.wpu-responsive-wide-table{width:100%}
table{max-width:100%}
th,td{overflow-wrap:anywhere;word-break:normal}

/* Bootstrap/custom grids: children are allowed to shrink. */
:is(.kpi-grid,.dashboard-kpi-grid,.workspace-grid,.research-tools-grid,.literature-grid,.rp-stat-grid,.rp-grid-2,.rp-grid-3,.rp-workspace-grid,.eai-filter-grid,.eai-welcome-grid,.rh-quick-actions__grid,.rh-continue__grid,.rh-resources__grid,.featured-db-grid,.usedfor-grid)>*{min-width:0;max-width:100%}

/* Public shell */
.public-header-shell,.discovery-nav,.wpu-public-nav-container,.wpu-public-nav-responsive,.wpu-public-nav-list{max-width:100%;min-width:0}
.public-header-shell .navbar-brand{min-width:0}
.public-header-shell .brand-text{min-width:0;max-width:100%}
.public-header-shell .brand-text strong,.public-header-shell .brand-text small{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.public-header-shell .dropdown-menu{max-width:min(92vw,520px)}
.public-header-shell .dropdown-item{white-space:normal}
main.container-fluid{max-width:100%}
.rh-container,.wpu-hub-home,.wpu-modern-page-shell,.wpu-phase-e-shell{min-width:0;max-width:100%}
body[data-wpu-public-homepage="1"] .wpu-hub-home::before{left:0!important;right:0!important}
.rh-hero,.rh-quick-actions__grid,.rh-continue__grid,.rh-resources__grid,.rh-journey__steps{min-width:0}
.rh-button,.wpu-action-row .btn,.wpu-chip-row a{max-width:100%;white-space:normal;text-align:center}
.wpu-footer,.wpu-footer-main,.wpu-footer-bottom,.wpu-footer-bottom .container-fluid{max-width:100%}
.wpu-footer-brand,.wpu-footer-copyright,.wpu-footer-bottom-links{min-width:0}
.wpu-developed-badge{max-width:100%}
.wpu-floating-aira{max-width:calc(100vw - 28px)}

/* Researcher shell */
.rp-topbar,.rp-topbar-inner,.rp-brand,.rp-desktop-nav,.rp-main,.rp-footer{min-width:0;max-width:100%}
.rp-brand{min-width:0}
.rp-brand>span{min-width:0}
.rp-brand strong,.rp-brand small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-desktop-nav{flex:1 1 auto;justify-content:flex-end}
.rp-desktop-nav>a,.rp-nav-dropdown,.rp-user-menu{min-width:0}
.rp-grid-2,.rp-grid-3,.rp-stat-grid,.rp-workspace-grid{min-width:0}
.rp-card,.rp-note,.rp-resource-card,.rp-list-item,.rp-radio-card{min-width:0;max-width:100%}
.rp-filter-bar>*{max-width:100%}
.rp-tabs{max-width:100%;scrollbar-width:thin}
.rp-footer-brand,.rp-footer-links{min-width:0;max-width:100%}
.rp-toast-container{max-width:min(100vw,430px)}

/* Admin shell */
.app-shell{min-width:0;max-width:100%}
.sidebar{max-width:min(88vw,330px)}
.sidebar .brand,.sidebar .nav-link,.sidebar .nav-group-title,.sidebar-filter-wrap{min-width:0}
.sidebar .brand>div,.sidebar .nav-link>span,.sidebar .nav-group-label{min-width:0;overflow-wrap:anywhere}
.main-wrap{min-width:0;max-width:100%}
.topbar{height:auto;min-height:72px;max-width:100%}
.topbar>*{min-width:0}
.admin-global-search-wrap{min-width:0}
.content-area{min-width:0;max-width:100%}
.content-area>.row,.content-area>.container,.content-area>.container-fluid{min-width:0;max-width:100%}
.content-area .panel,.content-area .card,.content-area .card-admin,.content-area .kpi-card{min-width:0;max-width:100%}
.content-area .dropdown-menu{max-width:min(92vw,560px)}
.content-area .dropdown-item{white-space:normal}
.admin-global-search-dropdown{max-width:100%}

/* Modals, offcanvas, dropdowns, toasts */
.modal{max-width:100vw}
.modal-dialog{width:auto;max-width:min(var(--bs-modal-width,500px),calc(100vw - 24px));margin-left:auto;margin-right:auto}
.modal-dialog.modal-lg{max-width:min(800px,calc(100vw - 24px))}
.modal-dialog.modal-xl{max-width:min(1140px,calc(100vw - 24px))}
.modal-content{max-width:100%;max-height:calc(100dvh - 24px);overflow:hidden}
.modal-body{min-width:0;max-width:100%;overflow:auto}
.offcanvas{max-width:min(88vw,400px)}
.dropdown-menu{max-width:min(94vw,640px);overflow-wrap:anywhere}
.toast-container{max-width:calc(100vw - 16px)}

/* Media-heavy and chart components */
.chart-container,.chart-wrap,.ratio,.aira-manager-preview,.aira-preview-stage,.rh-aira-card__media{min-width:0;max-width:100%}
canvas{display:block}

/* Laptop / compact desktop */
@media (max-width: 1399.98px){
  .public-header-shell .wpu-public-nav-container{padding-left:clamp(16px,2vw,28px)!important;padding-right:clamp(16px,2vw,28px)!important}
  .public-header-shell .navbar-brand{max-width:330px}
  .public-header-shell .brand-text small{max-width:250px}
  .content-area{padding:20px}
}

@media (min-width: 1200px) and (max-width: 1366px){
  .public-header-shell .navbar-brand{max-width:285px}
  .public-header-shell .discovery-nav .nav-link{padding-left:.48rem!important;padding-right:.48rem!important}
  .public-header-shell .discovery-nav .navbar-nav{gap:1px!important}
  .sidebar{width:286px!important;min-width:286px!important}
  .main-wrap{margin-left:286px!important;width:calc(100% - 286px)!important}
  .content-area{padding:18px}
}

/* Tablet landscape / narrow laptop. Public and researcher nav already switch to mobile. */
@media (max-width: 1199.98px){
  .public-header-shell .navbar-brand{max-width:min(72vw,420px)}
  .public-header-shell .navbar-collapse{max-width:100%}
  .public-header-shell .wpu-public-nav-list{align-items:stretch!important;width:100%;padding:.5rem 0;flex-direction:column!important;flex-wrap:nowrap!important;overflow:visible!important}
  .public-header-shell .wpu-public-nav-responsive,.public-header-shell .wpu-public-nav-always-visible{width:100%;max-width:100%;min-width:0}
  .public-header-shell .wpu-public-nav-list>.nav-item{width:100%}
  .public-header-shell .wpu-public-nav-list .nav-link,.public-header-shell .nav-admin-btn{width:100%;justify-content:flex-start!important;white-space:normal!important}
  .public-header-shell .dropdown-menu{position:static!important;width:100%;max-width:100%;box-shadow:none!important}
  .rh-hero{grid-template-columns:minmax(0,1fr)!important}
  .rh-quick-actions__grid,.rh-continue__grid,.rh-resources__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rh-journey__steps{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  .rp-desktop-nav{display:none!important}
  .rp-mobile-toggle{display:grid!important;place-items:center;flex:0 0 var(--wpu-responsive-touch)}
  .rp-topbar-inner{padding-left:var(--wpu-responsive-inline);padding-right:var(--wpu-responsive-inline)}
  .rp-main{padding:clamp(18px,2.4vw,28px)}
  .rp-grid-2{grid-template-columns:minmax(0,1fr)!important}
  .rp-grid-3,.rp-workspace-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rp-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .topbar{padding-left:18px;padding-right:18px}
}

/* Tablet portrait and smaller */
@media (max-width: 991.98px){
  .content-area{padding:16px}
  .content-area :is(.row.g-3,.row.g-4){--bs-gutter-x:1rem}
  .topbar{padding:10px 14px}
  .admin-global-search-wrap{flex-basis:100%;width:100%;max-width:none;margin-left:0;margin-right:0}
  .kpi-grid,.dashboard-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .aira-manager-preview{grid-template-columns:minmax(0,1fr)!important}
  .rh-journey__steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wpu-footer-bottom .container-fluid{padding-left:20px!important;padding-right:20px!important}
  .wpu-footer-bottom .row{row-gap:12px}
  .wpu-footer-developed{text-align:center}
}

@media (max-width: 767.98px){
  :root{--wpu-responsive-inline:14px;--wpu-responsive-gap:14px}
  main :is(.d-flex.justify-content-between,.d-flex.align-items-center.justify-content-between,.page-actions,.toolbar,.actions,.action-row,.button-row,.filter-actions){align-items:stretch!important}
  main :is(.d-flex.justify-content-between,.d-flex.align-items-center.justify-content-between,.page-actions,.toolbar,.actions,.action-row,.button-row,.filter-actions)>.btn,
  main :is(.d-flex.justify-content-between,.d-flex.align-items-center.justify-content-between,.page-actions,.toolbar,.actions,.action-row,.button-row,.filter-actions)>a.btn{max-width:100%}
  .btn,button{white-space:normal}
  .input-group{flex-wrap:nowrap}
  .input-group>.btn{flex:0 0 auto}

  .public-header-shell .navbar-brand{max-width:calc(100vw - 86px)}
  .public-header-shell .brand-logo{flex:0 0 auto}
  .public-header-shell .brand-text strong{font-size:.9rem!important}
  .public-header-shell .brand-text small{font-size:.64rem!important;max-width:58vw}
  .rh-container{width:calc(100% - 24px)!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
  .rh-quick-actions__grid,.rh-continue__grid,.rh-resources__grid,.rh-journey__steps{grid-template-columns:minmax(0,1fr)!important}
  .rh-section__header{flex-wrap:wrap;gap:8px}
  .rh-hero,.rh-section{min-width:0}
  .wpu-action-row{align-items:stretch}
  .wpu-action-row .btn{flex:1 1 100%}
  .wpu-footer-main{padding-left:18px!important;padding-right:18px!important}
  .wpu-footer-brand{align-items:flex-start!important}
  .wpu-developed-badge{white-space:normal!important;text-align:left}
  .wpu-floating-aira{right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 24px)!important;padding:11px 14px!important;white-space:normal!important;text-align:center}

  .rp-topbar-inner{gap:.65rem}
  .rp-brand{max-width:calc(100% - 58px)}
  .rp-brand img{flex:0 0 auto}
  .rp-main{padding:14px}
  .rp-page-head{flex-direction:column;align-items:stretch}
  .rp-grid-3,.rp-workspace-grid,.rp-stat-grid{grid-template-columns:minmax(0,1fr)!important}
  .rp-resource-card{grid-template-columns:56px minmax(0,1fr)!important}
  .rp-resource-actions{grid-column:1/-1;justify-content:flex-start}
  .rp-list-item,.rp-note-head{flex-direction:column}
  .rp-filter-bar{align-items:stretch}
  .rp-filter-bar>*{width:100%;min-width:0!important}
  .rp-filter-bar .rp-filter-grow{min-width:0!important}
  .rp-footer{flex-direction:column;padding-left:14px;padding-right:14px}
  .rp-footer-links{gap:.65rem 1rem}
  .rp-toast-container{left:8px!important;right:8px!important;width:auto!important;padding:8px!important}

  .topbar{align-items:stretch!important;gap:10px!important}
  .topbar>.d-flex{max-width:100%}
  .content-area{padding:14px}
  .kpi-grid,.dashboard-kpi-grid{grid-template-columns:minmax(0,1fr)!important}
  .panel,.card-admin,.kpi-card{padding:14px}
  .page-title{font-size:clamp(1.3rem,6vw,1.75rem)}
  .admin-global-search .input-group{width:100%}
  .dropdown-menu{font-size:.9rem}

  .modal-dialog,.modal-dialog.modal-sm,.modal-dialog.modal-lg,.modal-dialog.modal-xl{max-width:calc(100vw - 16px);margin:8px auto}
  .modal-content{max-height:calc(100dvh - 16px)}
  .modal-header,.modal-body,.modal-footer{padding-left:14px;padding-right:14px}
  .modal-footer{flex-wrap:wrap}
  .modal-footer>.btn{flex:1 1 auto}
}

@media (max-width: 575.98px){
  .topbar>.d-flex:last-child{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .topbar .btn{min-height:var(--wpu-responsive-touch)}
  .sidebar{max-width:88vw!important}
  .content-area{padding:12px}
  .panel,.card-admin,.kpi-card,.rp-card{border-radius:14px}
  .pagination{flex-wrap:wrap;gap:4px}
  .pagination .page-link{min-width:40px;min-height:40px;display:grid;place-items:center;padding:.35rem .55rem}
  .nav-tabs,.nav-pills{max-width:100%;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .nav-tabs .nav-link,.nav-pills .nav-link{white-space:nowrap}
  .wpu-footer-bottom-links{gap:8px 12px!important}
  [data-responsive-table-wrap]>.wpu-responsive-wide-table{min-width:var(--wpu-table-min-width,40rem)!important}
  .wpu-floating-aira{width:52px!important;height:52px!important;min-width:52px!important;max-width:52px!important;padding:0!important;justify-content:center!important;font-size:0!important;line-height:1!important}
  .wpu-floating-aira .wpu-floating-aira-icon,.wpu-floating-aira .wpu-floating-aira-icon i{font-size:1.15rem!important;line-height:1!important}
}

@media (max-width: 479.98px){
  .public-header-shell .navbar-brand{gap:8px!important}
  .public-header-shell .brand-logo{width:42px!important;height:42px!important;min-width:42px!important}
  .public-header-shell .brand-text strong{font-size:.82rem!important}
  .public-header-shell .brand-text small{font-size:.6rem!important;max-width:54vw}
  .rh-container{width:calc(100% - 20px)!important}
  .rh-section{padding-left:14px!important;padding-right:14px!important}

  .rp-brand img{width:40px!important;height:40px!important}
  .rp-brand strong{font-size:.82rem!important}
  .rp-brand small{display:none!important}
  .rp-mobile-toggle{width:42px;height:42px}
  .rp-auth-card{padding:14px!important}

  .topbar{padding-left:10px;padding-right:10px}
  .topbar .small{font-size:.7rem}
  .topbar strong{font-size:.86rem}
  .admin-global-search .form-control{font-size:.86rem}
  .content-area{padding:10px}
  .panel,.card-admin,.kpi-card{padding:12px}

  .login-options{gap:10px;flex-wrap:wrap}
  .wpu-login-page{padding:14px!important}
  .wpu-login-page .login-card{max-width:100%}
  .wpu-login-page .login-card-header,.wpu-login-page .login-form{min-width:0}
}

/* Very narrow devices: preserve content and allow natural vertical growth. */
@media (max-width: 379.98px){
  .public-header-shell .brand-text small{display:none!important}
  .rp-brand strong{max-width:190px}
  .btn,button{font-size:.875rem}
  .modal-footer>.btn{flex-basis:100%}
}

/* Accessible safe areas and reduced motion. */
@supports (padding:max(0px)){
  .wpu-floating-aira{right:max(12px,env(safe-area-inset-right))!important}
  .rp-footer,.wpu-footer-bottom{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* V40.39.1 final mobile navigation authority.
   Older V31/V40 homepage layers intentionally force a horizontal/max-content
   strip on phones. That creates cramped labels and makes dropdown geometry
   difficult to keep inside 360-480px viewports. Keep those legacy behaviors
   above phone size, but make the final shared layer authoritative on phones. */
@media (max-width: 575.98px){
  html body.wpu-site-header-active .public-header-shell #publicNav.wpu-public-nav-always-visible,
  html body.wpu-homepage-header-active .public-header-shell #publicNav,
  html body[data-wpu-public-homepage="1"] .public-header-shell #publicNav{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:.35rem 0 0!important;
  }
  html body.wpu-site-header-active .public-header-shell .wpu-public-nav-list,
  html body.wpu-homepage-header-active .public-header-shell .wpu-public-nav-list,
  html body.wpu-phase-e-page[data-wpu-public-homepage="1"] .public-header-shell .wpu-public-nav-list,
  html body[data-wpu-design-system="modern-fluent-v40.9"] .public-header-shell .wpu-public-nav-list{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:4px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    overflow:visible!important;
    margin:0!important;
    padding:.3rem 0!important;
  }
  html body.wpu-site-header-active .public-header-shell .wpu-public-nav-list>.nav-item,
  html body.wpu-homepage-header-active .public-header-shell .wpu-public-nav-list>.nav-item,
  html body.wpu-phase-e-page[data-wpu-public-homepage="1"] .public-header-shell .wpu-public-nav-list>.nav-item{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    flex:0 1 auto!important;
  }
  html body.wpu-site-header-active .public-header-shell .wpu-public-nav-list .nav-link,
  html body.wpu-site-header-active .public-header-shell .wpu-public-nav-list .nav-admin-btn{
    width:100%!important;
    max-width:100%!important;
    min-height:var(--wpu-responsive-touch)!important;
    justify-content:flex-start!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}
