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+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) 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;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Markdown styling voor /handleiding/{slug} ─────────────────────────────
   Markdig spuwt platte HTML uit (h1..h6, p, ul/ol, table, code, pre).
   We willen alleen genoeg styling om het comfortabel te lezen — geen
   GitHub-pastiche, alleen redelijke witruimte en tabel-borders.

   Theme-aware via MudBlazor's CSS-variabelen — die flippen automatisch
   tussen light- en dark-mode. Code/pre-achtergronden gebruiken een
   semi-transparante grijs zodat het op beide achtergronden subtiel
   contrast geeft zonder hardcoded #f7f7f7-blokken in dark mode. */
.markdown-body { line-height: 1.55; color: var(--mud-palette-text-primary); }
.markdown-body h1 { font-size: 1.6rem; margin: .2rem 0 1rem; }
.markdown-body h2 { font-size: 1.3rem; margin: 1.6rem 0 .6rem; padding-top: .4rem;
                    border-top: 1px solid var(--mud-palette-divider); }
.markdown-body h3 { font-size: 1.1rem; margin: 1.1rem 0 .4rem; }
.markdown-body h4 { font-size: 1rem;   margin: .9rem 0 .3rem; font-weight: 600; }
.markdown-body p,
.markdown-body ul,
.markdown-body ol  { margin: .4rem 0 .8rem; }
.markdown-body ul,
.markdown-body ol  { padding-left: 1.4rem; }
.markdown-body li  { margin: .15rem 0; }
.markdown-body code { background: rgba(127,127,127,.15); padding: .1em .35em; border-radius: 3px;
                      font-size: .92em; }
.markdown-body pre  { background: rgba(127,127,127,.10); padding: .8rem 1rem; border-radius: 4px;
                      overflow-x: auto; }
.markdown-body pre code { background: transparent; padding: 0; }
.markdown-body blockquote { border-left: 3px solid var(--mud-palette-divider); margin: .8rem 0;
                            padding: .2rem .9rem; color: var(--mud-palette-text-secondary); }
.markdown-body table { border-collapse: collapse; margin: .8rem 0 1.2rem;
                       width: 100%; }
.markdown-body th,
.markdown-body td  { border: 1px solid var(--mud-palette-table-lines); padding: .4rem .6rem;
                     text-align: left; vertical-align: top; }
.markdown-body th  { background: var(--mud-palette-background-grey); font-weight: 600; }
.markdown-body hr  { border: 0; border-top: 1px solid var(--mud-palette-divider);
                     margin: 1.4rem 0; }
.markdown-body a   { color: var(--mud-palette-primary); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }

/* ── Tester #18: horizontale scrollbar altijd zichtbaar onder MudDataGrid ─
   Door de tabel-container een max-height te geven die op het viewport-
   scrolt (i.p.v. dat de hele pagina scroll), staat de bottom-scrollbar
   altijd binnen het venster. Tester moest voorheen eerst naar beneden
   scrollen om bij de scrollbar te kunnen, dat is nu opgelost.

   Niet toegepast op de PdfPreviewDialog (die bevat een iframe met eigen
   scroll) en op kleine tabellen waar er sowieso geen overflow is. */
.mud-data-grid > .mud-table-container {
    max-height: calc(100vh - 280px);
    min-height: 300px;
    overflow: auto;
}

/* ── Datepicker-kalender niet afknippen ───────────────────────────────────
   MudBlazor kopieert de Style van een MudDatePicker (bv. een `max-width` om
   het INVOERVELD smal te houden, zoals op Verlof → Uitputting en Weekoverzicht)
   óók naar de kalender-popover (.mud-picker-paper). Daardoor werd de kalender
   afgeknipt: de dagen vr/za/zo en het jaartal (bv. "juli 202…") vielen weg.
   De kalender heeft een vaste natuurlijke breedte en mag nooit door zo'n
   input-max-width geklemd worden — daarom hier globaal opgeheven. */
.mud-picker-paper {
    max-width: none !important;
}

/* ── Kolomkoppen blijven staan bij het scrollen ───────────────────────────
   Erik (11-8): "Is het ook mogelijk om op (nogal wat locaties, overal waar
   je naar beneden kan scrollen) e.e.a. zo aan te passen dat de info waar de
   betreffende kolom over gaat zichtbaar blijft?"

   MudBlazor heeft daar een FixedHeader-parameter voor, maar die moet per
   tabel worden gezet én vraagt om een vaste Height. Dat zou 16 grids langs
   én op elk scherm een hoogte-gok betekenen. De regel hierboven maakt de
   tabel-container al de scrollende laag, dus één sticky-regel op de header
   dekt ze allemaal in één keer — ook de tabellen die er later bij komen.

   z-index boven de rijen, en een eigen achtergrond: zonder dat schijnen de
   wegscrollende regels door de koptekst heen. */
.mud-table-container thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--mud-palette-surface);
}

/* MudDataGrid zet zijn filter-/sorteerknoppen in dezelfde cel; die erven de
   achtergrond, maar een expliciete regel voorkomt een doorschijnende rand
   op browsers die de cel-achtergrond niet naar de header-inhoud doortrekken. */
.mud-table-container thead th .mud-table-cell-header-content {
    background-color: transparent;
}

/* ── Plain MudTable: kolomkoppen óók vastzetten bij het scrollen ───────────
   De sticky-regel hierboven werkt alleen als de tabel-container zélf de
   scrollende laag is. MudDataGrid krijgt dat via de .mud-data-grid-regel
   bovenaan; een gewone MudTable niet — daar scrollt de hele pagina en
   scrolt de sticky kop gewoon mee weg (verdwijnt achter de vaste AppBar).

   Daarom krijgt ook een gewone MudTable een begrensde container-hoogte,
   zodat híj de scroller wordt en de bestaande sticky-header-regel aangrijpt.
   Bewust géén min-height: een korte of ingebedde tabel blijft dan gewoon
   op z'n natuurlijke hoogte staan (geen overbodige scrollbox), en alleen
   lange lijsten krijgen de interne scroll met blijvende kop. Zelfde
   100vh-280px als de grid-variant zodat beide even hoog voelen.

   Scope op .mud-main-content houdt dialogen (die buiten de main-content
   renderen en hun eigen scroll hebben) hier netjes buiten. */
.mud-main-content .mud-table:not(.mud-data-grid) > .mud-table-container {
    max-height: calc(100vh - 280px);
    overflow: auto;
}