/* ---------------------------------------------------------------------------
   ZwMpalServer - schermopmaak
   Het blauw is overgenomen uit het oude Wisej-hoofdmenu (0, 90, 158), zodat
   het programma herkenbaar blijft voor wie ZwMpServer (Wisej) gewend is.
   --------------------------------------------------------------------------- */
:root {
    --nav: #005A9E;
    --nav-donker: #00477e;
    --rand: #dde3ea;
    /* Rasterlijnen apart van --rand. Die is bewust bleek voor de omlijsting
       van vakken; in een raster vol regels valt hij daardoor weg. Deze twee
       zijn de enige plek waar de zwaarte van de rasterlijnen staat. */
    --rasterlijn: #b9c3cf;
    --rasterlijn-kop: #8a97a6;
    --tekst: #1c2530;
    --gedempt: #6b7684;
    --vlak: #f2f4f7;
}

html, body {
    margin: 0;
    height: 100%;
    color: var(--tekst);
    background: var(--vlak);
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* Flexibele indeling en bewust GEEN grid met vaste kolommen. Bij een grid
   telt elk kind mee voor de plaatsing: het lipje kwam als derde kind in de
   tweede kolom en duwde de inhoud naar een tweede rij in de eerste kolom -
   die bij een ingeklapt menu nul breed is. Met flex bepaalt alleen de
   volgorde iets, en pakt de inhoud altijd wat er overblijft. */
.beheer {
    display: flex;

    /* De hoogte staat verderop bij de schermschaal: die moet door de
       schaalfactor gedeeld worden, anders blijft er bij een kleinere maat een
       strook onderaan het scherm over. */
    overflow: hidden;
}

/* Navigatiebalk ---------------------------------------------------------- */
.beheer-nav {
    position: relative;
    /* Breedte komt uit --nav-breedte; die zet beheer.js tijdens het slepen en
       de layout bij het opstarten op de bewaarde waarde. */
    flex: 0 0 var(--nav-breedte, 280px);
    width: var(--nav-breedte, 280px);
    display: flex;
    flex-direction: column;
    background: var(--nav);
    color: #fff;
}

/* Sleepgreep op de rand van de navigatiebalk. Zes pixels breed, met een
   trefvlak dat iets ruimer is dan wat je ziet. */
.beheer-greep {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px;
    width: 6px;
    cursor: col-resize;
    z-index: 10;
    touch-action: none;
}

.beheer-greep:hover,
.beheer-greep:active {
    background: rgba(255, 255, 255, .35);
}

.beheer-merk {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.beheer-merk-naam {
    display: block;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .02em;
}

.beheer-merk-onder {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
}

/* Radzen-menu in de blauwe balk ------------------------------------------
   Het thema (material-base.css) geeft menu-items een eigen witte achtergrond
   en donkere tekst. Dat moet hier allemaal wijken, anders krijg je witte
   blokken met onleesbare letters op het blauw. Vandaar de !important: we
   overschrijven bewust het thema en niet onze eigen regels. */

.beheer-nav .rz-panel-menu,
.beheer-nav .rz-navigation-menu,
.beheer-nav .rz-navigation-item,
.beheer-nav .rz-navigation-item-wrapper,
.beheer-nav .rz-navigation-item-link,
.beheer-nav .rz-navigation-item-button {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.beheer-nav .rz-panel-menu {
    flex: 1;
    padding: 8px 0;
    overflow-y: auto;
}

.beheer-nav .rz-navigation-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Tekst en pictogrammen altijd wit, ook in de uitgeklapte onderdelen. */
.beheer-nav .rz-navigation-item-link,
.beheer-nav .rz-navigation-item-text,
.beheer-nav .rz-navigation-item-icon,
.beheer-nav .rz-navigation-item-icon-children,
.beheer-nav .rz-navigation-item-button,
.beheer-nav .rz-navigation-item-wrapper > * {
    color: #fff !important;
    fill: #fff !important;
}

.beheer-nav .rz-navigation-item-wrapper {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
}

.beheer-nav .rz-navigation-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-height: 44px;
    padding: 0;
    text-decoration: none;
    font-size: 14px;
}

.beheer-nav .rz-navigation-item-icon {
    font-size: 20px;
    opacity: .85;
}

/* Kleurwissel bij hover en bij de huidige pagina loopt hierdoor over in
   plaats van dat hij omklapt. Een !important op de achtergrond verderop
   verhindert dat niet: de transitie hangt aan het element, niet aan de
   waarde. Twee eigenschappen zijn genoeg - box-shadow zit erbij voor de
   witte staaf op de actieve regel. */
.beheer-nav .rz-navigation-item-wrapper,
.beheer-nav .rz-navigation-item-link {
    transition: background-color .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .beheer-nav .rz-navigation-item-wrapper,
    .beheer-nav .rz-navigation-item-link {
        transition: none;
    }
}

/* De onderliggende items springen in, zodat de groepering zichtbaar blijft
   nu de witte achtergrond weg is. */
.beheer-nav .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-wrapper {
    padding-left: 36px;
}

.beheer-nav .rz-navigation-menu .rz-navigation-menu .rz-navigation-item-link {
    font-size: 13.5px;
    opacity: .92;
}

.beheer-nav .rz-navigation-item-wrapper:hover,
.beheer-nav .rz-navigation-item-link:hover {
    background: rgba(255, 255, 255, .12) !important;
}

/* Het geopende onderdeel. Radzen hangt "rz-state-focused" of "active" aan de
   link van de huidige pagina; allebei afvangen. */
.beheer-nav .rz-navigation-item-link.active,
.beheer-nav .rz-navigation-item-link.rz-state-focused,
.beheer-nav .rz-navigation-item.rz-state-active > .rz-navigation-item-wrapper {
    background: rgba(255, 255, 255, .2) !important;
    font-weight: 600;
}

/* De focusrand. Dit is de vermoedelijke bron van het witte kadertje dat na
   een muisklik om je keuze blijft staan: Radzen zet zelf focus op het item
   dat je aanklikt, en sommige browsers rekenen dat mee als toetsenbordfocus.
   Na een klik dus weghalen, en voor toetsenbordgebruikers zachter maken. */
.beheer-nav .rz-navigation-item-link:focus,
.beheer-nav .rz-navigation-item-wrapper:focus {
    outline: none;
}

.beheer-nav .rz-navigation-item-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .55);
    outline-offset: -3px;
    border-radius: 4px;
}

/* Uitklapgroepen ---------------------------------------------------------
   Het uitgeklapte deel ligt als blok een niveau dieper (nav-donker), met een
   witte staaf op de regel waar je nu staat. De kop houdt het gewone blauw.

   LET OP - twee dingen verklaren waarom de selectors eruitzien zoals ze
   eruitzien:

   1. Radzen zet GEEN ul.rz-navigation-menu om het eerste niveau heen, alleen
      om de subitems. Een selector als ".rz-navigation-menu .rz-navigation-menu"
      raakt daardoor nooit iets. Wat wel werkt: een menu dat kind is van een
      item, is per definitie een submenu.

   2. Het blok bovenaan ("Radzen-menu in de blauwe balk") zet met !important
      elke achtergrond op transparent en elke box-shadow op none. Zonder
      !important hieronder wint dat, hoe ver deze regels er ook onder staan. */

/* De koppen: alleen items die een submenu hebben. Bewust geen achtergrond -
   die hoort bij wat eronder hangt, niet bij de kop zelf. */
.beheer-nav .rz-navigation-item:has(> .rz-navigation-menu) > .rz-navigation-item-wrapper {
    font-weight: 600;
    letter-spacing: .01em;
}

