/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-57z988fo1u] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

main[b-57z988fo1u] {
    flex: 1;
    position: relative;
    min-width: 0;
}

/* Eén vlak in de merkkleur, hetzelfde token als de kop op het startscherm. Hier stond een
   gradient van bijna-zwart naar donkerblauw (#081225 → #10233f → #0f172a); die hoorde niet
   bij de huisstijl van www.dm-line.be. Alles wat in NavMenu.razor.css over deze achtergrond
   getekend wordt, werkt met doorschijnend wit, zodat het één geheel blijft. */
.sidebar[b-57z988fo1u] {
    background: var(--dm-primary);
    border-right: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 12px 0 40px rgba(15, 23, 42, 0.08);
}

article[b-57z988fo1u] {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    min-width: 0;
}

.top-row[b-57z988fo1u] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-57z988fo1u]  a, .top-row[b-57z988fo1u]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-57z988fo1u]  a:hover, .top-row[b-57z988fo1u]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-57z988fo1u]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-57z988fo1u] {
        justify-content: space-between;
    }

    .top-row[b-57z988fo1u]  a, .top-row[b-57z988fo1u]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-57z988fo1u] {
        flex-direction: row;
    }

    .sidebar[b-57z988fo1u] {
        width: auto;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
        align-self: flex-start;
        /* Sticky maakt van de zijbalk een eigen stapelcontext. Zonder z-index staat die
           op hetzelfde niveau als <main>, dat later in de DOM komt en dus wint: de
           globale zoeker (Ctrl+K) leeft in de bovenbalk van het menu en verdween daardoor
           achter de kaarten van de pagina, hoe hoog haar eigen z-index ook stond.
           1040 ligt bewust boven sticky paginakoppen (1020/1030) maar onder Modal.razor
           (1050) en de toasts (1070/1080), zodat een dialoog de zijbalk blijft afdekken. */
        z-index: 1040;
    }

    main[b-57z988fo1u] {
        min-height: 100vh;
    }

    .top-row[b-57z988fo1u] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-57z988fo1u]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-57z988fo1u], article[b-57z988fo1u] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    article[b-57z988fo1u] {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
    }
}

@media (max-width: 640.98px) {
    article[b-57z988fo1u] {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }
}

#blazor-error-ui[b-57z988fo1u] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    /* Boven elke dialoog (backdrop 1050, geneste dialogen tot 1070). Bleef de balk
       eronder, dan zag je na een serverfout niets meer gebeuren: het scherm leek
       gewoon niet te reageren op de knoppen. */
    z-index: 1100;
}

    #blazor-error-ui .dismiss[b-57z988fo1u] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.route-loading-bar[b-57z988fo1u] {
    position: sticky;
    top: 0;
    z-index: 1200;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, #0d6efd 0%, #20c997 60%, #0d6efd 100%);
    background-size: 200% 100%;
    opacity: 0;
    transform: scaleX(0.35);
    transform-origin: left;
    transition: opacity 120ms ease;
}

.route-loading-bar.active[b-57z988fo1u] {
    opacity: 1;
    animation: route-loading-bar-move-b-57z988fo1u 1.1s linear infinite;
}

.route-loading-overlay[b-57z988fo1u] {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.66);
    backdrop-filter: blur(1px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.route-loading-card[b-57z988fo1u] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.6rem;
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
    font-weight: 600;
    color: #0f172a;
}

