/* De admin-app bovenop base.css (de layout van de verkenners): alleen wat daar niet in staat. */

/* De kleur per status, één plek voor de stippen, de badges en de grafieken (aanvragen.js leest ze).
   Gunstig groen, ongunstig rood, wat nog loopt blauw of grijs. */
:root {
  --status-onbevestigd: #9ca3af;
  --status-afgekeurd: #dc2626;
  --status-in_behandeling: #93c5fd;
  --status-in_afwachting: #2563eb;
  --status-geen_commissie: #d97706;
  --status-commissie: #16a34a;
  --commissie-verwacht: #86efac;
  --commissie-gefactureerd: #22c55e;
  --commissie-uitbetaald: #15803d;
  --commissie-schatting: #16a34a;
}

[data-theme="dark"] {
  --status-onbevestigd: #6b7280;
  --status-afgekeurd: #f87171;
  --status-in_behandeling: #1e40af;
  --status-in_afwachting: #60a5fa;
  --status-geen_commissie: #fbbf24;
  --status-commissie: #4ade80;
  --commissie-verwacht: #166534;
  --commissie-gefactureerd: #22c55e;
  --commissie-uitbetaald: #86efac;
  --commissie-schatting: #4ade80;
}

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

/* De filters blijven bij het scrollen in beeld, zodat je altijd ziet wat er gefilterd is. Op een
   telefoon zou de balk het halve scherm vullen, daar scrolt hij mee. */
@media (min-width: 768px) {
  .filter-bar {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

/* De kit toont een .card ook met het attribuut hidden; de melding hoort dan weg te zijn. */
.card[hidden] {
  display: none;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.5rem;
}

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

.period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.period .form-control {
  width: auto;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pill-count {
  font-weight: 400;
  opacity: 0.75;
}

.filter-reset,
.filter-option {
  align-self: flex-end;
}

.dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.kpis {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 11rem), 1fr));
}

.chart-short {
  height: 240px;
}

.map-compact {
  height: 560px;
}

.card-header-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.card-header-tools .form-select,
.card-header-tools .form-control {
  width: auto;
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* De kit geeft .table-scroll een maximale hoogte; de tabel per type is bedoeld om in zijn geheel te
   lezen, alleen .table-tall scrollt. */
.table-scroll:not(.table-tall) {
  max-height: none;
}

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

.table tr.selected td {
  background-color: var(--color-bg-body);
}

.table td a,
.link-button {
  cursor: pointer;
}

.link-button {
  padding: 0;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  text-decoration: underline dotted;
}

.table th[data-key] {
  cursor: pointer;
  white-space: nowrap;
}

.more {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.empty-state {
  padding: 2rem;
  text-align: center;
}

/* Inloggen */

.login {
  width: 100%;
  max-width: 24rem;
  margin: 2rem auto 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Status */

.check-detail {
  min-width: 12rem;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.setting {
  overflow-wrap: anywhere;
}

/* Beheer */

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.search {
  position: relative;
}

.suggestions {
  position: absolute;
  z-index: 20;
  right: 1.5rem;
  left: 1.5rem;
  margin: 0.25rem 0 0;
  padding: 0.25rem 0;
  list-style: none;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.suggestion {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.suggestion:hover,
.suggestion:focus {
  background-color: var(--color-bg-body);
  outline: none;
}

.correction .form-control,
.correction .form-select {
  min-width: 9rem;
}

/* Een kop vooraan een rij staat links, zoals de cellen; de kit centreert een th. */
.table tbody th {
  text-align: left;
}

.nowrap {
  white-space: nowrap;
}