/*
 Correcto Team v1.0
 LAYOUT

 Application shell, header, page containers and structural grids.
*/

/*
 * Correcto Team v1.0
 * canonical app-shell layout ownership
 *
 * Scope:
 * - root spacing variables
 * - app-view / app-main geometry
 * - pageContent geometry
 * - responsive viewport shell
 *
 * Excluded:
 * Board, Header controls, Profile, Navigation,
 * Razvoz and theme colors.
 */

:root{
  --ct-header-gap:18px;
  --ct-page-inline:clamp(12px,2vw,24px);
  --ct-page-bottom:clamp(82px,10vh,112px);
  --ct-panel-gap:22px;
  --ct-mobile-nav-height:68px;
  --ct-board-header-gap:10px;
}

.app-view>.app-main{
  width:100%;
  min-width:0;
  padding-top:var(--ct-header-gap)!important;
  padding-right:var(--ct-page-inline)!important;
  padding-bottom:var(--ct-page-bottom)!important;
  padding-left:var(--ct-page-inline)!important;
  overflow:visible;
}

#pageContent{
  min-width:0;
  width:100%;
}

/* <=1100 */
@media (max-width:1100px){

  :root{
    --ct-header-gap:26px;
    --ct-panel-gap:14px;
  }

  #pageContent{
    display:block!important;
    min-width:0;
  }
}

/* <=900 */
@media (max-width:900px){

  html,
  body{
    height:100%;
    overflow:hidden!important;
  }

  #appView.app-view:not(.hidden){
    height:100dvh!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .app-main{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow:hidden!important;
    padding:
      8px
      8px
      calc(70px + env(safe-area-inset-bottom))
      8px!important;
  }

  #pageContent{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
}

/* Tablet 721-1100 */
@media (min-width:721px) and (max-width:1100px){

  :root{
    --ct-page-bottom:34px;
  }

  .app-view>.app-main{
    padding-top:12px!important;
  }
}

/* Phone <=720 */
@media (max-width:720px){

  :root{
    --ct-page-inline:8px;
    --ct-page-bottom:
      calc(
        var(--ct-mobile-nav-height) +
        env(safe-area-inset-bottom,0px) +
        20px
      );
  }

  .app-view>.app-main{
    padding-top:
      calc(
        9px +
        env(safe-area-inset-top,0px)
      )!important;
  }
}

/* Small phone <=640 */
@media (max-width:640px){

  :root{
    --ct-header-gap:30px;
    --ct-panel-gap:12px;
  }
}

/* Desktop >=1101 */
@media (min-width:1101px){

  .app-view>.app-main{
    max-width:1920px;
    margin-inline:auto;
    padding-top:
      var(--ct-board-header-gap)!important;
  }
}


/*
 * Correcto Team v1.0
 * canonical header geometry ownership
 *
 * Geometry only:
 * header dimensions, grid, responsive placement,
 * brand/container sizing.
 *
 * Control styling and theme colors remain outside
 * this ownership layer.
 */

#appHeader,
#appHeader *{
  box-sizing:border-box;
}

#appHeader.app-header.warm-header{
  width:100%!important;
  max-width:100vw!important;
  min-width:0!important;
  overflow:visible!important;
  grid-template-columns:
    minmax(205px,auto)
    minmax(0,1fr)
    minmax(0,auto)!important;
  column-gap:clamp(6px,.75vw,14px)!important;
  padding-inline:clamp(8px,1.1vw,22px)!important;
}

#appHeader .premium-brand-wrap,
#appHeader .premium-brand,
#appHeader .premium-header-tools{
  min-width:0!important;
  max-width:100%!important;
}

#appHeader .premium-brand{
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
}

#appHeader .brand-copy{
  min-width:0!important;
  white-space:nowrap!important;
}

#appHeader .premium-header-tools{
  justify-content:flex-end!important;
  overflow:visible!important;
}


/* ==========================================================
   >=901
   Final late legacy header container writer.
   ========================================================== */

@media (min-width:901px){

  #appHeader.app-header{
    grid-template-columns:
      auto
      minmax(430px,1fr)
      auto!important;

    gap:12px!important;
    padding:8px 14px!important;
  }
}


/* ==========================================================
   <=1450
   Preserve final viewport containment.
   ========================================================== */

@media (max-width:1450px){

  #appHeader.app-header.warm-header{
    width:100%!important;
    max-width:100%!important;
  }
}


/* ==========================================================
   <=900
   Final mobile header geometry.
   ========================================================== */

@media (max-width:900px){

  #appHeader.app-header{
    position:relative!important;
    flex:0 0 58px!important;
    height:58px!important;
    min-height:58px!important;
    padding:7px 12px!important;
    display:grid!important;
    grid-template-columns:
      44px
      1fr
      44px!important;
    align-items:center!important;
    overflow:visible!important;
  }

  #appHeader.app-header.warm-header{
    position:sticky!important;
    grid-template-columns:
      44px
      minmax(0,1fr)
      44px!important;
    gap:4px!important;
    padding:
      7px
      max(8px,env(safe-area-inset-right))
      7px
      max(8px,env(safe-area-inset-left))!important;
    overflow:visible!important;
  }

  #appHeader .premium-brand-wrap{
    display:contents!important;
  }

  #appHeader .mobile-nav-toggle{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
  }

  #appHeader .premium-brand{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    max-width:100%!important;
    padding:0!important;
  }

  #appHeader .premium-header-tools{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    width:44px!important;
    min-width:44px!important;
    overflow:visible!important;
  }
}


/* ==========================================================
   <=380
   Final ultra-small header geometry.
   ========================================================== */

@media (max-width:380px){

  #appHeader.app-header.warm-header{
    grid-template-columns:
      40px
      minmax(0,1fr)
      40px!important;
    padding-inline:6px!important;
  }
}


/*
 * Correcto Team v1.0
 * canonical structural completion ownership
 *
 * Phase 3T:
 * final non-theme header dependency from the
 * legacy desktop header/theme mixed block.
 */

@media (min-width:901px){

  #appHeader.app-header.warm-header{
    min-height:74px!important;
  }
}

/* ==========================================================
   PHASE 3W-C.5 — DASHBOARD MOBILE SCROLL OWNER

   Mobile app shell intentionally locks the viewport because
   Board owns nested Kanban scrolling.

   Dashboard has no nested scroll viewport, therefore app-main
   becomes the vertical scroll owner only while Dashboard DOM
   is present.

   Board / Razvoz behavior is intentionally untouched.
   ========================================================== */

@media (max-width:900px){

  .app-main:has(#pageContent .dashboard-welcome){
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:auto;
    touch-action:pan-y;
  }

  #pageContent:has(.dashboard-welcome){
    height:auto!important;
    min-height:100%!important;
    overflow:visible!important;
  }

}

/* ==========================================================
   MOBILE-SHELL-B1.1B — canonical iOS root/header geometry
   ========================================================== */
@media (max-width:900px){
  html,
  body{
    height:100%;
    overflow:hidden!important;
  }

  body{
    margin:0!important;
    padding-bottom:0!important;
  }

  #appView.app-view:not(.hidden){
    height:100dvh!important;
    min-height:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  #appHeader.app-header{
    position:relative!important;
    top:0!important;
    flex:0 0 58px!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    overflow:visible!important;
    z-index:90000!important;
  }
}