p {
    margin-bottom: 0;
    margin-top: 0;
}

/* MudButton outlined: standaard secondary kleur */
.mud-button-outlined.mud-default-text {
    border-color: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-secondary) !important;
}

/* MudSwitch: altijd groen wanneer ingeschakeld */
.mud-switch-base.mud-checked .mud-switch-track {
    background-color: #43a047 !important;
    border-color: #43a047 !important;
}
.mud-switch-base.mud-checked .mud-switch-thumb {
    background-color: #43a047 !important;
}

/* Verklarende helper-teksten onder velden leesbaarder maken: secondary kleur
   i.p.v. het standaard lichtgrijs. Foutmeldingen (mud-input-error) blijven ongemoeid. */
.mud-input-helper-text:not(.mud-input-error) {
    color: var(--mud-palette-secondary) !important;
}

/* ---------------------------------------------------------------------------
   HTML-editor (bulkberichten, CMS-blokken)
   De kaart eromheen gebruikt Surface (#E5E5E5 in light mode), waardoor de
   schrijfruimte wegviel tegen de achtergrond. Background is wit in light mode en
   donker in dark mode, dus dat blijft in beide thema's kloppen.
   --------------------------------------------------------------------------- */
.html-content-wrapper .ql-toolbar,
.html-content-wrapper .ql-container {
    background-color: var(--mud-palette-background);
}

/* Standaard is de editor maar een paar regels hoog. Voor een hele e-mail is dat te
   krap; CMS-blokken zijn juist gebaat bij compact, vandaar de opt-in class.
   De wrapper blijft resizable, dus groter of kleiner slepen kan nog steeds. */
.htp-editor-tall .html-content-wrapper {
    min-height: 340px;
}

.htp-editor-tall .html-content-wrapper .ql-editor {
    min-height: 260px;
}

/* ---------------------------------------------------------------------------
   Tabstrook voor de ontvangerselectie (bulkberichten)
   Alleen de tabs zelf aankleden — géén eigen achtergrond op de strook of het paneel.
   Een witte strook binnen de grijze kaart gaf een los eiland.
   Gescoped op een eigen class: tabs elders in de app blijven ongemoeid.
   --------------------------------------------------------------------------- */
.htp-tabs-clear .mud-tabs-toolbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.htp-tabs-clear .mud-tab {
    font-weight: 600;
    opacity: 0.55;
}

.htp-tabs-clear .mud-tab.mud-tab-active {
    opacity: 1;
    color: var(--mud-palette-tertiary) !important;
}

/* ---------------------------------------------------------------------------
   Uitgeschakelde knoppen op de donkere balken
   Het lichte thema geeft uitgeschakelde controls donkergrijze tekst (HtpTheme.ActionDisabled);
   op de donkerblauwe appbalk en paper1-balk moet dat licht zijn. Een lichte MudPaper binnen
   zo'n balk (tabs, tabellen) krijgt weer het donkergrijs van het thema.
   --------------------------------------------------------------------------- */
.mud-appbar,
.paper1-light {
    --mud-palette-action-disabled: rgba(255, 255, 255, 0.55);
    --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.2);
}

.paper1-light .mud-paper {
    --mud-palette-action-disabled: #616161;
    --mud-palette-action-disabled-background: #D6D6D6;
}

/* wwwroot/css/app.css */
.install-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: .75rem;
    box-shadow: 0 6px 30px rgba(0,0,0,.12);
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    z-index: 10000;
}

.install-btn {
    padding: .5rem .9rem;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
}

.dismiss-btn {
    background: transparent;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}



body {
    font-family: 'Roboto', Fallback, sans-serif;
    font-size: .875rem !important;
}

.notranslate {
    translate: no;
}


.mud-list-item-clickable {
    color: black !important;
}

button.mud-input-clear-button svg path {
    color: black !important;
}

.mud-popover.mud-popover-open {
    min-width: 250px;
}

.mud-list.mud-menu-list {
    overflow-y: inherit;
}



/* Actieve tab duidelijk markeren voor ALLE MudTabs: het standaard thema maakt te weinig
   onderscheid. Globaal via app.css (niet per component), zodat elke MudTabs consistent is:
   vette, primair gekleurde actieve tab + primair gekleurde onderstreping (slider). */
.mud-tabs .mud-tab.mud-tab-active {
    font-weight: 700 !important;
    color: var(--mud-palette-primary) !important;
    background-color: #fff !important;
    border-bottom: 3px solid var(--mud-palette-primary) !important;
}

/* MudBlazor's eigen slider rendert hier breder dan de tab; we markeren de actieve tab
   via de border-bottom hierboven (exact tab-breed), dus de losse slider verbergen. */
