/*
 * Corrige cards cortados no dashboard/relatórios (dashboard.html,
 * sinistro_list.html, sinistro_relatorio.html).
 *
 * Causa raiz: o Bootstrap decide quantas colunas cabem (`col-xl-3`,
 * `col-xl-2` etc.) com base na largura TOTAL da janela do navegador — não
 * no espaço que realmente sobra depois de descontar a sidebar fixa (370px
 * expandida / 70px contraída). Em janelas médias/largas, o Bootstrap acha
 * que cabem 4 cards por linha (viewport ≥1200px = `xl`), mas depois de
 * tirar a sidebar sobra bem menos espaço que isso — resultado: os cards
 * da direita ficam cortados em vez de quebrar linha.
 *
 * Corrigido com Container Queries (CSS nativo, sem biblioteca): em vez de
 * reagir à largura da janela, essas regras reagem à largura REAL do
 * `.content` — o mesmo problema não pode mais acontecer, incluindo
 * quando a sidebar contrai/expande dinamicamente.
 */

.content {
  container-type: inline-size;
  container-name: content-area;
}

@container content-area (max-width: 1100px) {
  .content .col-xl-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .content .col-xl-2 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

@container content-area (max-width: 700px) {
  .content .col-xl-3,
  .content .col-xl-2,
  .content .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}