/* ============================================================================ Thuiszorg KMS — Design System v2 "Warme zorg, premium afwerking" ---------------------------------------------------------------------------- Inhoud: 1. Design-tokens (kleurschalen, semantiek, spacing, radius, schaduw, typo) 2. Basis & typografie 3. Layout + sidebar 4. Hero & KPI-kaarten (dashboard) 5. Kaarten & grids 6. Knoppen 7. Formulieren (incl. mobiele kleef-balk) 8. Tabellen 9. Status-pillen & badges 10. Meldingen (toast-stijl) 11. Modals 12. Tabs & accordeon 13. Auth / login (glaskaart) 14. Agenda & planning 15. Stepper / zorgplan 16. Lege staten 17. Module-specifiek (batches 3 t/m 7) 18. Print 19. Responsive & toegankelijkheid Regels: geen externe bronnen (CSP 'self'), animaties alleen op transform/opacity, prefers-reduced-motion gerespecteerd. ========================================================================== */ /* --------------------------------------------------------------------------- 1. DESIGN-TOKENS ------------------------------------------------------------------------- */ /* Kop-lettertype (zelf-gehost, binnen CSP font-src 'self'). Ontbreekt public_html/assets/fonts/display.woff2, dan valt alles stil terug op de systeemstack — niets breekt. */ @font-face { font-family: "KMS Display"; src: url("/assets/fonts/display.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* ----------------------------------------------------------------------- MERKKLEUR PER ORGANISATIE De hele accentschaal hangt aan vijf variabelen die de layout op zet vanuit config/organisaties.php — TZM magenta, ZGM turquoise, Adoria petrol. De basis eronder (papier, panelen, inkt) is voor alle drie gelijk; alleen het accent verschilt. Wie in drie bijna identieke systemen werkt moet in een oogopslag zien waar hij zit. De waarden hier zijn de terugval voor schermen buiten de layout om (het inlogscherm, een foutpagina): het turquoise van ADORIA groep. Let op de rolverdeling. `--merk` is de logokleur en is ALLEEN geldig als vlak; de felle turquoise van ZGM haalt op papierwit 2,3:1 en is dus onleesbaar als tekst. Daarvoor is `--merk-tekst`, die op AA zit. ----------------------------------------------------------------------- */ /* De layout zet --org-* als inline stijl op ; dit zijn de terugvalwaarden voor schermen buiten de layout om. Ze worden hier omgezet naar de tokens die de rest van het bestand gebruikt, zodat het donkere thema die omzetting kan overnemen. */ --org-kleur: #0E9098; --org-tekst: #046A72; --org-diep: #045057; --org-zacht: #E7F4F5; --org-rand: #C1E3E6; --merk: var(--org-kleur); --merk-tekst: var(--org-tekst); --merk-diep: var(--org-diep); --merk-zacht: var(--org-zacht); --merk-rand: var(--org-rand); /* -- Accentschaal, afgeleid van de merkkleur -------------------------- `color-mix` maakt van één merkkleur een volledige tintenschaal, zodat een nieuwe werkmaatschappij niets meer nodig heeft dan haar logokleur. De naam `salie` is blijven staan omdat hij op 68 plekken in dit bestand wordt gebruikt; hij betekent nu "accent", niet "groen". */ --salie-50: color-mix(in srgb, var(--merk) 5%, #FFFFFF); --salie-100: var(--merk-zacht); --salie-200: var(--merk-rand); --salie-300: color-mix(in srgb, var(--merk) 45%, #FFFFFF); --salie-400: color-mix(in srgb, var(--merk) 72%, #FFFFFF); --salie-500: var(--merk); --salie-600: var(--merk-tekst); --salie-700: var(--merk-tekst); --salie-800: var(--merk-diep); --salie-900: color-mix(in srgb, var(--merk-diep) 82%, #000000); /* -- Tweede accent: de diepe merkkleur ------------------------------- Was terracotta. Eén merkhue door het hele scherm houdt rood, amber en groen vrij voor wat ze moeten betekenen: allergie, aandacht, akkoord. In een dossier is dat geen smaakkwestie. */ --terra-50: color-mix(in srgb, var(--merk-diep) 5%, #FFFFFF); --terra-100: color-mix(in srgb, var(--merk-diep) 11%, #FFFFFF); --terra-200: color-mix(in srgb, var(--merk-diep) 24%, #FFFFFF); --terra-300: color-mix(in srgb, var(--merk-diep) 45%, #FFFFFF); --terra-400: color-mix(in srgb, var(--merk-diep) 70%, #FFFFFF); --terra-500: var(--merk-diep); --terra-600: var(--merk-diep); --terra-700: color-mix(in srgb, var(--merk-diep) 88%, #000000); --terra-800: color-mix(in srgb, var(--merk-diep) 76%, #000000); --terra-900: color-mix(in srgb, var(--merk-diep) 64%, #000000); /* -- Kleurschaal: zand (warme neutralen) -- */ --zand-50: #FCFBF9; --zand-100: #F5F1EB; --zand-200: #EFEAE2; --zand-300: #E6DFD5; --zand-400: #D6CCBD; --zand-500: #B3A794; --zand-600: #9A8E7F; --zand-700: #6B6258; --zand-800: #4A433C; --zand-900: #2A2521; /* -- Semantische tokens -- */ --succes: #2C7A5B; --succes-donker: #1F5C44; --succes-licht: #E5F0E9; --succes-rand: #C2DECB; --alert: #B0412F; --alert-donker: #8E3323; --alert-licht: #F7E6E1; --alert-rand: #E8C5BC; --waarschuwing: #8A5F13; --waarschuwing-donker: #6E4C0E; --waarschuwing-licht: #F8EFDC; --waarschuwing-rand: #EAD9B0; --info: #2E5E75; --info-licht: #E4EEF3; --info-rand: #C0D6E1; /* Afgekeurd in de dossiercontrole. Bewust paars en geen rood: rood is in dit systeem "ontbreekt", en die twee mogen op hetzelfde scherm niet op elkaar lijken. */ --afkeur: #6D4B8F; --afkeur-licht: #F0EAF6; --afkeur-rand: #DBCCE9; /* -- Legacy-aliassen (elders in views/CSS gebruikt; NIET verwijderen) -- */ --kleur-primair: var(--salie-700); --kleur-primair-licht: var(--salie-500); --kleur-primair-donker: var(--salie-800); --kleur-accent: var(--terra-500); --kleur-accent-donker: var(--terra-600); --kleur-accent-licht: var(--terra-100); --kleur-achtergrond: #FFFFFF; --kleur-pagina: #FAF8F5; --kleur-kaart: var(--zand-100); --kleur-rand: var(--zand-300); --kleur-rand-zacht: var(--zand-200); --kleur-tekst: var(--zand-900); --kleur-tekst-zacht: var(--zand-700); --kleur-tekst-hint: #7D7163; /* AA-contrast (≥4.5:1) op wit */ --vlak: #FFFFFF; /* opvlak van kaarten/tabellen/inputs; donker thema overschrijft */ --vlak-zacht: var(--zand-50); --kleur-alert: var(--alert); --kleur-alert-licht: var(--alert-licht); --kleur-succes: var(--succes); --kleur-succes-licht: var(--succes-licht); --kleur-waarschuwing: var(--waarschuwing); --kleur-waarschuwing-licht: var(--waarschuwing-licht); --accent: var(--salie-700); /* gebruikt in kwaliteit/dashboard.php */ --terracotta: var(--terra-500); /* idem */ /* -- Gradients (gericht ingezet, niet overal) -- */ --gradient-primair: linear-gradient(165deg, var(--merk-tekst) 0%, var(--merk-diep) 100%); --gradient-hero: linear-gradient(135deg, var(--merk-tekst) 0%, var(--merk-diep) 62%, color-mix(in srgb, var(--merk-diep) 80%, #000000) 100%); --gradient-hero-zacht: linear-gradient(135deg, var(--merk-zacht) 0%, var(--zand-100) 62%, var(--merk-zacht) 100%); --gradient-accentrand: linear-gradient(120deg, var(--merk), var(--merk-diep)); /* Van --merk-tekst en niet van --merk: witte initialen op de felle logokleur van ZGM halen 2,5:1. Beide eindpunten zitten nu op AA. */ --gradient-avatar: linear-gradient(140deg, var(--merk-tekst), var(--merk-diep)); --avatar-tekst: #FFFFFF; --gradient-sparkline: linear-gradient(180deg, color-mix(in srgb, var(--merk) 35%, transparent), transparent); /* -- Spacing (4px-grid) -- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* -- Radius-schaal -- */ --radius-xs: 6px; --radius-sm: 9px; --radius: 13px; --radius-lg: 18px; --radius-xl: 24px; --radius-pil: 999px; /* -- Schaduw-schaal (3 niveaus: rust, zweef, modal) — warm, nooit hard grijs -- */ --schaduw-sm: 0 1px 2px rgba(58, 46, 34, 0.06); --schaduw: 0 4px 16px rgba(58, 46, 34, 0.08), 0 1px 3px rgba(58, 46, 34, 0.05); --schaduw-lg: 0 18px 44px rgba(58, 46, 34, 0.13), 0 5px 12px rgba(58, 46, 34, 0.06); /* -- Typografie (modular scale ~1.2) -- */ --lettertype: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --lettertype-kop: "KMS Display", var(--lettertype); --fs-xs: 0.72rem; /* micro-labels, tabelkoppen */ --fs-sm: 0.85rem; /* secundaire tekst */ --fs-basis: 1rem; /* body */ --fs-md: 1.2rem; /* h3/kaarttitels */ --fs-lg: 1.44rem; /* h2 */ --fs-xl: 1.73rem; /* h1 */ --fs-2xl: 2.07rem; /* hero-kop */ --fs-3xl: 2.6rem; /* KPI-displaycijfers */ --ls-kop: -0.02em; --ls-caps: 0.07em; --lh-strak: 1.15; --lh-kop: 1.25; --lh-body: 1.6; /* -- Beweging -- */ --transitie-snel: 150ms cubic-bezier(0.2, 0, 0, 1); --transitie: 200ms cubic-bezier(0.2, 0, 0, 1); --transitie-traag: 250ms cubic-bezier(0.2, 0, 0, 1); /* -- Zijbalk ---------------------------------------------------------- De zijbalk was donkergroen: het zwaarste vlak op het scherm, in een kleur die in geen enkel logo voorkomt. Nu licht, met de merkkleur alleen op het actieve item — daar waar hij iets betekent. */ --zij-grond: #FFFFFF; --zij-rand: var(--zand-200); --zij-tekst: var(--zand-800); --zij-tekst-zacht: var(--kleur-tekst-hint); --zij-hover: var(--zand-100); --zij-actief-vlak: var(--merk-zacht); --zij-actief-tekst: var(--merk-diep); /* -- App-shell -- */ --topbar-hoogte: 60px; } /* --------------------------------------------------------------------------- 2. BASIS & TYPOGRAFIE ------------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--lettertype); color: var(--kleur-tekst); background: var(--kleur-pagina); font-size: 16px; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: var(--kleur-primair); text-decoration: none; transition: color var(--transitie-snel); } a:hover, a:focus { color: var(--kleur-accent-donker); text-decoration: underline; text-underline-offset: 2px; } :focus-visible { outline: 3px solid var(--salie-400); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--terra-200); color: var(--terra-900); } h1, h2, h3 { line-height: var(--lh-kop); color: var(--kleur-tekst); font-family: var(--lettertype-kop); } h1 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-kop); line-height: var(--lh-strak); margin: 0 0 1.1rem; } h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; } h3 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.005em; } /* --------------------------------------------------------------------------- 3. LAYOUT + SIDEBAR ------------------------------------------------------------------------- */ .layout { display: flex; min-height: 100vh; background: var(--kleur-pagina); } .sidebar { width: 268px; flex-shrink: 0; background: var(--zij-grond); color: var(--zij-tekst); border-right: 1px solid var(--zij-rand); display: flex; flex-direction: column; padding: 1.5rem 1rem; position: relative; z-index: 16; } .sidebar__logo { margin-bottom: 1.4rem; padding: 0.2rem 0.3rem 1.1rem; border-bottom: 1px solid var(--zij-rand); display: block; } .sidebar__logo img { display: block; } .sidebar__nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; } .sidebar__nav a { display: flex; align-items: center; gap: 0.7rem; color: var(--zij-tekst); padding: 0.62rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.93rem; font-weight: 500; position: relative; transition: background var(--transitie-snel), color var(--transitie-snel), transform var(--transitie-snel); } .sidebar__nav a svg { flex-shrink: 0; opacity: 0.8; transition: opacity var(--transitie-snel); } .sidebar__nav a:hover, .sidebar__nav a:focus { background: var(--zij-hover); color: var(--merk-diep); text-decoration: none; } .sidebar__nav a:hover svg { opacity: 1; } .sidebar__nav a:active { transform: translateX(1px); } /* Actief item: accentbalk links + zachte achtergrondtint. */ .sidebar__nav a.actief { background: var(--zij-actief-vlak); color: var(--zij-actief-tekst); font-weight: 600; } .sidebar__nav a.actief::before { content: ""; position: absolute; left: -1rem; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0; background: var(--merk); } .sidebar__nav a.actief svg { opacity: 1; color: var(--merk); } .sidebar__sectie { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--zij-tekst-zacht); padding: 0.5rem 0.85rem 0.3rem; margin-top: 0.5rem; } .sidebar__nav a .nav-badge { margin-left: auto; background: var(--alert); color: #fff; border-radius: var(--radius-pil); font-size: 0.7rem; font-weight: 700; min-width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.35rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } /* Gebruikerskaart onderin: avatar met gradient-cirkel. */ .sidebar__gebruiker { border-top: 1px solid var(--zij-rand); padding: 0.85rem 0.6rem 0.1rem; margin-top: 1rem; display: flex; align-items: center; gap: 0.65rem; font-size: 0.88rem; border-radius: var(--radius); } .sidebar__avatar { width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--gradient-avatar); color: var(--avatar-tekst); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; letter-spacing: 0.02em; } .sidebar__gebruiker-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; } .sidebar__gebruiker-naam { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar__gebruiker-rol { color: var(--zij-tekst-zacht); font-size: 0.76rem; } .sidebar__gebruiker a { color: var(--zij-tekst-zacht); flex-shrink: 0; padding: 0.4rem; border-radius: var(--radius-sm); display: inline-flex; transition: background var(--transitie-snel), color var(--transitie-snel); } .sidebar__gebruiker a:hover { color: var(--merk-diep); background: var(--zij-hover); } /* Inklapbare sidebar-secties (accordeon per sectie, scrollbaar). */ .sidebar__nav { overflow-y: auto; min-height: 0; padding-right: 0.15rem; scrollbar-width: thin; scrollbar-color: var(--zand-300) transparent; } .sidebar__nav::-webkit-scrollbar { width: 7px; } .sidebar__nav::-webkit-scrollbar-thumb { background: var(--zand-300); border-radius: 4px; } .sidebar__groep { margin-top: 0.35rem; } .sidebar__sectie-knop { display: flex; align-items: center; justify-content: space-between; width: 100%; background: transparent; border: none; cursor: pointer; color: var(--zij-tekst-zacht); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); padding: 0.5rem 0.85rem 0.35rem; border-radius: var(--radius-sm); transition: background var(--transitie-snel), color var(--transitie-snel); } .sidebar__sectie-knop:hover, .sidebar__sectie-knop:focus-visible { background: var(--zij-hover); color: var(--merk-diep); outline: none; } .sidebar__chevron { font-size: 0.9rem; line-height: 1; transition: transform 0.22s ease; } .sidebar__groep--dicht .sidebar__chevron { transform: rotate(-90deg); } .sidebar__items { display: flex; flex-direction: column; gap: 0.2rem; max-height: 640px; overflow: hidden; transition: max-height 0.28s ease, opacity 0.2s ease; opacity: 1; } .sidebar__groep--dicht .sidebar__items { max-height: 0; opacity: 0; pointer-events: none; } .sidebar__label { flex: 1; } /* Hoofdkolom naast de sidebar: topbar + inhoud, met ambient-gradient bovenaan. */ .layout__main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; } .layout__main::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 260px; background: linear-gradient(180deg, color-mix(in srgb, var(--merk) 7%, transparent), transparent 65%); pointer-events: none; } .layout__inhoud { flex: 1; padding: 1.75rem 2.5rem 3rem; max-width: 1320px; min-width: 0; width: 100%; position: relative; animation: pagina-entree 240ms cubic-bezier(0.2, 0, 0, 1) both; } /* Eindigt op transform:none zodat de inhoud géén containing block wordt voor position:fixed-elementen (modals, sessietimer). */ @keyframes pagina-entree { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } /* Consistente pagina-koppen: kicker-streep in gradient onder elke titel. */ .layout__inhoud h1:not(.hero__begroeting) { position: relative; padding-bottom: 0.55rem; } .layout__inhoud h1:not(.hero__begroeting)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 3px; background: var(--gradient-accentrand); } /* --------------------------------------------------------------------------- 3b. TOPBAR (app-shell) ------------------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 14; display: flex; align-items: center; gap: 0.85rem; height: var(--topbar-hoogte, 60px); padding: 0 2.5rem; background: rgba(250, 248, 245, 0.88); border-bottom: 1px solid var(--zand-200); } @supports (backdrop-filter: blur(12px)) { .topbar { background: rgba(250, 248, 245, 0.72); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); } } .topbar__hamburger, .topbar__inklap { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--kleur-tekst-zacht); cursor: pointer; flex-shrink: 0; transition: background var(--transitie-snel), color var(--transitie-snel), transform var(--transitie-snel); } .topbar__hamburger:hover, .topbar__inklap:hover { background: var(--zand-100); color: var(--salie-700); } .topbar__hamburger:active, .topbar__inklap:active { transform: scale(0.92); } .topbar__hamburger { display: none; /* alleen mobiel */ } .topbar__kop { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; margin-right: auto; } .topbar__sectie { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--kleur-tekst-hint); } .topbar__titel { font-family: var(--lettertype-kop); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; color: var(--kleur-tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Zoekknop die de command palette opent. */ .topbar__zoek { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 220px; max-width: 320px; flex: 0 1 auto; padding: 0.45rem 0.7rem; border: 1px solid var(--zand-300); border-radius: var(--radius-sm); background: var(--vlak); color: var(--kleur-tekst-hint); font-family: inherit; font-size: 0.88rem; cursor: pointer; text-align: left; transition: border-color var(--transitie-snel), box-shadow var(--transitie-snel), color var(--transitie-snel); } .topbar__zoek:hover { border-color: var(--salie-400); color: var(--kleur-tekst-zacht); box-shadow: var(--schaduw-sm); } .topbar__zoek svg { flex-shrink: 0; } .topbar__zoek-tekst { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar__kbd, .palet__kbd { font-family: inherit; font-size: 0.68rem; font-weight: 700; color: var(--kleur-tekst-hint); background: var(--zand-100); border: 1px solid var(--zand-300); border-bottom-width: 2px; border-radius: 5px; padding: 0.05rem 0.35rem; white-space: nowrap; } .topbar__bel { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); color: var(--kleur-tekst-zacht); flex-shrink: 0; transition: background var(--transitie-snel), color var(--transitie-snel); } .topbar__bel .thema-icoon--maan, .topbar__bel .thema-icoon--zon { display: inline-flex; } .thema-icoon--zon { display: none !important; } [data-thema="donker"] .thema-icoon--zon { display: inline-flex !important; } [data-thema="donker"] .thema-icoon--maan { display: none !important; } .topbar__bel:hover { background: var(--zand-100); color: var(--salie-700); text-decoration: none; } .topbar__badge { position: absolute; top: 0.15rem; right: 0.1rem; background: var(--terra-500); color: #fff; border-radius: var(--radius-pil); font-size: 0.62rem; font-weight: 700; min-width: 1.05rem; height: 1.05rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.25rem; border: 2px solid var(--kleur-pagina); } .topbar__avatar { width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--gradient-avatar); color: var(--avatar-tekst); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; letter-spacing: 0.02em; box-shadow: var(--schaduw-sm); } /* --------------------------------------------------------------------------- 3c. COMMAND PALETTE (Ctrl+K) ------------------------------------------------------------------------- */ .palet-overlay { position: fixed; inset: 0; background: rgba(28, 24, 20, 0.4); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; z-index: 60; animation: tabs-fade-in 120ms ease; } @supports (backdrop-filter: blur(5px)) { .palet-overlay { background: rgba(28, 24, 20, 0.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } } .palet-overlay[hidden] { display: none; } .palet { width: 100%; max-width: 560px; background: var(--vlak); border-radius: var(--radius-lg); box-shadow: var(--schaduw-lg); overflow: hidden; animation: modal-entree 200ms cubic-bezier(0.2, 0, 0, 1) both; } .palet__zoekrij { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--zand-200); color: var(--kleur-tekst-hint); } .palet__invoer { flex: 1; border: none; background: transparent; font-size: 1.05rem; padding: 0; min-height: 0; color: var(--kleur-tekst); } .palet__invoer:focus { outline: none; box-shadow: none; } .palet__lijst { list-style: none; margin: 0; padding: 0.4rem; max-height: 46vh; overflow-y: auto; } .palet__item { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--kleur-tekst); font-size: 0.94rem; font-weight: 500; } .palet__item svg { flex-shrink: 0; color: var(--kleur-tekst-zacht); } .palet__item-sectie { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--kleur-tekst-hint); } .palet__item--actief { background: var(--salie-50); color: var(--salie-800); } .palet__item--actief svg { color: var(--salie-700); } .palet__leeg { padding: 1.25rem; text-align: center; color: var(--kleur-tekst-hint); font-size: 0.9rem; } .palet__voet { padding: 0.55rem 1.1rem; border-top: 1px solid var(--zand-200); font-size: var(--fs-xs); color: var(--kleur-tekst-hint); display: flex; gap: 1rem; } /* --------------------------------------------------------------------------- 3d. SIDEBAR MINI-RAIL (ingeklapt op desktop) ------------------------------------------------------------------------- */ @media (min-width: 769px) { body.zijbalk-smal .sidebar { width: 76px; padding: 1.25rem 0.7rem; } body.zijbalk-smal .sidebar__logo { padding: 0.45rem; align-self: center; } body.zijbalk-smal .sidebar__logo img { width: 40px; height: auto; } body.zijbalk-smal .sidebar__sectie-knop { display: none; } body.zijbalk-smal .sidebar__items { max-height: none !important; opacity: 1 !important; pointer-events: auto !important; } body.zijbalk-smal .sidebar__label, body.zijbalk-smal .sidebar__gebruiker-info, body.zijbalk-smal .sidebar__gebruiker > a { display: none; } body.zijbalk-smal .sidebar__nav a { justify-content: center; padding: 0.62rem 0; } body.zijbalk-smal .sidebar__nav a.actief::before { left: -0.7rem; } body.zijbalk-smal .sidebar__nav a .nav-badge { position: absolute; top: 0.15rem; right: 0.3rem; margin: 0; min-width: 0.95rem; height: 0.95rem; font-size: 0.58rem; padding: 0 0.2rem; } body.zijbalk-smal .sidebar__gebruiker { justify-content: center; padding-left: 0; padding-right: 0; } body.zijbalk-smal .topbar__inklap svg { transform: rotate(180deg); } } /* --------------------------------------------------------------------------- 3e. SKELETON / SHIMMER (voor asynchrone of ladende blokken) ------------------------------------------------------------------------- */ .skelet { position: relative; color: transparent !important; background: var(--zand-100); border-radius: var(--radius-sm); overflow: hidden; pointer-events: none; user-select: none; } .skelet::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent); animation: skelet-glans 1.4s ease infinite; } @keyframes skelet-glans { to { transform: translateX(100%); } } .skelet--regel { display: block; height: 0.95rem; margin: 0.3rem 0; } .skelet--blok { display: block; height: 6rem; } .skelet--cirkel { border-radius: 50%; width: 2.5rem; height: 2.5rem; } /* MPA-paginatransities (progressive enhancement; Chrome 126+). */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation-duration: 140ms; } ::view-transition-new(root) { animation-duration: 200ms; } /* --------------------------------------------------------------------------- 4. HERO & KPI-KAARTEN (dashboard per rol) ------------------------------------------------------------------------- */ /* Hero: gradient in de merkkleur van de organisatie, met subtiel lichtspel. */ .hero { position: relative; background: var(--gradient-hero); color: #fff; border-radius: var(--radius-xl); padding: var(--sp-8) var(--sp-8) var(--sp-16); margin-bottom: calc(-1 * var(--sp-12)); overflow: hidden; box-shadow: var(--schaduw-lg); } .hero::before { content: ""; position: absolute; top: -55%; right: -12%; width: 55%; height: 160%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), transparent 70%); pointer-events: none; } .hero::after { content: ""; position: absolute; bottom: -70%; left: -8%; width: 45%; height: 150%; background: radial-gradient(closest-side, rgba(194, 104, 61, 0.16), transparent 70%); pointer-events: none; } .hero__inhoud { position: relative; z-index: 1; } .hero__begroeting { font-family: var(--lettertype-kop); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--ls-kop); line-height: var(--lh-strak); margin: 0 0 0.35rem; color: #fff; } .hero__datum { color: rgba(255, 255, 255, 0.78); font-size: var(--fs-sm); margin: 0; letter-spacing: 0.01em; } .hero__datum::first-letter { text-transform: uppercase; } .hero__acties { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-5); } /* Zachtere hero voor het cliëntportaal: licht, veel witruimte, grote letters. */ .hero--zacht { background: var(--gradient-hero-zacht); color: var(--kleur-tekst); box-shadow: var(--schaduw-sm); border: 1px solid var(--zand-200); padding: var(--sp-8); margin-bottom: var(--sp-6); } .hero--zacht::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--merk) 8%, transparent), transparent 70%); } .hero--zacht::after { background: radial-gradient(closest-side, rgba(194, 104, 61, 0.08), transparent 70%); } .hero--zacht .hero__begroeting { color: var(--salie-800); } .hero--zacht .hero__datum { color: var(--kleur-tekst-zacht); font-size: var(--fs-basis); } /* Compacte hero-variant (zorgverlener mobiel): minder verticale ruimte. */ .hero--compact { padding: var(--sp-6) var(--sp-6) var(--sp-12); } /* KPI-rij die half over de hero-onderrand valt. */ .kpi-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--sp-4); padding: 0 var(--sp-5); margin-bottom: var(--sp-8); } /* Fancy KPI-kaart: glasachtig wit, dunne gradient-rand, hover-lift. */ .kpi-kaart { position: relative; background: rgba(255, 255, 255, 0.86); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-5) var(--sp-4); box-shadow: var(--schaduw); display: flex; flex-direction: column; gap: 0.2rem; overflow: hidden; transition: transform var(--transitie), box-shadow var(--transitie); } @supports (backdrop-filter: blur(10px)) { .kpi-kaart { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); } } /* Dunne gradient-rand via een geplakte laag (werkt in elke browser). */ .kpi-kaart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(150deg, rgba(110, 154, 137, 0.55), rgba(230, 223, 213, 0.35) 45%, rgba(208, 133, 92, 0.45)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .kpi-kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-lg); } .kpi-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .kpi-kaart__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--kleur-tekst-zacht); margin: 0; } /* Icoon in een zachte gekleurde chip. */ .kpi-kaart__chip { width: 2.35rem; height: 2.35rem; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--salie-100); color: var(--salie-700); } .kpi-kaart__chip--terra { background: var(--terra-100); color: var(--terra-600); } .kpi-kaart__chip--alert { background: var(--alert-licht); color: var(--alert); } .kpi-kaart__chip--waarschuwing { background: var(--waarschuwing-licht); color: var(--waarschuwing); } .kpi-kaart__chip--info { background: var(--info-licht); color: var(--info); } .kpi-kaart__cijfer { font-family: var(--lettertype-kop); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; color: var(--salie-800); margin: 0.35rem 0 0.1rem; font-variant-numeric: tabular-nums; } .kpi-kaart__cijfer--alert { color: var(--alert); } .kpi-kaart__cijfer small { font-size: 0.45em; font-weight: 600; color: var(--kleur-tekst-zacht); letter-spacing: 0; } /* Trend-/signaalchip (▲/▼ of tekst) onder het cijfer. */ .kpi-kaart__trend { display: inline-flex; align-items: center; gap: 0.3rem; align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; padding: 0.15rem 0.55rem; border-radius: var(--radius-pil); background: var(--zand-100); color: var(--kleur-tekst-zacht); } .kpi-kaart__trend--positief { background: var(--succes-licht); color: var(--succes-donker); } .kpi-kaart__trend--negatief { background: var(--alert-licht); color: var(--alert-donker); } .kpi-kaart__trend--waarschuwing { background: var(--waarschuwing-licht); color: var(--waarschuwing-donker); } .kpi-kaart__voet { font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); margin: 0.35rem 0 0; } .kpi-kaart__voet a { font-weight: 600; } /* Mini-sparkline (inline SVG) onder in de kaart. */ .kpi-kaart__sparkline { margin: 0.4rem calc(-1 * var(--sp-5)) calc(-1 * var(--sp-4)); display: block; width: calc(100% + 2 * var(--sp-5)); height: 44px; opacity: 0.9; } .sparkline-lijn { fill: none; stroke: var(--salie-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sparkline-vulling { fill: url(#sparkline-verloop); stroke: none; } .sparkline-lijn--terra { stroke: var(--terra-500); } /* Grote actiekaarten (zorgverlener mobiel): touch targets ≥48px. */ .actie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-6); } .actie-kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; min-height: 96px; padding: var(--sp-4); background: var(--vlak); border: 1px solid var(--zand-200); border-radius: var(--radius-lg); box-shadow: var(--schaduw-sm); color: var(--kleur-tekst); font-weight: 600; font-size: 0.95rem; line-height: 1.3; transition: transform var(--transitie), box-shadow var(--transitie), border-color var(--transitie); } .actie-kaart:hover, .actie-kaart:focus { text-decoration: none; color: var(--salie-800); border-color: var(--salie-300); transform: translateY(-2px); box-shadow: var(--schaduw); } .actie-kaart:active { transform: translateY(0) scale(0.985); } .actie-kaart__chip { width: 2.6rem; height: 2.6rem; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--salie-100); color: var(--salie-700); } .actie-kaart--terra .actie-kaart__chip { background: var(--terra-100); color: var(--terra-600); } /* Eerstvolgende afspraak als grote kaart (zorgverlener-hero). */ .volgende-afspraak { position: relative; z-index: 2; background: var(--vlak); border-radius: var(--radius-lg); box-shadow: var(--schaduw); padding: var(--sp-5); margin: 0 var(--sp-5) var(--sp-5); border-left: 4px solid var(--terra-500); } .volgende-afspraak__tijd { font-family: var(--lettertype-kop); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; color: var(--salie-800); } .volgende-afspraak__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--terra-600); margin-bottom: 0.15rem; } /* --------------------------------------------------------------------------- 5. KAARTEN & GRIDS ------------------------------------------------------------------------- */ .kaart { background: var(--vlak); border: 1px solid var(--zand-200); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--schaduw-sm); transition: box-shadow var(--transitie), transform var(--transitie); } .kaart h2 { margin-top: 0; font-size: var(--fs-md); } /* 230px gaf op een breed scherm vijf kolommen naast elkaar; labels als "Wettelijke vertegenwoordiging" braken dan over drie regels. Met 300px komen er twee tot drie kolommen en blijft een regel een regel. */ .kaart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; margin-bottom: var(--sp-6); } .kaart-grid .kaart:hover { box-shadow: var(--schaduw); transform: translateY(-2px); } .kaart--gestapeld { margin-bottom: 1rem; } .kaart__icoon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--terra-100); color: var(--terra-600); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; } .alert-rood { color: var(--alert); font-weight: 600; } /* --------------------------------------------------------------------------- 6. KNOPPEN ------------------------------------------------------------------------- */ .knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border: none; border-radius: var(--radius-sm); padding: 0.65rem 1.25rem; min-height: 44px; font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: center; transition: transform var(--transitie-snel), box-shadow var(--transitie-snel), background var(--transitie-snel), border-color var(--transitie-snel), color var(--transitie-snel); } .knop:hover { text-decoration: none; } /* Tastbare press-state. */ .knop:active { transform: translateY(1px) scale(0.98); } .knop--primair { background: var(--kleur-primair); color: #fff; box-shadow: var(--schaduw-sm); } .knop--primair:hover { background: var(--kleur-primair-donker); box-shadow: var(--schaduw); color: #fff; } .knop--accent { background: var(--kleur-accent); color: #fff; box-shadow: var(--schaduw-sm); } .knop--accent:hover { background: var(--kleur-accent-donker); box-shadow: var(--schaduw); color: #fff; } .knop--alert { background: var(--alert); color: #fff; } .knop--alert:hover { background: var(--alert-donker); color: #fff; } .knop--secundair { background: var(--vlak); color: var(--kleur-tekst); border: 1px solid var(--kleur-rand); box-shadow: var(--schaduw-sm); } .knop--secundair:hover { border-color: var(--salie-400); color: var(--salie-700); background: var(--salie-50); } .knop-rij { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.5rem; } /* --------------------------------------------------------------------------- 7. FORMULIEREN ------------------------------------------------------------------------- */ label { font-weight: 600; font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); letter-spacing: 0.01em; display: inline-block; margin-bottom: 0.2rem; } input, select, textarea { font-family: inherit; font-size: 1rem; padding: 0.62rem 0.8rem; border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); background: var(--vlak); color: var(--kleur-tekst); width: 100%; min-height: 44px; transition: border-color var(--transitie-snel), box-shadow var(--transitie-snel); } textarea { min-height: 0; } input::placeholder, textarea::placeholder { color: var(--kleur-tekst-hint); } input:hover, select:hover, textarea:hover { border-color: var(--zand-400); } input:focus, select:focus, textarea:focus { outline: none; /* --merk is de logokleur en is voor een focusrand te licht: het turquoise van ZGM haalt op wit 2,5:1, waar WCAG voor een focusindicator 3:1 vraagt. --merk-tekst zit op minimaal 5,8:1. */ border-color: var(--merk-tekst); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 30%, transparent); } input[type="checkbox"], input[type="radio"] { min-height: 0; width: 1.15rem; height: 1.15rem; accent-color: var(--salie-600); } .formulier-kaart { background: var(--vlak); border: 1px solid var(--zand-200); border-radius: var(--radius-lg); box-shadow: var(--schaduw-sm); padding: 1.75rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; max-width: 900px; } .formulier-rij { display: flex; gap: 1rem; flex-wrap: wrap; } .formulier-rij > div, .formulier-rij > input, .formulier-rij > select { flex: 1; min-width: 160px; } .formulier-rij--meerkoloms { flex-wrap: wrap; } .formulier-rij--meerkoloms > div { flex: 0 0 150px; } .herhaalbare-rij { border: 1px solid var(--kleur-rand); border-radius: var(--radius); padding: 0.75rem; background: var(--vlak); } .checkbox-label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; margin-right: 1rem; } .checkbox-label input { width: auto; } /* Gegroepeerde fieldsets met zachte kaartachtergrond. */ fieldset { border: 1px solid var(--zand-200); border-radius: var(--radius); padding: 0.85rem 1rem 1rem; background: var(--zand-50); margin: 0 0 0.5rem; } legend { font-weight: 600; padding: 0 0.4rem; font-size: var(--fs-sm); color: var(--kleur-tekst-zacht); } .veld-fout { color: var(--alert); font-size: 0.82rem; margin: 0.2rem 0 0; font-weight: 600; } /* De foutmelding stond onder het veld, maar het veld zelf zag er ongemoeid uit. Op een lang formulier zoek je dan waar het misging. Nu tekent het veld zich af — en niet alleen op kleur, want dat is voor een deel van de gebruikers geen signaal: de rand wordt ook dikker. */ input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], input:has(+ .veld-fout), select:has(+ .veld-fout), textarea:has(+ .veld-fout) { border-color: var(--alert); border-width: 2px; background: var(--alert-licht); } input:has(+ .veld-fout):focus, select:has(+ .veld-fout):focus, textarea:has(+ .veld-fout):focus { border-color: var(--alert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert) 30%, transparent); } .inline-formulier { display: inline; } .handtekening-canvas { border: 1px solid var(--kleur-rand); border-radius: var(--radius); background: var(--vlak); touch-action: none; max-width: 100%; height: auto; } .veld-groep { border: 1px solid var(--zand-200); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0.5rem 0; background: var(--zand-50); } .veld-groep legend { padding: 0 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--kleur-tekst-zacht); } .checkbox-inline { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 1.1rem; font-weight: 400; } .checkbox-inline input { width: auto; margin: 0; } /* Kleefbare submit-balk: op mobiel plakt de knoppenrij onderaan het scherm. */ .kleef-balk { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.5rem; } @media (max-width: 640px) { .kleef-balk { position: sticky; bottom: 0; z-index: 12; margin: 0.5rem calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.92); border-top: 1px solid var(--zand-200); box-shadow: 0 -6px 18px rgba(58, 46, 34, 0.08); } @supports (backdrop-filter: blur(8px)) { .kleef-balk { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } .kleef-balk .knop { flex: 1 1 auto; min-height: 48px; } } /* --------------------------------------------------------------------------- 8. TABELLEN ------------------------------------------------------------------------- */ table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--vlak); border: 1px solid var(--zand-200); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schaduw-sm); margin-bottom: 1.25rem; font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--zand-200); font-size: 0.92rem; } thead th { background: var(--zand-100); color: var(--kleur-tekst-zacht); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; position: sticky; /* LET OP: tabellen staan (via initTabelScroll) in een .tabel-scroll met overflow-x:auto. Dat maakt die wrapper een scroll-container, waardoor een sticky kop zich richt op de wrapper en niet op het venster. Een offset zoals var(--topbar-hoogte) duwt de kop dan omlaag ÓVER de eerste rij heen — die rij wordt daardoor onzichtbaar en onklikbaar. Daarom top:0. */ top: 0; z-index: 2; } tbody tr { transition: background var(--transitie-snel); } tbody tr:hover td { background: var(--salie-50); } tbody tr:last-child td { border-bottom: none; } tfoot th, tfoot td { background: var(--zand-100); font-weight: 700; border-bottom: none; text-transform: none; font-size: 0.92rem; color: var(--kleur-tekst); } /* Numerieke kolommen netjes rechts uitlijnen. */ th.num, td.num { text-align: right; } /* Tabellen binnen een kaart blijven kaal (geen dubbele omlijsting). */ .kaart table { border: none; box-shadow: none; border-radius: 0; background: transparent; margin-bottom: 0; } .kaart thead th { background: transparent; position: static; } .kaart th, .kaart td { padding: 0.6rem 0.5rem; } /* Horizontaal scrollen op smalle schermen i.p.v. overlopen. */ .tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } .tabel-scroll > table { margin-bottom: 0; } .mini-tabel { width: 100%; border-collapse: collapse; font-size: 0.9rem; border: none; box-shadow: none; } .mini-tabel td { padding: 0.2rem 0; border: none; } .mini-tabel td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } /* --------------------------------------------------------------------------- 9. STATUS-PILLEN & BADGES ------------------------------------------------------------------------- */ .status-pil { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: var(--radius-pil); font-size: 0.78rem; font-weight: 600; line-height: 1.4; background: var(--zand-100); color: var(--kleur-tekst-zacht); border: 1px solid var(--kleur-rand); white-space: nowrap; } /* Dot-indicator vóór de tekst. */ .status-pil::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.75; } .status-pil--succes { background: var(--succes-licht); color: var(--succes-donker); border-color: var(--succes-rand); } .status-pil--alert { background: var(--alert-licht); color: var(--alert-donker); border-color: var(--alert-rand); } .status-pil--waarschuwing { background: var(--waarschuwing-licht); color: var(--waarschuwing-donker); border-color: var(--waarschuwing-rand); } .status-pil--open { background: var(--zand-100); color: var(--kleur-tekst-zacht); border-color: var(--kleur-rand); } .status-pil--info { background: var(--info-licht); color: var(--info); border-color: var(--info-rand); } .status-pil--afgekeurd { background: var(--afkeur-licht); color: var(--afkeur); border-color: var(--afkeur-rand); } .aftekenen-rij { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .aftekenen-rij select, .aftekenen-rij input { width: auto; } /* KPI-cijfer (legacy-klasse, gebruikt op oudere kaarten). */ .kpi-getal { font-family: var(--lettertype-kop); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--salie-800); margin: 0.35rem 0 0.5rem; font-variant-numeric: tabular-nums; } .zorgplan-badge { background: var(--alert); color: #fff; border-radius: 50%; min-width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; padding: 0 0.3rem; } /* --------------------------------------------------------------------------- 10. MELDINGEN (toast-stijl flash) ------------------------------------------------------------------------- */ .melding { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.8rem 1rem; border-radius: var(--radius); font-size: 0.92rem; font-weight: 500; border: 1px solid transparent; border-left-width: 4px; box-shadow: var(--schaduw-sm); margin-bottom: 1rem; animation: melding-entree var(--transitie-traag) both; } /* Kale .melding (zonder modifier) krijgt een neutrale info-stijl. */ .melding { background: var(--info-licht); color: var(--info); border-color: var(--info-rand); border-left-color: var(--info); } /* Icoon via CSS (inline SVG data-URI is CSP-veilig binnen style-src). */ .melding::before { content: ""; width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-top: 0.12rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 7h2V7h-2v2zm0 8h2v-6h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 7h2V7h-2v2zm0 8h2v-6h-2v6z'/%3E%3C/svg%3E") center / contain no-repeat; } .melding--fout { background: var(--alert-licht); color: var(--alert-donker); border-color: var(--alert-rand); border-left-color: var(--alert); } .melding--fout::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E"); } .melding--succes { background: var(--succes-licht); color: var(--succes-donker); border-color: var(--succes-rand); border-left-color: var(--succes); } /* Niet fout, wel iets om recht te zetten: een instelling die nog niet klopt. */ .melding--waarschuwing { background: var(--waarschuwing-licht); color: var(--waarschuwing-donker); border-color: var(--waarschuwing-rand); border-left-color: var(--waarschuwing); } .melding--succes::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E"); } @keyframes melding-entree { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- 11. MODALS ------------------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(28, 24, 20, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; z-index: 50; overflow-y: auto; animation: tabs-fade-in 140ms ease; } @supports (backdrop-filter: blur(4px)) { .modal-overlay { background: rgba(28, 24, 20, 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } } .modal-overlay[hidden] { display: none; } .modal { background: var(--vlak); border-radius: var(--radius-lg); box-shadow: var(--schaduw-lg); width: 100%; max-width: 720px; padding: 1.75rem; position: relative; animation: modal-entree var(--transitie-traag) both; } @keyframes modal-entree { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } } .modal__titel { margin: 0 2rem 1.25rem 0; } .modal__sluit { position: absolute; top: 1rem; right: 1rem; width: 2.2rem; height: 2.2rem; border: none; border-radius: 50%; background: var(--zand-100); color: var(--kleur-tekst-zacht); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background var(--transitie-snel), color var(--transitie-snel), transform var(--transitie-snel); } .modal__sluit:hover { background: var(--alert-licht); color: var(--alert); } .modal__sluit:active { transform: scale(0.92); } .modal .formulier-kaart { border: none; box-shadow: none; padding: 0; margin: 0; max-width: none; } /* --------------------------------------------------------------------------- 12. TABS & ACCORDEON ------------------------------------------------------------------------- */ .tabs { margin-bottom: 1.5rem; } .tabs__lijst { display: flex; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--kleur-rand); margin-bottom: 1.5rem; } .tabs__knop { appearance: none; background: none; border: none; font-family: inherit; font-size: 0.92rem; font-weight: 600; color: var(--kleur-tekst-zacht); padding: 0.75rem 1.1rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; position: relative; top: 1px; border-bottom: 2px solid transparent; transition: color var(--transitie-snel), background var(--transitie-snel); } .tabs__knop:hover { color: var(--salie-700); background: var(--salie-50); } .tabs__knop[aria-selected="true"] { color: var(--salie-700); border-bottom-color: var(--terra-500); } .tabs__paneel { animation: tabs-fade-in 140ms ease; } .tabs__paneel[hidden] { display: none; } @keyframes tabs-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } .accordeon { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; } .accordeon-item { border: 1px solid var(--zand-200); border-radius: var(--radius); background: var(--vlak); overflow: hidden; box-shadow: var(--schaduw-sm); } .accordeon-kop { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--zand-100); border: none; font-family: inherit; text-align: left; padding: 1rem 1.25rem; cursor: pointer; font-size: 1rem; font-weight: 600; color: var(--kleur-tekst); transition: background var(--transitie-snel); } .accordeon-kop:hover { background: var(--zand-200); } .accordeon-kop__chevron { flex-shrink: 0; transition: transform var(--transitie); color: var(--kleur-tekst-zacht); } .accordeon-kop[aria-expanded="true"] .accordeon-kop__chevron { transform: rotate(180deg); } .accordeon-paneel { padding: 1.25rem; border-top: 1px solid var(--zand-200); animation: tabs-fade-in 160ms ease; } .accordeon-paneel[hidden] { display: none; } /* --------------------------------------------------------------------------- 13. AUTH / LOGIN — het visitekaartje ------------------------------------------------------------------------- */ .auth-pagina { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--kleur-pagina); padding: 1rem; } .auth-kaart { background: var(--vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-lg); box-shadow: var(--schaduw-lg); padding: 2.25rem; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 0.85rem; } /* Split-layout: merkpaneel (gradient + subtiel bladpatroon) + glasformulier. */ .auth-layout { min-height: 100vh; display: flex; background: var(--gradient-hero); } .auth-layout__merk { flex: 1.1; color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 4rem; position: relative; overflow: hidden; } /* Subtiel organisch patroon (inline SVG data-URI, CSP-veilig). */ .auth-layout__merk::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.5'%3E%3Cpath d='M30 90c0-25 12-42 30-52M60 98c0-18 8-32 22-42'/%3E%3Ccircle cx='92' cy='30' r='9'/%3E%3Ccircle cx='22' cy='36' r='5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px; pointer-events: none; } .auth-layout__merk::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; height: 140%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.08), transparent 72%); border-radius: 50%; pointer-events: none; } .auth-layout__merk-logo { background: #fff; border-radius: var(--radius); padding: 0.6rem 0.85rem; display: inline-block; margin-bottom: 2.5rem; align-self: flex-start; position: relative; z-index: 1; box-shadow: var(--schaduw); } .auth-layout__merk h2 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--ls-kop); line-height: 1.2; max-width: 24rem; margin: 0 0 1rem; position: relative; z-index: 1; color: #fff; } .auth-layout__merk p { color: rgba(255, 255, 255, 0.82); max-width: 24rem; font-size: 1rem; line-height: 1.65; position: relative; z-index: 1; } .auth-layout__merk-punten { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; position: relative; z-index: 1; font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); } .auth-layout__merk-punten li { display: flex; align-items: center; gap: 0.6rem; } .auth-layout__merk-punten li::before { content: ""; width: 1.15rem; height: 1.15rem; flex-shrink: 0; border-radius: 50%; background: var(--terra-300); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6z'/%3E%3C/svg%3E") center / contain no-repeat; } .auth-layout__formulier { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; position: relative; } /* Glaskaart op de gradient. */ .auth-layout__formulier .auth-kaart { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.6); } @supports (backdrop-filter: blur(14px)) { .auth-layout__formulier .auth-kaart { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } } @media (max-width: 860px) { .auth-layout__merk { display: none; } } .auth-kaart--breed { max-width: 640px; } .auth-kaart__logo { align-self: center; margin-bottom: 0.5rem; } .auth-kaart__titel { margin: 0; font-family: var(--lettertype-kop); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; color: var(--salie-700); text-align: center; } .auth-kaart__subtitel { margin: 0 0 0.5rem; color: var(--kleur-tekst-zacht); font-size: 0.95rem; text-align: center; } .auth-kaart__link { text-align: center; font-size: 0.9rem; } .auth-kaart__hint { font-size: 0.8rem; color: var(--kleur-tekst-zacht); margin: 0; } /* Korte toelichting onder een invoerveld: wat er met de invoer gebeurt, of waarom het veld er is. Bewust dichter op het veld dan een losse alinea. */ .veld-hint { font-size: 0.8rem; color: var(--kleur-tekst-zacht); margin: -0.4rem 0 0.9rem; } .auth-kaart__avg { font-size: 0.78rem; color: var(--kleur-tekst-zacht); margin-top: 0.5rem; } .avg-tekst h2 { font-size: 1.05rem; color: var(--salie-700); } .avg-tekst p { color: var(--kleur-tekst-zacht); font-size: 0.92rem; } /* --------------------------------------------------------------------------- 14. AGENDA & PLANNING ------------------------------------------------------------------------- */ .agenda-balk { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; } .agenda-balk__titel { font-family: var(--lettertype-kop); font-size: 1.15rem; font-weight: 700; margin: 0 0.5rem; min-width: 12rem; } .agenda-wrap { border: 1px solid var(--zand-200); border-radius: var(--radius-lg); box-shadow: var(--schaduw-sm); background: var(--vlak); overflow: hidden; margin-bottom: 1.5rem; } .agenda__head { display: flex; border-bottom: 1px solid var(--kleur-rand); background: var(--zand-100); } .agenda__hoek { width: 58px; flex: none; border-right: 1px solid var(--zand-200); } .agenda__heads { flex: 1; display: flex; } .agenda__body { display: flex; } .agenda__cols { flex: 1; display: flex; } .agenda__daghead { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--zand-200); background: var(--zand-100); padding: 0.55rem 0.4rem; text-align: center; line-height: 1.2; } .agenda__daghead-naam { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kleur-tekst-zacht); } .agenda__daghead-datum { font-family: var(--lettertype-kop); font-size: 1.3rem; font-weight: 700; color: var(--kleur-tekst); } .agenda__daghead--vandaag { background: var(--terra-100); } .agenda__daghead--vandaag .agenda__daghead-datum { color: var(--terra-600); } .agenda__gutter { width: 58px; flex: none; position: relative; border-right: 1px solid var(--zand-200); } .agenda__uur { position: absolute; right: 6px; transform: translateY(-50%); font-size: 0.7rem; color: var(--kleur-tekst-hint); white-space: nowrap; } .agenda__dag { flex: 1 1 0; min-width: 0; height: 100%; position: relative; border-left: 1px solid var(--zand-200); background-image: repeating-linear-gradient( to bottom, var(--zand-200) 0, var(--zand-200) 1px, transparent 1px, transparent 52px ); } .agenda__dag--vandaag { background-color: rgba(194, 104, 61, 0.04); } .agenda__afspraak { position: absolute; left: 2%; width: 96%; border-radius: 7px; border-left: 3px solid currentColor; padding: 3px 6px; overflow: hidden; font-size: 0.74rem; line-height: 1.25; text-decoration: none; box-shadow: var(--schaduw-sm); transition: transform var(--transitie-snel), box-shadow var(--transitie-snel); } .agenda__afspraak:hover { text-decoration: none; box-shadow: var(--schaduw); transform: translateY(-1px); z-index: 5; } .agenda__afspraak-tijd { display: block; font-size: 0.68rem; opacity: 0.85; } .agenda__afspraak-client { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda__afspraak-mw { display: block; font-size: 0.68rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .agenda__afspraak-x { position: absolute; top: 2px; right: 3px; background: rgba(255, 255, 255, 0.6); border: none; border-radius: 4px; width: 16px; height: 16px; line-height: 1; font-size: 0.8rem; cursor: pointer; color: var(--alert); padding: 0; display: none; } .agenda__afspraak:hover .agenda__afspraak-x { display: block; } .agenda__nu { position: absolute; left: 0; right: 0; height: 2px; background: var(--alert); z-index: 4; } .agenda__nu::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--alert); } .agenda-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.5rem; font-size: 0.82rem; } .agenda-legenda__item { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--kleur-tekst-zacht); } .agenda-legenda__stip { width: 0.8rem; height: 0.8rem; border-radius: 3px; flex-shrink: 0; } .weekplanner { overflow-x: auto; } .weekplanner table { min-width: 800px; } .weekplanner td.dag-cel { vertical-align: top; min-width: 110px; } .afspraak-blokje { background: var(--kleur-primair); color: #fff; border-radius: 4px; padding: 0.3rem 0.5rem; margin-bottom: 0.3rem; font-size: 0.8rem; } .weekkiezer { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; } /* --------------------------------------------------------------------------- 15. STEPPER / ZORGPLAN ------------------------------------------------------------------------- */ .stepper { display: flex; align-items: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 1.5rem 0 2.25rem; padding-bottom: 0.25rem; } .stepper__stap { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-decoration: none; flex-shrink: 0; min-width: 108px; padding: 0 0.25rem; } .stepper__stap:hover, .stepper__stap:focus { text-decoration: none; } .stepper__cirkel { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; border: 2px solid var(--kleur-rand); background: var(--vlak); color: var(--kleur-tekst-hint); position: relative; transition: transform var(--transitie-snel), box-shadow var(--transitie-snel), background var(--transitie-snel), border-color var(--transitie-snel), color var(--transitie-snel); } .stepper__stap:hover .stepper__cirkel { transform: translateY(-2px); box-shadow: var(--schaduw-sm); } .stepper__label { font-size: 0.82rem; font-weight: 600; color: var(--kleur-tekst-zacht); text-align: center; line-height: 1.3; } .stepper__lijn { flex: 1 1 auto; height: 2px; min-width: 1.75rem; background: var(--kleur-rand); margin-top: 1.3rem; } .stepper__lijn--voltooid { background: var(--terra-500); } .stepper__stap--beschikbaar .stepper__cirkel { border-color: var(--salie-400); color: var(--salie-700); } .stepper__stap--actief .stepper__cirkel { background: var(--salie-700); border-color: var(--salie-700); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--merk) 22%, transparent); } .stepper__stap--actief .stepper__label { color: var(--salie-800); } .stepper__stap--voltooid .stepper__cirkel { background: var(--terra-500); border-color: var(--terra-500); color: #fff; } .stepper__stap--voltooid .stepper__label { color: var(--kleur-tekst); } .stepper__stap--afsluiten:not(.stepper__stap--actief):not(.stepper__stap--voltooid) .stepper__cirkel { border-color: var(--terra-500); color: var(--terra-600); border-style: dashed; } .stepper__cirkel .zorgplan-badge { position: absolute; top: -0.4rem; right: -0.5rem; min-width: 1.3rem; height: 1.3rem; font-size: 0.7rem; border: 2px solid #fff; } .omaha-koppelblok { border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; background: var(--zand-100); } .omaha-koppelblok--onvolledig { background: var(--alert-licht); } .omaha-koppelblok--volledig { background: var(--succes-licht); } /* --------------------------------------------------------------------------- 16. LEGE STATEN ------------------------------------------------------------------------- */ .leeg-staat { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; padding: var(--sp-10) var(--sp-6); background: var(--vlak); border: 1px dashed var(--zand-300); border-radius: var(--radius-lg); color: var(--kleur-tekst-zacht); margin-bottom: 1.25rem; } .leeg-staat svg { color: var(--salie-300); margin-bottom: 0.25rem; } .leeg-staat__titel { font-family: var(--lettertype-kop); font-size: var(--fs-md); font-weight: 600; color: var(--kleur-tekst); margin: 0; } .leeg-staat p { margin: 0; max-width: 34rem; font-size: var(--fs-sm); } .leeg-staat .knop { margin-top: 0.5rem; } /* --------------------------------------------------------------------------- 17. MODULE-SPECIFIEK (batches 3 t/m 7 — bestaande klassen behouden) ------------------------------------------------------------------------- */ /* Cliënten / dossier */ /* Aandachtsblok boven een lijst. De telling is zelf de filterknop: één getal, niet twee keer hetzelfde ergens anders herhaald. Kleur blijft hier bewust terughoudend — het blok trekt de aandacht met zijn rand en positie, niet met een vlak vol waarschuwingskleur, want dan verliest de statuspil in de tabel eronder zijn zeggingskracht. */ .aandacht { background: var(--waarschuwing-licht); border: 1px solid var(--waarschuwing-rand); border-left: 3px solid var(--waarschuwing-donker); border-radius: var(--radius-sm); padding: 1rem 1.15rem 1.1rem; margin-bottom: 1.25rem; } .aandacht__kop { margin-bottom: 0.85rem; } .aandacht__titel { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 1rem; color: var(--waarschuwing-donker); } .aandacht__titel svg { flex-shrink: 0; } .aandacht__uitleg { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--kleur-tekst-zacht); } .aandacht__punten { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; } .aandacht__punt { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.4rem 0.75rem; background: var(--vlak); border: 1px solid var(--waarschuwing-rand); border-radius: var(--radius-sm); color: var(--kleur-tekst); text-decoration: none; font-size: 0.85rem; transition: border-color var(--transitie), box-shadow var(--transitie); } .aandacht__punt:hover, .aandacht__punt:focus-visible { border-color: var(--waarschuwing-donker); box-shadow: var(--schaduw-sm); } .aandacht__punt--actief { background: var(--waarschuwing-donker); border-color: var(--waarschuwing-donker); color: var(--vlak); } .aandacht__punt--actief:hover, .aandacht__punt--actief:focus-visible { color: var(--vlak); } .aandacht__aantal { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; } .aandacht__wissen { display: inline-flex; align-items: center; padding: 0.4rem 0.6rem; font-size: 0.82rem; color: var(--kleur-tekst-zacht); } @media (max-width: 640px) { .aandacht__punt { flex: 1 1 100%; justify-content: flex-start; } } .filterbalk { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .filterbalk input[type="search"] { flex: 1; min-width: 200px; } .filterbalk select { width: auto; } .resultaat-telling { color: var(--kleur-tekst-zacht); font-size: 0.88rem; } .paginering { display: flex; gap: 0.4rem; align-items: center; justify-content: center; margin-top: 1rem; flex-wrap: wrap; } .paginering a { padding: 0.4rem 0.7rem; border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); transition: background var(--transitie-snel), border-color var(--transitie-snel); } .paginering a:hover { background: var(--salie-50); border-color: var(--salie-300); text-decoration: none; } .paginering a[aria-current="page"] { background: var(--salie-700); color: #fff; border-color: var(--salie-700); } .dossier-koptekst { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } .dossier-koptekst__acties { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* Batch 3: kwaliteit & administratie */ .protocol-inhoud { padding: 0.75rem 1rem; background: var(--zand-100); border-radius: var(--radius-sm); white-space: pre-wrap; line-height: 1.5; } .audit-json { margin: 0.4rem 0 0; padding: 0.6rem 0.8rem; background: var(--zand-900); color: #E8E4DE; border-radius: var(--radius-sm); font-size: 0.78rem; overflow-x: auto; max-width: 420px; white-space: pre-wrap; word-break: break-word; } /* Batch 4: wondzorg (foto-verloop) */ .wond-verloop { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .wond-observatie { border: 1px solid var(--zand-200); border-radius: var(--radius); padding: 0.85rem; background: var(--zand-50); box-shadow: var(--schaduw-sm); } .wond-observatie__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; } .wond-observatie__kop small { color: var(--kleur-tekst-zacht); } .wond-foto { width: 100%; max-height: 200px; object-fit: cover; border-radius: var(--radius-sm); display: block; margin-bottom: 0.5rem; } /* Meetwaarden bij een wondobservatie: chips op een rij in plaats van vier losse regels. Wie het verloop volgt vergelijkt afmeting en pijnscore tussen observaties; naast elkaar gaat dat, onder elkaar niet. */ .wond-observatie__meta { list-style: none; padding: 0; margin: 0 0 0.5rem; font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 0.3rem; } .wond-observatie__meta li { border: 1px solid var(--kleur-rand); background: var(--vlak-zacht); border-radius: var(--radius-pil); padding: 0.08rem 0.55rem; color: var(--kleur-tekst-zacht); font-variant-numeric: tabular-nums; } .wond-observatie__meta li b { color: var(--kleur-tekst); font-weight: 600; } /* Batch 5: zorgveiligheid — dossierbanner */ .veiligheidsbanner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0.6rem 0.9rem; background: #FFF6EC; border: 1px solid var(--terra-200); border-left: 4px solid var(--terra-500); border-radius: var(--radius-sm); box-shadow: var(--schaduw-sm); } .veiligheidsbanner__item { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; background: var(--vlak); border: 1px solid var(--terra-200); border-radius: var(--radius-pil); font-size: 0.82rem; font-weight: 600; } .veiligheidsbanner__item--kritiek { background: var(--alert-licht); border-color: var(--alert-rand); color: var(--alert-donker); } .veiligheidsbanner__link { margin-left: auto; font-size: 0.82rem; font-weight: 600; white-space: nowrap; } /* Dossier op orde — de vijf vaste dossierpunten, met per openstaand punt meteen de knop die het gat dicht. Staat bewust ónder de veiligheidsbanner: dat een cliënt niet gereanimeerd wil worden weegt zwaarder dan een verlopen evaluatietermijn, en die volgorde hoort op het scherm te staan. Daarom ook geen alertkleur hier — dit blok is administratief, geen klinisch signaal. */ .compleet { background: var(--vlak); border: 1px solid var(--kleur-rand); border-left: 3px solid var(--waarschuwing-donker); border-radius: var(--radius-sm); padding: 1rem 1.15rem; margin-bottom: 1.25rem; } .compleet--rond { border-left-color: var(--succes-donker); } .compleet__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; } .compleet__titel { margin: 0; font-size: 0.95rem; } .compleet__telling { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kleur-tekst-zacht); } .compleet--rond .compleet__telling { color: var(--succes-donker); } .compleet__punten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; } .compleet__punt { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--kleur-rand-zacht); } .compleet__punt:first-child { border-top: 0; } .compleet__merk { display: inline-flex; flex-shrink: 0; color: var(--waarschuwing-donker); } .compleet__punt--rond .compleet__merk { color: var(--succes-donker); } .compleet__naam { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 600; } .compleet__punt--rond .compleet__naam { font-weight: 400; color: var(--kleur-tekst-zacht); } /* De uiterste datum, alleen bij een openstaand punt dat er een heeft. Staat vóór de uitleg omdat "wanneer" dringender is dan "waarom". */ .compleet__termijn { display: inline-block; margin-left: 0.4rem; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--kleur-tekst-zacht); } .compleet__termijn--verstreken { color: var(--alert-donker); } /* De uitleg staat er altijd bij: wie het scherm voor het eerst ziet moet niet hoeven raden waaróm een punt openstaat. */ .compleet__uitleg { display: block; font-size: 0.78rem; font-weight: 400; line-height: 1.45; color: var(--kleur-tekst-hint); } .compleet__actie { flex-shrink: 0; } @media (max-width: 640px) { .compleet__punt { flex-wrap: wrap; } .compleet__actie { margin-left: 2.1rem; } } /* Dossierchecklist (migratie 063) — van papieren map naar digitaal dossier. */ .checklist-stand { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; background: var(--vlak); border: 1px solid var(--kleur-rand); border-left: 3px solid var(--waarschuwing-donker); border-radius: var(--radius-sm); padding: 1.1rem 1.35rem; margin-bottom: 1.5rem; } .checklist-stand--vrij { border-left-color: var(--succes-donker); } .checklist-stand__cijfer { font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--waarschuwing-donker); white-space: nowrap; } .checklist-stand--vrij .checklist-stand__cijfer { color: var(--succes-donker); } .checklist-stand__cijfer span { font-size: 1.05rem; font-weight: 600; color: var(--kleur-tekst-hint); } .checklist-stand__tekst { flex: 1; min-width: 15rem; } .checklist-stand__tekst p { margin: 0.2rem 0 0; font-size: 0.87rem; color: var(--kleur-tekst-zacht); } .checklist-stand__actie form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .checklist-stand__actie input[type="text"] { min-width: 12rem; } /* De lijst zelf */ .checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .checklist__item { padding: 0.9rem 0; border-top: 1px solid var(--kleur-rand-zacht); } .checklist__item:first-child { border-top: 0; } .checklist__item--nvt { opacity: 0.72; } .checklist__kop { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .checklist__naam { font-weight: 600; } .checklist__optioneel { font-size: 0.74rem; color: var(--kleur-tekst-hint); font-style: italic; } .checklist__uitleg { margin: 0.3rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--kleur-tekst-hint); } .checklist__afkeur { margin: 0.5rem 0 0; padding: 0.55rem 0.75rem; background: var(--afkeur-licht); border-left: 3px solid var(--afkeur); border-radius: var(--radius-sm); font-size: 0.85rem; } /* Scan en module onder elkaar, met een label ervoor zodat de twee stappen visueel uit elkaar blijven. */ .checklist__regels { margin-top: 0.65rem; display: flex; flex-direction: column; gap: 0.4rem; } .checklist__regel { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.87rem; } .checklist__label { flex: 0 0 4.5rem; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--kleur-tekst-hint); } .checklist__regel small { color: var(--kleur-tekst-hint); } .checklist__form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .checklist__form input[type="text"] { min-width: 10rem; } .checklist__afwijking { margin-top: 0.55rem; } .checklist__afwijking summary { font-size: 0.8rem; color: var(--kleur-tekst-hint); cursor: pointer; } .checklist__afwijking form { margin-top: 0.5rem; } /* Groepje bij elkaar horende vinkjes met een kop erboven. Gebruikt voor de zorgvormen per dienst; fieldset/legend omdat een schermlezer dan voorleest waar die vinkjes bij horen. */ .veldgroep { border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); padding: 0.85rem 1rem 0.9rem; margin: 0 0 1rem; } .veldgroep legend { padding: 0 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--kleur-tekst-zacht); } .veldgroep .veld-hint { margin-top: 0.5rem; } /* Scanscherm: alles wat nog gescand moet worden op één pagina, één knop. De naam links, het bestandsveld rechts, zodat je met de map naast je van boven naar beneden werkt. */ .scanrij { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; cursor: pointer; } .scanrij__naam { flex: 1; min-width: 14rem; font-weight: 600; font-size: 0.92rem; } .scanrij input[type="file"] { flex: 0 1 22rem; min-width: 0; } /* Blijft in beeld bij het scrollen: bij achttien rijen is de knop anders telkens buiten beeld. */ .scanbalk { position: sticky; bottom: 0; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--vlak); border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; box-shadow: var(--schaduw-sm); } .scanbalk .checklist__uitleg { flex: 1; min-width: 14rem; margin: 0; } @media (max-width: 640px) { .scanrij input[type="file"] { flex-basis: 100%; } } /* Controlescherm: scan links, module rechts. Dat die twee náást elkaar staan is de reden dat dit scherm bestaat — moet de beoordelaar twee vensters openen, dan wordt de controle een doorklikoefening. */ .controle-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; } .controle-scan { width: 100%; height: min(70vh, 780px); border: 1px solid var(--kleur-rand); border-radius: var(--radius-sm); background: var(--zand-50); } @media (max-width: 1080px) { .controle-raster { grid-template-columns: 1fr; } .controle-scan { height: 55vh; } } @media (max-width: 640px) { .checklist__label { flex-basis: 100%; } .checklist__form, .checklist-stand__actie form { width: 100%; } } /* Batch 6: cliëntbeleving & kwaliteit (dashboard + vragenlijsten) */ .kw-grafiek { width: 100%; height: auto; max-width: 480px; } .kw-balk { position: relative; background: var(--zand-200); border-radius: var(--radius-xs); height: 1.35rem; margin: 0.3rem 0; overflow: hidden; } .kw-balk__vul { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--salie-600), var(--salie-400)); border-radius: var(--radius-xs); transform-origin: left center; animation: balk-groei 600ms cubic-bezier(0.2, 0, 0, 1) both; } @keyframes balk-groei { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Staafdiagram-groei (kwaliteitsdashboard, inline SVG). */ .kw-staaf { transform-box: fill-box; transform-origin: center bottom; animation: staaf-groei 550ms cubic-bezier(0.2, 0, 0, 1) both; } @keyframes staaf-groei { from { transform: scaleY(0); } to { transform: scaleY(1); } } .kw-staaf-waarde { animation: tabs-fade-in 300ms ease both; } .kw-balk__label { position: relative; z-index: 1; display: inline-block; padding: 0 0.5rem; line-height: 1.35rem; font-size: 0.78rem; color: var(--salie-900); font-weight: 600; } .kw-resultaat { padding: 0.5rem 0; border-bottom: 1px solid var(--zand-200); } .kw-resultaat:last-child { border-bottom: none; } .kw-pos { color: var(--salie-700); } .kw-neg { color: var(--alert); } .schaal-keuze { display: flex; flex-wrap: wrap; gap: 0.4rem; } .schaal-optie { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; cursor: pointer; font-weight: 600; font-size: 0.85rem; } .schaal-optie input { width: auto; margin: 0; } /* Batch 7: km-registratie & declaraties */ .tab-balk { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem; } .lijst-los { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; } .lijst-los li { min-width: 12rem; } .adres-groep { border: 1px solid var(--zand-200); border-radius: var(--radius); padding: 0.6rem 0.9rem 0.9rem; margin: 0 0 0.9rem; background: var(--zand-50); } .adres-groep legend { font-weight: 600; padding: 0 0.35rem; color: var(--kleur-tekst-zacht); } /* Afdruk-/PDF-weergave per werknemer (zakelijk, inktzuinig). */ .afdruk-kop { margin-bottom: 1rem; } .afdruk-kop p { margin: 0.2rem 0 0; color: var(--kleur-tekst-zacht); } .afdruk-tabel { width: 100%; border-collapse: collapse; margin-bottom: 1rem; box-shadow: none; border-radius: 0; } .afdruk-tabel th, .afdruk-tabel td { border: 1px solid var(--zand-400); padding: 0.35rem 0.55rem; text-align: left; font-size: 0.9rem; position: static; } .afdruk-tabel tfoot td { background: var(--zand-100); } .afdruk-totaal { font-size: 1.1rem; margin-top: 1rem; } .afdruk-handtekening { margin-top: 2rem; line-height: 2.4; font-size: 0.9rem; } /* Foutpagina's */ .foutpagina { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--zand-100); } .foutpagina__kaart { text-align: center; background: var(--vlak); border-radius: var(--radius-lg); box-shadow: var(--schaduw); padding: 3rem 2rem; } .foutpagina__kaart h1 { font-size: 3rem; color: var(--salie-700); margin: 0; } /* Sessietimer */ .sessie-timer { position: fixed; bottom: 1rem; right: 1rem; background: var(--zand-900); color: #fff; padding: 0.5rem 0.9rem; border-radius: var(--radius); font-size: 0.85rem; z-index: 30; box-shadow: var(--schaduw); } /* --------------------------------------------------------------------------- 18. PRINT — zakelijk en inktzuinig, geen fancy effecten ------------------------------------------------------------------------- */ .print-pagina { background: var(--vlak); padding: 2rem; } .print-pagina__inhoud { max-width: 900px; margin: 0 auto; } /* Printpagina's hebben geen topbar: kop niet laten zweven. */ .print-pagina thead th { position: static; } @media print { .print-pagina { padding: 0; } body { background: var(--vlak); } .knop, .filterbalk, .sidebar, .topbar, .kleef-balk, .sessie-timer, .hero__acties, .palet-overlay { display: none !important; } .kaart, .kpi-kaart, table { box-shadow: none; border: 1px solid #ccc; } .hero, .hero--zacht { background: var(--vlak); color: #000; box-shadow: none; border: none; padding: 0 0 1rem; margin-bottom: 1rem; } .hero__begroeting, .hero--zacht .hero__begroeting { color: #000; } thead th { position: static; } } /* --------------------------------------------------------------------------- 19. RESPONSIVE & TOEGANKELIJKHEID ------------------------------------------------------------------------- */ @media (max-width: 768px) { :root { --topbar-hoogte: 54px; } .layout { flex-direction: column; } .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform 0.22s ease-in-out; z-index: 18; width: 80%; max-width: 300px; } .sidebar.sidebar--open { transform: translateX(0); } .zijbalk-backdrop { position: fixed; inset: 0; z-index: 17; background: rgba(28, 24, 20, 0.4); border: none; padding: 0; animation: tabs-fade-in 160ms ease; } .zijbalk-backdrop[hidden] { display: none; } .topbar { padding: 0 0.8rem; gap: 0.5rem; } .topbar__hamburger { display: inline-flex; } .topbar__inklap { display: none; } .topbar__zoek { min-width: 0; flex: 0 0 auto; padding: 0.45rem 0.55rem; } .topbar__zoek-tekst, .topbar__kbd { display: none; } .topbar__sectie { display: none; } .layout__inhoud { padding: 1.25rem 1rem 2rem; } .hero { padding: var(--sp-6) var(--sp-5) var(--sp-12); border-radius: var(--radius-lg); } .hero__begroeting { font-size: var(--fs-xl); } .kpi-grid { padding: 0 var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); } .kpi-kaart__cijfer { font-size: 2.1rem; } .volgende-afspraak { margin: 0 var(--sp-3) var(--sp-4); } } @media (max-width: 640px) { .layout__inhoud { padding-left: 0.8rem; padding-right: 0.8rem; } /* Grotere, beter aantikbare knoppen op mobiel. */ .knop { padding: 0.6rem 0.9rem; min-height: 48px; } /* Formulierrijen stapelen netjes onder elkaar. */ .formulier-rij { flex-wrap: wrap; } .formulier-rij > div { flex: 1 1 100%; } /* Grote invoervelden op mobiel (km-/declaratieformulieren). */ input, select, textarea { min-height: 48px; font-size: 1.05rem; } textarea { min-height: 0; } input[type="checkbox"], input[type="radio"] { min-height: 0; } /* Tabellen iets compacter zodat er meer past. */ .layout__inhoud table { font-size: 0.9rem; } h1 { font-size: 1.45rem; } } /* --------------------------------------------------------------------------- 20. PAKKET A–F: nieuwe componenten ------------------------------------------------------------------------- */ /* Skip-link voor toetsenbordgebruikers (E1). */ .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 100; background: var(--salie-700); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 600; box-shadow: var(--schaduw); transition: top var(--transitie-snel); } .skip-link:focus { top: 0.6rem; color: #fff; text-decoration: none; } /* Laadstatus op submit-knoppen (A3). */ .knop--laden { position: relative; color: transparent !important; pointer-events: none; } .knop--laden::after { content: ""; position: absolute; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; animation: knop-spin 0.7s linear infinite; } .knop--secundair.knop--laden::after { border-color: var(--salie-200); border-top-color: var(--salie-700); } @keyframes knop-spin { to { transform: rotate(1turn); } } /* Meldingen: sluitknop + verdwijn-animatie (A6). */ .melding__sluit { margin-left: auto; border: none; background: transparent; color: inherit; font-size: 1.15rem; line-height: 1; padding: 0.1rem 0.35rem; border-radius: var(--radius-xs); cursor: pointer; flex-shrink: 0; align-self: flex-start; } .melding__sluit:hover { background: rgba(0, 0, 0, 0.07); } .melding--weg { opacity: 0; transform: translateY(-4px); transition: opacity 0.22s ease, transform 0.22s ease; } /* Foutpagina's (A1). */ .foutpagina__illustratie { color: var(--salie-300); margin-bottom: 0.5rem; } .foutpagina__titel { font-family: var(--lettertype-kop); font-size: var(--fs-md); font-weight: 700; margin: 0.25rem 0 0.5rem; } .foutpagina__kaart { max-width: 460px; } .foutpagina__kaart > p { color: var(--kleur-tekst-zacht); } /* Dossier-profielkaart (B1). */ .dossier-profiel { position: relative; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; /* De accentrand bovenaan is een achtergrondlaag en geen los ::before-element. Een achtergrond wordt vanzelf bijgesneden door de afgeronde hoeken, dus `overflow: hidden` is er niet meer voor nodig — en dat knipte juist het uitklapmenu "Meer" af zodra het buiten de kaart viel. */ background: var(--gradient-accentrand) no-repeat top left / 100% 3px, var(--vlak); border: 1px solid var(--zand-200); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--schaduw-sm); margin-bottom: var(--sp-5); } .dossier-profiel__avatar { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--gradient-avatar); color: var(--avatar-tekst); display: flex; align-items: center; justify-content: center; font-family: var(--lettertype-kop); font-weight: 700; font-size: 1.15rem; flex-shrink: 0; box-shadow: var(--schaduw-sm); } .dossier-profiel__info { flex: 1; min-width: 220px; } .dossier-profiel__info h1 { margin: 0 0 0.4rem; padding-bottom: 0; } .dossier-profiel__info h1::after { content: none; } .dossier-profiel__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .dossier-profiel__chip { background: var(--zand-100); border: 1px solid var(--zand-200); color: var(--kleur-tekst-zacht); border-radius: var(--radius-pil); font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.65rem; white-space: nowrap; } .dossier-profiel__acties { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } /* "Meer ▾"-dropdown (native details, CSP-veilig). */ .meer-menu { position: relative; display: inline-block; } .meer-menu > summary { list-style: none; cursor: pointer; user-select: none; } .meer-menu > summary::-webkit-details-marker { display: none; } .meer-menu[open] > summary { background: var(--salie-50); border-color: var(--salie-300); color: var(--salie-700); } .meer-menu__lijst { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--vlak); border: 1px solid var(--zand-200); border-radius: var(--radius); box-shadow: var(--schaduw-lg); padding: 0.4rem; z-index: 40; display: flex; flex-direction: column; animation: tabs-fade-in 140ms ease; } .meer-menu__lijst a { padding: 0.5rem 0.75rem; border-radius: var(--radius-xs); color: var(--kleur-tekst); font-size: 0.92rem; font-weight: 500; } .meer-menu__scheiding { display: block; height: 1px; background: var(--zand-200); margin: 0.35rem 0.25rem; } .meer-menu__lijst a:hover { background: var(--salie-50); color: var(--salie-800); text-decoration: none; } /* Avatar-chips in lijsten (B2). */ .tabel-persoon { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--kleur-tekst); } .tabel-persoon:hover { color: var(--salie-700); } .tabel-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--salie-100); color: var(--salie-700); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; flex-shrink: 0; } /* Dagworkflow-bord als kanban (B3). */ .bord { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); align-items: start; } .bord-kolom { background: var(--zand-100); border: 1px solid var(--zand-200); border-radius: var(--radius-lg); padding: var(--sp-3); } .bord-kolom__kop { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.92rem; min-width: 0; } .bord-kolom__telling { margin-left: auto; font-size: 0.75rem; font-weight: 700; color: var(--kleur-tekst-zacht); background: var(--vlak); border: 1px solid var(--zand-200); border-radius: var(--radius-pil); padding: 0.1rem 0.5rem; white-space: nowrap; } .bord-kolom__voortgang { height: 5px; border-radius: 3px; background: var(--zand-200); overflow: hidden; margin-bottom: var(--sp-3); } .bord-kolom__voortgang-vul { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--salie-500), var(--salie-400)); } .bord-kaart { background: var(--vlak); border: 1px solid var(--zand-200); border-left: 3px solid var(--zand-500); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 8px; box-shadow: var(--schaduw-sm); transition: transform var(--transitie-snel), box-shadow var(--transitie-snel); } .bord-kaart:hover { transform: translateY(-1px); box-shadow: var(--schaduw); } .bord-kaart--afspraak { border-left-color: var(--info); } .bord-kaart__meta { font-size: 0.68rem; color: var(--kleur-tekst-hint); margin-bottom: 0.1rem; } .bord-kaart__titel { font-size: 0.85rem; font-weight: 700; } /* Berichten als chat-bubbels (B5). */ .bericht-lijst { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 760px; } .bericht-bubbel { display: flex; gap: 0.75rem; align-items: flex-start; } .bericht-bubbel__inhoud { background: var(--vlak); border: 1px solid var(--zand-200); border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); padding: 0.8rem 1rem; box-shadow: var(--schaduw-sm); flex: 1; min-width: 0; } .bericht-bubbel__meta { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; font-size: 0.8rem; color: var(--kleur-tekst-zacht); margin-bottom: 0.25rem; } .bericht-bubbel__meta strong { color: var(--kleur-tekst); font-size: 0.88rem; } .bericht-bubbel__onderwerp { margin: 0 0 0.25rem; font-weight: 700; font-size: 0.95rem; } .bericht-bubbel__tekst { margin: 0; font-size: 0.92rem; } /* Notificatiegroepen met accent (B6). */ .kaart--signaal { border-top: 3px solid var(--terra-400); } /* Bonnetjes bij een declaratieregel: miniatuur i.p.v. kale bestandsnaam. */ .bon-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; } .bon-strip__item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; max-width: 84px; padding: 0.3rem; border: 1px solid var(--zand-200); border-radius: var(--radius-sm); background: var(--vlak); color: var(--kleur-tekst-zacht); transition: transform var(--transitie-snel), box-shadow var(--transitie-snel), border-color var(--transitie-snel); } .bon-strip__item:hover { text-decoration: none; border-color: var(--salie-300); transform: translateY(-2px); box-shadow: var(--schaduw); } .bon-strip__item img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-xs); display: block; background: var(--zand-100); } .bon-strip__bestand { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); background: var(--terra-100); color: var(--terra-600); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; } .bon-strip__naam { font-size: 0.62rem; line-height: 1.25; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Live inzetbaarheidscontrole in het planformulier. */ .inzet-controle { background: var(--waarschuwing-licht); border: 1px solid var(--waarschuwing-rand); border-left: 4px solid var(--waarschuwing); border-radius: var(--radius-sm); padding: 0.75rem 1rem; color: var(--waarschuwing-donker); font-size: 0.92rem; animation: melding-entree var(--transitie-traag) both; } .inzet-controle[hidden] { display: none; } .inzet-controle ul { margin: 0.35rem 0 0; padding-left: 1.15rem; } .inzet-controle li { margin: 0.15rem 0; } .inzet-controle--blokkade { background: var(--alert-licht); border-color: var(--alert-rand); border-left-color: var(--alert); color: var(--alert-donker); } .inzet-controle__hard { font-weight: 700; } /* Sorteerbare kolomkoppen (C2). */ th.sorteerbaar { cursor: pointer; user-select: none; } th.sorteerbaar:hover { color: var(--salie-700); } th.sorteerbaar::after { content: "↕"; margin-left: 0.35rem; opacity: 0.4; font-size: 0.85em; } th.sorteerbaar[aria-sort="ascending"]::after { content: "↑"; opacity: 1; } th.sorteerbaar[aria-sort="descending"]::after { content: "↓"; opacity: 1; } /* Wachtwoord-oogje (C3). */ .wachtwoord-veld { position: relative; } .wachtwoord-veld input { padding-right: 2.8rem; } .wachtwoord-veld__oog { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; border: none; background: transparent; color: var(--kleur-tekst-hint); border-radius: var(--radius-xs); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .wachtwoord-veld__oog:hover { color: var(--salie-700); background: var(--zand-100); } .wachtwoord-veld__oog--actief { color: var(--salie-700); } /* Sneltoetsen-overlay (C5). */ .sneltoets-kaart { max-width: 380px; padding: var(--sp-5); } .sneltoets-kaart__titel { margin: 0 0 0.75rem; font-size: var(--fs-md); } .sneltoets-lijst { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .sneltoets-lijst div { display: flex; align-items: center; gap: 0.75rem; } .sneltoets-lijst dt { min-width: 5.5rem; } .sneltoets-lijst dd { margin: 0; color: var(--kleur-tekst-zacht); font-size: 0.92rem; } /* Agenda-verfijning (B4): weekend-tint + gloed op de nu-lijn. */ .agenda__cols .agenda__dag:nth-child(6), .agenda__cols .agenda__dag:nth-child(7) { background-color: rgba(58, 46, 34, 0.03); } .agenda__nu { box-shadow: 0 0 6px rgba(176, 65, 47, 0.55); } /* Thema-toggle-iconen (D1): maan in licht, zon in donker. */ .thema-icoon--zon { display: none; } [data-thema="donker"] .thema-icoon--zon { display: inline; } [data-thema="donker"] .thema-icoon--maan { display: none; } /* --------------------------------------------------------------------------- 21. DONKER THEMA (D1) — token-overrides + gerichte fixes ------------------------------------------------------------------------- */ [data-thema="donker"] { color-scheme: dark; --vlak: #2A2623; --vlak-zacht: #262220; --kleur-pagina: #1C1917; --kleur-achtergrond: #2A2623; --kleur-kaart: #322D29; --zand-50: #262220; --zand-100: #322D29; --zand-200: #3C3631; --zand-300: #4A433C; --zand-400: #5D554C; --zand-500: #8A7E70; --kleur-rand: #3C3631; --kleur-rand-zacht: #322D29; --kleur-tekst: #EDE7DE; --kleur-tekst-zacht: #B9AEA1; --kleur-tekst-hint: #9A9084; /* De merkkleur blijft dezelfde hue, maar de tintvlakken draaien om: op een donkere ondergrond is "zacht" niet lichter maar juist donkerder, en de diepe variant wordt de lichtste — anders verdwijnt het accent. */ /* Afgeleid van --org-kleur, niet van de lichte tinten: die zijn voor papierwit berekend en zouden hier onleesbaar zijn. */ --merk: var(--org-kleur); --merk-zacht: color-mix(in srgb, var(--org-kleur) 18%, #1C1917); --merk-rand: color-mix(in srgb, var(--org-kleur) 34%, #1C1917); --merk-tekst: color-mix(in srgb, var(--org-kleur) 42%, #FFFFFF); --merk-diep: color-mix(in srgb, var(--org-kleur) 30%, #FFFFFF); --salie-50: color-mix(in srgb, var(--merk) 12%, #1C1917); --salie-100: var(--merk-zacht); --salie-200: var(--merk-rand); --salie-300: color-mix(in srgb, var(--merk) 52%, #1C1917); --salie-800: var(--merk-diep); --terra-100: color-mix(in srgb, var(--merk) 20%, #1C1917); --terra-200: color-mix(in srgb, var(--merk) 34%, #1C1917); --terra-300: var(--merk-tekst); --succes: #4FAE85; --succes-donker: #8AD5B2; --succes-licht: #20352B; --succes-rand: #31513F; --alert: #CE5B45; --alert-donker: #EE9E8D; --alert-licht: #3D2521; --alert-rand: #5A362F; --waarschuwing: #D2A24A; --waarschuwing-donker: #E6C077; --waarschuwing-licht: #39301C; --waarschuwing-rand: #524427; --info: #8FBBD3; --info-licht: #20313A; --info-rand: #324855; --afkeur: #C3A5DD; --afkeur-licht: #2C2438; --afkeur-rand: #45385A; /* De hero houdt witte tekst, dus moet hij in dit thema donker blijven — --merk-tekst is hier juist een lichte tint. */ --gradient-hero: linear-gradient(135deg, color-mix(in srgb, var(--org-kleur) 34%, #1C1917) 0%, color-mix(in srgb, var(--org-kleur) 16%, #1C1917) 62%, #14100E 100%); --gradient-primair: linear-gradient(165deg, color-mix(in srgb, var(--org-kleur) 30%, #1C1917) 0%, #1C1917 100%); --gradient-hero-zacht: linear-gradient(135deg, var(--merk-zacht) 0%, #2A2724 62%, var(--merk-zacht) 100%); --gradient-accentrand: linear-gradient(120deg, var(--merk), var(--merk-tekst)); --gradient-sparkline: linear-gradient(180deg, color-mix(in srgb, var(--merk) 32%, transparent), transparent); /* Zijbalk in het donkere thema: geen wit vlak, wel dezelfde opbouw. */ --zij-grond: #221E1C; --zij-rand: #3C3631; --zij-tekst: #DCD5CB; --zij-tekst-zacht: #9A9084; --zij-hover: #322D29; --zij-actief-vlak: var(--merk-zacht); --zij-actief-tekst: var(--merk-tekst); /* Het accent is in dit thema een lichte tint; witte initialen zouden daarop verdwijnen. */ --avatar-tekst: var(--kleur-pagina); --schaduw-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --schaduw: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3); --schaduw-lg: 0 18px 44px rgba(0, 0, 0, 0.55), 0 5px 12px rgba(0, 0, 0, 0.35); } [data-thema="donker"] .topbar { background: rgba(28, 25, 23, 0.82); border-bottom-color: #322D29; } [data-thema="donker"] .kpi-kaart { background: rgba(50, 45, 41, 0.84); } [data-thema="donker"] .kpi-kaart::before { background: linear-gradient(150deg, rgba(78, 106, 94, 0.6), rgba(60, 54, 49, 0.4) 45%, rgba(201, 138, 100, 0.5)); } [data-thema="donker"] .kleef-balk { background: rgba(28, 25, 23, 0.88); border-top-color: #322D29; } [data-thema="donker"] .auth-layout__formulier .auth-kaart { background: rgba(42, 38, 35, 0.92); border-color: rgba(255, 255, 255, 0.08); } [data-thema="donker"] .layout__main::before { background: linear-gradient(180deg, rgba(110, 154, 137, 0.05), transparent); } [data-thema="donker"] .hero--zacht .hero__begroeting { color: #CFE2D8; } [data-thema="donker"] .modal-overlay { background: rgba(0, 0, 0, 0.55); } [data-thema="donker"] .melding__sluit:hover { background: rgba(255, 255, 255, 0.08); } [data-thema="donker"] .veiligheidsbanner { background: #3A2B1D; border-color: #55392A; border-left-color: var(--terra-300); } [data-thema="donker"] .veiligheidsbanner__item { background: var(--vlak); border-color: #55392A; } [data-thema="donker"] .agenda__dag--vandaag { background-color: rgba(201, 138, 100, 0.08); } [data-thema="donker"] .agenda__cols .agenda__dag:nth-child(6), [data-thema="donker"] .agenda__cols .agenda__dag:nth-child(7) { background-color: rgba(0, 0, 0, 0.18); } [data-thema="donker"] .kw-grafiek text { fill: #B9AEA1; } [data-thema="donker"] .kw-balk__label { color: #DFEEE7; } [data-thema="donker"] .omaha-koppelblok--onvolledig { background: var(--alert-licht); } [data-thema="donker"] .omaha-koppelblok--volledig { background: var(--succes-licht); } /* Animaties uit voor wie daarom vraagt (blijft als laatste regel gelden). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- Organisatiemerk in de topbar --------------------------------------------------------------------------- Het systeem bedient meerdere ondernemingen met elk een eigen database. De naam en de kleur maken in één oogopslag duidelijk waar je zit — dat voorkomt de fout die hier het makkelijkst te maken is: gegevens invoeren bij de verkeerde organisatie. ------------------------------------------------------------------------- */ .organisatie-merk { position: relative; margin-left: auto; } .organisatie-merk__knop { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--kleur-rand); background: var(--kleur-vlak, var(--zand-50, #fff)); font-size: 0.82rem; font-weight: 600; color: var(--kleur-tekst); cursor: pointer; white-space: nowrap; list-style: none; } .organisatie-merk__knop::-webkit-details-marker { display: none; } .organisatie-merk__knop:hover { border-color: var(--organisatie-kleur, var(--salie-700)); } .organisatie-merk__stip { width: 9px; height: 9px; border-radius: 50%; background: var(--organisatie-kleur, var(--salie-700)); flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--merk) 25%, transparent); } .organisatie-merk__uitleg { margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--kleur-tekst-zacht); max-width: 22ch; } .organisatie-merk__optie { display: block; width: 100%; text-align: left; padding: 0.4rem 0.5rem; border: none; background: none; font: inherit; color: var(--kleur-tekst); border-radius: var(--radius); cursor: pointer; } .organisatie-merk__optie:hover { background: var(--zand-100, rgba(0, 0, 0, .05)); } @media (max-width: 720px) { .organisatie-merk__naam { display: none; } } /* --------------------------------------------------------------------------- 22. DOSSIER — panelen, veldenlijsten, meters Het clientdossier was een raster van negen even zware kaarten met regels in de vorm "Label: waarde", waarvan meer dan de helft een streepje was. Label en waarde stonden in dezelfde letter, dus je moest lezen waar je wilde scannen. Deze componenten draaien dat om: het label wordt klein en gespatieerd, de waarde krijgt het gewicht, en lege velden verdwijnen tot je ze opvraagt. ------------------------------------------------------------------------- */ /* Twee kolommen: links de zorg, rechts wie je belt en welke papieren er zijn. */ .dossier-raster { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: start; margin-top: var(--sp-4); } .dossier-kolom { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; } @media (max-width: 1080px) { .dossier-raster { grid-template-columns: 1fr; } } /* --- paneel ---------------------------------------------------------------- */ .paneel { background: var(--vlak); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius); box-shadow: var(--schaduw-sm); overflow: hidden; } .paneel__kop { display: flex; align-items: baseline; gap: var(--sp-2); padding: 0.85rem 1.1rem 0.55rem; flex-wrap: wrap; } .paneel__kop h2 { font-family: var(--lettertype-kop); font-size: 1.02rem; line-height: var(--lh-kop); margin: 0; } /* Het aantal hoort bij de kop, niet in de lijst: je ziet meteen of er iets is. */ .paneel__telling { font-size: var(--fs-xs); font-weight: 700; /* --kleur-tekst-hint haalt op dit vlak maar 4,2:1; op klein cijferwerk is dat te weinig. Een tint donkerder zit op 5,1:1. */ color: var(--kleur-tekst-zacht); background: var(--zand-100); border-radius: var(--radius-pil); padding: 0.05rem 0.45rem; font-variant-numeric: tabular-nums; } .paneel__kop .knop { margin-left: auto; } .paneel__lijf { padding: 0 1.1rem 1.05rem; } /* --- veldenlijst ----------------------------------------------------------- */ .velden { display: grid; gap: 0.75rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; } .velden--enkel { grid-template-columns: 1fr; } .velden > div { min-width: 0; } .velden dt { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--kleur-tekst-hint); font-weight: 600; margin-bottom: 0.1rem; } .velden dd { margin: 0; font-size: 0.94rem; color: var(--kleur-tekst); overflow-wrap: break-word; } .velden dd.leeg { color: var(--kleur-tekst-hint); font-style: italic; } .velden-schakel { margin: 0.9rem 0 0; font-size: var(--fs-sm); color: var(--kleur-tekst-hint); } .velden-schakel button { font: inherit; font-weight: 600; color: var(--merk-tekst); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } /* --- rij: contactpersoon, document, melding -------------------------------- */ .dossier-rij { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0; border-bottom: 1px solid var(--kleur-rand-zacht); } .dossier-rij:first-child { padding-top: 0; } .dossier-rij:last-child { border-bottom: 0; padding-bottom: 0; } .dossier-rij__initialen { width: 2rem; height: 2rem; border-radius: var(--radius-sm); flex: none; display: grid; place-items: center; font-size: 0.74rem; font-weight: 700; color: var(--merk-diep); background: var(--merk-zacht); } .dossier-rij__hoofd { flex: 1; min-width: 0; } .dossier-rij__titel { font-size: 0.9rem; font-weight: 600; } .dossier-rij__titel a { text-decoration: none; } .dossier-rij__sub { font-size: 0.78rem; color: var(--kleur-tekst-hint); } .dossier-rij__actie { font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid var(--kleur-rand); border-radius: var(--radius-xs); padding: 0.15rem 0.5rem; color: var(--merk-tekst); } .dossier-rij__actie:hover { background: var(--merk-zacht); text-decoration: none; } .dossier-rij__tijd { font-size: 0.72rem; color: var(--kleur-tekst-hint); font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- lege staat binnen een paneel ------------------------------------------ */ .leegvak { text-align: center; padding: 1.1rem 0.8rem; border: 1px dashed var(--kleur-rand); border-radius: var(--radius-sm); background: var(--vlak-zacht); } .leegvak p { margin: 0 0 0.6rem; font-size: var(--fs-sm); color: var(--kleur-tekst-hint); } /* --- ADL-schaal als meter -------------------------------------------------- "Wassen: 3 / 6" moet je omrekenen; zes blokjes lees je in een oogopslag. Hoge afhankelijkheid (5 of 6) kleurt af — daar zit de zorg. */ .adl { display: grid; gap: 0.45rem; margin: 0.2rem 0 0; padding: 0; list-style: none; } .adl li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 0.6rem; align-items: center; font-size: var(--fs-sm); } .adl__naam { color: var(--kleur-tekst-zacht); } .adl__balk { display: flex; gap: 2px; } .adl__blok { height: 7px; flex: 1; border-radius: 2px; background: var(--zand-200); } .adl__blok--aan { background: var(--merk); } .adl__blok--aan.adl__blok--hoog { background: var(--waarschuwing); } .adl__waarde { font-variant-numeric: tabular-nums; color: var(--kleur-tekst-hint); font-size: 0.8rem; } /* --- volledigheid ---------------------------------------------------------- Tijdens de digitaliseringsslag is een leeg veld geen ruis maar een taak. Daarom geen streepjes in het dossier, maar een meter met directe links. */ .volledig { background: var(--info-licht); border: 1px solid var(--info-rand); border-radius: var(--radius); padding: 0.75rem 0.9rem; display: grid; gap: 0.5rem; } .volledig__kop { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--fs-sm); } .volledig__kop b { font-family: var(--lettertype-kop); font-size: 1.02rem; color: var(--info); font-variant-numeric: tabular-nums; } .volledig__kop span { color: var(--kleur-tekst-zacht); } .volledig__meter { height: 6px; border-radius: 3px; background: var(--vlak); overflow: hidden; border: 1px solid var(--info-rand); } .volledig__vul { height: 100%; background: linear-gradient(90deg, var(--info), var(--merk)); } .volledig__mist { display: flex; flex-wrap: wrap; gap: 0.3rem; } .volledig__mist a { font-size: 0.75rem; border: 1px solid var(--info-rand); background: var(--vlak); border-radius: var(--radius-pil); padding: 0.1rem 0.5rem; color: var(--info); text-decoration: none; } .volledig__mist a:hover { background: var(--info-licht); text-decoration: none; } /* --- administratie: ingeklapt ---------------------------------------------- BSN, IBAN en polisnummer zijn backofficewerk. Wie het dossier opent staat op het punt naar binnen te gaan en heeft ze niet nodig. */ .administratie { margin-top: var(--sp-4); background: var(--vlak); border: 1px solid var(--kleur-rand-zacht); border-radius: var(--radius); box-shadow: var(--schaduw-sm); } .administratie > summary { cursor: pointer; list-style: none; padding: 0.85rem 1.1rem; display: flex; align-items: center; gap: 0.6rem; font-family: var(--lettertype-kop); font-size: 1.02rem; font-weight: 600; } .administratie > summary::-webkit-details-marker { display: none; } .administratie > summary::after { content: "\25BE"; margin-left: auto; color: var(--kleur-tekst-hint); font-family: var(--lettertype); transition: transform var(--transitie); } .administratie[open] > summary::after { transform: rotate(180deg); } .administratie > summary small { font-family: var(--lettertype); font-weight: 400; font-size: var(--fs-sm); color: var(--kleur-tekst-hint); } .administratie__lijf { padding: 0 1.1rem 1.1rem; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .administratie__blok h3 { font-family: var(--lettertype); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--merk-tekst); font-weight: 700; margin: 0 0 0.55rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--kleur-rand-zacht); } /* Kleine knop in een paneelkop: mag de kop niet overstemmen. */ .knop--klein { font-size: var(--fs-sm); padding: 0.28rem 0.6rem; } /* Tussenkopje binnen een paneel (bijvoorbeeld "ADL-schaal"). */ .paneel__subkop { font-family: var(--lettertype); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--kleur-tekst-hint); font-weight: 700; margin: 1rem 0 0.5rem; } /* In het donkere thema is de accentkleur juist een LICHTE tint — daar hoort donkere tekst op. Witte tekst op licht magenta haalde 1,8:1. */ /* --alert is in dit thema de vlakvariant en haalt als kleine tekst 3,7:1. --alert-donker is de lichte variant die hier hoort. */ [data-thema="donker"] .veld-fout { color: var(--alert-donker); } [data-thema="donker"] .knop--primair { background: var(--merk-tekst); color: var(--kleur-pagina); } [data-thema="donker"] .knop--primair:hover { background: var(--merk-diep); color: var(--kleur-pagina); }