.beheer-nav .rz-navigation-item-icon-children {
    margin-left: auto;
    font-size: 18px;
    opacity: .7;
}

/* Het ingezonken blok. Bewust geen marge links en rechts en geen ronde
   hoeken: het loopt door tot beide randen, anders gaat het lijken op een
   kaartje dat los in de balk zweeft. */
.beheer-nav .rz-navigation-item > .rz-navigation-menu {
    position: relative;
    margin: 4px 0;
    padding: 4px 0;
    background: var(--nav-donker) !important;
}

/* Ook op de regels zelf: schildert de ul niet, dan doen deze het wel. */
.beheer-nav .rz-navigation-item > .rz-navigation-menu .rz-navigation-item-wrapper,
.beheer-nav .rz-navigation-item > .rz-navigation-menu .rz-navigation-item-link {
    background: var(--nav-donker) !important;
}

/* Hover en de huidige pagina moeten HIERNA komen, anders drukt het blok het
   oplichten weg en voelt het menu dood aan. Een slag lichter dan het blok. */
.beheer-nav .rz-navigation-item > .rz-navigation-menu .rz-navigation-item-wrapper:hover,
.beheer-nav .rz-navigation-item > .rz-navigation-menu .rz-navigation-item-link:hover {
    background: #0d5490 !important;
}

/* Hier stond een verticale ankerlijn langs de pictogrammen. Eruit gehaald:
   het ingezonken donkere blok laat de groepering al zien, en een tweede
   markering ernaast maakt het onrustig. De witte staaf op de regel waar je
   staat blijft wel - die wijst iets anders aan. */

/* De witte staaf op de huidige pagina. Op de regel en niet op de link: de
   link begint pas na de inspringing, en dan staat de staaf midden in het
   blok in plaats van tegen de rand. */
.beheer-nav .rz-navigation-item > .rz-navigation-menu .rz-navigation-item-wrapper:has(.active) {
    box-shadow: inset 3px 0 0 #fff !important;
    background: #0d5490 !important;
}

.beheer-nav .rz-navigation-item > .rz-navigation-menu .rz-navigation-item-link.active {
    background: #0d5490 !important;
    font-weight: 600;
}

.beheer-voet {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 13px;
}

.beheer-wie {
    display: block;
    color: rgba(255, 255, 255, .8);
}

.beheer-af {
    color: #fff;
    text-decoration: underline;
    margin-right: 12px;
}

/* Inhoud ----------------------------------------------------------------- */
.beheer-inhoud {
    /* Pakt alles wat de navigatiebalk overlaat. min-width: 0 is nodig, anders
       rekt een breed raster dit vak op in plaats van te gaan schuiven.
       Horizontaal schuiven gebeurt in .raster-blok en niet hier, anders krijg
       je twee schuifbalken onder elkaar. */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 24px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Het vangnet uit HoofdLayout. Niet over de volle breedte uitrekken: een
   foutmelding van een meter breed leest slecht en oogt alsof er meer stuk is
   dan er stuk is. */
.beheer-fout {
    max-width: 60ch;
    margin: 24px 0;
}

.beheer-inhoud h1 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
}

.beheer-inhoud .toelichting {
    margin: 0 0 20px;
    color: var(--gedempt);
    max-width: 70ch;
}

.balk {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 4px;
}

.balk label {
    display: block;
    font-size: 12px;
    color: var(--gedempt);
    margin-bottom: 3px;
}

.balk .duw {
    margin-left: auto;
}

.kaart {
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
}

.kaart h2 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
}

.leeg {
    padding: 28px;
    text-align: center;
    color: var(--gedempt);
    background: #fff;
    border: 1px dashed var(--rand);
    border-radius: 4px;
}

.kleurblok {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .15);
    vertical-align: -3px;
    margin-right: 6px;
}

