/* ============================================================================
   Hub Insight — Reports View (Layer: views)
   ----------------------------------------------------------------------------
   Refatora .reports-container e elementos relacionados para usar tokens.
   Vence as regras correspondentes em @layer legacy (styles.css linhas ~1972+).

   Fixes aplicados:
   • Painel de filtros 400px hardcoded → var(--ds-filter-panel-w) (clamp 280-400)
   • Altura do container 100vh-200px → dvh para evitar jump no mobile
   • .month-files.expanded max-height 1000px → 80dvh (folga em telas pequenas)
   • #pdf-viewer iframe min-height 600px → clamp(360, 60dvh, 720)
   ============================================================================ */

.reports-container {
    grid-template-columns: var(--ds-filter-panel-w) 1fr;
    height: calc(100dvh - 200px);
}

/* Em tablet portrait e mobile, painel de filtros vira linha de cima
   (single column). Mantém o breakpoint 1024px existente em legacy. */
@media (max-width: 1024px) {
    .reports-container {
        grid-template-columns: 1fr;
        height: auto;
    }

    /* Painel de filtros (primeira coluna) — limite dinâmico em vez de 400px fixo */
    .reports-container > div:first-child {
        max-height: clamp(240px, 50dvh, 480px);
    }
}

.month-files.expanded {
    /* Limite dinâmico — em telas pequenas usa o que couber, não 1000px fixo */
    max-height: 80dvh;
    overflow-y: auto;
}

#pdf-viewer-container iframe {
    /* Antes: 600px fixo — quebra em telas pequenas e desperdiça espaço em
       telas grandes. Agora escala entre 360 e 720 baseado no viewport. */
    min-height: clamp(360px, 60dvh, 720px);
}