/* ClokIt USA — Phase 1B.4 Field Layout Stability
   Presentation-only guardrail for every report section/card.
   Keeps card navigation from covering form content and prevents rail metadata collisions.
*/

/* Desktop/tablet field navigation should participate in document flow.
   This prevents Project Information / Survey Team / Due Diligence and every other
   card tab row from floating over fields while the user scrolls or jumps cards. */
.app-shell .workspace .subnav{
  position:relative !important;
  top:auto !important;
  z-index:2 !important;
  width:100% !important;
  margin:0 0 14px !important;
  padding:8px 0 10px !important;
  background:transparent !important;
  backdrop-filter:none !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:thin;
  scroll-padding-inline:12px;
  -webkit-overflow-scrolling:touch;
}
.app-shell .workspace .subnav .chip{
  flex:0 0 auto;
}

/* Every card/panel owns its space; nothing may slide under the card navigation. */
.app-shell .workspace .form-panel{
  position:relative !important;
  z-index:1 !important;
  clear:both;
  margin-top:0 !important;
  overflow:hidden;
}
.app-shell .workspace .panel-head,
.app-shell .workspace .panel-body{
  position:relative;
}
.app-shell .workspace .panel-body{
  min-width:0;
}
.app-shell .workspace .field-grid,
.app-shell .workspace .field,
.app-shell .workspace .field input,
.app-shell .workspace .field select,
.app-shell .workspace .field textarea{
  min-width:0;
  max-width:100%;
}

/* Section rail: keep title, progress and photo metadata in separate lanes. */
.app-shell .rail .nav-item{
  grid-template-columns:34px minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:3px !important;
  overflow:hidden;
}
.app-shell .rail .nav-item > *{
  min-width:0;
}
.app-shell .rail .nav-name{
  display:block !important;
  min-width:0 !important;
  line-height:1.18 !important;
  overflow-wrap:anywhere;
}
.app-shell .rail .nav-sub{
  display:block !important;
  min-width:0 !important;
  margin-top:3px !important;
  line-height:1.25 !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
}
.app-shell .rail .nav-item > :last-child:not(.nav-name):not(.nav-sub){
  justify-self:end;
  white-space:nowrap;
}

/* Protect long section/card labels from pushing controls outside their cards. */
.app-shell .workspace .panel-head,
.app-shell .workspace .bottom-nav,
.app-shell .workspace .quick{
  min-width:0;
}
.app-shell .workspace .panel-head > *,
.app-shell .workspace .bottom-nav > *,
.app-shell .workspace .quick > *{
  min-width:0;
}

/* Tablet: keep the same no-overlap rule while allowing tabs to swipe horizontally. */
@media (min-width:761px) and (max-width:1100px){
  .app-shell .workspace .subnav{
    margin-bottom:12px !important;
    padding-bottom:8px !important;
  }
  .app-shell .rail .nav-item{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* Mobile already uses the dedicated Cards navigation. These rules ensure any
   fallback tab row/card panel can never overlay a field or bottom command bar. */
@media (max-width:760px){
  .app-shell .workspace .subnav{
    position:static !important;
    top:auto !important;
    margin:0 0 10px !important;
    padding:0 0 8px !important;
  }
  .app-shell .workspace .form-panel{
    margin-top:0 !important;
    max-width:100% !important;
  }
  .app-shell .workspace .panel-body{
    overflow:visible !important;
  }
  .app-shell .workspace .field-grid{
    width:100% !important;
  }
}