@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';
@import '_content/Z.Blazor.Diagrams/Z.Blazor.Diagrams.ezdqu7jd9f.bundle.scp.css';

/* /Modules/Actiesets/Components/ActieStapDialog.razor.rz.scp.css */
/* Labelkolom lijnt met de veld-baseline (velden hebben interne padding); align-start zet 'm bovenaan,
   deze padding schuift 'm op de eerste regel van het veld ernaast. */
.actie-stap-dialog-label[b-x772nntjja] {
    padding-top: 0.5rem;
}
/* /Modules/Actiesets/Components/BeslissingDialog.razor.rz.scp.css */
/* Vaste breedtes in de beslis-dialog; breedte/flex heeft geen MudBlazor-utility. */
.beslissing-tak-label[b-dupa79zny3] {
    max-width: 240px;
}

.beslissing-waardetype[b-dupa79zny3] {
    width: 220px;
}
/* /Modules/Actiesets/Components/SjabloonEditor.razor.rz.scp.css */
/* Toolbar is leeg (Tools=[]) maar Quill rendert de balk-container alsnog; verbergen.
   De container krijgt daardoor een losse bovenrand-look — rand herstellen. */
.sjabloon-editor[b-xsih035cl4]  .ql-toolbar {
    display: none;
}

.sjabloon-editor[b-xsih035cl4]  .ql-container {
    border-top: 1px solid var(--mud-palette-lines-inputs, #ccc);
}
/* /Modules/Actiesets/Flow/Canvas/ActieNodeWidget.razor.rz.scp.css */
.actie-node[b-lphspsb866] {
    width: max-content;
    /* Node zelf blijft node-breed; de titel eronder mag breder zijn (loopt iets links/rechts door) zonder
       de node — en dus de ports — mee te laten groeien. Flex-kolom + center houdt titel onder de node. */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Rij ingang | node | uitgang. Node + kolommen rekken naar de hoogste (stretch): bij weinig ports
   blijft de node 96px (vierkant), bij meer uitgangen groeit hij mee zodat de plusjes niet overlappen. */
.actie-node-rij[b-lphspsb866] {
    display: flex;
    align-items: stretch;
    width: max-content;
}

/* De zichtbare node met het icoon. Vierkant bij weinig ports (96x96 minimum), groeit in hoogte mee.
   Relative zodat het uitroepteken-badge (::deep .actie-node-waarschuwing) absoluut t.o.v. dit vak plaatst. */
.actie-node-vak[b-lphspsb866] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    min-height: 96px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: var(--mud-elevation-2);
}

/* Start-marker: zelfde vierkant, grotere ronding aan de linkerhoeken. */
.actie-node--start .actie-node-vak[b-lphspsb866] {
    border-radius: 36px 12px 12px 36px;
}

/* Ontbrekende verplichte gegevens: oranje rand als signaal. */
.actie-node-vak--waarschuwing[b-lphspsb866] {
    border-color: var(--mud-palette-warning);
    box-shadow: 0 0 0 1px var(--mud-palette-warning);
}

/* Trace-overlay: gekleurde rand per uitvoeringsstatus. Groen = geslaagd, rood = mislukt, blauw = bezig,
   grijs/gedimd = door de run niet aangeraakt (overgeslagen of nooit gestart). */
.actie-node-vak--geslaagd[b-lphspsb866] {
    border-color: var(--mud-palette-success);
    box-shadow: 0 0 0 1px var(--mud-palette-success);
}

.actie-node-vak--mislukt[b-lphspsb866] {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 1px var(--mud-palette-error);
}

.actie-node-vak--deels[b-lphspsb866] {
    border-color: var(--mud-palette-warning);
    box-shadow: 0 0 0 1px var(--mud-palette-warning);
}

.actie-node-vak--bezig[b-lphspsb866] {
    border-color: var(--mud-palette-info);
    box-shadow: 0 0 0 1px var(--mud-palette-info);
}

/* Wachtend: de run staat geparkeerd op deze wachtstap. Warning-kleur (oranje) + een rondtrekkende rand
   zodat een wachtende stap in één oogopslag opvalt tussen de statische statussen. De rand zelf is een
   conic-gradient op een ::after-overlay, tot alléén de rand geknipt via een mask (padding-box uitgespaard),
   en roteert continu → oranje segment loopt rond de node. */
.actie-node-vak--wachtend[b-lphspsb866] {
    border-color: var(--mud-palette-warning);
}

.actie-node-vak--wachtend[b-lphspsb866]::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 15px; /* vak-radius (12) + inset (3) zodat de rand de hoeken netjes volgt */
    padding: 3px; /* dikte van de rondtrekkende rand */
    background: conic-gradient(
        from var(--wachtstap-hoek, 0deg),
        transparent 0deg,
        var(--mud-palette-warning) 60deg,
        transparent 140deg,
        transparent 360deg);
    /* Alleen de rand tonen: vul-laag min padding-laag = ring. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: actie-node-wachtend-draai-b-lphspsb866 4.5s linear infinite;
    pointer-events: none;
}

/* Roteert de conic-gradient-hoek via een geregistreerde <angle>-custom-property (vloeiend animeerbaar). */
@property --wachtstap-hoek {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes actie-node-wachtend-draai-b-lphspsb866 {
    to {
        --wachtstap-hoek: 360deg;
    }
}

/* Fallback zonder @property-support: geen animatie, dan een statische oranje ring i.p.v. rondtrekken. */
@supports not (background: conic-gradient(from 0deg, #000, #000)) {
    .actie-node-vak--wachtend[b-lphspsb866] {
        box-shadow: 0 0 0 1px var(--mud-palette-warning);
    }
    .actie-node-vak--wachtend[b-lphspsb866]::after {
        display: none;
    }
}

.actie-node-vak--niet-gedraaid[b-lphspsb866] {
    border-style: dashed;
    opacity: 0.5;
}

/* Uitroepteken rechtsboven op de node. MudIcon-root krijgt het scope-attribuut niet; bereik 'm via ::deep vanaf de plain node-div.
   Absoluut zodat de badge de flex-centrering van het icoon niet verstoort. Witte cirkel eronder zodat
   het oranje uitroepteken contrasteert met de canvas-achtergrond en het volledig dekkend oogt. */
.actie-node-vak[b-lphspsb866]  .actie-node-waarschuwing {
    position: absolute;
    top: -10px;
    right: -10px;
    background: white;
    border-radius: 50%;
}

/* Titel onder de node: gecentreerd, mag breder dan de node (loopt iets links/rechts door). Bij lange
   tekst over max. 2 regels breken; nog langer → afkappen met puntjes. Vaste breedte + max-width zodat de
   node-flow (en dus de ports) niet meegroeit met de tekst. */
.actie-node-titel[b-lphspsb866] {
    margin-top: 8px;
    width: 160px;
    text-align: center;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* Port-kolom: 0px breed (verwijdt de node niet), ports verdeeld over de rij-hoogte. Ports worden half
   over de node-rand geschoven via translateX. Groeit de kolom, dan groeit de rij en dus de node mee. */
/* Kolom is 14px breed (= port) en overlapt de node-rand met een halve breedte via negatieve margin,
   zodat de bolletjes op de rand zitten. In de flow, dus de rij (en node) groeit met het aantal ports. */
.actie-node-ports[b-lphspsb866] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
    width: 14px;
    z-index: 1;
}

.actie-node-ports:first-child[b-lphspsb866] {
    margin-right: -7px;
}

.actie-node-ports:last-child[b-lphspsb866] {
    margin-left: -7px;
}

/* Uitgang: de port blijft het enige in-flow element (dus op de rand). Vaste breedte (= port) zodat elke
   uitgang-rij identiek breed is en de absolute label/stub per rij op dezelfde X starten. */
.actie-node-uitgang[b-lphspsb866] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
}

/* Tak-/anders-label van een beslisstap: rechts van de port (n8n-stijl), zwevend boven de uitgaande lijn.
   Eén regel; lange tekst afkappen met puntjes. pointer-events uit zodat het label de port-hitbox en de
   lijn eronder niet blokkeert. */
.actie-node-uitgang-label[b-lphspsb866] {
    position: absolute;
    left: 100%;
    margin-left: 10px;
    width: max-content;
    max-width: 88px;
    padding: 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-surface) 75%, transparent);
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mud-palette-text-primary);
    pointer-events: none;
    z-index: 2;
}

