/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-iwgm8ttbgt],
.components-reconnect-repeated-attempt-visible[b-iwgm8ttbgt],
.components-reconnect-failed-visible[b-iwgm8ttbgt],
.components-pause-visible[b-iwgm8ttbgt],
.components-resume-failed-visible[b-iwgm8ttbgt],
.components-rejoining-animation[b-iwgm8ttbgt] {
    display: none;
}

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


#components-reconnect-modal[b-iwgm8ttbgt] {
    background-color: var(--bg-panel);
    color: var(--text);
    border: 1px solid var(--border);
    width: 300px;
    margin: 20vh auto;
    padding: 18px;
    
    border-radius: var(--radius);
    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-iwgm8ttbgt 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-iwgm8ttbgt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

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

#components-reconnect-modal button[b-iwgm8ttbgt] {
    border: 1px solid var(--accent);
    background-color: var(--accent);
    color: #fff;
    padding: 4px 24px;
    border-radius: var(--radius);
}

    #components-reconnect-modal button:hover[b-iwgm8ttbgt] {
        background-color: var(--accent-hover);
    }

    #components-reconnect-modal button:active[b-iwgm8ttbgt] {
        background-color: var(--accent-pressed);
        border-color: var(--accent-pressed);
        color: #1A1A1A;
    }

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

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

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

@keyframes components-rejoining-animation-b-iwgm8ttbgt {
    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/Account.razor.rz.scp.css */
/* Summary: mijn account | rechtenrij assistent */

/* De drie rechten naast elkaar, met dezelfde tussenruimte als een knoppenrij. */
.rechtenrij[b-7kxm9yq44f] { display: flex; flex-wrap: wrap; gap: 10px; }
/* /Components/Pages/AiChangesPage.razor.rz.scp.css */
/* Summary: ai-wijzigingen | openstaande rij oplichten | details met voor en na */

/* Een rij die op jou wacht mag opvallen: nadrukkleur links, zoals de voorstelkaartjes in de chat. */
.rij--open td:first-child[b-pn4hwcikeo] { box-shadow: inset 3px 0 0 var(--accent-pressed); }

.regel-meta[b-pn4hwcikeo] { font-size: var(--size-s); }

.niet-terug[b-pn4hwcikeo] {
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--validation);
}

.detail[b-pn4hwcikeo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px 0 8px;
}

@media (max-width: 900px) {
    .detail[b-pn4hwcikeo] { grid-template-columns: 1fr; }
}
/* /Components/Pages/AlertsPage.razor.rz.scp.css */
/* Summary: stijl pagina meldingen | ernst als badge | meerregelige meldingstekst */

/* Een meldingstekst heeft regels (de opsomming uit het sjabloon): die moeten blijven staan. */
.melding[b-68gj11lm6q] { white-space: pre-line; }

/* Eigen ernst-badges: de order-badges hebben een doorhaling (cancelled) of een oranje vlak
   (confirmed) en dragen hier de verkeerde betekenis. */
