@import url("//fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

/* ===== RiskX-merkkleuren =====
   Bemonsterd uit images/riskx-manager.png: de tekst is #1E2B57, de X is #2FA06A.
   Stond hiervoor als losse hexwaarden door het hele bestand; nu op een plek, zodat een
   volgende merkwijziging hier begint en niet in een zoekopdracht.

   Twee groentinten met opzet. Het merkgroen zelf staat hier alleen als --rx-groen-rgb,
   want het wordt uitsluitend doorzichtig gebruikt, voor randen. Als tekst of icoon is het
   te licht: wit erop haalt 3,3:1 en het haalt zelf 3,3:1 op wit, allebei onder de 4,5:1
   die tekst nodig heeft. Daarvoor is --rx-groen-tekst: dezelfde tint, donkerder, 4,6:1
   op wit en 4,0:1 op --rx-groen-vlak.

   De -rgb-drielingen bestaan omdat rgba() geen hexvariabele kan ontleden:
   rgba(var(--rx-navy-rgb), .12) werkt, rgba(var(--rx-navy), .12) niet. */
:root {
    --rx-navy: #1E2B57;
    --rx-navy-rgb: 30, 43, 87;
    --rx-navy-vlak: #DDE2ED;
    --rx-groen-rgb: 47, 160, 106;
    --rx-groen-tekst: #26855A;
    --rx-groen-tekst-hover: #1F6E4A;
    --rx-groen-vlak: #E4F3EB;
    --rx-groen-vlak-zacht: #F2F9F5;
    --rx-lijn: #E3E7F0;
}

html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/* RiskX-woordmerk in de header. De PNG zelf, geen masker met currentColor zoals het
   XAF-sjabloon: dat kan maar een kleur en het merk is tweekleurig (navy tekst, groene X).
   In het donkere thema blijft de navy tekst daardoor donker; daar is nog geen variant voor.
   Het merk is twee regels hoog (ratio 2,07 tegen 5,47 van het oude woordmerk), vandaar
   hoger en smaller dan hiervoor. */
.header-logo {
    background-image: url('../images/riskx-manager.png');
    width: 84px;
    height: 40px;

    /* ... */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

/* Custom entries from here */
.contains-filter {
    box-shadow: 0px 0px 8px 0px var(--info, var(--bs-info));
}

.dxbl-grid-table thead .dxbl-grid-header {
    border-right-style: dotted !important;
    border-top-style: solid;
    border-width: 0px;
}

.dxbl-grid-table tbody .xaf-action {
    border-style: none !important;
}

.dxbl-grid-table tbody .dxbl-grid-selection-cell {
    border-style: none !important;
}

.dxbl-group-body-content .dxbl-fl-item .dxbl-text-edit {
    border-style: dotted;
}

.dxbl-fl-gd .dxbl-group .dxbl-group-header {
    font-style: normal;
    text-transform: none;
    color: #2980b9;
    font-size: 16px;
    letter-spacing: 4px;
    font-family: 'Poppins', sans-serif;
}

.dxbl-fl-gd .expanded .xaf-item-kycdossier {
    font-family: 'Poppins', sans-serif;
}

.dxbl-tabs-tablist ul .dxbl-tabs-item {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 4px;
}

.xaf-masterdetail-listview .cursor-pointer td {
    border-style: none !important;
}

/* remove underline from menu items */
.xaf-navmenu a .xaf-nav-link {
    text-decoration: revert !important;
}

.dxbl-grid-command-cell .dxbl-btn-link > span {
    text-decoration: revert !important;
}

/* Xaf nav menu item icon */
/*.dxbl-accordion .dxbl-accordion-group-header .xaf-nav-menu-item-icon{
    filter: grayscale(1) invert(1);
}*/

/* Dxbl image — hide expand/collapse arrow on all nav levels */
.dxbl-accordion .dxbl-accordion-group-header .dxbl-btn-text-secondary .dxbl-image,
.dxbl-accordion .dxbl-accordion-item .dxbl-btn-text-secondary .dxbl-image {
    visibility: hidden;
}

/* Image */
.dxbl-accordion .dxbl-active img {
    visibility: hidden;
}

/* Dxbl active Navigatie */
.dxbl-accordion-container .xaf-nav-item .xaf-nav-item .dxbl-active {
    font-weight: 400;
    background-color: var(--rx-groen-tekst) !important;
    color: #fff !important;
}

/* Xaf Gird cell long text action */
.dxbl-grid-table tbody .xaf-action {
    white-space: nowrap;
}

/* Make detail view sticky in master-detail layout */
.xaf-masterdetail-listview .xaf-detail-view-container,
.xaf-masterdetail-listview > div:last-child {
    position: sticky !important;
    top: 10px !important;
    height: calc(100vh - 150px);
    overflow-y: auto;
}

/* Root list-view grids: bound the height against the viewport so DevExpress virtual
   scrolling always has a finite request -- even on a cold deep-link (new browser tab),
   before the flex layout has resolved .main-content's height. Without this the grid grows
   to fit all rows (XAF's own rule is max-height: 100% of a not-yet-sized parent), and the
   virtual-scroll provider throws UnableToRequestItemsException on large lists.
   Scoped exactly like XAF's root rule (.main-content > .grid-content as a DIRECT child),
   so master-detail (.xaf-masterdetail-listview) and nested grids (.nested-content, capped
   at 300px) are untouched. */
.app .main-content > .grid-content dxbl-grid,
.app .main-content > .grid-content dxbl-tree-list {
    max-height: calc(100vh - 150px);
}

/* ===== Login page — "geometrisch speels" (ported from SCRM) =====
   Pure CSS restyle of XAF's LogonWindowTemplate; auth flow untouched.
   Scoped to #logon-template-component so nothing leaks into the app.

   Kleuren komen uit het merkpalet bovenaan dit bestand. De aanmeldknop gebruikt
   --rx-groen-tekst en niet --rx-groen; daar staat waarom. Het oranje dat hier stond
   haalde 2,8:1 met witte tekst, dus dit leest ook beter dan voorheen. */

#logon-template-component .logon-template-header {
    display: none;
}

#logon-template-component .logon-template-body {
    position: relative;
    overflow: hidden;
    background: #fff;
}