/* Placeholder steekt naar rechts uit, beginnend bij de rechterrand van de port zodat de stub/+ de
   port-hitbox (crosshair) niet overlapt. pointer-events uit op de lijn; de +-knop houdt z'n eigen klik. */
.actie-node-stub-groep[b-lphspsb866] {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}

/* Placeholder-lijntje tussen de uitgang en de +-knop. Langer zodat het label erboven ruimte heeft.
   Zelf wél klikbaar (pointer-events auto): je kunt er net als vanaf de port een lijn uit trekken. De
   hit-zone is verticaal ruimer dan de 2px-lijn via een ::before-overlay, anders is hij niet te raken. */
.actie-node-stub[b-lphspsb866] {
    position: relative;
    width: 100px;
    height: 2px;
    background: var(--mud-palette-lines-default);
    pointer-events: auto;
    cursor: crosshair;
}

.actie-node-stub[b-lphspsb866]::before {
    content: "";
    position: absolute;
    inset: -8px 0;
}

/* Slepen vanaf de stub oogt als de port: lijn licht op bij hover. */
.actie-node-stub:hover[b-lphspsb866] {
    background: var(--mud-palette-primary);
}

/* Wrapper om de +-knop: vangt de pointer-down (sleep-start) af terwijl de knop zelf z'n klik houdt. */
.actie-node-stub-plus-wrapper[b-lphspsb866] {
    display: flex;
    align-items: center;
    pointer-events: auto;
}