.mud-tabs .mud-tab-slider {
    display: none !important;
}

/* Sorteerbalk voor smalle schermen (Shared/Components/Tables/MobileSortBar.razor): alleen zichtbaar
   onder het Breakpoint van de tabel; de eigen MudBlazor-keuzelijst van de tabel gaat dan uit. */
.htp-mobile-sortbar {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.htp-has-sortbar .mud-table-smalldevices-sortselect {
    display: none !important;
}

@media (max-width: 959.98px) {
    .htp-mobile-sortbar-md {
        display: flex;
    }
}

@media (max-width: 599.98px) {
    .htp-mobile-sortbar-sm {
        display: flex;
    }
}

/* Kaartweergave van tabellen: onder het Breakpoint van de tabel zet MudBlazor elke rij om in een
   blok met label/waarde-regels, met alleen een 1px-lijntje ertussen. Op een telefoon is dan niet te
   zien waar het ene record ophoudt en het volgende begint. Daarom hier elke rij als losse kaart:
   tussenruimte, rand en een accentstreep links, in dezelfde opmaak als de ruiterblokken van het
   beoordelingsoverzicht (.alo-card). Geldt voor alle MudTables; de media queries zijn
   dezelfde als die van MudBlazor zelf (mud-xs/sm/md-table). Een uitklaprij (ChildRowContent, een
   rij met een enkele colspan-cel) wordt tegen de kaart erboven aan geschoven. Lange waarden
   zonder spaties (e-mailadressen) mogen overal afbreken, anders wordt de tabel breder dan het
   scherm en valt de rechterrand van de kaart weg; het label zelf breekt alleen op woorden. */

@media (max-width: 600px) {
    .mud-xs-table .mud-table-body {
        border-top: none;
    }

    .mud-xs-table .mud-table-body > .mud-table-row {
        display: block;
        margin-bottom: 10px;
        border: 1px solid var(--mud-palette-lines-inputs);
        border-left: 5px solid var(--mud-palette-appbar-background);
        border-radius: 6px;
        overflow: hidden;
    }

    .mud-xs-table .mud-table-body > .mud-table-row:last-child {
        margin-bottom: 0;
    }

    .mud-xs-table .mud-table-body > .mud-table-row > .mud-table-cell:last-child {
        border-bottom: none;
    }

    .mud-xs-table .mud-table-body > .mud-table-row > .mud-table-cell {
        overflow-wrap: anywhere;
    }

    .mud-xs-table .mud-table-body > .mud-table-row > .mud-table-cell:before {
        overflow-wrap: normal;
    }

    .mud-xs-table .mud-table-body > .mud-table-row + .mud-table-row:has(> td[colspan]:only-child) {
        margin-top: -10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

@media (max-width: 960px) {
    .mud-sm-table .mud-table-body {
        border-top: none;
    }

    .mud-sm-table .mud-table-body > .mud-table-row {
        display: block;
        margin-bottom: 10px;
        border: 1px solid var(--mud-palette-lines-inputs);
        border-left: 5px solid var(--mud-palette-appbar-background);
        border-radius: 6px;
        overflow: hidden;
    }

    .mud-sm-table .mud-table-body > .mud-table-row:last-child {
        margin-bottom: 0;
    }

    .mud-sm-table .mud-table-body > .mud-table-row > .mud-table-cell:last-child {
        border-bottom: none;
    }

    .mud-sm-table .mud-table-body > .mud-table-row > .mud-table-cell {
        overflow-wrap: anywhere;
    }

    .mud-sm-table .mud-table-body > .mud-table-row > .mud-table-cell:before {
        overflow-wrap: normal;
    }

    .mud-sm-table .mud-table-body > .mud-table-row + .mud-table-row:has(> td[colspan]:only-child) {
        margin-top: -10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

@media (max-width: 1280px) {
    .mud-md-table .mud-table-body {
        border-top: none;
    }

    .mud-md-table .mud-table-body > .mud-table-row {
        display: block;
        margin-bottom: 10px;
        border: 1px solid var(--mud-palette-lines-inputs);
        border-left: 5px solid var(--mud-palette-appbar-background);
        border-radius: 6px;
        overflow: hidden;
    }

    .mud-md-table .mud-table-body > .mud-table-row:last-child {
        margin-bottom: 0;
    }

    .mud-md-table .mud-table-body > .mud-table-row > .mud-table-cell:last-child {
        border-bottom: none;
    }

    .mud-md-table .mud-table-body > .mud-table-row > .mud-table-cell {
        overflow-wrap: anywhere;
    }

    .mud-md-table .mud-table-body > .mud-table-row > .mud-table-cell:before {
        overflow-wrap: normal;
    }

    .mud-md-table .mud-table-body > .mud-table-row + .mud-table-row:has(> td[colspan]:only-child) {
        margin-top: -10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

@media (max-width: 600px) {
    .mud-tabs-tabbar-content {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100vw !important;
    }

    .mud-tabs-tabbar-wrapper {
        display: inline-block !important;
        min-width: max-content !important;
        transform: none !important; /* OVERRIDE MudBlazor JS transform */
        transition: none !important;
    }

    .mud-tabs-scroll-button {
        display: none !important;
    }

    .mud-tab {
        display: inline-block !important;
        min-width: 110px !important;
        white-space: nowrap !important;
    }

    /* Verborgen tabs aankondigen: script/tabs-scroll-hint.js zet htp-tabs-more-right/-left op
       de tabbalk zodra er buiten beeld nog tabs staan; hier een vervaging met pijltje aan die
       kant. Een vaste schaduw zag je niet, en zonder scrollpositie weet CSS niet of er meer is. */
    .mud-tabs-tabbar {
        position: relative;
    }

    .mud-tabs-tabbar.htp-tabs-more-right::after,
    .mud-tabs-tabbar.htp-tabs-more-left::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 48px;
        pointer-events: none;
        z-index: 2;
        background-repeat: no-repeat;
        background-size: auto, 22px 22px;
    }

    .mud-tabs-tabbar.htp-tabs-more-right::after {
        right: 0;
        background-image:
            linear-gradient(to left, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(0,0,0,0.7)'%3E%3Cpath d='M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
        background-position: right center, right 4px center;
    }

    .mud-tabs-tabbar.htp-tabs-more-left::before {
        left: 0;
        background-image:
            linear-gradient(to right, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(0,0,0,0.7)'%3E%3Cpath d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
        background-position: left center, left 4px center;
    }
    .radio-center-group {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
        justify-content: center;
    }

    .radio-inline {
        display: flex;
        gap: 2.5rem; /* afstand tussen Ja en Nee */
        flex-direction: row; /* Ja/Nee naast elkaar, gecentreerd */
        gap: 2rem;
    }

    .my-upload-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .button-right-responsive {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
    }

    .radio-grid {
        display: flex;
        flex-wrap: wrap;
    }

        .radio-grid .mud-radio {
            width: 50%;
            min-width: 120px;
        }
}


.mud-nav-group > .mud-nav-link > .mud-nav-link-text {
    font-weight: 700;
}

.mud-container--gutters {
    padding-left: 6px;
    padding-right: 6px;
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-tertiary);
    background-color: rgb(125 124 137 / 10%);
}

.validation-message {
    color: red;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}
/* Roboto */
@font-face {
    font-weight: 400;
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    src: url('/css/fonts/roboto/roboto-v30-latin-ext-regular.woff2') format('woff2'), url('/css/fonts/roboto-v30-latin-ext-regular.woff') format('woff');
}


@font-face {
    font-weight: 700;
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    src: url('/css/fonts/roboto/roboto-v30-latin-ext-700.woff2') format('woff2'), url('/css/fonts/roboto/roboto-v30-latin-ext-700.woff') format('woff');
}

.roboto-text {
    font-family: Roboto !important;
}


/* Monterrat */

@font-face {
    font-weight: 700;
    font-family: 'Montserrat';
    font-style: normal;
    font-display: swap;
    src: url('/css/fonts/montserrat/montserrat-v25-latin-ext-700.woff') format('woff'), url('/css/fonts/montserrat/montserrat-v25-latin-ext-700.woff2') format('woff2');
}

.montserrat-bold {
    font-family: Montserrat !important;
}

.bold {
    font-weight: bold;
}

h1, h2, h3, h4, h5, h6, a, .mud-table-cell, mud-typography-body1, mud-typography-body2 {
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: Montserrat !important;
    font-style: normal !important;
    font-weight: 700;
}

h4, h5, h6 {
    font-family: roboto !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

h1 {
    /*40px*/
    font-size: 2.5rem !important;
}

h2 {
    /* 24 px*/
    font-size: 1.5rem !important;
}

h3 {
    /* 18 px*/
    font-size: 1.125rem !important;
}

h4 {
    /*18 px*/
    font-size: 1.125rem !important;
}

h5 {
    /*18 px*/
    font-size: 1.125rem !important;
}

h6 {
    /*18 px*/
    font-size: 1.125rem !important;
}

/*@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    h1 {*/
/* 40 px*/
/*font-size: 2rem !important;
    }
}*/

.mud-typography-body1.bold {
    font-weight: 700 !important;
}

.cell-left-align {
    text-align: left;
    width: 100%;
    display: block;
}

/*p, .mud-table-cell, mud-typography-body1, label {
    font-family: Roboto !important;*/
    /*16 px */
    /*font-size: .875rem !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 24px;
}*/

.mud-typography-body2 {
    font-family: Roboto !important;
    /*14 px*/
    font-size: .875rem !important;
}

.mud-main-content {
    min-height: calc(100vh - 30px) !important;
    display: flex;
    flex-direction: column;
}

/*This breaks the onboarding carousel*/

.mud-carousel {
    min-height: 420px;
}

@media(max-width: 468px) {
    .mud-carousel {
        min-height: 420px;
    }
}

.onboarding-carousel .img-fluid {
    width: 215px;
}

@media (max-width: 468px) {
    .onboarding-carousel .img-fluid {
        width: 140px;
    }
}

/* App-menu (onderbalk): body.htp-bottomnav-active wordt door BottomNavBar gezet zodra de balk zichtbaar is.
   Alle ruimte-onderaan hangt aan --htp-bottomnav-offset, dus zonder balk verandert er niets. */
:root {
    --htp-bottomnav-height: 60px;
    --htp-bottomnav-offset: 0px;
}

body.htp-bottomnav-active {
    --htp-bottomnav-offset: calc(var(--htp-bottomnav-height) + env(safe-area-inset-bottom, 0px));
}

.mudblazor-main-content {
    min-height: calc(100vh - var(--htp-bottomnav-offset)); /* 100vh + padding zou altijd een scrollbar geven */
    padding-bottom: var(--htp-bottomnav-offset) !important;
    padding-top: calc(var(--mud-appbar-height) + 1rem);
}

.htp-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--htp-bottomnav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    /* 1300: onder de uitschuifbare drawer (appbar+2) en zijn overlay (appbar+1), onder dialogs en snackbars */
    z-index: var(--mud-zindex-appbar);
    /* Zelfde kleur als de appbar bovenin; tekst en iconen lichtgrijs, actieve tab wit */
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, .18);
}

.htp-bottomnav .htp-bottomnav__tab {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 0;
    padding: 6px 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    color: rgba(255, 255, 255, 0.72);
}

.htp-bottomnav .htp-bottomnav__tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.06);
}

.htp-bottomnav .htp-bottomnav__tab .mud-button-label {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.htp-bottomnav .htp-bottomnav__tab--active {
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 3px 0 #fff;
}

/* Label mag twee regels beslaan ("Beschikbare lessen"); langer wordt afgekapt */
.htp-bottomnav .htp-bottomnav__label {
    max-width: 100%;
    line-height: 1.1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
}

/* iPhone safe-area bovenin (notch/statusbalk, alleen > 0 als PWA met doorschijnende statusbalk; in Safari
   zelf en op Android is de inset 0 en doen deze regels niets). De appbar krijgt de inset als padding, en
   alles wat MudBlazor onder de appbar hangt (hoofdinhoud, geclipte drawer) schuift mee. De drawer-regels
   herhalen MudBlazor's eigen xs-varianten (appbar - 1/8 portret, - 1/4 landschap) plus de inset; app.css
   laadt na MudBlazor.min.css, dus bij gelijke specificiteit winnen deze. */
:root {
    --htp-safe-top: env(safe-area-inset-top, 0px);
}

.mud-appbar.mud-appbar-fixed-top {
    padding-top: var(--htp-safe-top);
}

.mudblazor-main-content {
    padding-top: calc(var(--mud-appbar-height) + 1rem + var(--htp-safe-top));
}

.mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always,
.mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
    top: calc(var(--mud-appbar-height) + var(--htp-safe-top));
    height: calc(100% - var(--mud-appbar-height) - var(--htp-safe-top));
}

@media (max-width: 599px) and (orientation: landscape) {
    .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always,
    .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
        top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4 + var(--htp-safe-top));
        height: calc(100% - (var(--mud-appbar-height) - var(--mud-appbar-height) / 4) - var(--htp-safe-top));
    }
}

@media (max-width: 599px) and (orientation: portrait) {
    .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always,
    .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
        top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8 + var(--htp-safe-top));
        height: calc(100% - (var(--mud-appbar-height) - var(--mud-appbar-height) / 8) - var(--htp-safe-top));
    }
}

