/* De verkenner bovenop de Vidasci UI Kit: alleen layout. Kleuren komen uit de tokens van de kit, dus
   donker thema loopt vanzelf mee. */

body {
  background-color: var(--color-bg-body);
}

.app-header {
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

.app-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 0.75rem;
}

.app-title {
  margin-right: auto;
  font-weight: 600;
  text-decoration: none;
}

.page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1.25rem 3rem;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* De kit reset de opsommingstekens alleen op .nav-tabs, niet op de connected variant. */
.nav-tabs-connected {
  list-style: none;
}

.card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.section-title {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.muted,
.note {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.note {
  margin-top: 0.75rem;
}

/* Grafieken */

.chart {
  width: 100%;
  height: 340px;
}

.chart-tall {
  height: 600px;
}

/* De hoogte van een heatmap volgt het aantal kolommen; die zet quality.js. */
.chart-auto {
  height: 480px;
}

.chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 6rem;
  color: var(--color-text-muted);
}

.map {
  width: 100%;
  height: 640px;
  border-radius: var(--radius-md);
}

.legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.legend-bar {
  width: 12rem;
  height: 0.5rem;
  border-radius: 999px;
}

/* De popup volgt het thema. MapLibre laadt zijn eigen css na deze en zet daar wit neer, dus de
   selectors zijn een niveau specifieker. Het pijltje is een driehoek van één gekleurde rand, en
   welke rand dat is hangt af van de kant waar de popup staat. */
.maplibregl-popup .maplibregl-popup-content {
  background-color: var(--color-bg-surface);
  color: var(--color-text-main);
  font-size: 0.8125rem;
}

.maplibregl-popup[class*="anchor-top"] .maplibregl-popup-tip {
  border-bottom-color: var(--color-bg-surface);
}

.maplibregl-popup[class*="anchor-bottom"] .maplibregl-popup-tip {
  border-top-color: var(--color-bg-surface);
}

.maplibregl-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--color-bg-surface);
}

.maplibregl-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--color-bg-surface);
}

/* Formulieren */

.filter-card summary {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  align-items: end;
  padding: 0 1.5rem 1rem;
}

.filter-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0 1.5rem 1rem;
}

.settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.settings .form-label {
  margin-bottom: 0.25rem;
}

.field {
  min-width: 11rem;
}

.field-wide {
  flex: 1 1 24rem;
}

/* Tabellen */

/* De kit geeft .table-scroll alleen verticale scroll; een brede tabel heeft ook horizontale nodig. */
.table-scroll {
  overflow-x: auto;
}

/* Een tabel die bedoeld is om in zijn geheel te lezen, zoals de maanden van de index. */
.table-scroll.table-tall {
  max-height: 40rem;
}

.table td.num,
.table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table th[data-sort] {
  cursor: pointer;
}

.table tr.current td {
  font-weight: 600;
}

.table tr.empty td {
  color: var(--color-text-muted);
}

.pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.methods {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.25rem;
}

.description-block {
  margin-top: 1rem;
}

.description-block summary {
  font-weight: 600;
  cursor: pointer;
}

.description {
  margin-top: 0.5rem;
  white-space: pre-line;
}