@font-face {
    font-family: 'ivypresto';
    src: url('../fonts/ivyprestoheadline-light.otf') format('opentype');
    font-style:normal;
}
@font-face {
    font-family: 'ivypresto';
    src: url('../fonts/ivyprestoheadline-lightitalic.otf') format('opentype');
    font-style: italic;
}
@font-face {
    font-family: 'instrumentsans';
    src: url('../fonts/instrumentsans-regular.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'instrumentsans-bold';
    src: url('../fonts/instrumentsans-bold.ttf') format('truetype');
}
    body {
        background-color: #F5F2EA;
    }

/* Leesbare waarschuwingsmeldingen (admin).
   De amberkleur die MudBlazor aan Severity.Warning-tekst geeft haalt op de crème achtergrond
   maar ~2,9:1 contrast. De ernst blijft zichtbaar via icoon en rand; de tekst zelf krijgt de
   gewone tekstkleur van het thema. Toepassen op elke warning-alert in de admin-schermen. */
.admin-alert-readable .mud-alert-message {
    color: var(--mud-palette-text-primary);
}

/* Nieuwe bestandsrijen na een herrender komen rustig in beeld (alleen opacity). */
@keyframes admin-file-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.admin-file-new {
    animation: admin-file-fade-in 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .admin-file-new {
        animation: none;
    }
}

/* ── Logistieke sectie (fase 4) ────────────────────────────────────────────────────
   Motion is hier bewust minimaal: 150–250 ms ease-out voor verschijnen en voor de
   positieovergang van een verplaatste rij. Geen bounce, geen schudden bij een fout,
   niets dat aandacht vraagt — dit is een werkomgeving, geen consumentenscherm. */

.logistics-recalc {
    animation: logistics-fade-in 150ms ease-out;
}

.logistics-stop-row {
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.logistics-stop-row:hover {
    background-color: rgba(34, 49, 59, 0.04);
}

@keyframes logistics-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* De kaartcontainer heeft een vaste hoogte zodat de CC-BY-bronvermelding nooit door een
   overlay of z-index bedekt raakt. */
.logistics-map {
    min-height: 280px;
}

@media (prefers-reduced-motion: reduce) {
    .logistics-recalc {
        animation: none;
    }

    .logistics-stop-row {
        transition: none;
    }
}

/* Een uitgeschakelde actieknop met een reden is geen <button> maar een focusbare
   <span role="button" aria-disabled="true"> — anders zou hij niet met Tab bereikbaar zijn en
   zou de gebruiker de reden nooit horen. Een span krijgt van de browser echter de kale
   default-focusring in plaats van de thema-navy die MudBlazor op alle echte knoppen zet. Deze
   regel trekt dat gelijk; er wordt nergens goud gebruikt (UX-invariant 7 / D26). */
[role="button"][aria-disabled="true"]:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--mud-default-borderradius);
}