/* MudIconButton-root krijgt het scope-attribuut niet; bereik 'm via ::deep vanaf de plain wrapper-div. */
.actie-node-stub-plus-wrapper[b-lphspsb866]  .actie-node-stub-plus {
    background: var(--mud-palette-surface);
}

/* De port zelf: cirkel. */
[b-lphspsb866] .diagram-port {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-primary);
    cursor: crosshair;
    transition: background-color 100ms, transform 100ms;
}

/* Onzichtbare, ruimere hit-zone rond de port zodat je 'm makkelijker raakt (crosshair i.p.v. handje). */
[b-lphspsb866] .diagram-port::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
}

/* Hover / bezig met slepen: opvallen en iets groter. */
[b-lphspsb866] .diagram-port:hover {
    background: var(--mud-palette-primary);
    transform: scale(1.25);
}

/* Reeds verbonden: gevuld zodat je ziet dat er een link hangt. */
[b-lphspsb866] .diagram-port.has-links {
    background: var(--mud-palette-primary);
}

/* Alleen-lezen (versie-weergave én trace): ports zijn geen interactie-doel meer — geen crosshair, geen
   hover-groei, geen ruimere hit-zone, geen lijntjes trekken. Alleen tonen waar een link aanhangt. */
.actie-node--readonly[b-lphspsb866]  .diagram-port {
    cursor: default;
}

.actie-node--readonly[b-lphspsb866]  .diagram-port:hover {
    background: var(--mud-palette-surface);
    transform: none;
}

.actie-node--readonly[b-lphspsb866]  .diagram-port.has-links:hover {
    background: var(--mud-palette-primary);
}

.actie-node--readonly[b-lphspsb866]  .diagram-port::before {
    content: none;
}

/* Node blijft klikbaar (dubbelklik = detail-/inrichtingsdialog). */
.actie-node--readonly .actie-node-vak[b-lphspsb866] {
    cursor: pointer;
}
/* /Modules/Actiesets/Pages/ActiesetCanvas.razor.rz.scp.css */
/* Versie-lifecycle-blok in de topbalk: lichte achtergrond + ronde hoeken zodat status + opslaan/activeren/
   verwerpen als één groep leest, los van de identiteit-velden links. */
.actieset-versie-blok[b-fpm9qcsrxp] {
    background-color: var(--mud-palette-background-grey);
    border-radius: var(--mud-default-borderradius);
}

