/* ==========================================================================
avalon.css — designsysteem Avalon Landscape + Engineering
v0.5.1 · geen build, geen npm, geen externe requests.
v0.5.1: fix — .av-map__anchors (twee ankers op dezelfde rand lagen op
mobiel op elkaar) en twee specificiteitslekken in avalon-leaflet.css.
v0.5: uit de omzetting van avalon-roadscan — kaartscherm (.av-mapscreen,
.av-map--full, .av-map__anchor--*), .av-grid, .av-actions, .av-range.
Leaflet-chrome zit in de losse adapter avalon-leaflet.css, want het
systeem kent geen externe bibliotheken.
v0.4: Lato zelf gehost (§ 0). Dit bestand is nu volledig zelfvoorzienend —
een pagina die het koppelt doet geen enkele request naar buiten.
v0.3: legendemark --line-dashed (secundaire codering voor een 4e reeks),
stat-tegel op label-boven-waarde met proportionele cijfers.
v0.2: legendemarks --line/--point/--point-open/--area, .av-toolbar,
.av-periodpicker.
Alles additief; het pad /ui/v1/ is de majeure lijn en verandert pas bij een breuk.
Gebruik:
Thema: (leeg = volgt het OS)
Chrome: (leeg = red)
REGEL DIE ALLES STUURT — afgeleid van het logo zelf:
het wordmark is zwaar en zwart, het merkteken is rood.
Zwart is het werkpaard. Rood is het signaal: merk, actief, gevaar.
Datakleuren dragen NOOIT merkrood. Zie § DATA.
========================================================================== */
/* --------------------------------------------------------------------------
§ 0 HUISLETTER — Lato, zelf gehost
Paden zijn relatief aan dit bestand: /ui/v1/avalon.css -> /ui/v1/fonts/.
Twee subsets per gewicht; dankzij `unicode-range` haalt de browser alleen
op wat een pagina echt nodig heeft — latin-ext blijft ongebruikt tenzij er
Oost-Europese of Turkse tekens op de pagina staan.
Lato © Łukasz Dziedzic, SIL Open Font License 1.1 — zie fonts/OFL.txt.
Zelf hosten is expliciet toegestaan. Laad dit NOOIT opnieuw via Google
Fonts: onnodige externe afhankelijkheid, en vanuit de EU juridisch rommelig.
-------------------------------------------------------------------------- */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap;
src: url('fonts/lato-300-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
src: url('fonts/lato-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
src: url('fonts/lato-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
src: url('fonts/lato-900-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap;
src: url('fonts/lato-300-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
src: url('fonts/lato-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
src: url('fonts/lato-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
src: url('fonts/lato-900-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* --------------------------------------------------------------------------
§ 1 TOKENS — licht
-------------------------------------------------------------------------- */
:root {
color-scheme: light;
/* Merk — vast, nooit thematisch */
--av-red: #e3000b; /* het merkrood, uit het logo bemonsterd */
--av-red-ink: #b00009; /* hover / pressed op licht */
--av-red-soft: #fde8e9;
--av-black: #0b0b0c;
--av-white: #ffffff;
/* Neutrale ladder */
--av-n0: #ffffff; --av-n25: #fafafb; --av-n50: #f2f3f5;
--av-n100: #e6e8eb; --av-n200: #d3d7dc; --av-n300: #b4bac2;
--av-n400: #8c949f; --av-n500: #6b7280; --av-n600: #4b525c;
--av-n700: #333941; --av-n800: #21262c; --av-n900: #14181d;
--av-n950: #0d1116;
/* Vlakken en inkt */
--av-plane: var(--av-n50); /* de pagina */
--av-surface: var(--av-n0); /* kaarten, panelen */
--av-surface-2: var(--av-n50); /* verzonken vlak, tabelkop */
--av-surface-3: var(--av-n100);
--av-line: var(--av-n200);
--av-line-soft: var(--av-n100);
--av-ink: var(--av-n900);
--av-ink-soft: var(--av-n600);
--av-ink-muted: var(--av-n500);
--av-ink-invert: var(--av-white);
/* Statussen — gevalideerd tegen #ffffff.
serious haalt 2.64:1 en draagt dáárom altijd icoon + label. */
--av-ok: #1f9d63; --av-ok-soft: #e6f4ed; --av-ok-ink: #14603d;
--av-warn: #c77a0a; --av-warn-soft: #fbf1dd; --av-warn-ink: #7d4c06;
--av-serious: #ec835a; --av-serious-soft: #fdece4; --av-serious-ink: #9c4a24;
--av-crit: var(--av-red);
--av-crit-soft: var(--av-red-soft);
--av-crit-ink: #a30008;
--av-info: #2a78d6; --av-info-soft: #e8eefc; --av-info-ink: #17508f;
/* § DATA — categorische reeks voor kaarten en grafieken.
Zeven slots, vaste volgorde, nooit doorgecycled.
Rood ontbreekt met opzet: rood is van het merk en van gevaar. */
--av-d1: #2a78d6; /* blauw */
--av-d2: #eb6834; /* oranje */
--av-d3: #1baf7a; /* aqua */
--av-d4: #eda100; /* geel */
--av-d5: #e87ba4; /* magenta */
--av-d6: #008300; /* groen */
--av-d7: #4a3aa7; /* violet */
/* Sequentieel (magnitude): één tint, licht -> donker */
--av-seq1: #cde2fb; --av-seq2: #9ec5f4; --av-seq3: #5598e7;
--av-seq4: #2a78d6; --av-seq5: #256abf; --av-seq6: #184f95; --av-seq7: #0d366b;
/* Chrome — volgt data-chrome, standaard rood */
--av-chrome-bg: var(--av-red);
--av-chrome-ink: var(--av-white);
--av-chrome-ink-dim: rgba(255,255,255,.78);
--av-chrome-rule: transparent;
--av-accent: var(--av-red);
--av-accent-ink: var(--av-red-ink);
/* De primaire knop volgt de chrome-keuze via tokens, niet via een
descendant-selector — zo blijft alles op één plek omschakelbaar. */
--av-btn-primary-bg: var(--av-red);
--av-btn-primary-bg-hover: var(--av-red-ink);
--av-btn-primary-ink: var(--av-white);
/* Vorm */
--av-r-sm: 6px; --av-r: 10px; --av-r-lg: 16px; --av-r-full: 999px;
--av-sh-1: 0 1px 2px rgba(11,11,12,.06), 0 1px 3px rgba(11,11,12,.05);
--av-sh-2: 0 2px 6px rgba(11,11,12,.07), 0 8px 24px rgba(11,11,12,.07);
--av-sh-3: 0 12px 32px rgba(11,11,12,.14), 0 32px 80px rgba(11,11,12,.18);
/* Ritme — 4px basis */
--av-s1: 4px; --av-s2: 8px; --av-s3: 12px; --av-s4: 16px;
--av-s5: 24px; --av-s6: 32px; --av-s7: 48px;
/* Typografie.
Lato is de huisletter (900 spiegelt het wordmark).
Zelf hosten op /ui/v1/fonts/ — nooit via Google Fonts laden. */
--av-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--av-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
--av-t-xs: 11px; --av-t-sm: 12px; --av-t-base: 14px; --av-t-md: 16px;
--av-t-lg: 20px; --av-t-xl: 26px; --av-t-2xl: 34px;
}
/* --------------------------------------------------------------------------
§ 2 TOKENS — donker (voor de GIS- en viewerschermen)
Gekozen stappen, geen automatische omkering.
-------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root:where(:not([data-theme='light'])) { color-scheme: dark; }
}
:root[data-theme='dark'] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
:root:where(:not([data-theme='light'])) {
--av-red-ink: #ff7a7a;
--av-red-text: #ff4d4d;
--av-red-soft: #2e1214;
--av-plane: var(--av-n950);
--av-surface: #151a21;
--av-surface-2: #1c232c;
--av-surface-3: #242c37;
--av-line: #2c3542;
--av-line-soft: #222a34;
--av-ink: #e7ecf3;
--av-ink-soft: #aab4c1;
--av-ink-muted: var(--av-n400);
--av-ok: #35b57b; --av-ok-soft: #10291d; --av-ok-ink: #6fd6a5;
--av-warn: #d69a3f; --av-warn-soft: #2a2113; --av-warn-ink: #edbc6d;
--av-serious: #ec835a; --av-serious-soft: #2d1a12; --av-serious-ink: #f4a684;
--av-crit: #ff4d4d; --av-crit-soft: #2e1214; --av-crit-ink: #ff8080;
--av-info: #5f8cf2; --av-info-soft: #16233d; --av-info-ink: #9ab6f8;
--av-d1:#3987e5; --av-d2:#d95926; --av-d3:#199e70; --av-d4:#c98500;
--av-d5:#d55181; --av-d6:#008300; --av-d7:#9085e9;
--av-sh-1: 0 1px 2px rgba(0,0,0,.4);
--av-sh-2: 0 2px 8px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.35);
--av-sh-3: 0 14px 40px rgba(0,0,0,.55), 0 36px 90px rgba(0,0,0,.5);
}
}
:root[data-theme='dark'] {
--av-red-ink: #ff7a7a;
--av-red-text: #ff4d4d;
--av-red-soft: #2e1214;
--av-plane: var(--av-n950);
--av-surface: #151a21;
--av-surface-2: #1c232c;
--av-surface-3: #242c37;
--av-line: #2c3542;
--av-line-soft: #222a34;
--av-ink: #e7ecf3;
--av-ink-soft: #aab4c1;
--av-ink-muted: var(--av-n400);
--av-ok: #35b57b; --av-ok-soft: #10291d; --av-ok-ink: #6fd6a5;
--av-warn: #d69a3f; --av-warn-soft: #2a2113; --av-warn-ink: #edbc6d;
--av-serious: #ec835a; --av-serious-soft: #2d1a12; --av-serious-ink: #f4a684;
--av-crit: #ff4d4d; --av-crit-soft: #2e1214; --av-crit-ink: #ff8080;
--av-info: #5f8cf2; --av-info-soft: #16233d; --av-info-ink: #9ab6f8;
--av-d1:#3987e5; --av-d2:#d95926; --av-d3:#199e70; --av-d4:#c98500;
--av-d5:#d55181; --av-d6:#008300; --av-d7:#9085e9;
--av-sh-1: 0 1px 2px rgba(0,0,0,.4);
--av-sh-2: 0 2px 8px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.35);
--av-sh-3: 0 14px 40px rgba(0,0,0,.55), 0 36px 90px rgba(0,0,0,.5);
}
/* --------------------------------------------------------------------------
§ 3 CHROME-VARIANT — zwarte balk, rood merkteken
-------------------------------------------------------------------------- */
:root[data-chrome='black'] {
--av-chrome-bg: var(--av-black);
--av-chrome-ink: var(--av-white);
--av-chrome-ink-dim: rgba(255,255,255,.7);
--av-chrome-rule: var(--av-red);
--av-btn-primary-bg: var(--av-black);
--av-btn-primary-bg-hover: var(--av-n700);
}
:root[data-theme='dark'][data-chrome='black'] {
--av-chrome-bg: #000;
--av-btn-primary-bg: var(--av-n0);
--av-btn-primary-bg-hover: var(--av-n100);
--av-btn-primary-ink: var(--av-black);
}
/* --------------------------------------------------------------------------
§ 4 BASIS
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
font-family: var(--av-sans);
font-size: var(--av-t-base);
line-height: 1.5;
color: var(--av-ink);
background: var(--av-plane);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; }
h1 { font-size: var(--av-t-xl); }
h2 { font-size: var(--av-t-lg); }
h3 { font-size: var(--av-t-md); }
h4 { font-size: var(--av-t-base); }
p { margin: 0 0 var(--av-s3); }
a { color: var(--av-accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre { font-family: var(--av-mono); font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--av-line); margin: var(--av-s5) 0; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--av-red);
outline-offset: 2px;
border-radius: var(--av-r-sm);
}
.av-eyebrow {
font-size: var(--av-t-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: .09em; color: var(--av-ink-muted);
}
.av-muted { color: var(--av-ink-muted); }
.av-soft { color: var(--av-ink-soft); }
.av-num { font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
§ 5 TOPBAR + LOGO
-------------------------------------------------------------------------- */
.av-topbar {
display: flex; align-items: center; gap: var(--av-s4);
height: 52px; padding: 0 var(--av-s5);
background: var(--av-chrome-bg); color: var(--av-chrome-ink);
border-bottom: 3px solid var(--av-chrome-rule);
}
.av-topbar__brand {
display: flex; align-items: center; gap: var(--av-s3);
font-weight: 900; font-size: var(--av-t-md); letter-spacing: .1em;
}
.av-topbar__brand img, .av-topbar__brand svg { height: 24px; display: block; }
.av-topbar__brand small {
font-weight: 400; font-size: var(--av-t-sm); letter-spacing: .04em;
opacity: .85; padding-left: var(--av-s3);
border-left: 1px solid var(--av-chrome-ink-dim);
}
.av-topbar__spacer { flex: 1; }
.av-topbar__nav { display: flex; gap: var(--av-s4); font-size: var(--av-t-sm); }
.av-topbar__nav a { color: var(--av-chrome-ink-dim); text-decoration: none; }
.av-topbar__nav a:hover { color: var(--av-chrome-ink); text-decoration: none; }
.av-container { max-width: 1200px; margin: 0 auto; padding: var(--av-s5); }
.av-stack > * + * { margin-top: var(--av-s4); }
/* --------------------------------------------------------------------------
§ 6 TABS
-------------------------------------------------------------------------- */
.av-tabs {
display: flex; gap: var(--av-s1); flex-wrap: wrap;
border-bottom: 1px solid var(--av-line); margin-bottom: var(--av-s5);
}
.av-tab {
appearance: none; border: 0; background: transparent; cursor: pointer;
font: inherit; color: var(--av-ink-soft);
padding: var(--av-s3) var(--av-s4);
border-bottom: 3px solid transparent; margin-bottom: -1px;
display: inline-flex; align-items: center; gap: var(--av-s2);
transition: color .15s, border-color .15s;
}
.av-tab:hover { color: var(--av-ink); }
.av-tab[aria-selected='true'] {
color: var(--av-accent-ink); border-bottom-color: var(--av-red); font-weight: 700;
}
/* --------------------------------------------------------------------------
§ 7 CARD
-------------------------------------------------------------------------- */
.av-card {
background: var(--av-surface);
border: 1px solid var(--av-line);
border-radius: var(--av-r);
padding: var(--av-s5);
box-shadow: var(--av-sh-1);
}
.av-card__head {
display: flex; align-items: center; justify-content: space-between;
gap: var(--av-s4); margin-bottom: var(--av-s4);
}
.av-card__head p { margin: 2px 0 0; font-size: var(--av-t-sm); color: var(--av-ink-muted); }
/* --------------------------------------------------------------------------
§ 8 KNOPPEN
-------------------------------------------------------------------------- */
.av-btn {
appearance: none; cursor: pointer; font: inherit; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; gap: var(--av-s2);
padding: 9px var(--av-s4); border-radius: var(--av-r-sm);
border: 1px solid transparent; background: transparent; color: var(--av-ink);
transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
white-space: nowrap;
}
.av-btn:disabled { opacity: .45; cursor: not-allowed; }
.av-btn--primary { background: var(--av-btn-primary-bg); color: var(--av-btn-primary-ink); }
.av-btn--primary:hover:not(:disabled) { background: var(--av-btn-primary-bg-hover); }
.av-btn--secondary {
background: var(--av-surface); border-color: var(--av-line); color: var(--av-ink);
}
.av-btn--secondary:hover:not(:disabled) { border-color: var(--av-n400); }
.av-btn--ghost { color: var(--av-ink-soft); }
.av-btn--ghost:hover:not(:disabled) { background: var(--av-surface-2); color: var(--av-ink); }
.av-btn--danger { background: var(--av-crit-soft); color: var(--av-crit-ink); }
.av-btn--danger:hover:not(:disabled) { background: var(--av-crit); color: var(--av-white); }
.av-btn--ok { background: var(--av-ok-soft); color: var(--av-ok-ink); }
.av-btn--ok:hover:not(:disabled) { background: var(--av-ok); color: var(--av-white); }
.av-btn--sm { padding: 4px var(--av-s3); font-size: var(--av-t-sm); }
.av-btn--lg { padding: 13px var(--av-s5); font-size: var(--av-t-md); }
.av-btn--block { width: 100%; }
/* --------------------------------------------------------------------------
§ 9 FORMULIEREN
-------------------------------------------------------------------------- */
.av-field { margin-bottom: var(--av-s4); }
.av-label {
display: block; margin-bottom: var(--av-s1);
font-size: var(--av-t-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--av-ink-muted);
}
.av-input, .av-select, .av-textarea {
width: 100%; font: inherit; color: var(--av-ink);
background: var(--av-surface);
border: 1.5px solid var(--av-line); border-radius: var(--av-r-sm);
padding: 9px var(--av-s3); transition: border-color .15s;
}
.av-input::placeholder, .av-textarea::placeholder { color: var(--av-n400); }
.av-input:focus, .av-select:focus, .av-textarea:focus {
outline: none; border-color: var(--av-red);
}
.av-textarea { resize: vertical; min-height: 76px; }
.av-hint { margin-top: var(--av-s1); font-size: var(--av-t-sm); color: var(--av-ink-muted); }
.av-field--error .av-input { border-color: var(--av-crit); }
.av-field--error .av-hint { color: var(--av-crit-ink); }
.av-check { display: flex; align-items: center; gap: var(--av-s2); cursor: pointer; }
.av-check input { width: 16px; height: 16px; accent-color: var(--av-red); }
.av-row { display: flex; gap: var(--av-s4); flex-wrap: wrap; }
.av-row > * { flex: 1; min-width: 190px; }
/* --------------------------------------------------------------------------
§ 10 TABEL
-------------------------------------------------------------------------- */
.av-tablewrap {
border: 1px solid var(--av-line); border-radius: var(--av-r); overflow: auto;
background: var(--av-surface);
}
.av-table { width: 100%; border-collapse: collapse; font-size: var(--av-t-base); }
.av-table th {
position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
background: var(--av-surface-2); color: var(--av-ink-muted);
font-size: var(--av-t-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: .07em;
padding: var(--av-s3) var(--av-s4);
border-bottom: 1px solid var(--av-line);
}
.av-table td {
padding: var(--av-s3) var(--av-s4);
border-bottom: 1px solid var(--av-line-soft);
vertical-align: middle;
}
.av-table tbody tr:last-child td { border-bottom: 0; }
.av-table tbody tr:hover td { background: var(--av-surface-2); }
.av-table .av-td-num { text-align: right; font-variant-numeric: tabular-nums; }
/* --------------------------------------------------------------------------
§ 11 BADGE · PILL · CHIP
-------------------------------------------------------------------------- */
.av-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; border-radius: var(--av-r-full);
font-size: var(--av-t-xs); font-weight: 700; letter-spacing: .02em;
background: var(--av-surface-3); color: var(--av-ink-soft);
}
.av-badge--ok { background: var(--av-ok-soft); color: var(--av-ok-ink); }
.av-badge--warn { background: var(--av-warn-soft); color: var(--av-warn-ink); }
.av-badge--serious { background: var(--av-serious-soft); color: var(--av-serious-ink); }
.av-badge--crit { background: var(--av-crit-soft); color: var(--av-crit-ink); }
.av-badge--info { background: var(--av-info-soft); color: var(--av-info-ink); }
.av-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.av-chip {
display: inline-flex; align-items: center; gap: var(--av-s2);
padding: 4px var(--av-s3); border-radius: var(--av-r-full);
border: 1px solid var(--av-line); background: var(--av-surface);
font-size: var(--av-t-sm); color: var(--av-ink-soft); cursor: pointer;
}
.av-chip:hover { border-color: var(--av-n400); color: var(--av-ink); }
/* aria-pressed = aan/uit-filter · aria-checked = één keuze uit een groep */
.av-chip[aria-pressed='true'],
.av-chip[aria-checked='true'] {
background: var(--av-red); border-color: var(--av-red);
color: var(--av-white); font-weight: 700;
}
/* --------------------------------------------------------------------------
§ 12 STAT-TEGEL
-------------------------------------------------------------------------- */
.av-stats {
display: grid; gap: var(--av-s4);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.av-stat {
background: var(--av-surface); border: 1px solid var(--av-line);
border-radius: var(--av-r); padding: var(--av-s4) var(--av-s5);
box-shadow: var(--av-sh-1);
}
.av-stat__value {
font-size: var(--av-t-2xl); font-weight: 900; line-height: 1.1;
color: var(--av-ink); letter-spacing: -.02em;
/* Een groot losstaand getal krijgt proportionele cijfers. `tabular-nums` geeft elk
cijfer de breedte van een 0 en dat oogt los op displaygrootte; tabellarisch hoort
in tabelkolommen (`.av-num`), niet hier. Deze regel wint bewust van `.av-num`. */
font-variant-numeric: proportional-nums;
}
.av-stat__label {
font-size: var(--av-t-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--av-ink-muted);
}
/* Volgorde is label bóven de waarde. Beide volgordes krijgen dezelfde tussenruimte,
zodat een omgekeerde tegel geen zwevende bovenmarge overhoudt. */
.av-stat__label + .av-stat__value,
.av-stat__value + .av-stat__label { margin-top: var(--av-s1); }
.av-stat__delta { margin-top: var(--av-s2); font-size: var(--av-t-sm); font-weight: 700; }
.av-stat__delta--up { color: var(--av-ok-ink); }
.av-stat__delta--down { color: var(--av-crit-ink); }
/* accentvariant — hoogstens één per scherm */
.av-stat--accent { border-left: 3px solid var(--av-red); }
.av-stat--accent .av-stat__value { color: var(--av-accent-ink); }
/* --------------------------------------------------------------------------
§ 13 BANNER
Status draagt altijd icoon + label, nooit kleur alleen.
-------------------------------------------------------------------------- */
.av-banner {
display: flex; align-items: flex-start; gap: var(--av-s3);
padding: var(--av-s3) var(--av-s4);
border: 1px solid transparent; border-radius: var(--av-r);
font-size: var(--av-t-base);
}
.av-banner__icon { flex: none; font-weight: 900; line-height: 1.4; }
.av-banner__title { font-weight: 700; }
.av-banner--ok { background: var(--av-ok-soft); border-color: var(--av-ok); color: var(--av-ok-ink); }
.av-banner--warn { background: var(--av-warn-soft); border-color: var(--av-warn); color: var(--av-warn-ink); }
.av-banner--serious { background: var(--av-serious-soft); border-color: var(--av-serious); color: var(--av-serious-ink); }
.av-banner--crit { background: var(--av-crit-soft); border-color: var(--av-crit); color: var(--av-crit-ink); }
.av-banner--info { background: var(--av-info-soft); border-color: var(--av-info); color: var(--av-info-ink); }
/* De hoogste urgentie — signalisatietaal, spaarzaam gebruiken.
Vervangt de losse gele knop in het admin-panel. */
.av-alert-bar {
display: flex; align-items: center; justify-content: center; gap: var(--av-s3);
width: 100%; cursor: pointer; font: inherit;
background: repeating-linear-gradient(135deg, #ffe600 0 14px, #f5cf00 14px 28px);
color: var(--av-black); border: 2px solid var(--av-black);
border-radius: var(--av-r-sm); padding: var(--av-s3) var(--av-s4);
font-weight: 900; letter-spacing: .03em;
}
.av-alert-bar:hover { filter: brightness(1.04); }
/* --------------------------------------------------------------------------
§ 14 MODAL
-------------------------------------------------------------------------- */
.av-modal {
position: fixed; inset: 0; z-index: 3000; display: none;
align-items: center; justify-content: center; padding: var(--av-s5);
background: rgba(6, 9, 14, .6); backdrop-filter: blur(4px);
}
.av-modal[open], .av-modal.is-open { display: flex; }
.av-modal__box {
background: var(--av-surface); border: 1px solid var(--av-line);
border-radius: var(--av-r-lg); box-shadow: var(--av-sh-3);
width: min(560px, 100%); max-height: 82vh; overflow: auto;
padding: var(--av-s5) var(--av-s6) var(--av-s6);
}
.av-modal__head { display: flex; justify-content: space-between; align-items: start; gap: var(--av-s4); margin-bottom: var(--av-s4); }
.av-modal__actions { display: flex; gap: var(--av-s2); justify-content: flex-end; margin-top: var(--av-s5); }
/* --------------------------------------------------------------------------
§ 15 KAART-OVERLAYS (Leaflet-schermen)
-------------------------------------------------------------------------- */
.av-map { position: relative; background: var(--av-n950); border-radius: var(--av-r); overflow: hidden; }
/* Kaartscherm: de kaart vult wat de topbar en toolbar overlaten, panelen zweven erover.
Dit patroon staat woordelijk in geoHub en de roadscan-damagemap. `dvh` houdt het
heel op mobiel, waar de adresbalk de viewporthoogte laat springen. */
.av-mapscreen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.av-mapscreen > * { flex: none; }
.av-mapscreen > .av-map { flex: 1 1 auto; min-height: 0; }
.av-map--full { border-radius: 0; }
/* Heb je MEER DAN ÉÉN zwevend paneel, wikkel ze dan hierin. Op een breed scherm
verandert er niets: de wikkel dekt de kaart maar laat muis en aanraking door,
dus de ankers zweven zoals altijd. Onder 640px stapelen ze in DOM-volgorde
onderaan — twee panelen die dezelfde rand delen bedekken elkaar anders altijd,
en absolute positionering kan niet weten hoe hoog de buur is. */
.av-map__anchors { position: absolute; inset: 0; z-index: 1000; pointer-events: none; }
.av-map__anchors > * { pointer-events: auto; }
.av-map__anchor {
position: absolute; z-index: 1000;
max-width: calc(100% - 2 * var(--av-s3));
}
.av-map__anchor--tl { top: var(--av-s3); left: var(--av-s3); }
.av-map__anchor--tr { top: var(--av-s3); right: var(--av-s3); }
.av-map__anchor--bl { bottom: var(--av-s3); left: var(--av-s3); }
.av-map__anchor--br { bottom: var(--av-s3); right: var(--av-s3); }
.av-map__anchor--bc { bottom: var(--av-s3); left: 50%; transform: translateX(-50%); }
@media (max-width: 640px) {
/* Gewikkeld: één onderblad, panelen onder elkaar in DOM-volgorde. De hoek-
modifiers doen hier niets meer — op een telefoon is er maar één zinnige plek. */
.av-map__anchors {
inset: auto 0 0 0; pointer-events: auto;
display: flex; flex-direction: column; gap: var(--av-s2);
padding: var(--av-s2); max-height: 60%; overflow-y: auto;
}
.av-map__anchors > .av-map__anchor {
position: static; transform: none;
max-width: none; max-height: none; overflow: visible;
}
/* Ongewikkeld werkt alleen met ÉÉN paneel: het pakt de volle breedte en blijft
op zijn eigen rand. Twee ankers zonder wikkel stapelen op dezelfde plek —
gebruik dan .av-map__anchors. */
.av-map__anchor { max-width: none; max-height: 45%; overflow: auto; }
.av-map__anchor--tl, .av-map__anchor--tr { left: var(--av-s2); right: var(--av-s2); }
.av-map__anchor--bl, .av-map__anchor--br,
.av-map__anchor--bc { left: var(--av-s2); right: var(--av-s2); transform: none; }
}
.av-panel {
background: var(--av-surface); border: 1px solid var(--av-line);
border-radius: var(--av-r); box-shadow: var(--av-sh-2);
padding: var(--av-s4); font-size: var(--av-t-sm);
}
.av-panel--float { position: absolute; z-index: 1000; }
.av-kv { display: flex; justify-content: space-between; gap: var(--av-s4); padding: 3px 0; }
.av-kv + .av-kv { border-top: 1px dashed var(--av-line); }
.av-kv > :first-child { color: var(--av-ink-muted); }
.av-legend { display: grid; gap: 5px; }
.av-legend__item { display: flex; align-items: center; gap: var(--av-s2); color: var(--av-ink-soft); font-size: var(--av-t-sm); }
/* De legendemark spiegelt de geometrie op de kaart: lijn voor lijnen, punt voor
punten, vlak voor polygonen. Kleur komt uit `color` op de mark zelf, zodat één
API zowel vullingen als randen aanstuurt:
*/
.av-legend__mark { flex: none; display: inline-block; box-sizing: border-box; }
.av-legend__mark--line { width: 18px; height: 4px; border-radius: 2px; background: currentColor; }
/* Gestreepte lijn — secundaire codering wanneer kleur alleen niet volstaat.
Stem de streeplengte af op de kaart: --av-dash-aan/--av-dash-uit spiegelen
Leaflets `dashArray`, zodat de legende toont wat er getekend wordt. */
.av-legend__mark--line-dashed {
width: 18px; height: 4px; border-radius: 2px;
background-image: repeating-linear-gradient(90deg,
currentColor 0 var(--av-dash-aan, 5px),
transparent var(--av-dash-aan, 5px) calc(var(--av-dash-aan, 5px) + var(--av-dash-uit, 4px)));
}
.av-legend__mark--point { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.av-legend__mark--point-open { width: 10px; height: 10px; border-radius: 50%; background: transparent;
border: 2px solid currentColor; }
.av-legend__mark--area { width: 18px; height: 12px; border-radius: 3px;
border: 2px solid currentColor;
background: currentColor; /* terugval */
background: color-mix(in srgb, currentColor 25%, transparent); }
/* Bestaande namen blijven werken — kleur via `background`, zoals nu in gebruik. */
.av-legend__swatch { width: 18px; height: 4px; border-radius: 2px; flex: none; }
.av-legend__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* --------------------------------------------------------------------------
§ 16 BESTANDEN — dropzone en rij
-------------------------------------------------------------------------- */
.av-drop {
border: 2px dashed var(--av-line); border-radius: var(--av-r);
background: var(--av-surface-2); padding: var(--av-s6) var(--av-s5);
text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.av-drop:hover, .av-drop.is-over { border-color: var(--av-red); background: var(--av-crit-soft); }
.av-drop__title { font-weight: 700; margin-top: var(--av-s2); }
/* Het sleepvak centreert zijn eigen tekst; een lijst met opgenomen bestanden
erin is gewone inhoud en lijnt links uit. */
.av-drop .av-filerow { text-align: left; }
.av-filerow { display: flex; align-items: center; gap: var(--av-s3); padding: var(--av-s3) 0; }
.av-filerow + .av-filerow { border-top: 1px solid var(--av-line-soft); }
.av-filerow__icon {
width: 40px; height: 40px; flex: none; border-radius: var(--av-r-sm);
display: grid; place-items: center;
background: var(--av-surface-3); color: var(--av-ink-soft); font-weight: 700; font-size: var(--av-t-xs);
}
.av-filerow__meta { flex: 1; min-width: 0; }
.av-filerow__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-filerow__sub { font-size: var(--av-t-sm); color: var(--av-ink-muted); }
.av-progress { width: 100%; height: 6px; border-radius: var(--av-r-full); background: var(--av-surface-3); overflow: hidden; }
.av-progress__bar { height: 100%; background: var(--av-red); border-radius: var(--av-r-full); }
/* --------------------------------------------------------------------------
§ 17 LEGE TOESTAND
-------------------------------------------------------------------------- */
.av-empty {
text-align: center; padding: var(--av-s7) var(--av-s5);
color: var(--av-ink-muted); border: 1px dashed var(--av-line);
border-radius: var(--av-r); background: var(--av-surface-2);
}
.av-empty__title { font-weight: 700; color: var(--av-ink); margin-bottom: var(--av-s1); }
/* --------------------------------------------------------------------------
§ 18 TOOLBAR — de filterrij boven een kaart, tabel of dashboard
Eén rij, links uitgelijnd, boven de inhoud die hij afbakent — nooit in een
kaart of paneel. Neutraliseert de formulierdefaults, die voor gestapelde
formulieren zijn gemaakt en in een rij verkeerd uitpakken.
Staat bewust achteraan het bestand: deze regels moeten § 9 overrulen.
-------------------------------------------------------------------------- */
.av-toolbar {
display: flex; flex-wrap: wrap; align-items: center;
gap: var(--av-s3); padding: var(--av-s3) var(--av-s5);
}
.av-toolbar--bordered { border-bottom: 1px solid var(--av-line); }
.av-toolbar__grow { flex: 1 1 auto; }
.av-toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-s2); }
.av-toolbar .av-label { margin: 0; }
.av-toolbar .av-field { margin-bottom: 0; }
.av-toolbar .av-input,
.av-toolbar .av-select { width: auto; max-width: 16rem; }
@media (max-width: 640px) {
.av-toolbar { padding: var(--av-s2) var(--av-s3); gap: var(--av-s2); }
.av-toolbar .av-input,
.av-toolbar .av-select { flex: 1 1 100%; max-width: 100%; }
}
/* --------------------------------------------------------------------------
§ 19 PERIODEKIEZER
Eén keuze uit een korte lijst presets. Gebruik `role="radiogroup"` met
`aria-checked` op de knoppen — chips met `aria-pressed` zijn aan/uit-filters
en lezen als meervoudige keuze.
Meer dan ~6 presets of een vrije datumreeks nodig? Dan is dit het verkeerde
component; dat wordt een popover met presetrijen (nog niet gebouwd).
-------------------------------------------------------------------------- */
.av-periodpicker { display: flex; flex-wrap: wrap; gap: var(--av-s2); }
/* Aaneengesloten variant: compacter en onmiskenbaar één-uit-veel. */
.av-periodpicker--segmented {
gap: 0; flex-wrap: nowrap; max-width: 100%; overflow-x: auto;
background: var(--av-surface); border: 1px solid var(--av-line);
border-radius: var(--av-r-full);
}
.av-periodpicker--segmented .av-chip {
border: 0; border-radius: 0; background: transparent; white-space: nowrap;
}
.av-periodpicker--segmented .av-chip + .av-chip { border-left: 1px solid var(--av-line); }
.av-periodpicker--segmented .av-chip[aria-checked='true'],
.av-periodpicker--segmented .av-chip[aria-pressed='true'] { background: var(--av-red); }
/* --------------------------------------------------------------------------
§ 20 KLEIN GEREEDSCHAP
-------------------------------------------------------------------------- */
/* Rooster dat vanzelf kolommen kiest. Stel de minimumbreedte in met
--av-grid-min; flexbox laat ongelijke vakken uitlopen, grid niet. */
.av-grid {
display: grid; gap: var(--av-s4);
grid-template-columns: repeat(auto-fit, minmax(var(--av-grid-min, 240px), 1fr));
}
/* Rij kleine knoppen ín de inhoud — een tabelcel, een kaartkop. Niet te
verwarren met .av-toolbar, die hoort bóven de inhoud die hij afbakent. */
.av-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--av-s2); }
/* Schuifregelaar — dekking van een laag, een tijdas. */
.av-range {
-webkit-appearance: none; appearance: none;
width: 100%; height: 18px; background: transparent; cursor: pointer;
}
.av-range::-webkit-slider-runnable-track {
height: 4px; border-radius: var(--av-r-full); background: var(--av-surface-3);
}
.av-range::-moz-range-track {
height: 4px; border-radius: var(--av-r-full); background: var(--av-surface-3);
}
.av-range::-webkit-slider-thumb {
-webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px;
border-radius: 50%; background: var(--av-red); border: 2px solid var(--av-surface);
}
.av-range::-moz-range-thumb {
width: 14px; height: 14px; border: 2px solid var(--av-surface);
border-radius: 50%; background: var(--av-red);
}
.av-range:disabled { opacity: .45; cursor: not-allowed; }
/* taalkeuze NL/EN/FR in de rode topbar (extern portaal) */
.langsw { display: inline-flex; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; overflow: hidden; }
.langsw__b { border: 0; background: transparent; color: #fff; font: 600 12px/1 inherit; padding: .4rem .55rem; cursor: pointer; opacity: .8; }
.langsw__b + .langsw__b { border-left: 1px solid rgba(255,255,255,.4); }
.langsw__b:hover { opacity: 1; }
.langsw__b[aria-pressed="true"] { background: #fff; color: var(--av-red, #E3000B); opacity: 1; }