/* AURA ERP INTELLIGENCE OS v0.9.19
   Global workspace organization patch.
   Purpose: one predictable app viewport, one primary content scroll,
   compact Admin navigation, no long blank canvas from the 87-control explorer.
*/

@media (min-width: 861px){
  html, body{
    height:100%;
    overflow:hidden;
  }

  body.aura-authenticated .app-shell{
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  body.aura-authenticated .sidebar{
    position:relative;
    top:auto;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  body.aura-authenticated .sidebar .nav-stack{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }

  body.aura-authenticated .workspace{
    height:100dvh;
    min-height:0;
    display:grid;
    grid-template-rows:60px minmax(0,1fr);
    overflow:hidden;
  }

  body.aura-authenticated .topbar{
    position:relative;
    top:auto;
    min-width:0;
  }

  body.aura-authenticated .content{
    width:100%;
    height:100%;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    scroll-padding-top:18px;
  }
}

/* Predictable page rhythm across every module. */
.module-page,
.crm-page,
.project-page,
.design-page,
.admin-page,
.admin-main{
  min-width:0;
  width:100%;
}

.module-page{
  align-content:start;
}

.page-head,
.module-hero,
.project-command-hero,
.admin-control-head,
.panel-head{
  min-width:0;
}

.page-head > *,
.module-hero > *,
.project-command-hero > *,
.admin-control-head > *,
.panel-head > *{
  min-width:0;
}

/* Long tables/forms must scroll inside their own surface rather than widening the page. */
.data-table-wrap,
.admin-inline-table,
.permission-matrix,
.project-tabs,
.admin-shortcuts{
  max-width:100%;
}

/* Admin navigation: categories stay compact. Only the active category is expanded
   (the JS runtime exposes all matching groups while searching). */
.admin-shell{
  grid-template-columns:minmax(252px,286px) minmax(0,1fr)!important;
  gap:18px!important;
  align-items:start!important;
}

.admin-explorer{
  position:relative!important;
  top:auto!important;
  align-self:start!important;
  max-height:none!important;
  overflow:visible!important;
}

/* The Admin explorer travels with the page. Its height stays controlled because
   only the active domain is expanded; this avoids both a frozen navigator and
   the former multi-thousand-pixel blank canvas. */
.admin-explorer-head{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  box-shadow:none;
}

.admin-explorer-group{
  padding-bottom:5px!important;
}

.admin-explorer-group.collapsed{
  padding-bottom:3px!important;
}

.admin-explorer-group.collapsed .admin-group-title{
  color:var(--text-2);
}

.admin-explorer-group.expanded .admin-group-title{
  background:color-mix(in srgb,var(--primary) 7%,var(--surface-solid));
}

.admin-group-controls{
  display:grid;
  gap:1px;
  padding:2px 0 4px;
}

.admin-history-link{
  margin-top:4px;
  padding-top:7px!important;
  border-top:1px solid var(--border);
}

.admin-history-link .admin-control-link{
  padding-left:12px!important;
}

/* The 87-control domain bar is a navigation rail, not another large panel. */
.admin-shortcuts{
  gap:6px!important;
  padding:0 0 12px!important;
  margin:0 0 4px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
}

.admin-shortcuts button{
  flex:0 0 auto;
  min-height:34px;
}

/* Keep detail surfaces visually grouped and prevent over-wide fields. */
.admin-main{
  display:grid;
  align-content:start;
  gap:0;
}

.admin-main > .admin-agent-panel{
  margin-top:16px;
  margin-bottom:0;
}

.admin-main > .admin-agent-panel,
.admin-main > .admin-control-head,
.admin-main > .admin-control-insight,
.admin-main > .panel,
.admin-main > .admin-control-map,
.admin-main > .admin-overview-grid,
.admin-main > .admin-advanced,
.admin-main > .admin-recent{
  width:100%;
  min-width:0;
}

.admin-editor{
  overflow:clip;
}

.admin-form-grid{
  align-items:start;
}

.admin-field input,
.admin-field select,
.admin-field textarea{
  min-width:0;
}

/* v0.9.19 UAT: one edit action row only. Keep it in normal document flow so
   long forms never have Save/Cancel floating over fields. */
.admin-editor-actions{
  position:static!important;
  z-index:auto;
  margin:22px 0 0!important;
  padding:16px 0 0!important;
  background:transparent!important;
  border-top:1px solid var(--border)!important;
  backdrop-filter:none!important;
}

/* Empty states should read as intentional content, not a large unused page. */
.route-empty,
.table-empty,
.admin-record-cards:empty{
  max-width:100%;
}

/* Global dialog safety. */
.modal-card:not(.design-modal-card){
  max-height:calc(100dvh - 32px);
  overflow:auto;
  overscroll-behavior:contain;
}

/* More consistent scrollbars across the application. */
.content,
.nav-stack,
.admin-explorer,
.data-table-wrap,
.admin-inline-table,
.modal-card{
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
.content::-webkit-scrollbar,
.nav-stack::-webkit-scrollbar,
.admin-explorer::-webkit-scrollbar,
.data-table-wrap::-webkit-scrollbar,
.admin-inline-table::-webkit-scrollbar,
.modal-card::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.content::-webkit-scrollbar-thumb,
.nav-stack::-webkit-scrollbar-thumb,
.admin-explorer::-webkit-scrollbar-thumb,
.data-table-wrap::-webkit-scrollbar-thumb,
.admin-inline-table::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb{
  background:var(--border-strong);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

/* Tablet: keep the two-column Admin workspace while there is enough room,
   then switch cleanly to one column. */
@media (max-width: 1150px) and (min-width: 821px){
  .admin-shell{
    grid-template-columns:236px minmax(0,1fr)!important;
    gap:14px!important;
  }
  .admin-control-head{
    gap:14px;
  }
  .admin-agent-form{
    grid-template-columns:minmax(180px,.8fr) minmax(220px,1.4fr) auto;
  }
}


/* Sandstone's visual breakpoint is wider than the functional mobile sidebar.
   Keep 861–980px in the desktop/tablet two-column shell so navigation never stacks
   above the workspace or disappears without a menu button. */
@media (min-width: 861px) and (max-width: 980px){
  .app-shell{
    grid-template-columns:220px minmax(0,1fr)!important;
  }
  .sidebar{
    width:auto!important;
    position:relative!important;
    transform:none!important;
    box-shadow:none;
  }
  .content{
    padding:20px 16px 40px!important;
  }
  .admin-shell{
    grid-template-columns:220px minmax(0,1fr)!important;
    gap:12px!important;
  }
}

/* Mobile/tablet page flow uses the normal document layout: no nested full-app trap. */
@media (max-width: 860px){
  html, body{
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
  }

  body.aura-authenticated .app-shell{
    min-height:100dvh;
    height:auto;
    overflow:visible;
  }

  body.aura-authenticated .workspace{
    min-height:100dvh;
    height:auto;
    display:block;
    overflow:visible;
  }

  body.aura-authenticated .topbar{
    position:sticky;
    top:0;
  }

  body.aura-authenticated .content{
    height:auto;
    overflow:visible;
  }
}

@media (max-width: 820px){
  .admin-shell{
    grid-template-columns:1fr!important;
  }

  .admin-explorer{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .admin-explorer-head{
    position:relative!important;
    top:auto!important;
    box-shadow:none;
  }

  .admin-group-controls{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px;
  }

  .admin-control-link{
    padding-left:12px!important;
  }

  .admin-editor-actions{
    margin:18px -14px -14px!important;
    padding:12px 14px!important;
  }
}

@media (max-width: 560px){
  .admin-group-controls{
    grid-template-columns:1fr;
  }

  .admin-shortcuts button{
    min-width:46px!important;
  }

  .admin-control-head{
    gap:12px;
  }

  .admin-head-actions{
    width:100%;
  }

  .admin-head-actions .btn{
    flex:1 1 auto;
  }
}