:root {
    --nova-appbar-height: 48px;
    --nova-relatietype-opdrachtgever: #6E11B0;
    --nova-relatietype-derde: #B819B6;
    --nova-relatietype-eiser: #9F2D00;
    --nova-relatietype-bank: #008000;
}

/* MudDrawer clipped-always correct positioneren onder een Dense AppBar (48px).
   MudBlazor past dit normaal toe via de mud-appbar-dense sibling-selector,
   maar dat werkt niet wanneer de drawer buiten MudLayout gerenderd wordt. */
.mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
    top: var(--nova-appbar-height);
    height: calc(100% - var(--nova-appbar-height));
}

.bg-primary-darken {
    background-color: var(--mud-palette-primary-darken);
}

.bg-primary-lighten {
    background-color: var(--mud-palette-primary-lighten);
}

.bg-primary {
    background-color: var(--mud-palette-primary)
}
.bg-transparent {
    background-color: transparent;
}

.break-long-words {
    word-break: break-all;
    overflow-wrap: break-word;
    hyphens: auto;
}

.hover-bg-lighten:hover {
    /* Subtle 10% primary tint, computed from the primary RGB channels so the alpha is
       guaranteed (not dependent on how MudBlazor renders the primary-lighten palette
       slot) and it follows light/dark mode automatically. */
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1);
}

.mud-primary-lighten {
    color: var(--mud-palette-primary-lighten);
}
.mud-primary-darken {
    color: var(--mud-palette-primary-darken);
}

.text-white {
    color: var(--mud-palette-white)!important;
}

.fw-thin {
    font-weight: 100;
}
.fw-extra-light  
{
    font-weight: 200;
}
.fw-light  
{
    font-weight: 300;
}
.fw-regular  
{
    font-weight: 400;
}
.fw-medium  
{
    font-weight: 500;
}
.fw-semi-bold  
{
    font-weight: 600;
}
.fw-bold  
{
    font-weight: 700;
}
.fw-extra-bold  
{
    font-weight: 800;
}
.fw-black
{
    font-weight: 900;
}
.fst-italic {
    font-style: italic;
}
.text-muted {
    color: var(--mud-palette-text-secondary);
}

.nova-grid-header th.mud-table-cell {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--mud-palette-primary);
    /*  Witte kleur voor sorteer icoontjes */
    --mud-palette-action-default: #ffffff;
    --mud-palette-text-disabled: #ffffff;
}

.nova-grid-loading-row {
    height: var(--nova-item-size);
}

.nova-grid-header th.mud-table-cell .column-header {
    color: white;
    font-weight: normal;
}

.nova-fullscreen,
.nova-fullscreen-layout {
    margin: -24px;
    width: calc(100% + 48px);
    height: calc(100vh - var(--nova-appbar-height));
    overflow: hidden;
}

.nova-fullscreen-layout .mud-drawer.mud-drawer-responsive,
.nova-fullscreen-layout .mud-drawer.mud-drawer-persistent,
.nova-fullscreen-layout .mud-drawer.mud-drawer-temporary {
    top: var(--nova-appbar-height);
    height: calc(100vh - var(--nova-appbar-height));
}

.nova-fullscreen-layout .mud-drawer .mud-drawer-content {
    flex: 1 1 0%;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
}

.nova-fullscreen-layout .mud-main-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Beschikbare velden — scrollbare lijst per groep (max 5 items zichtbaar) */
.veld-groep-lijst {
    max-height: 280px;
    overflow-y: auto;
}

/* Beschikbare velden — groepskleuren.
   LET OP: dezelfde kleuren staan als inline hex in VeldSpanStijl() in
   Modules/Berichten/BerichtenWizard/Steps/StapOpmaakVerzending.razor. Dat is bewust: die spans
   landen in de verzonden berichttekst, en mailclients negeren externe CSS en custom properties.
   Wijzigt een groepskleur hier, pas die helper dan ook aan. */

/* Beschikbare velden — technische naam grijs voor alle groepen */
.veld-dos .mud-typography-caption,
.veld-deb .mud-typography-caption,
.veld-eis .mud-typography-caption,
.veld-opd .mud-typography-caption,
.veld-sys .mud-typography-caption,
.veld-fin .mud-typography-caption,
.veld-overig .mud-typography-caption {
    color: #9e9e9e;
}

