/* ── Omgevingsgrootte ────────────────────────────────────────────────────────────────────────────
Het voorkeuren-paneel biedt compact/normaal/comfortabel aan; deze regels maken die keuze zichtbaar.
Ze stonden tot 0.20.0 alleen in de app.css van ADM One, waardoor de knoppen in elke andere app niets
deden. Op , niet op body: alles wat in rem rekent (ook DevExpress) volgt dan mee. */
html.adm-size-compact { font-size: 14px; }
html.adm-size-normal { font-size: 16px; }
html.adm-size-comfortable { font-size: 18px; }
/* Gedeelde shell-CSS voor de AppKit-topbar-panelen (voorkeuren + help) en widgets. De app includeert dit via
. Shell-structuur (.shell/.sidebar/grootte) blijft app-CSS. */
/* Topbar-icoonknoppen (menu in-/uitklappen, help). */
.icon-btn {
border: none; background: transparent; padding: 6px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
color: var(--bs-body-color); border-radius: 8px;
}
.icon-btn:hover { background: var(--bs-secondary-bg); }
/* Avatar (initialen of foto). */
.avatar-btn { border: none; background: transparent; padding: 0; cursor: pointer; display: inline-flex; }
.avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: var(--bs-primary); color: #fff; font-size: 0.8rem; font-weight: 600;
object-fit: cover;
}
.avatar-lg { width: 44px; height: 44px; font-size: 1rem; }
.avatar-img { background: none; padding: 0; object-fit: cover; }
/* Uitschuifbare zijpanelen (voorkeuren + help). */
.prefs-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1040; }
.prefs-panel, .help-panel {
position: fixed; top: 0; right: 0; height: 100vh; width: 330px; max-width: 92vw;
background: var(--bs-body-bg); color: var(--bs-body-color);
border-left: 1px solid var(--bs-border-color); z-index: 1041;
display: flex; flex-direction: column; box-shadow: -4px 0 18px rgba(0, 0, 0, 0.18);
}
.prefs-header {
display: flex; align-items: center; gap: 12px; padding: 16px;
border-bottom: 1px solid var(--bs-border-color);
}
.prefs-id { flex: 1; min-width: 0; }
.prefs-user { font-weight: 600; }
.help-head-title { display: flex; align-items: center; gap: 8px; font-weight: 600; flex: 1; }
.prefs-close {
border: none; background: transparent; color: var(--bs-secondary-color);
font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 6px;
}
.prefs-close:hover { background: var(--bs-secondary-bg); }
.prefs-body, .help-body { flex: 1; overflow-y: auto; padding: 16px; }
.help-body { font-size: 0.92rem; }
.help-body :first-child { margin-top: 0; }
.prefs-section { margin-bottom: 18px; }
.prefs-label {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--bs-secondary-color); margin-bottom: 8px;
}
.prefs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prefs-chip {
display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
border: 1px solid var(--bs-border-color); border-radius: 999px;
font-size: 0.85rem; color: var(--bs-body-color); text-decoration: none; cursor: pointer;
}
.prefs-chip:hover { background: var(--bs-secondary-bg); }
.prefs-chip.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
.prefs-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.prefs-swatch {
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid transparent; box-shadow: 0 0 0 1px var(--bs-border-color);
}
.prefs-swatch.active { border-color: var(--bs-body-bg); box-shadow: 0 0 0 2px var(--bs-primary); }
.prefs-footer { padding: 16px; border-top: 1px solid var(--bs-border-color); }
.prefs-logout {
display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
padding: 8px; border: 1px solid var(--bs-border-color); border-radius: 8px;
background: transparent; color: var(--bs-body-color); text-decoration: none; cursor: pointer;
}
.prefs-logout:hover { background: var(--bs-secondary-bg); }
/* Auth-kaart: gedeeld door de login én andere zelfstandige auth-schermen (bv. wachtwoord wijzigen). Niet-scoped
zodat élke auth-pagina (ook buiten de AppKit, zoals CreditSoft's WachtwoordWijzigen) dezelfde nette kaart krijgt. */
.login-page {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: var(--bs-tertiary-bg); padding: 24px;
}
.login-card {
width: 100%; max-width: 380px;
background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
border-radius: 14px; padding: 32px 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}
.login-lang { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 8px; font-size: .85rem; }
.login-lang a { color: var(--bs-secondary-color); text-decoration: none; }
.login-lang a.active { color: var(--bs-primary); font-weight: 700; }
.login-brand { font-weight: 700; font-size: 1.25rem; margin-bottom: 18px; }
.login-title { font-size: 1.4rem; margin: 0 0 4px; }
.login-subtitle { color: var(--bs-secondary-color); margin-bottom: 20px; font-size: .92rem; }
.login-label { display: block; font-size: .85rem; font-weight: 600; margin: 12px 0 4px; }
.login-submit { margin-top: 20px; }
/* Badge-teller op een nav-item (bv. ongelezen privé-overleg). Duwt naar rechts in de uitgeklapte zijbalk. */
.nav-menu .nav-link .nav-badge {
margin-left: auto;
min-width: 18px; height: 18px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; font-size: 0.7rem; font-weight: 700; line-height: 1;
background: var(--bs-primary); color: #fff;
}
/* De nav vult de zijbalk, zodat het versielabel onderaan kan blijven staan i.p.v. mee te schuiven met het
laatste menu-item. Deze twee regels horen samen: zonder de volle hoogte heeft `margin-top: auto` niets om
tegen te duwen.
⚠️ `.nav-menu` wordt door NavMenu in dít pakket gerenderd, dus hoort de bijhorende stijl hier — niet in de
app-CSS (playbook §6). Tot 0.23.0 stond ze enkel app-kant, waardoor het label bij weinig menu-items
halverwege de zijbalk hing. Gemeld door Dominique, 22/07/2026. */
.nav-menu { min-height: 100%; }
/* Versielabel onderaan de zijbalk → versiehistoriek: gecentreerd met een scheidingslijn erboven. */
.nav-version {
/* auto, niet 4px: dit duwt het label naar de onderkant van de zijbalk. Stond hier eerst 4px, waardoor
het label direct onder het laatste menu-item hing i.p.v. onderaan. */
margin-top: auto;
display: block; text-align: center;
padding: 10px 12px 2px;
border-top: 1px solid var(--bs-border-color);
font-size: 0.75rem; letter-spacing: 0.02em;
color: var(--bs-secondary-color); text-decoration: none;
}
.nav-version:hover { color: var(--bs-primary); }
/* ── AdmGrid-werkbalk ───────────────────────────────────────────────────────────────────────────────
Deze regels horen HIER en niet in de app-CSS: AdmGrid zit in deze RCL en rendert deze klassen, dus de
bijhorende stijl moet met het pakket meereizen. Stond ze tot 0.17.1 alleen in de app.css van CreditSoft,
waardoor elke andere app een ongestylede werkbalk kreeg (zoekvak, titel en "⋯"-menu zonder opmaak).
Zie de valkuil in het playbook §6. */
/* Geconsolideerde grid-werkbalk: embedded titel + acties links, zoek + hulpmiddelen rechts. */
.adm-grid-title {
font-size: 1.15rem;
font-weight: 600;
margin-right: 2px;
white-space: nowrap;
}
.adm-grid-info {
color: var(--bs-secondary-color);
cursor: help;
display: inline-flex;
align-items: center;
margin-right: 4px;
/* Het is een