/* Huisstijl awouters (versie 2.6, 27/9/2026): stijl "Helder", accent "Grafiet", tint "Leisteen", letter Inter Tight. Bron: Projects\portal\huisstijl.
Niet aanpassen in een app: kopieer de hele map naar de app (web/huisstijl/) en vraag wijzigingen aan via
Projects\portal\docs\verzoeken.md. Uitleg en regels: README.md in deze map.
Gebruik: , iconen:
Thema: volgt het toestel; dwingt het af. */
@font-face { font-family: "Inter Tight"; src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* ---- Tokens: licht --------------------------------------------------------------------------------------------- */
:root {
color-scheme: light;
/* vlakken en tekst */
--bg: #f5f6f8; --vlak: #ffffff; --vlak-2: #eef0f3; --veld-bg: #ffffff;
--inkt: #14161a; --zacht: #5d6470; --lijn: #e3e6eb; --lijn-sterk: #cfd4db; --raster: #eef0f3;
/* accent (Grafiet): knoppen, selectie, focus */
--accent: #27272a; --accent-inkt: #ffffff; --accent-tekst: #27272a; --accent-zacht: #e8e8ea;
/* tint (Leisteen): enkel voor sfeer - achtergrond van icoontjes en selectie; betekent niets.
--tint-waas wordt sinds 2.4 niet meer gebruikt (blijft bestaan voor oudere kopieën) */
--tint: #e8eef7; --tint-tekst: #34507a; --tint-waas: #eef3fa;
/* status: altijd met icoon + woord, nooit enkel kleur */
--goed: #0ca30c; --let-op: #fab219; --storing: #d03b3b;
--goed-tekst: #1a7431; --goed-vlak: #e3f4e6; --let-op-tekst: #8a5a00; --let-op-vlak: #fdf1d6;
--fout-tekst: #b42318; --fout-vlak: #fde6e3;
/* grafieken (dataviz-palet, vaste volgorde; licht: 3, 4 en 5 altijd met zichtbaar label of tabel) */
--reeks-1: #2a78d6; --reeks-2: #eb6834; --reeks-3: #1baf7a; --reeks-4: #eda100;
--reeks-5: #e87ba4; --reeks-6: #008300; --reeks-7: #4a3aa7; --reeks-8: #e34948;
--stijging: #1a7431; --daling: #b42318;
/* tekstgroottes: de ENIGE groottes in alle apps (2.2); nooit een eigen font-size */
--tekst-mini: .75rem; /* 12 px: as-labels van grafieken, kleine badges */
--tekst-klein: .8125rem; /* 13 px: bijschrift, labels, statussen, sectietitels */
--tekst: .9375rem; /* 15 px: gewone tekst (standaard van de pagina) */
--tekst-groot: 1.0625rem; /* 17 px: nadruk, titel van een kaart (h3) */
--kop-2: 1.25rem; /* 20 px: h2 */
--kop-1: 1.5rem; /* 24 px: h1 */
--cijfer-groot: 2.25rem; /* 36 px: kerncijfer */
/* vorm */
--lettertype: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--rond: 12px; --rond-klein: 8px; --knop-rond: 10px; --chip-rond: 999px;
--binnen: 16px; --tussen: 20px; --tegel-tussen: 10px; --icoon: 22px;
--schaduw: none; --schaduw-klein: none; /* nooit schaduw als versiering (Stijn, 26/9) */
}
/* ---- Tokens: donker (eigen stappen, geen automatische omkering) -------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-thema="licht"]) {
color-scheme: dark;
--bg: #0f1115; --vlak: #1a1c21; --vlak-2: #24272e; --veld-bg: #0f1115;
--inkt: #eceef2; --zacht: #9aa1ad; --lijn: #2a2e36; --lijn-sterk: #3a3f49; --raster: #24272e;
--accent: #e4e4e7; --accent-inkt: #111113; --accent-tekst: #f4f4f5; --accent-zacht: #2a2a2e;
--tint: #1c2533; --tint-tekst: #a9c1e6; --tint-waas: #16202e;
--goed-tekst: #6fd98a; --goed-vlak: #15321d; --let-op-tekst: #f5c451; --let-op-vlak: #3a2e10;
--fout-tekst: #ff8f85; --fout-vlak: #3d1a17;
--reeks-1: #3987e5; --reeks-2: #d95926; --reeks-3: #199e70; --reeks-4: #c98500;
--reeks-5: #d55181; --reeks-6: #008300; --reeks-7: #9085e9; --reeks-8: #e66767;
--stijging: #6fd98a; --daling: #ff8f85;
--schaduw-klein: none;
}
}
:root[data-thema="donker"] {
color-scheme: dark;
--bg: #0f1115; --vlak: #1a1c21; --vlak-2: #24272e; --veld-bg: #0f1115;
--inkt: #eceef2; --zacht: #9aa1ad; --lijn: #2a2e36; --lijn-sterk: #3a3f49; --raster: #24272e;
--accent: #e4e4e7; --accent-inkt: #111113; --accent-tekst: #f4f4f5; --accent-zacht: #2a2a2e;
--tint: #1c2533; --tint-tekst: #a9c1e6; --tint-waas: #16202e;
--goed-tekst: #6fd98a; --goed-vlak: #15321d; --let-op-tekst: #f5c451; --let-op-vlak: #3a2e10;
--fout-tekst: #ff8f85; --fout-vlak: #3d1a17;
--reeks-1: #3987e5; --reeks-2: #d95926; --reeks-3: #199e70; --reeks-4: #c98500;
--reeks-5: #d55181; --reeks-6: #008300; --reeks-7: #9085e9; --reeks-8: #e66767;
--stijging: #6fd98a; --daling: #ff8f85;
--schaduw-klein: none;
}
/* ---- Basis ------------------------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* 2.5.1: anders wint display:grid/flex van .stapel/.rij en blijft "verborgen" zichtbaar */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--inkt); font: 400 var(--tekst)/1.5 var(--lettertype);
background: var(--bg); /* 2.4: effen (Stijn koos A), geen gloed meer */
-webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; line-height: 1.2; }
h1 { font-size: var(--kop-1); } h2 { font-size: var(--kop-2); } h3 { font-size: var(--tekst-groot); }
p { margin: 0; }
a { color: var(--accent-tekst); text-decoration: underline; text-underline-offset: 2px; }
small, .klein { font-size: var(--tekst-klein); }
.mini { font-size: var(--tekst-mini); }
.groot { font-size: var(--tekst-groot); }
.zacht { color: var(--zacht); }
.cijfer { font-variant-numeric: tabular-nums; }
.stijging { color: var(--stijging); } .daling { color: var(--daling); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ---- Iconen (Lucide, lijn 2 px) --------------------------------------------------------------------------------- */
.icoon { width: var(--icoon); height: var(--icoon); flex: none; }
.icoon.klein { --icoon: 16px; } .icoon.groot { --icoon: 28px; }
/* ---- Opbouw ----------------------------------------------------------------------------------------------------- */
.pagina { max-width: 960px; margin: 0 auto; padding: 0 16px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tussen); }
/* 2.5.4: kop binnen .pagina: geen auto-marges (anders zo breed als de titel en schuift de pagina opzij; melding Pricewatch) */
.pagina > .kop { margin-inline: 0; padding-inline: 0; min-width: 0; }
.kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px;
max-width: 960px; margin: 0 auto; padding: 4px 16px; }
.kop .merk { font-weight: 700; color: var(--inkt); text-decoration: none; }
/* Subpagina: links een terugknop + de titel van de pagina (2.5). Een geïnstalleerde app heeft geen browserknop. */
.kop .links { display: flex; align-items: center; gap: 2px; min-width: 0; margin-left: -10px; }
.kop .terug { color: var(--inkt); }
.kop .titel { margin: 0; font-size: var(--tekst-groot); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kop nav { display: flex; gap: 2px; }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond); padding: var(--binnen);
box-shadow: var(--schaduw); }
.kaart > * + * { margin-top: 8px; }
.stapel { display: grid; gap: 12px; }
.rij { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.midden { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.sectie-titel { font-size: var(--tekst-klein); font-weight: 600; color: var(--zacht); }
/* ---- Knoppen ---------------------------------------------------------------------------------------------------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
border-radius: var(--knop-rond); border: 0; background: var(--accent); color: var(--accent-inkt); font: inherit;
font-weight: 600; cursor: pointer; text-decoration: none; }
.knop.tweede { background: var(--vlak-2); color: var(--inkt); }
.knop.rand { background: transparent; color: var(--inkt); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.knop.icoonknop { background: transparent; color: var(--inkt); padding: 0; width: 44px; }
.knop.gevaar { background: var(--fout-vlak); color: var(--fout-tekst); }
.knop.breed { width: 100%; min-height: 52px; }
.knop:disabled { opacity: .5; cursor: default; }
/* ---- Velden en keuzes ------------------------------------------------------------------------------------------- */
.veld { display: grid; gap: 6px; font-size: var(--tekst-klein); color: var(--zacht); }
.veld input, .veld select, .veld textarea { font: inherit; font-size: 1rem; /* 16 px: kleiner laat een gsm inzoomen */ color: var(--inkt); background: var(--veld-bg);
border: 1px solid var(--lijn-sterk); border-radius: var(--rond-klein); min-height: 44px; padding: 0 12px; }
.veld textarea { padding: 10px 12px; min-height: 88px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--chip-rond);
background: var(--vlak-2); color: var(--inkt); font: inherit; font-size: var(--tekst-klein); font-weight: 500; border: 0; cursor: pointer; }
/* Geselecteerd = tint + rand in de tintletter (2.1: enkel tint viel in donker thema te weinig op) */
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--tint); color: var(--tint-tekst); font-weight: 600;
box-shadow: inset 0 0 0 2px var(--tint-tekst); }
button.chip, a.chip { min-height: 40px; }
.segment { display: flex; gap: 3px; padding: 3px; background: var(--vlak-2); border-radius: var(--chip-rond); }
/* 2.5.3: aanraakdoel minstens 44 px (segment) en 40 px (chip als knop); gsm-controle Pricewatch */
.segment > button { flex: 1; min-height: 44px; border: 0; border-radius: var(--chip-rond); background: transparent;
color: var(--zacht); font: inherit; font-weight: 600; font-size: var(--tekst-klein); cursor: pointer; }
.segment > [aria-selected="true"], .segment > [aria-pressed="true"] { background: var(--tint); color: var(--tint-tekst);
box-shadow: inset 0 0 0 2px var(--tint-tekst); }
/* 2.6: rij met een tekst links en een schakelaar rechts (instellingen) */
.schakel-rij { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.schakel { appearance: none; width: 48px; height: 28px; border-radius: 999px; background: var(--lijn-sterk); position: relative;
cursor: pointer; margin: 0; flex: none; transition: background .15s; }
.schakel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
background: var(--vlak); transition: transform .15s; }
.schakel:checked { background: var(--accent); }
.schakel:checked::after { transform: translateX(20px); background: var(--accent-inkt); }
/* ---- Tegels (portaal en overzichten) ---------------------------------------------------------------------------- */
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--tegel-tussen); }
.tegel { position: relative; display: grid; gap: 2px; align-content: start; min-height: 116px; padding: var(--binnen);
background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--rond); color: var(--inkt); text-decoration: none; }
.tegel-icoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--tint);
color: var(--tint-tekst); margin-bottom: 10px; }
.tegel-naam { font-weight: 600; }
.tegel-uitleg { color: var(--zacht); font-size: var(--tekst-klein); }
.tegel .stip { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--goed); }
.tegel .stip.let-op { background: var(--let-op); } .tegel .stip.storing { background: var(--storing); }
/* ---- Kerncijfer ------------------------------------------------------------------------------------------------- */
.kerncijfer .waarde { font-size: var(--cijfer-groot); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* ---- Lijsten en status ------------------------------------------------------------------------------------------ */
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst > li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--lijn); }
.lijst > li:first-child { border-top: 0; padding-top: 0; }
.lijst > li:last-child { padding-bottom: 0; }
.lijst .tekst { flex: 1; min-width: 0; display: grid; }
.status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tekst-klein); font-weight: 600; padding: 2px 8px;
border-radius: var(--chip-rond); white-space: nowrap; }
.status .icoon { --icoon: 16px; }
.status.goed { color: var(--goed-tekst); background: var(--goed-vlak); }
.status.let-op { color: var(--let-op-tekst); background: var(--let-op-vlak); }
.status.fout { color: var(--fout-tekst); background: var(--fout-vlak); }
/* ---- Samenvatting: één zin die het antwoord geeft (bv. "Goed op weg: …"), met een streep in de toon ---------- */
.samenvatting { margin: 0; padding: 10px 14px; border-radius: var(--rond-klein); background: var(--vlak-2);
border-left: 4px solid var(--lijn-sterk); font-size: var(--tekst); font-weight: 500; line-height: 1.45; }
.samenvatting.goed { border-left-color: var(--goed); }
.samenvatting.let-op { border-left-color: var(--let-op); }
.samenvatting.fout { border-left-color: var(--storing); }
.samenvatting.info { border-left-color: var(--tint-tekst); background: var(--tint); }
/* ---- Voortgang (2.5.2): effen balk, geen verloop ------------------------------------------------------------------ */
.voortgang { display: grid; gap: 6px; }
.voortgang .balk-spoor { height: 8px; border-radius: 999px; background: var(--vlak-2); overflow: hidden; }
.voortgang .balk-vul { height: 100%; width: 0; border-radius: 999px; background: var(--tint-tekst); transition: width .3s ease; }
.voortgang .balk-tekst { display: flex; justify-content: space-between; gap: 8px; font-size: var(--tekst-klein); color: var(--zacht); }
/* ---- Meldingen -------------------------------------------------------------------------------------------------- */
.melding { padding: 10px 14px; border-radius: var(--rond-klein); background: var(--vlak); border: 1px solid var(--lijn); }
.melding.goed { background: var(--goed-vlak); color: var(--goed-tekst); border-color: transparent; }
.melding.let-op { background: var(--let-op-vlak); color: var(--let-op-tekst); border-color: transparent; }
.melding.fout { background: var(--fout-vlak); color: var(--fout-tekst); border-color: transparent; }
/* ---- Grafieken (SVG) -------------------------------------------------------------------------------------------- */
.grafiek { position: relative; }
.grafiek svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafiek .as { fill: var(--zacht); font-size: var(--tekst-mini); font-variant-numeric: tabular-nums; }
.grafiek .raster { stroke: var(--raster); stroke-width: 1; }
.grafiek .basis { stroke: var(--lijn-sterk); stroke-width: 1; }
.legende { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.legende li { display: flex; align-items: center; gap: 10px; font-size: var(--tekst-klein); }
.legende .staal { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.tip { position: absolute; pointer-events: none; background: var(--inkt); color: var(--bg); font-size: var(--tekst-klein); padding: 6px 10px;
border-radius: var(--rond-klein); white-space: nowrap; }