, geen
backendwijziging. Alleen .portal-footer (ingelogde shell, via
layouts/app.php); de publieke footer (.site-footer/footer-public.php,
niet-ingelogde bezoekers, KvK/BTW-plicht) blijft ongewijzigd zichtbaar
— buiten scope van deze instructie. */
.portal-footer {
display: none;
}
/* Correctie: sidebar wordt licht/wit, niet donkerblauw — de vorige
(donkere) versie week te veel af van de goedgekeurde referentie-
mock-up. Tekst/iconen worden navy i.p.v. wit. */
.app-sidebar {
background: var(--mc-white);
color: var(--mc-ink);
border-right: 1px solid var(--mc-line);
}
.app-sidebar__brand {
border-bottom-color: var(--mc-line);
}
.app-sidebar__brand-name {
/* Correctie (laatste polish): iets duidelijker/prominenter — was
font-weight 500 op de basis --font-size-sm (14px, app.css). */
font-family: var(--mc-font-display);
font-size: var(--font-size-base, 16px);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--mc-navy);
}
/* Tweekleurige merk-lockup ("MC" in goud, "Legal Platform" in navy) —
zie de bijbehorende markup-aanpassing in partials/sidebar.php. */
.mc-brand-mc {
color: var(--mc-gold);
font-weight: 700;
}
.mc-brand-rest {
color: var(--mc-navy);
}
.app-sidebar__nav a {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
/* Expliciet herhaald (bestaat al in app.css) — zorgt dat het dunne
actief-accent hieronder altijd een echte rand heeft om te kleuren,
ongeacht cascadevolgorde. */
border-left: 3px solid transparent;
border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0;
}
.app-sidebar__nav a:hover {
background: var(--mc-hover-wash);
color: var(--mc-navy);
}
.app-sidebar__nav a.is-active {
background: var(--mc-gold-wash);
color: var(--mc-navy);
border-left: 3px solid var(--mc-gold);
font-weight: 600;
}
/* Ronde 5: profielblok wordt een compacte rij (avatar + naam/rol
gestapeld) i.p.v. uitsluitend gestapelde tekst — geen kaart, geen
eigen achtergrond, alleen de al bestaande, dunne bovenrand als
scheiding. Iets meer ruimte onderaan (28px, tussen de gevraagde
24-32px) i.p.v. de standaard --space-md (16px). */
.app-sidebar__profile {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: var(--space-md) var(--space-md) 28px;
border-top-color: var(--mc-line);
}
.app-sidebar__avatar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: var(--mc-radius-full);
background: var(--mc-gold-wash);
color: var(--mc-navy);
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.app-sidebar__profile-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.app-sidebar__profile-name {
color: var(--mc-navy);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.app-sidebar__profile-role {
color: var(--mc-ink-soft);
}
/* Navigatiegroepen (WERK/FINANCIEEL/BEHEER) — nieuw markup-patroon in
sidebar.php: elke groep is een eigen , met een label erboven.
Geen wijziging aan de hrefs/permissiechecks binnen elke groep. */
.mc-nav-group {
margin-top: var(--space-lg);
}
.mc-nav-group:first-child {
margin-top: 0;
}
.mc-nav-group__label {
display: block;
padding: 0 var(--space-md) 8px;
font-family: var(--mc-font-body);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--mc-ink-soft);
opacity: 0.7;
}
.app-topbar {
/* Correctie (laatste polish): iets luchtiger (was --space-md, 16px). */
background: var(--mc-white);
border-bottom-color: var(--mc-line);
padding-top: var(--space-lg);
padding-bottom: var(--space-lg);
}
.app-topbar__title {
font-family: var(--mc-font-display);
font-weight: 500;
color: var(--mc-ink);
}
.app-topbar__search {
background: var(--mc-white);
border-color: var(--mc-line);
}
.app-topbar__icon-btn {
border-color: var(--mc-line);
color: var(--mc-ink-soft);
}
.app-topbar__user-name {
color: var(--mc-ink);
}
.app-topbar__user-role {
color: var(--mc-ink-soft);
}
/* --------------------------------------------------------------------------
3. .mc-page-header — kop van een schermsectie (titel + optionele acties)
-------------------------------------------------------------------------- */
.mc-page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-md);
}
.mc-page-header__eyebrow {
display: block;
margin: 0 0 4px;
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mc-gold);
}
.mc-page-header__title {
margin: 0;
font-family: var(--mc-font-display);
font-weight: 600;
color: var(--mc-ink);
}
.mc-page-header__subtitle {
margin: 4px 0 0;
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
color: var(--mc-ink-soft);
}
/* --------------------------------------------------------------------------
4. .mc-card — generieke kaart (bouwt voort op .card uit app.css)
-------------------------------------------------------------------------- */
.mc-card {
background: var(--mc-white);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius);
/* Correctie: rustiger kaart — bijna geen schaduw, de rand draagt
de scheiding, niet een zware drop-shadow ("klassieke admin-
template"-signaal dat is afgezwakt). */
box-shadow: 0 1px 2px rgba(16, 27, 45, 0.03);
font-family: var(--mc-font-body);
color: var(--mc-ink);
}
.mc-card--interactive:hover {
border-color: #D8D2C2;
}
.mc-card__eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mc-ink-soft);
}
.mc-card__title {
font-family: var(--mc-font-body);
font-weight: 700;
color: var(--mc-ink);
margin: 0 0 var(--space-sm);
}
/* --------------------------------------------------------------------------
5. .mc-badge — statuspil (vervangt losse statustekst waar zinvol)
-------------------------------------------------------------------------- */
.mc-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--mc-radius-full);
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
background: var(--mc-status-hold-bg);
color: var(--mc-status-hold-text);
}
.mc-badge--open { background: var(--mc-status-open-bg); color: var(--mc-status-open-text); }
.mc-badge--wait { background: var(--mc-status-wait-bg); color: var(--mc-status-wait-text); }
.mc-badge--hold { background: var(--mc-status-hold-bg); color: var(--mc-status-hold-text); }
.mc-badge--info { background: var(--mc-status-info-bg); color: var(--mc-status-info-text); }
/* --danger hergebruikt de bestaande app.css-waarschuwingskleur (--color-danger/-bg,
ongewijzigd), niet een nieuwe MC-kleur — voor "problematische"/vervallen status. */
.mc-badge--danger { background: var(--color-danger-bg); color: var(--color-danger); }
/* Subtiele navy/goud-variant voor een primaire/systeembeheerrol (bijv.
Administrator) op Gebruikersbeheer — onderscheidt zich bewust van de
"gewone rol"-badge (die de neutrale --hold-variant hergebruikt),
zonder alle rollen goud te maken. */
.mc-badge--role-primary { background: var(--mc-navy); color: var(--mc-gold-bright, var(--mc-gold)); }
/* --------------------------------------------------------------------------
6. .mc-button — bouwt voort op .btn-primary/.btn-secondary uit app.css
-------------------------------------------------------------------------- */
.mc-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: var(--mc-radius-sm);
border: 1px solid transparent;
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
font-weight: 600;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
transition: background-color var(--transition-fast, 100ms ease-in-out), border-color var(--transition-fast, 100ms ease-in-out);
}
.mc-button-primary {
background: var(--mc-navy);
color: var(--mc-white);
}
.mc-button-primary:hover {
background: var(--mc-navy-deep);
color: var(--mc-white);
}
.mc-button-secondary {
background: var(--mc-white);
color: var(--mc-ink);
border-color: var(--mc-line);
}
.mc-button-secondary:hover {
background: var(--mc-cream);
}
.mc-icon {
display: inline-flex;
flex-shrink: 0;
line-height: 0;
}
/* --------------------------------------------------------------------------
7. .mc-empty-state — lege staat (bouwt voort op .dashboard-empty-state)
-------------------------------------------------------------------------- */
.mc-empty-state {
text-align: center;
padding: var(--space-xl) var(--space-md);
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
}
.mc-empty-state .mc-icon {
display: flex;
justify-content: center;
margin: 0 auto var(--space-sm);
color: var(--mc-line-dark);
}
.mc-empty-state__title {
margin: 0 0 4px;
font-weight: 700;
color: var(--mc-ink);
}
.mc-empty-state__text {
margin: 0;
font-size: var(--font-size-sm, 14px);
}
/* --------------------------------------------------------------------------
8. .mc-table — generieke tabel (bouwt voort op .table uit app.css)
Nog niet gebruikt op het Dashboard — als onderdeel van het systeem
alvast vastgelegd voor de volgende pagina's (Zaken/Cliënten/...).
-------------------------------------------------------------------------- */
.mc-table {
width: 100%;
border-collapse: collapse;
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
color: var(--mc-ink);
}
.mc-table thead th {
padding: 12px var(--space-md);
text-align: left;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mc-ink-soft);
background: var(--mc-cream);
border-bottom: 1px solid var(--mc-line);
}
.mc-table tbody td {
padding: 13px var(--space-md);
border-bottom: 1px solid var(--mc-line);
}
.mc-table tbody tr:last-child td {
border-bottom: none;
}
.mc-table tbody tr:hover {
background: rgba(16, 27, 45, 0.02);
}
/* --------------------------------------------------------------------------
9. .mc-tabs — tabbladen (nog niet gebruikt op het Dashboard)
-------------------------------------------------------------------------- */
.mc-tabs {
display: flex;
gap: var(--space-xl);
border-bottom: 1px solid var(--mc-line);
}
.mc-tab {
padding: 12px 0;
margin-bottom: -1px;
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
font-weight: 600;
color: var(--mc-ink-soft);
border-bottom: 2px solid transparent;
text-decoration: none;
}
.mc-tab.is-active {
color: var(--mc-navy);
border-bottom-color: var(--mc-gold);
}
/* --------------------------------------------------------------------------
10. .mc-form-control — formuliervelden (nog niet gebruikt op het Dashboard)
-------------------------------------------------------------------------- */
.mc-form-control {
display: block;
width: 100%;
padding: 11px 14px;
font-family: var(--mc-font-body);
font-size: var(--font-size-base, 16px);
color: var(--mc-ink);
background: var(--mc-cream);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius-sm);
transition: border-color var(--transition-fast, 100ms ease-in-out), box-shadow var(--transition-fast, 100ms ease-in-out), background-color var(--transition-fast, 100ms ease-in-out);
}
/* Duidelijke, tweetonige focus-state: navy rand + zachte goudgloed
(i.p.v. uitsluitend een navy-tint) — subtiel, geen dikke schaduw. */
.mc-form-control:focus {
outline: none;
background: var(--mc-white);
border-color: var(--mc-navy);
box-shadow: 0 0 0 3px rgba(184, 150, 79, 0.18), 0 0 0 1px var(--mc-navy);
}
/* --------------------------------------------------------------------------
11. Dashboard — herstijling van de bestaande UX02/UX03-widgets
Zelfde class-namen (.dashboard-*) blijven functioneel aanwezig in de
view; deze regels hergekleuren/hertypograferen ze, geen structuurwijziging.
-------------------------------------------------------------------------- */
.dashboard-greeting__title {
font-family: var(--mc-font-display);
font-weight: 600;
color: var(--mc-ink);
}
.dashboard-greeting__subtitle {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
}
.dashboard-widget__title,
.card__header {
font-family: var(--mc-font-body);
}
/* Dekt overige tekst binnen een dashboardkaart (statusregels/meta) in
één regel, i.p.v. elke .dashboard-*-subclass los op te sommen. */
.card--dashboard .card__body {
font-family: var(--mc-font-body);
}
.dashboard-stat__label {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
}
.dashboard-stat__value {
font-family: var(--mc-font-display);
color: var(--mc-navy);
}
/* Correctie (ronde 10): subtiele links krijgen goud als accent i.p.v.
navy ("vervang blauwe accentkleuren door goud... subtiele links") —
navy blijft voorbehouden aan primaire tekst/knoppen/iconen. Hover
keert dit om naar navy, voor duidelijke interactie-feedback. */
.dashboard-stat__link {
font-family: var(--mc-font-body);
color: var(--mc-gold);
font-weight: 600;
}
.dashboard-stat__link:hover {
color: var(--mc-navy);
}
.dashboard-list-item__title,
.dashboard-list-item__subtitle {
font-family: var(--mc-font-body);
}
/* Correctie (ronde 10): exact --mc-navy i.p.v. app.css's eigen,
licht afwijkende --color-primary — zelfde tint als de rest van het
nieuwe systeem, geen zichtbaar maar wel een echt kleurverschil. */
.dashboard-list-item__time {
color: var(--mc-navy);
}
/* Correctie: geen icoon-badge-vierkant (klassiek admin-template-signaal)
— uitsluitend het lijn-icoon zelf, gedempt goud, zonder achtergrond. */
.dashboard-stat__icon.mc-icon {
width: 20px;
height: 20px;
color: var(--mc-gold);
margin-bottom: var(--space-md);
}
.dashboard-quick-action.mc-button-primary {
justify-content: center;
}
/* --------------------------------------------------------------------------
12. Whitespace-correctie (Dashboard-review, ronde 2)
"Gebruik veel meer witruimte" / "verminder visuele drukte" — uitsluitend
extra ruimte tussen bestaande secties/kaarten, geen structuurwijziging.
-------------------------------------------------------------------------- */
.dashboard-section + .dashboard-section {
margin-top: var(--space-2xl);
}
.dashboard-grid--main {
gap: var(--space-lg);
}
.card--dashboard.mc-card .card__body {
padding: var(--space-lg);
}
.mc-page-header {
margin-bottom: var(--space-sm);
}
.dashboard-widget__title {
color: var(--mc-ink);
font-weight: 600;
margin-bottom: var(--space-md);
}
/* --------------------------------------------------------------------------
13. Dichtheidscorrectie (Dashboard-review, ronde 3 — "Dashboard moet
rustiger", primaire visuele referentie: de goedgekeurde lichte
dossierpagina). Uitsluitend CSS — geen enkele HTML-structuurwijziging
buiten wat al in dashboard/index.php is doorgevoerd (verwijderen van
de Adviesrapporten-kaart/Mijn taken-widget/kaart-omhulsel Snelle
acties, zie het bijgewerkte docblock daar).
-------------------------------------------------------------------------- */
/* Correctie (Dashboard-review, ronde 7): Agenda vandaag en Recente
dossiers weer naast elkaar (ronde 6 se volledige stapeling was niet
gewenst) — ongeveer 50/50, met de al bestaande --space-lg-gap als
normale tussenruimte. Uitsluitend boven de bestaande app.css-
breakpoint (968px); daaronder blijft de mobile-stacking (1 kolom,
app.css) intact. */
@media (min-width: 969px) {
.dashboard-grid--main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Ronde 9: lichte onderlinge scheiding tussen de twee subpanelen (dunne
verticale lijn, geen eigen kaart per subpaneel meer — beide zijn nu
kale .card__body's, rechtstreeks kind van .dashboard-grid--main). */
@media (min-width: 969px) {
.dashboard-grid--main .card__body + .card__body {
border-left: 1px solid var(--mc-line);
padding-left: var(--space-lg);
}
}
/* KPI-rij: rustige, lichte strip (zoals de kleine statuscellen in de
goedgekeurde dossierpagina-referentie) — geen gap, dunne verticale
scheidingslijnen tussen de cellen. Vanaf ronde 9 GEEN eigen
achtergrond/rand/radius meer (die kwamen eerder overeen met de
afzonderlijke kaart-omkadering); de strip zit nu zelf al binnen de
gezamenlijke .mc-dashboard-panel-omkadering, dus een eigen omlijning
zou een dubbele box opleveren. .mc-card is niet langer op de cellen
aanwezig (ronde 9) — de selector hieronder is daarom versimpeld. */
.dashboard-grid--stats {
gap: 0;
}
.dashboard-grid--stats .dashboard-stat-card {
padding: var(--space-md) var(--space-lg);
border-right: 1px solid var(--mc-line);
}
.dashboard-grid--stats .dashboard-stat-card:last-child {
border-right: none;
}
/* Onder de bestaande app.css-breakpoint (640px) stapelt de KPI-strip
naar 1 kolom (app.css) — de verticale scheidingslijn wordt dan een
horizontale, i.p.v. een overbodige rand rechts. */
@media (max-width: 640px) {
.dashboard-grid--stats .dashboard-stat-card {
border-right: none;
border-bottom: 1px solid var(--mc-line);
}
.dashboard-grid--stats .dashboard-stat-card:last-child {
border-bottom: none;
}
}
/* Neutraliseert de bestaande hover-lift (app.css, .card--dashboard:hover
— translateY + shadow-md): past niet bij "rustiger"/een strip-cel. */
.card--dashboard:hover {
box-shadow: none;
transform: none;
}
/* Compactere KPI-waarde — de referentie toont bescheiden cijfers, geen
grote dashboard-getallen. */
.dashboard-stat__value {
font-size: var(--font-size-2xl, 24px);
}
/* Geen decoratieve iconen meer op de statkaarten/knoppen (CSA-correctie
"overmatig gebruik van iconen"). De -markup blijft in de view
staan (inert) zodat een eventuele terugdraai geen HTML-wijziging
vereist. */
.dashboard-stat__icon.mc-icon,
.mc-button .mc-icon {
display: none;
}
/* Snelle acties: bewust aangewezen navy accentsectie (CSA-besluit
ronde 12) — enige plek naast primaire knoppen/belangrijke headings/
iconen waar navy als vlak wordt gebruikt. De globale paginakleur
(--mc-cream) en alle overige secties/oppervlakken blijven ongewijzigd
licht/wit — dit raakt uitsluitend deze ene sectie. */
.mc-quick-actions__title {
font-size: var(--font-size-sm, 14px);
color: rgba(255, 255, 255, 0.55);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.mc-quick-actions .dashboard-quick-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.mc-quick-actions .dashboard-quick-action {
flex: 0 0 auto;
min-height: 38px;
padding-left: 14px;
padding-right: 14px;
}
/* --------------------------------------------------------------------------
14. Laatste visuele correcties (Dashboard-review, ronde 4)
Uitsluitend CSS — geen nieuwe onderdelen, geen HTML-structuurwijziging.
-------------------------------------------------------------------------- */
/* (1) Agenda vandaag / Recente dossiers: voorkom dat de kortste kaart
wordt uitgerekt tot de hoogte van de langste (app.css'
.dashboard-grid heeft align-items:stretch) — elke kaart krijgt nu
uitsluitend de hoogte van zijn eigen inhoud, geen grote lege vlakken
meer. Iets compactere kaartpadding voor deze twee widgets specifiek. */
.dashboard-grid--main {
align-items: start;
}
.dashboard-grid--main .card__body {
padding: var(--space-md);
}
/* (2) Sidebar-actief-accent: zie sectie 2 hierboven (border-left nu
expliciet herhaald op zowel de basis- als de .is-active-regel). */
/* (4, eerste correctieronde) + (1, tweede correctieronde): "Dashboard"
bovenin de topbar is overbodig naast de begroeting eronder — wordt
een klein, gedempt label i.p.v. een tweede kop. Uitsluitend op het
Dashboard-scherm (herkend via de reeds bestaande .dashboard-workspace-
class op de content-root), zelfde :has()-techniek als al elders in
app.css gebruikt (bv. .client-requests-list-workspace) — andere,
nog niet herstijlde pagina's behouden hun bestaande .app-topbar__title. */
body:has(.dashboard-workspace) .app-topbar__title {
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mc-ink-soft);
}
/* Extra ruimte tussen topbar en begroeting — "de pagina moet rustiger
openen" (ronde 4). Vanaf ronde 9 leeft deze marge op de gezamenlijke
paneelomkadering zelf (.mc-dashboard-panel, sectie 17 hieronder) i.p.v.
op de begroeting los — de begroeting is niet langer het eerste,
losse element op de pagina maar de eerste sectie ín het paneel. */
/* Correctie (ronde 14 — CSA-besluit): geen navy meer op Snelle acties —
vier lichte, witte kaarten met een genummerd goud/crème badge, navy
titel en gedempte omschrijving (zie de bijbehorende markup-wijziging
in dashboard/index.php, .mc-quick-actions__card/__badge/__card-title/
__card-desc). Vervangt volledig de navy-varianten uit ronde 12/13. */
.mc-quick-actions__title {
color: var(--mc-ink-soft);
}
.mc-quick-actions .dashboard-quick-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
.mc-quick-actions__card {
flex: 1 1 0;
min-width: 180px;
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--space-lg);
background: var(--mc-white);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius);
text-decoration: none;
transition: border-color var(--transition-fast, 100ms ease-in-out), background-color var(--transition-fast, 100ms ease-in-out);
}
/* Maximaal subtiele goud-hover — geen zware kleurverandering. */
.mc-quick-actions__card:hover {
border-color: var(--mc-gold);
background: var(--mc-gold-wash);
}
.mc-quick-actions__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-bottom: 2px;
border-radius: var(--mc-radius-full);
background: var(--mc-gold-wash);
color: var(--mc-navy);
font-family: var(--mc-font-display);
font-size: 12px;
font-weight: 700;
}
.mc-quick-actions__card-title {
font-family: var(--mc-font-body);
font-size: 14px;
font-weight: 700;
color: var(--mc-navy);
}
.mc-quick-actions__card-desc {
font-family: var(--mc-font-body);
font-size: 12.5px;
line-height: 1.4;
color: var(--mc-ink-soft);
}
/* Optioneel vierde regel op een .mc-quick-actions__card — een losse,
pijl-achtige actietekst (bijv. "Nieuwe algemene brief →") naast
titel/omschrijving. Toegevoegd voor Brieven (letters/index.php);
het Dashboard zelf gebruikt dit element niet en blijft ongewijzigd. */
.mc-quick-actions__card-action {
margin-top: 4px;
font-family: var(--mc-font-body);
font-size: 12.5px;
font-weight: 700;
color: var(--mc-gold);
}
/* --------------------------------------------------------------------------
16. "Recente activiteiten" (Dashboard-review, ronde 8 — expliciet
goedgekeurde nieuwe sectie). De view toont voorlopig een lege staat
(zie dashboard/index.php-docblock) — onderstaande .mc-activity-*
regels zijn al klaar voor zodra er echte data is, en worden nu al
gebruikt in de losse preview om de gevulde staat te tonen.
-------------------------------------------------------------------------- */
.mc-activity-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
margin-bottom: var(--space-sm);
}
.mc-activity-panel__head .dashboard-widget__title {
margin-bottom: 0;
}
/* Correctie (ronde 10): zelfde goud-als-linkaccent-besluit als
.dashboard-stat__link hierboven. */
.mc-activity-panel__link {
font-family: var(--mc-font-body);
font-size: 12px;
font-weight: 600;
color: var(--mc-gold);
text-decoration: none;
flex-shrink: 0;
}
.mc-activity-panel__link:hover {
color: var(--mc-navy);
}
/* Correctie (laatste polish): lege staat van Recente activiteiten
compacter — de generieke .mc-empty-state-padding (--space-xl,
32px verticaal) is bedoeld voor een op zichzelf staand paneel;
hier, direct onder de sectiekop, is dat te veel lucht voor één
regel tekst. Uitsluitend deze ene lege staat geraakt (aangrenzende-
sibling-selector op .mc-activity-panel__head) — Agenda/Recente
dossiers-lege staten (elders, geen voorafgaande .mc-activity-panel__head)
blijven ongewijzigd op de generieke padding. */
.mc-activity-panel__head + .mc-empty-state {
padding: var(--space-md) var(--space-md);
text-align: left;
}
.mc-activity-list {
display: flex;
flex-direction: column;
}
.mc-activity-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--mc-line);
font-family: var(--mc-font-body);
}
.mc-activity-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.mc-activity-item__time {
flex-shrink: 0;
width: 40px;
font-size: 13px;
font-weight: 600;
color: var(--mc-navy);
}
.mc-activity-item__dot {
flex-shrink: 0;
width: 6px;
height: 6px;
margin-top: 6px;
border-radius: 50%;
background: var(--mc-gold);
}
.mc-activity-item__body {
flex: 1 1 auto;
min-width: 0;
font-size: 13px;
color: var(--mc-ink);
}
.mc-activity-item__ref {
color: var(--mc-ink-soft);
}
/* --------------------------------------------------------------------------
17. .mc-dashboard-panel — gezamenlijke hoofdcontainer (Dashboard-review,
ronde 9). Alle Dashboard-secties (begroeting t/m Snelle acties) vallen
nu visueel binnen één omkadering i.p.v. losse kaarten per sectie.
-------------------------------------------------------------------------- */
.mc-dashboard-panel {
/* Correctie (ronde 11): ~16px hoger dan voorheen (was --space-2xl,
48px) — nog steeds voldoende afstand tot de topbar, niet ertegenaan.
Correctie (laatste polish): nogmaals ~16px hoger (was --space-xl,
32px) — nog steeds een duidelijke, bewuste marge t.o.v. de topbar. */
margin-top: var(--space-md);
background: var(--mc-white);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius-lg);
box-shadow: 0 1px 2px rgba(16, 27, 45, 0.03);
font-family: var(--mc-font-body);
color: var(--mc-ink);
}
.mc-dashboard-panel__section {
padding: var(--space-lg) var(--space-xl);
border-bottom: 1px solid var(--mc-line);
}
.mc-dashboard-panel__section:last-child {
border-bottom: none;
}
/* --------------------------------------------------------------------------
15. Laatste polish (Dashboard-review, ronde 5)
-------------------------------------------------------------------------- */
/* (3) Topbar rechterkant: voorkomt dat gebruikersnaam/rol/uitloggen
tegen de viewportrand aankomen of buiten beeld raken. app.css'
.app-topbar heeft al flex-wrap; dit vult uitsluitend ontbrekende
veiligheidsmarges/inkrimpgedrag aan, geen structuurwijziging. */
.app-topbar {
padding-right: var(--space-xl);
}
.app-topbar__actions {
justify-content: flex-end;
row-gap: var(--space-sm);
}
.app-topbar__user {
min-width: 0;
}
.app-topbar__user-name,
.app-topbar__user-role {
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* (ronde 6, veralgemeniseerd bij de platformdoorrol) Elke MC-
portalpagina krijgt via deze generieke class één vaste, begrensde
hoofdcontentkolom — geen brede, losse spreiding over het volledige
(fluid) canvas. Was uitsluitend `.dashboard-workspace`; nu
`.mc-page-workspace`, door alle modules gedeeld (Dashboard behoudt
`dashboard-workspace` ernaast, uitsluitend voor de :has()-selector
verderop die de topbar-titel specifiek op het Dashboard dempt).
.container--fluid zelf blijft ongewijzigd — die class wordt ook door
nog-niet-volledig-herstijlde deelschermen gebruikt (bv. brede
tabellen) die zelf geen kolombreedte-beperking willen. */
.mc-page-workspace {
/* Correctie (laatste polish): iets breder (was 1100px). */
max-width: 1180px;
margin-right: auto;
}
/* --------------------------------------------------------------------------
18. Dossiers — overzicht + detail-werkruimte (UI/UX Modernisering,
volledige platformdoorrol, module 1/2). Hergebruikt uitsluitend
bestaande classes uit app.css (.dossier-workspace, .dossier-tabs,
.status-pill, .dossier-summary, .dossier-field, .agenda-workspace__frame)
— hierkleuring/-typografie, geen enkele hernoemd of gedupliceerd.
-------------------------------------------------------------------------- */
.agenda-workspace__frame {
background: var(--mc-white);
border-color: var(--mc-line);
box-shadow: 0 1px 2px rgba(16, 27, 45, 0.03);
}
.dossier-workspace__header {
border-bottom-color: var(--mc-line);
}
.dossier-workspace__title {
font-family: var(--mc-font-display);
font-weight: 600;
color: var(--mc-navy);
}
.dossier-workspace__subject {
font-family: var(--mc-font-body);
color: var(--mc-ink);
}
.dossier-workspace__meta-item {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
}
.dossier-tabs {
border-bottom-color: var(--mc-line);
}
.dossier-tabs__link {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
}
.dossier-tabs__link:hover {
color: var(--mc-navy);
}
.dossier-tabs__link--active {
color: var(--mc-navy);
border-bottom-color: var(--mc-gold);
font-weight: 600;
}
.dossier-workspace__tab-title,
.dossier-section-title {
font-family: var(--mc-font-display);
font-weight: 600;
color: var(--mc-navy);
}
.dossier-summary__card {
background: var(--mc-cream);
border-color: var(--mc-line);
border-radius: var(--mc-radius-sm);
}
.dossier-summary__label {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
}
.dossier-summary__value {
font-family: var(--mc-font-body);
color: var(--mc-navy);
}
.dossier-field {
border-bottom-color: var(--mc-line);
}
.dossier-field__label {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
}
.dossier-field__value {
font-family: var(--mc-font-body);
color: var(--mc-ink);
}
/* Status-pill -> zachte, semantische MC-tinten (geen harde systeem-
kleuren) — hergebruikt de al bestaande badge-statustokens uit sectie
1. --deleted blijft bewust op de bestaande app.css --color-danger*
(nooit onderdeel van de MC-accentpalet, zuiver semantisch/gevaar). */
.status-pill--open {
color: var(--mc-status-open-text);
background: var(--mc-status-open-bg);
}
.status-pill--on-hold,
.status-pill--awaiting-client {
color: var(--mc-status-wait-text);
background: var(--mc-status-wait-bg);
}
.status-pill--completed {
color: var(--mc-status-info-text);
background: var(--mc-status-info-bg);
}
.status-pill--closed {
color: var(--mc-navy);
background: var(--mc-gold-wash);
}
.status-pill--archived {
color: var(--mc-ink-soft);
background: var(--mc-status-hold-bg);
}
/* --------------------------------------------------------------------------
19. Cliënten — overzicht + detail-werkruimte (UI/UX Modernisering,
volledige platformdoorrol, module 3). Hergebruikt uitsluitend bestaande
classes uit app.css (.client-workspace/.client-summary*/
.client-details-table) — dezelfde behandeling als .dossier-* hierboven.
.status-pill--* zelf is al herkleurd in sectie 18 (generiek component).
-------------------------------------------------------------------------- */
.client-workspace {
background: var(--mc-white);
border-color: var(--mc-line);
box-shadow: 0 1px 2px rgba(16, 27, 45, 0.03);
}
.client-workspace > h1 {
font-family: var(--mc-font-display);
font-weight: 600;
color: var(--mc-navy);
}
.client-summary__card {
background: var(--mc-cream);
border-color: var(--mc-line);
border-radius: var(--mc-radius-sm);
}
.client-summary__label {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
}
.client-summary__value {
font-family: var(--mc-font-body);
color: var(--mc-navy);
}
.client-details-table th {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
background: var(--mc-cream);
}
.client-details-table td,
.client-details-table th {
font-family: var(--mc-font-body);
border-bottom-color: var(--mc-line);
}
/* 20. Cliëntaanvragen (module 4) — hergebruikt .client-summary*/.mc-badge
uit sectie 19; hier alleen de eigen detailtabel-classes. */
.client-request-details-table th {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
background: var(--mc-cream);
}
.client-request-details-table td,
.client-request-details-table th {
font-family: var(--mc-font-body);
border-bottom-color: var(--mc-line);
}
/* 21. Agenda (module 5) — app.css gebruikt hier al --color-primary
(navy)/--color-accent (goud) i.p.v. blauw, dus alleen uitlijning op
de exacte MC-tokens + kader-/randstijl. Semantische statuskleuren
(--color-info*/--color-danger*/--color-success voor "gepland"/
"geannuleerd"/Google-verbonden) blijven bewust ongewijzigd. */
.agenda-workspace__frame {
border-color: var(--mc-line);
border-radius: var(--mc-radius);
box-shadow: none;
}
.agenda-toolbar-bar {
border-bottom-color: var(--mc-line);
}
.agenda-toolbar-bar__title {
font-family: var(--mc-font-display);
font-weight: 600;
color: var(--mc-navy);
}
.agenda-toolbar-bar__range-label {
font-family: var(--mc-font-body);
color: var(--mc-ink-soft);
}
a.btn-accent {
font-family: var(--mc-font-body);
background: var(--mc-gold);
border-radius: var(--mc-radius-sm);
}
a.btn-accent:hover {
background: var(--mc-gold-bright);
}
.agenda-nav-btn {
font-family: var(--mc-font-body);
background: var(--mc-cream);
color: var(--mc-navy);
}
.agenda-nav-btn:hover {
background: var(--mc-hover-wash);
}
.agenda-view-toggle {
border-color: var(--mc-line);
}
.agenda-view-toggle__link {
font-family: var(--mc-font-body);
color: var(--mc-navy);
border-right-color: var(--mc-line);
}
.agenda-view-toggle__link:hover {
background: var(--mc-hover-wash);
}
/* UI-polish (Agenda-herbeoordeling): actieve weergave als subtiel
goudaccent i.p.v. een zware navy-vulling — navy blijft de hoofdtekst-
kleur, goud is uitsluitend de accentmarkering. */
.agenda-view-toggle__link--active {
background: var(--mc-gold-wash);
color: var(--mc-navy);
font-weight: 600;
}
.agenda-side-panel__heading {
font-family: var(--mc-font-body);
color: var(--mc-navy);
}
.agenda-mini-calendar__day {
font-family: var(--mc-font-body);
color: var(--mc-ink);
}
.agenda-mini-calendar__day:hover {
background: var(--mc-hover-wash);
}
.agenda-mini-calendar__day--today {
background: var(--mc-gold);
color: var(--mc-white);
}
.agenda-mini-calendar__day--has-events::after {
background: var(--mc-navy);
}
.agenda-mini-calendar__day--today.agenda-mini-calendar__day--has-events::after {
background: var(--mc-white);
}
.agenda-filter-radio {
font-family: var(--mc-font-body);
color: var(--mc-ink);
}
.agenda-filter-radio:hover .agenda-filter-radio__dot {
border-color: var(--mc-navy);
}
.agenda-filter-radio--active {
color: var(--mc-navy);
}
.agenda-filter-radio--active .agenda-filter-radio__dot {
border-color: var(--mc-gold);
background: var(--mc-gold);
}
.agenda-google-compact__email,
.agenda-google-compact__status-label,
.agenda-google-compact__meta {
font-family: var(--mc-font-body);
}
.agenda-planner__month-cell {
border-color: var(--mc-line);
border-radius: var(--mc-radius-sm);
}
.agenda-planner__month-cell--today {
border-color: var(--mc-gold);
}
.agenda-planner__month-daynumber {
font-family: var(--mc-font-body);
color: var(--mc-ink);
}
.agenda-hourgrid__days,
.agenda-hourgrid__day-track {
border-color: var(--mc-line);
}
.agenda-hourgrid__event-time {
color: var(--mc-navy);
}
/* UI-polish (Agenda-herbeoordeling) — compactere, rustigere werkruimte:
smaller navigatiepaneel, dichtere sectiepadding, subtielere raster-
lijnen, iets ruimere afspraakblokken. Geen wijziging aan structuur/
event-positionering/lane-logica — uitsluitend maten/kleuren. */
.agenda-workspace__body--with-sidebar {
grid-template-columns: 240px 1fr;
}
.agenda-side-panel {
border-right-color: var(--mc-line);
}
.agenda-side-panel__section {
padding: var(--space-sm) var(--space-sm);
}
.agenda-side-panel__section + .agenda-side-panel__section {
border-top-color: var(--mc-line);
}
.agenda-toolbar-bar {
padding-top: 6px;
padding-bottom: 6px;
}
.agenda-hourgrid__day-track {
background-image: repeating-linear-gradient(
to bottom,
rgba(228, 223, 211, 0.6) 0,
rgba(228, 223, 211, 0.6) 1px,
transparent 1px,
transparent 48px
);
}
.agenda-hourgrid__event {
padding: 3px 8px;
border-radius: var(--mc-radius-sm);
}
.agenda-hourgrid__event-title {
color: var(--mc-ink);
}
/* --------------------------------------------------------------------------
22. .mc-kpi-grid / .mc-kpi-tile — compacte samenvattingstegels
(Cliëntaanvragen-overzicht, herbruikbaar voor overige modules).
Wit oppervlak, dunne lijn, kleine radius, vrijwel geen schaduw —
zelfde basiswaarden als .mc-card, geen nieuwe kleuren/tokens.
-------------------------------------------------------------------------- */
.mc-kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-md);
}
.mc-kpi-tile {
padding: var(--space-md);
background: var(--mc-white);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius);
box-shadow: 0 1px 2px rgba(16, 27, 45, 0.03);
}
.mc-kpi-tile__label {
display: block;
margin-bottom: 4px;
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mc-ink-soft);
}
.mc-kpi-tile__value {
font-family: var(--mc-font-display);
font-size: 24px;
font-weight: 600;
color: var(--mc-navy);
}
/* Subtiel goudaccent (rand, niet de tekst) voor de "Nieuw"-tegel. */
.mc-kpi-tile--accent {
border-color: var(--mc-gold);
}
@media (max-width: 968px) {
.mc-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.mc-kpi-grid {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
23. .mc-record-grid / .mc-record-card — generiek tegelpatroon voor
overzichtspagina's, vervangt tabellen/lijstregels waar praktisch
passend. Bouwt voort op dezelfde basiswaarden als .mc-card (wit,
dunne lijn, kleine radius, vrijwel geen schaduw) — geen nieuwe
kleuren/tokens. Bedoeld voor hergebruik op Cliënten/Dossiers/
Activiteiten/Facturen/Tarieven/Urenregistratie/Gebruikers.
-------------------------------------------------------------------------- */
.mc-record-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
}
.mc-record-card {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--mc-white);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius);
box-shadow: 0 1px 2px rgba(16, 27, 45, 0.03);
}
.mc-record-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-sm);
}
.mc-record-card__ref {
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
font-weight: 600;
color: var(--mc-ink-soft);
}
.mc-record-card__body {
display: flex;
flex-direction: column;
gap: 2px;
}
.mc-record-card__title {
font-family: var(--mc-font-display);
font-size: var(--font-size-base, 16px);
font-weight: 600;
color: var(--mc-navy);
}
.mc-record-card__line {
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
color: var(--mc-ink-soft);
}
.mc-record-card__actions {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: auto;
padding-top: var(--space-xs);
}
/* Compacte, subtiele knopvariant voor tegel-acties (Bekijken/
Bewerken) — bouwt voort op .mc-button-secondary, uitsluitend
kleiner en zonder vet, zodat het duidelijk een knop is (geen kale
tekstlink) zonder zwaar/primair te ogen. */
.mc-button-tiny {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--mc-radius-sm);
border: 1px solid var(--mc-line);
background: var(--mc-white);
color: var(--mc-navy);
font-family: var(--mc-font-body);
font-size: 12px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--transition-fast, 100ms ease-in-out), border-color var(--transition-fast, 100ms ease-in-out);
}
.mc-button-tiny:hover {
background: var(--mc-hover-wash);
border-color: var(--mc-gold);
}
/* Tarieven-pagina — uitsluitend de "Activeren"-knop (tariffs/index.php).
Dupliceert bewust dezelfde eigenschappen als .mc-button-tiny hierboven
(compacte hoogte/breedte, lichte/witte achtergrond, bestaande
randkleur, typografie/padding/hoverstijl) als eigen, losstaande class
— geen koppeling aan .mc-button-tiny zelf, geen wijziging daaraan. De
"Deactiveren"-knop (andere tak van dezelfde if/else) blijft bewust
`.btn-secondary`, buiten de scope van deze wijziging. */
.tariff-activate-button {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: var(--mc-radius-sm);
border: 1px solid var(--mc-line);
background: var(--mc-white);
color: var(--mc-navy);
font-family: var(--mc-font-body);
font-size: 12px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--transition-fast, 100ms ease-in-out), border-color var(--transition-fast, 100ms ease-in-out);
}
.tariff-activate-button:hover {
background: var(--mc-hover-wash);
border-color: var(--mc-gold);
}
/* Cliëntaanvraag-detailpagina, tab "Behandeling" — uitsluitend de
"Status bijwerken"-knop (client_requests/show.php). De omringende
`.dossier-status-form` (gedeelde flex-rij-layout, ook gebruikt door
time_entries/show.php — hier bewust niet aangepast) zet geen eigen
`align-items`, dus de default `align-items: stretch` rekte deze knop
op tot de hoogte van de naastgelegen `.mc-form-field`-kolom
(label + select, ~65-90px) — ondanks de compacte `.mc-button-tiny`-
opmaak zelf (padding/font-size/border), die uitsluitend de
inhoudsgrootte bepaalt, niet de door stretch afgedwongen hoogte.
Uitsluitend hier, via deze aparte class:
- `align-self: center` (i.p.v. de eerder gebruikte `flex-end`) —
`flex-end` lijnt uit met de onderkant van de hele kolom (label +
select), wat de knop t.o.v. het select-veld zelf juist te laag
liet ogen, omdat het label erboven meetelt in die kolomhoogte;
`center` centreert de knop op de volledige kolomhoogte, wat
visueel wél naast/gecentreerd op het select-veld uitkomt;
- `min-width` zodat "Status bijwerken" voldoende horizontale ruimte
krijgt i.p.v. exact op de tekstbreedte te sluiten (`.mc-button-tiny`
zelf heeft geen `min-width`, dat blijft ongewijzigd voor
Bekijken/Bewerken elders);
- `white-space: nowrap` expliciet herhaald (al aanwezig via
`.mc-button-tiny`, hier bewust niet van afhankelijk).
Hoogte blijft de eigen, natuurlijke `.mc-button-tiny`-hoogte (geen
stretch meer). Geen wijziging aan
`.dossier-status-form`/`.mc-button-tiny`/`.mc-button` zelf. */
.client-request-status-submit {
align-self: center;
min-width: 120px;
white-space: nowrap;
}
@media (max-width: 968px) {
.mc-record-grid {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
24. .mc-timeline — verticale activiteitentijdlijn (Cliëntaanvragen-
overzicht, "Activiteit"-sectie; herbruikbaar voor overige modules).
Kleine ronde marker + dunne verbindende lijn, geen zware losse
kaarten per gebeurtenis. Goud uitsluitend als subtiel markeraccent;
titel/datum in de al bestaande navy/gedempte inkttokens. Statusbadge
bij een gebeurtenis is optioneel — de bestaande .mc-badge-varianten
worden hergebruikt, geen nieuwe kleuren.
-------------------------------------------------------------------------- */
.mc-timeline {
list-style: none;
margin: 0;
padding: 0;
}
.mc-timeline-item {
position: relative;
padding: 0 0 var(--space-md) 24px;
}
.mc-timeline-item:last-child {
padding-bottom: 0;
}
.mc-timeline-item::before {
content: "";
position: absolute;
left: 3px;
top: 4px;
width: 8px;
height: 8px;
border-radius: var(--mc-radius-full);
background: var(--mc-gold);
box-shadow: 0 0 0 2px var(--mc-white);
}
.mc-timeline-item::after {
content: "";
position: absolute;
left: 6.5px;
top: 14px;
bottom: 0;
width: 1px;
background: var(--mc-line);
}
.mc-timeline-item:last-child::after {
display: none;
}
.mc-timeline-item__meta {
font-family: var(--mc-font-body);
font-size: 11px;
color: var(--mc-ink-soft);
margin-bottom: 2px;
}
.mc-timeline-item__title-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.mc-timeline-item__title {
font-family: var(--mc-font-display);
font-size: var(--font-size-sm, 14px);
font-weight: 600;
color: var(--mc-navy);
}
.mc-timeline-item__subtitle {
font-family: var(--mc-font-body);
font-size: 12px;
color: var(--mc-ink-soft);
margin-top: 2px;
}
/* --------------------------------------------------------------------------
25. .mc-form-workspace — generieke MC-formulierwerkruimte (Nieuwe
cliëntaanvraag; herbruikbaar voor Nieuwe cliënt/Nieuw dossier/Nieuwe
activiteit/Nieuwe factuur/Nieuwe urenregistratie). Eén wit oppervlak
met dunne lijn/kleine radius/vrijwel geen schaduw (zelfde
basiswaarden als .mc-card/.mc-dashboard-panel), opgedeeld in
secties door een dunne interne scheidingslijn — geen losse kaart
per sectie. Hergebruikt .mc-form-control voor alle velden (al
bestaand, sectie 10) — geen nieuwe veldstyling.
-------------------------------------------------------------------------- */
/* Smallere, gecentreerde breedte voor formulierpagina's — bewust
smaller dan .mc-page-workspace (dat overzichtspagina's gebruiken):
een formulier leest rustiger/professioneler op ~720px dan uitgerekt
over bijna de volledige contentbreedte. Generiek, herbruikbaar op
alle create/edit-pagina's. */
.mc-form-container {
max-width: 720px;
margin: 0 auto;
}
.mc-form-workspace {
background: var(--mc-white);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius);
box-shadow: 0 1px 2px rgba(16, 27, 45, 0.03);
}
.mc-form-section {
padding: var(--space-lg);
border-bottom: 1px solid var(--mc-line);
}
.mc-form-section:last-of-type {
border-bottom: none;
}
.mc-form-section__header {
margin: 0 0 var(--space-md);
font-family: var(--mc-font-display);
font-size: var(--font-size-base, 16px);
font-weight: 600;
color: var(--mc-navy);
}
.mc-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md) var(--space-lg);
}
.mc-form-field {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
}
.mc-form-field--full {
grid-column: 1 / -1;
}
.mc-form-field label {
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
font-weight: 600;
color: var(--mc-ink);
}
.mc-form-field textarea.mc-form-control {
min-height: 160px;
resize: vertical;
}
.mc-form-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-lg);
background: var(--mc-cream);
border-top: 1px solid var(--mc-line);
border-bottom-left-radius: var(--mc-radius);
border-bottom-right-radius: var(--mc-radius);
}
@media (max-width: 640px) {
.mc-form-grid {
grid-template-columns: 1fr;
}
.mc-form-actions {
flex-direction: column;
align-items: stretch;
}
.mc-form-actions .mc-button {
justify-content: center;
}
}
/* --------------------------------------------------------------------------
26. .mc-stat-strip — gecombineerde KPI-balk (uniformering
overzichtspagina's, zelfde rustige opbouw als de bestaande Dashboard
KPI-strip: .dashboard-grid--stats/.dashboard-stat-card, hier
UITSLUITEND als nieuwe, generieke component nagebouwd — het
Dashboard zelf en zijn eigen classes blijven volledig ongewijzigd,
geen regressierisico). Eén doorlopend wit werkvlak, dunne interne
verticale scheidingslijnen, geen losse kaartrand per KPI, geen
schaduw. Vervangt `.mc-kpi-grid`/`.mc-kpi-tile` module voor module
(die blijven bestaan zolang niet alle modules zijn omgezet).
-------------------------------------------------------------------------- */
/* Bewust GEEN eigen border/border-radius/schaduw hier — .mc-stat-strip
is ontworpen om te leven BINNEN een al bestaand, al bordered
werkvlak (bijv. .mc-dashboard-panel__section), exact zoals de
Dashboard KPI-strip (.dashboard-grid--stats) zelf ook geen eigen
omkadering heeft. Een eigen border hier zou een "kaart-in-een-kaart"
opleveren — precies het effect dat vermeden moet worden. */
.mc-stat-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Modifier voor een strip met 3 items i.p.v. 4 (bijv. Tarieven:
Totaal/Actief/Inactief — bewust geen vierde, verzonnen KPI). Alleen
het aantal kolommen op desktop wijkt af; de bestaande responsive
breakpoints hieronder (2 kolommen ≤968px, 1 kolom ≤640px) gelden
ongewijzigd ook hiervoor. */
.mc-stat-strip--cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mc-stat-strip__item {
padding: var(--space-md) var(--space-lg);
border-right: 1px solid var(--mc-line);
min-width: 0;
}
.mc-stat-strip__item:last-child {
border-right: none;
}
.mc-stat-strip__label {
display: block;
margin-bottom: 4px;
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mc-ink-soft);
}
.mc-stat-strip__value {
font-family: var(--mc-font-display);
font-size: 24px;
font-weight: 600;
color: var(--mc-navy);
}
.mc-stat-strip__link {
display: inline-block;
margin-top: 4px;
font-family: var(--mc-font-body);
font-size: 12px;
font-weight: 600;
color: var(--mc-gold);
text-decoration: none;
}
.mc-stat-strip__link:hover {
color: var(--mc-navy-deep);
}
@media (max-width: 968px) {
.mc-stat-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mc-stat-strip__item:nth-child(2n) {
border-right: none;
}
.mc-stat-strip__item:nth-child(n+3) {
border-top: 1px solid var(--mc-line);
}
}
@media (max-width: 640px) {
.mc-stat-strip {
grid-template-columns: 1fr;
}
.mc-stat-strip__item {
border-right: none;
}
.mc-stat-strip__item:not(:first-child) {
border-top: 1px solid var(--mc-line);
}
}
/* --------------------------------------------------------------------------
27. Facturen-tabel — kleine, module-specifieke leesbaarheidspolish
(bewust NIET generiek gemaakt: bedrag-rechts-uitlijning en de
warme hover zijn specifiek voor deze tabel, geen ander overzicht
vraagt er nu om — voorkomt onnodige generieke wildgroei). Uitsluitend
opmaak: geen wijziging aan bedragen/BTW/statuslogica.
-------------------------------------------------------------------------- */
.invoices-list-table th:nth-child(5),
.invoices-list-table td:nth-child(5) {
text-align: right;
}
table.invoices-list-table tbody tr:hover {
background: rgba(184, 150, 79, 0.07);
}
/* Tarieven-tabel: zelfde bedrag-rechts-uitlijning als de Facturen-tabel
hierboven, toegepast op de "Uurtarief"-kolom (3e kolom: Code/Naam/
Uurtarief/...). Uitsluitend opmaak, geen wijziging aan tariefberekening. */
.tariffs-list-table th:nth-child(3),
.tariffs-list-table td:nth-child(3) {
text-align: right;
}
.invoices-list-table__number {
font-weight: 600;
color: var(--mc-navy);
}
.invoices-list-table__dossier {
color: var(--mc-ink-soft);
}
.invoices-list-table__action {
color: var(--mc-navy);
font-size: var(--font-size-sm, 14px);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.invoices-list-table__action:hover {
color: var(--mc-gold);
}
/* "Facturen per status" — compact grafisch overzicht (invoices/index.php),
eenvoudige horizontale CSS-balken, geen grafiekenbibliotheek/SVG/JS.
Kleuren hergebruiken de bestaande mc-badge-statustokens (dezelfde
--mc-status-*-text-variabelen als de badge-tekstkleur, hier als
volle balkvulling — geen nieuwe kleuren) plus de bestaande
--color-danger voor Vervallen. */
.invoice-status-chart {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.invoice-status-chart__row {
display: grid;
grid-template-columns: 156px 1fr 32px;
align-items: center;
gap: var(--space-sm);
}
.invoice-status-chart__label {
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
color: var(--mc-ink-soft);
line-height: 1.25;
overflow-wrap: break-word;
}
.invoice-status-chart__track {
display: block;
height: 10px;
border-radius: var(--mc-radius-full);
background: var(--mc-cream);
overflow: hidden;
}
.invoice-status-chart__bar {
display: block;
height: 100%;
border-radius: var(--mc-radius-full);
}
.invoice-status-chart__bar--concept { background: var(--mc-status-wait-text); }
.invoice-status-chart__bar--verzonden { background: var(--mc-status-info-text); }
.invoice-status-chart__bar--betaald { background: var(--mc-status-open-text); }
.invoice-status-chart__bar--vervallen { background: var(--color-danger); }
.invoice-status-chart__value {
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
font-weight: 600;
color: var(--mc-navy);
text-align: right;
}
@media (max-width: 480px) {
.invoice-status-chart__row {
grid-template-columns: 92px 1fr 28px;
}
}
/* --------------------------------------------------------------------------
28. Dossier Workspace — modernisering alle tabs (uitsluitend
presentatie, geen enkele bestaande class/selector elders gewijzigd).
-------------------------------------------------------------------------- */
/* Tekstvariant van .mc-stat-strip__value voor niet-numerieke waarden
(cliëntnaam/behandelaar/dossiertype) op de Dossierdetail-samenvatting
— zelfde plek/gewicht als het cijfer-gebruik elders, alleen kleiner
formaat zodat langere tekst niet overheerst. */
.mc-stat-strip__value--text {
font-size: var(--font-size-base, 16px);
}
/* Combineerbaar met .mc-stat-strip__value(--text) — voor een waarde die op
één regel moet blijven (bijv. een cliëntnummer dat niet midden-in mag
afbreken) maar bij een smalle kolom niet buiten de rechterrand mag lopen
(bijv. een lang e-mailadres) in plaats van te overflowen. .mc-stat-strip
__item heeft hiervoor min-width:0 (grid-items krimpen anders niet onder
hun intrinsieke tekstbreedte). */
.mc-stat-strip__value--truncate {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Danger zone (verwijderen) — pure HTML /, geen
JavaScript. Standaard dichtgeklapt: alleen een kleine, gedempte
tekstlink zichtbaar; het bestaande delete-formulier (CSRF/method-
override/confirm-dialoog/delete_reason) verschijnt pas na een klik,
functioneel volledig ongewijzigd. */
.dossier-danger-zone {
display: flex;
align-items: flex-start;
margin-top: 32px;
}
.dossier-danger-zone__trigger {
cursor: pointer;
font-family: var(--mc-font-body);
font-size: 13px;
color: var(--mc-ink-soft);
list-style: none;
user-select: none;
}
.dossier-danger-zone__trigger::-webkit-details-marker {
display: none;
}
.dossier-danger-zone__trigger:hover,
.dossier-danger-zone[open] .dossier-danger-zone__trigger {
color: var(--color-danger, #c62828);
}
.dossier-danger-zone__form {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
/* Dossiergegevens (Overzicht-tab) — nieuwe, losstaande 2-koloms
detailgrid. Bewust NIET .dossier-overview/.dossier-field hergebruikt:
een latere, al bestaande app.css-regel had die classes al herschreven
naar een 1-koloms lijst mét een verborgen-veld-hack op basis van
nth-child — hergebruik daarvan voor een nieuwe indeling zou
onvoorspelbaar interacteren met die bestaande regel. */
.dossier-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md) var(--space-lg);
}
.dossier-detail-field {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--mc-line);
}
.dossier-detail-field--full {
grid-column: 1 / -1;
}
.dossier-detail-field__label {
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mc-ink-soft);
}
.dossier-detail-field__value {
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
color: var(--mc-ink);
}
/* Prominente tekstvariant van .dossier-detail-field__value — voor een
enkel, benadrukt veld binnen een detail-grid (bijv. "Onderwerp" op
de Cliëntaanvraag-tab "Aanvraag"). */
.dossier-detail-field__value--lead {
font-family: var(--mc-font-display);
font-size: 18px;
font-weight: 600;
color: var(--mc-navy);
}
@media (max-width: 640px) {
.dossier-detail-grid {
grid-template-columns: 1fr;
}
}
/* Mini-maandkalender (Agenda-tab) — hergebruikt volledig de al
bestaande, generieke .agenda-mini-calendar__*-classes (geen nieuwe
kalender-CSS). Dit blokje geeft uitsluitend wat ruimte eromheen. */
.dossier-mini-agenda {
max-width: 320px;
margin-bottom: 32px;
}
/* Rustige secundaire link (bijv. "Bekijk volledige agenda") — subtiel,
geen knop-look, navy met goud bij hover, zelfde conventie als
.mc-stat-strip__link. */
.dossier-secondary-link {
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
font-weight: 600;
color: var(--mc-navy);
text-decoration: none;
}
.dossier-secondary-link:hover {
color: var(--mc-gold);
}
/* --------------------------------------------------------------------------
29. Dossier Workspace — tabinhoud-ritmiek + Documenten-upload polish
(uitsluitend presentatie, geen enkele bestaande class/selector elders
gewijzigd; geen wijziging aan formulier-action/method/CSRF/velden).
-------------------------------------------------------------------------- */
/* Eén gedeelde ritmiek voor alle tabs (Dossier Workspace + Cliëntaanvraag
Workspace): consistente ruimte tussen de samenvattingsstrip en de eerste
sectietitel/content van elke tab, nu met een subtiele scheidingslijn erboven
zodat de tabinhoud duidelijker als eigen sectie start (in plaats van
uitsluitend margin, wat te krap oogde tussen strip en content). */
.dossier-workspace__tab-section {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--mc-line);
}
/* Iets meer lucht tussen een sectietitel+actie-rij en de content
eronder (was 16px via app.css, hier verruimd naar 24px voor de
toolbar-variant specifiek — .dossier-section-title's eigen
margin-bottom van 16px blijft ongewijzigd voor de kale titel-variant,
bijv. "Komende afspraken"). */
.dossier-workspace__tab-toolbar {
margin-bottom: 24px;
}
.dossier-workspace__tab-footer {
margin-top: 24px;
}
/* "Totaal uren" — rustige label/waarde-regel bovenaan de Uren-tab,
i.p.v. hergebruik van .dossier-workspace__tab-toolbar (dat was een
toevallige, oneigenlijke hergebruik). */
.dossier-uren-total {
display: flex;
align-items: baseline;
gap: 8px;
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--mc-line);
}
.dossier-uren-total__label {
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mc-ink-soft);
}
.dossier-uren-total__value {
font-family: var(--mc-font-display);
font-size: 20px;
font-weight: 600;
color: var(--mc-navy);
}
/* Documenten-tab — rustige uploadsectie: licht oppervlak, dunne rand,
kleine radius, ruimte eronder vóór de documentlijst/empty-state. */
.dossier-upload-section {
background: var(--mc-cream);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius);
padding: var(--space-lg);
margin-bottom: 36px;
}
.dossier-upload-section__title {
margin: 0 0 var(--space-md);
font-family: var(--mc-font-display);
font-size: var(--font-size-base, 16px);
font-weight: 600;
color: var(--mc-navy);
}
.dossier-upload-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
max-width: 480px;
}
.dossier-upload-form__actions {
margin-top: 4px;
}
/* Modern bestand-uploadveld — uitsluitend CSS (::file-selector-button
heeft brede ondersteuning), geen JavaScript. Zelfde /` meer, geen aparte
klik-om-te-tonen-titel): de zichtbaarheid wordt al volledig door de
tab-conditional in de view geregeld (alleen tab Overzicht) — de rode
knop draagt zelf de actienaam, dus een extra titel erboven zou
dubbelop zijn (het gemelde overlap-/dubbeltekst-probleem).
-------------------------------------------------------------------------- */
.mc-danger-zone {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--mc-line);
}
.mc-danger-zone__description {
margin: 0 0 16px;
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
color: var(--mc-ink-soft);
}
.mc-danger-zone__form {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 16px;
}
.mc-danger-zone__field {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 260px;
min-width: 200px;
}
.mc-danger-zone__field label {
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mc-ink-soft);
}
/* Zelfde hoogte als de knop hiernaast (.mc-danger-zone__actions
.btn-danger) — beide expliciet 44px met box-sizing:border-box,
i.p.v. te vertrouwen op gelijke padding/line-height tussen een
(die lopen elders in dit stylesheet net
genoeg uiteen om een paar pixels te schelen). */
.mc-danger-zone__field input {
height: 44px;
box-sizing: border-box;
padding: 0 14px;
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
color: var(--mc-ink);
background: var(--mc-cream);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius-sm);
}
.mc-danger-zone__field input:focus {
outline: none;
border-color: var(--mc-navy);
box-shadow: 0 0 0 3px rgba(184, 150, 79, 0.18), 0 0 0 1px var(--mc-navy);
background: var(--mc-white);
}
.mc-danger-zone__actions {
flex: 0 0 auto;
}
.mc-danger-zone__actions .btn-danger {
height: 44px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
padding: 0 20px;
white-space: nowrap;
}
@media (max-width: 640px) {
.mc-danger-zone__form {
flex-direction: column;
align-items: stretch;
}
.mc-danger-zone__field {
flex: 1 1 auto;
min-width: 0;
}
.mc-danger-zone__actions {
flex: 1 1 auto;
}
.mc-danger-zone__actions .btn-danger {
width: 100%;
justify-content: center;
}
}
/* --------------------------------------------------------------------------
.mc-status-change — rustige statuswijziging-regel (dropdown + knop),
voor Workspace-detailpagina's met een $allowedNextStatuses-workflow
(bijv. Factuur-status). Bewust losstaand van .mc-danger-zone (dit is
geen destructieve actie) — zelfde visuele taal (divider/spacing/
veldhoogte-afstemming), maar zonder een gedeelde selector te
verbreden die ook op andere, al goedgekeurde pagina's landt.
-------------------------------------------------------------------------- */
.mc-status-change {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--mc-line);
}
.mc-status-change__form {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 16px;
}
.mc-status-change__field {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 260px;
min-width: 200px;
}
.mc-status-change__field label {
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mc-ink-soft);
}
.mc-status-change__field select {
height: 44px;
box-sizing: border-box;
padding: 0 14px;
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
color: var(--mc-ink);
background: var(--mc-cream);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius-sm);
}
.mc-status-change__field select:focus {
outline: none;
border-color: var(--mc-navy);
box-shadow: 0 0 0 3px rgba(184, 150, 79, 0.18), 0 0 0 1px var(--mc-navy);
background: var(--mc-white);
}
.mc-status-change__actions {
flex: 0 0 auto;
}
.mc-status-change__actions .mc-button {
height: 44px;
box-sizing: border-box;
padding: 0 20px;
white-space: nowrap;
}
@media (max-width: 640px) {
.mc-status-change__form {
flex-direction: column;
align-items: stretch;
}
.mc-status-change__field {
flex: 1 1 auto;
min-width: 0;
}
.mc-status-change__actions {
flex: 1 1 auto;
}
.mc-status-change__actions .mc-button {
width: 100%;
justify-content: center;
}
}
/* --------------------------------------------------------------------------
32. .mc-checkbox-group — gedeelde, rustige checkbox-optie (Uren
registreren: Declarabel/Factureerbaar). Generiek, niet urenregistratie-
specifiek genoemd, zodat elk create/edit-formulier met een paar losse
checkboxen dit kan hergebruiken. Native (klik-op-tekst blijft werken zonder JavaScript) — uitsluitend
layout/kleur, geen custom-getekende toggle.
-------------------------------------------------------------------------- */
.mc-checkbox-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.mc-checkbox-option {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: var(--mc-cream);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius-sm);
cursor: pointer;
}
.mc-checkbox-option input[type="checkbox"] {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 3px;
accent-color: var(--mc-navy);
}
.mc-checkbox-option__body {
display: flex;
flex-direction: column;
gap: 2px;
}
.mc-checkbox-option__label {
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
font-weight: 600;
color: var(--mc-ink);
}
.mc-checkbox-option__hint {
font-family: var(--mc-font-body);
font-size: 12px;
color: var(--mc-ink-soft);
}
/* --------------------------------------------------------------------------
33. Urenregistratie-tabel — kleine, module-specifieke leesbaarheids-
polish (zelfde bewuste keuze als sectie 27, Facturen-tabel: niet
generiek gemaakt). Uitsluitend opmaak: geen wijziging aan uren-
berekening/declarabiliteits-/facturatielogica.
-------------------------------------------------------------------------- */
.time-entries-list-table td {
padding-top: 15px;
padding-bottom: 15px;
}
.time-entries-list-table__dossier {
color: var(--mc-ink-soft);
text-decoration: none;
}
.time-entries-list-table__dossier:hover {
color: var(--mc-navy);
}
/* --------------------------------------------------------------------------
34. .mc-form-section__intro — subtiele crème "introband" bovenaan een
formuliersectie (titel + korte subtekst), voor formulieren die dat
expliciet vragen (bijv. users/create.php). Generiek, opt-in: een
.mc-form-section zonder deze intro-wrapper ziet er exact zo uit als
voorheen — geen enkel al goedgekeurd formulier hierdoor gewijzigd.
-------------------------------------------------------------------------- */
.mc-form-section__intro {
margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--mc-cream);
border-bottom: 1px solid var(--mc-line);
}
.mc-form-section:first-of-type .mc-form-section__intro {
border-radius: var(--mc-radius) var(--mc-radius) 0 0;
}
.mc-form-section__intro .mc-form-section__header {
margin-bottom: 4px;
}
.mc-form-section__subtext {
margin: 0;
font-family: var(--mc-font-body);
font-size: var(--font-size-sm, 14px);
color: var(--mc-ink-soft);
}
/* --------------------------------------------------------------------------
35. Gebruikersbeheer — compacte filterbalk + permissie-chips (uitsluitend
presentatie; filtering zelf gebeurt in-view over reeds geladen data, geen
nieuwe query/route).
-------------------------------------------------------------------------- */
.mc-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
margin-bottom: var(--space-md);
}
.mc-filter-bar__field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 200px;
}
.mc-filter-bar__field label {
font-family: var(--mc-font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--mc-ink-soft);
}
.mc-filter-bar__actions {
flex: 0 0 auto;
display: flex;
gap: 8px;
}
@media (max-width: 640px) {
.mc-filter-bar {
flex-direction: column;
align-items: stretch;
}
}
/* Rechtenmatrix-tab: rolnaam + korte omschrijving, en permissiecodes als
compacte, rustige chips i.p.v. een kale komma-lijst. */
.mc-role-matrix-row__name {
font-family: var(--mc-font-display);
font-weight: 600;
color: var(--mc-navy);
}
.mc-role-matrix-row__description {
display: block;
margin-top: 2px;
font-family: var(--mc-font-body);
font-size: 12px;
color: var(--mc-ink-soft);
}
.mc-permission-chip-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* .dossier-status-form — gedeelde flex-wrap-layout voor een rij losse
per-status-formulieren (elk form = één knop), i.p.v. een inline
style="display:inline-block; margin-right: 8px;" per formulier op
elke aparte pagina. Al als kale, ongebruikte semantische class
aanwezig op client_requests/show.php; hier voor het eerst ook
daadwerkelijk gestyled. */
.dossier-status-form {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mc-permission-chip {
display: inline-block;
padding: 2px 8px;
font-family: var(--mc-font-body);
font-size: 11px;
color: var(--mc-ink-soft);
background: var(--mc-cream);
border: 1px solid var(--mc-line);
border-radius: var(--mc-radius-sm);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
36. Brief detailpagina (letters/show.php) — voorvertoning van
letter_body. Voorheen een losse inline