uit de
HulpTagHelper. Het paneel ligt over de inhoud heen (geen verspringende
pagina) en is verankerd aan de titelrij, zodat het op 390px binnen de
pagina blijft. Alleen tokens, dus licht en donker thema volgen vanzelf. */
.paginatitel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2) var(--sp-3);
margin: 0 0 var(--sp-5);
}
.paginatitel > h1,
.paginatitel > h2 { margin: 0; }
/* In een tabbladkop staat de titelrij naast de primaire knop; hij neemt de
rest van de breedte, zodat het paneel eronder ruimte heeft. */
.tabkop > .paginatitel { flex: 1 1 20rem; margin: 0; }
/* Op het takenscherm volgt de bedieningsregel direct onder de kop. */
.paginatitel.takentitel { margin-bottom: var(--sp-2); }
/* In Instellingen staat de "?" naast de titel van het onderdeel. */
.instellingen-kop .paginatitel { margin: 0; }
:where(div, header):has(> .hulp) { position: relative; }
.hulp { position: static; display: inline-block; }
.hulp-knop {
list-style: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--line2);
background: var(--surf);
color: var(--brandtext);
font-size: var(--fs-secundair);
font-weight: 600;
line-height: 1;
cursor: pointer;
user-select: none;
}
.hulp-knop::-webkit-details-marker { display: none; }
.hulp-knop::marker { content: ""; }
.hulp-knop:hover { border-color: var(--brand); }
.hulp-knop:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hulp[open] > .hulp-knop {
background: var(--brand);
border-color: var(--brand);
color: var(--brandink);
}
.hulp-paneel {
position: absolute;
top: calc(100% + var(--sp-2));
left: 0;
z-index: 30;
box-sizing: border-box;
width: min(66ch, 100%);
padding: var(--sp-4) var(--sp-5);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surf);
color: var(--ink2);
box-shadow: var(--shadow2);
font-size: var(--fs-secundair);
font-weight: 400;
letter-spacing: normal;
text-align: left;
white-space: normal;
}
.hulp-paneel > :first-child { margin-top: 0; }
.hulp-paneel > :last-child { margin-bottom: 0; }
.hulp-paneel p { margin: 0 0 var(--sp-3); max-width: none; color: var(--ink2); }
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
/* AC-4.10: een duimvlak van 44px. */
.hulp-knop { width: 44px; height: 44px; }
.hulp-paneel { width: 100%; }
}
/* --- einde US-232 --- */
/* =====================================================================
US-229 — Mijn declaraties: één tabel met status (AC-229.1, AC-229.2,
ADR-0159). De tabel draagt .mijndeclaraties naast .beheertabel; de
speltak- en statuschips zijn de bestaande .filterchips van Declaraties.
===================================================================== */
/* Twee rijen chips onder elkaar: speltak en status. */
.filterchips + .filterchips { margin-top: calc(-1 * var(--sp-3)); }
/* De afwijzingsreden onder de statuschip (functioneel ontwerp 11.8). */
.mijndeclaraties .mijndecl-reden {
display: block;
margin-top: var(--sp-1);
font-size: var(--fs-meta);
color: var(--ink2);
white-space: normal;
}
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
/* AC-229.2: op een telefoon stapelt de tabel tot één kaartje per declaratie,
met per cel de kolomkop ervoor (data-kop), zoals de seizoentabel (US-195).
De koprij verdwijnt; het nummer is de kop van het kaartje. */
.mijndeclaraties,
.mijndeclaraties tbody,
.mijndeclaraties tr,
.mijndeclaraties th,
.mijndeclaraties td { display: block; }
.mijndeclaraties thead { display: none; }
.mijndeclaraties tbody tr {
padding: var(--sp-5) var(--sp-7);
border-top: 1px solid var(--line);
}
.mijndeclaraties tbody th[scope="row"] {
padding: 0 0 var(--sp-3);
border-top: 0;
white-space: normal;
}
.mijndeclaraties tbody td {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2) var(--sp-5);
padding: 2px 0;
border-top: 0;
white-space: normal;
}
.mijndeclaraties tbody td[data-kop]::before {
content: attr(data-kop);
flex: none;
color: var(--ink2);
}
.mijndeclaraties tbody td.getal { text-align: left; }
.mijndeclaraties .mijndecl-reden { flex-basis: 100%; text-align: right; }
}
/* --- einde US-229 --- */
/* =====================================================================
US-230 — Lijstzoekveld boven de transactielijst (AC-230.1, AC-230.2,
FB-008, ADR-0160)
---------------------------------------------------------------------
Het veld "Zoek op naam, datum of bedrag" staat niet meer in de kopbalk
maar in de kopregel van de lijst op het speltakdashboard. Mobiel eerst:
titel en teller op de eerste regel, het veld over de volle breedte
eronder, boven de lijst. Boven 600px staan titel, teller en veld op één
regel, het veld rechts (250px uit het US-122-blok). */
.lijstkop-zoek {
flex-wrap: wrap;
align-items: center;
row-gap: var(--sp-4);
}
.lijstkop-zoek .kopzoek {
flex: 1 1 100%;
width: 100%;
min-width: 0;
}
@media (min-width: 601px) and (min-height: 501px), (min-width: 601px) and (pointer: fine), (min-width: 601px) and (pointer: none) {
.lijstkop-zoek { flex-wrap: nowrap; }
.lijstkop-zoek .lijstteller { margin-left: auto; }
.lijstkop-zoek .kopzoek { flex: 0 1 250px; width: 250px; }
}
/* --- einde US-230 --- */
/* --- US-236 — mutatierapportage: de volgnummerkolom is een gewone tabelcel ---
FB-017: door de volgnummerkolom liep een lichte verticale balk en de
volgnummers stonden bovenaan hun cel. De oorzaak is de algemene regel
.volgnr { display: inline-block; min-width: 2.2em } (bedoeld voor een
volgnummer als in lopende tekst), die hier ook de | trof: een cel met display:inline-block is geen tabelcel meer. De
browser zet er een anonieme cel omheen zonder rand en zonder eigen hoogte,
dus de rijrand liep niet door en de inhoud stond bovenaan (ADR-0165).
De kolom is niet vastgezet en krijgt dus geen eigen achtergrond, rand of
schaduw: zij erft alles van de rij, in licht en in donker thema. Alle cellen
van het grid zijn op dezelfde manier verticaal gecentreerd. */
.mutatiegrid td.volgnr {
display: table-cell;
min-width: 0;
font-size: inherit;
}
.mutatiegrid th, .mutatiegrid td { vertical-align: middle; }
/* --- einde US-236 --- */
/* --- US-237 — Knoppen gelijk van hoogte, verwerpen als icoon in het veld ---
AC-237.1: de tegels in "Nieuw vastleggen" zijn allemaal even hoog en hun
tekst blijft op één regel. "Contant opnemen" brak over twee regels en werd
daardoor hoger dan de rest (FB-019). Het raster krijgt rijen van gelijke
hoogte (grid-auto-rows: 1fr) en de naam breekt niet; is een kolom te smal,
dan krimpt de tekst met een beletselteken in plaats van te breken. Op
mobiel (één kolom) blijven ze >= 44px.
AC-237.2: het verwerpen van één voorstel is een klein kruisicoon rechts ín
het invoerveld in plaats van een knop "Verwerpen" eronder (FB-020). Het
icoon is een echte |