/* =====================================================================
LETTERTYPEN — zelf gehost (Facelift 1.0, FL-9)
Lora (koppen) en Instrument Sans (lopende tekst) worden vanaf de
eigen server geladen. Geen verzoeken naar Google Fonts: sneller,
werkt offline, en er lekt geen bezoekers-IP naar derden (AVG).
Variabele fonts (wght 400-700), gesubset op Latijnse tekens.
Licenties: SIL OFL, zie /assets/fonts/OFL-*.txt.
===================================================================== */
@font-face {
font-family: 'Lora';
src: url('/assets/fonts/lora-var.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lora';
src: url('/assets/fonts/lora-var-italic.woff2') format('woff2');
font-weight: 400 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('/assets/fonts/instrumentsans-var.woff2') format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Instrument Sans';
src: url('/assets/fonts/instrumentsans-var-italic.woff2') format('woff2');
font-weight: 400 700;
font-style: italic;
font-display: swap;
}
/* =====================================================================
Beheervereniging Kop van Waal — huisstijl
Grounded in the place: navy ink + ochre (de pergolakleur van de wijk).
Mobile-first, geen overflow, mobiel menu.
===================================================================== */
:root {
/* FL-9: navy en creme afgestemd op de Facelift 1.0-mockup */
--ink: #1c2940; /* diep navy — architectuur, vertrouwen */
--ink-2: #243352;
--ink-soft: #51607a;
/* Gedempte tekst: .hint, placeholders, tabelkoppen, labels bij kerncijfers.
Donkerder dan het oorspronkelijke #8896aa, dat op wit maar 3.0:1 haalde en
op --surface 2.68:1, ruim onder de 4.5:1 die WCAG AA vraagt voor gewone
tekst. Deze waarde haalt 5.1 op wit en 4.56 op --surface. */
--ink-muted: #606f86;
--line: #e6e0d4; /* warme hairline — bijna onzichtbaar op wit */
--line-soft: #f1eee6;
--canvas: #ffffff;
--surface: #f6f3ec; /* warm creme — past bij de oker-identiteit */
--surface-2: #eae7de;
/* Ochre — getrokken uit de houten pergola's van de wijk */
--ochre: #c98a2b;
/* Iets donkerder dan #a06a18, zodat badges en avatars op --ochre-soft ook
4.5:1 halen (was 4.10:1). Op wit gaat het van 4.60 naar 5.06. */
--ochre-dark: #976417;
--ochre-soft: #fbf1de;
--ochre-line: #ecd6a8;
--green: #1d7a52;
--green-soft: #e7f4ee;
/* FL-13: derde chipkleur uit de facelift-mockup (naast groen en oker) */
--paars: #5d4f87;
--paars-soft: #ece8f4;
/* Net donkerder dan #9a6a00, zodat badges op --amber-soft 4.5:1 halen. */
--amber: #956600;
--amber-soft: #fbf2dd;
--red: #b4322a;
--red-soft: #fbeae8;
--info: #2c4d80;
--info-soft: #eaf0f9;
--font-display: 'Lora', Georgia, serif;
--font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
--r-sm: 10px;
--r: 14px;
--r-lg: 18px;
/* FL-9: schaduwen in navy-tint, zachter zoals de mockup */
--shadow-sm: 0 1px 2px rgba(28,41,64,.06), 0 6px 18px rgba(28,41,64,.05);
--shadow: 0 2px 4px rgba(28,41,64,.07), 0 18px 44px -16px rgba(28,41,64,.18);
--maxw: 1040px;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* Altijd een scrollbalk(-track) tonen: voorkomt én het verspringen van de
layout tussen korte en lange pagina's, én de lege witte goot die
scrollbar-gutter op korte pagina's naast de donkere balk achterliet. */
html {
-webkit-text-size-adjust: 100%; overflow-y: scroll; background: var(--surface);
/* Vloeiend scrollen naar anker-doelen (bv. "+ Taak maken" / "+ Melding maken").
scroll-padding-top houdt het doel vrij van de vaste (sticky) kopbalk. */
scroll-behavior: smooth; scroll-padding-top: 80px;
}
body {
font-family: var(--font-body);
font-size: 16px; line-height: 1.6;
color: var(--ink); background: var(--surface);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
overflow-x: hidden;
}
a { color: var(--ochre-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 1000; }
.skip-link:focus { left: 0; }
/* Focusring met voldoende contrast (WCAG: minimaal 3:1 op wit) */
:focus-visible { outline: 2px solid var(--ochre-dark); outline-offset: 2px; }
/* =====================================================================
HEADER — solide navy, met mobiel menu
===================================================================== */
.topbar {
background: var(--ink);
position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
max-width: var(--maxw); margin: 0 auto;
padding: 0 18px; min-height: 62px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
position: relative;
}
/* Sinds het belletje en de avatar (Facelift 1.0) is de rolverdeling omgedraaid:
de navigatie en de knoppen rechts zijn vaste bediening en krimpen nooit; een
lange verenigingsnaam kort netjes in met puntjes (ellipsis staat al op
brand-name en brand-sub). Voorheen kromp de nav, maar zijn inhoud kan niet
smaller dan de menuwoorden en schoof dan over het belletje heen. */
.brand { display: flex; align-items: center; gap: 11px; min-width: 160px; flex: 0 1 auto; margin-right: 16px; }
.brand:hover { text-decoration: none; }
/* Het merkicoon zelf krimpt nooit mee. */
.brand-mark { flex-shrink: 0; }
.brand-mark {
width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
background: var(--ochre); display: grid; place-items: center;
color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 18px;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; overflow: hidden; }
.brand-name {
font-family: var(--font-display); font-weight: 600; font-size: 17px;
color: #fff; letter-spacing: -.01em; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.brand-sub { font-size: 11.5px; color: #9fb0c9; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* flex 0 0 auto: de nav krimpt bewust niet (zie de uitleg bij .brand);
onder de 1250px neemt het burgermenu het over. */
.nav { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.nav a, .nav .nav-logout {
font-family: inherit; font-size: 14px; color: #c7d2e2;
padding: 8px 13px; border-radius: var(--r-sm); border: none; background: none;
cursor: pointer; transition: background .15s, color .15s; white-space: nowrap;
}
.nav a:hover, .nav .nav-logout:hover { background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.nav .nav-cta { background: var(--ochre); color: var(--ink); font-weight: 600; }
.nav .nav-cta:hover { background: #d99a3f; color: var(--ink); }
/* Mobiele nav-onderdelen: standaard verborgen (desktop), zichtbaar in hamburgermenu */
.nav-mobile-head, .nav-mobile-foot, .nav-mobile-only { display: none; }
/* Uitloggen in de footer (desktop) */
.footer-logout { display: inline-flex; margin: 0; }
.footer-logout button {
background: none; border: none; padding: 0; cursor: pointer;
font-family: inherit; font-size: 13px; color: var(--ink-soft);
/* Zelfde regelhoogte en metriek als de footerlinks; iOS geeft knoppen
anders een eigen opmaak, waardoor Uitloggen uit de rij viel. */
appearance: none; -webkit-appearance: none; line-height: inherit;
}
.footer-logout button:hover { color: var(--ink); text-decoration: underline; }
/* Hamburger — verborgen op desktop */
.navtoggle, .navburger { display: none; }
.navburger {
width: 40px; height: 40px; flex-shrink: 0;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
cursor: pointer; border-radius: var(--r-sm);
}
.navburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }
@media (max-width: 1250px) {
.navburger { display: flex; }
/* UX-1: de checkbox die het menu draagt moet focusbaar zijn, anders is het
menu zonder muis onbereikbaar (display:none valt uit de tab-volgorde).
Onzichtbaar maar aanwezig; de focusring landt op de zichtbare burger. */
.navtoggle {
display: block; position: absolute;
width: 1px; height: 1px; margin: -1px; overflow: hidden;
opacity: 0; clip-path: inset(50%);
}
.navtoggle:focus-visible ~ .navburger {
outline: 2px solid var(--ochre); outline-offset: 2px;
}
.nav {
display: none;
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 2px;
background: var(--ink); padding: 8px;
border-top: 1px solid rgba(255,255,255,.10);
box-shadow: var(--shadow);
}
.navtoggle:checked ~ .nav { display: flex; }
.nav a, .nav .nav-logout { padding: 13px 14px; font-size: 15px; text-align: left; width: 100%; }
.nav form { width: 100%; }
.nav .nav-cta { text-align: center; margin-top: 4px; }
/* Gebruikerskop bovenaan het mobiele menu */
.nav-mobile-head {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px 14px; margin-bottom: 6px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav-mobile-avatar {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
background: var(--ochre); color: var(--ink);
display: grid; place-items: center;
font-family: var(--font-display); font-weight: 600; font-size: 17px;
}
.nav-mobile-user { display: flex; flex-direction: column; line-height: 1.25; }
.nav-mobile-name { color: #fff; font-weight: 600; font-size: 15px; }
.nav-mobile-role { color: #9fb0c9; font-size: 12px; }
/* Nette afsluiting onderaan met voorkeuren, hulp en uitloggen */
.nav-mobile-foot {
display: flex; flex-direction: column; width: 100%;
margin-top: 8px; padding-top: 8px;
border-top: 1px solid rgba(255,255,255,.10);
}
.nav-mobile-only { display: block; }
.nav-logout {
width: 100%; text-align: left; padding: 13px 14px; font-size: 15px;
color: #f0b8b0; background: none; border: none; cursor: pointer; font-family: inherit;
border-radius: var(--r-sm);
}
.nav-logout:hover { background: rgba(255,255,255,.09); color: #ffd2cb; }
.navtoggle:checked ~ .navburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle:checked ~ .navburger span:nth-child(2) { opacity: 0; }
.navtoggle:checked ~ .navburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* =====================================================================
LAYOUT
===================================================================== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; width: 100%; }
.main { padding: 26px 0 72px; }
.page-head { margin-bottom: 24px; }
/* Hero-variant (startpagina): de navy van de balk loopt door in een band
met de begroeting erin — content begint daarná op het warme canvas. */
.page-hero {
margin: -26px calc(50% - 50vw) 28px; /* vult tot de schermranden en sluit op de balk aan */
padding: 18px calc(50vw - 50%) 26px; /* slank: de band ondersteunt de begroeting, domineert niet */
background: var(--ink); /* effen, zelfde als de menubalk: één geheel, strakke rand */
}
.page-head.page-hero h1 { font-size: clamp(23px, 5vw, 29px); }
.page-head.page-hero p { margin-top: 5px; }
.page-head.page-hero h1 { color: #fff; }
.page-head.page-hero p { color: #b9c4d6; }
/* UX-27: een flash rendert in de layout vóór de view, dus op het canvas
tussen menubalk en hero-band; dat brak de band los (gestreepte kop).
Staat er een flash direct boven de hero, dan hoort die ín de band:
zelfde full-bleed navy, en de hero laat zijn negatieve marge los.
Browsers zonder :has() tonen het oude beeld (alleen cosmetisch). */
.wrap > .flashes:has(+ .page-hero) {
margin: -26px calc(50% - 50vw) 0;
padding: 18px calc(50vw - 50%) 4px;
background: var(--ink);
}
.wrap > .flashes:has(+ .page-hero) + .page-hero {
margin-top: 0;
padding-top: 12px;
}
.page-head h1 {
font-family: var(--font-display);
font-size: clamp(25px, 6vw, 34px);
font-weight: 600; letter-spacing: -.02em; line-height: 1.08; color: var(--ink);
}
.page-head p { color: var(--ink-soft); margin-top: 7px; font-size: 15px; }
/* Signature: ochre eyebrow rule */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: .1em; color: var(--ochre-dark); margin-bottom: 10px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--ochre); }
/* Een losse eyebrow direct in .page-head dezelfde vaste hoogte geven als de
eyebrow-rij van de paginakop-partial (.kop-eyebrow-row, 28px). Zonder dit
staat de titel op pagina's zónder terugknop (Meldingen, Voorkeuren, Hulp &
uitleg, Versies & updates) een paar pixels hoger, waardoor de kop verspringt
bij het navigeren tussen die pagina's en de rest. */
.page-head > .eyebrow { display: flex; height: 28px; align-items: center; margin-bottom: 10px; }
.grid { display: grid; gap: 18px; }
.grid-main { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) {
.grid-main { grid-template-columns: minmax(0,1fr) 320px; align-items: start; }
}
/* =====================================================================
CARDS
===================================================================== */
.card {
background: var(--canvas);
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
padding: 24px;
box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
/* Dezelfde stapelmarge rond de navy betaalkaart, die geen .card is
(feedback Ibo 25-07: de kaarten plakten in de zijbalk op elkaar). */
.pay-cta + .card, .card + .pay-cta { margin-top: 16px; }
.card-pad-lg { padding: 26px; }
@media (max-width: 560px) { .card { padding: 18px; } .card-pad-lg { padding: 20px; } }
.card-title {
font-size: 15.5px; font-weight: 600; text-transform: none;
letter-spacing: -.01em; color: var(--ink); margin-top: 0; margin-bottom: 14px;
}
/* =====================================================================
AUTH — split screen
===================================================================== */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .auth-shell { grid-template-columns: 1.05fr 1fr; } }
.auth-aside { display: none; position: relative; overflow: hidden; background: var(--ink); min-height: 220px; }
@media (min-width: 900px) { .auth-aside { display: block; } }
.auth-aside img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.auth-aside-overlay {
position: absolute; inset: 0; padding: 54px 48px;
display: flex; flex-direction: column; justify-content: flex-end;
background: linear-gradient(180deg, rgba(28,36,51,.15), rgba(28,36,51,.9)); color: #fff;
}
.auth-aside-overlay .eyebrow { color: #e7c073; }
.auth-aside-overlay .eyebrow::before { background: var(--ochre); }
.auth-aside-overlay h2 {
font-family: var(--font-display); font-weight: 600;
font-size: 32px; line-height: 1.12; letter-spacing: -.02em; margin: 6px 0 12px;
}
.auth-aside-overlay p { color: rgba(255,255,255,.82); font-size: 15px; max-width: 38ch; }
.auth-form-side { display: flex; align-items: flex-start; justify-content: center; padding: 64px 18px 40px; }
@media (min-width: 900px) { .auth-form-side { align-items: center; padding: 44px 18px; } }
.auth-box { width: 100%; max-width: 400px; }
.auth-product {
margin: 0 0 10px; font-size: 14px; font-weight: 650;
color: var(--ink); letter-spacing: .02em;
}
.auth-product b { color: var(--ochre-dark); font-weight: 750; }
.auth-box h1 { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -.02em; }
.auth-box .sub { color: var(--ink-soft); margin: 8px 0 26px; font-size: 15px; }
/* =====================================================================
FORMS
===================================================================== */
.field { margin-bottom: 17px; }
.field label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 7px; }
.field .hint { font-weight: 400; color: var(--ink-muted); }
.input {
width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
background: var(--canvas); border: 1.5px solid var(--line);
border-radius: var(--r-sm); padding: 12px 14px;
transition: border-color .15s, box-shadow .15s;
}
/* Keten-regel (Gedeelde Werkwijze): veldtekst is nooit groter dan de tekst
eromheen. De 16px hierboven is nodig op aanraakschermen (kleiner laat iOS
inzoomen bij focus); op desktop gaat hij naar 14.5px, in lijn met de
labels (13.5) en lopende UI-tekst (13.5 tot 14.5) rond formulieren.
Nooit losse font-sizes op velden in views. */
@media (hover: hover) and (pointer: fine) {
.input { font-size: 14.5px; }
}
.input::placeholder { color: var(--ink-muted); }
.input:focus { outline: none; border-color: var(--ochre); box-shadow: 0 0 0 4px var(--ochre-soft); }
textarea.input { line-height: 1.55; min-height: 84px; resize: vertical; }
/* Twee velden op één regel (bv. bedrag + vervaldatum). Op telefoons stapelen
ze volle breedte; pas vanaf tablet naast elkaar. Zo krijgt o.a. het
type=date-veld nooit minder ruimte dan zijn eigen picker nodig heeft
(dat liep op iOS Safari anders buiten beeld). min-width:0 laat de kolommen
krimpen binnen de grid-kolom. */
.field-2col { display: flex; gap: 12px; flex-wrap: wrap; }
.field-2col > * { flex: 1 1 100%; min-width: 0; }
@media (min-width: 520px) { .field-2col > * { flex: 1 1 0; } }
/* Datumvelden consistent maken met de andere invoervelden.
iOS Safari geeft type=date standaard een gecentreerde waarde in een breed
veld (ziet er rommelig uit) en negeert text-align tenzij de native styling
uit staat. Daarom appearance:none + een eigen kalendericoon rechts, zodat het
veld overal links uitlijnt en een duidelijke klik-affordance houdt. */
input[type="date"].input {
-webkit-appearance: none;
appearance: none;
text-align: left;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px;
}
/* De onzichtbare native picker-indicator over het icoon leggen, zodat een tik/
klik op het icoon de datumkiezer opent (desktop Chrome/Edge). */
input[type="date"].input::-webkit-calendar-picker-indicator {
position: absolute;
right: 0;
width: 40px;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
.field-2col > *, .field { position: relative; }
/* =====================================================================
BUTTONS
===================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
padding: 13px 22px; border-radius: var(--r-sm);
border: 1.5px solid transparent; cursor: pointer; transition: .15s; text-align: center; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:hover { text-decoration: none; }
/* Primaire actieknop: rustig navy. .btn-accent is een alias van .btn-primary;
de felle oker-CTA is bewaard voor de betaal-knop (zie .pay-cta hieronder). */
.btn-primary, .btn-accent { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover, .btn-accent:hover { background: var(--ink-2); color: #fff; }
.btn-ghost { background: var(--canvas); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); }
.btn-danger { background: var(--red-soft); color: var(--red); }
.btn-danger:hover { background: #f7d9d6; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 14px; font-size: 13.5px; }
.btn-lg { padding: 15px 26px; font-size: 16px; }
/* =====================================================================
FLASH
===================================================================== */
.flashes { margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.flash {
display: flex; align-items: flex-start; gap: 11px;
padding: 13px 16px; border-radius: var(--r); font-size: 14.5px; border: 1px solid;
}
.flash-icon { flex-shrink: 0; margin-top: 1px; font-weight: 700; }
.flash-success { background: var(--green-soft); color: var(--green); border-color: #bfe3d0; }
.flash-error { background: var(--red-soft); color: var(--red); border-color: #f0c8c4; }
.flash-info { background: var(--info-soft); color: var(--info); border-color: #c6d6ee; }
.flash-warning { background: var(--amber-soft); color: var(--amber); border-color: #ecd9a8; }
/* =====================================================================
BADGE
===================================================================== */
.badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.badge-pending { background: var(--amber-soft); color: var(--amber); } .badge-pending::before { background: var(--amber); }
.badge-approved { background: var(--green-soft); color: var(--green); } .badge-approved::before { background: var(--green); }
.badge-rejected { background: var(--red-soft); color: var(--red); } .badge-rejected::before { background: var(--red); }
/* Vertrokken is geen fout maar een afronding: neutraal grijs, geen rood (LCY-2). */
.badge-vertrokken { background: var(--line-soft, #eeeae1); color: var(--ink-soft, #51607a); } .badge-vertrokken::before { background: var(--ink-soft, #51607a); }
.badge-paid { background: var(--green-soft); color: var(--green); } .badge-paid::before { background: var(--green); }
.badge-open, .badge-pending-pay { background: var(--amber-soft); color: var(--amber); } .badge-open::before { background: var(--amber); }
.badge-failed, .badge-canceled, .badge-expired { background: var(--red-soft); color: var(--red); }
.badge-failed::before, .badge-canceled::before, .badge-expired::before { background: var(--red); }
/* Stiltebewaking: een melding die te lang zonder update ligt. Eigen rode kleur
zodat de vlag opvalt tussen de neutralere status-badges. */
.badge-stil { background: var(--red-soft); color: var(--red); font-weight: 600; }
.badge-stil::before { background: var(--red); }
/* =====================================================================
JOURNEY — verticale tijdlijn (signature)
===================================================================== */
.journey { list-style: none; position: relative; }
.journey-step { position: relative; padding: 0 0 22px 46px; min-height: 32px; }
.journey-step:last-child { padding-bottom: 0; }
/* Verbindingslijn per stap i.p.v. één lijn over de hele lijst: loopt van deze
stip tot de volgende. De laatste stap krijgt geen lijn, zodat de streep exact
bij het laatste bolletje stopt (i.p.v. er nog een stukje voorbij te lopen). */
.journey-step:not(:last-child)::before {
content: ''; position: absolute; left: 15px; top: 16px; bottom: -16px;
width: 2px; background: var(--line);
}
.journey-dot {
position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center; background: var(--canvas);
border: 2px solid var(--line); color: var(--ink-muted); font-size: 13px; font-weight: 700; z-index: 1;
}
.journey-step.done .journey-dot { background: var(--green); border-color: var(--green); color: #fff; }
.journey-step.active .journey-dot { background: var(--ochre); border-color: var(--ochre); color: var(--ink); box-shadow: 0 0 0 5px var(--ochre-soft); }
.journey-label { font-weight: 600; font-size: 15px; color: var(--ink); }
.journey-step.upcoming .journey-label { color: var(--ink-muted); font-weight: 500; }
.journey-desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
/* =====================================================================
PAYMENT CTA — ochre, uitgesproken
===================================================================== */
.pay-cta { background: var(--ink); border-radius: var(--r-lg); padding: 26px; color: #fff; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.pay-cta::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ochre); }
.pay-cta .label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #e7c073; }
.pay-amount { font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -.03em; margin: 10px 0 4px; color: #fff; }
.pay-period { color: rgba(255,255,255,.78); font-size: 14.5px; margin-bottom: 20px; }
.pay-note { background: rgba(255,255,255,.08); border-radius: var(--r); padding: 14px 16px; margin-bottom: 20px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.14); }
/* --ochre haalt als tekst op wit maar 2.94:1; voor tekst dus altijd de donkere variant. */
.pay-note strong { color: var(--ochre-dark); }
.pay-cta .btn-accent { background: var(--ochre); color: var(--ink); }
.pay-cta .btn-accent:hover { background: #d99a3f; }
.steplist { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.steplist li { display: flex; gap: 12px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.92); }
.steplist .n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ochre); color: var(--ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
/* Mededeling in plaats van oproep: dezelfde kaart, maar rustig. Het navy vlak,
de okeren balk erboven en de volle okeren knop hoorden bij het moment waarop
een lid zijn incasso nog moet instellen, met bedrag en stappenplan erbij.
Voor de melding dat de incasso uitstaat is dat te zwaar, en het maakt oker
tot thema in plaats van accent (afspraak met Ibo). Hier blijft alleen het
kopje oker; de rest volgt de gewone kaarten in de zijbalk. */
.pay-cta.is-mededeling {
background: var(--canvas); color: var(--ink);
border: 1px solid var(--line); box-shadow: var(--shadow-sm);
padding: 20px;
}
.pay-cta.is-mededeling::after { content: none; }
.pay-cta.is-mededeling .label { color: var(--ochre-dark); }
.pay-cta.is-mededeling .pay-note {
background: var(--surface); border-color: var(--line-soft);
color: var(--ink-soft); margin-top: 10px;
}
.pay-cta.is-mededeling .pay-note strong { color: var(--ink); }
.pay-cta.is-mededeling .btn-accent {
background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.pay-cta.is-mededeling .btn-accent:hover { background: var(--surface); }
/* =====================================================================
BANNERS
===================================================================== */
.banner { border-radius: var(--r-lg); padding: 22px; border: 1px solid; }
/* A11Y-01: bannerkoppen dragen dezelfde opmaak, ongeacht kop-niveau. Op
/financien staan ze vóór de eerste sectie-h2, dus zijn het h2's (anders
sprong de koppenvolgorde van h1 naar h3). Zie ook UX-25. */
.banner h3, .banner h2 { font-size: 17px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 9px; font-family: var(--font-display); }
.banner p { font-size: 14.5px; line-height: 1.55; }
.banner-success { background: var(--green-soft); border-color: #bfe3d0; color: var(--green); } .banner-success p { color: #1a6347; }
.banner-amber { background: var(--amber-soft); border-color: #ecd9a8; color: var(--amber); } .banner-amber p { color: #7d5600; }
.banner-info { background: var(--info-soft); border-color: #c6d6ee; color: var(--info); } .banner-info p { color: #28456f; }
/* A11Y-02 (regressietest 2.81.4): standalone actie-links minstens ~24px hoog
aantikken (WCAG 2.5.8). Inline-links middenin een zin vallen onder de
WCAG-uitzondering en blijven ongemoeid. */
a[aria-label^="Betaalbewijs"] { display: inline-block; padding-block: 4px; }
/* =====================================================================
DEFINITION LIST
===================================================================== */
.dl { display: grid; grid-template-columns: minmax(90px, 0.9fr) 1.4fr; gap: 0 12px; }
/* min-width en overflow-wrap ook op de term: Nederlandse samenstellingen als
"Onderhoudscontract" passen niet in een kolom van 90px en liepen dan over de
waarde ernaast heen (feedback Ibo 26-07). */
.dl dt { font-size: 13.5px; color: var(--ink-muted); padding: 8px 0; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.dl dd { font-size: 14.5px; font-weight: 500; color: var(--ink); padding: 8px 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
/* Op smalle kaarten: label boven de waarde, zodat lange waarden (zoals een
e-mailadres) de volle breedte krijgen en niet midden in een woord breken. */
@media (max-width: 560px) {
.dl { grid-template-columns: 1fr; gap: 0; }
.dl dt { padding: 8px 0 0; }
.dl dd { text-align: left; padding: 2px 0 8px; }
}
/* =====================================================================
TABLE
===================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; container-type: inline-size; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); padding: 10px 8px; border-bottom: 1px solid var(--line); }
table.data td { padding: 11px 8px; border-bottom: 1px solid var(--line-soft); }
table.data tr:last-child td { border-bottom: none; }
/* Compacte variant voor smalle kolommen (bijv. de zijbalk) */
table.data.compact th, table.data.compact td { padding: 9px 6px; font-size: 13px; }
table.data.compact .badge { padding: 3px 8px; font-size: 11.5px; }
/* Kaart-weergave zodra de tabel niet meer past: brede tabellen scrollen niet
ontdekbaar horizontaal. Met class="data data-cards" wordt elke rij een
kaartje met label→waarde per regel (labels komen uit data-label op de td's).
Container query i.p.v. media query: kijkt naar de beschikbare KOLOMbreedte
(.table-wrap), zodat het ook omslaat als een zijbalk de kolom smal maakt —
niet naar de schermbreedte. Blijft een tabel zodra er wél ruimte is. */
@container (max-width: 720px) {
table.data.data-cards, table.data.data-cards tbody,
table.data.data-cards tr, table.data.data-cards td { display: block; width: 100%; }
table.data.data-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* header verbergen, wel voor screenreaders */
table.data.data-cards tr {
border: 1px solid var(--line); border-radius: var(--r-sm);
padding: 4px 14px; margin-bottom: 12px; background: var(--canvas);
}
table.data.data-cards td {
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
padding: 8px 0; border-bottom: 1px solid var(--line-soft); text-align: right;
}
table.data.data-cards tr td:last-child { border-bottom: none; }
table.data.data-cards td::before {
content: attr(data-label); flex: 0 0 auto; text-align: left;
font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted);
}
/* Actie-cel (knoppen): geen label, knoppen links op een volle regel. */
table.data.data-cards td.acties { justify-content: flex-start; text-align: left; flex-wrap: wrap; gap: 8px; }
table.data.data-cards td.acties::before { content: none; }
/* Actie-cel zonder knoppen (bijv. betaalde factuur) helemaal verbergen,
ook als er alleen witruimte in staat. */
table.data.data-cards td.acties:not(:has(button)):not(:has(a)) { display: none; }
}
/* =====================================================================
PEOPLE ROWS
===================================================================== */
.people { display: flex; flex-direction: column; }
.person { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.person:last-child { border-bottom: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--ochre-soft); color: var(--ochre-dark); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.person-main { flex: 1; min-width: 0; }
.person-name { font-weight: 600; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-meta { font-size: 13px; color: var(--ink-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Mobiel: knoppen zakken onder de naam in plaats van ernaast geperst te worden. */
@media (max-width: 600px) {
.person { flex-wrap: wrap; }
.person-main { flex: 1 1 auto; }
.person-name { white-space: normal; }
.person-meta { white-space: normal; }
.person-side { flex: 1 1 100%; justify-content: flex-start; gap: 8px; margin-top: 6px; padding-left: 53px; }
.person-side form { flex: 1; }
.person-side .btn { flex: 1; white-space: nowrap; }
.person-side .hide-sm { display: none; }
}
/* =====================================================================
STATS — wrapt netjes op mobiel
===================================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.stats-4 { grid-template-columns: repeat(4, 1fr); }
/* Twee blokken per regel, ook op desktop: nette 2×2 zonder een losse rest-rij. */
.stats-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .stats, .stats-4 { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.stat-n { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.stat-n.accent { color: var(--ochre-dark); }
.stat-l { font-size: 12px; color: var(--ink-muted); margin-top: 7px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
/* UX-10: utility-klassen. Inline styles worden uitgefaseerd naar dit
class-systeem; tests/inline_styles_ratchet_test.php bevriest het aantal
resterende style-attributen, dus het kan alleen nog dalen. Pas als het
nul is, kan 'unsafe-inline' uit de CSP (SEC-12). */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; } .mt-3 { margin-top: 3px; } .mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; } .mt-18 { margin-top: 18px; } .mt-22 { margin-top: 22px; }
.mb-4 { margin-bottom: 4px; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; } .mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; } .mb-18 { margin-bottom: 18px; } .mb-22 { margin-bottom: 22px; }
.bold { font-weight: 600; }
.inline { display: inline; }
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.scheiding-boven { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.klikbaar-kop { cursor: pointer; font-weight: 600; }
/* FIN-4: compacte lay-out voor het boeking-bewerken-formulier, zonder inline
styles (dezelfde look als het toevoeg-formulier, maar via klassen). */
.form-smal { max-width: 560px; }
.veld-radios { display: flex; gap: 18px; flex-wrap: wrap; }
.radio-optie { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.richting-uit { color: var(--rood); font-weight: 600; }
.richting-in { color: var(--groen); font-weight: 600; }
.veld-rij { display: flex; gap: 12px; flex-wrap: wrap; }
.veld-rij > div { flex: 1; min-width: 140px; }
.knop-rij { display: flex; gap: 10px; align-items: center; }
.label-blok { display: block; margin-bottom: 4px; }
.veld-smal { max-width: 220px; }
.divider-14 { margin: 14px 0; }
/* UX-3: klikbare statusfilter-tegels op de meldingenlijst. */
.stat-klikbaar { text-decoration: none; color: inherit; cursor: pointer; transition: border-color .12s; }
.stat-klikbaar:hover { border-color: var(--ochre-line); }
.stat-klikbaar.is-actief { border-color: var(--ochre); background: var(--ochre-soft); }
/* COM-7: gerenderd mailvoorbeeld (mededelingen), zelfde look als op de ALV-pagina. */
.mailvoorbeeld { white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 14px 16px; font-family: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); max-height: 340px; overflow: auto; margin: 0; }
/* ALV-7: genummerde agendapunten op de vergaderpagina. */
.agenda-punten { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.agenda-punt-titel { font-weight: 600; }
.agenda-punt-stuk { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; margin-right: 12px; font-size: 13.5px; }
/* LCY-8: taken-lijst (kop, kaart, overdue-markering, archief). Verving inline styles. */
.taken-groepkop { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); margin-bottom: 10px; }
.taken-groepkop-punt { color: var(--line); font-weight: 400; }
.taak-titelrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.taak-titel { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.taak-oms { margin: 2px 0 6px; }
.taak-meta { display: flex; gap: 14px; flex-wrap: wrap; }
.taak-zijkolom { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.taak-datum-verlopen { color: var(--rood); font-weight: 600; }
.taken-archief > summary { padding: 6px 0; }
/* FIN-14: in en uit als halve blokken binnen de pot-kaart. Het saldo is het
antwoord en houdt het grote cijfer; de beweging eronder is de toelichting
en krijgt een kleiner cijfer, gescheiden door haarlijnen. */
.stat-inuit { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.stat-inuit > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.stat-inuit .stat-n { font-size: 19px; }
.stat-inuit .stat-l { margin-top: 4px; }
/* Op een smal scherm de twee potten onder elkaar: twee kaarten met elk twee
halve blokken naast elkaar passen niet op een telefoonbreedte. */
@media (max-width: 620px) { .stats-potten { grid-template-columns: 1fr; } }
/* =====================================================================
IDEEËNBUS
===================================================================== */
.idea-row { display: flex; gap: 14px; align-items: flex-start; }
.vote-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; width: 46px; }
.vote-score { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1; }
.vote-btn {
width: 36px; height: 30px; display: grid; place-items: center;
font-size: 13px; line-height: 1; background: var(--surface); color: var(--ink-muted);
border: 1.5px solid var(--line); border-radius: var(--r-sm); cursor: pointer; transition: .12s; font-family: inherit;
}
.vote-btn:hover { background: var(--surface-2); color: var(--ink); }
.vote-up-active { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.vote-down-active { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.idea-title { font-weight: 600; font-size: 16px; color: var(--ink); font-family: var(--font-display); }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
/* VvE-woordenboek (UX-22): bladerbare pagina + contextbanner per module */
.woordenboek-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.woordenboek-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.woordenboek-chip:hover { border-color: var(--ochre-line); background: var(--ochre-soft); color: var(--ochre-dark); }
.woordenboek-term { scroll-margin-top: 90px; }
.woordenboek-praktijk { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.woordenboek-praktijk summary { font-weight: 600; font-size: 14px; color: var(--ochre-dark); display: inline-flex; align-items: center; gap: 6px; }
.woordenboek-praktijk summary::before { content: "\25B8"; font-size: 12px; }
.woordenboek-praktijk[open] summary::before { content: "\25BE"; }
.woordenboek-praktijk p { margin-top: 8px; }
.woordenboek-voet { text-align: center; margin-top: 8px; }
.woordenboek-banner { background: var(--ochre-soft); border: 1px solid var(--ochre-line); border-radius: var(--r-lg); margin-bottom: 18px; overflow: hidden; }
.woordenboek-banner > summary { padding: 14px 18px; display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--ochre-dark); font-size: 14.5px; }
.woordenboek-banner-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ochre); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.woordenboek-banner-inhoud { padding: 4px 18px 18px; }
.woordenboek-banner-inhoud dl { display: grid; gap: 10px; margin: 0; }
.woordenboek-banner-inhoud dt { font-weight: 700; font-size: 14px; }
.woordenboek-banner-inhoud dt a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ochre-line); }
.woordenboek-banner-inhoud dt a:hover { color: var(--ochre-dark); }
.woordenboek-banner-inhoud dd { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.woordenboek-banner-link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 13.5px; color: var(--ochre-dark); text-decoration: none; }
.woordenboek-banner-link:hover { text-decoration: underline; }
/* =====================================================================
EMPTY / MISC
===================================================================== */
.empty { text-align: center; padding: 38px 18px; color: var(--ink-muted); }
/* Spot-icoon in een zachte oker-cirkel: warm en herkenbaar i.p.v. een kaal teken. */
.empty .em-mark {
width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px;
display: grid; place-items: center;
background: var(--ochre-soft); color: var(--ochre-dark);
}
.empty .em-mark-ok { background: var(--green-soft); color: var(--green); }
.empty p { font-size: 14px; max-width: 44ch; margin-inline: auto; }
.empty .btn { margin-top: 14px; }
.divider { height: 1px; background: var(--line); margin: 20px 0; border: none; }
.muted { color: var(--ink-soft); font-size: 14px; }
.text-sm { font-size: 13px; }
.back { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; }
.back:hover { color: var(--ink); text-decoration: none; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }.stack-sm > * + * { margin-top: 12px; }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; }
/* =====================================================================
FOOTER
===================================================================== */
/* Sticky footer: op korte pagina's rust de footer onderaan het scherm,
op lange pagina's scrolt hij gewoon mee (flex-kolom op .app-body). */
.app-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app-body .main { flex: 1 0 auto; }
.footer { border-top: 1px solid var(--line); padding: 22px 0; margin-top: 36px; background: var(--canvas); }
.footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer p { font-size: 13px; color: var(--ink-muted); }
.footer-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.footer-maker { font-size: 12px; color: var(--ink-muted); }
.footer-maker a { font-size: 12px; color: var(--ochre-dark); font-weight: 600; }
.footer-maker a:hover { color: var(--ochre-dark); text-decoration: underline; }
.maker-logo { height: 14px; width: 14px; vertical-align: -3px; margin-right: 5px; border-radius: 4px; }
.footer-maker b, .auth-maker b { color: var(--ochre-dark); font-weight: 700; }
.footer-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-links form { margin: 0; }
/* Klikvlak van de footerlinks naar minimaal 24px hoog (WCAG 2.5.8), zonder de
voetregel visueel hoger te maken: padding erbij, marge eraf. */
.footer-links a, .footer-links button { padding-top: 5px; padding-bottom: 5px; margin-top: -5px; margin-bottom: -5px; }
.footer a { font-size: 13px; color: var(--ink-soft); }
.footer a:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* =====================================================================
AGENDA — kalenderblok-marker (signature)
===================================================================== */
/* nowrap: het datumblokje blijft altijd links naast de inhoud staan; de tekst
ernaast krimpt (min-width:0 op .flex1-min0) i.p.v. dat de datum eronder/erboven
springt zodra de tags-regel lang wordt. */
.agenda-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: nowrap; }
.cal-block {
flex-shrink: 0; width: 52px; height: 56px;
border-radius: var(--r); overflow: hidden;
border: 1.5px solid var(--ochre-line);
display: flex; flex-direction: column; text-align: center;
background: var(--canvas);
}
.cal-block .cal-day {
font-family: var(--font-display); font-size: 22px; font-weight: 600;
line-height: 1; color: var(--ink); padding-top: 8px;
}
.cal-block .cal-month {
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; color: var(--ochre-dark);
background: var(--ochre-soft); margin-top: auto; padding: 3px 0;
}
.cal-block-past { border-color: var(--line); }
.cal-block-past .cal-month { background: var(--surface-2); color: var(--ink-muted); }
.agenda-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); }
/* select krijgt dezelfde stijl als .input */
select.input { appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer;
}
/* Bedragen nooit afbreken */
.nowrap, td.amount, .amount { white-space: nowrap; }
table.data td.amount { font-variant-numeric: tabular-nums; }
/* =====================================================================
TOGGLE-RIJEN (setup: modules aan/uit)
===================================================================== */
.toggle-row {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 14px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.toggle-row:last-of-type { border-bottom: none; }
.toggle-label { font-weight: 600; font-size: 14.5px; color: var(--ink); display: block; }
.toggle-key { font-size: 12px; color: var(--ink-muted); font-family: ui-monospace, monospace; }
.toggle-hint { font-size: 13px; color: var(--ink-soft); display: block; margin-top: 2px; }
.toggle-row input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 46px; height: 26px; border-radius: 999px;
background: var(--line); position: relative; cursor: pointer;
transition: background .18s; flex-shrink: 0;
}
.toggle-row input[type="checkbox"]::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 20px; height: 20px; border-radius: 50%; background: #fff;
transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.toggle-row input[type="checkbox"]:checked { background: var(--green); }
.toggle-row input[type="checkbox"]:checked::after { transform: translateX(20px); }
/* Gewone checkboxes en radio's: de browserstandaard (13px) is een te klein
klikdoel. 18px met de huisstijlkleur; de toggle-rijen hierboven hebben hun
eigen maat en stijl en vallen buiten deze regel door de specifiekere selector. */
input[type="checkbox"], input[type="radio"] {
width: 18px; height: 18px; accent-color: var(--ochre-dark);
}
/* =====================================================================
WYSIWYG-EDITOR
===================================================================== */
.wysiwyg { border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--canvas); }
.wysiwyg:focus-within { border-color: var(--ochre); box-shadow: 0 0 0 4px var(--ochre-soft); }
.wysiwyg-toolbar {
display: flex; flex-wrap: wrap; gap: 2px; padding: 6px;
background: var(--surface); border-bottom: 1px solid var(--line);
}
.wysiwyg-btn {
min-width: 32px; height: 30px; padding: 0 8px;
font-family: inherit; font-size: 13px; color: var(--ink-soft);
background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
transition: .12s;
}
.wysiwyg-btn:hover { background: var(--canvas); border-color: var(--line); color: var(--ink); }
.wysiwyg-area {
border: none !important; box-shadow: none !important; border-radius: 0 !important;
min-height: 160px; max-height: 480px; overflow-y: auto; outline: none;
padding: 14px; line-height: 1.6;
}
.wysiwyg-area:focus { box-shadow: none !important; }
.wysiwyg-area p { margin: 0 0 10px; }
.wysiwyg-area ul, .wysiwyg-area ol { margin: 0 0 10px; padding-left: 22px; }
.wysiwyg-area li { margin-bottom: 4px; }
.wysiwyg-area h3 { font-family: var(--font-display); font-size: 18px; margin: 4px 0 8px; }
.wysiwyg-area blockquote { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid var(--ochre-line); color: var(--ink-soft); }
.wysiwyg-area:empty::before { content: attr(data-placeholder); color: var(--ink-muted); }
/* Weergave van opgemaakte notulen/omschrijving (rich text) */
.richtext { line-height: 1.65; color: var(--ink); }
.richtext p { margin: 0 0 12px; }
.richtext ul, .richtext ol { margin: 0 0 12px; padding-left: 24px; }
.richtext li { margin-bottom: 5px; }
.richtext h3, .richtext h4 { font-family: var(--font-display); font-weight: 600; margin: 16px 0 8px; }
.richtext h3 { font-size: 19px; }
.richtext h4 { font-size: 16px; }
.richtext blockquote { margin: 0 0 12px; padding: 4px 0 4px 16px; border-left: 3px solid var(--ochre-line); color: var(--ink-soft); }
.richtext a { color: var(--ochre-dark); text-decoration: underline; }
.richtext strong { font-weight: 700; }
/* =====================================================================
DOCUMENTENKLUIS
===================================================================== */
.doc-row { display: flex; gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.doc-row:hover { text-decoration: none; }
a.doc-row:hover { border-color: var(--ochre-line); }
.doc-icon { flex-shrink: 0; line-height: 1; display: flex; align-items: center; color: var(--ink-soft); }
.doc-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.doc-download { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--ochre-dark); white-space: nowrap; }
@media (max-width: 560px) { .doc-download { display: none; } }
input[type="file"].input { padding: 9px 12px; font-size: 14px; }
input[type="file"].input::file-selector-button {
font-family: inherit; font-size: 13px; font-weight: 600;
padding: 7px 12px; margin-right: 12px; border-radius: 6px;
border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
}
/* =====================================================================
DASHBOARD — intro-kaart en wegklikbare banners
===================================================================== */
.intro-card {
background: var(--ochre-soft);
border: 1px solid var(--ochre-line);
border-left: 4px solid var(--ochre);
}
.intro-card .eyebrow { margin-bottom: 6px; }
/* =====================================================================
DASHBOARD — snelkoppelingen (community-modules)
===================================================================== */
.quicklinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.quicklinks .card + .card, .quicklinks .quicklink { margin-top: 0; }
@media (max-width: 720px) { .quicklinks { grid-template-columns: 1fr; } }
.quicklink {
display: flex; flex-direction: column;
text-decoration: none; color: inherit; transition: border-color .15s, transform .12s;
}
.quicklink:hover { text-decoration: none; border-color: var(--ochre-line); transform: translateY(-2px); }
.quicklink-icon {
width: 42px; height: 42px; border-radius: 11px; margin-bottom: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--ochre-soft); color: var(--ochre-dark);
}
.quicklink-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.quicklink-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
/* =====================================================================
PRIKBORD — sectie i.p.v. bak (v1.17)
Geen beige container meer: een rustige sectiekop met oker-merkje en
notities als gewone kaarten. 'Belangrijk' krijgt een warme tint.
===================================================================== */
.corkboard { background: none; border: none; padding: 0; }
.corkboard-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.corkboard-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); }
.corkboard-beheer { margin-left: auto; font-size: 13.5px; color: var(--ink-soft); flex-shrink: 0; }
.corkboard-pin {
width: 10px; height: 10px; border-radius: 50%;
background: var(--ochre); flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(201, 138, 43, .16);
}
/* UX-39 (definitief, keuze Ibo): bento-kaarten met kleurtop en een kaartvoet.
Gelijke, strakke kaarten in twee kolommen; elk met een dun gekleurd
bovenrandje (oker = Belangrijk, verder een rustige tintrotatie) en onderaan
een voet met de plaatser (profielfoto of initiaal), naam en datum, achter
een dun lijntje. De voeten van kaarten in dezelfde rij lijnen uit. */
.notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 600px) { .notes { grid-template-columns: 1fr; } }
.note {
background: var(--canvas);
border-top: 4px solid #b9c4d0;
border-radius: 6px;
padding: 15px 18px 10px;
box-shadow: 0 2px 6px rgba(28, 36, 51, .07);
color: var(--ink);
display: flex; flex-direction: column;
}
.notes .note:nth-child(3n+2) { border-top-color: #9db8a2; }
.notes .note:nth-child(4n+3) { border-top-color: #c3aed6; }
.note-important { border-top-color: var(--ochre); background: var(--ochre-soft); }
.note-title { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; margin-bottom: 5px; line-height: 1.25; }
/* UX-38: 14px, de kaart-inhoudsmaat van de rest van het scherm. */
.note-body { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.note-body p:last-child { margin-bottom: 0; }
/* De kaartvoet: wie plaatste dit en wanneer. margin-top auto duwt de voet
naar de onderrand, zodat voeten in dezelfde rij op een lijn liggen. */
.note-voet {
display: flex; align-items: center; gap: 8px;
margin-top: auto; padding-top: 8px;
border-top: 1px solid var(--line-soft);
font-size: 12px;
}
.note-voet .badge { padding: 2px 8px; font-size: 11px; }
.note-important .note-voet { border-top-color: var(--ochre-line); }
.note-datum { margin-left: auto; color: var(--ink-soft); }
/* UX-41 + besluit Ibo 25-07: beheeracties op de mededelingenkaart, alleen
zichtbaar met rechten. Potlood en kruisje samen rechtsboven; de voet is
één regel met links "Leden mailen" en rechts de labels vlak voor de datum;
het mailpaneel (COM-7) klapt onder die regel uit. */
.note { position: relative; }
.note-acties { position: absolute; top: 6px; right: 8px; display: flex; align-items: center; gap: 2px; }
.note-verwijder {
background: none; border: none; cursor: pointer; padding: 4px 6px;
font-size: 16px; line-height: 1; color: var(--ink-muted); border-radius: 6px;
}
.note-verwijder:hover, .note-verwijder:focus-visible { color: var(--red); background: var(--red-soft); }
.note-actie { display: inline-flex; align-items: center; color: var(--ink-muted); padding: 4px; border-radius: 6px; }
.note-actie:hover, .note-actie:focus-visible { color: var(--ink); background: var(--line-soft); }
.note-voet-rechts { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.note-voet-rechts .note-datum { margin-left: 0; }
.note-voet .note-mail { flex: 0 1 auto; min-width: 0; }
.note-mail summary { color: var(--ink-soft); white-space: nowrap; }
.note-mail-paneel { margin-top: 8px; }
/* Open mailpaneel: de labels en datum blijven bovenaan de regel staan. */
.note-voet:has(.note-mail[open]) { align-items: flex-start; }
.note-voet:has(.note-mail[open]) .note-voet-rechts { margin-top: 2px; }
/* Over-deze-vereniging: bescheiden inklapbaar */
.intro-details { font-size: 13.5px; }
.intro-details summary {
cursor: pointer; color: var(--ink-soft); font-weight: 500;
padding: 12px 16px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-sm); list-style: none;
}
.intro-details summary::-webkit-details-marker { display: none; }
.intro-details summary::before { content: 'ⓘ '; color: var(--ink-muted); }
.intro-details[open] summary { border-radius: var(--r-sm) var(--r-sm) 0 0; border-bottom: none; }
.intro-details p {
color: var(--ink-soft); line-height: 1.65; padding: 14px 16px;
background: var(--canvas); border: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm);
}
/* =====================================================================
DOCUMENTMAPPEN
===================================================================== */
/* --- Documenten-verkenner -----------------------------------------------
Eén kaart die aanvoelt als een bestandsverkenner: werkbalk met zoekveld
bovenin, mapnavigatie links, documentenlijst rechts. Zonder JavaScript
zijn de mapknoppen ankerlinks en staan alle groepen onder elkaar. */
.docx { padding: 0; overflow: hidden; }
/* Het hidden-attribuut moet ook winnen van display:flex op rijen/zoekveld
(de UA-stylesheet verliest dat anders van de author-styles hieronder). */
.docx [hidden] { display: none !important; }
.docx-werkbalk {
display: flex; align-items: center; gap: 14px;
padding: 12px 18px; border-bottom: 1px solid var(--line);
background: var(--surface);
}
/* Het zoekveld is een echt formulier (UX-4): Enter doorzoekt server-side de
hele kluis, ook zonder JS; met JS filtert het daarnaast live. */
.docx-zoekform { flex: 1 1 auto; max-width: 380px; margin: 0; min-width: 0; }
.docx-zoekform .docx-zoek { max-width: none; }
.docx-zoek {
display: flex; align-items: center; gap: 9px; flex: 1 1 auto; max-width: 380px;
background: var(--canvas); border: 1px solid var(--line);
border-radius: 10px; padding: 8px 12px; margin: 0;
color: var(--ink-muted); cursor: text;
}
.docx-zoek:focus-within { border-color: var(--ochre); box-shadow: 0 0 0 3px var(--ochre-soft); }
.docx-zoek input {
border: none; outline: none; background: none; width: 100%; padding: 0;
font: inherit; font-size: 14.5px; color: var(--ink);
}
.docx-teller { flex-shrink: 0; margin-left: auto; }
.docx-body { display: grid; grid-template-columns: 256px minmax(0, 1fr); }
.docx-mappen {
display: flex; flex-direction: column; gap: 2px; align-self: stretch;
padding: 12px; border-right: 1px solid var(--line);
background: var(--surface);
}
.docx-mapknop {
position: relative;
display: flex; align-items: center; gap: 10px;
padding: 9px 11px; border-radius: var(--r-sm);
font-size: 14px; font-weight: 500; color: var(--ink-soft);
text-decoration: none;
}
.docx-mapknop:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.docx-mapknop.is-actief { background: var(--ochre-soft); color: var(--ink); font-weight: 600; }
/* Rechte accentstreep links (geen afgeronde inset-schaduw die als haakje oogt). */
.docx-mapknop.is-actief::before {
content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
width: 3px; border-radius: 0 3px 3px 0; background: var(--ochre);
}
.docx-mapknop-ic { flex-shrink: 0; display: flex; align-items: center; color: var(--ink-muted); }
.docx-mapknop .flex1-min0 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docx-mapknop-aantal {
flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--ink-muted);
background: var(--surface-2); border-radius: 99px; padding: 1px 8px;
}
.docx-mapknop.is-actief .docx-mapknop-aantal { background: var(--canvas); color: var(--ochre-dark); }
.docx-slot { color: var(--amber); vertical-align: middle; }
.docx-lijst { padding: 8px 18px 16px; min-width: 0; }
.docx-groep-titel {
font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
font-weight: 600; color: var(--ink-muted); margin: 16px 0 4px;
}
.docx-groep-leeg { padding: 4px 0 8px; }
.docx-rij {
display: flex; align-items: center; gap: 13px;
padding: 11px 10px; margin: 0 -10px; border-radius: var(--r-sm);
text-decoration: none; color: inherit;
}
.docx-rij:hover { background: var(--surface-2); text-decoration: none; }
.docx-ic { flex-shrink: 0; display: flex; align-items: center; }
.docx-titel { display: block; font-weight: 600; font-size: 15px; color: var(--ink); }
.docx-rij:hover .docx-titel { color: var(--ochre-dark); }
.docx-meta { display: block; margin-top: 1px; }
.docx-datum { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.docx-download {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
display: grid; place-items: center;
color: var(--ochre-dark); background: var(--ochre-soft);
}
.docx-rij:hover .docx-download { background: var(--ochre); color: var(--ink); }
.docx-leeg { padding: 24px 0; text-align: center; }
.docx-lijst .doc-koppeling { margin: 2px 0 8px; }
@media (max-width: 720px) {
/* Mapnavigatie wordt een horizontale chip-rij boven de lijst. */
.docx-body { display: block; }
/* Zoekveld links uitlijnen met de chips en documentregels eronder (14px),
i.p.v. de bredere desktop-inspringing van 18px. */
.docx-werkbalk { padding: 12px 14px; }
.docx-mappen {
flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch;
border-right: none; border-bottom: 1px solid var(--line);
padding: 10px 14px;
scrollbar-width: none; /* chips zijn swipebaar; de balk voegt alleen ruis toe */
}
.docx-mappen::-webkit-scrollbar { display: none; }
.docx-mapknop {
flex-shrink: 0; white-space: nowrap;
border: 1px solid var(--line); border-radius: 99px;
padding: 7px 13px; background: var(--canvas);
}
.docx-mapknop.is-actief { border-color: var(--ochre); }
.docx-mapknop.is-actief::before { display: none; }
.docx-mapknop-ic { display: none; }
.docx-datum { display: none; }
.docx-lijst { padding: 4px 14px 12px; }
}
@media (max-width: 560px) {
/* Het zoekveld krijgt de volle breedte; de teller voegt daar weinig toe. */
.docx-teller { display: none; }
.docx-zoek, .docx-zoekform { max-width: none; }
}
/* Map-/document-menu (popover) */
.folder-menu { position: relative; }
.folder-menu > summary { list-style: none; cursor: pointer; }
.folder-menu > summary::-webkit-details-marker { display: none; }
.folder-menu-pop {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
width: 260px; box-shadow: var(--shadow); padding: 16px;
}
@media (max-width: 480px) { .folder-menu-pop { width: 220px; } }
/* =====================================================================
BETALINGSACHTERSTAND
===================================================================== */
.year-switch { display: inline-flex; gap: 6px; }
.year-chip {
display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
font-size: 13.5px; font-weight: 600; text-decoration: none;
color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
}
.year-chip:hover { border-color: var(--ochre-line); text-decoration: none; }
.year-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.arrear-row { display: flex; align-items: center; gap: 14px; }
@media (max-width: 560px) {
.arrear-row { flex-direction: column; align-items: stretch; }
.arrear-row .person-side { justify-content: flex-start; }
}
/* =====================================================================
AUTH — merkbalk bovenaan (alleen mobiel; desktop heeft de fotopaneel-branding)
===================================================================== */
.auth-topbar {
background: var(--ink);
padding: 14px 18px;
padding-top: max(14px, env(safe-area-inset-top));
}
.auth-topbar-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.auth-topbar-brand:hover { text-decoration: none; }
.auth-topbar-mark {
width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
background: var(--ochre); display: grid; place-items: center;
color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 18px;
}
.auth-topbar-text { display: flex; flex-direction: column; line-height: 1.15; }
.auth-topbar-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #fff; letter-spacing: -.01em; }
.auth-topbar-sub { font-size: 11.5px; color: #9fb0c9; letter-spacing: .03em; }
/* Op desktop verbergen: daar draagt het fotopaneel al de merkidentiteit. */
@media (min-width: 900px) { .auth-topbar { display: none; } }
/* =====================================================================
HUISSTIJL-BEHEER (white-label)
===================================================================== */
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type="color"] {
width: 44px; height: 42px; padding: 3px; border: 1px solid var(--line);
border-radius: 9px; background: var(--canvas); cursor: pointer; flex-shrink: 0;
}
.color-field .input { flex: 1; font-family: ui-monospace, monospace; }
.brand-preview { display: flex; align-items: center; gap: 11px; padding: 14px; background: var(--ink); border-radius: 11px; }
.brand-preview-mark {
width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
background: var(--ochre); display: grid; place-items: center;
color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 19px;
}
.brand-preview-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-preview-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #fff; }
.brand-preview-sub { font-size: 11.5px; color: #9fb0c9; }
.wijkfoto-thumb {
width: 100%; max-width: 280px; aspect-ratio: 16/9; object-fit: cover;
border-radius: 10px; border: 1px solid var(--line); display: block;
}
/* =====================================================================
BEWONERSLIJST + PRIVACY
===================================================================== */
.dir-avatar {
position: relative;
width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
background: var(--ochre-soft); border: 1px solid var(--ochre-line);
color: var(--ochre-dark); display: grid; place-items: center;
font-family: var(--font-display); font-weight: 600; font-size: 18px;
overflow: hidden;
}
/* Absoluut i.p.v. height:100%: in een grid-cel kan een portretfoto met height:100%
het vakje oprekken, waardoor de kaart met foto hoger werd dan die zonder. Nu is
het vakje altijd 42px en zijn alle bewonerskaarten even hoog. */
.dir-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.privacy-box {
background: var(--surface); border: 1px solid var(--line);
border-radius: 10px; padding: 14px 16px; margin: 18px 0;
}
.privacy-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.privacy-intro { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; line-height: 1.5; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; cursor: pointer; }
.check-row input { width: 17px; height: 17px; flex-shrink: 0; }
/* =====================================================================
TAKEN
===================================================================== */
.task-card { position: relative; display: flex; align-items: flex-start; gap: 16px; }
/* Verwijderen is geen status: apart als kruisje rechtsboven i.p.v. een knop
tussen de statusknoppen (waar het als statusactie oogde). */
.task-card .taak-verwijder-form { position: absolute; top: 10px; right: 10px; z-index: 2; }
.taak-verwijder {
width: 30px; height: 30px; border-radius: 8px; padding: 0;
display: grid; place-items: center; cursor: pointer;
background: transparent; color: var(--ink-muted); border: 1px solid transparent;
}
.taak-verwijder:hover { background: var(--red-soft); color: var(--red); border-color: var(--red-soft); }
/* De statusbadge rechtsboven mag niet onder het kruisje verdwijnen. */
.task-card > div:last-child { padding-right: 34px; }
.task-card.task-done { opacity: 0.72; }
/* Notitie bij een taak: wat er gedaan is / waarom iets niet lukte. */
.taak-notitie {
margin-top: 8px; padding: 8px 12px;
background: var(--surface-2); border-radius: var(--r-sm);
border-left: 3px solid var(--ochre-line);
font-size: 13.5px; color: var(--ink-soft); line-height: 1.5;
}
.taak-notitie-kop {
display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
font-weight: 600; color: var(--ink-muted); margin-bottom: 2px;
}
.task-card.task-done .card-title,
.task-card.task-done span { text-decoration: none; }
@media (max-width: 560px) {
.task-card { flex-direction: column; }
.task-card > div:last-child { align-items: flex-start !important; }
}
/* =====================================================================
BEHEREN-KNOP (modulepagina's, alleen voor beheerders)
===================================================================== */
.beheer-knop {
display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
align-self: flex-start;
}
.beheer-knop-ic {
width: 14px; height: 14px; flex-shrink: 0;
background: currentColor;
-webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
/* =====================================================================
TERUG-KNOP (boven beheerpagina's)
===================================================================== */
.terug-knop {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13.5px; color: var(--ink-soft); font-weight: 500;
padding: 2px 0;
}
/* Rechts uitgelijnd, net als de terugknop in de paginakop: één plek waar je
oog hem zoekt, op elke pagina. Stond hier nog op links. */
.terug-rij { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.terug-knop:hover { color: var(--ink); text-decoration: none; }
.terug-knop-ic {
width: 8px; height: 8px; flex-shrink: 0;
border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg);
}
/* Eyebrow-rij: gouden accentregel links, optionele terugknop rechts.
Vaste minimumhoogte zodat de titel niet verspringt mét of zonder terugknop. */
.kop-eyebrow-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; height: 28px; margin-bottom: 10px;
}
.kop-eyebrow-row .eyebrow { margin-bottom: 0; }
.kop-eyebrow-row .terug-knop { margin: 0; }
/* =====================================================================
DATUMVELDEN (dag / maand / jaar) — altijd Nederlandse notatie
===================================================================== */
.datum-velden { display: flex; gap: 8px; align-items: center; }
/* Alle drie de velden verdelen de beschikbare breedte, zodat er nooit iets
buiten de kaart valt. Dag smaller, maand ruimer (langste woorden), jaar
middenmaat. */
.datum-velden select { min-width: 0; padding-right: 28px; background-position: right 9px center; }
.datum-velden select[name$="_dag"] { flex: 2 1 0; }
.datum-velden select.datum-maand { flex: 4 1 0; }
.datum-velden select[name$="_jaar"] { flex: 3 1 0; }
@media (max-width: 380px) {
.datum-velden { flex-wrap: wrap; }
.datum-velden select[name$="_dag"] { flex: 1 1 calc(50% - 4px); }
.datum-velden select.datum-maand { flex: 1 1 calc(50% - 4px); }
.datum-velden select[name$="_jaar"] { flex: 1 1 100%; }
.datum-velden input[type="number"] { width: 64px; }
}
/* =====================================================================
IDEEËN — Gerealiseerd-kolom uitlijnen met de eerste ideeënkaart
===================================================================== */
.ideeen-aside-spacer { display: none; }
@media (min-width: 880px) {
/* Hoogte = sorteerrij (knoppen ~35px) + de margin-bottom van 14px eronder */
.ideeen-aside-spacer { display: block; height: 49px; }
}
/* =====================================================================
ROLLEN & FUNCTIES — nette uitlijning van de besturingselementen
===================================================================== */
.roles-rij {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.roles-info { flex: 1 1 200px; min-width: 180px; }
.roles-functie { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.roles-functie select { width: 170px; padding: 9px 10px; }
.roles-rol { flex: 0 0 auto; width: 180px; display: flex; justify-content: flex-end; }
.roles-rol form { width: 100%; }
.roles-rol .btn { width: 100%; }
@media (max-width: 720px) {
.roles-functie, .roles-rol { width: 100%; flex: 1 1 100%; }
.roles-functie select { width: 100%; }
}
/* =====================================================================
LEDENLIJST — uitlijning van bedrag, status en knop in kolommen
===================================================================== */
.person-tarief {
display: inline-block; width: 72px; text-align: right;
font-size: 13.5px; color: var(--ink-soft); flex-shrink: 0;
}
.person-side .badge {
min-width: 104px; text-align: center; justify-content: center;
}
@media (max-width: 600px) {
.person-tarief { display: none; }
.person-side .badge { min-width: 0; }
}
/* =====================================================================
LIDMAATSCHAP-MELDING — prominent bovenaan dashboard tot incasso actief is
===================================================================== */
.lidmaatschap-melding {
display: flex; gap: 16px; align-items: flex-start;
background: var(--ochre-soft); border: 1px solid var(--ochre-line);
border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 22px;
}
.lidmaatschap-melding-ic {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
background: var(--ochre); color: #fff;
display: grid; place-items: center; font-size: 20px; font-weight: 700;
}
.lidmaatschap-melding-tekst { flex: 1; min-width: 0; }
.lidmaatschap-melding-tekst strong {
display: block; font-family: var(--font-display); font-size: 17px;
font-weight: 600; color: var(--ink); margin-bottom: 3px;
}
.lidmaatschap-melding-tekst p { color: var(--ink-soft); font-size: 14.5px; margin: 0; line-height: 1.5; }
/* Stap 3 (actie vereist) krijgt iets meer nadruk */
.lidmaatschap-stap-3 { background: #fdf4e3; border-color: var(--ochre); }
/* =====================================================================
LICENTIEMELDING (alleen voor beheerders, tijdens de proefperiode)
Een rustige systeemstatusregel die de navy chrome van de menubalk
voortzet, met een okergele statusstip als enige accent. Bewust geen
luide banner: het portaal werkt volledig, dit is een herinnering.
===================================================================== */
.licentie-melding {
background: var(--ink); /* naadloos verder op de navy menubalk, geen lijn */
}
.licentie-melding .wrap {
display: flex; align-items: center; gap: 11px;
padding-top: 11px; padding-bottom: 11px;
}
.licentie-melding-dot {
flex: none; width: 8px; height: 8px; border-radius: 50%;
background: var(--ochre); box-shadow: 0 0 0 4px rgba(201, 138, 43, .18);
}
.licentie-melding p {
margin: 0; font-size: 13.5px; line-height: 1.5; color: #c7d2e2;
}
.licentie-melding strong { color: #fff; font-weight: 600; }
/* "Nu opnieuw controleren" hoort bij de zin, niet als knop te schreeuwen. */
.licentie-melding-actie { margin-left: auto; flex: none; }
.licentie-melding-actie button {
background: none; border: 0; padding: 4px 0; cursor: pointer;
font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ochre);
white-space: nowrap;
}
.licentie-melding-actie button:hover { color: #e0a94f; text-decoration: underline; }
@media (max-width: 700px) {
.licentie-melding .wrap { flex-wrap: wrap; }
.licentie-melding-actie { margin-left: 19px; }
}
/* Maker-credit op de inlog/registratie-pagina's.
Op desktop staat links de foto en rechts het formulier; de credit hoort
alleen onder de formulierkant, anders valt hij over de naad van de twee
kolommen. Daarom op brede schermen rechts uitgelijnd binnen de rechterhelft. */
.auth-maker {
text-align: center; padding: 16px; font-size: 12px;
color: var(--ink-muted);
}
.auth-maker a { color: var(--ochre-dark); font-weight: 600; }
.auth-maker a:hover { color: var(--ochre-dark); text-decoration: underline; }
@media (min-width: 900px) {
.auth-maker {
position: fixed; bottom: 18px; right: 0;
left: 51.22%; width: 48.78%; padding: 0 18px;
}
}
/* =====================================================================
BEHEERPAGINA — rustiger overzicht (v1.12)
Minder gevulde pills en felle knoppen: status als stip + tekst,
zachte accentknop, en klikbare ledenrijen i.p.v. losse knoppen.
===================================================================== */
/* Status als kleine stip + tekst (vervangt gevulde pills in lijsten) */
.status-dot {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}
.status-dot::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: var(--ink-muted); flex-shrink: 0;
}
.status-dot.is-green { color: var(--green); }
.status-dot.is-green::before { background: var(--green); }
.status-dot.is-red { color: var(--red); }
.status-dot.is-red::before { background: var(--red); }
.status-dot.is-amber::before { background: var(--ochre); }
.person-status { margin-top: 4px; }
/* Zachte accentknop: herkenbaar ochre, maar rustig — voor secundaire acties */
.btn-accent-soft { background: var(--ochre-soft); color: var(--ochre-dark); border-color: var(--ochre-line); }
.btn-accent-soft:hover { background: #f6e7c8; color: var(--ochre-dark); }
/* Klikbare ledenrij (hele rij is een link; geen losse Bekijken-knop nodig).
flex-wrap:nowrap houdt avatar · gegevens · chevron altijd op één regel —
ook op smalle schermen — zodat de chevron niet naar een eigen regel zakt. */
.person-link {
text-decoration: none; color: inherit; flex-wrap: nowrap;
margin-inline: -10px; padding-inline: 10px; border-radius: 10px;
transition: background .12s;
}
.person-link:hover { background: var(--surface); text-decoration: none; }
.person-go {
flex-shrink: 0; align-self: center; margin-left: auto;
color: var(--ink-muted); font-size: 22px; line-height: 1; font-weight: 400;
}
/* Attentiekaart (aanmeldingen die wachten op beoordeling) */
.card-attn { border-color: var(--ochre-line); background: var(--ochre-soft); }
/* =====================================================================
UI-poetsronde 2.81.6 (gebruikersobservaties, UX-29): consistente knoppen,
uitgelijnde bedragen en labels, minder kale ruimte. Geen inline-styles.
===================================================================== */
/* Aanmelding goedkeuren: accentkaart als class; afwijzen achter een uitklap
zodat de kaart met de hoofdactie (goedkeuren, volle breedte) leidt. */
/* UX-23: de merk-accentfamilie heet --ochre-* (Branding::styleBlock overschrijft
die per vereniging); --accent-* bestond nooit, waardoor de rand terugviel op
de tekstkleur (harde donkere rand) en de achtergrond wegviel. */
.card-goedkeur { background: var(--ochre-soft); border-color: var(--ochre-line); }
.card-goedkeur .card-title { color: var(--ochre-dark); }
.afwijzen-details { margin-top: 16px; }
.afwijzen-details > summary { list-style: none; }
.afwijzen-details > summary::-webkit-details-marker { display: none; }
.afwijzen-details[open] > summary { margin-bottom: 14px; }
/* "Nieuw, wacht op beoordeling": elk lid als eigen witte kaart binnen de
accentbalk, i.p.v. een kale regel die in de lege ruimte zweeft. */
.nieuwe-leden .card-title { color: var(--ochre-dark); }
.nieuwe-leden .people { gap: 8px; }
.nieuwe-leden .person { background: #fff; border: 1px solid var(--ochre-line); border-radius: var(--r-sm); padding: 11px 13px; }
/* =====================================================================
UX-7: beheerzone van een vergadering als tabbladen per fase.
Radio+label, hetzelfde CSP-veilige patroon als het hamburgermenu.
Zonder :checked-ondersteuning staan de panelen gewoon onder elkaar. */
.bz-radiogroep { border: 0; padding: 0; margin: 0; }
.beheerzone .bz-radio { position: absolute; opacity: 0; pointer-events: none; }
.bz-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin-bottom: 18px; }
.bz-tab {
padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0;
border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.bz-tab:hover { color: var(--ink); background: var(--ochre-soft); }
/* :has() op de container (net als de UX-27-flashfix), omdat de radio's in een
fieldset zitten (UX-2) en dus geen siblings van de panelen zijn. Zonder
:has()-ondersteuning blijven de panelen onder elkaar staan: het oude beeld. */
.beheerzone:has(.bz-radio:checked) .bz-paneel { display: none; }
.beheerzone:has(#bz-agenda:checked) .bz-paneel-agenda,
.beheerzone:has(#bz-uitnodigen:checked) .bz-paneel-uitnodigen,
.beheerzone:has(#bz-stemmingen:checked) .bz-paneel-stemmingen,
.beheerzone:has(#bz-notulen:checked) .bz-paneel-notulen { display: block; }
.beheerzone:has(#bz-agenda:checked) .bz-tabs label[for="bz-agenda"],
.beheerzone:has(#bz-uitnodigen:checked) .bz-tabs label[for="bz-uitnodigen"],
.beheerzone:has(#bz-stemmingen:checked) .bz-tabs label[for="bz-stemmingen"],
.beheerzone:has(#bz-notulen:checked) .bz-tabs label[for="bz-notulen"] {
color: var(--ochre-dark); background: var(--ochre-soft); border-bottom-color: var(--ochre);
}
.beheerzone:has(#bz-agenda:focus-visible) .bz-tabs label[for="bz-agenda"],
.beheerzone:has(#bz-uitnodigen:focus-visible) .bz-tabs label[for="bz-uitnodigen"],
.beheerzone:has(#bz-stemmingen:focus-visible) .bz-tabs label[for="bz-stemmingen"],
.beheerzone:has(#bz-notulen:focus-visible) .bz-tabs label[for="bz-notulen"] {
outline: 2px solid var(--ochre-dark); outline-offset: 2px;
}
/* UX-31 (ontwerpregel Ibo 24-07): staan er meerdere knoppen onder elkaar in
beeld, dan lijnen ze uit. Deze rij zet veld + knop naast elkaar met een
vaste knopkolom, zodat gestapelde rijen dezelfde randen delen en de
knoppen links en rechts op één lijn staan. */
.veld-knop-rij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.veld-knop-rij .input { flex: 1; min-width: 220px; }
.veld-knop-rij .btn { flex: 0 0 auto; min-width: 176px; justify-content: center; }
/* UX-37: rustiger kop van de vergaderpagina. De titel is het focuspunt; type
en status staan eronder als lichte metaregel. De bestuursactie bij de notulen
staat licht en in-context in de sectiekop (row-between). */
.vergaderkop { font-family: var(--font-display); font-size: clamp(21px, 4.5vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.14; }
.vergader-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.vergader-oms { margin-top: 14px; color: var(--ink-soft); }
.notulen-kop { margin-bottom: 10px; }
.notulen-kop .card-title { margin-bottom: 0; }
/* UX-32: bewonerslijst. De functiebadge hoort bij de metaregel (zie de view);
de kaartopbouw is daardoor op elke engine tweeregelig en even hoog. */
.dir-rij { display: flex; align-items: center; gap: 14px; }
.dir-main { flex: 1; min-width: 0; }
.dir-naamrij { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }
.dir-naam { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.dir-meta .badge { vertical-align: middle; }
/* De functie rechts in de rij (besluit Ibo 26-07): meteen zichtbaar wie het
bestuur vormt, en de kavel en het adres houden hun eigen regel. */
.dir-functie { flex: none; margin-left: auto; padding-left: 8px; }
@media (max-width: 560px) {
/* Op een smal scherm past een tweede kolom niet; de functie zakt dan onder
de naam, maar wel als eerste regel zodat hij nog steeds opvalt. */
.dir-rij { flex-wrap: wrap; }
.dir-functie { order: -1; margin-left: 0; padding-left: 0; flex-basis: 100%; }
}
/* Changelog: badge in een vaste kolom, zodat de tekst overal op dezelfde lijn
begint ongeacht de labelbreedte ("Verbetering" vs "Nieuw"). */
.change-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.change-row { display: flex; gap: 12px; align-items: flex-start; }
.change-badge { flex: 0 0 108px; margin-top: 1px; }
.change-text { font-size: 14.5px; line-height: 1.5; color: var(--ink); }
/* Teruglink van een document naar de gekoppelde notulen (v1.12) */
.doc-koppeling {
display: block; margin: -4px 0 4px; padding: 6px 12px;
font-size: 13px; font-weight: 500; color: var(--ochre-dark);
background: var(--ochre-soft); border-radius: 0 0 var(--r-sm) var(--r-sm);
text-decoration: none;
}
.doc-koppeling:hover { background: #f6e7c8; text-decoration: none; }
/* =====================================================================
PRODUCT TOUR — rondleiding bij de eerste login (v1.12)
===================================================================== */
.tour-overlay {
position: fixed; inset: 0; z-index: 1000;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(28, 36, 51, .55); backdrop-filter: blur(2px);
}
.tour-box {
position: relative; width: 100%; max-width: 420px;
background: var(--canvas); border-radius: var(--r-lg);
box-shadow: var(--shadow); padding: 30px 26px 22px; text-align: center;
}
.tour-close-form { position: absolute; top: 10px; right: 12px; margin: 0; }
.tour-close {
background: none; border: none; font-size: 26px; line-height: 1;
color: var(--ink-muted); cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.tour-close:hover { background: var(--surface); color: var(--ink); }
.tour-icon {
width: 64px; height: 64px; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
color: var(--ochre-dark); background: var(--ochre-soft); border-radius: 50%;
}
.tour-titel { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.tour-tekst { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.tour-help { margin-top: 16px; }
.tour-dots { display: flex; gap: 7px; justify-content: center; margin: 22px 0 18px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: .15s; }
.tour-dot.is-active { background: var(--ochre); transform: scale(1.25); }
.tour-nav { display: flex; align-items: center; gap: 8px; }
@media (max-width: 480px) {
.tour-box { padding: 26px 18px 18px; }
}
/* UX-35: één wachtlijst op het dashboard, opvolger van de gestapelde
.bestuur-taken-banners. Bewust een witte kaart en geen okeren vlak: als
elke melding oker is, betekent oker niets meer. Alleen de rij die dichtbij
is krijgt het accent, en dan valt hij ook echt op. */
.wacht {
background: var(--canvas); border: 1px solid var(--line);
border-radius: var(--r); box-shadow: var(--shadow-sm);
margin-bottom: 26px; overflow: hidden;
}
.wacht-kop { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px 12px; }
.wacht-kop h2 { font-size: 19px; margin: 0; }
/* De telling in plaats van een badge per rij: één getal zegt hoeveel er ligt. */
.wacht-telling {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--line); display: grid; place-items: center;
font-family: var(--font-display); font-size: 14.5px; color: var(--ink-soft);
}
/* Het label had een streep die vanaf het woord naar rechts liep. Samen met de
bovenrand van de rij eronder gaf dat twee lijnen in dezelfde kleur op 13px
van elkaar, met verschillende lengtes: dat las als één geknipte lijn
(besluit Ibo 26-07). De rijrand is de scheiding, het label is bijschrift.
Padding 8/7 zet het ritme boven en onder het label gelijk op 15px, net als
tussen twee rijen. */
.wacht-groep {
margin: 0; padding: 8px 20px 7px;
font-size: 11px; font-weight: 600; letter-spacing: .09em;
text-transform: uppercase; color: var(--ink-muted);
}
/* De hele rij is het doel, niet alleen de linktekst: 46px is ruim boven het
minimum aanraakvlak en scheelt op een telefoon veel misprikken. */
.wacht-rij {
display: flex; align-items: center; gap: 13px;
min-height: 46px; padding: 7px 20px;
border-top: 1px solid var(--line-soft);
text-decoration: none; color: var(--ink);
/* De rij loopt tot tegen de kaartrand en de kaart klipt met overflow:hidden.
Een ring die 2px naar buiten valt heeft daar maar 1px ruimte, dus werden
de uiteinden afgesneden en bleven er twee losse streepjes over. Naar
binnen getekend past hij wel. */
outline-offset: -2px;
}
/* Geen onderstreping op hover: de rij is een blok, geen tekstlink, en de
achtergrondwissel is al de aanwijzing (zelfde afspraak als .board-item). */
.wacht-rij:hover, .wacht-rij:focus-visible { background: var(--surface); text-decoration: none; }
/* Elke rij heeft de lijn van de rij eronder als vloer, behalve de laatste: die
eindigde 1px voor de kaartrand, waardoor de tekst er met 12px tegenaan lag
terwijl er boven de kop 16px staat (feedback Ibo 26-07). Extra voet alleen
onderaan, zodat de rijen wel tot de rand blijven lopen en de hover-vulling
dus niet ineens ingesprongen staat. */
.wacht-rij:last-child { padding-bottom: 13px; }
.wacht-ic {
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
display: grid; place-items: center;
background: var(--surface-2); color: var(--ink-soft);
}
.wacht-ic.is-urgent { background: var(--ochre-soft); color: var(--ochre-dark); }
/* Titel en meta zitten samen in een blok, zodat ze op een smal scherm als
geheel kunnen stapelen zonder dat de pijl meeverhuist. */
.wacht-tekst { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.wacht-titel { font-size: 14.5px; font-weight: 600; min-width: 0; }
.wacht-meta {
margin-left: auto; flex-shrink: 0;
font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.wacht-meta.is-urgent { color: var(--ochre-dark); font-weight: 600; }
.wacht-pijl { color: var(--ink-muted); line-height: 1; flex-shrink: 0; }
@media (max-width: 560px) {
/* Naast elkaar bleef er op een telefoon te weinig over voor de titel, die
dan midden in een woord afbrak. Meta onder de titel dus. */
.wacht-rij { padding: 9px 16px; gap: 11px; }
.wacht-kop, .wacht-groep { padding-left: 16px; padding-right: 16px; }
.wacht-tekst { flex-direction: column; align-items: stretch; gap: 1px; }
.wacht-meta { margin-left: 0; }
}
/* =====================================================================
MOBIELE UITLIJNING — Taken & Agendabeheer (v1.12.2)
===================================================================== */
@media (max-width: 600px) {
/* Agendabeheer: de "Bewerken"-knop zakt heel onder de inhoud (de rij mag
nu wrappen), netjes uitgelijnd onder de tekst i.p.v. de datumblok. */
.agenda-row .person-side { padding-left: 66px; }
/* Taken: kaart stapelt volledig; status en knoppen links uitgelijnd en op
volle breedte, zodat "Verwijder" niet verweesd rechts blijft hangen. */
.task-card { align-items: stretch; }
.task-card > div:last-child { align-items: stretch !important; }
.task-card > div:last-child > .badge { align-self: flex-start; }
.task-card > div:last-child > div { justify-content: flex-start !important; }
.task-card > div:last-child > div form { flex: 1 1 auto; }
.task-card > div:last-child > div .btn { width: 100%; }
}
/* =====================================================================
AGENDA MAANDKALENDER — server-rendered, geen JS (v1.13)
===================================================================== */
.kalender { padding: 16px 16px 16px; margin-bottom: 26px; }
.kal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.kal-titel { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); }
.kal-nav {
width: 38px; height: 38px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 10px;
color: var(--ink); text-decoration: none; font-size: 22px; line-height: 1;
}
.kal-nav:hover { background: var(--surface); text-decoration: none; }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.kal-weekdagen { margin-bottom: 6px; }
.kal-wd { text-align: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); padding: 2px 0; }
.kal-cel {
position: relative; min-height: 46px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
border-radius: 10px; font-size: 13.5px; color: var(--ink-soft);
}
.kal-cel.is-leeg { background: none; }
.kal-dagnr { line-height: 1; }
.kal-merk { height: 10px; display: flex; align-items: center; justify-content: center; }
.kal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ochre); display: block; }
a.kal-cel.heeft-events {
background: var(--ochre-soft); border: 1px solid var(--ochre-line);
color: var(--ochre-dark); font-weight: 600; text-decoration: none;
}
a.kal-cel.heeft-events:hover { background: #f6e7c8; text-decoration: none; }
.kal-cel.is-vandaag { outline: 2px solid var(--ink); outline-offset: -2px; }
.kal-count {
font-size: 10px; font-weight: 700; background: var(--ochre); color: var(--ink);
border-radius: 8px; padding: 0 5px; line-height: 14px; min-width: 14px; text-align: center;
}
.kal-voet {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); flex-wrap: wrap;
}
.kal-legenda { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-muted); }
@media (max-width: 600px) {
.kalender { padding: 14px 12px; }
.kal-grid { gap: 4px; }
.kal-cel { font-size: 13px; border-radius: 8px; aspect-ratio: 1 / 1; min-height: 0; }
}
/* =====================================================================
UITLIJNING — Ideeën-stemkolom & documentbeheer (v1.14)
===================================================================== */
/* Ideeën (lid): pijlen + score in de stemkolom recht onder elkaar centreren.
De stemknoppen zitten in