.saldo-plus { color: #2F6B4F; font-weight: 600; }
.saldo-min  { color: #B4531F; font-weight: 600; }

.weekkop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.weekkop .titel {
    font-size: 16px;
    font-weight: 600;
}

.weekkop .knoppen {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

/* Startscherm: logo op dezelfde plek als in het oude hoofdmenu ------------ */

/* Geen min-height met calc((100vh / var(--schaal)) - 72px) meer. Die 72 was
   de opvulling van .beheer-inhoud plus wat marge, met de hand ingevuld: de
   vh-kant werd door de schaal gedeeld en die 72 niet, dus op 90% en 80%
   klopte het verschil niet meer en verscheen er een schuifbalk op een scherm
   waar niets te schuiven valt. .beheer-inhoud is een flexkolom, dus vullen
   kan gewoon zonder te rekenen - en dan is er ook niets meer dat per schaal
   bijgesteld moet worden. */
.start {
    display: grid;
    place-items: center;
    flex: 1 1 auto;
    min-height: 0;
    text-align: center;
}

.start img {
    width: 66%;
    max-width: 520px;
    opacity: .9;
}

@media (max-width: 900px) {
    .beheer { flex-direction: column; height: auto; overflow: visible; }
    .beheer-nav { flex: none; width: auto; }
    .beheer-greep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Rasters ----------------------------------------------------------------
   Geen scheidingslijnen tussen de cellen: die vechten met de rustige lijn
   van de rest van het scherm. Wat blijft is de omlijsting van het raster
   zelf en een kopregel met een eigen achtergrond - genoeg om de kop van de
   inhoud te scheiden zonder dat het een tabel uit een spreadsheet wordt. */

/* Het zoekvenster staat buiten .beheer-inhoud - het wordt door de layout
   getekend, in de bovenlaag van de browser - dus staat het er telkens naast
   vermeld. Zo ziet een raster er overal hetzelfde uit. */
.beheer-inhoud .rz-data-grid,
.beheer-inhoud .rz-datatable,
.zoekvenster .rz-data-grid,
.zoekvenster .rz-datatable {
    border: 1px solid var(--rand);
    border-radius: 4px;
    background: #fff;
}

.beheer-inhoud .rz-data-grid td,
.zoekvenster .rz-data-grid td {
    border: 0 !important;
}

.beheer-inhoud .rz-data-grid th,
.zoekvenster .rz-data-grid th {
    background: #f7f9fb;
    font-weight: 600;
    /* Geen border-bottom meer hier. Die stond met !important en hield de
       zwaardere kopstreep bij ingreep 5 verderop tegen: gelijke gewichten,
       maar deze regel had het uitroepteken en die daar niet. Alles wat met
       rasterlijnen te maken heeft staat nu bij elkaar in dat blok. */
    border: 0 !important;
}

/* De greep waarmee je een kolom sleept, tekent Radzen zelf als een dunne
   lijn. Hier stond een eigen versie van zeven pixels met een blauwe vulling;
   die is weg - alleen de aanwijzer blijft. */
.beheer-inhoud .rz-column-resizer,
.zoekvenster .rz-column-resizer {
    cursor: col-resize;
    /* Geen eigen breedte of vulling: het greepje zelf hoort onzichtbaar te
       zijn. Zonder deze regel erft het de rasterlijn en oogt het als een
       brede scheiding. */
    background: transparent;
    border: 0;
}

/* De lijn die tijdens het slepen meeloopt. Radzen tekent die als los element;
   hier krijgt hij een breedte van één pixel in het menublauw, zodat je precies
   ziet waar de kolomrand terechtkomt. */
.rz-column-resizer-helper,
.rz-grid-column-resizer-helper,
.rz-datatable-resizer-helper {
    width: 1px !important;
    border: 0 !important;
    background: var(--nav) !important;
}

/* Menu's in de balk en bij de kopregel ------------------------------------
   Getekend binnen het scherm zelf, niet in een laag van Radzen: die tekent de
   inhoud buiten het component en houdt verwijzingen vast naar blokken die al
   opnieuw getekend zijn. Dat liep na een paar keer openen vast. */

.menu-laag {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.menu-anker {
    position: relative;
    display: inline-flex;
}

.menu-paneel {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    min-width: 250px;
    padding: 8px 4px;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    color: var(--tekst);
    font-size: 14px;
}

/* Het kolommenu hangt rechtsboven aan het raster, net onder de kopregel. */
.menu-paneel.rechtsboven {
    top: 38px;
    left: auto;
    right: 10px;
}

/* Draagt het kolommenu; mag zelf niet krimpen, anders wordt het raster
   samengedrukt terwijl het zijn ingestelde hoogte wil houden. */
.raster-omhulsel {
    position: relative;
    flex: none;
    min-width: 0;
}

.menu-paneel .kop {

    padding: 4px 12px 8px;
    font-size: 12px;
    color: var(--gedempt);
}

.menu-paneel .regel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
}

.menu-paneel .regel:hover {
    background: var(--vlak);
}

.menu-paneel .scheiding {
    margin: 6px 0;
    border-top: 1px solid var(--rand);
}

/* ------------------------------------------------------------------------
   Onderhoudsscherm: balk, raster, sleepbare scheiding, invulblok, knoppen.
   Opzet zoals in het oude programma - het raster bovenin, de velden onderin.
   ------------------------------------------------------------------------ */

/* Vult de hoogte van het inhoudvak, zodat de knoppenbalk onderaan blijft
   staan in plaats van mee te schuiven. Geen vaste hoogte met 100vh meer:
   die klopt niet zodra de opvulling of een balk verandert. */
.scherm {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.scherm-balk {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid var(--rand);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}

.scherm-balk-scheiding {
    width: 1px;
    height: 22px;
    margin: 0 8px;
    background: var(--rand);
}

.scherm-balk-duw {
    flex: 1;
}

.scherm-balk-teller {
    margin-left: 16px;
    font-size: 12px;
    color: var(--gedempt);
    min-width: 80px;
    text-align: right;
}

/* Alleen een vak met een hoogte. Het schuiven laten we aan het raster zelf
   over: RadzenDataGrid heeft een eigen schuifgedeelte met een vastgezette
   kopregel, maar dat werkt alleen als het raster zelf een hoogte krijgt.
   Vandaar height:100% op de grid hieronder en overflow:hidden hier - twee
   schuifgebieden over elkaar leverde geen schuifbalk en vastzittende
   kolombreedtes op. */
.raster-blok {
    /* 0 1 auto: het raster begint op zijn ingestelde hoogte en mag INKRIMPEN
       als het venster daar te laag voor is, maar nooit groeien. Zonder de
       shrink hield het zijn volle hoogte vast op een laag scherm en werd het
       invulblok eronder tot niets platgedrukt - precies wat er op de laptop
       gebeurde en op het grote scherm niet. De ondergrens hieronder houdt er
       altijd een paar regels van over. */
    flex: 0 1 auto;
    height: var(--raster-hoogte, 320px);
    min-height: 120px;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rand);
}

.raster-blok .rz-data-grid,
.raster-blok .rz-datatable {
    height: 100%;
    border: 0;
    border-radius: 0;
}

/* Sleepbare scheiding tussen raster en invulblok. Het greepje in het midden
   maakt zichtbaar dat je hem kunt pakken. */
.hoogte-greep {
    position: relative;
    height: 10px;
    cursor: row-resize;
    background: var(--vlak);
    border-left: 1px solid var(--rand);
    border-right: 1px solid var(--rand);
    touch-action: none;
}

.hoogte-greep::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 4px;
    transform: translate(-50%, -50%);
    border-top: 1px solid #b9c2cd;
    border-bottom: 1px solid #b9c2cd;
}

.hoogte-greep:hover {
    background: #e6ebf1;
}

.scherm-onder {
    flex: 1;
    /* Een flexonderdeel dat mag schuiven heeft min-height: 0 nodig; anders
       groeit het mee met zijn inhoud en verdwijnt de knoppenbalk. */
    min-height: 0;
    min-width: 0;

    display: flex;
    flex-direction: column;

    /* SCHUIVEN, en dat is met opzet gewijzigd. Hier stond overflow: hidden,
       bedoeld voor de schermen MET tabbladen: daar mag het kopblok blijven
       staan en schuift alleen het tabblad. Maar die regel gold voor alle
       schermen, ook die zonder tabbladen - en daar was de uitkomst dat de
       velden onderaan gewoon werden afgekapt. Niet verborgen achter een
       schuifbalk, maar onbereikbaar: je kon het veld niet aanklikken en er
       ook niet met Tab naartoe, want er viel niets te schuiven.

       Artikelen liep daar als eerste tegenaan - tien velden onder elkaar
       zonder tabbladen, en op een laptopscherm passen die er niet allemaal.

       De schermen met tabbladen houden hun eigen gedrag: de regel
       .scherm-onder:has(> .rz-tabview) verderop zet overflow weer op hidden
       en laat het schuiven aan het tabbladpaneel over. */
    overflow: auto;

    padding: 16px;
    background: #fff;
    border: 1px solid var(--rand);
    border-top: 0;
}

.leeg-tekst {
    margin: 8px 0;
    color: var(--gedempt);
}

.veldkop {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 600;
}

/* Labels links, invoervelden op een vaste kolom - zoals in het oude scherm. */
.veld {
    display: flex;
    align-items: center;

    /* Vijf pixels: krap genoeg om er veel velden in kwijt te kunnen, ruim
       genoeg om twee regels nog als twee regels te lezen. Daaronder gaan de
       velden aan elkaar plakken. */
    margin-bottom: 5px;
}

/* Invoervelden iets lager dan Radzen standaard doet (38px).

   Bewust maar zes pixels eraf: het scheelt over een scherm vol velden een
   flinke hoogte, terwijl een veld nog steeds goed aan te klikken blijft en de
   tekst er niet in geklemd zit. Onder de 30 wordt het krap.

   De variabele --rz-input-height is waar Radzen zelf mee rekent; die zetten
   is netter dan per soort veld een hoogte opleggen, want dan gaan keuzelijsten
   en getalvelden vanzelf mee. */
/* .controlevenster staat er overal bij waar .scherm staat: de controleschermen
   voor order en CMR zijn dialoogvensters en geen pagina's, dus die klasse
   hebben ze niet. Zonder deze toevoeging gelden de maten hieronder daar niet:
   de Radzen-velden houden hun eigen 38 pixels, terwijl het zoekveld met zijn
   loepje op 32 blijft - en dan staat het debiteurveld zichtbaar lager dan de
   tekstvakken ernaast. */
.scherm,
.controlevenster,
.kopvelden,
.tabvelden {
    --rz-input-height: 32px;
}

/* Alle invoervelden in een onderhoudsscherm even hoog.

   Met !important en niet alleen via --rz-input-height: het thema van Radzen
   zet op sommige veldsoorten een eigen hoogte, en dan staan er in dezelfde
   kolom velden van 38 en van 32 pixels door elkaar. Dit is de enige plek waar
   die maat staat, dus één getal aanpassen volstaat.

   De opsomming is bewust breed: tekstvak, keuzelijst, getalveld, datumkiezer,
   automatisch aanvullen. Alles wat als één regel invoer oogt hoort even hoog
   te zijn. */
:is(.scherm, .controlevenster) .rz-textbox,
:is(.scherm, .controlevenster) .rz-inputtext,
:is(.scherm, .controlevenster) .rz-dropdown,
:is(.scherm, .controlevenster) .rz-multiselect,
:is(.scherm, .controlevenster) .rz-spinner,
:is(.scherm, .controlevenster) .rz-spinner-input,
:is(.scherm, .controlevenster) .rz-datepicker,
:is(.scherm, .controlevenster) .rz-datepicker input,
:is(.scherm, .controlevenster) .rz-autocomplete,
:is(.scherm, .controlevenster) .rz-autocomplete input,
:is(.scherm, .controlevenster) .zoekveld-kode {
    height: 32px !important;
    min-height: 32px !important;
    line-height: normal;
}

/* Behalve een tekstvak met meerdere regels - dat moet juist kunnen groeien. */
:is(.scherm, .controlevenster) textarea,
:is(.scherm, .controlevenster) textarea.rz-textarea {
    height: auto !important;
    min-height: 32px !important;
}

/* De Zoekveld-component is zelf een kolom met tussenruimte, bedoeld voor een
   foutmelding eronder. Die ruimte maakte zijn rij hoger dan de rijen ernaast -
   dat is de ongelijke afstand tussen de velden. */
:is(.scherm, .controlevenster) .zoekveld {
    gap: 0;
}

/* De regel met kodeveld en loepje even hoog als een gewoon invoerveld. De
   knop is iets hoger dan het veld ernaast en trok de hele rij mee omhoog,
   waardoor deze rij uit de pas liep met de velden erboven en eronder. */
:is(.scherm, .controlevenster) .zoekveld-regel {
    height: 32px;
}

/* box-sizing hoort erbij: zonder deze regel telt de browser de rand bij de
   hoogte op en wordt 32 stiekem 34 - net genoeg om uit de pas te lopen met de
   velden erboven en eronder.

   De breedte is genoeg voor een debiteurnummer of kode; de omschrijving staat
   ernaast of in het infoblok. */
:is(.scherm, .controlevenster) .zoekveld-kode {
    box-sizing: border-box;
    width: 6rem;
}

:is(.scherm, .controlevenster) .zoekveld-regel .rz-button {
    height: 32px;
    min-height: 32px;
    padding: 0 .5rem;
}

/* Kop vast, alleen het tabblad schuift.

   Het invulgedeelte schoof in zijn geheel, dus het debiteurnummer en de NAW
   verdwenen naar boven zodra je in een tabblad naar beneden ging. Juist die
   gegevens wil je in beeld houden terwijl je een tabblad invult.

   De :has()-regel zorgt dat dit alleen geldt voor schermen mét tabbladen; een
   onderhoudsscherm zonder tabbladen houdt zijn gewone schuifgedrag. */
.scherm-onder:has(> .rz-tabview) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scherm-onder > .kopvelden {
    flex: 0 0 auto;
}

.scherm-onder > .rz-tabview {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* min-height: 0 is hier weer nodig, anders groeit het paneel mee met zijn
   inhoud en schuift er niets. */
.scherm-onder .rz-tabview-nav {
    flex: 0 0 auto;
}

.scherm-onder .rz-tabview-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Tabbladkoppen op één regel houden.

   Met acht tabbladen valt de rij anders om naar twee regels, en dat kost
   precies de hoogte die we in het kopblok net gewonnen hebben. Past het niet,
   dan schuift de rij horizontaal in plaats van te vouwen.

   De kleinere letter en de krappere binnenmarge doen het meeste werk: daarmee
   past het op een normaal breed venster gewoon in één regel. */
.rz-tabview-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.rz-tabview-nav > li > a {
    white-space: nowrap;
    padding: .5rem .75rem;
    font-size: .8125rem;
}

/* De schuifbalk onder de tabbladen zou zelf ook weer hoogte kosten. */
.rz-tabview-nav::-webkit-scrollbar {
    height: 0;
}

/* De plakkende koprij van een Radzen-raster krijgt van Radzen een hoge
   z-index. Dat is nodig zodat hij boven de regels blijft bij het schuiven,
   maar hij kwam daardoor ook boven het zoekvenster te liggen.

   Twee is genoeg: boven de regels, onder alles wat een dialoog is. */
.rz-datatable-scrollable-header,
.rz-grid-table thead,
.rz-datatable thead {
    z-index: 2;
}

/* De bestandskiezer: bladeren door de mappen van de server. Twee kolommen,
   mappen links en bestanden rechts - zoals het bestandsvenster van Windows. */
.kiezer-pad {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    border-bottom: 1px solid #e3e8ec;
}

.kiezer-padtekst {
    font-size: .8125rem;
    color: #3c4753;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* min-height: 0 op de kolommen, anders groeien ze door met hun inhoud en
   verdwijnen de knoppen onder de onderrand. */
.kiezer-blokken {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.kiezer-mappen,
.kiezer-bestanden {
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 8px;
}

.kiezer-mappen {
    flex: 0 0 300px;
    border-right: 1px solid #e3e8ec;
}

.kiezer-bestanden {
    flex: 1 1 auto;
}

.kiezer-kolomkop {
    position: sticky;
    top: 0;
    padding: .4rem .75rem;
    background: #f7f9fb;
    border-bottom: 1px solid #e3e8ec;
    font-weight: 600;
    font-size: .8125rem;
}

.kiezer-regel {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .75rem;
    font-size: .8125rem;
    cursor: pointer;
    white-space: nowrap;
}

.kiezer-regel:hover {
    background: var(--vlak);
}

.kiezer-regel.aan {
    background: var(--rz-primary-lighter);
}

.kiezer-leeg {
    padding: .5rem .75rem;
    font-size: .8125rem;
    color: var(--gedempt);
    font-style: italic;
}

.kiezer-onder {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    border-top: 1px solid #e3e8ec;
}

.kiezer-onder > label {
    flex: 0 0 auto;
    font-size: .8125rem;
    color: #45505f;
}

.kiezer-filter {
    flex: 0 0 auto;
    font-size: .8125rem;
    color: var(--gedempt);
}

.kiezer-knoppen {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .6rem .75rem;
    border-top: 1px solid #e3e8ec;
}

/* ------------------------------------------------------------------
   Leesbaarheid van de rasters

   Vier ingrepen die het aflezen makkelijker maken. Ze staan bij elkaar zodat
   je er eentje kunt uitzetten zonder de rest te raken.

   Let op de dubbele selectors: Radzen gebruikt afhankelijk van de instellingen
   .rz-data-grid of .rz-datatable, en met maar één van de twee raak je de helft
   van de rasters niet.
   ------------------------------------------------------------------ */

/* 1. Om en om een lichte regel. Bij twaalf kolommen scheelt dat het verschil
      tussen je vinger op het scherm leggen en niet. */
.beheer-inhoud .rz-data-grid tbody tr:nth-child(even),
.beheer-inhoud .rz-datatable tbody tr:nth-child(even),
.zoekvenster .rz-data-grid tbody tr:nth-child(even),
.zoekvenster .rz-datatable tbody tr:nth-child(even) {
    background: #f4f7fa;
}

/* 1b. De kleur van een regel zit op de REGEL, nooit op de cellen. Het thema van
       Radzen geeft cellen een eigen achtergrond, en die dekt de regel eronder
       af: de streepjesregels hierboven kwamen daar nog doorheen omdat ze even
       licht zijn, maar een rijkleur uit het importscherm verdween erachter.

       Daar zit ook de reden dat dit geen kleur per cel is: het importscherm
       zet met RowRender een achtergrond op de regel om aan te geven dat een
       order en een CMR bij elkaar horen, en dat werkt alleen als de cellen
       doorzichtig zijn. */
.beheer-inhoud .rz-data-grid tbody td,
.beheer-inhoud .rz-datatable tbody td,
.zoekvenster .rz-data-grid tbody td,
.zoekvenster .rz-datatable tbody td {
    background: transparent !important;
}

/* 2. Scheiding tussen de kolommen, in de kop én in de regels. Twee pixels in
      een eigen, wat donkerder kleur: met één pixel in --rand loopt de lijn weg
      tegen de streepjesregels en zie je de kolommen niet meer uit elkaar.

      De laatste kolom krijgt hem niet: daar staat de omlijsting van het raster
      zelf al, en twee lijnen naast elkaar oogt als een dubbele rand. */
.beheer-inhoud .rz-data-grid td,
.beheer-inhoud .rz-data-grid th,
.beheer-inhoud .rz-datatable td,
.beheer-inhoud .rz-datatable th,
.zoekvenster .rz-data-grid td,
.zoekvenster .rz-data-grid th,
.zoekvenster .rz-datatable td,
.zoekvenster .rz-datatable th {
    border-right: 2px solid var(--rasterlijn) !important;
}

.beheer-inhoud .rz-data-grid td:last-child,
.beheer-inhoud .rz-data-grid th:last-child,
.beheer-inhoud .rz-datatable td:last-child,
.beheer-inhoud .rz-datatable th:last-child,
.zoekvenster .rz-data-grid td:last-child,
.zoekvenster .rz-data-grid th:last-child,
.zoekvenster .rz-datatable td:last-child,
.zoekvenster .rz-datatable th:last-child {
    border-right: 0 !important;
}

/* 3. Cijfers even breed. Zonder dit staan bedragen die rechts uitgelijnd zijn
      toch niet onder elkaar, omdat een 1 smaller is dan een 8. */
.beheer-inhoud .rz-data-grid td,
.beheer-inhoud .rz-datatable td,
.zoekvenster .rz-data-grid td,
.zoekvenster .rz-datatable td {
    font-variant-numeric: tabular-nums;
}

/* 4. De gekozen regel: een balk aan de linkerkant in plaats van alleen een
      tint. Zo zie je waar je staat, ook als je vanuit het invulblok
      terugkijkt.

      box-shadow en geen border-left: een rand verschuift de inhoud van de cel
      drie pixels, en dan springt de hele regel bij het aanwijzen. */
.beheer-inhoud .rz-data-grid tbody tr.rz-state-highlight td:first-child,
.beheer-inhoud .rz-data-grid tbody tr.rz-selected td:first-child,
.beheer-inhoud .rz-datatable tbody tr.rz-state-highlight td:first-child,
.zoekvenster .rz-data-grid tbody tr.rz-state-highlight td:first-child,
.zoekvenster .rz-data-grid tbody tr.rz-selected td:first-child {
    box-shadow: inset 3px 0 0 var(--nav);
}

/* 5. De filterregel als eigen strook onder de kolomkoppen, zoals in het oude
      programma. Zonder eigen achtergrond loopt hij over in de kopregel en zie
      je niet dat je er iets in kunt typen. */
.beheer-inhoud .rz-cell-filter,
.zoekvenster .rz-cell-filter {
    background: #eef2f6;
    padding: 3px 4px;
    border-top: 1px solid var(--rand);
}

/* De invoervakjes in die strook een echte rand geven - anders lijken het lege
   vlakken in plaats van velden. */
.beheer-inhoud .rz-cell-filter input,
.beheer-inhoud .rz-cell-filter .rz-textbox,
.zoekvenster .rz-cell-filter input,
.zoekvenster .rz-cell-filter .rz-textbox {
    background: #fff;
    border: 1px solid #c3ccd6 !important;
    border-radius: 3px;
    height: 24px !important;
    min-height: 24px !important;
    font-size: .8125rem;
}

/* De trechtertjes donkerder én zwaarder.

   font-weight doet hier niets: een icoonletter bestaat maar in één gewicht.
   text-stroke tekent er een randje omheen en dat is wat het wél dikker maakt.
   Meer dan een halve pixel en het trechtertje slibt dicht. */
.beheer-inhoud .rz-cell-filter .rzi,
.zoekvenster .rz-cell-filter .rzi,
.beheer-inhoud .rz-data-grid thead th .rz-cell-filter-trigger,
.zoekvenster .rz-data-grid thead th .rz-cell-filter-trigger,
.beheer-inhoud .rz-data-grid thead th .rz-grid-filter-icon,
.zoekvenster .rz-data-grid thead th .rz-grid-filter-icon {
    color: var(--tekst);
    opacity: 1;
    -webkit-text-stroke: .5px currentColor;
}

/* De kopregel zelf iets steviger, zodat kop en filterregel samen als één blok
   boven de gegevens staan. Drie pixels in de donkerste rasterkleur: dit is de
   enige lijn die kop en gegevens scheidt, dus die mag zwaarder zijn dan de
   scheidingen tussen de kolommen.

   Met !important, anders wint de border:0 die hierboven op alle randen van de
   kopcellen staat. */
.beheer-inhoud .rz-data-grid thead th,
.beheer-inhoud .rz-datatable thead th,
.zoekvenster .rz-data-grid thead th,
.zoekvenster .rz-datatable thead th {
    background: #e8edf2;
    border-bottom: 3px solid var(--rasterlijn-kop) !important;
}

/* Statuskleuren in het importoverzicht. */
.status-goed {
    color: #2F6B4F;
    font-weight: 600;
}

.status-let-op {
    color: #a97b1d;
}

/* Toelichting bovenaan een tabblad: iets wat de gebruiker moet weten voordat
   hij iets invult, zoals dat een printerlijst van de server komt. */
.melding-info {
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #eef4fa;
    border-left: 3px solid var(--nav);
    border-radius: 3px;
    font-size: .8125rem;
    color: #2b3542;
}

/* Infoblok: de tegenhanger van de infoblokken uit Wisej. Toont wat er bij een
   gekozen kode hoort - NAW van een debiteur, adres van een vervoerder.

   De achtergrondkleur wordt door het component zelf gezet, uit
   InfoBlokAchtergrondKleur in de instellingen. De kleur hieronder is alleen de
   terugval voor als daar niets staat. */
.infoblok {
    flex: 0 0 auto;
    min-width: 280px;
    padding: 8px 12px;
    background: #fdf6c3;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 4px;
    font-size: .8125rem;
    line-height: 1.45;
    color: #2b3542;
}

.infoblok-kop {
    font-weight: 600;
    margin-bottom: 4px;
}

.infoblok-leeg {
    color: #6b6a58;
    font-style: italic;
}

/* Schermschaal ------------------------------------------------------------ */

/* Alles kleiner tekenen, in te stellen bij Instellingen > Algemeen.

   OP HET WORTELELEMENT, en dat is de kern. Keuzelijsten, meldingen en
   dialoogvensters worden door Radzen en door de browser buiten de paginaboom
   getekend, boven alle andere lagen. Een zoom halverwege de pagina bereikt die
   niet: dan krimpen de velden wel en de meldingen niet, en dat oogt slordiger
   dan helemaal niet schalen.

   WAAROM ZOOM EN GEEN EIGEN MATEN: dit bestand staat vol vaste pixelmaten -
   invoerhoogte, labelbreedtes, kolombreedtes, letterhoogtes - en Radzen brengt
   er zelf nog een paar honderd mee. Zoom schaalt de hele opmaakboom in één
   keer.

   De klasse wordt gezet vanuit mpal.js (zetSchermschaal), aangeroepen door
   HoofdLayout. Dus alleen achter de aanmelding; de aanmeldpagina blijft op
   normale maat. */

:root {
    --schaal: 1;
}

.schaal-compact {
    --schaal: 0.9;
}

.schaal-extra-compact {
    --schaal: 0.8;
}

body {
    zoom: var(--schaal);
}

/* Viewport-eenheden schalen NIET mee met zoom: 100vh blijft de echte hoogte
   van het venster, en die wordt daarna nog eens met de schaal vermenigvuldigd.
   Bij 90% zou de applicatie dus 90% van de hoogte vullen met een strook eronder.
   Delen door de schaal maakt dat weer recht.

   Dit geldt voor elke plek waar vh of vw staat - dat zijn er maar twee: de
   omhulling hieronder en de vollescherm-laag van de dialoogvensters. */
.beheer {
    height: calc(100vh / var(--schaal));
}

/* De dialoogvensters (zoekvenster, bestandskiezer, documentvenster) zetten hun
   vollescherm-laag met een inline style, en inline wint van een gewone regel -
   vandaar !important. Het is de enige plek in dit bestand waar dat staat, en
   met reden: de maat hoort bij de schaal en niet bij het venster.

   Wat erin staat wordt niet aangeraakt; die vensters bepalen hun eigen maat in
   procenten van deze laag. */
dialog {
    width: calc(100vw / var(--schaal)) !important;
    height: calc(100vh / var(--schaal)) !important;
    max-width: calc(100vw / var(--schaal)) !important;
    max-height: calc(100vh / var(--schaal)) !important;
}

/* Kaders op een instellingenscherm - de tegenhanger van een groepsvak in
   Wisej. Twee naast elkaar, of één over de volle breedte met binnenin weer
   twee kolommen. Onder een smal scherm gaan ze onder elkaar. */
.kaderrij {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

@media (max-width: 1100px) {
    .kaderrij {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Twee of meer velden náást elkaar binnen één kader, in plaats van onder
   elkaar. Anders dan .kaderrij verdeelt deze de breedte NIET in gelijke
   kolommen: elk veld neemt de ruimte die het nodig heeft en de rest sluit er
   direct op aan. Dat is wat je wilt bij velden die bij elkaar horen maar
   ongelijk breed zijn - een prefix van twee posities naast een nummer. Met de
   kaderrij stond het tweede veld op een breed scherm halverwege het kader,
   met een gat ertussen.

   De velden erin krijgen margin-bottom:0 mee vanuit het scherm; de rij zorgt
   zelf voor de ruimte eronder. Past het niet, dan breekt de rij af. */
.veldrij {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 28px;
    margin-bottom: 5px;
}

.kader {
    margin-bottom: 12px;
    padding: 10px 14px 4px;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 4px;
}

/* Een kader binnen een kaderrij heeft zijn eigen marge niet nodig - de rij
   zorgt al voor de tussenruimte. */
.kaderrij > .kader {
    margin-bottom: 0;
}

.kader-kop {
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--rand);
    font-weight: 600;
    color: #2b3542;
}

/* Toelichting in een kaderkop, zoals "alleen voor dit werkstation". Kleiner en
   gedempt: het hoort bij de kop maar is geen deel van de naam. */
.kader-kop small {
    margin-left: 6px;
    font-weight: 400;
    font-size: 12px;
    color: var(--gedempt);
}

/* Kop boven een regelraster: naam links, knop rechts. */
.regelkop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 6px;
    font-weight: 600;
    color: #2b3542;
}

.regeltotaal {
    margin-top: 8px;
    text-align: right;
    color: #2b3542;
}

/* Toelichting naast een regelkop: gewicht en kleur van gewone tekst, zodat het
   naast de vetgedrukte kop geen tweede kop wordt. */
.regelkop-hint {
    font-weight: 400;
    font-size: 12px;
    color: var(--gedempt);
}

/* Bestandsnaamfilters ----------------------------------------------------
   Een filter is een opsomming: "Order", "-CMR". In de cel staan de waarden
   daarom los van elkaar in plaats van als één regel met verticale strepen -
   die vorm is voor de database, niet om te lezen. */

/* De cel vult de hele kolombreedte en heeft altijd hoogte, ook zonder
   waarden. Een span die om niets heen staat is nul pixels groot, en dan valt
   er niets te dubbelklikken - dat lijkt op een dubbelklik die niet werkt,
   terwijl je gewoon naast het vlak klikt. */
.filtercel {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;

    /* Zie .padcel: vaste hoogte en niet omslaan. Een klant met vier filters
       zou de regel anders twee keer zo hoog maken als die ernaast. Past het
       niet, dan schuift het weg onder het potloodje; de volledige inhoud staat
       in het bewerkvenster. */
    height: 20px;
    flex-wrap: nowrap;
    overflow: hidden;
    cursor: pointer;
    /* Dubbelklikken selecteert anders de tekst in de blokjes; dat blijft als
       blauwe vlek achter zodra het venster opengaat. */
    user-select: none;
}

.filterwaarde {
    padding: 1px 6px;
    border-radius: 9px;
    background: #e4eef6;
    border: 1px solid #c6d9e8;
    font-size: 11.5px;
    line-height: 16px;
    white-space: nowrap;
}

/* Meldingen van de parser bovenaan. Blokkades in rood: die houden het
   automatisch verwerken tegen en zijn de reden dat je hier zit. */
.controle-waarschuwing {
    padding: 8px 12px;
    background: #fdf6e3;
    border: 1px solid #e6d9b4;
    border-radius: 4px;
    font-size: 13px;
    color: #6b5a20;
}

.controle-waarschuwing ul {
    margin: 4px 0 0;
    padding-left: 20px;
}

.controle-waarschuwing li.blokkade {
    color: #8c2f2f;
    font-weight: 600;
}

.controle-bestand {
    font-size: 12.5px;
    color: var(--gedempt);
}

/* Kopregels van een controlescherm: een paar kolommen met velden naast
   elkaar, met het infoblok ertussen. Wrap zodat het op een laptopscherm
   netjes omslaat in plaats van te knellen. */
.controle-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.controle-kopkolom {
    display: flex;
    flex-direction: column;
}

/* Infoblok naast een keuzeveld: nummer, naam, plaats. Zoals KeuzeVeldHelper
   dat in Wisej naast de keuzelijst zet - je ziet meteen wie je gekozen hebt
   zonder het bestand erbij te halen. */
.controle-infoblok {
    min-width: 220px;
    padding: 6px 10px;
    background: #f7f9fb;
    border: 1px solid var(--rand);
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 17px;
}

.controle-infoblok-kop {
    margin-bottom: 2px;
    font-weight: 600;
    font-size: 12px;
    color: var(--gedempt);
}

.controle-hint {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--rand);
    color: var(--gedempt);
}

.controle-hint small {
    display: block;
    font-size: 11px;
}

/* DRIE adreskolommen naast elkaar, gelijk verdeeld - zo staan Losadres,
   Laadadres en Vervoerder in het orderscherm naast elkaar zoals in Wisej.
   Onder een smal scherm slaan ze om. */
.controle-adressen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1100px) {
    .controle-adressen {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* CMR: twee kolommen van gelijke breedte, links en rechts, met blokken
   onder elkaar. Vak 3 en 4 staan binnen de linkerkolom weer naast elkaar. */
.cmr-blok {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.cmr-kolom {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.cmr-rij {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1100px) {
    .cmr-blok,
    .cmr-rij {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Een blok dat de overgebleven hoogte van zijn kolom opvult, zodat links en
   rechts even lang zijn - dat is wat de Wisej-versie met uitgerekende
   hoogtes deed. */
.adresblok.groeit {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.adresblok.groeit .rz-textarea {
    flex: 1 1 auto;
}

.adresblok {
    min-width: 0;
    padding: 8px 10px;
    background: #f7f9fb;
    border: 1px solid var(--rand);
    border-radius: 4px;
}

.adresblok-kop {
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 13px;
}

.adresblok-kop small {
    display: block;
    font-weight: 400;
    font-size: 11.5px;
    color: var(--gedempt);
}

.adresregel {
    font-size: 12.5px;
    line-height: 17px;
}

.adresregel.gedempt {
    color: var(--gedempt);
}

/* Melding naast de knoppen waarom Opslaan nog niet kan. Links uitgelijnd en
   de knoppen naar rechts geduwd, zodat de reden naast de uitgezette knop
   staat en niet ergens boven in beeld. */
.controle-blokkade {
    margin-right: auto;
    font-size: 12.5px;
    color: #8c2f2f;
}

/* Afgeleide waarden - ons artikel, het bedrag - zijn niet te bewerken en
   horen er ook niet uit te zien alsof dat wel kan. */
.afgeleid {
    color: var(--gedempt);
}

/* Cel met een pad en een bladerknop erin. Het pad krimpt en krijgt drie
   puntjes als het niet past; de knop houdt zijn plek rechts. De volledige
   tekst staat in de tooltip. */
.padcel {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;

    /* Geen eigen hoogte en niet omslaan naar een tweede regel: een cel met een
       knop erin mag de regel niet hoger maken dan de regels ernaast. De hoogte
       komt van het raster, niet van wat er toevallig in de cel staat. */
    height: 20px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.padtekst {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.padcel:hover .padknop,
.rz-data-row:hover .padknop {
    opacity: 1;
}

/* Het potloodje rechts in de filtercel. Gedempt zolang je er niet bij bent,
   zodat het de waarden niet overstemt, en vol zichtbaar bij het aanwijzen. */
.filterknop,
.padknop {
    /* Maat vastgezet: een Radzen-knop is standaard hoger dan een rasterregel
       en rekt die dan op. */
    height: 20px;
    min-height: 20px;
    width: 22px;
    min-width: 0;
    padding: 0;
    margin-left: auto;
    opacity: .45;
}

.filtercel:hover .filterknop {
    opacity: 1;
}

/* Het icoon zelf ook kleiner. Een Radzen-icoon is 24px; in een knop van 20
   steekt het eruit en duwt het de regel alsnog omhoog. */
.filterknop .rzi,
.padknop .rzi,
.filterknop .rz-button-icon-only,
.padknop .rz-button-icon-only {
    font-size: 17px;
    line-height: 20px;
    width: auto;
    margin: 0;
}

/* Leeg filter: gestippeld en gedempt. Het zegt wat er gebeurt - alles telt
   mee - en het geeft de cel iets om aan te wijzen. */
.filterwaarde.leeg {
    background: transparent;
    border-style: dashed;
    border-color: #c8d1da;
    color: var(--gedempt);
    font-style: italic;
}

/* Uitsluitingen in rood en doorgestreept: die halen niets binnen maar gooien
   juist weg, en dat verschil zit in één minteken vooraan. Alleen kleur is te
   weinig verschil voor zoiets ingrijpends, vandaar ook de streep. */
.filterwaarde.uit {
    background: #fbe6e6;
    border-color: #e8bcbc;
    color: #8c2f2f;
    text-decoration: line-through;
}

/* De laag waarin een venster hangt.

   Vensterdienst geeft alleen door wát er getekend moet worden; plaatsen doet
   het venster zelf. Vandaar deze laag: over het hele scherm, gedimd, en het
   venster in het midden.

   z-index 60: boven de menupanelen van een onderhoudsscherm (50) en boven de
   plakkende koprij van een raster. */
.venster-laag,
.filtervenster-laag {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .35);
    padding: 20px;
}

/* Het venster zelf: wit vlak met een kader. Zonder achtergrond staat het
   doorzichtig over het scherm en lijkt het of er niets opent. */
.venster,
.filtervenster {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    min-width: 420px;
    max-width: 560px;
    max-height: calc(80vh / var(--schaal));

    /* Het venster schuift zelf niet: dat doet .venster-inhoud. Anders schuift
       de titelbalk mee weg zodra de inhoud niet past, en dan kun je het
       venster niet meer verslepen. */
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 4px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

/* De titelbalk is tegelijk de sleepgreep, vandaar de aanwijzer. Eigen
   achtergrond zodat zichtbaar is dat het een balk is en niet zomaar de
   eerste regel tekst. */
.venster-kop,
.filtervenster-kop {
    font-weight: 600;
    font-size: 15px;
}

/* Het filtervenster heeft geen aparte inhoudlaag; daar schuift het venster
   zelf. */
.filtervenster {
    overflow: auto;
}

/* Controlescherm van een order of CMR. Breder en hoger dan een gewoon
   venster: er staat een kop, drie adresblokken en een regelraster in.

   STAAT HIER MET OPZET NA .venster, en niet bij de rest van de
   controle-opmaak verderop. Beide selectors wegen even zwaar, dus de laatste
   wint - stond dit blok eerder in het bestand, dan kreeg het controlescherm
   de max-width van 560 pixels van een gewoon venster en werd het samengeknepen
   tot een strookje. */
.controlevenster {
    min-width: min(1560px, calc(96vw / var(--schaal)));
    max-width: calc(96vw / var(--schaal));
    max-height: calc(92vh / var(--schaal));
}

.controlevenster .venster-inhoud {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
}


.venster-kop {
    margin: -14px -16px 0;
    padding: 10px 16px;
    background: #eef2f6;
    border-bottom: 1px solid var(--rand);
    border-radius: 4px 4px 0 0;
    cursor: move;
    user-select: none;
}

/* Knoppenbalk van een venster. Zelfde opbouw als .scherm-balk in de
   onderhoudsschermen: wat het scherm zelf aanlevert links, het sluiticoon
   uiterst rechts. */
.venster-balk {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 -16px;
    padding: 4px 10px;
    background: #fff;
    border-bottom: 1px solid var(--rand);
}

/* Het hoekje rechtsonder om het formaat te wijzigen. Twee schuine streepjes,
   het gebaar dat elk venster gebruikt - een tekstlabel zou hier meer ruimte
   kosten dan de greep zelf. */
.venster-greep {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 50%, #b9c3cf 50%, #b9c3cf 62%, transparent 62%,
                        transparent 74%, #b9c3cf 74%, #b9c3cf 86%, transparent 86%);
}

.venster-knoppen,
.filtervenster-knoppen {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding-top: 4px;
    border-top: 1px solid #e3e8ec;
}

.venster-inhoud {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.venster-inhoud p {
    margin: 0 0 8px;
}

/* Het sluiticoon iets losser van de rest, zodat het niet per ongeluk wordt
   aangetikt als je de knop ernaast bedoelt. */
.balkknop-sluiten {
    margin-left: 6px;
}

/* Opsomming van bestandsnamen in een melding. Schuift zelf als het er veel
   zijn, zodat de sluitknop nooit onder de onderrand verdwijnt. */
.meldinglijst {
    margin: 0;
    padding-left: 20px;
    max-height: 240px;
    overflow-y: auto;
    font-size: 12.5px;
    color: #3c4753;
}

.meldinglijst li {
    margin-bottom: 2px;
}

.filtervenster-uitleg p {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--gedempt);
}

/* Wat het filter straks doet, in dezelfde vorm als in de gridcel. Zo zie je
   voor het opslaan al of dat minteken op de goede regel staat. */
.filtervenster-samenvatting {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 20px;
}

.filtervenster-leeg {
    font-size: 12px;
    color: var(--gedempt);
    font-style: italic;
}

/* Kopblok van een onderhoudsscherm in kolommen naast elkaar.

   align-items: flex-start is wat de kolommen bovenaan gelijk laat beginnen -
   zonder dat rekt de korte kolom mee met de lange en zweven de velden in het
   midden. */
.kopvelden {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
}

/* Een tweede regel kopvelden onder de eerste. Iets meer lucht dan tussen twee
   gewone velden: hier begint een nieuwe groep, en zonder die ruimte plakt hij
   aan het blok erboven. */
.kopvelden-vervolg {
    margin-top: 8px;
}

.kopkolom {
    display: flex;
    flex-direction: column;
}

/* Smallere labels dan in de tabbladen: in het kopblok staan korte namen en
   elke pixel breedte scheelt of de tweede kolom er nog naast past. */
.kopvelden .veld > label {
    width: 130px;
}

.veld > label {
    width: 170px;
    flex: none;
    font-size: 13px;
    color: #45505f;
}

.vinkjes {
    display: flex;
    align-items: center;
}

.scherm-knoppen {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    background: #fff;
    border: 1px solid var(--rand);
    border-top: 0;
    border-radius: 0 0 4px 4px;
}

@media (max-width: 900px) {
    .scherm { flex: none; }
    .raster-blok { height: 320px; }
    .hoogte-greep { display: none; }
}

/* ------------------------------------------------------------------------
   Knopkleuren
   Het materiaalthema van Radzen gebruikt een fel blauw en een schel rood die
   naast het menublauw uit het oude programma schreeuwen. Hier worden de
   themakleuren teruggebracht tot dezelfde intensiteit: het menublauw als
   hoofdkleur, een gedempt leisteengrijs ernaast, en het roodbruin uit het
   kleurenschema van de urensoorten voor verwijderen.
   ------------------------------------------------------------------------ */
:root {
    --rz-primary: #005A9E;
    --rz-primary-light: #2f7fbb;
    --rz-primary-dark: #00477e;
    --rz-primary-lighter: #e4eef6;
    --rz-on-primary: #ffffff;

    --rz-secondary: #4a5b6d;
    --rz-secondary-light: #6a7b8d;
    --rz-secondary-dark: #37475a;
    --rz-on-secondary: #ffffff;

    --rz-danger: #B4531F;
    --rz-danger-light: #c76b39;
    --rz-danger-dark: #8f4118;
    --rz-on-danger: #ffffff;

    --rz-info: #3E6EA8;
    --rz-success: #2F6B4F;
    --rz-warning: #a97b1d;
}

/* De knoppen in de bovenbalk zijn alleen een pictogram. Het thema tekent die
   in een lichtgrijs dat op wit vrijwel onzichtbaar is. */
.scherm-balk .balkknop .rzi,
.scherm-balk .balkknop .rz-button-icon-only,
.scherm-balk .balkknop i {
    color: #1c2530 !important;
    font-size: 22px;
}

.scherm-balk .balkknop {
    padding: 4px 6px;
    min-width: 0;
}

.scherm-balk .balkknop:hover {
    background: var(--vlak) !important;
}

.scherm-balk .balkknop:disabled .rzi,
.scherm-balk .balkknop[disabled] .rzi,
.scherm-balk .balkknop.rz-state-disabled .rzi {
    color: #9aa4b0 !important;
}

/* Melding dat er een filter aanstaat. Zonder deze balk opent iemand morgen
   het scherm, ziet drie van de twaalf regels en denkt dat er gegevens weg
   zijn. */
.filterbalk {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fdf6e3;
    border: 1px solid #e6d9b4;
    border-bottom: 0;
    font-size: 13px;
    color: #6b5a20;
}

.filterbalk .rzi {
    font-size: 18px;
}

/* ------------------------------------------------------------------------
   Lipje om de navigatiebalk weg te klappen
   Blijft altijd zichtbaar; als de balk weg is schuift het naar de zijkant
   van het scherm, want anders kun je niet meer terug.
   ------------------------------------------------------------------------ */
/* Zweeft boven de indeling (fixed), zodat het geen onderdeel van de rij is
   en de inhoud niet kan verschuiven. */
.nav-lip {
    position: fixed;
    top: 50%;
    left: var(--nav-breedte, 280px);
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 22px;
    height: 54px;
    padding: 0;
    display: grid;
    place-items: center;
    background: var(--nav);
    color: #fff;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s ease;
}

.nav-lip:hover {
    opacity: 1;
}

.nav-lip .rzi {
    font-size: 18px;
    color: #fff;
}

.beheer.ingeklapt .beheer-nav {
    display: none;
}

.beheer.ingeklapt .nav-lip {
    left: 0;
    transform: translate(0, -50%);
    border-radius: 0 4px 4px 0;
    opacity: 1;
}

/* Knop met de drie puntjes in de kopregel van het raster. */
.beheer-inhoud .kopknop,
.zoekvenster .kopknop {
    padding: 2px 4px;
    min-width: 0;
}

.beheer-inhoud .kopknop .rzi,
.zoekvenster .kopknop .rzi {
    color: #1c2530 !important;
    font-size: 20px;
}

.beheer-inhoud .kopknop:hover,
.zoekvenster .kopknop:hover {
    background: rgba(0, 0, 0, .06) !important;
}

/* Uitleg onder een keuze in het filtermenu. */
.menu-paneel .regel small {
    display: block;
    font-size: 11.5px;
    color: var(--gedempt);
}

.menu-paneel .regel.aan {
    background: var(--rz-primary-lighter, #e4eef6);
}

.menu-paneel .regel .rzi {
    font-size: 19px;
    color: #45505f;
}


/* Korte uitleg naast of onder een veld. */
.veldtoelichting {
    margin-left: 10px;
    font-size: 12px;
    color: var(--gedempt);
}

.veldtoelichting.los {
    display: block;
    margin: 14px 0 0;
    max-width: 70ch;
    line-height: 1.5;
}

/* Verkeerslogboek --------------------------------------------------------- */

/* Een aanvraag die misging valt meteen op tussen de rest. */
.beheer-inhoud .verkeer-fout td {
    background: #fdecec !important;
    color: #8f4118;
}

/* Dit scherm heeft een vaste scheiding: er valt hier niets in te vullen, dus
   de hoogte hoeft niet versleepbaar te zijn. */
.hoogte-greep-vast {
    height: 10px;
    background: var(--vlak);
    border-left: 1px solid var(--rand);
    border-right: 1px solid var(--rand);
}

.scherm-onder .veld > span {
    font-size: 14px;
}

/* Kolommen verslepen zonder dat de buren meebewegen -----------------------

   Radzen tekent zijn raster met table-layout: fixed en width: 100%. De som
   van de kolommen moet daardoor altijd precies het raster vullen: maak je één
   kolom breder, dan wordt die ruimte bij de kolommen ERNA weggehaald. Dat is
   wat je ziet als je in het importscherm de bestandskolom oprekt.

   Met width: auto telt de tabel zijn kolommen gewoon op. Wordt dat samen
   breder dan het raster, dan schuift het horizontaal - en blijven de kolommen
   staan waar je ze hebt gezet. min-width houdt het raster wel de volle
   breedte vullen zolang de kolommen samen smaller zijn; zonder die regel
   staat het raster op een breed scherm half zo breed als het vak eromheen.

   Alleen op rasters met de klasse raster-breed, niet op alle rasters: de
   onderhoudsschermen hebben smalle rasters die juist netjes moeten uitvullen
   binnen hun blok. */
.raster-breed .rz-grid-table,
.raster-breed .rz-datatable-table {
    width: auto;
    min-width: 100%;
}

/* Het schuifgedeelte van Radzen mag dan ook echt horizontaal schuiven. */
.raster-breed .rz-datatable-scrollable-body,
.raster-breed .rz-datatable-scrollable-header,
.raster-breed .rz-data-grid-data {
    overflow-x: auto;
}