/* ============================================================
   Numeris – globale responsive regels
   Doel: geen horizontale paginascroll op telefoons/tablets;
   dialogen bruikbaar op kleine schermen; tabellen scrollen
   binnen hun eigen container.
   ============================================================ */

/* --- Dialogen: op telefoons (vrijwel) schermvullend --- */
@media (max-width: 599.95px) {
    .mud-dialog:not(.mud-dialog-fullscreen) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px !important;
        max-height: calc(100dvh - 16px);
    }

    .mud-dialog .mud-dialog-content {
        overflow-y: auto;
        overscroll-behavior: contain;
        max-height: calc(100dvh - 140px);
    }

    /* Actieknoppen mogen wrappen i.p.v. buiten beeld vallen */
    .mud-dialog .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* --- Tabellen: scrollen binnen de eigen container, niet de pagina --- */
.mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mud-table .mud-table-root {
    min-width: 0;
}

/* Hulpiklasse: wikkel brede inhoud (rauwe <table>, kalender, e.d.) hierin */
.numeris-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* --- Algemene overloopbescherming --- */
img {
    max-width: 100%;
    height: auto;
}

/* Lange teksten (referenties, e-mails, URL's) mogen afbreken */
.numeris-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- Toolbars/filterbalken: wrappen op kleine schermen --- */
@media (max-width: 959.95px) {
    .mud-toolbar {
        flex-wrap: wrap;
        row-gap: 4px;
        height: auto;
        min-height: var(--mud-appbar-height, 64px);
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* --- Paginering: compact op telefoons --- */
@media (max-width: 599.95px) {
    .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        padding: 4px 0;
    }
}