/*
 * Nexus Admin responsive contract
 * Loaded after the visual/theme layers so layout rules cannot be undone by
 * page-specific desktop refinements. Colours intentionally remain elsewhere.
 */

:root{
  --nx-page-gutter:clamp(.7rem,1.5vw,1.5rem);
}

html,
body,
.app{
  max-width:100%;
  overflow-x:hidden;
}

.app,
.topbar,
.main,
.view,
.view>*{
  min-width:0;
  box-sizing:border-box;
}

.main{
  width:100%;
  padding:var(--nx-page-gutter)!important;
  overflow-x:hidden!important;
}

.view{
  width:100%;
  max-width:100%;
}

.sidebar{
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

/* The old full-viewport brand canvas added 21px of document overflow. */
.topbar>.topbar-nexus-brand,
.app.sidebar-collapsed .topbar>.topbar-nexus-brand{
  width:min(32rem,calc(100vw - var(--sidebar-w) - 1rem))!important;
  max-width:calc(100vw - var(--sidebar-w) - 1rem)!important;
}

.page-head{
  min-width:0;
  max-width:100%;
}

.page-head>div,
.page-head h1,
.processing-engine-copy,
.processing-engine-name-row{
  min-width:0;
}

.page-head h1,
.processing-engine-name-row strong{
  overflow-wrap:anywhere;
}

/* Toolbars and form controls must be allowed to shrink inside their grid cell. */
:is(
  .smart-search,.smart-search-row,.media-filter-row,.section-toolbar,
  .machines-toolbar,.folder-browser-controls,.settings-layout,.settings-panel,
  .search-field,.smart-box,.machines-search,.multi-select,.segmented-control
){
  min-width:0!important;
  max-width:100%;
  box-sizing:border-box;
}

#view-media .smart-search{
  width:100%!important;
}

#view-media .media-filter-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  overflow:visible!important;
}

#view-media .media-filter-group,
#view-media .media-filter-group>:is(.segmented-control,.multi-select),
#view-media .media-filter-group .multi-select-trigger{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}

#view-media .multi-select-trigger-text,
#view-media .multi-select-placeholder{
  min-width:0!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Tables own their horizontal scroll instead of widening the page. */
:is(
  .table-wrap,.processing-table-wrap,.folder-table-viewport,
  #overviewProcessingList,#overviewFolderTableWrap
){
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto!important;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

.processing-panel,
.folder-browser,
.shared-folder-workspace,
.reviews-panel,
.team-list{
  min-width:0!important;
  max-width:100%!important;
}

/* Dialogs use the visible viewport and keep their actions/content reachable. */
:is(
  .media-modal-overlay,.review-modal-overlay,.shared-folder-modal-overlay,
  .team-detail-overlay,.team-add-overlay,.team-confirm-overlay,
  .team-create-confirm-overlay,.machine-confirm-overlay,
  .worker-pairing-overlay,.machine-detail-overlay,.overlay
){
  box-sizing:border-box;
  padding:clamp(.5rem,2vw,1.25rem)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
}

:is(
  .media-modal,.review-modal,.shared-folder-modal,.team-detail-modal,
  .team-add-modal,.team-confirm-dialog,.team-create-confirm-dialog,
  .machine-confirm-dialog,.worker-pairing-modal,.machine-detail-modal,
  .drawer,.modal
){
  max-width:100%!important;
  max-height:calc(100dvh - clamp(1rem,4vw,2.5rem))!important;
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box;
}

:is(
  .media-modal-head,.review-modal-head,.shared-folder-modal-head,
  .team-detail-head,.team-add-head,.worker-pairing-head,
  .machine-detail-head,.modal-head,.modal-actions,.review-modal-actions
){
  min-width:0;
}

:is(
  .media-modal-title,.review-modal-title,.shared-folder-modal-title,
  .team-detail-title,.team-add-title,.worker-pairing-title,
  .machine-detail-title
){
  min-width:0;
}

:is(
  .media-modal-title,.review-modal-title,.shared-folder-modal-title,
  .team-detail-title,.team-add-title,.worker-pairing-title,
  .machine-detail-title
) :is(strong,span){
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:68.75rem){
  :root{--sidebar-w:4.5rem}

  .sidebar .brand{
    justify-content:center;
  }

  .sidebar{
    padding-inline:.25rem!important;
  }

  .sidebar .nav{
    width:100%!important;
    margin-inline:0!important;
  }

  .sidebar :is(.brand-copy,.nav-btn>span,.nav-badge-label,.system-card){
    display:none!important;
  }

  .sidebar .nav-btn{
    width:100%!important;
    justify-content:center!important;
    padding-inline:.3rem!important;
  }

  .topbar>.topbar-nexus-brand{
    left:calc(50% - (var(--sidebar-w)/2))!important;
  }

  #view-media .media-filter-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  #view-folders .shared-folder-workspace:not(.machine-collapsed){
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(0,1fr)!important;
  }

  #view-folders .shared-folder-workspace:not(.machine-collapsed)>.machine-panel{
    width:100%!important;
    max-width:none!important;
    max-height:min(24rem,42vh)!important;
  }

  #view-settings .settings-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }

  #view-settings .settings-nav{
    width:100%!important;
    display:flex!important;
    gap:.45rem!important;
    overflow-x:auto!important;
    padding:.45rem!important;
  }

  #view-settings .settings-tab{
    width:auto!important;
    min-width:max-content!important;
    flex:1 0 auto!important;
  }

  /* Team becomes a compact information card instead of a 760px table. */
  #view-team .team-filter-search-row{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  html[data-theme] body #view-team .team-list{
    width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  html[data-theme] body #view-team .team-row{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    padding:.75rem!important;
    display:grid!important;
    grid-template-columns:3.35rem repeat(2,minmax(0,1fr)) 2.4rem!important;
    grid-template-rows:auto auto auto!important;
    gap:.65rem!important;
  }

  #view-team .team-avatar{
    grid-column:1!important;
    grid-row:1!important;
  }

  #view-team .team-identity{
    grid-column:2/4!important;
    grid-row:1!important;
    align-self:center;
  }

  #view-team .team-row-open{
    grid-column:4!important;
    grid-row:1!important;
    align-self:center;
  }

  #view-team .team-meta{
    width:100%!important;
    min-width:0!important;
  }

  #view-team .team-meta.role{grid-column:1/3!important;grid-row:2!important}
  #view-team .team-meta.status{grid-column:3/5!important;grid-row:2!important}
  #view-team .team-meta.access{grid-column:1/3!important;grid-row:3!important}
  #view-team .team-meta.activity{grid-column:3/5!important;grid-row:3!important}
}