/* Flat geometric brand shapes (rotated rounded squares) */
#logon-template-component .logon-template-body::before {
    content: "";
    position: absolute;
    left: -130px;
    top: -130px;
    width: 380px;
    height: 380px;
    background: var(--rx-navy);
    border-radius: 76px;
    transform: rotate(18deg);
}

#logon-template-component .logon-template-body::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -110px;
    width: 300px;
    height: 300px;
    background: var(--rx-groen-vlak);
    border-radius: 64px;
    transform: rotate(18deg);
}

#logon-template-component .logon-main-container {
    position: relative;
    justify-content: flex-end;
    padding-right: 12vw;
}

#logon-template-component .logon-main-container::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 55%;
    width: 200px;
    height: 200px;
    background: var(--rx-navy-vlak);
    border-radius: 48px;
    transform: rotate(18deg);
}

@media (max-width: 900px) {
    #logon-template-component .logon-main-container {
        justify-content: center;
        padding-right: 0;
    }
}

#logon-template-component .logon-main.card {
    position: relative;
    z-index: 1;
    border-radius: 14px;
    border: 1px solid var(--rx-lijn);
    background: #fff;
    box-shadow: 0 12px 40px rgba(var(--rx-navy-rgb), 0.10);
}

/* Wordmark in the card; the view caption becomes the subtitle below it.
   44px in plaats van 30: het RiskX-merk zet "manager" op een tweede regel, dus op de oude
   hoogte wordt de tekst zelf de helft kleiner dan bij het vorige woordmerk. */
#logon-template-component .logon-main .card-header::before {
    content: "";
    display: block;
    height: 44px;
    margin-bottom: 8px;
    background: url("../images/riskx-manager.png") no-repeat left center / contain;
}

#logon-template-component .logon-main .card-header,
#logon-template-component .logon-main .card-header [role="heading"] {
    color: #8a8a8a;
    font-size: 14px;
    font-weight: 400;
}

/* Primary (login) button in het groen van de X uit het woordmerk */
#logon-template-component .logon-toolbar .dxbl-btn {
    background-color: var(--rx-groen-tekst) !important;
    border-color: var(--rx-groen-tekst) !important;
    color: #fff !important;
}

#logon-template-component .logon-toolbar .dxbl-btn:hover,
#logon-template-component .logon-toolbar .dxbl-btn:focus-visible {
    background-color: var(--rx-groen-tekst-hover) !important;
    border-color: var(--rx-groen-tekst-hover) !important;
}

/* ===== Welkom — live module-overzicht (WelcomeDashboard.razor) =====
   Merkpalet (bovenaan dit bestand) + Poppins, matching the login. */

.srm-welcome {
    font-family: 'Poppins', sans-serif;
    padding: 26px 28px;
    max-width: 1180px;
}

.srm-welcome-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.srm-welcome-eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--rx-groen-tekst);
    font-weight: 600;
    margin-bottom: 6px;
}

.srm-welcome-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--rx-navy);
    line-height: 1.15;
}