/* Basis canvas-chroom (.actieset-canvas-container + .actieset-minimap + .actieset-zoom-knoppen) staat
   globaal in nova.css, gedeeld met de uitvoering- en versie-pagina. Hieronder alleen editor-eigen regels. */

/* Overlay-toolbar: MudBlazor heeft geen absolute-positie utility. Iconen stapelen verticaal (MudStack).
   ::deep omdat MudStack een child-component is; het scoped-attribuut belandt niet op zijn <div>. */
.actieset-canvas-container[b-fpm9qcsrxp]  .actieset-canvas-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

/* Onzichtbare vanger achter het paneel: klik buiten het paneel sluit het. Onder het paneel (z-index), boven het canvas. */
.actieset-paneel-overlay[b-fpm9qcsrxp] {
    position: absolute;
    inset: 0;
    z-index: 15;
}

/* Rechter overlay-paneel binnen het canvas (n8n-achtige "wat gebeurt hierna"-lijst).
   ::deep omdat MudPaper een child-component is; het scoped-attribuut belandt niet op zijn <div>. */
.actieset-canvas-container[b-fpm9qcsrxp]  .actieset-stap-paneel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 90%;
    z-index: 20;
    border-radius: 0;
}

/* Selectie-indicator op een node: lib zet .selected op .diagram-node (buiten de widget-scope),
   dus vanaf de container ::deep de node erbinnen aanspreken. */
.actieset-canvas-container[b-fpm9qcsrxp]  .diagram-node.selected .actie-node-vak {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

/* Hover-indicator op de stap-items: accentrand links + lichte achtergrond.
   ::deep omdat MudListItem een child-component is. */
.actieset-canvas-container[b-fpm9qcsrxp]  .actieset-stap-item {
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background-color 100ms, border-color 100ms;
}

.actieset-canvas-container[b-fpm9qcsrxp]  .actieset-stap-item:hover {
    border-left-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

/* /Modules/Dossiers/CreateDossier/CreateDossierOneFlow.razor.rz.scp.css */
.nova-dossier-oneflow[b-m81lkdzmpi] {
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
}

.nova-dossier-oneflow-legend[b-m81lkdzmpi] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}
/* /Modules/Dossiers/CreateDossier/CreateDossierWizard.razor.rz.scp.css */
.nova-wizard-paper[b-2ahqlhxg0s] {
    border-color: var(--mud-palette-lines-inputs);
}
/* /Modules/Dossiers/CreateDossier/Steps/StapDossierTraject.razor.rz.scp.css */
.nova-veldhoogte-knop[b-56t5t9nagc] {
    height: 56px;
}
/* /Modules/Dossiers/CreateTestdata/Pages/CreateTestdataPage.razor.rz.scp.css */
.nova-voortgang-panel[b-o9dcxzvhw7] {
    min-width: 300px;
}

.nova-type-regel[b-o9dcxzvhw7] {
    border: 1px solid #000;
    border-radius: 4px;
}
/* /Shared/Components/MenuNavLink.razor.rz.scp.css */
/* Dossier Navigation Component Styling */
.menu-nav[b-d9tfputjch] {
    display:flex;
    gap: .5rem;
}

[b-d9tfputjch] .menu-nav-link {
    text-decoration: none;
    padding: 8px 12px;
    position: relative;
    transition: color 0.2s ease;
    color: var(--mud-palette-secondary-text);
}

[b-d9tfputjch] .menu-nav-link::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--mud-palette-primary-darken);
    transition: transform 0.2s ease;
    transform-origin: top;
}

[b-d9tfputjch] .menu-nav-link.active {
    font-weight: bold;
}

[b-d9tfputjch] .menu-nav-link:hover::after,
[b-d9tfputjch] .menu-nav-link.active::after {
    transform: translateX(-50%) scaleY(1);
}
/* /Shared/Components/NovaList.razor.rz.scp.css */
.nova-list[b-wl93omjn25] {
    width: 100%;
    overflow-y: auto;
}