/* Layouts zonder appbar (login): de inhoud zelf onder de statusbalk vandaan houden */
.htp-safe-top {
    padding-top: var(--htp-safe-top) !important;
}

/* Landschap op iPhone: de balk niet onder de afgeronde hoeken/notch links en rechts */
.htp-bottomnav {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* "Meer"-lade van het app-menu (MudDrawer, Anchor.Bottom, Temporary): hoogte op inhoud met
   scroll, boven de onderbalk, afgeronde bovenhoeken. MudBlazor's gesloten stand rekent met een vaste
   hoogte; met een automatische hoogte schuiven we hem daarom expliciet uit beeld. */
.mud-drawer.htp-more-sheet {
    height: auto !important;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(var(--htp-bottomnav-offset) + 8px);
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

.mud-drawer.htp-more-sheet.mud-drawer--closed {
    bottom: -100vh !important;
}

.htp-more-sheet__grip {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
    margin: 8px auto 4px auto;
}

.htp-more-sheet__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 4px;
}

.htp-more-sheet__grid--actions {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Vanaf een brede telefoon passen de vier acties op één rij */
@media (min-width: 480px) {
    .htp-more-sheet__grid--actions {
        grid-template-columns: repeat(4, 1fr);
    }
}

.htp-more-sheet__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
}

.htp-more-sheet__item:hover,
.htp-more-sheet__item:focus-visible {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    outline: none;
}

.htp-more-sheet__label {
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Dashboardtegels (DashboardTileGrid) */
.htp-tile {
    cursor: pointer;
    transition: box-shadow .15s ease-in-out;
}

.htp-tile:hover,
.htp-tile:focus-visible {
    box-shadow: var(--mud-elevation-2);
    outline: none;
}

.htp-tile--disabled {
    cursor: default;
    opacity: .55;
}

/* Tegeliconen in Color.Primary/Default: die zijn in het lichte thema lichtgrijs en vallen op de
   grijze tegel weg; daarom de appbar-kleur, die in beide thema's donkerblauw is. */
.htp-tile .mud-icon-root.mud-primary-text,
.htp-tile .mud-icon-root.mud-icon-default {
    color: var(--mud-palette-appbar-background) !important;
}

/* Laatst gekozen tegel (na "terug"): zelfde markering als een geselecteerde rij in de lijsten */
.htp-tile--last {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 1px var(--mud-palette-primary) inset;
}

/* Snackbars en de PWA-installatiebanner boven de onderbalk houden */
body.htp-bottomnav-active .mud-snackbar-location-bottom-left {
    bottom: calc(24px + var(--htp-bottomnav-offset));
}

body.htp-bottomnav-active .install-banner {
    bottom: calc(1rem + var(--htp-bottomnav-offset));
}

/*Models*/

@media (max-width: 768px) {
    .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
        font-size: 12px;
    }
}

/*End Models*/

/*Mud inputs*/
/*.mud-input-control > .mud-input-control-input-container {
    border: 1px solid #BABCBA;
    border-radius: 0.25rem !important;
}
*/

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    color: var(--mud-palette-primary-text) !important;
    background-color: #fff !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    color: var(--mud-palette-primary-text) !important;
    background-color: #fff !important;
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-input-error {
    color: var(--mud-palette-primary-text) !important;
    background-color: #fff !important;
}

.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: 19.5px 14px;
}