/* Dossier */
.veld-dos { background-color: #f5f5f5; color: #424242; }
.veld-icon-dos { color: #bdbdbd; }
.veld-dos .mud-typography-body2 { color: #424242; }

/* Debiteur */
.veld-deb { background-color: #e8f5e9; color: #2e7d32; }
.veld-icon-deb { color: #a5d6a7; }
.veld-deb .mud-typography-body2 { color: #2e7d32; }

/* Eiser */
.veld-eis { background-color: #e3f2fd; color: #1565c0; }
.veld-icon-eis { color: #90caf9; }
.veld-eis .mud-typography-body2 { color: #1565c0; }

/* Opdrachtgever */
.veld-opd { background-color: #fff3e0; color: #e65100; }
.veld-icon-opd { color: #ffcc80; }
.veld-opd .mud-typography-body2 { color: #e65100; }

/* Systeem */
.veld-sys { background-color: #f3e5f5; color: #6a1b9a; }
.veld-icon-sys { color: #ce93d8; }
.veld-sys .mud-typography-body2 { color: #6a1b9a; }

/* Financieel */
.veld-fin { background-color: #fce4ec; color: #ad1457; }
.veld-icon-fin { color: #f48fb1; }
.veld-fin .mud-typography-body2 { color: #ad1457; }

/* Overig */
.veld-overig { background-color: #fffde7; color: #f57f17; }
.veld-icon-overig { color: #fff176; }
.veld-overig .mud-typography-body2 { color: #f57f17; }

/* Editor content area altijd wit, toolbar ongewijzigd */
.ql-editor {
    background-color: #ffffff;
}

/* Editor veld-chips: border + padding via currentColor (= de kleur hierboven) */
span.veld-dos, span.veld-deb, span.veld-eis, span.veld-opd,
span.veld-sys, span.veld-fin, span.veld-overig {
    border: 1px solid;
    border-radius: 3px;
    padding: 1px 4px;
}

.nova-flex-fill {
    flex: 1 1 0%;
    min-height: 0;
}

.nova-page-scroll {
    overflow-y: auto;
}

/* MudBlazor heeft geen ingebouwde utility voor horizontaal scrollen van overflowende inhoud
   (bv. een brede MudSimpleTable) - vandaar deze nova-* laag-niveau layout-klasse. */
.nova-scroll-x {
    overflow-x: auto;
}

/* Voor MudText/MudTd bestaat MudBlazor's eigen Align="Align.Right"-parameter - gebruik die daar.
   Deze klasse blijft nodig voor kale HTML-tabelcellen (<th>/<td> binnen MudSimpleTable), waarvoor
   geen Mud-equivalent bestaat; MudBlazor's eigen documentatie valt daar zelf terug op inline
   style="text-align:right", wat ons no-inline-style-uitgangspunt niet toestaat. */
.nova-text-end {
    text-align: right;
}

.nova-full-height {
    height: 100%;
}

.nova-item-fill {
    height: 100%;
    min-height: 0;
}

/* Vaste breedte voor een korte select naast een bredere kaartenrij; breedte heeft geen MudBlazor-utility. */
.nova-narrow-select {
    max-width: 320px;
}

.nova-drawer-nav {
    flex: 1 1 0%;
    overflow-y: auto;
    min-height: 0;
}

.nova-workspace-header {
    flex-shrink: 0;
}

.nova-workspace-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.text-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.text-strikethrough {
    text-decoration: line-through;
}

.text-nowrap {
    white-space: nowrap;
}

.bericht-veld-label {
    min-width: 90px;
}

.nova-hover-invisible{
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.mud-table-row:hover .nova-hover-invisible,
.mud-table-row:focus-within .nova-hover-invisible {
    opacity: 1;
}

.nova-spotlight-list .mud-list-item {
    border-left: 3px solid transparent;
}

.nova-spotlight-active {
    background-color: var(--mud-palette-action-default-hover) !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.nova-spotlight-active .mud-list-item-icon,
.nova-spotlight-active .mud-typography {
    color: var(--mud-palette-primary) !important;
}

.mud-button.nova-spotlight-active {
    background-color: var(--mud-palette-action-default-hover) !important;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Actieset: JSON-preview in trace/uitvoerhistorie.
   Padding/marge via MudBlazor utility-classes (pa-2 my-1) op het <pre>. */
.actieset-json {
    background: var(--mud-palette-background-grey);
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.nova-drop-zone {
    outline: 2px dashed var(--mud-palette-lines-inputs);
    outline-offset: -2px;
}

.nova-drag-highlight {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -2px;
}

.nova-clickable {
    cursor: pointer;
}

/* Voortgangs-snackbar van een langlopende operatie (bv. de Excel-export): de tekst wisselt tijdens het
   uitvoeren van lengte ("voorbereiden..." → "12.000 van 300.000 dossiers" → "gereed"), en zonder
   minimumbreedte krimpt en groeit de snackbar zichtbaar mee. Geen MudBlazor-utility dekt min-width. */
.nova-snackbar-voortgang {
    min-width: 260px;
}

/* Gedeeld canvas-chroom voor de actieset-pagina's (editor, uitvoering/trace, versie-weergave). Globaal
   i.p.v. per-component scoped omdat alle drie exact dezelfde container + minimap + zoom-positie delen; de
   class-namen zijn al uniek genoeg (actieset-*). Page-specifieke regels blijven in de eigen .razor.css. */

/* Canvas heeft een zichtbare, gemeten ouder nodig (100% w/h intern); geen MudBlazor-utility dekt flex-fill + min-height. */
.actieset-canvas-container {
    position: relative;
    flex: 1 1 0%;
    border: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

/* Minimap linksonder in het canvas. */
.actieset-canvas-container .actieset-minimap {
    position: absolute;
    bottom: 60px;
    left: 0;
    z-index: 10;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.actieset-canvas-container .actieset-zoom-knoppen {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 200px;
    justify-content: space-between;
}

/* =========================================================================
   Nova container-consistentie — subtiele neutrale border + platte in-pagina
   containers. Eén centrale plek i.p.v. per-component overrides.
   - Radius (4px) komt centraal uit het theme (NovaMudTheme.DefaultBorderRadius →
     --mud-default-borderradius); daarom hier GEEN border-radius.
   ========================================================================= */

/* Neutrale 0.5px border op container-achtige componenten. Structurele chrome
   (drawer/appbar) uitgesloten; overlays (dialog/popover) via de mud-paper-regel. */
.mud-paper:where(:not(.mud-drawer):not(.mud-appbar)),
.mud-card,
.mud-table,
.mud-data-grid,
.mud-dialog,
.mud-expand-panel {
    border: 0.5px solid var(--mud-palette-lines-default);
}

/* Tabel/datagrid: buitenhoeken clippen zodat de gekleurde sticky header
   (.nova-grid-header) binnen de radius blijft. */
.mud-table,
.mud-data-grid {
    overflow: hidden;
}

/* Flat: geen box-shadow op in-pagina containers. Zwevende overlays
   (dialog + alles binnen een popover: dropdowns/menu's) behouden bewust hun
   elevation-shadow zodat ze van de achtergrond loskomen. */
.mud-paper:where(:not(.mud-drawer):not(.mud-appbar):not(.mud-dialog):not(.mud-popover *)),
.mud-card,
.mud-table,
.mud-data-grid,
.mud-expand-panel {
    box-shadow: none;
}

/* Geneste containers houden hun eigen 0.5px border — door de padding-conventie
   (pa-4 e.d.) raken de randen elkaar niet, dus ze verduidelijken i.p.v. dubbelen.
   Wel de shadow platslaan zodat ook geneste (bv. in-popover) papers vlak blijven. */
.mud-paper .mud-table,
.mud-paper .mud-data-grid,
.mud-card .mud-table,
.mud-card .mud-data-grid,
.mud-paper .mud-paper {
    box-shadow: none;
}

/* Selector-kaarten (dossier-/trajectknoppen in DossierInformatie) gelijke hoogte
   geven, ongeacht 1 of 2 tekstregels. Gedeeld door beide componenten via de
   ItemActive/InactiveClass-constanten. */
.nova-selector-item {
    min-height: 56px;
}

/* Verticale scheidingslijn rechts van het linker informatiepaneel (dossier/relatie).
   Alleen op md+ waar het paneel naast de content staat; op smalle schermen stapelt
   het paneel full-width en is een rechterrand ongewenst. */
@media (min-width: 960px) {
    .nova-panel-border-right {
        border-right: 0.5px solid var(--mud-palette-lines-default);
    }
}

/* Afmelden is een POST-form met antiforgery-token in plaats van een link (zie
   EntraLoginDisplay). Een <button> brengt browser-defaults mee — achtergrond, rand, font,
   breedte, tekstuitlijning — waar MudBlazor geen utility voor heeft; deze reset laat hem
   zich als de omliggende menu-items gedragen. */
.nova-menu-form-button-layout {
    width: 100%;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}