/* IT310RESPONSIVE_DEVICE_PASS2D
   Hotfix final da Etapa 2 para menu mobile das ferramentas.
   Escopo exclusivo: drawer/menu mobile em páginas técnicas com sidebar, sem alterar motores, rotas, textos ou identidade.
   Corrige conflito visual entre drawer, backdrop, bottom appbar, AVA/AVADOG e PWA no celular. */

@media (max-width:960px){
  /* Drawer aberto: a página vira um estado modal real. Nada externo deve concorrer com o menu. */
  html:has(body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open){
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open,
  body.it-sidebar-enabled.it-sidebar-drawer-lock{
    overflow:hidden!important;
    touch-action:none!important;
    overscroll-behavior:none!important;
  }

  /* O backdrop antigo era translúcido demais e deixava painéis ciano da página parecerem parte do menu. */
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open .it-sidebar-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:10010!important;
    background:rgba(0,0,0,.78)!important;
    backdrop-filter:blur(4px) saturate(.82)!important;
    -webkit-backdrop-filter:blur(4px) saturate(.82)!important;
    pointer-events:auto!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile:not(.it-sidebar-open) .it-sidebar-backdrop{
    display:none!important;
    pointer-events:none!important;
  }

  /* Drawer técnico: fundo opaco, sem vazamento dos cards/conteúdo por trás. */
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(352px,92vw)!important;
    max-width:calc(100vw - 26px)!important;
    height:100svh!important;
    min-height:100svh!important;
    max-height:100svh!important;
    margin:0!important;
    padding:16px 14px calc(22px + env(safe-area-inset-bottom,0px))!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:0 24px 24px 0!important;
    border-left:0!important;
    border-top:0!important;
    border-bottom:0!important;
    border-right:1px solid rgba(0,245,255,.36)!important;
    background:#020817!important;
    background-image:linear-gradient(180deg,#020817 0%,#041022 58%,#020817 100%)!important;
    opacity:1!important;
    box-shadow:30px 0 70px rgba(0,0,0,.68), inset -1px 0 0 rgba(255,255,255,.035)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    isolation:isolate!important;
    contain:layout paint style!important;
    transform:none!important;
    z-index:10020!important;
    box-sizing:border-box!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:-1!important;
    border-radius:inherit!important;
    background:linear-gradient(180deg,#020817 0%,#041022 60%,#020817 100%)!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-global-brand{
    order:1!important;
    width:calc(100% - 54px)!important;
    max-width:calc(100% - 54px)!important;
    min-width:0!important;
    flex:0 0 auto!important;
    padding:4px 0 12px!important;
    border-bottom:1px solid rgba(145,190,255,.16)!important;
    box-sizing:border-box!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-sidebar-toggle{
    order:2!important;
    position:absolute!important;
    top:14px!important;
    right:12px!important;
    width:44px!important;
    min-width:44px!important;
    height:42px!important;
    margin:0!important;
    padding:0!important;
    z-index:2!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-sidebar-toggle .it-toggle-text{
    display:none!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-side-search{
    order:3!important;
    display:block!important;
    width:100%!important;
    flex:0 0 auto!important;
    margin:0!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-global-nav{
    order:4!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:100%!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-sidebar-label,
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-sidebar-section-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:28px!important;
    margin:8px 0 0!important;
    padding:0 8px!important;
    border:0!important;
    border-radius:12px!important;
    background:rgba(0,245,255,.035)!important;
    color:#7eeaff!important;
    opacity:.92!important;
    box-sizing:border-box!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-global-nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:42px!important;
    flex:0 0 auto!important;
    padding:0 13px!important;
    border-radius:14px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    background:rgba(2,9,23,.72)!important;
    color:#f4fbff!important;
  }

  /* Evita os blocos fantasmas: hidden/colapsados não podem ser reexibidos por display:flex!important. */
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-global-nav a[hidden],
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-global-nav a.it-section-hidden:not(.it-search-override),
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-sidebar-label[hidden],
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-sidebar-section-toggle[hidden]{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-lang-toggle{
    order:5!important;
    display:flex!important;
    width:100%!important;
    flex:0 0 auto!important;
    margin:2px 0 0!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-global-lang{
    order:6!important;
    width:100%!important;
    display:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    flex:0 0 auto!important;
    margin:0 0 calc(14px + env(safe-area-inset-bottom,0px))!important;
    padding-top:10px!important;
    border-top:1px solid rgba(145,190,255,.16)!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded.it-lang-open .it-global-lang{
    display:grid!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-global-lang a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    height:32px!important;
    border-radius:12px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Elementos flutuantes ficam suspensos enquanto o menu está aberto. */
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open .it-mobile-appbar,
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open .infotech-support-float,
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open .it-pwa-toast,
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open .pwa-install-prompt,
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open .install-prompt,
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open .app-install-popup{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open .tools-page-shell,
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open main,
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open footer{
    pointer-events:none!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }
}

@media (max-width:430px){
  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded{
    width:min(338px,92vw)!important;
    max-width:calc(100vw - 22px)!important;
    padding:14px 12px calc(18px + env(safe-area-inset-bottom,0px))!important;
    border-radius:0 22px 22px 0!important;
  }

  body.it-sidebar-enabled.it-sidebar-mobile.it-sidebar-open > header.it-global-header.it-sidebar-upgraded .it-global-nav a{
    min-height:40px!important;
    height:40px!important;
    font-size:13px!important;
  }
}