.badge.ernst-info[b-68gj11lm6q] { background: transparent; border-color: var(--accent); color: var(--accent); }
.badge.ernst-waarschuwing[b-68gj11lm6q] { background: transparent; border-color: var(--warning); color: var(--warning); }
.badge.ernst-fout[b-68gj11lm6q] { background: var(--validation); border-color: var(--validation); color: #FFF; }
/* /Components/Pages/BillingPage.razor.rz.scp.css */
/* Summary: stijl facturatie | betaalstatus als badge | te late factuur valt op */

/* Een factuur die over zijn vervaldatum is, is geen gewone status. */
.badge.telaat[b-i71ugu3ja0] { background: var(--validation); border-color: var(--validation); color: #FFF; }

/* De badge zit in een knop (klikbaar om de datums bij te werken): de knop mag geen eigen
   vlak zijn, anders staat er een knop in een knop. */
.btn.secondary:has(.badge)[b-i71ugu3ja0] { padding: 1px 4px; background: transparent; border-color: transparent; }
.btn.secondary:has(.badge):hover[b-i71ugu3ja0] { border-color: var(--border); background: var(--bg-alt); }
/* /Components/Pages/Home.razor.rz.scp.css */
/* Summary: stijl dashboard | kerncijfer dat aandacht vraagt */

/* Een bezettingsgraad boven de 90% is een cijfer waar je naar moet kijken. */
.tile .value.vol[b-x51i8y8bmb] { color: var(--validation); }
/* /Components/Pages/IssueRulesPage.razor.rz.scp.css */
/* Summary: stijl meldingsregels | regellijst | veldenboom | sjabloonveld | ernstkleur
   Alleen wat aan deze pagina eigen is; panelen, tokens en knoppen komen uit app.css. */

.workbench[b-kmyf4t8m9i] {
    /* Regels - instellingen + sjabloon - velden. De veldenboom heeft een vaste breedte (het is
       een lijst met paden), de instellingen krijgen de rest. */
    grid-template-columns: 280px 1fr 300px;
}

/* --- regellijst ----------------------------------------------------------- */

.regelrij[b-kmyf4t8m9i] {
    display: grid; grid-template-columns: 4px 1fr auto;
    gap: 1px 7px; align-items: center;
    padding: 5px 9px 5px 5px; cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.regelrij:hover[b-kmyf4t8m9i] { background: rgba(0, 0, 0, .05); }
[data-theme="dark"] .regelrij:hover[b-kmyf4t8m9i] { background: rgba(255, 255, 255, .06); }
.regelrij.selected[b-kmyf4t8m9i] { background: var(--accent); color: var(--text-inverted); }

.regelrij__ernst[b-kmyf4t8m9i] { grid-row: 1 / 4; border-radius: 2px; align-self: stretch; }
.ernst--info[b-kmyf4t8m9i] { background: var(--accent); }
.ernst--waarschuwing[b-kmyf4t8m9i] { background: var(--warning); }
.ernst--fout[b-kmyf4t8m9i] { background: var(--validation); }
.regelrij.selected .regelrij__ernst[b-kmyf4t8m9i] { background: var(--text-inverted); }

.regelrij__naam[b-kmyf4t8m9i] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.regelrij__code[b-kmyf4t8m9i], .regelrij__wanneer[b-kmyf4t8m9i] {
    grid-column: 2; color: var(--text-dim); font-size: var(--size-s);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.regelrij.selected .regelrij__code[b-kmyf4t8m9i], .regelrij.selected .regelrij__wanneer[b-kmyf4t8m9i] { color: rgba(255, 255, 255, .82); }
.regelrij__vlaggen[b-kmyf4t8m9i] { grid-row: 1 / 4; grid-column: 3; display: flex; flex-direction: column; gap: 2px; }

.vlag[b-kmyf4t8m9i] {
    padding: 0 4px; border-radius: 2px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .3px;
    color: var(--text-dim); border: 1px solid var(--border);
}
.vlag--fout[b-kmyf4t8m9i] { color: var(--validation); border-color: var(--validation); }
.vlag--melding[b-kmyf4t8m9i] { color: var(--warning); border-color: var(--warning); }
.regelrij.selected .vlag[b-kmyf4t8m9i] { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .5); }

/* --- formulier ------------------------------------------------------------ */

/* Dagen en rollen naast elkaar in plaats van elk op een eigen regel */
.dagen[b-kmyf4t8m9i] { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; min-height: 24px; }

.sjabloon[b-kmyf4t8m9i] {
    font-family: var(--mono); font-size: var(--size-s);
    height: auto; min-height: 170px; resize: vertical;
    white-space: pre; overflow-wrap: normal; overflow-x: auto;
}

.uitkomst[b-kmyf4t8m9i] { margin: 0; border: none; background: transparent; padding: 0; }

/* --- veldenboom ----------------------------------------------------------- */

.veldgroep[b-kmyf4t8m9i] { border-bottom: 1px solid var(--border); }
.veldgroep > summary[b-kmyf4t8m9i] {
    padding: 5px 9px; cursor: pointer;
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
    background: var(--bg-alt);
}
.veldgroep > summary:hover[b-kmyf4t8m9i] { color: var(--text); }

.veld[b-kmyf4t8m9i] {
    display: flex; align-items: baseline; gap: 6px;
    padding: 2px 9px 2px 14px; cursor: grab;
    border-top: 1px solid var(--border);
}
.veld:hover[b-kmyf4t8m9i] { background: rgba(0, 0, 0, .05); }
[data-theme="dark"] .veld:hover[b-kmyf4t8m9i] { background: rgba(255, 255, 255, .06); }
.veld code[b-kmyf4t8m9i] { font-size: var(--size-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veld--kind[b-kmyf4t8m9i] { padding-left: 26px; }
.veld--kind code[b-kmyf4t8m9i] { color: var(--text-dim); }
.veld__soort[b-kmyf4t8m9i] {
    margin-left: auto; flex: none;
    font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--text-dim);
}

/* Onder deze breedte is er geen ruimte voor drie kolommen; de veldenboom valt dan weg en de
   paden staan nog in de F1-documentatie. */
@media (max-width: 1280px) {
    .workbench[b-kmyf4t8m9i] { grid-template-columns: 260px 1fr; }
    .velden[b-kmyf4t8m9i] { display: none; }
}

/* --- voorbeeldwaarden ------------------------------------------------------ */

/* Compacte tabel: het gaat om een handvol parameters naast het sjabloon, niet om een lijst. */
.voorbeelden[b-kmyf4t8m9i] { max-width: 760px; margin-bottom: 8px; }
.voorbeelden td[b-kmyf4t8m9i] { padding: 2px 7px; }
.voorbeelden input[b-kmyf4t8m9i] { max-width: 160px; }
.voorbeelden code[b-kmyf4t8m9i] { font-size: var(--size-s); }

/* --- voedbaar lijstje (tijdstippen, gebruikers) ---------------------------- */

/* Invoerveld + knop op één regel, het lijstje eronder over de volle breedte. */
.voeg-toe[b-kmyf4t8m9i] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.voeg-toe > input[type="time"][b-kmyf4t8m9i] { width: 110px; }
.voeg-toe > select[b-kmyf4t8m9i] { width: auto; min-width: 190px; max-width: 320px; }
.voeg-toe .chips[b-kmyf4t8m9i] { flex-basis: 100%; }

.chips[b-kmyf4t8m9i] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 22px; }

.chip[b-kmyf4t8m9i] {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 3px 1px 7px;
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
    font-size: var(--size-s);
}

/* Het kruisje is de enige actie op een chip: klein, maar wel aanklikbaar (18px). */
.chip button[b-kmyf4t8m9i] {
    width: 16px; height: 16px; padding: 0; line-height: 1;
    display: grid; place-items: center;
    background: none; border: none; border-radius: 50%;
    color: var(--text-dim); font-size: 13px; cursor: pointer;
}
.chip button:hover[b-kmyf4t8m9i] { background: var(--validation); color: #FFF; }
/* /Components/Pages/ScanLayoutsPage.razor.rz.scp.css */
/* Summary: stijl schermindelingen | veldenlijst | eigenschappenpaneel | voorbeeld scanner
   | vlaggen tabstop scanbaar alleen-lezen

   Alleen wat aan deze pagina eigen is; de panelen, tokens en knoppen komen uit app.css. */

.workbench[b-gzjkv4rgq9] {
    /* Lijst - eigenschappen - voorbeeld. Het voorbeeld heeft een vaste breedte, want het
       beeldt een telefoon af; de instellingen krijgen de rest. */
    grid-template-columns: 270px 1fr 290px;
}

/* --- veldenlijst --------------------------------------------------------- */

.veldrij[b-gzjkv4rgq9] {
    display: grid; grid-template-columns: 20px 1fr auto auto;
    gap: 1px 7px; align-items: center;
    padding: 5px 9px; cursor: pointer;
    border-bottom: 1px solid var(--border);
}
.veldrij:hover[b-gzjkv4rgq9] { background: rgba(0, 0, 0, .05); }
[data-theme="dark"] .veldrij:hover[b-gzjkv4rgq9] { background: rgba(255, 255, 255, .06); }
.veldrij.selected[b-gzjkv4rgq9] { background: var(--accent); color: var(--text-inverted); }

/* Zonder deze twee valt de metaregel weg tegen de accentkleur */
.veldrij.selected .veldrij__meta[b-gzjkv4rgq9] { color: rgba(255, 255, 255, .82); }
.veldrij.selected .vlag[b-gzjkv4rgq9] { border-color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .82); }

.veldrij__nr[b-gzjkv4rgq9] { font-size: var(--size-s); color: var(--text-dim); text-align: right; }
.veldrij.selected .veldrij__nr[b-gzjkv4rgq9] { color: rgba(255, 255, 255, .82); }
.veldrij__naam[b-gzjkv4rgq9] { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veldrij__meta[b-gzjkv4rgq9] { grid-column: 2; color: var(--text-dim); font-size: var(--size-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veldrij__vlaggen[b-gzjkv4rgq9] { grid-row: 1 / 3; grid-column: 3; display: flex; gap: 3px; }
.veldrij__orde[b-gzjkv4rgq9] { grid-row: 1 / 3; grid-column: 4; display: flex; flex-direction: column; gap: 1px; }

.veldrij__orde button[b-gzjkv4rgq9] {
    width: 17px; height: 12px; padding: 0; line-height: 1; font-size: 8px; cursor: pointer;
    color: var(--text-dim); background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 2px;
}
.veldrij__orde button:hover:not(:disabled)[b-gzjkv4rgq9] { border-color: var(--accent-hover); color: var(--text); }
.veldrij__orde button:disabled[b-gzjkv4rgq9] { opacity: .4; cursor: default; }

/* Letterbadges in plaats van drie vinkjes per regel: sneller af te lezen en smaller */
.vlag[b-gzjkv4rgq9] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 2px;
    font-size: 9px; font-weight: 700;
    border: 1px solid var(--border); color: var(--text-dim);
}
.vlag--aan[b-gzjkv4rgq9] { background: var(--accent-pressed); border-color: var(--accent-pressed); color: #1A1A1A; }
.veldrij.selected .vlag--aan[b-gzjkv4rgq9] { background: var(--accent-pressed); border-color: var(--accent-pressed); color: #1A1A1A; }

/* --- eigenschappen ------------------------------------------------------- */

.eig[b-gzjkv4rgq9] { max-width: 620px; }
.eig__groep + .eig__groep[b-gzjkv4rgq9] { margin-top: 14px; }

.eig__groep-titel[b-gzjkv4rgq9] {
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
    padding-bottom: 4px; margin-bottom: 7px;
    border-bottom: 1px solid var(--border);
}

.eig__rij[b-gzjkv4rgq9] { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.eig__rij > label:first-child[b-gzjkv4rgq9] {
    width: 120px; flex: none; margin: 0;
    font-size: var(--size-s); text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
}
.eig__rij input[b-gzjkv4rgq9], .eig__rij select[b-gzjkv4rgq9] { width: auto; }

/* Voorwaarderij: veld · vergelijking · waarde in vaste kolommen, zodat de tonen- en de
   verplicht-voorwaarde exact onder elkaar staan (en onder de keuzelijst erboven). Met flex
   schoof elke rij op zodra een keuzelijst een langere tekst kreeg. */
.eig__rij--vw[b-gzjkv4rgq9] {
    display: grid;
    grid-template-columns: 120px 180px 190px 130px auto;
    align-items: center;
}

.eig__rij--vw > label:first-child[b-gzjkv4rgq9] { width: auto; }
.eig__rij--vw > select[b-gzjkv4rgq9], .eig__rij--vw > input[b-gzjkv4rgq9] { width: 100%; }

/* De bovengrens van "ligt tussen" hangt achter het waardeveld; de kolom is er altijd, dus de
   drie kolommen ervoor verschuiven niet wanneer hij verschijnt. */
.eig__vw-tot[b-gzjkv4rgq9] { display: flex; align-items: center; gap: 8px; }
.eig__vw-tot input[b-gzjkv4rgq9] { width: 130px; }

.eig__vinkjes[b-gzjkv4rgq9] { display: flex; flex-direction: column; gap: 6px; }
/* Een aanvinkvakje met zijn tekst ernaast is geen rubriekkopje: de kapitalen en de
   letterafstand van een gewoon label moeten hier terug naar normaal. */
.check[b-gzjkv4rgq9] {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
    text-transform: none; letter-spacing: 0; color: var(--text); font-size: var(--size);
}
.check input[b-gzjkv4rgq9] { width: auto; margin: 0; }

/* --- voorbeeld op de scanner -------------------------------------------- */

.voorbeeld[b-gzjkv4rgq9] { background: var(--bg-alt); }

.toestel[b-gzjkv4rgq9] {
    margin: 10px auto; width: 248px;
    background: var(--bg); border: 1px solid var(--border-strong); border-radius: 8px;
    overflow: hidden;
}
.toestel__balk[b-gzjkv4rgq9] { padding: 7px 9px; background: var(--accent); color: var(--text-inverted); }
.toestel__titel[b-gzjkv4rgq9] { font-size: var(--size); font-weight: 600; }
.toestel__sub[b-gzjkv4rgq9] { font-size: 10px; opacity: .8; }
.toestel__vorm[b-gzjkv4rgq9] { padding: 8px 9px 10px; }

/* Ruimer dan het web: de app wordt met handschoenen op een telefoon bediend */
.tveld[b-gzjkv4rgq9] { margin-bottom: 8px; padding: 2px; border-radius: var(--radius); }
/* Het veld waarin je links werkt, licht hier op — dat is waar het voorbeeld voor is */
.tveld.actief[b-gzjkv4rgq9] { box-shadow: 0 0 0 2px var(--accent-pressed); }

.tveld__label[b-gzjkv4rgq9] {
    font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
}
.tveld__label .ster[b-gzjkv4rgq9] { font-weight: 700; margin-left: 2px; }
.tveld__label .tab[b-gzjkv4rgq9] { float: right; font-size: 11px; }

.tveld__vak[b-gzjkv4rgq9] { display: flex; gap: 4px; margin-top: 2px; }
.tveld__invoer[b-gzjkv4rgq9] {
    flex: 1; min-width: 0; height: 30px;
    display: flex; align-items: center; padding: 0 7px;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: var(--size-l);
}
.tveld__invoer.vast[b-gzjkv4rgq9] { background: var(--bg-alt); }
.tveld__invoer .vooraf[b-gzjkv4rgq9] {
    color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tveld__scan[b-gzjkv4rgq9] {
    width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--text-inverted);
    border-radius: var(--radius); font-size: 13px;
}

.toestel__knop[b-gzjkv4rgq9] {
    margin-top: 4px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ok); color: #FFF; border-radius: 4px;
    font-size: var(--size-l); font-weight: 600;
}

/* Op een smal scherm gaat het voorbeeld eraf: de instellingen wegen zwaarder */
@media (max-width: 1280px) {
    .workbench[b-gzjkv4rgq9] { grid-template-columns: 250px 1fr; }
    .voorbeeld[b-gzjkv4rgq9] { display: none; }
}

/* Veld met een tonen-voorwaarde: op het toestel soms wel, soms niet. */
.tveld.soms[b-gzjkv4rgq9] {
    opacity: .62;
    border-left: 2px dashed var(--border-strong);
    padding-left: 4px;
}

.soms__vlag[b-gzjkv4rgq9] {
    font-size: 9px;
    line-height: 11px;
    padding: 0 4px;
    margin-left: 4px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-dim);
}
/* /Components/Pages/TariffsPage.razor.rz.scp.css */
/* Paneelpagina Tarieven: regels links, de gekozen regel in het midden, de tester rechts.
   Kolombreedtes en pagina-eigen onderdelen horen hier; de panelen zelf staan in app.css.
   min-height én min-width op elk paneel zijn verplicht — zonder die twee groeit een kolom
   buiten de grid en verdwijnt de statusbalk onder de onderkant. */
.workbench[b-qvtvqrsmvw] {
    display: grid;
    grid-template-columns: 260px 1fr 320px;
    gap: 8px;
    height: 100%;
    min-height: 0;
}

.workbench > .panel[b-qvtvqrsmvw] { min-height: 0; min-width: 0; }

/* Onder 1500px valt de tester weg: die is een hulpmiddel, de instellingen zijn het werk. */
@media (max-width: 1500px) {
    .workbench[b-qvtvqrsmvw] { grid-template-columns: 240px 1fr; }
    .workbench > .tester[b-qvtvqrsmvw] { display: none; }
}

.groepkop[b-qvtvqrsmvw] {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px;
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}

.groepkop button[b-qvtvqrsmvw] { margin-left: auto; }

.leeg[b-qvtvqrsmvw] { padding: 5px 8px; color: var(--text-dim); }

.regelrij[b-qvtvqrsmvw] {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.regelrij:hover[b-qvtvqrsmvw] { background: var(--bg-hover); }
.regelrij.actief[b-qvtvqrsmvw] { background: var(--bg-selected); }

.regelrij__kop[b-qvtvqrsmvw] { display: flex; align-items: center; gap: 3px; }
.regelrij__kop .spacer[b-qvtvqrsmvw] { flex: 1; }
.regelrij__code[b-qvtvqrsmvw] { font-weight: 600; }

/* Slepen om te ordenen: de rij die je vastpakt wordt doorzichtig. */
.regelrij.sleept[b-qvtvqrsmvw] { opacity: .5; }
.regelrij[draggable="true"][b-qvtvqrsmvw] { cursor: grab; }
.regelrij__naam[b-qvtvqrsmvw] { color: var(--text); }
.regelrij__meta[b-qvtvqrsmvw] { font-size: var(--size-s); color: var(--text-dim); }

/* Periodes: één regel per periode, de gekozen periode opengeklapt in het formulier eronder. */
.periode[b-qvtvqrsmvw] {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 4px; cursor: pointer;
}

.periode.actief[b-qvtvqrsmvw] { border-color: var(--accent); }

.periode__kop[b-qvtvqrsmvw] {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 6px;
}

.periode__kop .spacer[b-qvtvqrsmvw] { flex: 1; }

.totaal[b-qvtvqrsmvw] {
    margin-top: 8px; padding-top: 6px;
    border-top: 1px solid var(--border);
    text-align: right;
}

/* Uitgelijnd formulier: label · veld · label · veld op vaste kolommen. Met flex schoof elke rij
   op zodra een keuzelijst een langere tekst kreeg; dit houdt de kolommen recht. */
.eig__grid[b-qvtvqrsmvw] {
    display: grid;
    grid-template-columns: 135px minmax(150px, 240px) 135px minmax(150px, 240px);
    gap: 5px 8px;
    align-items: center;
    margin-bottom: 4px;
}

.eig__grid > label[b-qvtvqrsmvw] {
    margin: 0;
    font-size: var(--size-s); text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-dim);
}

.eig__grid > label.check[b-qvtvqrsmvw] {
    text-transform: none; letter-spacing: 0; color: var(--text);
    display: inline-flex; align-items: center; gap: 5px;
}

.eig__grid > input[b-qvtvqrsmvw], .eig__grid > select[b-qvtvqrsmvw] { width: 100%; }
.eig__grid > .breed[b-qvtvqrsmvw] { grid-column: 2 / -1; }
.eig__grid-leeg[b-qvtvqrsmvw] { display: block; }

/* Eén teleenheid met haar staffel: gestippeld kader, zodat je ziet wat bij elkaar hoort. */
.eenheid[b-qvtvqrsmvw] {
    border: 1px dashed var(--border-strong); border-radius: var(--radius);
    padding: 6px 8px; margin: 6px 0;
}

.eenheid__kop[b-qvtvqrsmvw], .eenheid__extra[b-qvtvqrsmvw], .staffel__acties[b-qvtvqrsmvw] {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.eenheid__extra[b-qvtvqrsmvw], .staffel__acties[b-qvtvqrsmvw] { margin-top: 4px; }

.eenheid__nr[b-qvtvqrsmvw] {
    font-size: var(--size-s); font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
}

.eenheid input.klein[b-qvtvqrsmvw] { width: 70px; }
.eenheid select[b-qvtvqrsmvw] { width: auto; max-width: 230px; }

table.grid.staffel[b-qvtvqrsmvw] { max-width: 420px; margin-top: 5px; }
table.grid.staffel input[type="number"][b-qvtvqrsmvw] { width: 100%; }
table.grid input.cel[b-qvtvqrsmvw] { width: 90px; }

/* Matrix-as: veld · soort · waarden, met de kolommen recht onder elkaar. */
.as-rij[b-qvtvqrsmvw] {
    display: grid;
    grid-template-columns: 240px 70px 1fr auto;
    gap: 6px; align-items: center; margin-bottom: 4px;
}

.as-rij__soort[b-qvtvqrsmvw] {
    font-size: var(--size-s); text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-dim);
}

.as-rij select[b-qvtvqrsmvw], .as-rij input[b-qvtvqrsmvw] { width: 100%; }
/* /Components/Pages/WarehouseMapPage.razor.rz.scp.css */
/* Summary: stijl plattegrond | raster met locatietegels | pickgebied als onderlaag
   | eigen kleuren per locatie | selectie | contextmenu | kleurenkiezer

   De cel heeft twee lagen: de <td> draagt de kleur van het pickgebied, de tegel erin de eigen
   kleur van de locatie. Die tegel is doorschijnend, anders zou een eigen kleur het pickgebied
   onzichtbaar maken en zie je niet meer waar de locatie bij hoort. */

table.map-grid[b-b6xgx6mlj0] { border-collapse: separate; border-spacing: 2px; user-select: none; }

table.map-grid td[b-b6xgx6mlj0] {
    width: 70px; height: 34px; padding: 0;
    border-radius: var(--radius); cursor: pointer; overflow: hidden;
}

/* Lege cel: alleen een streepjesrand, zodat het raster te zien is zonder aandacht te vragen */
table.map-grid td.empty[b-b6xgx6mlj0] { background: var(--bg-alt); border: 1px dashed var(--border); }
table.map-grid td.empty:hover[b-b6xgx6mlj0] { background: var(--bg-input); border-color: var(--accent-hover); }

/* Bezette cel: de <td> is de onderlaag (pickgebied), de tegel erin de locatie zelf */
table.map-grid td.filled[b-b6xgx6mlj0] { border: none; background: var(--bg-alt); }

.tegel[b-b6xgx6mlj0] {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; padding: 2px;
    font-size: 10px; font-weight: 600; text-align: center; line-height: 1.1;
    border-radius: var(--radius);
    /* Standaard doorschijnend: het pickgebied onder de tegel blijft zo zichtbaar */
    background: color-mix(in srgb, var(--bg-panel) 78%, transparent);
    border: 1px solid var(--border-strong);
    color: var(--text);
    overflow: hidden;
}
.tegel:hover[b-b6xgx6mlj0] { border-color: var(--accent-hover); }
.tegel:empty[b-b6xgx6mlj0]::after { content: ""; }

/* Aangewezen om te verplaatsen ("opgepakt") — één tegel tegelijk */
.tegel--opgepakt[b-b6xgx6mlj0] { box-shadow: inset 0 0 0 2px var(--accent-pressed); }

/* Aangewezen vak (Ctrl+slepen, Ctrl+klik of rechtermuisknop) — mag een hele reeks zijn.
   Op de <td> en niet op de tegel, want een leeg vak heeft nog geen tegel. */
table.map-grid td.gekozen[b-b6xgx6mlj0] { outline: 2px solid var(--accent); outline-offset: -2px; }

/* In de selecteerstand is slepen de bedoeling; een kruisje zegt dat beter dan een handje */
table.map-grid.kiezen[b-b6xgx6mlj0] { cursor: crosshair; }
table.map-grid.kiezen td[b-b6xgx6mlj0], table.map-grid.kiezen .tegel[b-b6xgx6mlj0] { cursor: crosshair; }

/* --- contextmenu --------------------------------------------------------- */

.menu[b-b6xgx6mlj0] {
    position: fixed; z-index: 70; min-width: 170px; padding: 3px 0;
    background: var(--bg-panel);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.menu button[b-b6xgx6mlj0] {
    display: block; width: 100%; padding: 4px 11px; text-align: left;
    background: transparent; border: none; cursor: pointer; color: var(--text);
}
.menu button:hover[b-b6xgx6mlj0] { background: var(--accent); color: var(--text-inverted); }
.menu button:disabled[b-b6xgx6mlj0] { opacity: .45; cursor: default; }
.menu button:disabled:hover[b-b6xgx6mlj0] { background: transparent; color: var(--text); }
.menu hr[b-b6xgx6mlj0] { margin: 3px 0; border: none; border-top: 1px solid var(--border); }
.menu__kop[b-b6xgx6mlj0] {
    padding: 3px 11px 5px;
    font-size: var(--size-s); text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
}

/* Onzichtbaar vlak dat de eerstvolgende klik opvangt zodat het menu weer sluit */
.menu-sluiter[b-b6xgx6mlj0] { position: fixed; inset: 0; z-index: 69; }

/* --- kleurenkiezer ------------------------------------------------------- */

.kleurrij[b-b6xgx6mlj0] { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
/* Het vinkje staat ín het label, dus het label is zelf een rijtje */
.kleurrij > label:first-child[b-b6xgx6mlj0] {
    width: 118px; flex: none; margin: 0;
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    font-size: var(--size-s); text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim);
}
.kleurrij input[type=checkbox][b-b6xgx6mlj0] { width: auto; margin: 0; }
.kleurrij input[type=color][b-b6xgx6mlj0] { width: 44px; height: 22px; padding: 1px; }
.kleurrij input:disabled[b-b6xgx6mlj0] { opacity: .4; }
.kleurrij input[type=range][b-b6xgx6mlj0] { width: 150px; }
.kleurrij .waarde[b-b6xgx6mlj0] { font-family: var(--mono); font-size: var(--size-s); color: var(--text-dim); }

/* Voorbeeld van de tegel in de dialoog, op een geruite grond zodat je de doorschijnendheid
   echt ziet in plaats van moet aannemen */
.kleurproef[b-b6xgx6mlj0] {
    display: flex; align-items: center; justify-content: center;
    width: 92px; height: 40px; border-radius: var(--radius);
    font-size: 10px; font-weight: 600;
}
.kleurproef-grond[b-b6xgx6mlj0] {
    display: inline-block; padding: 6px; border-radius: var(--radius);
    background-color: var(--bg-alt);
    background-image:
        linear-gradient(45deg, rgba(128, 128, 128, .25) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .25) 75%),
        linear-gradient(45deg, rgba(128, 128, 128, .25) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .25) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
}

/* --- legenda pickgebieden ------------------------------------------------ */

.gebiedrij[b-b6xgx6mlj0] { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.gebiedstip[b-b6xgx6mlj0] { display: inline-block; width: 14px; height: 14px; border-radius: var(--radius); }
/* /Components/Shared/AssistantChat.razor.rz.scp.css */
/* Summary: assistent chat | berichtenlijst | invoerbalk onderaan | compacte bubbelvariant
   | huisstijl tokens */

/* Op de eigen pagina vult het gesprek de hoogte van de content-strook; in de bubbel vult het de
   hoogte van het paneel (dat een eigen hoogte krijgt). Alleen de stroom schuift. */
.chat[b-q5c7nd1jx9] {
    display: grid;
    grid-template-rows: 1fr auto auto;
    gap: 6px;
    height: calc(100vh - 40px - 24px - 2.6rem - 1.2rem);
    min-height: 0;
}

.chat--compact[b-q5c7nd1jx9] {
    height: 100%;
    gap: 4px;
}

.chat__stroom[b-q5c7nd1jx9] {
    overflow-y: auto;
    min-height: 0;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat__leeg[b-q5c7nd1jx9] { padding: 6px 2px; }

.bericht[b-q5c7nd1jx9] {
    max-width: 78%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 5px 8px;
    background: var(--bg-alt);
}

.chat--compact .bericht[b-q5c7nd1jx9] { max-width: 92%; }

.bericht--gebruiker[b-q5c7nd1jx9] {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.bericht--gebruiker a[b-q5c7nd1jx9] { color: #fff; }

.bericht--assistent[b-q5c7nd1jx9] { align-self: flex-start; }

.bericht__tekst[b-q5c7nd1jx9] { line-height: 1.45; word-break: break-word; }

/* Spoor van gebruikte tools boven een antwoord: klein en gedempt, geen blikvanger. */
.bericht__tools[b-q5c7nd1jx9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}

.tool[b-q5c7nd1jx9] {
    font-size: var(--size-s);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 4px;
}

/* Vervolgknoppen onder een antwoord (bv. naar de aangemaakte opdracht). */
.bericht__links[b-q5c7nd1jx9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}

/* Eén omlijnd vak met daarin het tekstveld en de knoppenrij; het vak is tegelijk de zone waar
   je een bestand in kunt slepen. */
.chat__invoer[b-q5c7nd1jx9] {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.chat__invoer textarea[b-q5c7nd1jx9] {
    width: 100%;
    resize: vertical;
    min-height: 62px;
    height: auto;
    padding: 2px 3px;
    font: inherit;
    background: transparent;
    border: none;
}

.chat__invoer textarea:focus[b-q5c7nd1jx9] { outline: none; }

.chat--compact .chat__invoer textarea[b-q5c7nd1jx9] { min-height: 46px; }

.chat__acties[b-q5c7nd1jx9] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.chat__acties-spacer[b-q5c7nd1jx9] { flex: 1; }

/* De <InputFile> rendert zijn eigen "Bestand kiezen"-balk; die is onbruikbaar in een chatbalk.
   Hij ligt daarom onzichtbaar over de paperclipknop heen. ::deep is nodig omdat het een
   childcomponent is: scoped css raakt anders alleen de eigen markup van dit component. */
.bijlage[b-q5c7nd1jx9] {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
}

.bijlage:hover[b-q5c7nd1jx9] { border-color: var(--accent-hover); color: var(--text); }

.bijlage__tekst[b-q5c7nd1jx9] { font-size: var(--size-s); }

.bijlage[b-q5c7nd1jx9]  input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Overlay tijdens het slepen. Toegevoegd/weggehaald door loadiqChat.enableDrop. */
.chat__drop[b-q5c7nd1jx9] {
    display: none;
    position: absolute;
    inset: 0;
    place-items: center;
    background: var(--bg-alt);
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
    color: var(--text);
    pointer-events: none;
}

.chat__invoer.sleep .chat__drop[b-q5c7nd1jx9] { display: grid; }

.chat__voet[b-q5c7nd1jx9] { font-size: var(--size-s); }

/* Voorstelkaartje onder een antwoord: dit is het moment waarop een mens beslist, dus het mag
   opvallen zonder een alarm te zijn. Oranje = wacht op jou, dat is de nadrukkleur van de huisstijl. */
.voorstel[b-q5c7nd1jx9] {
    margin-top: 6px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--bg-input);
    padding: 4px 7px;
}

.voorstel--proposed[b-q5c7nd1jx9] { border-left-color: var(--accent-pressed); }
.voorstel--applied[b-q5c7nd1jx9] { border-left-color: var(--ok); }
.voorstel--failed[b-q5c7nd1jx9] { border-left-color: var(--validation); }
.voorstel--rejected[b-q5c7nd1jx9], .voorstel--reverted[b-q5c7nd1jx9] { border-left-color: var(--text-dim); }

.voorstel__kop[b-q5c7nd1jx9] { display: flex; gap: 6px; align-items: baseline; }
.voorstel__wat[b-q5c7nd1jx9] { flex: 1; }

.voorstel__status[b-q5c7nd1jx9] {
    font-size: var(--size-s);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-dim);
    white-space: nowrap;
}

.voorstel__waarschuwing[b-q5c7nd1jx9] {
    margin-top: 3px;
    font-size: var(--size-s);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--validation);
}

.voorstel__acties[b-q5c7nd1jx9] { display: flex; gap: 5px; margin-top: 5px; }
.voorstel__uitkomst[b-q5c7nd1jx9] { margin-top: 3px; font-size: var(--size-s); color: var(--text-dim); }
/* /Components/Shared/AssistantWidget.razor.rz.scp.css */
/* Summary: chatbubbel rechtsonder | zwevend paneel | boven de statusbalk | huisstijl */

/* Rechtsonder, net boven de statusbalk (24px) zodat die zichtbaar blijft. */
.bubbel[b-r313zqq4m1] {
    position: fixed;
    right: 10px;
    bottom: 30px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.bubbel__knop[b-r313zqq4m1] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgb(0 0 0 / .3);
}

.bubbel__knop:hover[b-r313zqq4m1] { filter: brightness(1.1); }

.paneel[b-r313zqq4m1] {
    width: min(430px, calc(100vw - 20px));
    height: min(620px, calc(100vh - 90px));
    display: grid;
    grid-template-rows: 24px 1fr;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgb(0 0 0 / .35);
    overflow: hidden;
}

.paneel__kop[b-r313zqq4m1] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px 0 6px;
    background: var(--accent);
    color: #fff;
}

.paneel__titel[b-r313zqq4m1] { font-weight: 600; }

/* Welke pagina de assistent meekijkt — dat is de hele reden dat hij hier staat. */
.paneel__pagina[b-r313zqq4m1] {
    margin-left: auto;
    font-size: var(--size-s);
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: .85;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 45%;
}

.paneel__sluit[b-r313zqq4m1] {
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

/* min-height: 0 is nodig, anders groeit de chat buiten de grid en verdwijnt de invoerbalk. */
.paneel__body[b-r313zqq4m1] {
    display: grid;
    min-height: 0;
    padding: 5px 6px 6px;
}
/* /Components/Shared/DateRangePicker.razor.rz.scp.css */
/* Summary: periodekiezer | kalendervenster | huisstijl tokens | licht en donker */

/* Stond op background:#fff met radius 8px; op donker gaf dat een wit vlak met de
   donkere-thema-tekstkleur erin. Alles uit de tokens, maatvoering compact zoals de rest. */
.kalender[b-mzwu0h9n0e] {
    display: inline-block;
    padding: 8px 10px;
    background: var(--bg-panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
/* /Components/Shared/FormFields.razor.rz.scp.css */
/* Summary: stijl veldindeling | compacte tabel in het instelvenster */

.veldindeling table.grid td[b-vhthxho0y9] { padding: 4px 7px; vertical-align: middle; }
.veldindeling .badge[b-vhthxho0y9] { margin-bottom: 8px; }
/* /Components/Shared/GridColumns.razor.rz.scp.css */
/* Summary: kolomkiezer | uitklapvenster bij het tandwiel | huisstijl tokens | licht en donker */

.kolomkiezer[b-eq6hkfj9tn] { position: relative; display: inline-block; }

.kolomkiezer__knop[b-eq6hkfj9tn] { padding: 2px 5px; line-height: 1; }

/* Het venster hing op background:#fff: op het donkere thema gaf dat een wit vlak met de
   donkere-thema-tekstkleur (#C8C8C8) erin, en dat is nauwelijks te lezen. Alles uit de tokens,
   en dezelfde maatvoering en schaduw als een dialoog. */
.paneel[b-eq6hkfj9tn] {
    position: absolute;
    right: 0;
    top: calc(100% + 3px);
    z-index: 60;
    min-width: 210px;
    padding: 6px 8px;
    background: var(--bg-panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgb(0 0 0 / .35);
}

.paneel__melding[b-eq6hkfj9tn] { margin-bottom: 5px; }

/* Compacte rijen: dit is een lijstje vinkjes, geen formulier. */
.paneel .check-row[b-eq6hkfj9tn] { padding: 1px 0; }

.paneel__acties[b-eq6hkfj9tn] {
    display: flex;
    gap: 5px;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--border);
}
/* /Components/Shared/IssueWidget.razor.rz.scp.css */
/* Summary: stijl meldingen-popup | kaartjes rechtsboven | kleurstaaf per ernst | huisstijl

   Rechtsboven en niet rechtsonder: daar staat de assistent-bubbel, en een openstaand chatvenster
   zou de meldingen bedekken. Onder de kopbalk (40px) en onder een dialoog (z-index 50). */

.meldingen[b-t1hiyymu2e] {
    position: fixed;
    top: 46px;
    right: 12px;
    z-index: 45;
    width: min(340px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kaart[b-t1hiyymu2e] {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-dim);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgb(0 0 0 / .3);
    overflow: hidden;
}

.kaart--info[b-t1hiyymu2e] { border-left-color: var(--accent); }
.kaart--waarschuwing[b-t1hiyymu2e] { border-left-color: var(--warning); }
.kaart--fout[b-t1hiyymu2e] { border-left-color: var(--validation); }

.kaart__kop[b-t1hiyymu2e] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 4px 3px 7px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
}

.kaart__titel[b-t1hiyymu2e] {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kaart__sluit[b-t1hiyymu2e] {
    margin-left: auto;
    padding: 0 3px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.kaart__sluit:hover[b-t1hiyymu2e] { color: var(--text); }

/* De meldingstekst komt uit een sjabloon en heeft regels (vaak een opsomming). */
.kaart__tekst[b-t1hiyymu2e] {
    padding: 6px 8px;
    line-height: 1.4;
    white-space: pre-line;
    max-height: 30vh;
    overflow-y: auto;
}

.kaart__voet[b-t1hiyymu2e] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 4px;
    border-top: 1px solid var(--border);
    font-size: var(--size-s);
    color: var(--text-dim);
}
.kaart__spacer[b-t1hiyymu2e] { flex: 1; }

.meer[b-t1hiyymu2e] {
    align-self: flex-end;
    padding: 2px 7px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: var(--size-s);
    text-decoration: none;
}
/* /Components/Shared/VoorwaardeRij.razor.rz.scp.css */
/* Summary: stijl voorwaarderij | leest als een zin | grijs wanneer hij niet meedoet */

.voorwaarde[b-grn3av7t6w] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin: 2px 0;
    font-size: var(--size-s);
}

/* Vast breedje voor het opschrift, zodat de twee regels onder elkaar uitlijnen. */
.voorwaarde__titel[b-grn3av7t6w] {
    width: 84px;
    flex: none;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.voorwaarde select[b-grn3av7t6w] { width: auto; max-width: 190px; }
.voorwaarde input[b-grn3av7t6w] { width: 110px; }

/* De voorwaarde doet er niet toe (veld is al altijd zichtbaar of altijd verplicht). */
.voorwaarde--uit[b-grn3av7t6w] { opacity: .45; }