.srm-welcome-subtitle {
    font-size: 14px;
    color: #5f7184;
    margin-top: 7px;
    max-width: 560px;
    line-height: 1.5;
}

/* Het RiskX-woordmerk als afbeelding; de twee gekleurde tekst-spans hiervoor konden de
   tweekleurige "riskx" niet weergeven. Hoogte gelijk aan de oude regelhoogte van 18px
   tekst, breedte volgt uit de verhouding van het merk (2,07). */
.srm-welcome-wordmark {
    flex-shrink: 0;
    width: 58px;
    height: 28px;
    background: url("../images/riskx-manager.png") no-repeat center / contain;
}

.srm-welcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

/* Kolom, zodat de telbolletjes met margin-top:auto tegen de onderrand blijven staan. De tegels in een
   rij zijn even hoog (grid stretch), dus dan staan de bolletjes van de hele rij op dezelfde lijn —
   ook onder een omschrijving van één regel naast een van twee. */
.srm-welcome-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(var(--rx-navy-rgb), .10);
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.srm-welcome-card:hover,
.srm-welcome-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--rx-navy-rgb), .10);
    border-color: rgba(var(--rx-groen-rgb), .45);
    outline: none;
}

.srm-welcome-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
}

.srm-welcome-chip {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--rx-groen-vlak);
    color: var(--rx-groen-tekst);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.srm-welcome-chip svg {
    width: 22px;
    height: 22px;
}

.srm-welcome-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--rx-navy);

    /* Een flexkind krijgt standaard min-width:auto en kan dus niet kleiner worden dan zijn langste
       woord. Nederlandse samenstellingen als "Onafhankelijkheidsdossier" schoven daardoor dwars door
       de rand van de tegel heen. min-width:0 geeft het krimpruimte.

       break-word en niet anywhere: die laatste maakt op élk teken een afbreekpunt en breekt dus ook
       wanneer het woord met wat meer ruimte gewoon zou passen. break-word grijpt pas in als het
       woord echt niet op een eigen regel past — een vangnet, geen eerste keus. Breedte is de eerste
       keus; zie de sub-grid hieronder.

       Een koppelteken is geprobeerd (lang="nl" plus hyphens:auto) en levert niets op: Chrome heeft
       hier geen Nederlands afbreekwoordenboek, dus het breekt alsnog zonder streepje. */
    min-width: 0;
    overflow-wrap: break-word;
}

.srm-welcome-card-desc {
    font-size: 12.5px;
    color: #5f7184;
    line-height: 1.5;
}

/* Drill-down: geselecteerde moduletegel bovenaan, kinderen in het grid eronder */
.srm-welcome-terug {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rx-groen-tekst);
    cursor: pointer;
    user-select: none;
}

.srm-welcome-terug:hover,
.srm-welcome-terug:focus-visible {
    text-decoration: underline;
    outline: none;
}

.srm-welcome-terug-pijl {
    font-size: 15px;
    line-height: 1;
}

.srm-welcome-card--selected {
    cursor: default;
    margin-bottom: 14px;
    border-color: rgba(var(--rx-groen-rgb), .45);
    background: var(--rx-groen-vlak-zacht);
}

.srm-welcome-card--selected:hover {
    transform: none;
    box-shadow: none;
}

/* Ruimer dan de hoofdtegels (230px) en niet krapper, wat het eerst was. De captions zijn hier juist
   lánger — een moduletegel heet "Onafhankelijkheid", een kindtegel "Onafhankelijkheidscontrole" —
   dus 200px was precies de verkeerde kant op. Bij 300px past ook het langste woord op één regel en
   hoeft er niets te breken. */