@keyframes route-loading-bar-move-b-57z988fo1u {
    0% {
        background-position: 200% 0;
        transform: scaleX(0.35);
    }
    50% {
        transform: scaleX(1);
    }
    100% {
        background-position: 0 0;
        transform: scaleX(0.35);
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Root container: controls sidebar width ────────────────────────── */

.navmenu-root[b-ppqyruxf25] {
    width: 272px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: width 0.2s ease;
    overflow: hidden;
    color: #e5eefc;
}

.navmenu-root.collapsed[b-ppqyruxf25] {
    width: 72px;
}

/* ── Hamburger (mobile) ────────────────────────────────────────────── */

.navbar-toggler[b-ppqyruxf25] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ppqyruxf25] {
    background-color: rgba(255, 255, 255, 0.5);
}

/* ── Top row (brand bar) ───────────────────────────────────────────── */

/* Geen eigen achtergrond meer: de merkbalk deelt de kleur van de zijbalk en wordt enkel
   door de haarlijn eronder gescheiden. De donkere wash die hier stond (rgba(15,23,42,…))
   was afgestemd op de bijna-zwarte gradient van vroeger; op #1c384e werd dat een koud,
   los blok bovenop de zijbalk. */
.top-row[b-ppqyruxf25] {
    min-height: 3.5rem;
    background: none;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.navbar-brand[b-ppqyruxf25] {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.collapsed-brand[b-ppqyruxf25] {
    display: block;
    text-align: center;
    width: 100%;
    letter-spacing: 0.12em;
}

/* ── Icon base (bootstrap-icons webfont) ───────────────────────────── */

.bi[b-ppqyruxf25] {
    display: inline-block;
    width: 1.25rem;
    margin-right: 0.75rem;
    font-size: 1.05rem;
    line-height: 1;
    text-align: center;
    flex-shrink: 0;
}

/* When collapsed, remove icon right margin so icon centers better */
.collapsed .bi[b-ppqyruxf25] {
    margin-right: 0;
}

/* ── Notification badge ────────────────────────────────────────────── */

.nav-notification-badge[b-ppqyruxf25] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.35rem;
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background-color: #dc3545;
    border-radius: 10rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Hide badge text when sidebar collapsed, but show a dot */
[b-ppqyruxf25] .collapsed .nav-notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 0.6rem;
    height: 0.6rem;
    padding: 0;
    font-size: 0;
}

/* ── Nav items ─────────────────────────────────────────────────────── */

.nav-item[b-ppqyruxf25] {
    font-size: 0.9rem;
    padding-bottom: 0.25rem;
}

    .nav-item:first-of-type[b-ppqyruxf25] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ppqyruxf25] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ppqyruxf25]  .nav-link {
        color: #dbe7f7;
        background: none;
        border: none;
        border-radius: 12px;
        height: 2.75rem;
        display: flex;
        align-items: center;
        gap: 0.2rem;
        line-height: 2.75rem;
        width: 100%;
        padding: 0 0.8rem;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }

.nav-item[b-ppqyruxf25]  a.active {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    position: relative;
}

/* Accentstreepje links markeert de actieve pagina. Het zandaccent van de huisstijl, hetzelfde
   token als de lijn onder de kop op het startscherm; het felle #60a5fa dat hier stond hoorde
   bij de oude blauwzwarte zijbalk. Het streepje is niet de enige drager van betekenis — de
   actieve link heeft ook een lichtere achtergrond. */
.nav-item[b-ppqyruxf25]  a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 999px;
    background: var(--dm-accent);
}

.nav-item[b-ppqyruxf25]  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: white;
    transform: translateX(1px);
}

/* ── Text labels: hidden when collapsed ────────────────────────────── */

.nav-label[b-ppqyruxf25] {
    white-space: nowrap;
    overflow: hidden;
}

.collapsed .nav-label[b-ppqyruxf25] {
    display: none;
}

/* ── Subfolder toggle button ───────────────────────────────────────── */

