/* Sollicitatietracker — eigen stijl bovenop Bootstrap: rustig, veel
   witruimte, systeemfont, afgeronde kaarten. Kleuren via Bootstrap-
   variabelen (data-bs-theme regelt licht/donker automatisch mee). */

:root {
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

.navbar-brand {
  font-weight: 600;
}

.card {
  border-radius: 0.75rem;
  border: 1px solid var(--bs-border-color-translucent);
}

.kaart-teller {
  border-radius: 0.75rem;
}

.kaart-teller .teller-getal {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

/* sticky table header binnen een scrollende kaart */
.tabel-scroll {
  max-height: 65vh;
  overflow-y: auto;
}
.tabel-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--bs-body-bg);
}

.rij-klikbaar {
  cursor: pointer;
}
.rij-klikbaar:hover {
  background-color: var(--bs-tertiary-bg);
}
.rij-klikbaar:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}
.tabel-actieve-rij {
  background-color: var(--bs-secondary-bg);
}

/* 'over tijd' — subtiele rode rand in plaats van een volledig rode rij */
.rij-over-tijd {
  border-left: 4px solid var(--bs-danger);
}
.rij-bijna {
  border-left: 4px solid var(--bs-warning);
}

.filter-chip {
  border-radius: 2rem;
}

/* eigen contextmenu (rechtermuisknop + de "..."-knop gebruiken hetzelfde menu).
   z-index onder Bootstrap's modal (1055) en offcanvas (1045) — anders blijft
   het menu zichtbaar boven een modal die er net overheen opent (app.js sluit
   het menu ook actief bij show.bs.modal, dit is de CSS-vangrail ernaast). */
.contextmenu {
  position: fixed;
  z-index: 1030;
  min-width: 12rem;
  display: none;
}
.contextmenu.tonen {
  display: block;
}

/* status-badge kleuren — klassenaam is {{ v.status|slugify }}, dus altijd
   lowercase-met-streepjes, ongeacht de exacte schrijfwijze van de status */
.badge-status-in-beeld { --bs-badge-color: var(--bs-body-color); background: var(--bs-secondary-bg); }
.badge-status-voorbereiden { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.badge-status-gesolliciteerd { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.badge-status-reactie-ontvangen { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.badge-status-gesprek-gepland { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.badge-status-tweede-gesprek { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.badge-status-aanbod { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.badge-status-afgewezen { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.badge-status-ingetrokken { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

/* Dagdoel-kalender */
.dagdoel-cel {
  aspect-ratio: 1.2 / 1;
  border-radius: 0.5rem;
  border: 1px solid var(--bs-border-color);
  cursor: pointer;
  position: relative;
}
.dagdoel-cel.buiten-maand {
  opacity: 0.35;
  cursor: default;
}
.dagdoel-cel.niet-interactief {
  cursor: default;
}
.dagdoel-cel.vandaag {
  border-color: var(--bs-primary);
  border-width: 2px;
}
.dagdoel-cel.status-gelukt { background: var(--bs-success-bg-subtle); }
.dagdoel-cel.status-niet_gelukt { background: var(--bs-danger-bg-subtle); }
.dagdoel-cel.status-vrij { background: var(--bs-info-bg-subtle); }
.dagdoel-cel:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 1px;
}
.dagdoel-notitie-stip {
  position: absolute;
  top: 3px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bs-body-color);
  opacity: 0.6;
}

@media (max-width: 576px) {
  .kaart-teller .teller-getal { font-size: 1.4rem; }
}