.srm-welcome-grid--sub {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.srm-welcome-card-meer {
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    color: #b8c4cf;
}

/* ---- Checklist op het onafhankelijkheidsdossier ---------------------------------------------- */

.srm-check {
    font-size: 13px;
    color: var(--rx-navy);
}

.srm-check-leeg {
    padding: 18px 20px;
    border: 1px dashed rgba(var(--rx-navy-rgb), .18);
    border-radius: 10px;
    color: #5f7184;
    background: #fbfcfd;
}

.srm-check-kop {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.srm-check-voortgang-tekst {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: #5f7184;
}

/* Volle breedte, los van de knop ernaast — zie de toelichting in de component. */
.srm-check-balk {
    height: 6px;
    border-radius: 999px;
    background: #edf1f5;
    overflow: hidden;
    margin-bottom: 7px;
}

.srm-check-balk-vol {
    height: 100%;
    background: #3d8b40;
    transition: width .2s ease;
}

.srm-check-blokkade-telling {
    color: #c0392b;
    font-weight: 600;
}

.srm-check-schakelaar {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 1px solid rgba(var(--rx-navy-rgb), .16);
    border-radius: 999px;
    background: #fff;
    color: var(--rx-navy);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.srm-check-schakelaar:hover {
    border-color: rgba(var(--rx-groen-rgb), .5);
}

.srm-check-schakelaar--aan {
    background: var(--rx-groen-vlak);
    border-color: rgba(var(--rx-groen-rgb), .5);
    color: var(--rx-groen-tekst);
}

.srm-check-waarschuwing {
    padding: 7px 12px;
    margin-bottom: 12px;
    border-left: 3px solid #c0392b;
    border-radius: 0 8px 8px 0;
    background: #fdecea;
    font-size: 12px;
    color: #8f2b20;
}

.srm-check-groep {
    margin-bottom: 12px;
}

.srm-check-groepkop {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 3px;
    margin-bottom: 2px;
    border-bottom: 1px solid #e4eaf0;
}

.srm-check-groepnaam {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rx-groen-tekst);
}

.srm-check-groeptelling {
    font-size: 11px;
    color: #5f7184;
}

.srm-check-groeptelling--klaar {
    color: #3d8b40;
}

/* Een teken in de kantlijn en geen kleurvlak over de hele regel. Het raster kleurt de rij lichtroze,
   en juist dan wordt de vraagtekst slechter leesbaar dan bij een punt waar niets mee is. */
.srm-check-punt {
    display: flex;
    gap: 9px;
    padding: 5px 10px 5px 6px;
    border-radius: 6px;
}

.srm-check-punt + .srm-check-punt {
    border-top: 1px solid #f4f7fa;
}

.srm-check-punt--blokkade {
    background: #fdf6f5;
}

.srm-check-teken {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* Vraag, merken en antwoord op één regel. Drie regels per punt was de grootste verspilling: bij
   twaalf punten scheelt dat twee schermhoogtes, en juist het overzicht is waarvoor dit beeld
   bestaat. De vraag krijgt de rek, de rest schuift naar rechts. */
.srm-check-regel {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.srm-check-punt--klaar .srm-check-teken {
    background: #eaf5ea;
    color: #3d8b40;
}

.srm-check-punt--open .srm-check-teken {
    background: #f0f4f8;
    color: #96a5b4;
}

.srm-check-punt--blokkade .srm-check-teken {
    background: #c0392b;
    color: #fff;
}

.srm-check-inhoud {
    min-width: 0;
}

/* De vraag krijgt de ruimte die het raster haar afneemt: geen ellips, gewoon aflopen over meerdere
   regels. Dit is de tekst waar het controlepunt om draait. */
.srm-check-vraag {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
}

.srm-check-punt--klaar .srm-check-vraag {
    color: #5f7184;
}

/* Rechts uitgelijnd en begrensd: een lang tekstantwoord mag de vraag niet wegdrukken, en breekt dan
   binnen zijn eigen kolom af. */
.srm-check-antwoord {
    flex: 0 1 auto;
    max-width: 34%;
    text-align: right;
    font-weight: 600;
    font-size: 12.5px;
}

.srm-check-onbeantwoord {
    flex: 0 0 auto;
    font-size: 12px;
    font-style: italic;
    color: #96a5b4;
    white-space: nowrap;
}

.srm-check-punt--blokkade .srm-check-onbeantwoord {
    color: #c0392b;
    font-style: normal;
    font-weight: 600;
}

.srm-check-toelichting {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: #5f7184;
}

/* Geen margin-left:auto: de vraag heeft flex-grow en duwt merken én antwoord vanzelf naar rechts.
   Met een auto-marge zou het bij een punt zónder merken misgaan — dan staat er niets om de marge op
   te zetten en zou het antwoord tegen de vraag aan blijven plakken. */
.srm-check-merken {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 5px;
}

.srm-check-merk {
    padding: 0 7px;
    border-radius: 999px;
    background: #f0f4f8;
    font-size: 10.5px;
    line-height: 16px;
    color: #5f7184;
    white-space: nowrap;
}

.srm-check-merk--dreiging {
    background: #fdf5e6;
    color: #a9761a;
}

/* ---- Bedreigingsbeeld op het onafhankelijkheidsdossier -------------------------------------- */

/* Schuifbaar in plaats van samengedrukt. XAF genereert de layout van het dossier zelf, dus waar dit
   item landt staat niet vast — komt het in een smalle kolom terecht, dan zouden acht kolommen tot
   veertig pixels per stuk worden geknepen en is de matrix onleesbaar. Liever schuiven. */
.srm-beeld {
    font-size: 13px;
    color: var(--rx-navy);
    overflow-x: auto;
}

.srm-beeld-leeg {
    padding: 18px 20px;
    border: 1px dashed rgba(var(--rx-navy-rgb), .18);
    border-radius: 10px;
    color: #5f7184;
    background: #fbfcfd;
}

.srm-beeld-kop {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 14px;
}

.srm-beeld-titel {
    font-size: 15px;
    font-weight: 600;
}

.srm-beeld-strip {
    display: flex;
    gap: 26px;
    margin-left: auto;
}

.srm-beeld-kerncijfer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.srm-beeld-getal {
    font-size: 19px;
    font-weight: 700;
}

.srm-beeld-getal--signaal {
    color: #1e5a8c;
}

.srm-beeld-getal--waarschuwing {
    color: #a9761a;
}

.srm-beeld-label {
    font-size: 11px;
    color: #5f7184;
}

.srm-beeld-tabel {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    table-layout: fixed;
}

.srm-beeld-tabel th,
.srm-beeld-tabel td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

/* De naamkolom mag ruim zijn: Nederlandse vennootschapsnamen zijn lang, en afkappen kost precies de
   informatie waarop de lezer de rij herkent.

   Het selectorpad loopt via .srm-beeld-tabel omdat de regel hierboven (`.srm-beeld-tabel th`) een
   element in zich draagt en daarmee zwaarder weegt dan een losse klasse — zonder dit stonden de
   namen gecentreerd terwijl de herkomstlabels eronder links begonnen. */
.srm-beeld-tabel .srm-beeld-naamkop,
.srm-beeld-tabel .srm-beeld-naam {
    width: 26%;
    text-align: left;
    padding: 10px 12px;
}

.srm-beeld-tabel thead th {
    border-bottom: 1px solid #e4eaf0;
    padding-bottom: 8px;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.25;
}

.srm-beeld-kolomnr {
    display: block;
    color: var(--rx-groen-tekst);
    font-weight: 700;
    margin-bottom: 2px;
}

.srm-beeld-kolomnaam {
    display: block;
    padding: 0 4px;
}

/* Om en om een fond: bij zeven smalle kolommen is een rasterlijn te druk en niets te weinig — dan
   schuift het oog een kolom op en leest het de verkeerde categorie. */
.srm-beeld-kolom--zebra {
    background: #fcfdfe;
}

.srm-beeld-tabel tbody tr {
    border-bottom: 1px solid #f0f4f8;
}

.srm-beeld-rij--dossierbreed {
    background: #fafbfd;
}

.srm-beeld-rij--waarschuwing .srm-beeld-naam {
    box-shadow: inset 3px 0 0 #a9761a;
}

.srm-beeld-entiteit {
    font-weight: 600;
    margin-bottom: 4px;
}

.srm-beeld-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #5f7184;
}

.srm-beeld-herkomst {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f0f4f8;
}

.srm-beeld-gekruist--nooit {
    color: #a9761a;
    font-weight: 600;
}

.srm-beeld-leegteken {
    color: #d6dee6;
}

.srm-beeld-pil {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: #e9f0f6;
    color: #1e5a8c;
    font-weight: 700;
    font-size: 12px;
}

.srm-beeld-stip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1e5a8c;
}

.srm-beeld-stip--waarschijnlijk {
    background: #78a0c3;
}

/* Een ring in plaats van een vlak: "de naam komt deels overeen" hoort ook visueel minder stellig te
   zijn dan een exacte match. */
.srm-beeld-stip--mogelijk {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px #1e5a8c;
}

/* De ruit staat in een veld dat alleen kleur krijgt wanneer er een waarborg is getroffen. Zonder
   waarborg blijft de ruit kaal — dat verschil moet zichtbaar zijn zonder de tooltip te openen. */
.srm-beeld-ruitveld {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-left: 4px;
}

.srm-beeld-ruit {
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
}

.srm-beeld-ruit.srm-beeld-niveau--laag {
    background: #3d8b40;
}

.srm-beeld-ruit.srm-beeld-niveau--midden {
    background: #a9761a;
}

.srm-beeld-ruit.srm-beeld-niveau--hoog {
    background: #c0392b;
}

.srm-beeld-ruitveld.srm-beeld-niveau--laag {
    background: #eaf5ea;
}

.srm-beeld-ruitveld.srm-beeld-niveau--midden {
    background: #fdf5e6;
}

.srm-beeld-ruitveld.srm-beeld-niveau--hoog {
    background: #fdecea;
}

.srm-beeld-getal.srm-beeld-niveau--laag {
    color: #3d8b40;
}

.srm-beeld-getal.srm-beeld-niveau--midden {
    color: #a9761a;
}

.srm-beeld-getal.srm-beeld-niveau--hoog {
    color: #c0392b;
}

.srm-beeld-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 14px;
    font-size: 11px;
    color: #5f7184;
}

.srm-beeld-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.srm-beeld-voet {
    margin-top: 10px;
    font-size: 11px;
    color: #96a5b4;
    line-height: 1.5;
}

/* Telbolletjes: groen "jij bent aan zet", rood "vraagt opvolging".
   Rechtsonder in de tegel en niet naast de naam: op een tegel van 230px concurreren ze daar met de
   titel om de breedte, en dan breekt een woord als "Onafhankelijkheid" middenin. Onderin is er altijd
   ruimte, ongeacht hoe lang de naam is. margin-top:auto duwt ze naar de onderrand, margin-left:auto
   naar rechts. */
.srm-welcome-bolletjes {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    margin-left: auto;
    padding-top: 10px;
    flex-shrink: 0;
}

.srm-bolletje {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
}

/* De stip is een ::before en geen tweede element: de kleur draagt de betekenis, en dan hoort ze bij
   het bolletje zelf te staan in plaats van als los knooppunt in de opmaak. */
.srm-bolletje::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.srm-bolletje--groen {
    color: #3d8b40;
    background: #eaf5ea;
}

.srm-bolletje--rood {
    color: #c0392b;
    background: #fdecea;
}

.srm-welcome-system {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--rx-navy-rgb), .10);
}