.nav-folder-toggle[b-ppqyruxf25] {
    cursor: pointer;
    position: relative;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* In collapsed state, center the icon in the folder toggle */
.collapsed .nav-folder-toggle[b-ppqyruxf25] {
    justify-content: center;
    padding: 0 !important;
}

.nav-folder-arrow[b-ppqyruxf25] {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: auto;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #c8d6ea;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-folder-arrow.open[b-ppqyruxf25] {
    transform: rotate(180deg);
}

/* Hide folder arrows when collapsed */
.collapsed .nav-folder-arrow[b-ppqyruxf25] {
    display: none;
}

/* ── Sub-items (indented children) ─────────────────────────────────── */

.nav-sub-item[b-ppqyruxf25] {
    padding-left: 1.5rem !important;
    padding-bottom: 0.1rem;
}

    .nav-sub-item[b-ppqyruxf25]  .nav-link {
        height: 2.2rem;
        line-height: 2.25rem;
        font-size: 0.85rem;
        opacity: 0.92;
        background: rgba(255, 255, 255, 0.03);
    }

    .nav-sub-item[b-ppqyruxf25]  .nav-link:hover {
        opacity: 1;
    }

/* ── Collapse toggle button (top of sidebar, below brand) ─────────── */

.nav-collapse-toggle[b-ppqyruxf25] {
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    padding: 0.6rem 0.85rem;
    flex-shrink: 0;
}

    .nav-collapse-toggle button[b-ppqyruxf25] {
        color: #dbe7f7;
        background: none;
        border: none;
        border-radius: 12px;
        height: 2.5rem;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 0.7rem;
        cursor: pointer;
        font-size: 0.85rem;
        gap: 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .nav-collapse-toggle button:hover[b-ppqyruxf25] {
        background-color: rgba(255, 255, 255, 0.08);
        color: white;
    }

/* When collapsed, center the toggle icon */
.collapsed .nav-collapse-toggle[b-ppqyruxf25] {
    padding: 0.5rem 0;
}

.collapsed .nav-collapse-toggle button[b-ppqyruxf25] {
    justify-content: center;
    padding: 0;
}

/* When collapsed, center nav link icons */
.collapsed .nav-item[b-ppqyruxf25]  .nav-link {
    justify-content: center;
    padding: 0;
}

/* ── Account-blok onderaan de sidebar ──────────────────────────────── */

/* De wash blijft: over #1c384e leest ze als een donkerder navy (rgb(23,44,65)), dus het
   accountblok zet zich af tegen de rest zonder een andere kleurfamilie binnen te brengen.
   Ze maakt de gedempte gebruikersnaam hieronder ook béter leesbaar (5.53:1 in plaats van
   4.75:1 op het kale vlak) — vervang ze dus niet door een lichtere tint zonder na te meten. */
.nav-account[b-ppqyruxf25] {
    flex-shrink: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding: 0.6rem 0.85rem;
    background: rgba(15, 23, 42, 0.35);
}

.nav-account form[b-ppqyruxf25] {
    margin: 0;
}

/* De naam is tegelijk de ingang naar accountbeheer (o.a. passkeys). */
.nav-account[b-ppqyruxf25]  .nav-account-user,
.nav-account .nav-account-user[b-ppqyruxf25] {
    display: flex;
    align-items: center;
    padding: 0 0.7rem 0.35rem 0.7rem;
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-account[b-ppqyruxf25]  .nav-account-user:hover,
.nav-account .nav-account-user:hover[b-ppqyruxf25] {
    color: white;
    text-decoration: underline;
}

.nav-account[b-ppqyruxf25]  .nav-account-action,
.nav-account .nav-account-action[b-ppqyruxf25] {
    color: #dbe7f7;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    height: 2.5rem;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-account[b-ppqyruxf25]  .nav-account-action:hover,
.nav-account .nav-account-action:hover[b-ppqyruxf25] {
    background-color: rgba(255, 255, 255, 0.12);
    color: white;
}

/* Ingeklapt: alleen het icoon, gecentreerd */
.collapsed .nav-account[b-ppqyruxf25] {
    padding: 0.5rem 0;
}

.collapsed .nav-account[b-ppqyruxf25]  .nav-account-action,
.collapsed .nav-account .nav-account-action[b-ppqyruxf25] {
    justify-content: center;
    padding: 0;
}

/* ── Mobile: scrollable area ───────────────────────────────────────── */

.nav-scrollable[b-ppqyruxf25] {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.nav-scrollable.show[b-ppqyruxf25] {
    display: block;
}

/* ── Mobile: hide collapse toggle, show hamburger, full width ──────── */

@media (max-width: 640.98px) {
    .nav-collapse-toggle[b-ppqyruxf25] {
        display: none;
    }

    /* De hamburger staat absoluut rechtsboven (3.5rem breed, 1rem van de rand).
       Houd die strook vrij, anders schuift de zoekknop eronder en lijken de
       velden over elkaar te liggen. */
    .top-row .container-fluid[b-ppqyruxf25] {
        padding-right: 5.25rem;
    }

    .navmenu-root[b-ppqyruxf25] {
        width: 100% !important;
        box-shadow: none;
    }

    /* On mobile, don't center icons — show full layout */
    .nav-item[b-ppqyruxf25]  .nav-link {
        justify-content: flex-start !important;
        padding: 0 0.8rem !important;
    }

    .collapsed .nav-label[b-ppqyruxf25] {
        display: inline;
    }

    .collapsed .nav-folder-arrow[b-ppqyruxf25] {
        display: inline-block;
    }

    .collapsed .bi[b-ppqyruxf25] {
        margin-right: 0.75rem;
    }

    /* Account-blok volgt het hamburgermenu op mobiel */
    .nav-account[b-ppqyruxf25] {
        display: none;
    }

    .nav-account.show[b-ppqyruxf25] {
        display: block;
    }

    .collapsed .nav-account .nav-account-action[b-ppqyruxf25] {
        justify-content: flex-start !important;
        padding: 0 0.7rem !important;
    }
}

@media (min-width: 641px) {
    .navbar-toggler[b-ppqyruxf25] {
        display: none;
    }

    .nav-scrollable[b-ppqyruxf25] {
        display: block;
        overflow-y: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ensvu2w0hl],
.components-reconnect-repeated-attempt-visible[b-ensvu2w0hl],
.components-reconnect-failed-visible[b-ensvu2w0hl],
.components-pause-visible[b-ensvu2w0hl],
.components-resume-failed-visible[b-ensvu2w0hl],
.components-rejoining-animation[b-ensvu2w0hl] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ensvu2w0hl],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ensvu2w0hl],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ensvu2w0hl],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ensvu2w0hl],
#components-reconnect-modal.components-reconnect-retrying[b-ensvu2w0hl],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ensvu2w0hl],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ensvu2w0hl],
#components-reconnect-modal.components-reconnect-failed[b-ensvu2w0hl],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ensvu2w0hl] {
    display: block;
}


#components-reconnect-modal[b-ensvu2w0hl] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ensvu2w0hl 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ensvu2w0hl 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ensvu2w0hl 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ensvu2w0hl]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ensvu2w0hl 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ensvu2w0hl {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ensvu2w0hl {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ensvu2w0hl {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ensvu2w0hl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ensvu2w0hl] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ensvu2w0hl] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ensvu2w0hl] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ensvu2w0hl] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ensvu2w0hl] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ensvu2w0hl] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ensvu2w0hl 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ensvu2w0hl] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ensvu2w0hl {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AdminStatus.razor.rz.scp.css */
.admin-history-summary[b-btd7lrcecm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

summary.card-header[b-btd7lrcecm] {
    cursor: pointer;
    list-style: none;
}

summary.card-header[b-btd7lrcecm]::-webkit-details-marker {
    display: none;
}

details.card > summary.card-header[b-btd7lrcecm]::after {
    content: "▸";
    float: right;
    opacity: 0.6;
}

details.card[open] > summary.card-header[b-btd7lrcecm]::after {
    content: "▾";
}
/* /Components/Pages/OffertePortaal.razor.rz.scp.css */
/* Filterkaarten van het portaal, in dezelfde maatvoering als de transportplanning:
   de zoekbalk rekt mee, de keuzelijsten houden een vaste, leesbare breedte. */
.portaal-filter-zoek[b-7pxlm9cwad] {
    min-width: 240px;
    flex: 1 1 260px;
}

.portaal-filter-keuze[b-7pxlm9cwad] {
    min-width: 170px;
    flex: 0 1 190px;
}

/* Het kolommenmenu wordt zo lang als de lijst kolommen; laat het scrollen in plaats
   van onderaan het scherm af te snijden. */
.portaal-kolommenmenu[b-7pxlm9cwad] {
    max-height: 60vh;
    overflow-y: auto;
}
/* /Components/Pages/ProjectListMontage.razor.rz.scp.css */
.project-list-montage-filters[b-45e8xhucxv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: end;
}

.project-list-montage-filters > div[b-45e8xhucxv] {
    min-width: 0;
}

.filter-search[b-45e8xhucxv] {
    flex: 1 1 220px;
    min-width: 200px;
}

.filter-phase[b-45e8xhucxv] {
    flex: 0 1 220px;
    min-width: 200px;
}

.filter-vestiging[b-45e8xhucxv],
.filter-verantwoordelijke[b-45e8xhucxv],
.filter-montagegroep[b-45e8xhucxv],
.filter-productieweek[b-45e8xhucxv] {
    flex: 0 1 170px;
    min-width: 150px;
}

#project-list-montage-table thead th[b-45e8xhucxv] {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f8f9fa;
    box-shadow: inset 0 -1px 0 #dee2e6;
}
/* /Components/Pages/ProjectListSav.razor.rz.scp.css */
.project-list-sav-filters[b-8p323q9gky] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: end;
}

