/**
 * Layout para ecrãs largos — melhorias progressivas.
 * Regras apenas dentro de min-width: abaixo disto o CSS base/tema mantém-se intocado.
 */

@media (min-width: 1100px) {
  .container {
    max-width: min(1480px, 96vw);
  }

  /*
   * Livro: grelha só com .view.active — senão #view-ops vence `.view { display: none }` e o Livro
   * ficava sempre visível em ecrã largo.
   */
  #view-ops.view.active {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    column-gap: 22px;
    row-gap: 16px;
    align-items: start;
  }

  #view-ops.view.active > .section-header {
    grid-column: 1 / -1;
  }

  #view-ops.view.active > #opsFiltersPanel {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0;
    position: sticky;
    top: 12px;
    align-self: start;
    max-height: calc(100vh - 24px);
    overflow: auto;
  }

  #view-ops.view.active > #opsContent {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }

  /*
   * Sidebar ~280–380px; .ops-filter-grid base exige ~280px + 180px → cortava «Tipo de Operação».
   * Uma coluna só dentro do painel (apenas este breakpoint).
   */
  #view-ops.view.active #opsFiltersPanel .ops-filter-grid {
    grid-template-columns: 1fr;
  }

  #view-ops.view.active #opsFiltersPanel .ops-custom-range {
    grid-template-columns: 1fr;
  }

  #view-ops.view.active #opsFiltersPanel .ops-filters-body,
  #view-ops.view.active #opsFiltersPanel .field {
    min-width: 0;
  }

  /* Tabela do Livro: cabeçalhos um pouco mais legíveis com mais largura */
  #view-ops.view.active thead th {
    font-size: 9px !important;
    letter-spacing: 1.4px !important;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: min(1680px, 96vw);
  }

  #view-ops.view.active {
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    column-gap: 26px;
  }
}