[b-wl93omjn25] .nova-list-row > .mud-stack {
    width: 100%;
    min-width: 0;
}

[b-wl93omjn25] .nova-list-row .nova-list-flex-min {
    min-width: 0;
}

[b-wl93omjn25] .nova-list-row .nova-list-flex-fixed {
    flex-shrink: 0;
}

.nova-list-row[b-wl93omjn25] {
    width: 100%;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
}

/* Hover effect for unselected rows */
.nova-list-row:not(.nova-list-row--selected):hover[b-wl93omjn25] {
    background-color: var(--mud-palette-table-hover);
}

/* Selected row */
.nova-list-row--selected[b-wl93omjn25] {
    color: var(--mud-palette-background);
    background: var(--mud-palette-primary);
}

.nova-list-row--even[b-wl93omjn25] {
    background: var(--mud-palette-gray-lighter);
}

[b-wl93omjn25] .nova-list-row--selected .nova-list-avatar-border {
    background-color: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-background);
}

[b-wl93omjn25] .nova-list-row--selected .nova-avatar-content {
    color: var(--mud-palette-primary);
}

[b-wl93omjn25] .nova-list-row--selected .mud-icon-button .mud-icon-root,
[b-wl93omjn25] .nova-list-row--selected .mud-menu .mud-icon-root {
    color: var(--mud-palette-background);
}
/* /Shared/Components/SideMenu.razor.rz.scp.css */
[b-uhro9dv25w] .nova-sidemenu-link .mud-nav-link {
    padding: 2px 16px;
}

[b-uhro9dv25w] .nova-sidemenu-link>.mud-ripple:hover,
[b-uhro9dv25w] .nova-sidemenu-link>.nova-sidemenu-link-active {
    background-color: var(--mud-palette-primary-darken);
}

[b-uhro9dv25w] .nova-sidemenu-link>.nova-sidemenu-link-active>.mud-nav-link-text {
    color: var(--mud-palette-primary-text);
    text-decoration: underline;
}

[b-uhro9dv25w] .nova-sidemenu-subtitle {
    font-weight:bold;
}
/* /Shared/Components/SlideIn/SlideIn.razor.rz.scp.css */
.slide-in-panel[b-dk745sro8l] {
    background-color: var(--mud-palette-background);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.slide-in-footer[b-dk745sro8l] {
    background: var(--mud-palette-gray-light);
}

.slide-in-content[b-dk745sro8l] {
    flex: 1;
    overflow-y: auto;
}

.button-save-cancel[b-dk745sro8l] {
    text-transform: none;
}

.slide-in-overlay[b-dk745sro8l] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1300;
    cursor: default;
    animation: slide-in-overlay-fadein-b-dk745sro8l 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slide-in-overlay-fadein-b-dk745sro8l {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Shared/Components/SubMenu.razor.rz.scp.css */
/* Dossier Navigation Component Styling */
.submenu-nav[b-0srlcnylv2] {
    display:flex;
    gap: 1rem;
    overflow-x: auto;
    position: relative;
}

[b-0srlcnylv2] .submenu-nav-link {
    text-decoration: none;
    padding: 6px 0; /* remove horizontal padding so underline matches label width exactly */
    position: relative;
    color: var(--mud-palette-text-primary);
}

/* apply underline to the inner label so it's exactly the text width */
[b-0srlcnylv2] .submenu-nav-link .submenu-label {
    display: inline-block;
    position: relative;
    padding: 0; /* no extra padding */
}

[b-0srlcnylv2] .submenu-nav-link .submenu-label::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px; /* slight nudge below the text */
    height: 3px;
    width: 100%;
    background-color: transparent;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.12s ease, background-color 0.12s ease;
}

[b-0srlcnylv2] .submenu-nav-link:hover .submenu-label::after {
    background-color: var(--mud-palette-primary);
    transform: scaleX(1);
}

[b-0srlcnylv2] .submenu-nav-link.active {
    font-weight: bold;
    color: var(--mud-palette-primary);
}

[b-0srlcnylv2] .submenu-nav-link.active .submenu-label::after {
    background-color: var(--mud-palette-primary);
    transform: scaleX(1);
}