/* ============================================================================
Risk X Modern — selectable theme overlay (v1.0 — port van Profix Modern v9.16)
File: wwwroot/css/RiskXModern/riskx-modern.css
Identieke layout als Profix Modern; merk-tokens, logo en achtergrond voor RiskX Manager.
Selectors gematcht op de echte DevExpress-DOM (via DevTools-snippets).
Geladen via de DevExpress Theme Switcher (appsettings.json, groep "Risk X Modern").
Attributen op (gezet door js/riskx-theme.js):
data-rx-theme = "light" | "dark" (volgt de gekozen switcher-variant)
data-rx-accent = "green" | "navy" | "blue" | "purple" | "teal"
data-rx-density = "normal" | "compact"
============================================================================ */
/* 1. Font --------------------------------------------------------------------
(office-white wordt door de Theme Switcher zelf geladen als "Url" van dit thema;
zie appsettings.ThemeSwitcher.snippet.json) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
:root {
/* Instelbaar via settings-paneel (riskx-theme.js zet --rx-font op ) */
--rx-font: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
/* 2. Tokens + framework variables -------------------------------------------
Let op: site.css definieert al --rx-navy, --rx-navy-rgb, --rx-navy-vlak, --rx-groen-*,
--rx-lijn. Die blijven gelden; de tokens hieronder gebruiken andere namen. */
:root {
/* Vaste merk-kleuren (woordmerk: tekst #1E2B57, X #2FA06A) */
--rx-navy: #1E2B57;
--rx-navy-deep: #141D3D;
--rx-groen-merk: #2FA06A; /* decoratief (X, randen); te licht voor tekst op wit */
/* Accent (preset: green). Wordt overschreven door data-rx-accent.
Donkerder dan het merkgroen: 4,6:1 op wit, dus ook als tekst/icoon bruikbaar. */
--rx-accent: #26855A;
--rx-accent-hover: #1F6E4A;
--rx-accent-rgb: 38, 133, 90;
/* Backwards-compat alias — oudere regels gebruiken --rx-orange */
--rx-orange: var(--rx-accent);
/* XAF-iconen zijn gekleurde ![]()
's uit IImageService; color werkt daar niet op. Dit filter
maakt ze eerst zwart en kleurt ze dan naar --rx-accent (berekend, afwijking < 3/255).
Per accent-preset hieronder opnieuw, want een filter kan geen var(--rx-accent) lezen. */
--rx-icon-filter: brightness(0) saturate(100%) invert(42%) sepia(89%) saturate(318%) hue-rotate(101deg) brightness(84%) contrast(93%);
/* Oppervlakken & tekst (licht) */
--rx-surface: #FFFFFF; /* kaarten, header, toolbar, grid */
--rx-surface-2: #FBFCFE; /* sidebar */
--rx-surface-3: #F7F9FC; /* grid-header, chips */
--rx-hover: #F6F8FB; /* hover-vlakken */
--rx-ink: #1C2A38;
--rx-muted: #64748B;
--rx-text-soft: #5A6675;
--rx-label: #8A96A5;
--rx-nav-text: #475569;
--rx-line: #E3E8EF;
--rx-line-soft: #EEF2F6;
--rx-card-line: #E7ECF3;
--rx-canvas: #EDEFF2; /* RGB 237 239 242 — basis-achtergrond overal */
--rx-active: #E4F3EB; /* = --rx-groen-vlak uit site.css */
--rx-heading: var(--rx-navy); /* sectielabels, actieve tabs */
--rx-heading-deep: var(--rx-navy-deep);
/* Dichtheid (preset: normal). Overschreven door data-rx-density="compact". */
--rx-card-gap: 16px;
--rx-card-pad: 2px 14px 12px;
--rx-cardhead-pad: 10px 2px 6px;
--rx-fl-item-pad: 2px;
--rx-fl-item-gap: 4px;
--rx-fl-gutter-y: 0.5rem;
--rx-grid-row-pad: 9px;
--rx-toolbar-pad: 9px 18px;
--rx-toolbar-h: 46px;
--rx-nav-row-pad: 5px;
--rx-content-pad: 14px;
--bs-primary: var(--rx-accent);
--bs-primary-rgb: var(--rx-accent-rgb);
--bs-link-color: #1E2B57;
--bs-link-color-rgb: 30, 43, 87;
--bs-link-hover-color: var(--rx-accent);
--bs-border-radius: 10px;
--bs-border-radius-sm: 8px;
--bs-border-radius-lg: 14px;
--bs-body-font-family: var(--rx-font);
--dxbl-btn-primary-bg: var(--rx-accent);
--dxbl-btn-primary-border-color: var(--rx-accent);
--dxbl-btn-primary-hover-bg: var(--rx-accent-hover);
--dxbl-btn-primary-hover-border-color: var(--rx-accent-hover);
--dxbl-border-radius: 10px;
}
/* 2a. Accent-presets (à la DevExpress Fluent) -------------------------------- */
html[data-rx-accent="green"] {
--rx-accent: #26855A; --rx-accent-hover: #1F6E4A; --rx-accent-rgb: 38, 133, 90; --rx-active: #E4F3EB;
--rx-icon-filter: brightness(0) saturate(100%) invert(42%) sepia(89%) saturate(318%) hue-rotate(101deg) brightness(84%) contrast(93%);
}
html[data-rx-accent="navy"] {
--rx-accent: #1E2B57; --rx-accent-hover: #141D3D; --rx-accent-rgb: 30, 43, 87; --rx-active: #DDE2ED;
--rx-icon-filter: brightness(0) saturate(100%) invert(14%) sepia(28%) saturate(2377%) hue-rotate(198deg) brightness(96%) contrast(93%);
}
html[data-rx-accent="blue"] {
--rx-accent: #2F6FED; --rx-accent-hover: #245CD0; --rx-accent-rgb: 47, 111, 237; --rx-active: #EAF1F8;
--rx-icon-filter: brightness(0) saturate(100%) invert(34%) sepia(99%) saturate(2130%) hue-rotate(209deg) brightness(94%) contrast(97%);
}
html[data-rx-accent="purple"] {
--rx-accent: #7C5CD6; --rx-accent-hover: #6A4BC2; --rx-accent-rgb: 124, 92, 214; --rx-active: #EFEAFA;
--rx-icon-filter: brightness(0) saturate(100%) invert(39%) sepia(65%) saturate(752%) hue-rotate(218deg) brightness(93%) contrast(88%);
}
html[data-rx-accent="teal"] {
--rx-accent: #14919B; --rx-accent-hover: #0F7E87; --rx-accent-rgb: 20, 145, 155; --rx-active: #E3F4F5;
--rx-icon-filter: brightness(0) saturate(100%) invert(43%) sepia(90%) saturate(412%) hue-rotate(136deg) brightness(91%) contrast(92%);
}
/* 2b. Compacte dichtheid ------------------------------------------------------ */
html[data-rx-density="compact"] {
--rx-card-gap: 10px;
--rx-card-pad: 2px 12px 8px;
--rx-cardhead-pad: 8px 2px 4px;
--rx-fl-item-pad: 1px;
--rx-fl-item-gap: 2px;
--rx-fl-gutter-y: 0.25rem;
--rx-grid-row-pad: 6px;
--rx-toolbar-pad: 6px 18px;
--rx-toolbar-h: 40px;
--rx-nav-row-pad: 3px;
--rx-content-pad: 10px;
}
/* 2c. Dark mode ---------------------------------------------------------------
Overschrijft de oppervlak-/teksttokens; alle regels hieronder gebruiken die
tokens, dus het grootste deel volgt vanzelf. Extra DX-specifieke overrides
staan in sectie 11. */
html[data-rx-theme="dark"] {
color-scheme: dark;
--rx-surface: #1E2733;
--rx-surface-2: #19212C;
--rx-surface-3: #253040;
--rx-hover: #26313F;
--rx-ink: #E3E9F1;
--rx-muted: #93A1B3;
--rx-text-soft: #A7B4C4;
--rx-label: #8494A8;
--rx-nav-text: #B4C0CF;
--rx-line: #2B3646;
--rx-line-soft: #26303E;
--rx-card-line: #2B3646;
--rx-canvas: #141B24;
--rx-active: #1F3A2F;
--rx-heading: #9FC4B0;
--rx-heading-deep: #DCE3F0;
--bs-body-bg: #141B24;
--bs-body-color: #E3E9F1;
/* Bootstraps .text-body leest de -rgb-variant, met !important. Zonder deze regel bleef die
op het donkere grijs van Office White staan: onder Classic Dark waren de namen in de
themakiezer daardoor onzichtbaar (#44). */
--bs-body-color-rgb: 227, 233, 241;
--bs-link-color: #9FC4B0;
--bs-link-color-rgb: 159, 196, 176;
}
body, .dxbl-blazor {
font-family: var(--rx-font);
color: var(--rx-ink);
}
/* Form-controls erven het body-font niet vanzelf → Poppins expliciet op inputs,
knoppen en DevExpress-editortekst. Bewust GEEN *-regel: dat sloopt de icon-fonts. */
input, textarea, select, button,
.dxbl-text-edit-input,
.dxbl-text, .dxbl-btn, .dxbl-edit {
font-family: var(--rx-font);
}
/* ALLEEN de ingebedde toolbar-editors (combobox "Tonen", zoekveld) gelijktrekken
met de toolbar-knoppen. In em, dus gelijk aan de maat die de toolbar zelf heeft
(--dxbl-toolbar-font-size): 14px op Standaard, 12px op Compact. Stond hier vast op
14px, en dan bleef het zoekveld groot terwijl de cellen eronder meekrompen. */
.dxbl-toolbar-item-tmpl .dxbl-text-edit-input,
.dxbl-toolbar-item-tmpl input {
font-size: 1.14em !important;
}
/* 3a. Brand-regel: logo | accent-streep | klantnaam --------------------------- */
/* Header-vak boven de sidebar mag meegroeien met lange klantnamen
(site.css pint dit op --riskx-sidebar-width) */
.header .header-left-side {
width: auto !important;
min-width: var(--riskx-sidebar-width, 260px) !important;
max-width: none !important;
flex-shrink: 0;
}
/* DOM = standaard XAF-header, geen custom template nodig:
.header-left-side > .btn-hamburger + div.header-logo + span.header-tenant-name
De