.srm-welcome-system-label {
    font-size: 11px;
    letter-spacing: 2px;
    color: #90a0b0;
    font-weight: 500;
}

.srm-welcome-system-item {
    font-size: 12.5px;
    color: #5f7184;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.srm-welcome-system-item:hover {
    color: var(--rx-navy);
}

.srm-welcome-system-icon {
    color: var(--rx-groen-tekst);
    display: inline-flex;
}

.srm-welcome-system-icon svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 900px) {
    .srm-welcome-hero {
        flex-direction: column;
    }
}

/* ===== SKM dashboards (SkmDashboard.razor) =====
   Shared layout for the three SKM dashboards; brand navy/orange + Poppins,
   semantic green/amber/red for risk & status. */

.skm-dash {
    font-family: 'Poppins', sans-serif;
    background: #f4f6f9;
    color: var(--rx-navy);
    padding: 22px 24px;
    min-height: 100%;
}

.skm-dash-ph {
    color: #5f7184;
    font-size: 14px;
    padding: 24px;
}

.skm-dash .hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.skm-dash .eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--rx-groen-tekst);
    font-weight: 600;
}

.skm-dash .title {
    font-size: 22px;
    font-weight: 600;
    margin-top: 4px;
}

.skm-dash .ctx {
    font-size: 11.5px;
    background: #fff;
    border: 1px solid rgba(var(--rx-navy-rgb), .12);
    border-radius: 20px;
    padding: 5px 11px;
    color: #5f7184;
}

