/* Willeware-huisstijl: kleuren, lettertype en de kopband die elke applicatie deelt.
*
* BRON: willeware-home/portal/public/huisstijl.css (met de map fonts/ ernaast).
* Elke applicatie heeft een kopie; wijzig hier en kopieer daarna naar
* willeware-tools/public/ en team-planning-tool/static/
* AssetTagTrack gebruikt Tailwind en neemt enkel de kleurwaarden over in
* frontend/src/index.css. Voorstel en schermen: projectbestanden huisstijl/.
*
* Lettertype Inter (SIL Open Font License, fonts/LICENSE-Inter.txt), zelf
* meegeleverd: geen Google Fonts. Het CSP van de app heeft font-src 'self' nodig.
*/
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-latin-800-normal.woff2") format("woff2"); }
:root {
--ww-nacht: #101D36; /* kopband, zijbalk, hoofdknop */
--ww-nacht-2: #1A2B4C; /* hover op donkerblauw */
--ww-amber: #F7A600; /* accent, actief, focus op donkerblauw; nooit als tekst of focusrand op wit (2:1) */
--ww-amber-tekst: #8A5A00; /* oranje als tekst op wit */
--ww-achtergrond: #F5F6F8;
--ww-vlak: #FFFFFF;
--ww-tekst: #1C2433;
--ww-gedempt: #5A6378; /* 4,5:1 of meer op wit, de pagina en alle -licht-vlakken (was #66708A, 15 oktober 2026) */
--ww-lijn: #E3E6EC;
--ww-veldrand: #858DA0; /* rand van velden en gewone knoppen; 3,3:1 op wit, 3,1:1 op de pagina (WCAG 1.4.11) */
--ww-blauw: #2456C8; /* tekstlinks */
--ww-groen: #1B7D52; /* 5,1:1 op wit, ook als kleine tekst */
--ww-rood: #C63A3A;
--ww-band-tekst: #C7D2EA;
--ww-band-streep: #5D6B8A; /* schuine streep tussen merk en app in de kopband */
/* Lichte vlakken voor meldingen en gemarkeerde rijen. Tekst erop in --ww-tekst of de
* volle kleur (--ww-rood, --ww-groen, --ww-amber-tekst) of --ww-gedempt (minstens 5:1).
* De -rand-kleuren zijn sierranden van een vlak, geen rand van een knop of veld. */
--ww-rood-licht: #FDECEC;
--ww-rood-rand: #E9A8A8;
--ww-groen-licht: #E6F5EC;
--ww-groen-rand: #B9DCC9;
--ww-amber-licht: #FFF4E0;
--ww-amber-rand: #F2C76E;
--ww-hover: #F7F8FA; /* hover op een witte gewone knop of rij */
/* Focusrand: amber met een donkerblauwe rand eromheen, zodat hij overal 3:1 haalt
* (amber alleen op wit is 2:1). Gebruik op lichte vlakken:
* outline: 2px solid var(--ww-focus); outline-offset: 0; box-shadow: var(--ww-focus-rand);
* In de kopband volstaat amber alleen (8,3:1 op donkerblauw). */
--ww-focus: var(--ww-amber);
--ww-focus-rand: 0 0 0 4px var(--ww-nacht);
--ww-font: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ww-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
/* ---------- Kopband ----------
*
* ww-hulp opent de handleiding van de app, bij het hoofdstuk over de pagina waar je
* was (?van=, zie handleiding.js). Op de handleiding zelf krijgt hij
* aria-current="page". Op een gsm blijft enkel het vraagteken; het woord blijft
* voor schermlezers.
* Het schuine streepje tussen merk en app komt uit de CSS, niet uit de tekst.
*/
.ww-band {
display: flex;
flex-wrap: wrap; /* bij grotere tekstafstand (WCAG 1.4.12) zakt rechts naar een tweede regel */
align-items: center;
gap: 12px;
row-gap: 6px;
min-height: 56px;
padding: 8px 24px;
background: var(--ww-nacht);
color: #fff;
font-family: var(--ww-font);
font-size: 15px;
line-height: 1.3;
}
.ww-band a { text-decoration: none; }
.ww-merk { color: #fff; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.ww-merk span { color: var(--ww-amber); }
.ww-app { color: var(--ww-band-tekst); font-weight: 600; white-space: nowrap; }
.ww-app::before { content: "/"; color: var(--ww-band-streep); font-weight: 400; margin-right: 12px; }
a.ww-app:hover { color: #fff; }
.ww-hulp { display: inline-flex; align-items: center; gap: 7px; color: var(--ww-band-tekst); font-weight: 600; white-space: nowrap; }
.ww-hulp:hover, .ww-hulp[aria-current] { color: #fff; }
.ww-hulp i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-style: normal; font-weight: 700; font-size: 13px; line-height: 1; }
.ww-hulp b { font-weight: 600; }
.ww-hulp[aria-current] b { box-shadow: inset 0 -2px 0 var(--ww-amber); }
.ww-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; color: var(--ww-band-tekst); font-size: 14px; }
.ww-rechts form { display: contents; }
.ww-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ww-band .ww-uit {
font: inherit;
font-weight: 600;
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
background: transparent;
color: #fff;
cursor: pointer;
white-space: nowrap;
}
.ww-band .ww-uit:hover { background: rgba(255, 255, 255, 0.1); }
.ww-band a:focus-visible, .ww-uit:focus-visible { outline: 2px solid var(--ww-amber); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 600px) {
.ww-band { padding: 8px 16px; }
.ww-naam { display: none; }
.ww-hulp b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.ww-hulp i { width: 30px; height: 30px; font-size: 15px; }
}
/* Smalle gsm's (320 px): alles een tikje krapper, zodat Uitloggen niet uitsteekt. */
@media (max-width: 360px) {
.ww-band { padding: 8px 12px; gap: 5px; font-size: 14px; flex-wrap: nowrap; }
.ww-app::before { margin-right: 6px; }
.ww-rechts { gap: 5px; }
.ww-band .ww-uit { padding: 6px 8px; }
.ww-hulp i { width: 26px; height: 26px; font-size: 14px; }
}
/* ---------- Testomgeving ----------
* Op test.willeware.com en .test.willeware.com zet de app
* data-omgeving="test" op (OMGEVING=test in .env). Dan worden kopband,
* zijbalk, actieve tab en hoofdknop donkergroen in plaats van donkerblauw, en
* staat er een label TEST naast de appnaam:
* ToolboxTEST
* Op productie staat het attribuut er niet en verandert er niets.
* Contrast (gemeten 18 oktober 2026): wit op #0F4A35 10,2:1, --ww-band-tekst
* 7,4:1, het label (donkerblauw op amber) 8,3:1, amber op groen 5,1:1.
* Onder 400 px valt het label weg, zodat de band op één regel blijft; de kleur blijft.
*/
:root[data-omgeving="test"] {
--ww-nacht: #0F4A35;
--ww-nacht-2: #17604A;
--ww-band-tekst: #BFE3D3;
--ww-band-streep: #5E8F7C;
}
.ww-test {
background: var(--ww-amber);
color: #101D36;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
}
@media (max-width: 600px) {
.ww-test { font-size: 10px; padding: 2px 5px; margin-left: -4px; }
}
@media (max-width: 400px) {
.ww-test { display: none; }
}