@media(max-width:48rem){
  :root{
    --sidebar-w:4rem;
    --nx-page-gutter:.65rem;
  }

  .sidebar .nav-btn>svg{
    width:3rem!important;
    height:3rem!important;
    flex-basis:3rem!important;
  }

  .topbar>.topbar-nexus-brand,
  .app.sidebar-collapsed .topbar>.topbar-nexus-brand{
    width:min(22rem,calc(100vw - var(--sidebar-w) - .75rem))!important;
    max-width:calc(100vw - var(--sidebar-w) - .75rem)!important;
  }

  .page-head{
    width:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:flex-start!important;
    gap:.65rem!important;
  }

  .page-head>:is(button,.btn){
    max-width:100%;
  }

  #view-processing .processing-page-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }

  #view-processing .processing-engine-status{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }

  #view-media .smart-search-row,
  #view-media .media-filter-row,
  #view-reviews .reviews-filter-search-row,
  #view-team .team-filter-search-row,
  #view-processing .processing-filter-search-row,
  #view-folders .folder-browser-controls{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:.55rem!important;
  }

  #view-media :is(.media-view-toggle,.media-filter-group),
  #view-reviews :is(.review-status-segments,.review-search-field,.review-view-toggle),
  #view-team :is(.team-search-field,.team-role-segments),
  #view-processing :is(.processing-search-field,.processing-state-dropdown),
  #view-folders .folder-browser-controls>*{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    grid-column:1!important;
    grid-row:auto!important;
  }

  #view-workers .machines-toolbar{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:.55rem!important;
  }

  #view-workers .machines-search{
    width:100%!important;
    min-width:0!important;
  }

  #view-workers #machineStateDropdown{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    grid-column:1/-1!important;
    grid-row:2!important;
  }

  #view-workers #addWorkerButton{
    width:auto!important;
    min-width:3.25rem!important;
    grid-column:2!important;
    grid-row:1!important;
  }

  #view-workers #addWorkerButton>span{
    display:none!important;
  }

  #view-settings .settings-nav{
    scrollbar-width:thin;
  }

  #view-settings .settings-panel :is(.settings-form-grid,.password-form-grid,.setting-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }

  #view-settings .setting-row{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
    gap:.65rem!important;
  }

  #view-settings :is(.proxy-storage-card-head,.settings-network-address-line){
    min-width:0!important;
    flex-wrap:wrap!important;
  }

  #view-settings .settings-network-card{
    min-width:0!important;
    max-width:100%!important;
  }

  #view-settings .settings-network-copy code{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
  }

  #view-help .help-brand-row{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  #view-help :is(.help-grid,.help-topics,.help-bullets,.help-intro-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }

  #view-help .help-flow{
    flex-wrap:wrap!important;
  }

  /* All substantial dialog layouts become a single continuous scroller. */
  :is(
    .media-modal-layout,.review-modal-layout,.shared-folder-modal-layout,
    .team-detail-overview,.team-detail-info-grid,.team-permission-list,
    .team-add-form-grid,.machine-detail-grid,.machine-detail-info-grid
  ){
    grid-template-columns:minmax(0,1fr)!important;
  }

  :is(.media-modal,.review-modal,.shared-folder-modal,.team-detail-modal,.team-add-modal,.machine-detail-modal){
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  :is(
    .media-modal-layout,.review-modal-body,.shared-folder-modal-body,
    .team-detail-body,.team-add-body,.machine-detail-body
  ){
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  :is(.modal-actions,.review-modal-actions,.team-add-actions,.worker-pairing-actions){
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;
  }

  :is(.modal-actions,.review-modal-actions,.team-add-actions,.worker-pairing-actions)>button{
    width:100%!important;
    min-width:0!important;
  }
}

@media(max-width:36rem){
  :root{
    --sidebar-w:3.65rem;
    --nx-page-gutter:.5rem;
  }

  .sidebar{
    padding-inline:.2rem!important;
  }

  .sidebar .brand{
    padding-inline:0!important;
  }

  .sidebar .nav-btn{
    min-height:3.65rem!important;
  }

  .sidebar .nav-btn>svg{
    width:2.7rem!important;
    height:2.7rem!important;
    flex-basis:2.7rem!important;
  }

  .topbar>.header-tools{
    max-width:calc(100% - .5rem)!important;
  }

  #view-processing .processing-engine-status{
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
  }

  #view-processing .processing-engine-badge{
    grid-column:1/-1!important;
    width:100%!important;
    justify-content:center!important;
  }

  html[data-theme] body #view-team .team-row{
    grid-template-columns:3.2rem minmax(0,1fr) 2.35rem!important;
    grid-template-rows:auto repeat(4,auto)!important;
  }

  #view-team .team-identity{grid-column:2!important;grid-row:1!important}
  #view-team .team-row-open{grid-column:3!important;grid-row:1!important}
  #view-team .team-meta.role{grid-column:1/-1!important;grid-row:2!important}
  #view-team .team-meta.status{grid-column:1/-1!important;grid-row:3!important}
  #view-team .team-meta.access{grid-column:1/-1!important;grid-row:4!important}
  #view-team .team-meta.activity{grid-column:1/-1!important;grid-row:5!important}

  #view-team .team-meta label{
    font-size:.65rem!important;
  }

  #view-team .team-meta strong{
    font-size:.78rem!important;
  }

  #view-settings .settings-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    overflow:visible!important;
  }

  #view-settings .settings-tab{
    width:100%!important;
    min-width:0!important;
  }

  #view-settings .proxy-resolution-card{
    grid-template-columns:3rem minmax(0,1fr)!important;
  }

  #view-settings .proxy-resolution-card>:last-child{
    grid-column:1/-1!important;
    width:100%!important;
  }

  #view-settings .proxy-storage-card-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  #view-settings .proxy-storage-usage{
    width:100%!important;
    text-align:left!important;
  }

  :is(.modal-actions,.review-modal-actions,.team-add-actions,.worker-pairing-actions){
    grid-template-columns:minmax(0,1fr)!important;
  }

  .toast{
    left:.5rem!important;
    right:.5rem!important;
    bottom:.5rem!important;
    width:auto!important;
    max-width:none!important;
  }
}

@media(max-height:42rem){
  .sidebar .brand{min-height:3.5rem!important}
  .sidebar .nav-btn{min-height:3.25rem!important}
  .sidebar-nav{gap:.15rem!important}
}

@supports(overflow:clip){
  html,
  body,
  .app{
    overflow-x:clip;
  }
}

/* Media filters keep their original compact, content-sized contract. They
   wrap when space runs out but never expand into full-width grid columns. */
#view-media .media-filter-row{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:.55rem!important;
  overflow:visible!important;
}
#view-media .media-filter-group{
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  flex:0 1 auto!important;
}
#view-media .media-filter-group>.segmented-control{
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
}
#view-media .media-filter-group>.multi-select{
  width:10.75rem!important;
  min-width:9.75rem!important;
  max-width:10.75rem!important;
  flex:0 1 10.75rem!important;
}
#view-media .media-filter-group .multi-select-trigger{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
#view-media .media-view-toggle{
  width:6.4rem!important;
  min-width:6.4rem!important;
  justify-self:end!important;
}

@media(max-width:32rem){
  #view-media .media-filter-group>.multi-select{
    width:min(10.75rem,100%)!important;
    min-width:min(9.75rem,100%)!important;
  }
}