.mud-link.mud-link-underline-hover {
    color: var(--mud-palette-primary-text) !important;
    text-decoration: none;
}

.mud-input {
    background-color: #fff !important;
}

/* Login page*/
/*.form-control.form-control-solid {
    background-color: #F5F8FA;
    border-color: #F5F8FA;
    color: #5E6278;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.login-title {
    align-self: center;
    padding-bottom: 20px;
}

.login-subtitle {
    align-self: center;
    padding-bottom: 114px;
}

.login-body {
    padding: 40px;
    background: white;
    width: 505px;
}

    .login-body .login-form-logo {
        margin: 0px auto 15px;
        padding-top: 26px;
        width: 240px;
        padding-bottom: 20px;
    }

        .login-body .login-form-logo img {
            width: 100%;
        }
*/
.form-signin {
    width: 100%;
    /*max-width: 330px;*/
    padding: 15px;
    margin: auto;
}

    .form-signin .checkbox {
        font-weight: 400;
    }

    .form-signin .form-control {
        position: relative;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
    }

        .form-signin .form-control:focus {
            z-index: 2;
        }

    .form-signin input {
        margin-bottom: 5px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

        .form-signin input[type="password"] {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

/* Fade in and fade out */

.m-fadeIn {
    animation: fadein 150ms;
    opacity: 1;
    visibility: visible;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.m-fadeOut {
    animation: fadeout 500ms;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.bg-white {
    border: 1px solid var(--mud-palette-primary-darken) !important;
    border-radius: 0.25rem !important;
}

    .bg-white .fa-info-circle {
        color: #00e294;
        font-size: 20px;
    }
/* Touch-vriendelijke profiel menu styling */
.top-bar-popover .mud-popover-open {
    min-width: 280px;
    max-width: 320px;
}

/* Vergroot touch targets in het menu */
.top-bar-popover .mud-list-item {
    min-height: 56px !important; /* WCAG touch target minimum */
    padding: 12px 16px !important;
}

.top-bar-popover .mud-list-item-clickable:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Donkere modus ondersteuning */
@media (prefers-color-scheme: dark) {
    .top-bar-popover .mud-list-item-clickable:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }
}

/* Extra spacing voor icons */
.top-bar-popover .mud-list-item .mud-icon-root {
    margin-right: 16px;
}

/* Ruiterwisselaar (app bar, navmenu, begroeting, keuzelijst) */
.rider-switcher-button {
    text-transform: none !important;
    max-width: 45vw;
}

.rider-switcher-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobiel: alleen avatar/icoon + caret, minimale breedte zodat tenant-menu, ruiterwisselaar en avatar naast elkaar passen */
.rider-switcher-button--compact,
.tenant-menu-button--compact {
    min-width: 0 !important;
    padding: 4px 2px 4px 6px !important;
    max-width: none;
}

.rider-switcher-button--compact .mud-button-label,
.tenant-menu-button--compact .mud-button-label {
    display: inline-flex;
    align-items: center;
}

.rider-switcher-caret {
    margin-left: -2px;
    opacity: 0.7;
}

.rider-menu-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.rider-menu-active-name {
    font-weight: 400;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rider-menu-switch {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 4px;
}

.rider-greeting-switch {
    cursor: pointer;
}

.rider-greeting-switch-button {
    vertical-align: middle;
    margin-left: 4px;
}

.rider-list-item--active {
    background-color: var(--mud-palette-primary-hover);
}

/* Profiel icoon responsive sizing */
@media (max-width: 600px) {
    .profile-menu-button {
        min-width: 64px !important;
        min-height: 64px !important;
    }
}

/* NavMenu optimalisaties - meer ruimte door minder padding */
.sidebar .mud-paper {
    padding: 4px 2px !important; /* Minimale padding voor meer ruimte */
}

.sidebar .mud-nav-link {
    padding-left: 4px !important; /* Minimale padding links */
    padding-right: 4px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.sidebar .mud-nav-group .mud-nav-link {
    padding-left: 12px !important; /* Items onder een hoofdmenu springen in */
}

.sidebar .mud-nav-group .mud-nav-group .mud-nav-link {
    padding-left: 12px !important;
}

/* Items onder een genest submenu: duidelijk verder inspringen dan de submenukop */
.sidebar .mud-nav-group .mud-nav-group .mud-navmenu .mud-nav-item > .mud-nav-link {
    padding-left: 16px !important;
}

/* Geleidelijn naast de items van een genest submenu, zodat de hiërarchie zichtbaar is */
.sidebar .mud-nav-group .mud-nav-group .mud-navmenu {
    margin-left: 12px;
    border-left: 2px solid rgba(var(--mud-palette-tertiary-rgb), 0.35);
}

.sidebar .mud-nav-item {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* MudNavGroup header styling - hoofdmenu items */
.sidebar .mud-nav-group > .mud-nav-link {
    padding-left: 4px !important;
    font-weight: 600;
}

/* Submenu's die zelf ook submenu's bevatten - duidelijk zichtbaar maken */
.sidebar .mud-nav-group .mud-nav-group > .mud-nav-link {
    padding-left: 8px !important;
    border-left: 3px solid var(--mud-palette-primary);
    margin-left: 4px;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05);
    border-radius: 0 4px 4px 0;
}

/* MudBlazor zet geneste groepskoppen expliciet op font-weight 400 (specificiteit 0,4,0);
   hier overschrijven zodat een submenukop altijd vet is, net als een hoofdmenukop */
.sidebar .mud-nav-group .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
    font-weight: 700 !important;
}

.sidebar .mud-nav-group .mud-nav-group > .mud-nav-link:hover {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Expand icon voor submenu's met kinderen - extra visuele indicator */
.sidebar .mud-nav-group .mud-nav-group > .mud-nav-link .mud-nav-link-icon-expand {
    color: var(--mud-palette-primary);
}

/* Compactere collapse/expand overgang */
.sidebar .mud-collapse-wrapper {
    padding-left: 0 !important;
}

/* MudNavMenu breedte optimalisatie */
.sidebar .mud-navmenu {
    padding: 0 !important;
}

/* Ruiter menu - subtiele achtergrondkleur om te onderscheiden van bedrijfsmenu's */
.sidebar .ruiter-menu-section,
.sidebar .ruiter-menu-section .mud-collapse-wrapper {
    background-color: rgba(25, 118, 210, 0.08) !important; /* Lichte blauwe tint */
    border-radius: 4px;
}

.sidebar .ruiter-menu-section {
    margin: 4px 2px;
    padding: 4px 0 !important;
    border-left: 3px solid rgba(25, 118, 210, 0.5);
}

/* Submenu titels vet maken binnen Bedrijfsmenu */
.sidebar .submenu-bold > .mud-nav-link > .mud-nav-link-text {
    font-weight: 600 !important;
}

/* MessageBox delete button styling - target the last button (yes/confirm button) */
.mud-message-box .mud-dialog-actions .mud-button-root:last-child {
    background-color: #f44336 !important; /* Material red */
    color: white !important;
}

.mud-message-box .mud-dialog-actions .mud-button-root:last-child:hover {
    background-color: #d32f2f !important; /* Darker red on hover */
}


/* Spraakinvoer: microfoonknop pulseert zolang er geluisterd wordt */
.htp-mic-listening { animation: htp-mic-pulse 1.2s ease-in-out infinite; }
@keyframes htp-mic-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(244, 67, 54, 0); }
    100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
}


/* Confetti (ConfettiBurst.razor): valt één keer over de ouder met position: relative */
.htp-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.htp-confetti-piece {
    position: absolute; top: -16px; opacity: 0;
    animation-name: htp-confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
/* top-percentages zijn relatief aan de kaart (de container), transform-percentages zouden
   relatief aan het 7px-snippertje zelf zijn - vandaar de val via top. */
@keyframes htp-confetti-fall {
    0%   { top: -16px; transform: rotate(0deg) translateX(0); opacity: 1; }
    80%  { opacity: 1; }
    100% { top: 105%; transform: rotate(540deg) translateX(24px); opacity: 0; }
}
.htp-confetti-horse {
    position: absolute; bottom: 4px; left: 0; font-size: 2rem; line-height: 1;
    animation: htp-gallop-run 2.6s linear 2 forwards;
}
/* het paard-emoji kijkt naar links, dus hij rent van rechts naar links; de huppel zit in de sub-span */
.htp-confetti-horse > span { display: inline-block; animation: htp-gallop-bounce 0.35s ease-in-out infinite alternate; }
@keyframes htp-gallop {
    0%   { transform: translateX(0); }
    100% { transform: translateX(0); }
}
@keyframes htp-gallop-run {
    0%   { left: 102%; opacity: 1; }
    99%  { opacity: 1; }
    100% { left: -12%; opacity: 0; }
}
@keyframes htp-gallop-bounce {
    from { transform: translateY(0) rotate(-4deg); }
    to   { transform: translateY(-6px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
    .htp-confetti { display: none; }
}


/* Statistiekdialogen (Laatste registraties / Laatste abonnementen).
   Op een telefoon kosten de standaardmarges en -paddings van MudDialog te veel van de toch al
   smalle breedte; daarnaast worden de tegels/knoppen een maatje kleiner zodat er meer in beeld
   past zonder te scrollen. Boven 600px blijft alles het normale MudBlazor-formaat. */
.htp-stats-dialog-content {
    max-height: 78vh;
    overflow-y: auto;
}

/* De datumkiezers staan naast elkaar zolang ze passen en vallen daarna onder elkaar. */
.htp-stats-period-pickers > * {
    flex: 1 1 150px;
    min-width: 0;
}

/* Brede tabellen mogen binnen de dialoog schuiven in plaats van hem op te rekken. */
.htp-stats-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    .mud-dialog.htp-stats-dialog {
        margin: 8px;
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
    }

    .htp-stats-dialog .mud-dialog-title {
        padding: 12px 12px 0 12px;
    }

    .htp-stats-dialog-content {
        padding: 8px 12px !important;
        max-height: 80vh;
    }

    .htp-stats-dialog .mud-dialog-actions {
        padding: 4px 12px 8px 12px;
    }

    .htp-stats-dialog-content .mud-button-root {
        font-size: 0.75rem;
    }

    .htp-stats-dialog-content .mud-typography-h5 {
        font-size: 1.25rem;
    }

    .htp-stats-dialog-content .mud-typography-h6 {
        font-size: 1.05rem;
    }

    /* Maandlabels onder de grafieken: 12 maanden op een telefoonbreedte. */
    .htp-stats-dialog-content .mud-charts-xaxis text,
    .htp-stats-dialog-content .mud-charts-yaxis text {
        font-size: 8px;
    }
}

/* Mijn facturen op telefoon: kaart per factuur (MudTable klapt op smalle schermen uit tot losse
   cellen zonder kolomnaam). Achtergrondtinten = dezelfde als de tabelrijen op desktop. */
.htp-invoice-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.htp-invoice-card {
    padding: 12px 14px;
    cursor: pointer;
    border-left: 4px solid var(--mud-palette-success) !important;
}

.htp-invoice-card:hover,
.htp-invoice-card:focus-visible {
    box-shadow: var(--mud-elevation-2);
    outline: none;
}

.htp-invoice-card--open {
    background-color: #FFF3E0;
    border-left-color: var(--mud-palette-warning) !important;
}

.htp-invoice-card--today {
    background-color: #FFF8E1;
    border-left-color: var(--mud-palette-warning) !important;
}

/* Openstaande incassofactuur: wordt afgeschreven, vervalt niet */
.htp-invoice-card--info {
    background-color: #E3F2FD;
    border-left-color: var(--mud-palette-info) !important;
}

.htp-invoice-card--overdue {
    background-color: #FFEBEE;
    border-left-color: var(--mud-palette-error) !important;
}

.htp-invoice-card__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

/* Factuurdetail (Mijn facturen): kopgegevens en BTW-uitsplitsing als op de factuur-pdf */
.htp-invoice-head td,
.htp-invoice-vat td {
    padding: 2px 24px 2px 0;
    font-size: 0.875rem;
    vertical-align: top;
}

.htp-invoice-head td:first-child {
    font-weight: 500;
}

.htp-invoice-vat {
    border-collapse: collapse;
    min-width: 260px;
}

.htp-invoice-vat td:last-child {
    padding-right: 0;
}

.htp-invoice-vat__total td {
    border-top: 1px solid var(--mud-palette-lines-default);
    font-weight: 500;
}

/* Ruiterwisselaar: popover opent vanaf de linkerrand van de knop (op telefoon staat die vlak naast de
   schermrand) en past altijd binnen het scherm; lange namen worden afgekapt i.p.v. uitgerekt. */
.rider-switcher-popover {
    max-width: min(360px, calc(100vw - 24px));
}

.rider-switcher-popover .mud-list-item-text,
.rider-switcher-popover .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Gevulde knop in de kleur van appbar en onderbalk (Balk aanpassen, Akkoord op de abonnementenpagina) */
.htp-appbar-button.mud-button-filled {
    background-color: var(--mud-palette-appbar-background) !important;
    color: var(--mud-palette-appbar-text) !important;
}

.htp-appbar-button.mud-button-filled:hover {
    filter: brightness(1.15);
}

/* Dashboardsecties met meer dan een onderdeel: eerst alleen de kop, openklappen voor de tegels */
.htp-section {
    cursor: pointer;
}

/* De kop moet zwaarder ogen dan de tegels eronder: accentstreep in de appbar-kleur, iets hoger, en
   de tegels van de sectie springen in. Het pijltje in de gewone tekstkleur: text-secondary is in
   het lichte thema #CCC en viel op de grijze kop weg. */
.htp-section.mud-paper {
    min-height: 60px;
    border-left: 10px solid var(--mud-palette-appbar-background);
    box-shadow: var(--mud-elevation-1);
}

.htp-section--open {
    border-color: var(--mud-palette-primary) !important;
    border-left-color: var(--mud-palette-appbar-background) !important;
}

.htp-section__chevron {
    color: var(--mud-palette-text-primary);
    font-size: 1.9rem !important;
    flex-shrink: 0;
}

.htp-section__count.mud-chip {
    background-color: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
    font-weight: 600;
}

.htp-tiles--nested {
    margin-left: 14px;
}

/* Balk aanpassen: gekozen tabs in volgorde (slepen op desktop, pijltjes op telefoon) */
.htp-tabs-order__zone {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.htp-tabs-order__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-background);
}

.htp-tabs-order__row--fixed {
    opacity: .6;
    border-style: dashed;
}

.htp-tabs-order__grip {
    width: 24px;
    color: var(--mud-palette-text-secondary);
    cursor: grab;
    flex-shrink: 0;
}

.htp-tabs-order__nr {
    font-weight: 700;
    flex-shrink: 0;
}

.htp-tabs-order__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.htp-tabs-order .mud-drop-item-dragging {
    opacity: .5;
}

/* Tegelraster van de dashboards */
.htp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 8px;
}

@media (max-width: 599px) {
    .htp-tiles {
        grid-template-columns: 1fr;
    }
}

/* Pagina standaard op 80%, alsof de browser is uitgezoomd (rapportages, faciliteitenagenda): meer
   in beeld. Niet op smalle schermen, daar wordt de tekst anders te klein. --page-zoom is beschikbaar
   voor hoogtes die de zoom moeten compenseren, bv. calc(70vh / var(--page-zoom, 1)). */
@media (min-width: 960px) {
    .page-zoom-80 {
        --page-zoom: .8;
        zoom: var(--page-zoom);
    }
}