html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2Ni4wNTQ3IDI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* --- iPad / tablet optimalisatie --- */
:root {
    --tap-size: 48px;
}

/* Basis typografie voor betere leesbaarheid op tablet */
body {
    font-size: 16px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}

@media (min-width:768px) {
    body { font-size: 17px; }
    h3 { font-size: 1.4rem; }
}

/* Grotere klik / touch targets */
button, .btn, .form-control, .form-select {
    min-height: 44px;
    font-size: 0.95rem;
}

.btn-sm { min-height: 36px; }

/* Formulier lay-out tweaks */
.row.g-2 > [class*='col-'] { margin-bottom: .4rem; }
@media (min-width: 992px) {
    .row.g-2 > [class*='col-'] { margin-bottom: 0; }
}

/* Kaarten en tabel container */
.card { border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,.06); }
.card-body { padding: 1rem 1.25rem; }

/* Tabellen: betere leesbaarheid en horizontale scroll */
.table-responsive { -webkit-overflow-scrolling: touch; }
.table thead th { position: sticky; top: 0; background: #f8f9fa; z-index: 1; }
.table tbody tr:hover { background: #f2f6fa; }

/* Smalle viewport: kolommen iets ruimer */
@media (max-width: 820px) {
    .table.table-sm td, .table.table-sm th { padding: .55rem .6rem; }
    nav.flex-column .nav-link { padding: .75rem 1rem; }
}

/* Navigatie: grotere tap targets op tablet */
nav.flex-column .nav-link { font-size: 1rem; }
@media (min-width:768px) {
    nav.flex-column .nav-link { padding-top: .9rem; padding-bottom: .9rem; }
}

/* Inputs in grids: volledige breedte op kleine schermen */
@media (max-width: 900px) {
    .card .row .col-12, .card .row .col-6 { flex: 0 0 100%; max-width: 100%; }
}

/* Utility voor small muted text */
.text-muted-small { font-size: .75rem; opacity: .8; }

/* Focus styles subtieler op touch */
@media (hover:none) {
    .btn:focus, .form-control:focus { box-shadow: 0 0 0 .15rem rgba(37,140,251,.4); }
}

/* Animatie voor toevoegen/verwijderen rijen */
@keyframes fadeInRow { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform: translateY(0);} }
.table tbody tr { animation: fadeInRow .25s ease; }
/* --- Extra mobile / iPad optimalisaties --- */

/* Maak kleine buttons groter voor touch */
.btn-sm {
    padding: .55rem .9rem;
    font-size: .9rem;
    line-height: 1.1;
    border-radius: .55rem;
    min-height: 42px;
}

/* Standaard buttons iets hoger op touch schermen */
@media (hover:none), (pointer:coarse) {
    .btn { min-height: 48px; }
    .form-control, .form-select { min-height: 48px; }
}

/* Grotere klikzone voor toggler / checkbox in nav */
.navbar-toggler {
    width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
}

/* Ruimere tabel cellen voor leesbaarheid op tablet portrait */
@media (max-width: 900px) {
    table.table-sm td, table.table-sm th { padding: .65rem .55rem; }
}

/* Actieknoppen rij centreren op small screens */
@media (max-width: 700px) {
    td[style*='width:120px'], td[style*='width:140px'], td[style*='width:80px'], td[style*='width:60px'] { text-align: center; }
}

/* Alternatieve kaart weergave voor tabellen op zeer smalle schermen */
@media (max-width: 640px) {
    .table-stack-mobile { display: block; }
    .table-stack-mobile table { display: none; }
    .table-stack-mobile .stack-item { background:#fff; border:1px solid #e2e6ea; border-radius:12px; padding:.85rem 1rem; margin-bottom:.75rem; box-shadow:0 1px 2px rgba(0,0,0,.04); }
    .stack-item h5 { font-size:1.05rem; margin:0 0 .35rem; }
    .stack-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.35rem .75rem; }
    .stack-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; opacity:.65; display:block; }
    .stack-value { font-size:.9rem; font-weight:500; }
    .stack-actions { margin-top:.5rem; }
}

/* Utility classes */
.touch-full { width:100%; min-height:48px; }
.btn-wide { min-width:160px; }

/* Verbeterde spacing tussen secties */
section + section, .card + .card { margin-top:1.25rem; }

/* Nav links duidelijker actief op tablet */
nav.flex-column .nav-link.active { background: linear-gradient(90deg, rgba(27,110,194,.15), rgba(27,110,194,0)); border-left:4px solid #1b6ec2; padding-left:calc(1rem - 4px); }

/* Smooth hover (voor desktop) maar geen hinder op touch */
@media (hover:hover) {
    .btn, .nav-link { transition: background-color .15s, color .15s; }
}

/* Vergroot fonts in input op <600px zodat iPad zoom niet triggert */
@media (max-width:600px) {
    input, select, button { font-size:16px !important; }
}