.skm-dash .badge {
    font-size: 11.5px;
    border-radius: 20px;
    padding: 5px 11px;
    font-weight: 500;
}

.skm-dash .kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 11px;
    margin-bottom: 14px;
}

.skm-dash .cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.skm-dash .cols.last {
    margin-bottom: 0;
}

.skm-dash .kpi {
    background: #fff;
    border: 1px solid rgba(var(--rx-navy-rgb), .10);
    border-radius: 12px;
    padding: 13px 15px;
}

.skm-dash .kpi .l {
    font-size: 12px;
    color: #5f7184;
    font-weight: 500;
}

.skm-dash .kpi .v {
    font-size: 23px;
    font-weight: 600;
    margin-top: 3px;
}

.skm-dash .kpi .s {
    font-size: 11.5px;
    color: #5f7184;
    margin-top: 2px;
}

/* Doorklikken. Elk getal dat records achter zich heeft krijgt deze klasse; getallen op nul niet,
   want daar valt niets te openen. De stippellijn onder de tekst maakt vooraf zichtbaar wat een
   knop is — een cursor alleen verraadt dat pas als de muis er al staat. */
.skm-dash .drill {
    cursor: pointer;
    text-decoration: underline dotted rgba(var(--rx-navy-rgb), .35);
    text-underline-offset: 3px;
    border-radius: 4px;
}

.skm-dash .drill:hover {
    text-decoration: underline solid currentColor;
}

.skm-dash .drill:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
    text-decoration: none;
}

/* De heatmapcel is zelf al een vlak; daar zou een onderstreping het cijfer vertroebelen. */
.skm-dash .cell.drill {
    text-decoration: none;
}

.skm-dash .cell.drill:hover {
    filter: brightness(.94);
    text-decoration: none;
}