.project-list-sav-filters > div[b-8p323q9gky] {
    min-width: 0;
}

.filter-search[b-8p323q9gky] {
    flex: 1 1 220px;
    min-width: 200px;
}

.filter-phase[b-8p323q9gky] {
    flex: 0 1 220px;
    min-width: 200px;
}

.filter-vestiging[b-8p323q9gky],
.filter-montagegroep[b-8p323q9gky],
.filter-verantwoordelijke[b-8p323q9gky] {
    flex: 0 1 170px;
    min-width: 150px;
}

#project-list-sav-table thead th[b-8p323q9gky] {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f8f9fa;
    box-shadow: inset 0 -1px 0 #dee2e6;
}
/* /Components/Pages/TransportPlanning.razor.rz.scp.css */
.transport-planning-top[b-mt942h4705] {
    position: sticky;
    top: 0.5rem;
    z-index: 1030;
    padding: 0.6rem 0.7rem 0.55rem;
    margin-bottom: 0.75rem;
    background: rgba(238, 242, 247, 0.96);
    border: 1px solid var(--dm-border);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
}

.transport-planning-top h1[b-mt942h4705] {
    line-height: 1.05;
}

.transport-planning-top .text-muted.small[b-mt942h4705] {
    line-height: 1.15;
}

.transport-planning-meta .badge[b-mt942h4705] {
    font-size: 0.65rem;
    padding: 0.2rem 0.38rem;
}

