/*
  V11.62.2 — Mobile Auth + Home + Agenda Fix Safe
  Escopo: SOMENTE mobile via media queries.
  Corrige login vazando app/sidebar, proporção da meta da Home e controles da Agenda.
  Não altera desktop, Supabase, cache, PDF ou regras de negócio.
*/

@media (max-width:900px){
  /* Auth mobile: quando login estiver visível, o app fica realmente oculto.
     Corrige o vazamento da sidebar/dashboard causado por regras mobile com !important. */
  #authScreen[style*="display:grid"],
  #authScreen[style*="display: grid"]{
    position:fixed!important;
    inset:0!important;
    z-index:50000!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(18px + env(safe-area-inset-bottom,0px))!important;
    place-items:center!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #authScreen[style*="display:grid"] ~ #appShell,
  #authScreen[style*="display: grid"] ~ #appShell,
  #appShell[style*="display:none"],
  #appShell[style*="display: none"]{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #authScreen[style*="display:grid"] ~ .sidebar-tooltip,
  #authScreen[style*="display: grid"] ~ .sidebar-tooltip{
    display:none!important;
  }

  #authScreen .auth-card,
  #authScreen .auth-card.auth-card-clean{
    width:min(100%,420px)!important;
    max-width:calc(100vw - 28px)!important;
    max-height:none!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
  }

  #authScreen .auth-logo.auth-logo-cookpit{
    width:min(250px,78vw)!important;
    margin-bottom:18px!important;
  }

  /* Home mobile: deixa Hub ativo + nome/data com proporção mais natural. */
  #dashboard .home-ops-hero{
    padding:18px!important;
    border-radius:26px!important;
  }

  #dashboard .home-meta-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(82px,94px) minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:10px!important;
    overflow:visible!important;
    padding:0!important;
  }

  #dashboard .home-meta-row .badge-premium{
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    padding:0 10px!important;
    border-radius:23px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    text-align:center!important;
    font-size:12px!important;
    line-height:1.02!important;
    letter-spacing:-.02em!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow:hidden!important;
  }

  #dashboard .home-meta-row .badge-premium .pulse-dot{
    flex:0 0 auto!important;
    width:9px!important;
    height:9px!important;
  }

  #dashboard .home-meta-info{
    width:100%!important;
    min-width:0!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    padding:0 14px!important;
    border-radius:23px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-content:center!important;
    gap:3px!important;
    overflow:hidden!important;
    white-space:normal!important;
  }

  #dashboard .home-meta-info b{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:13px!important;
    line-height:1.05!important;
    letter-spacing:-.02em!important;
  }

  #dashboard .home-meta-info span:first-of-type{
    display:none!important;
  }

  #dashboard .home-meta-info span:last-of-type{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
    line-height:1.1!important;
    opacity:.72!important;
  }

  #dashboard .home-ops-title h2{
    font-size:clamp(42px,12vw,58px)!important;
    line-height:.94!important;
    letter-spacing:-.078em!important;
    margin:18px 0 14px!important;
    text-wrap:balance!important;
  }

  #dashboard .home-ops-title p{
    font-size:16px!important;
    line-height:1.45!important;
  }

  #dashboard .home-mode-row{
    gap:8px!important;
    padding-bottom:3px!important;
    margin-top:18px!important;
  }

  #dashboard .home-mode-row .btn{
    min-height:40px!important;
    height:40px!important;
    border-radius:16px!important;
    padding:0 14px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  /* Agenda mobile: controles em grade para não cortar semana anterior/próxima/data. */
  #demandas .periodbar{
    padding:18px!important;
    border-radius:24px!important;
    overflow:hidden!important;
  }

  #demandas .period-controls{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    padding:0!important;
  }

  #demandas .period-controls input[type="date"]{
    order:1!important;
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:46px!important;
    text-align:center!important;
    font-size:16px!important;
    padding:0 12px!important;
    border-radius:17px!important;
  }

  #demandas .period-controls button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
    border-radius:16px!important;
    font-size:11.5px!important;
    line-height:1.05!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  #demandas .period-controls button:nth-child(1){order:2!important;}
  #demandas .period-controls button:nth-child(3){order:3!important;}
  #demandas .period-controls button:nth-child(4){order:4!important;}
  #demandas .period-controls button:nth-child(5){order:5!important;}

  #demandas > .grid > .kpi:nth-child(4) strong{
    font-size:clamp(18px,5.5vw,23px)!important;
    line-height:1.02!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    letter-spacing:-.055em!important;
  }

  #demandas > .grid > .kpi:nth-child(4) small{
    font-size:11.5px!important;
    line-height:1.18!important;
  }
}

@media (max-width:380px){
  #dashboard .home-meta-row{
    grid-template-columns:86px minmax(0,1fr)!important;
    gap:8px!important;
  }

  #dashboard .home-meta-row .badge-premium,
  #dashboard .home-meta-info{
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    border-radius:21px!important;
  }

  #dashboard .home-ops-title h2{
    font-size:clamp(37px,11.5vw,52px)!important;
  }

  #demandas .period-controls button{
    font-size:10.8px!important;
  }
}