.skm-dash .card {
    background: #fff;
    border: 1px solid rgba(var(--rx-navy-rgb), .10);
    border-radius: 12px;
    padding: 16px 18px;
}

.skm-dash .h {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.skm-dash .heat {
    display: grid;
    grid-template-columns: 78px 1fr 1fr 1fr;
    gap: 6px;
    align-items: center;
}

.skm-dash .cell {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    height: 44px;
}

.skm-dash .ax {
    font-size: 10.5px;
    color: #90a0b0;
    font-weight: 500;
}

.skm-dash .legend {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    font-size: 11px;
    color: #5f7184;
}

.skm-dash .legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    vertical-align: -1px;
    margin-right: 4px;
}

.skm-dash .row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.skm-dash .row.last {
    margin-bottom: 0;
}

.skm-dash .row .lab {
    width: 140px;
    font-size: 11.5px;
    color: #5f7184;
}

.skm-dash .row .trk {
    flex: 1;
    background: #eef1f4;
    border-radius: 5px;
    height: 14px;
    overflow: hidden;
}

.skm-dash .row .trk > i {
    display: block;
    height: 100%;
}

.skm-dash .row .num {
    width: 26px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
}

.skm-dash .fun {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.skm-dash .fun.last {
    margin-bottom: 0;
}

.skm-dash .fun .lab {
    width: 150px;
    font-size: 11.5px;
    color: #5f7184;
}

.skm-dash .fun .bar {
    height: 24px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding-right: 8px;
    min-width: 26px;
}

.skm-dash .chk {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    margin-bottom: 10px;
}

.skm-dash .chk.last {
    margin-bottom: 0;
}

.skm-dash .chk i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: none;
    font-style: normal;
}

.skm-dash .progress {
    background: #eef1f4;
    border-radius: 6px;
    height: 10px;
    margin: 9px 0 14px;
    overflow: hidden;
}

.skm-dash .progress > i {
    display: block;
    height: 100%;
    background: #2e9e6b;
}

@media (max-width: 900px) {
    .skm-dash .hero {
        flex-direction: column;
    }
}


/* Dashboard onafhankelijkheid (WP 5.2). Bouwt voort op .skm-dash hierboven; alleen wat daar nog niet
   in zat: de blokkoppen die de interne en externe kant scheiden, de klikbare kaart en de tonen. */

.skm-dash .blokkop {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #5f7184;
    font-weight: 600;
    margin: 4px 0 8px;
}

/* De brug tussen beide kanten krijgt de accentkleur: het signaal is het enige getal dat aan allebei
   raakt, en dat mag te zien zijn. */
.skm-dash .blokkop.brug {
    color: var(--rx-groen-tekst);
}