.transport-planning-actions .btn[b-mt942h4705] {
    white-space: nowrap;
    padding-inline: 0.7rem;
}

.transport-planning-statuses .btn[b-mt942h4705] {
    min-width: 108px;
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
}

.transport-planning-filters .card-body[b-mt942h4705] {
    padding: 0.65rem 0.7rem;
}

.transport-planning-filters .form-label[b-mt942h4705] {
    margin-bottom: 0.16rem;
    font-size: 0.75rem;
}

.transport-planning-filters .form-control-sm[b-mt942h4705],
.transport-planning-filters .form-select-sm[b-mt942h4705] {
    min-height: calc(1.5em + 0.5rem + 2px);
}

.transport-planning-filter-actions[b-mt942h4705] {
    padding-top: 0.5rem !important;
}

.transport-filter-destination[b-mt942h4705] {
    min-width: 180px;
    flex: 0 1 180px;
}

/* Het brede zoekveld is de hoofdingang van deze lijst en mag meer plaats innemen
   dan de keuzelijstjes ernaast. */
.transport-filter-project[b-mt942h4705] {
    min-width: 220px;
    flex: 1 1 280px;
    max-width: 380px;
}

.transport-filter-transport-date[b-mt942h4705] {
    min-width: 160px;
    flex: 0 1 160px;
}

