:root { --bs-border-color-translucent: rgba(0, 0, 0, 0); /* Brand-palet (huisstijl verzuimteam.nl). Navy = primaire "chrome": tabs, sidebar-actief, links, dxButtons, focus. Magenta = primaire actieknoppen (CTA), zoals "ziekmelden"/opslaan. Navy is donker genoeg voor tekst op wit, dus --vt-primary mag ook als tekstkleur; --vt-primary-dark is de hover/active-variant. */ --vt-primary: #004289; --vt-primary-dark: #00315f; --vt-cta: #a80059; --vt-cta-dark: #8f004c; /* "Soft" CTA-stijl voor plekken waar veel actieknoppen bij elkaar staan, zoals het Acties-blok in de dossier-uitklap: lichtroze vlak met de volle CTA-kleur als tekstkleur en een dun roze randje. Het contrast zit zo in de tekst i.p.v. het vlak (niet schreeuwerig, niet flets); hover vult naar de gewone CTA met witte tekst. */ --vt-cta-soft-bg: #f7d9ea; --vt-cta-soft-border: #e7a8cc; --vt-tint: #dce2f2; --vt-tint-hover: #cdd9f0; --vt-tint-pink: #fdecfb; --vt-border: #b9cae8; --vt-border-hover: #9bb6e0; --vt-text-strong: #00315f; /* Linkkleur voor entiteits-chips in grids (namen/bedrijfsnamen): gedempt lichtblauw, op hover iets donkerder. */ --vt-chip-link: #1f6fb2; --vt-chip-link-hover: #14517f; --blue-color: var(--vt-primary); /* Her-accent DevExtreme naar de huisstijl-navy. dx.light.css (gedeeld met V1) zet --dx-color-primary:#337ab7 op :root; stylev2.css laadt later én alleen in V2, dus deze override maakt dxButtons/pager/checkboxes/focus navy zonder V1 te raken. */ --dx-color-primary: var(--vt-primary); --bs-border-radius: 1rem; --bs-accordion-active-color: black; --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03); --bs-primary-text-emphasis: black; --swiper-navigation-color: var(--vt-primary-dark); --swiper-pagination-color: var(--vt-primary-dark); --swiper-navigation-size: 20px; } html, body { margin: 0px; padding: 0px; height: 100%; font-family: 'Maven Pro'; } /* Bootstrap zet bij een open modal overflow:hidden (plus padding-right voor de scrollbalk) op . Met de vaste body-hoogte van 100% hierboven kapte dat de pagina af op schermhoogte: het document kromp, de scrollpositie viel terug naar 0 en na het sluiten stond je bovenaan (zichtbaar op lange pagina's zoals het medisch dossier). De body-hoogte zelf moet 100% blijven: #layout-wrapper (h-100) en de flex-vulling van .main-content rekenen ermee, anders blijft een korte pagina (bv. Handleidingen) onderaan wit. Daarom de scroll-lock van Bootstrap uitschakelen: de pagina mag achter een modal blijven scrollen, de backdrop dekt hem toch af. Een regel op body.modal-open alleen is te laat: Bootstrap zet de overflow vóór die klasse en forceert ertussen een layout. */ body { overflow: visible !important; } body.modal-open { padding-right: 0 !important; } /* Vangnet tegen ongewenste horizontale paginascroll. Op de root (niet op een tussenliggende wrapper) zodat position:sticky grid-koppen blijven werken: het document zelf blijft de verticale scroll-container. */ html { overflow-x: hidden; } /* Heel V2 standaard op 80% weergeven, gelijk aan browserzoom 80% — de UI is op 100% te ruim opgezet. Eigen browserzoom van de gebruiker komt hier bovenop (wie zelf nog op 80% staat ziet effectief 64% en kan terug naar 100%). Alleen V2: V1 laadt stylev2.css niet. ⚠️ De zoom staat BEWUST op de app-containers en niet op . Onder CSS-zoom levert de browser twee meetlatten op: getBoundingClientRect() geeft VISUELE px (geschaald), offsetWidth/Height/Top en scrollHeight geven LAYOUT px (ongeschaald). Elke JS-bibliotheek die met de ene meet en in de andere schrijft, plaatst zichzelf er 25% naast. Met de zoom op trof dat álles wat zich zelf positioneert; drie families liepen er achtereenvolgens op stuk (jQuery UI datepicker, DevExtreme-overlays, Bootstrap/Popper) en elke nieuwe bibliotheek zou volgen. Overlays worden door al die bibliotheken in gerenderd. Door alleen de app-containers te zoomen vallen ze buiten de zoom, meten en schrijven ze in dezelfde meetlat, en klopt hun positionering per constructie — zonder één regel compensatie. Bewust aanvaarde prijs: overlays tekenen op 100% en zijn dus ruimer dan de pagina eronder. Gevolg: --vt-zoom-comp is 1 en de calc()-compensaties in de views zijn no-ops geworden. Ze blijven staan zodat één waarde hier de schaal bepaalt; zet je de zoom ooit terug op , dan hoort deze variabele weer op 1.25. */ #layout-wrapper, .vt-wa-balk, .vt-vv-fab, .vt-vv-panel { zoom: 0.8; } html { --vt-zoom-comp: 1; } /* Dropdown-popups (TagBox/SelectBox e.d.): DevExtreme meet de lijsthoogte onder de zoom 0.8× te klein en zet die als vaste hoogte, waardoor de onderste items wegvallen. Laat CSS de hoogte bepalen: natuurlijke hoogte, begrensd op ~15 rijen, met native scroll voor langere lijsten. */ .dx-dropdowneditor-overlay .dx-overlay-content, .dx-dropdowneditor-overlay .dx-popup-content, .dx-dropdowneditor-overlay .dx-list { height: auto !important; /* !important: DevExtreme schrijft zelf een (onder zoom te kleine) inline max-height op de overlay-content; zonder !important wint die en clipt de lijst alsnog (o.a. locatiekeuze Afspraken/Plan). */ max-height: 400px !important; } .dx-dropdowneditor-overlay .dx-scrollable-container { max-height: 392px; overflow-y: auto; } /* Header-filter-popup (kolomfilter in grids): DevExtreme geeft de popup-content de vólle popup-hoogte in plaats van hoogte minus de knoppenbalk — nog een gevolg van de zoom-meetfout. De OK/Annuleren-balk viel daardoor buiten de content, die `overflow: clip` heeft, en was onbereikbaar bij lange waardenlijsten. Flex-kolom: knoppenbalk houdt zijn eigen hoogte, de lijst krijgt de rest en scrollt. */ .dx-header-filter-menu .dx-overlay-content { display: flex !important; flex-direction: column; overflow: visible !important; } .dx-header-filter-menu .dx-overlay-content > .dx-popup-content { flex: 1 1 auto; min-height: 0; height: auto !important; } .dx-header-filter-menu .dx-overlay-content > .dx-toolbar { flex: 0 0 auto; } .dx-header-filter-menu .dx-list { height: 100% !important; max-height: 100% !important; } /* Uitzondering: de DevExtreme Scheduler (Agenda) rekent celbreedtes uit in pixels en mixt daarbij gemeten (gezoomde) en CSS- (ongezoomde) waarden. Onder zoom ≠ 1 lopen kop- en bodykolommen daardoor tot ~15px uit de pas. Terugschalen naar netto 100% (0.8 × 1.25 = 1) houdt zijn metingen kloppend; de scheduler oogt daardoor iets groter dan de rest van de 80%-UI. */ .dx-scheduler { zoom: 1.25; } /* Bootstrap-modals: de backdrop zet Bootstrap zelf in (buiten de zoom), maar de .modal zelf staat in de view en dus binnen #layout-wrapper (zoom 0.8). Een position:fixed element meet daar 100vw als 80% van het scherm, waardoor de dialoog links van het midden hangt. Terugschalen naar netto 100% (0.8 × 1.25) centreert hem weer; de inhoud oogt dan 100%, net als de DevExtreme-overlays. (Stond hier eerder mét calc(... * var(--vt-zoom-comp)) omdat de zoom toen op zat en de backdrop maar 80%×80% dekte — het "zwarte vlak linksboven".) */ .modal, .modal-backdrop { width: 100vw; height: 100vh; } #layout-wrapper .modal { zoom: 1.25; } h1, h2, h3, h4, h5, h6 { font-family: "Raleway", sans-serif; /* Raleway toont standaard oldstyle-cijfers, waardoor losse cijfers in een kop hoog/laag 'dansen' (bv. factuurnummer 2026S00009). Forceer lining + tabular figures zodat alle cijfers gelijke hoogte en breedte krijgen. */ font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; } /* DevExtreme-componenten (grids, editors, dropdowns, popups) erven standaard de systeemfont uit dx.light.css (.dx-widget → Segoe UI op Windows). Forceer Maven Pro zodat de waarden in grids hetzelfde lettertype hebben als de rest van V2. Staat in stylev2.css (laadt ná dx.light.css én alleen in V2), dus V1 blijft ongemoeid. */ .dx-widget, .dx-widget input, .dx-widget textarea { font-family: 'Maven Pro', sans-serif; } header { background-color: white; padding: 10px; margin-left: 10px; margin-right: 10px; } .dropdown-item:active { background: var(--blue-color); } .header-item.menu-btn { background: var(--blue-color); border: 2px solid var(--blue-color); color: white; margin: 0px; } .header-item.menu-btn:hover { border: 2px solid var(--blue-color); color: var(--blue-color); background: white; } #user_menu { padding: 0px; margin-left: 5px; } .vertical-menu { background: #f5f5f5; width: 250px; /* Vaste sidebar naast de content (flex-row). flex-basis volgt width, zodat de desktop icon-collapse (app.css: .vertical-collpsed .vertical-menu width:70px) blijft werken. Op mobiel wordt dit overschreven door de off-canvas media query. */ flex: 0 0 auto; /* Smooth in-/uitklappen: animeer de breedtewissel 250px <-> 70px. */ transition: width 0.3s ease; } .card-header { padding: 20px; } .card-header i { color: var(--blue-color); } /* Kaart-header met een actieknop (bijv. "+") rechts uitgelijnd op dezelfde hoogte als de titel, i.p.v. de DevExtreme-toolbarknop op een eigen regel. */ .card-header-actie { display: flex; align-items: center; justify-content: space-between; } .card-header-actie h5 { margin: 0; } /* Magenta accentlijn (CTA, 2px) onder de kolomkoppen van álle V2-datagrids, op dezelfde plek: tussen de kopregel en de eerste datarij. Zelfde huisstijl-accent als de bovenrand van de uitklap-rij in het verzuimgrid (.masterdetail-row). !important + extra .dx-datagrid in de selector omdat dx.light.css én de globale ".dx-datagrid .dx-row > td { border-color: tint !important }"-regel de cel-randen forceren; deze selector is specifieker zodat de magenta onderrand wint. */ .dx-datagrid .dx-datagrid-headers .dx-header-row > td { border-bottom: 2px solid var(--vt-cta) !important; } .btn-card-toevoegen { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: var(--vt-cta); cursor: pointer; transition: background 0.15s ease-in-out; } .btn-card-toevoegen:hover { background: var(--vt-cta-dark); } .card-header-actie .btn-card-toevoegen i { color: #fff; } .vertical-menu ul { list-style: none; margin: 0px; padding: 0px; } .vertical-menu ul li i { margin-right: 5px; } .vertical-menu ul li a { width: 100%; display: block; text-decoration: none; /* Tijdens de uitklap-animatie is het menu nog smal terwijl de labels al zichtbaar zijn; nowrap voorkomt dat tekst dan even omklapt. */ white-space: nowrap; } .vertical-menu li { /*margin: 0px; padding: 2px;*/ /* min-height i.p.v. een vaste height: een menu-item met een uitgeklapt submenu (Financieel) moet kunnen meegroeien zodat het submenu de items eronder naar beneden duwt i.p.v. eroverheen te vallen. */ min-height: 50px; /*display: flex; align-items: center; padding-left: 20px;*/ border-top: 1px solid white; } /* De toggle-rij (Financieel) en losse menu-items houden een vaste klikbare rijhoogte; submenu-items idem. */ .vertical-menu #side-menu > li > a { min-height: 50px; display: flex; align-items: center; } .vertical-menu #side-menu ul li { height: 50px; } .vertical-menu li:hover { background: #DADADA; } .vertical-menu ul li, .vertical-menu ul li a { color: #3d3d3d; cursor: pointer; } .vertical-menu ul li.mm-active, .vertical-menu ul li.mm-active a { color: var(--vt-primary-dark); } .vertical-menu ul li.mm-active { border-left: solid 5px var(--blue-color); /* padding-left: 15px;*/ } .vertical-menu a { text-decoration: none; } .vertical-menu a svg path { fill: #3d3d3d; } .vertical-menu a span { color: #3d3d3d; } .vertical-menu li { border-bottom: solid 1px white; } .vertical-menu li:hover { background: #DADADA; color: #3d3d3d !important; } .vertical-menu a:hover span { color: #3d3d3d !important; } .vertical-menu a:hover svg path { fill: #3d3d3d; } .vertical-menu li.mm-active, .vertical-menu li.mm-active a span { color: var(--vt-primary-dark) !important; } .vertical-menu li.mm-active { border-left: 10px solid var(--blue-color); background: #ececec; } .vertical-menu ul li.mm-active a { padding-left: calc(1.5rem - 10px); } /* Uitklap-chevron van menu-items met submenu (bv. "Financieel"). metisMenu zet de chevron standaard op rotate(-45deg) = wijst naar links. Wij laten 'm in dichtgeklapte staat naar onder wijzen (dropdown-affordance) en bij openklappen naar boven draaien. Alleen scoped op het V2-menu; raakt V1 niet. */ .vertical-menu .metismenu .has-arrow::after { transform: rotate(-135deg) translate(0, -50%); } .vertical-menu .metismenu .mm-active > .has-arrow::after, .vertical-menu .metismenu .has-arrow[aria-expanded="true"]::after { transform: rotate(45deg) translate(0, -50%); } .main-content { background: var(--vt-tint); padding-top: 40px; /* Vult de ruimte naast de sidebar. min-width:0 is cruciaal: zonder dit weigert een flex-item kleiner te worden dan z'n inhoud, waardoor brede grids/tabellen de hele pagina verbreden. Nu scrollen die binnen hun eigen vak. width:auto neutraliseert de Bootstrap w-100-class op dit element. */ flex: 1 1 0%; min-width: 0; width: auto !important; } header .user { font-size: 16px; font-weight: bold; } header .company { font-size: 14px; } .nav-link.active { background-color: var(--blue-color) !important; } /* Sectie-/filternavigatie (.nav-pills) op de overzichtspagina's én de tabbladen (.nav-tabs) op de detailpagina's delen dezelfde huisstijl: lichte teal-blokken, actieve pill/tab in de primaire teal met witte tekst. Centraal gedefinieerd zodat alle overzichten en detailtabs identiek ogen (voorheen stond dit als gedupliceerd