.skm-dash .kpi.klikbaar {
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

.skm-dash .kpi.klikbaar:hover,
.skm-dash .kpi.klikbaar:focus-visible {
    border-color: rgba(var(--rx-groen-rgb), .55);
    box-shadow: 0 1px 6px rgba(var(--rx-navy-rgb), .10);
}

/* Alleen de cijfers krijgen kleur, niet de hele kaart: een vlak in alarmkleur trekt de aandacht ook
   wanneer het getal laag is, en dan went het weg. */
.skm-dash .kpi .v.urgent {
    color: #a32d2d;
}

.skm-dash .kpi .v.aandacht {
    color: #854f0b;
}

.skm-dash .kanttekening {
    font-size: 12px;
    color: #5f7184;
    line-height: 1.6;
    padding-left: 11px;
    border-left: 2px solid rgba(var(--rx-groen-rgb), .45);
    margin-bottom: 10px;
}

.skm-dash .kanttekening:last-child {
    margin-bottom: 0;
}

/* Compacte indeling voor het onafhankelijkheidsdashboard. Los van .skm-dash gehouden zodat de drie
   SKM-schermen ongemoeid blijven.

   De aanleiding: met de blokken ónder elkaar werd het scherm ruim 900px hoog terwijl de kaarten
   horizontaal uitrekten tot 880px voor één cijfer — alle ruimte de verkeerde kant op. In kolommen
   past het geheel op één scherm. */

.onafh-dash {
    padding: 16px 18px;
}

.onafh-dash .blokken {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}

/* De kolommen zijn verschillend hoog — één kaart naast twee. Uitrekken tot gelijke hoogte zou lege
   kaarten opleveren; align-items:start hierboven laat ze op hun eigen hoogte staan. */
.onafh-dash .blok > .kpi {
    margin-bottom: 8px;
}

.onafh-dash .blok > .kpi:last-child {
    margin-bottom: 0;
}

/* Even hoog, zodat de eerste kaart van elke kolom op dezelfde lijn begint. De koppen zijn kort
   genoeg voor één regel; deze hoogte vangt af dat een langere kop de kolom laat verspringen. */
.onafh-dash .blokkop {
    margin: 0 0 7px;
    min-height: 27px;
}

.onafh-dash .kpi {
    padding: 10px 13px;
}

.onafh-dash .kpi .v {
    font-size: 21px;
}

.onafh-dash .kpi .s {
    font-size: 11px;
    line-height: 1.45;
    margin-top: 3px;
}

.onafh-dash .card {
    padding: 13px 15px;
}

.onafh-dash .hero {
    margin-bottom: 14px;
}

/* ===== Register- en formulierendashboard =====
   (RegisterDashboardView.razor en FormulierDashboardView.razor)

   Twee schermen met dezelfde vorm: twee kolommen met kaarten, daaronder twee kaarten naast elkaar
   waarvan er een een uitsplitsing met staven draagt. Ze delen daarom de regels hieronder in plaats
   van dat de tweede ze overschrijft; wat ze erven van .skm-dash staat daar. =====
   Erft het geheel van .skm-dash en leunt verder op de blokindeling van .onafh-dash: twee kolommen
   met kaarten, daaronder twee kaarten naast elkaar. Alleen wat dit scherm extra heeft staat hier.

   Twee blokken en niet drie, anders dan bij onafhankelijkheid. Bij minder kolommen mogen ze breder
   zijn, vandaar een hogere ondergrens dan de 250px daar: met 250px werden het op een breed scherm
   twee smalle kolommen met veel lucht ertussen. */

.reg-dash,
.form-dash {
    padding: 16px 18px;
}

.reg-dash .blokken,
.form-dash .blokken {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
}

.reg-dash .blok > .kpi,
.form-dash .blok > .kpi {
    margin-bottom: 8px;
}

.reg-dash .blok > .kpi:last-child,
.form-dash .blok > .kpi:last-child {
    margin-bottom: 0;
}

.reg-dash .blokkop,
.form-dash .blokkop {
    margin: 0 0 7px;
    min-height: 27px;
}

.reg-dash .kpi,
.form-dash .kpi {
    padding: 10px 13px;
}

.reg-dash .kpi .v,
.form-dash .kpi .v {
    font-size: 21px;
}

.reg-dash .kpi .s,
.form-dash .kpi .s {
    font-size: 11px;
    line-height: 1.45;
    margin-top: 3px;
}

.reg-dash .card,
.form-dash .card {
    padding: 13px 15px;
}

.reg-dash .hero,
.form-dash .hero {
    margin-bottom: 14px;
}

/* De staaf krijgt zijn kleur hier en niet inline zoals bij de SKM-views. Daar draagt elke staaf een
   eigen betekenis en dus een eigen kleur; hier zijn het drie regels van dezelfde soort, en dan hoort
   de kleur bij het scherm en niet bij de regel.

   Zonder deze regel is de staaf onzichtbaar: .skm-dash .row .trk > i zet alleen vorm en hoogte, geen
   achtergrond. Het spoor eronder is wel zichtbaar, dus het valt op als een lege balk en niet als een
   ontbrekende — precies het soort fout dat door een bouw en een test heen komt. */
.reg-dash .row .trk > i,
.form-dash .row .trk > i {
    background: var(--rx-navy);
}

/* Het getal in de uitsplitsing draagt twee waarden: openstaand en totaal. Breder dan de 26px van
   .skm-dash .row .num, want daar past "12/148" niet in. */
.reg-dash .row .num,
.form-dash .row .num {
    width: auto;
    min-width: 52px;
}

/* Het totaal staat kleiner en zachter achter de breuk: het openstaande getal is waar het om gaat,
   het totaal geeft er alleen schaal aan. */
.reg-dash .row .num .van,
.form-dash .row .num .van {
    font-weight: 400;
    font-size: 11px;
    color: #5f7184;
}

/* Alleen het getal is klikbaar, niet de hele regel: de balk ernaast is een beeld en geen knop, en
   een klikbaar vlak dat half uit een staafdiagram bestaat leest als een vergissing. */
.reg-dash .row .num.klikbaar,
.form-dash .row .num.klikbaar {
    cursor: pointer;
    border-radius: 5px;
    padding: 1px 4px;
    margin-right: -4px;
}

.reg-dash .row .num.klikbaar:hover,
.reg-dash .row .num.klikbaar:focus-visible,
.form-dash .row .num.klikbaar:focus-visible {
    background: var(--rx-groen-vlak);
    color: var(--rx-groen-tekst);
}

.reg-dash .voet,
.form-dash .voet {
    margin-top: 9px;
    font-size: 11px;
    color: #5f7184;
}