.transport-filter-montage-date[b-mt942h4705] {
    min-width: 190px;
    flex: 0 1 190px;
}

.transport-bulk-date[b-mt942h4705] {
    min-width: 220px;
    max-width: 280px;
}

.transport-planning-table-wrapper[b-mt942h4705] {
    overflow: visible;
}

.transport-planning-table-wrapper #transport-planning-table thead th[b-mt942h4705] {
    top: 5.4rem;
    z-index: 1020;
    background-color: #f8f9fa;
    box-shadow: inset 0 -1px 0 #dee2e6;
}

@media (max-width: 991.98px) {
    .transport-planning-table-wrapper[b-mt942h4705] {
        overflow-x: auto;
    }

    .transport-planning-table-wrapper #transport-planning-table thead th[b-mt942h4705] {
        top: 7.5rem;
    }
}

@media (max-width: 991.98px) {
    .transport-planning-top[b-mt942h4705] {
        top: 0.5rem;
        padding: 0.65rem;
    }

    .transport-planning-statuses .btn[b-mt942h4705] {
        min-width: 108px;
    }
}

@media (max-width: 991.98px) {
    /* Onder 992px is de wrapper door overflow-x:auto sowieso een scroll-container;
       zonder eigen hoogte scrollt hij nooit en blijft <Virtualize> op het eerste
       rijvenster staan. Vaste hoogte maakt hem een echte container; de sticky
       header plakt dan binnen de wrapper (top: 0). */
    .transport-planning-table-wrapper[b-mt942h4705] {
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }

    .transport-planning-table-wrapper #transport-planning-table thead th[b-mt942h4705] {
        top: 0;
    }
}
/* /Components/Shared/BestandSleepzone.razor.rz.scp.css */
.bestand-sleepzone[b-1fkbj9jd57] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    padding: 1rem;
    border: 2px dashed var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    background-color: var(--bs-body-bg, #fff);
    text-align: center;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.bestand-sleepzone:hover[b-1fkbj9jd57],
.bestand-sleepzone:focus-within[b-1fkbj9jd57] {
    border-color: var(--bs-primary, #0d6efd);
}

.bestand-sleepzone.sleept[b-1fkbj9jd57] {
    border-color: var(--bs-primary, #0d6efd);
    background-color: rgba(13, 110, 253, .07);
}

.bestand-sleepzone.uit[b-1fkbj9jd57] {
    opacity: .65;
}

/* De input dekt de héle zone: elke drop landt zo op de input zelf, en niet op de
   pagina eronder — die zou het bestand gewoon in een nieuw tabblad openen. */
.bestand-sleepzone[b-1fkbj9jd57]  .bestand-sleepzone-invoer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.bestand-sleepzone.uit[b-1fkbj9jd57]  .bestand-sleepzone-invoer {
    cursor: not-allowed;
}

.bestand-sleepzone-tekst[b-1fkbj9jd57] {
    pointer-events: none;
    color: var(--bs-secondary-color, #6c757d);
}

.bestand-sleepzone-hint[b-1fkbj9jd57] {
    margin-top: .35rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
}
/* /Components/Shared/LijstKolommenMenu.razor.rz.scp.css */
/* Het kolommenmenu wordt zo lang als de lijst kolommen; laat het scrollen in plaats
   van onderaan het scherm af te snijden. */
.lijst-kolommenmenu[b-icrcf5baq4] {
    max-height: 60vh;
    overflow-y: auto;
}
/* /Components/Shared/OpleidingsmodusBalk.razor.rz.scp.css */
.opleidingsmodus-balk[b-yc0pvy67mw] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem 1rem;
    background-color: #6f42c1;
    color: #fff;
    font-size: .9rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.opleidingsmodus-tekst[b-yc0pvy67mw] {
    flex: 1 1 auto;
}

.opleidingsmodus-stop[b-yc0pvy67mw] {
    flex: 0 0 auto;
}