/* Voorkomt flash of content bij Alpine.js x-cloak */
[x-cloak] { display: none !important; }

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* legend.form-label gelijkstellen aan label.form-label (Bootstrap reset) */
legend.form-label {
  font-size: 1rem;
  font-weight: 400;
  float: none;
  width: auto;
}

/* Geen focus-ring op niet-interactief skip-target */
#main-content:focus {
  outline: none;
}

/* Betere zichtbaarheid van tekstvelden, textareas, getallen en dropdowns */
.form-control,
.form-select {
  border: 2px solid #adb5bd;
  border-radius: 6px;
}
.form-control:hover,
.form-select:hover {
  border-color: #6c757d;
}
.form-control:focus,
.form-select:focus {
  border-color: #0d6efd;
  border-width: 2px;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}

/* Betere zichtbaarheid van radio/checkbox toggle-knoppen */
.btn-outline-primary {
  border-width: 2px;
}
.btn-check:not(:checked) + .btn-outline-primary {
  background-color: #f8f9ff;
}
.btn-check:checked + .btn-outline-primary {
  font-weight: 600;
}

/* Betere zichtbaarheid van radio buttons in de DHENN tabelweergave */
.formulier-tabel .form-check-input[type="radio"] {
  width: 1.3em;
  height: 1.3em;
  border: 2px solid #adb5bd;
  cursor: pointer;
}
.formulier-tabel .form-check-input[type="radio"]:hover {
  border-color: #0d6efd;
}
.formulier-tabel .form-check-input[type="radio"]:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* DHENN tabelweergave (display-mode: table) */
.formulier-tabel th,
.formulier-tabel td {
  vertical-align: middle;
  text-align: center;
}
.formulier-tabel th:first-child,
.formulier-tabel td:first-child {
  text-align: left;
  min-width: 220px;
}

/* Visuele scheiding bij DHENN page-break */
hr.dhenn-page-break {
  border: none;
  border-top: 2px solid #dee2e6;
  margin: 2rem 0 1.5rem;
}