html, body { height: 100%; margin: 0; }
.shell { display: flex; flex-direction: column; height: 100vh; }
.topbar {
display: flex; align-items: center; gap: 12px;
height: 52px; padding: 0 16px; flex: 0 0 auto;
border-bottom: 1px solid var(--bs-border-color);
background: var(--bs-body-bg);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--bs-body-color); }
/* Toegelaten klant-identiteit (i.o.m. ADM One 01/08): het topbar-logo links MAG het klantlogo blijven — samen
met het login-venster en de favicon de énige drie plekken. De brein-mask kleurt via currentColor (= de
brand-linkkleur, var(--bs-body-color)), dus token-onafhankelijk (geen --damc-ink) én zichtbaar in licht én
donker thema. De gebrande AVATAR blijft wél weg (gekleurd shell-element, geen logo) → standaard-avatar. */
.topbar .brand > svg.adm-icon { display: none; }
.topbar .brand::before {
content: "";
width: 28px; height: 28px; flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url("/img/damc-logo.png") center / contain no-repeat;
mask: url("/img/damc-logo.png") center / contain no-repeat;
}
.topbar .brand > span { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .95rem; }
.shell-body { display: flex; flex: 1; min-height: 0; }
/* Zijbalk-achtergrond/rechterlijn + het actieve-item-uiterlijk (nu strak/4px) zijn fundering-eigendom
(AppKit 0.99 — Dominique koos onze afgebakend-paneel-look als vloot-standaard). Lokale overrides laten vallen;
enkel de layout-basis (breedte/padding/gap) blijft app-kant. */
.sidebar { flex: 0 0 220px; overflow-y: auto; padding: 12px 8px; }
.nav-menu { display: flex; flex-direction: column; gap: 2px; }
.nav-menu .nav-link {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
color: var(--bs-body-color); text-decoration: none; font-size: .92rem;
}
/* ⚠️ min-height: 0 is niet optioneel. Zonder die regel krimpt dit flex-item niet onder zijn inhoudshoogte:
het contentgebied groeit voorbij de viewport en de HELE pagina scrollt in plaats van enkel dit vak.
Zet ze op .content ZELF — enkel op .content-inner (zoals de :has-regels verderop) repareert de binnenkant
en laat de buitenkant stuk. */
.content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
/* De max-width is een bewuste LEESCAP voor formulieren en tekstpagina's: regels van 2000px lezen niet.
Pagina's die de ruimte moeten vullen (grid, tweekoloms-werkscherm) ontsnappen eraan via de
:has(.adm-grid-fill)- en :has(.adm-page-fill)-regels verderop. Schrap deze cap dus niet — voeg een
uitzondering toe als je een nieuw vol-formaat patroon bouwt. */
.content-inner { padding: 20px 24px; max-width: 1100px; }
#blazor-error-ui {
display: none; position: fixed; bottom: 0; left: 0; right: 0;
padding: 10px 16px; background: #fee; border-top: 1px solid #f5c2c7; z-index: 1100;
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss { margin-left: 12px; cursor: pointer; }
/* De-brand (01/08, i.o.m. ADM One): het volledige merk-:root-blok (--damc-ink, de --bs-primary/--adm-accent/
--dx-color-primary-overrides, de --dxds-primary/-color-ramp naar zwart) én de .btn-primary-override zijn
verwijderd. Alles valt nu terug op de standaard AppKit-accent. Functionele STATUSkleuren (timeline-dots,
vervallen-badges, bellijst-urgentie, funnel-categorieën, planbord-/beschikbaarheidspaletten, statusbadges)
blijven bewust staan — dat is semantiek, geen huisstijl. */
/* === AdmGrid (overgezet uit ADM One — playbook §6) ============================================ */
/* AdmGrid: uniforme toolbar (zoek + kolomselector + export) boven elke grid. */
.adm-grid-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.adm-grid-bar-spacer {
flex: 1 1 auto;
}
.adm-grid-search {
width: 300px;
max-width: 100%;
}
.adm-grid-empty {
padding: 18px;
color: var(--bs-secondary-color);
font-style: italic;
}
/* Laadfase: grid verbergen (layout wordt nog toegepast) en een spinner tonen, zodat de gebruiker
geen herformattering ("flikker") ziet. */
.adm-grid-body { position: relative; }
.adm-grid-veil { visibility: hidden; }
.adm-grid-loading {
position: absolute;
inset: 0;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.adm-spinner {
width: 34px;
height: 34px;
border: 3px solid var(--dx-color-border, #e0e0e0);
border-top-color: var(--dx-color-primary, #2563eb);
border-radius: 50%;
animation: adm-spin .7s linear infinite;
}
@keyframes adm-spin { to { transform: rotate(360deg); } }
/* FullHeight: de grid vult de beschikbare hoogte (toolbar vast, grid scrollt intern). Het INTERNE fill-gedrag
(`.adm-grid-fill` zelf + `.adm-grid-body`/`.adm-grid-bar` erin) is fundering-eigendom sinds AppKit 0.101.10-11
(data-scroll + vaste pager, geen clip). Hier blijft enkel de koppeling aan de app-layout-wrapper
(.content/.content-inner — die kent de fundering niet). */
.content:has(.adm-grid-fill) {
display: flex;
flex-direction: column;
}
.content:has(.adm-grid-fill) > .content-inner {
flex: 1;
min-height: 0;
max-width: none; /* grid-pagina's vullen de volle breedte, niet de 1100px-leescap */
display: flex;
flex-direction: column;
}
.content:has(.adm-grid-fill) > .dxbl-btn {
align-self: flex-start;
}
/* Vol-hoogte WERKSCHERM (bv. boom links + grid rechts). `.adm-grid-fill` regelt enkel de grid zelf; dit
regelt de pagina eromheen, zodat de rij op de VIEWPORT eindigt in plaats van op zijn inhoud.
Gebruik: `adm-page-fill` op de buitenste div, `adm-fill-row` op de rij, `adm-fill-panel` op een paneel
dat zijn kolom moet vullen. Ontsnapt automatisch aan de 1100px-leescap.
(Vorm overgenomen uit de Damc-sessie, 21/07 — zie de opmerkingen hieronder voor de valkuilen.) */
.content:has(.adm-page-fill) { display: flex; flex-direction: column; overflow: hidden; }
.content:has(.adm-page-fill) > .content-inner {
flex: 1; min-height: 0; max-width: none;
display: flex; flex-direction: column; overflow: hidden;
}
/* Volle-BREEDTE zonder de flex/hoogte-machinerie hierboven: heft enkel de 1100px-leescap op, de pagina
scrollt gewoon verticaal. Voor overzichts-/dashboardpagina's waar tegels en kolommen breed mogen spreiden
(het dashboard heeft geen intern scrollend grid, dus adm-grid-fill/adm-page-fill zijn hier te zwaar). */
.content:has(.adm-wide) > .content-inner { max-width: none; }
/* Groepskop boven een blok hub-tegels (bv. /beheer). Klein, grijs, uppercase — zoals in ADM One. */
.hub-group-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bs-secondary-color);
font-weight: 600;
margin: 22px 0 10px;
}
.hub-group-label:first-of-type { margin-top: 8px; }
/* Enkel vanaf lg. Daaronder stapelen de kolommen en hoort de pagina gewoon te scrollen: twee panelen van
elk een halve schermhoogte is op een telefoon onbruikbaar. */
@media (min-width: 992px) {
.adm-page-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Zet `adm-fill-row` op de rij die moet meerekken — bewust een eigen klasse en niet elke `.row`,
zodat een gewone rij ergens op de pagina niet ongewild flex wordt.
`nowrap` in plaats van een hoogte op de kolommen: met wrap rekken die op tot hun INHOUD (een grid
van 296 rijen wordt dan 1345px hoog in een vak van 669px), en een expliciete hoogte zet de
verticale gutter er 16px naast. */
.adm-page-fill .adm-fill-row { flex: 1; min-height: 0; flex-wrap: nowrap; }
.adm-page-fill .adm-fill-row > [class*="col-"] { display: flex; flex-direction: column; min-height: 0; }
/* Paneel dat zijn kolom vult; de inhoud scrollt intern. */
.adm-page-fill .adm-fill-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.adm-page-fill .adm-fill-panel > .card-body { flex: 1; min-height: 0; overflow: auto; }
}
.adm-grid-fill .dxbl-grid { flex: 1; min-height: 0; }
/* Rijmarkering (selectie = vulling + balk, focus = outline) zit sinds Adm.AppKit 0.19.0 in de fundering
(adm-shell.css). De lokale :focus-within-interim die hier stond is daarmee overbodig en weggehaald — hem
laten staan zou met !important de nieuwe focus-outline overschrijven en het onderscheid weer platslaan. */
/* Login-scherm: stijl verhuisd naar de scoped LoginPanel.razor.css in CreditSoft.AppKit.Web. */
/* Nav: gebruiker + afmelden onderaan. */
/* De flex-groei van de spacer (footer-items onderaan pinnen) is fundering-eigendom sinds AppKit 0.99.2
(net als de zijbalk-bg + nav-radius). Enkel de minimale gutter blijft app-kant. */
.nav-spacer { min-height: 12px; }
.nav-user { padding: 8px 12px; font-size: .82rem; color: var(--bs-secondary-color); font-weight: 600; }
/* .nav-section-typografie verhuisd naar de fundering (AppKit 0.97, i.o.m. ADM One — Dominique koos onze
klein/vet/hoofdletters-stijl als vloot-standaard). Lokale override verwijderd. */
/* === Release notes ("Wat is nieuw") ============================================================ */
.release-notes { max-width: 760px; }
.rn-item { padding: 16px 0; border-bottom: 1px solid var(--bs-border-color); }
.rn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rn-version { font-weight: 700; }
.rn-date { color: var(--bs-secondary-color); font-size: .85rem; }
.rn-cat { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
padding: 2px 8px; border-radius: 10px; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.rn-title { font-size: 1.05rem; margin: 2px 0 6px; }
.rn-body { color: var(--bs-body-color); }
.rn-body :last-child { margin-bottom: 0; }
.rn-body img { max-width: 100%; height: auto; border-radius: 6px; }
/* === DAMC-specifiek (niet in de scaffold-template) ==================================================== */
/* Categorieboom (catalogus): beheeracties pas bij hover. Bij 117 takken staat er anders evenveel knopwerk
als tekst, en dan leest het niet meer als een boom. Ze blijven in de DOM (focus-within) voor toetsenbord. */
.cat-node .cat-actions { visibility: hidden; }
.cat-node:hover .cat-actions,
.cat-node:focus-within .cat-actions { visibility: visible; }
.cat-node:hover { background: var(--bs-tertiary-bg); }
/* Onder lg (waar .adm-page-fill niet grijpt): de categorieboom mag niet het hele scherm opeten vóór je de
lijst ziet. Kandidaat om naar de template te tillen als meer tweekoloms-schermen dit nodig hebben. */
@media (max-width: 991.98px) {
.adm-fill-panel > .card-body { max-height: 40vh; overflow: auto; }
}
/* Gesaniteerde legacy-rich-text (notities/intake): compacte, thema-neutrale weergave. De inline-styles
zijn er al uit gesaniteerd; dit tempert enkel de blok-marges zodat een reeks
's niet uit elkaar valt. */
.adm-richtext > *:first-child { margin-top: 0; }
.adm-richtext > *:last-child { margin-bottom: 0; }
.adm-richtext p, .adm-richtext div { margin: 0 0 .25rem; }
.adm-richtext ul, .adm-richtext ol { margin: 0 0 .25rem 1.25rem; padding-left: .5rem; }
.adm-richtext a { word-break: break-word; }
/* Lange tekst/tabellen/afbeeldingen mogen geen horizontale scroll forceren in een smal tabblad. */
.adm-richtext { overflow-wrap: break-word; }
.adm-richtext img { max-width: 100%; height: auto; }
.adm-richtext table { display: block; max-width: 100%; overflow-x: auto; }
/* ── DAMC-login: tweeluik (slogan links, fundering-LoginPanel rechts) ──────────────────────────────────
De auth zit in het fundering-LoginPanel (het rendert .login-page); hier enkel de layout eromheen. De
login-* stijlen staan globaal in adm-shell.css, dus overschrijfbaar. */
.damc-login { display: flex; min-height: 100vh; }
/* DAMC-merkpaneel links: donker monochroom (huisstijl damc.be) met het witte brein-logo + wordmark +
tagline. Uppercase, dun en ruim gespatieerd — echoot hun typografie zonder de licentie-font te vereisen. */
.damc-login-slogan {
flex: 1 1 46%;
background: #1e1f1d; /* login blijft bewust gebrand (enige toegelaten branding) — geen token-afhankelijkheid */
color: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1.75rem; padding: 2rem; text-align: center;
}
.damc-login-logo { width: 150px; height: auto; }
.damc-login-title { font-size: 2.4rem; font-weight: 300; letter-spacing: .18em; text-transform: uppercase; margin: 0; }
.damc-login-tagline {
font-size: .78rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
color: rgba(255, 255, 255, .65); margin: 0; max-width: 24rem; line-height: 1.7;
}
/* .login-page (fundering) = de rechter helft; behoudt zijn eigen centrering van de kaart. */
.damc-login .login-page { flex: 1 1 54%; background: var(--bs-body-bg); }
@media (max-width: 767.98px) {
.damc-login { flex-direction: column; }
.damc-login-slogan {
flex: 0 0 32vh; border-right: none; border-bottom: 1px solid var(--bs-border-color);
}
.damc-login .login-page { min-height: auto; }
}
/* De kerncijfer-tegels (AdmMetric/AdmMetricGroup) + hun kleuren komen sinds AppKit 0.29.0 uit de fundering
(adm-shell.css). Enkel de dashboard-panelen hieronder zijn app-eigen. */
/* ── Dashboard-panelen (actiegericht: wat wacht op mij). ── */
.dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
/* Verticale ruimte tussen opeenvolgende panel-rijen (bv. grafieken boven, lijsten eronder). */
.dash-panels + .dash-panels { margin-top: 14px; }
.dash-panel { border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 12px 14px; background: var(--bs-body-bg); }
.dash-panel-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
/* Telling pal NA de titel (geen margin-left:auto — anders duwt ze samen met de ms-auto van "alle" naar het
midden). Enkel "alle" krijgt de auto-marge en gaat rechts staan. */
.dash-panel-count { background: var(--bs-secondary-bg); border-radius: 999px; padding: 0 .5rem; font-size: .78rem; }
.dash-panel-empty { color: var(--bs-secondary-color); font-size: .85rem; padding: .5rem 0; }
.dash-panel-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-top: 1px solid var(--bs-border-color); text-decoration: none; color: inherit; }
.dash-panel-row:first-of-type { border-top: 0; }
.dash-panel-row:hover:not(.dash-panel-row-static) { background: var(--bs-secondary-bg); border-radius: 6px; }
.dash-panel-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-panel-row-meta { font-size: .78rem; color: var(--bs-secondary-color); flex: 0 0 auto; }
.dash-panel-badge { font-size: .72rem; background: var(--bs-secondary-bg); border-radius: 6px; padding: 1px 6px; flex: 0 0 auto; }
.dash-panel-badge.is-overdue { background: color-mix(in srgb, #dc2626 15%, transparent); color: #dc2626; font-weight: 600; }
/* Tijdlijn-stippen per gebeurtenissoort. */
.tl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--bs-secondary-color); }
.tl-intake { background: #7c3aed; }
.tl-activity { background: #0d9488; }
.tl-quote { background: #2563eb; }
.tl-invoice { background: #059669; }
.tl-creditnote { background: #dc2626; }
.tl-project { background: #d97706; }
/* Echte tijdlijn (enkel op de relatiefiche, niet de dashboard-panelen): een verticaal streepje verbindt de
bolletjes. Het streepje loopt van elk bolletje naar het vorige; op de eerste rij verborgen. */
/* Geen horizontale scheidingslijn tussen de rijen: enkel het verticale tijdlijn-streepje verbindt ze. */
.tl-list .dash-panel-row { position: relative; border-top: 0; }
.tl-list .dash-panel-row::before {
content: ""; position: absolute; left: 8.5px; transform: translateX(-50%);
bottom: 50%; height: 100%; width: 2px; background: var(--bs-border-color); z-index: 0;
}
.tl-list .dash-panel-row:first-of-type::before { display: none; }
.tl-list .tl-dot { position: relative; z-index: 1; }
/* KBO-opzoekknop naast het btw-nummer: compacte, vierkante icoonknop die even hoog is als het tekstvak
(align-items-stretch op de rij) en het vergrootglas gecentreerd houdt. */
.kbo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
padding-left: .6rem;
padding-right: .6rem;
}
/* Compacte icoonknoppen in grid-actiekolommen (bv. /taken): potlood/vinkje, gecentreerd, weinig padding
zodat twee knoppen ruim naast elkaar passen. */
.grid-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .15rem .3rem;
}
/* Houdt de actie-icoontjes op één regel naast elkaar in een smalle kolom. */
.grid-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; }
/* Kleine teller naast het documenten-icoon (bv. aantal bijlagen). */
.ga-count { font-size: .7rem; font-weight: 600; margin-left: 1px; vertical-align: top; }
/* Gekleurd actie-icoon: het €-icoon "factureer relatie" in het groen (geld/inkomsten). De DevExpress-icoon-SVG
volgt currentColor, dus een color op de knop kleurt het icoon mee. */
.grid-action-btn.ga-invoice { color: var(--bs-success, #198754); }
/* DAMC is enkel Nederlandstalig: verberg de taalkeuze (Nederlands/Français) in het voorkeuren-zijpaneel.
Gekoppeld aan de /culture/set-links (stabiel endpoint) zodat enkel dát blok verdwijnt; de overige
voorkeuren (accentkleur, grootte, 2FA…) blijven. Foundation-shell rendert .prefs-section per blok. */
.prefs-section:has(a[href*="/culture/set"]) { display: none; }
/* Relatiefiche (≥lg): de fiche vult de viewport en de twee kolommen scrollen INTERN, zodat de linkerkaart en
de tab-headers (en de snelkoppeling bovenaan een tab) altijd zichtbaar blijven. Onder lg valt alles terug op
normale pagina-scroll (de kolommen stapelen dan).
⚠️ DIT BLOK IS GEEN OVERBODIGE HOOGTE-TRUC — nagemeten 23/08/2026, en die nota staat hier omdat de
changelog van AppKit 0.262.0 het tegendeel suggereert ("een tab die zijn eigen hoogte-truc had, kan die nu
missen"). Dat klopt voor de tabstrook en niet voor de rest.
De proef: alle regels hieronder live uitgezet in de browser. De fiche bleef 90 % van de viewport vullen en
de voet bleef in beeld — de fundering doet dat inderdaad zelf. Maar de SCROLLER verhuisde van `.fiche-left`
naar `.content`: de twee kolommen scrollen dan samen en de tabkoppen lopen uit beeld.
De reden is eenvoudig: de fundering vult de hoogte van de FICHE, maar ze kent onze tweekolomsindeling niet.
Wie dit blok weghaalt omdat het op een oude truc lijkt, verliest de interne kolomscroll — en dat merk je
pas op een fiche met een lange linkerkolom. */
@media (min-width: 992px) {
.content:has(.fiche-fill) { display: flex; flex-direction: column; overflow: hidden; }
.content:has(.fiche-fill) > .content-inner {
flex: 1; min-height: 0; max-width: none; display: flex; flex-direction: column; overflow: hidden;
}
.fiche-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* ⚠️ `margin-inline: 0` neutraliseert de NEGATIEVE marges van Bootstrap's `.row`. Zonder dit is de row
8 px breder dan haar ouder, en omdat de fundering sinds 0.262.0 `overflow-y: auto` op de fiche zet,
maakt de CSS-spec van `overflow-x` dan automatisch óók `auto` — resultaat: een horizontale schuifbalk
van 8 px onder ÉLK tabblad.
Gemeten 24/08/2026 op alle negen tabbladen van de relatiefiche: overal 8 px. Het stond er waarschijnlijk
al lang en was onzichtbaar tot die overflow-regel erbij kwam.
⚠️ AppKit 0.280.0 repareert exact dit, maar voor `.adm-fiche-tabinhoud > .row`. Onze row zit in
`.fiche-fill` en valt daarbuiten — dezelfde fout, onze kant. */
.fiche-fill > .fiche-row { flex: 1; min-height: 0; flex-wrap: nowrap; margin-inline: 0; }
.fiche-fill .fiche-row > [class*="col-"] { min-height: 0; display: flex; flex-direction: column; }
/* Linkerkaart: vult de kolom en scrollt intern indien lang. */
.fiche-left { overflow: auto; }
/* Rechterkolom: de hoogte van de tabstrook komt sinds 23/08/2026 van `.adm-fiche-tabstrip` uit de
fundering. Hier stonden drie eigen regels die hetzelfde deden; ze zijn weg na een proef in de browser
waarbij ze uitgezet werden en de fundering-klasse erop kwam — 90 % vulling, geen paginascroll, zelfde
enkele scroller, voet in beeld, óók ná een echte tabwissel (twee panelen in de DOM). Identiek. */
/* ⚠️ Deze BLIJFT, want de fundering levert hem niet: de snelkoppeling bovenaan een tab (de
"Nieuwe …"-knop = eerste .mb-2 in de tab-inhoud) plakt bovenaan tijdens het scrollen. */
.fiche-tabs .p-2 > .mb-2:first-child {
position: sticky; top: 0; z-index: 2;
background: var(--bs-body-bg); margin: 0; padding: 8px 0;
}
}
/* Deals-bord (kanban). Kolommen als lanes, kaarten met hover. Volle breedte + interne kolomscroll vanaf lg;
onder lg gewone pagina-scroll met horizontaal schuivende kolommen. */
/* ⚠️ Deze klassen heten nog "deals" maar het scherm Deals bestaat sinds 19/08/2026 niet meer. Ze bedienen
nu het KOLOMMENBORD van het Overzicht, dat ze altijd al deelde. Niet weggooien bij het opruimen van Deals;
hernoemen mag, maar dan in één beweging met Overzicht.razor. */
.deals-board { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.deals-col {
flex: 1 1 0; min-width: 220px; min-height: 0; display: flex; flex-direction: column;
background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 12px;
}
.deals-col-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 10px 12px 8px; }
/* padding-top geeft de kaarten ruimte om bij hover op te tillen (translateY + schaduw) zonder dat de
overflow-y-container de bovenrand afsnijdt. */
.deals-col-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 10px; }
.deals-card {
display: block; text-decoration: none; background: var(--bs-body-bg);
border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 10px 12px;
transition: box-shadow .12s ease, transform .08s ease, border-color .12s ease;
}
.deals-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: var(--bs-secondary-color); transform: translateY(-1px); }
.deals-card-title { font-weight: 600; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deals-card-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--bs-secondary-color); margin-top: 2px; }
.deals-card-value { font-weight: 600; color: var(--bs-body-color); margin-top: 6px; }
.deals-col-empty { color: var(--bs-secondary-color); font-size: .8rem; font-style: italic; padding: 6px 4px; }
@media (min-width: 992px) {
.content:has(.deals-board) { display: flex; flex-direction: column; overflow: hidden; }
.content:has(.deals-board) > .content-inner {
flex: 1; min-height: 0; max-width: none; display: flex; flex-direction: column; overflow: hidden;
}
.deals-board { flex: 1; min-height: 0; }
}
/* De-brand (01/08, i.o.m. ADM One): toevoeg-/Nieuw-acties zijn vloot-breed NEUTRAAL (geen accent) — zelfde
look als de AppKit-grid-add ("+ Toevoegen": transparant, body-kleur, gewicht 400, hover = tertiary-bg).
Zowel de globale topbar-actie als de page-`+`/"Nieuw"-knoppen (via .adm-add). */
.topbar-new-task.dxbl-btn {
border-radius: 999px; font-weight: 400; padding: .32rem .85rem; font-size: .875rem;
background: transparent; border-color: transparent; box-shadow: none; color: var(--bs-body-color);
}
.topbar-new-task.dxbl-btn:hover { background: var(--bs-tertiary-bg, rgba(0,0,0,.05)); border-color: transparent; color: var(--bs-body-color); }
.dxbl-btn.adm-add {
background: transparent; border-color: transparent; box-shadow: none;
color: var(--bs-body-color); font-weight: 400;
}
.dxbl-btn.adm-add:hover { background: var(--bs-tertiary-bg, rgba(0,0,0,.05)); border-color: transparent; color: var(--bs-body-color); }
/* Mailsjablonen: volle-hoogte 2-luiken-lay-out (≥lg). Links: sjabloon/taal → variabelen → editor (vult de rest);
rechts: het voorbeeld dat intern scrollt. Onder lg valt alles terug op normale pagina-flow. */
@media (min-width: 992px) {
.content:has(.mail-fill) { display: flex; flex-direction: column; overflow: hidden; }
.content:has(.mail-fill) > .content-inner {
flex: 1; min-height: 0; max-width: none; display: flex; flex-direction: column; overflow: hidden;
}
.mail-fill { flex: 1; min-height: 0; display: flex; gap: .75rem; }
/* min-width:0 is cruciaal: zonder duwt de brede DxHtmlEditor-toolbar het linkerluik breder dan z'n
flex-basis en verdwijnt het rechterluik. */
.mail-left { flex: 0 0 58%; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .75rem; }
.mail-right { flex: 1; min-width: 0; min-height: 0; }
.mail-editor-card { flex: 1; min-width: 0; min-height: 0; }
.mail-editor-card > .card-body { min-width: 0; min-height: 0; }
}
/* Budget & cashflow: posten als rijen, maanden als kolommen (legacy-oriëntatie).
De eerste kolom (postnaam) blijft plakken bij horizontaal scrollen. */
.bud-table th.bud-key,
.bud-table td.bud-key {
position: sticky;
left: 0;
z-index: 1;
background: var(--bs-body-bg);
white-space: nowrap;
text-align: left;
}
/* ── Verkooptrechter (Opvolging leads) ─────────────────────────────────────────
Verticale trechter: posten (fasen) onder elkaar, kaarten per fase. Categorie-
kleuren voor de linker-ruggengraat; kind-badges (personal/business) als tint. */
/* Sticky kop: titel + filters + 'Nieuwe lead' blijven bovenaan plakken terwijl de trechter eronder scrolt.
Breekt met negatieve marges uit de content-inner-padding (20px 24px) → volle breedte, dekt scrollende
inhoud af. Blijft onder de zijlade/popups (die staan op 1040+). */
.tr-header {
position: sticky;
top: 0;
z-index: 15;
background: var(--bs-body-bg);
margin: -20px -24px 12px;
padding: 14px 24px 10px;
border-bottom: 1px solid var(--bs-border-color);
}
.tr-funnel {
--tr-lead:#64748b; --tr-kmg:#c77d10; --tr-offer:#4f46e5; --tr-won:#177245; --tr-run:#0f766e;
}
.tr-lane { display:grid; grid-template-columns:200px 1fr; gap:16px; position:relative; padding:8px 0; }
.tr-lane-left { position:relative; padding-left:24px; display:flex; flex-direction:column; justify-content:center; min-height:70px; }
.tr-lane-left::before { content:""; position:absolute; left:5px; top:-8px; bottom:-8px; width:2px; background:var(--bs-border-color, #d4d9e2); }
.tr-lane:first-child .tr-lane-left::before { top:50%; }
.tr-lane:last-child .tr-lane-left::before { bottom:50%; }
.tr-dot { position:absolute; left:0; top:50%; transform:translateY(-50%); width:13px; height:13px; border-radius:50%;
background:var(--bs-body-bg,#fff); border:3px solid var(--cat); box-shadow:0 0 0 3px var(--bs-body-bg,#fff); }
.tr-stage { font-size:13.5px; font-weight:650; }
.tr-count { display:inline-block; min-width:19px; padding:0 6px; height:18px; line-height:18px; text-align:center;
font-size:11px; font-weight:700; border-radius:9px; background:var(--cat); color:#fff; margin-left:2px; }
.tr-cat { font-size:11px; color:var(--bs-secondary-color,#8a909d); margin-top:2px; }
.tr-cards { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; }
.tr-card { flex:0 0 226px; background:var(--bs-body-bg,#fff); border:1px solid var(--bs-border-color,#e5e8ef);
border-left:3px solid var(--cat); border-radius:11px; padding:11px 12px; cursor:pointer;
box-shadow:0 1px 2px rgba(20,22,28,.05); transition:transform .12s, box-shadow .12s; }
.tr-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(20,22,28,.13); }
.tr-card:focus-visible { outline:2px solid #4f46e5; outline-offset:2px; }
.tr-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.tr-name { font-size:13px; font-weight:650; line-height:1.25; }
.tr-sub { font-size:11.5px; color:var(--bs-secondary-color,#8a909d); margin-top:1px; }
.tr-ava { flex:0 0 auto; width:25px; height:25px; border-radius:50%; display:grid; place-items:center;
font-size:10px; font-weight:700; background:var(--bs-tertiary-bg,#f1f3f6); color:var(--bs-secondary-color,#5b616e);
border:1px solid var(--bs-border-color,#d4d9e2); }
.tr-kind { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em; padding:2px 8px; border-radius:6px; margin-top:8px; }
.tr-kind.k-personal { background:rgba(14,116,144,.14); color:#0e7490; }
.tr-kind.k-business { background:rgba(79,70,229,.14); color:#4f46e5; }
.tr-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:9px; font-size:11.5px; color:var(--bs-secondary-color,#565c69); }
.tr-val { font-weight:700; color:var(--bs-body-color); font-variant-numeric:tabular-nums; }
.tr-follow { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 8px; border-radius:7px; }
.tr-follow.warn { background:rgba(198,40,40,.14); color:#c62828; }
.tr-follow.plan { background:rgba(23,114,69,.14); color:#177245; }
.tr-flag { display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding-top:7px; width:100%;
border-top:1px dashed var(--bs-border-color,#e5e8ef); font-size:10.5px; color:var(--bs-secondary-color,#8a909d); }
.tr-empty { flex:0 0 226px; border:1.5px dashed var(--bs-border-color,#d4d9e2); border-radius:11px; display:grid;
place-items:center; color:var(--bs-secondary-color,#8a909d); font-size:11.5px; padding:14px; text-align:center; }
@media (max-width:720px){ .tr-lane { grid-template-columns:1fr; gap:6px; } .tr-lane-left::before { display:none; } }
/* Sleep-toestand: de opgepakte kaart dimt, de doelfase licht op. */
.tr-card[draggable="true"] { cursor:grab; }
.tr-card.dragging { opacity:.45; }
/* Sleep-doel: markeer de HELE fase-rij (label links + rand rond de kaarten). Zo blijft ze zichtbaar, ook
wanneer de rij vol kaarten staat en de achtergrond erachter niet te zien is. */
.tr-lane.dragover .tr-lane-left { background:color-mix(in srgb, var(--cat) 14%, transparent); border-radius:10px; }
.tr-lane.dragover .tr-stage { color:var(--cat); }
.tr-lane.dragover .tr-dot { box-shadow:0 0 0 4px color-mix(in srgb, var(--cat) 30%, transparent); }
.tr-lane.dragover .tr-cards { box-shadow:inset 0 0 0 2px var(--cat); border-radius:12px;
background:color-mix(in srgb, var(--cat) 6%, transparent); }
/* Slide-out zijlade voor het trajectdetail (rechts). */
/* z-index bewust ONDER de DevExpress-popuplaag (dxbl-popup-cell = 1050): anders rendert een dropdown/kalender
die je ín de lade opent ERACHTER — onzichtbaar en onklikbaar. Lade boven de scrim, beide onder 1050. */
.tr-scrim { position:fixed; inset:0; background:rgba(15,17,22,.42); opacity:0; pointer-events:none;
transition:opacity .2s; z-index:1040; }
.tr-scrim.open { opacity:1; pointer-events:auto; }
/* Animeer met 'right' (NIET transform): een transform op de zijlade maakt een nieuw containing block voor
position:fixed-kinderen, waardoor DevExpress-popups (dropdown/kalender) buiten beeld belanden. */
.tr-drawer { position:fixed; top:0; right:-460px; height:100vh; width:min(420px,94vw); background:var(--bs-body-bg,#fff);
border-left:1px solid var(--bs-border-color,#e5e8ef); box-shadow:-8px 0 26px rgba(20,22,28,.16);
z-index:1045; transition:right .24s cubic-bezier(.4,0,.2,1);
display:flex; flex-direction:column; }
.tr-drawer.open { right:0; }
.tr-drawer-head { padding:16px 18px; border-bottom:1px solid var(--bs-border-color,#e5e8ef);
display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tr-drawer-body { padding:16px 18px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:16px; }
.tr-drawer-close { flex:0 0 auto; width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:15px;
background:var(--bs-tertiary-bg,#f1f3f6); border:1px solid var(--bs-border-color,#d4d9e2); color:var(--bs-secondary-color,#5b616e); }
@media (prefers-reduced-motion:reduce){ .tr-drawer, .tr-scrim { transition:none; } }
/* ── Planbord (draft) — te-plannen-lijst + resource-agenda ─────────────────── */
.pb-layout { display:flex; gap:14px; align-items:flex-start; }
.pb-backlog { flex:0 0 232px; background:var(--bs-tertiary-bg,#f1f3f6); border:1px solid var(--bs-border-color,#e5e8ef);
border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:9px; max-height:calc(100vh - 205px); overflow-y:auto; }
.pb-backlog-head { font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:7px; }
.pb-pill { font-size:11px; font-weight:700; background:var(--bs-secondary-bg,#e5e8ef); color:var(--bs-body-color,#212529); border-radius:9px; padding:1px 8px; }
.pb-backlog-sub { font-size:11.5px; color:var(--bs-secondary-color,#8a909d); margin-top:-4px; }
.pb-bcard { background:var(--bs-body-bg,#fff); border:1px solid var(--bs-border-color,#e5e8ef); border-left:3px solid var(--cat);
border-radius:10px; padding:9px 10px; cursor:grab; box-shadow:0 1px 2px rgba(20,22,28,.05); }
.pb-bcard-sel { border-color:#185fa5; box-shadow:0 0 0 2px rgba(24,95,165,.35); background:#f2f8ff; }
.pb-pick-active { color:#0c447c; font-weight:600; }
.pb-tt-head { margin-right:auto; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pb-tt-time { font-weight:600; }
.pb-drop-cell { background:#dcefff !important; box-shadow:inset 0 0 0 2px #185fa5; }
.pb-who { font-size:12.5px; font-weight:650; }
.pb-dur { font-size:11px; color:var(--bs-secondary-color,#8a909d); white-space:nowrap; }
.pb-sub2 { font-size:11.5px; color:var(--bs-secondary-color,#565c69); margin-top:2px; }
.pb-k { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.03em; padding:1px 6px; border-radius:5px; margin-top:6px; }
.pb-cal { flex:1; min-width:0; }
.pb-scheduler { height:calc(100vh - 205px); min-height:480px; }
@media (max-width:820px){ .pb-layout { flex-direction:column; } .pb-backlog { flex-basis:auto; max-height:none; } }
/* Bellijst (lead-opvolging werklijsten): kanban-achtig bord, vier gelijke kolommen die de volle breedte vullen.
De kolomtitel blijft staan; enkel de kaartenlijst scrollt (per kolom een eigen scrollbar). */
/* Het kanban-bord mag buiten de 1100px-leescap van de shell; het gebruikt de volle breedte. */
.content-inner:has(.bel-board) { max-width: none; }
.bel-board { display:flex; gap:12px; align-items:stretch; }
.bel-bucket { flex:1 1 0; min-width:0; display:flex; flex-direction:column;
background:var(--bs-body-bg,#fff); border:1px solid var(--bs-border-color,#e3e6ea); border-radius:10px;
height:calc(100vh - 150px); }
.bel-bucket-head { display:flex; align-items:center; justify-content:space-between; font-weight:600;
padding:10px 12px; border-bottom:1px solid var(--bs-border-color,#e9ecef); }
.bel-bucket-body { padding:10px 12px; overflow-y:auto; flex:1 1 auto; }
.bel-card { border:1px solid var(--bs-border-color,#e9ecef); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.bel-card:last-child { margin-bottom:0; }
.bel-card a.fw-semibold { text-decoration:none; }
/* Urgentie-kleuren: over tijd = zachtrood, vandaag = amber, morgen/later = groen. Zachte tint + accentrand links. */
.bel-card.bel-overdue { border-left:3px solid #dc3545; background:#fdf1f2; }
.bel-card.bel-today { border-left:3px solid #f0ad4e; background:#fff7ea; }
.bel-card.bel-later { border-left:3px solid #2f9e5c; background:#f0f8f2; }
/* Leadinfo-actiekolom: knoppen links uitgelijnd met wat lucht t.o.v. de rechterrand van de grid. */
.li-actions-col { padding-right:.5rem; }
/* Zwevende resultatenlijst van de RelatieZoeker (Budget, Trechter): hangt over de velden eronder.
Staat hier i.p.v. als component-parameter — twee schermen willen dit, de vijf andere niet, en een
schakelaar in het component zou die keuze verstoppen. */
.adm-zoeker-zwevend {
position: absolute;
width: 100%;
z-index: 5;
}
/* ── Formulierlabels mogen afbreken ─────────────────────────────────────────────────────────────────
DevExpress zet op elke DxFormLayoutItem-caption `white-space: nowrap; overflow: hidden;
text-overflow: ellipsis`. In een breed formulier merk je daar niets van; in een SMAL paneel kapt hij
het label af.
⚠️ Gemeten op 11/09/2026, op het scherm Beschikbaarheid: dat linkerpaneel is 280px breed en draagt
captions van 43 tot 47 tekens. Na de omzetting van de eigen