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

/* Arabisch: leesbaar Arabisch lettertype en rechts-naar-links uitlijning. */
html[dir="rtl"], html[dir="rtl"] body {
    font-family: 'Noto Kufi Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif;
}

html[dir="rtl"] .mud-typography,
html[dir="rtl"] .mud-input,
html[dir="rtl"] .mud-button-root {
    font-family: inherit;
}

html[dir="rtl"] .blazor-error-boundary {
    padding: 1rem 3.7rem 1rem 1rem;
    background-position: right 1rem center;
}

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

/* Mobiel: lange moskeenamen mogen de appbar en de hero niet laten overlopen.
   clamp() schaalt mee met de schermbreedte tot aan het oorspronkelijke desktopformaat. */
.mm-appbar-brand {
    min-width: 0;
}

.mm-appbar-name {
    font-size: clamp(0.8rem, 3.4vw, 1.05rem);
    line-height: 1.15;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mm-hero-title {
    font-weight: 700;
    font-size: clamp(1.75rem, 7vw, 3rem);
    line-height: 1.15;
}

.mm-hero-subtitle {
    font-weight: 400;
    opacity: 0.9;
    font-size: clamp(0.95rem, 3.6vw, 1.25rem);
    line-height: 1.35;
}
/* Datumkiezers op een telefoon.
   MudBlazor hangt het kalendervenster standaard onder het invoerveld. Staat dat veld laag of
   rechts op de pagina, dan valt de kalender deels buiten het scherm — in het Arabisch extra
   opvallend, omdat de lay-out dan gespiegeld is en de overloop naar de andere kant gaat.
   Op smalle schermen tonen we hem daarom gecentreerd als een venster over de pagina heen.
   Dit geldt voor alle datumkiezers in de app, dus het hoort hier en niet per pagina.

   Alleen .mud-picker-inline-paper aanspreken: dat element bestaat uitsluitend zolang de
   kalender openstaat. Een eerdere versie legde ook een donkere laag over de pagina via
   .mud-picker-inline::before, maar dát element staat er altijd — ook met de kalender dicht.
   Die laag ving daardoor permanent alle tikken op en maakte de pagina onbruikbaar op een
   telefoon, terwijl er niets te zien was. */
@media (max-width: 959px) {
    .mud-picker-inline-paper {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: min(340px, calc(100vw - 32px)) !important;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
        z-index: 1400;
    }
}

/* De kalender zelf blijft links-naar-rechts, ook in het Arabisch: een maandoverzicht met
   omgedraaide weekdagen leest niemand goed, en de pijltjes vorige/volgende wezen de
   verkeerde kant op. */
html[dir="rtl"] .mud-picker-inline-paper,
html[dir="rtl"] .mud-picker-container {
    direction: ltr;
}