:root { color-scheme: light; --ink: #1c1917; --muted: #57534e; --line: #e7e5e4; --paper: #f5f5f4; --card: #fff; --accent: #1d4e89; --ok: #166534; --warn: #9a3412; --bad: #991b1b; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 "Segoe UI", sans-serif; color: var(--ink); background: #fff; }
header { display: flex; gap: .8rem 1rem; align-items: center; padding: .8rem 1.2rem; background: #292524; color: #faf7f2; flex-wrap: wrap; }
.menu-knop { display: none; }
.kop-extra { display: flex; gap: .8rem 1rem; align-items: center; flex: 1; flex-wrap: wrap; }
html.smal .menu-knop { display: inline-flex; align-items: center; min-height: 44px; }
html.smal header .kop-extra { display: none; }
html.smal header.menu-open .kop-extra { display: flex; width: 100%; }
header a, header summary { color: inherit; text-decoration: none; }
header nav { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
header nav a, header nav summary { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .7rem; cursor: pointer; }
header nav details.more { position: relative; }
header nav details.more summary { list-style: none; }
header nav details.more summary::-webkit-details-marker { display: none; }
header nav details.more[open] { display: flex; flex-direction: column; align-items: stretch; background: #1c1917; border-radius: 8px; }
header nav details.more[open] a { display: flex; }
header .spacer { flex: 1; }
header form { margin: 0; }
header form.zoek { display: flex; flex: 1; gap: .4rem; align-items: center; min-width: min(100%, 18rem); }
header form.zoek label { margin: 0; }
header form.zoek input { flex: 1; min-width: 8rem; background: #fff; color: var(--ink); }
form.lijst-zoek { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: .8rem 0; }
form.lijst-zoek label { flex: 1 1 100%; margin: 0; }
form.lijst-zoek input { flex: 1; min-width: 12rem; }
ul.hits { list-style: none; padding: 0; margin: .4rem 0 1rem; }
ul.hits li { border-bottom: 1px solid var(--line); padding: .45rem 0; }
ul.hits a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 650; }
main { max-width: 1440px; margin: 0 auto; padding: 1rem 1.2rem; }
h1 { font-size: 1.5rem; margin: 0 0 .4rem; }
h2 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
a { color: var(--accent); }
main a { min-height: 44px; display: inline-flex; align-items: center; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; margin: .8rem 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .55rem .45rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 650; }
label { display: block; margin: .55rem 0 .15rem; }
input, select, textarea, button { font: inherit; padding: .55rem .7rem; border: 2px solid #5c564c; border-radius: 6px; min-height: 44px; max-width: 100%; }
textarea { width: 100%; min-height: 5rem; }
button, .button { background: var(--accent); color: white; border: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem .9rem; }
.secondary { background: #44403c; }
button.gevaar { background: #8f1d1d; color: #fff; }
tr:target { background: #fff4cc; outline: 3px solid #6b4e16; }
input[readonly], textarea[readonly] { background: #f3f0e8; }
.badge { display: inline-block; border-radius: 999px; padding: .15rem .6rem; background: #e7e5e4; white-space: normal; max-width: 100%; }
.as { display: flex; justify-content: space-between; gap: .5rem; margin: .15rem 0 .8rem; font-size: 1rem; }
.as span { font-size: 1rem; line-height: 1.3; }
.ok { background: #dcfce7; color: var(--ok); }
.warn { background: #fef3c7; color: var(--warn); }
.bad { background: #fee2e2; color: var(--bad); }
.muted { color: var(--muted); }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.grow { flex: 1; }
pre { white-space: pre-wrap; word-break: break-word; background: #f5f5f4; padding: .6rem; border-radius: 6px; font-size: 1rem; }
.warning { border-left: 4px solid var(--warn); padding-left: .7rem; }
.error { color: var(--bad); }
nav.tabs { display: flex; gap: .6rem; flex-wrap: wrap; margin: .6rem 0; }
nav.tabs a { text-decoration: none; }
dl.facts { display: grid; grid-template-columns: 11rem 1fr; gap: .2rem .8rem; margin: .4rem 0 1rem; }
dl.facts dt { color: var(--muted); }
.pager { display: flex; gap: .8rem; align-items: center; margin-top: .6rem; }
.kwh { font-variant-numeric: tabular-nums; }
.signal { display: flex; gap: 1rem; align-items: center; margin: .3rem 0 .6rem; }
.signal-value { font-size: 1.45rem; margin: 0; }
.bars { display: flex; gap: 3px; align-items: flex-end; height: 32px; }
.bars i { display: block; width: 8px; background: #d6d0c6; border-radius: 2px; }
.bars i:nth-child(1) { height: 8px; }
.bars i:nth-child(2) { height: 14px; }
.bars i:nth-child(3) { height: 20px; }
.bars i:nth-child(4) { height: 28px; }
.bars i.on { background: var(--ok); }
.bars.slecht i.on, .bars.onbekend i.on { background: var(--bad); }
.bars.matig i.on { background: var(--warn); }
.spark { width: 100%; height: auto; aspect-ratio: 320 / 72; background: #f5f5f4; border-radius: 6px; display: block; }
.period { display: flex; gap: .4rem; margin: .2rem 0 .6rem; flex-wrap: wrap; }
.period a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 .7rem; }
.period a.on { font-weight: 700; text-decoration: underline; }
.chart { width: 100%; height: auto; aspect-ratio: 320 / 96; background: #f5f5f4; border-radius: 6px; display: block; }
.chart .axis { stroke: #e4ddd0; stroke-width: 1; }
.chart text { fill: #5c564c; font-family: "Segoe UI", sans-serif; }
.chart rect.kwh { fill: #9a3412; }
.chart rect.up { fill: #166534; }
.chart polyline { fill: none; stroke: #9a3412; stroke-width: 2; }
.chart circle { fill: #9a3412; }
.meter { height: 8px; background: #e7e5e4; border-radius: 99px; overflow: hidden; max-width: 420px; margin: .4rem 0; }
.meter > span { display: block; height: 100%; background: var(--ok); }
.meter.warn > span { background: var(--warn); }
.meter.bad > span { background: var(--bad); }
.toggles { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
tr.diff td { background: #fef3c7; box-shadow: inset 0 0 0 1px #92400e; }
tr.diff td:first-child { box-shadow: inset 6px 0 0 #92400e; }
.diffmark { font-weight: 700; }
.notice { border-radius: 10px; padding: .8rem 1rem; margin: .8rem 0; border: 2px solid #5c564c; }
.notice.ok { background: #dcfce7; color: #14532d; border-color: #166534; }
.eenmalig { font-size: 1.25rem; letter-spacing: .03em; word-break: break-all; }
.notice.bad { background: #fee2e2; color: #7f1d1d; border-color: #991b1b; }
.notice.bezig { background: #e0e7ff; color: #1e3a8a; border-color: #1e3a8a; }
.notice.letop { background: #fef3c7; color: #78350f; border-color: #92400e; }
.status-hero { border-radius: 12px; padding: 1.2rem 1.4rem; margin: .8rem 0; border: 3px solid #5c564c; }
.status-hero h2 { font-size: 2rem; margin: 0 0 .3rem; }
.status-hero .data-line, .status-hero .data-kort { font-size: 1rem; font-weight: 500; margin: .4rem 0 0; }
.status-hero .status-kicker { margin: 0; font-weight: 650; }
.status-hero.ok { background: #dcfce7; border-color: #166534; }
.status-hero.charge { background: #dbeafe; border-color: #1e3a8a; }
.status-hero.fault, .status-hero.offline { background: #fee2e2; border-color: #991b1b; }
.status-hero.warn { background: #fef3c7; border-color: #92400e; }
.command-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin: .6rem 0 1rem; }
footer { margin: 1.5rem 0; }
details.card > summary, details.advanced > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 650; font-size: 1.15rem; }
table.home tbody tr { position: relative; }
table.home a.rowlink { min-height: 44px; display: inline-flex; align-items: center; }
table.home a.rowlink::after { content: ""; position: absolute; inset: 0; }
.pager a { min-height: 44px; display: inline-flex; align-items: center; }
.scroll { overflow-x: auto; }
.badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.charge { background: #dbeafe; color: #1e3a8a; }
.hint { color: var(--muted); margin: .2rem 0 0; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.field label { margin: 0 0 .25rem; }
.field input, .field select, .field textarea, .stack-form input, .stack-form select, .stack-form textarea { width: 100%; min-height: 44px; }
.field input[type="checkbox"], .stack-form input[type="checkbox"], label input[type="checkbox"] { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
label:has(input[type="checkbox"]) { min-height: 44px; display: flex; align-items: center; gap: .6rem; }
.field .value { min-height: 44px; margin: 0; padding: .4rem .55rem; background: #f5f5f4; border: 2px solid #5c564c; border-radius: 6px; display: flex; align-items: center; overflow-wrap: anywhere; }
.span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .8rem; }
.form-actions button { min-height: 44px; }
.copyline { display: flex; gap: .5rem; align-items: center; margin: .35rem 0; }
.copyline code { flex: 1; min-width: 0; padding: .45rem .55rem; background: #f5f5f4; border: 2px solid #5c564c; border-radius: 6px; overflow-wrap: anywhere; }
.copyline button { flex: 0 0 auto; min-height: 44px; }
.stack-form { max-width: 36rem; }
.stack-form .field { margin: .7rem 0; }
details.advanced summary { cursor: pointer; font-weight: 650; }
details.advanced .fields { margin-top: .8rem; }
table.connectors { table-layout: fixed; }
table.connectors th:nth-child(1) { width: 3rem; }
table.connectors th:nth-child(5) { width: 9rem; }
table.connectors input { width: 100%; min-height: 44px; }
label, .hint, th, .badge, .muted, pre, code, table.stack td::before { font-size: 1rem; }
td, .value, pre { overflow-wrap: anywhere; }
nav.tabs a, nav.tabs summary { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .35rem; }
nav.tabs details.more summary { cursor: pointer; list-style: none; }
nav.tabs details.more summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
  header nav { width: 100%; gap: .7rem 1rem; }
  header form.zoek { width: 100%; }
  header .spacer { display: none; }
  main { padding: .8rem; }
  .fields { grid-template-columns: 1fr; }
  .form-actions button, .form-actions .button { width: 100%; text-align: center; }
  .copyline { flex-direction: column; align-items: stretch; }
  table.stack thead { display: none; }
  table.stack tr { display: block; border: 1px solid var(--line); border-radius: 8px; margin: .55rem 0; padding: .35rem .7rem; }
  table.stack td { display: block; border: 0; padding: .4rem 0; }
  table.stack td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 1rem; }
  table.home td.zelfde-status { display: none; }
  table.connectors { table-layout: auto; }
  dl.facts { grid-template-columns: 1fr; }
  .paal-kop { flex-direction: column; }
  .paal-knoppen details.bevestig-knop { display: block; }
  .paal-knoppen details.bevestig-knop > summary,
  details.wat-nu > summary,
  details.meer-acties > summary { width: 100%; }
  .paal-fig { width: 64px; }
  .paal-kaart { padding: .65rem; }
  .paal-kaart p { margin: .15rem 0; }
  .paal-kop { gap: .45rem; }
  .paal-status .badge { font-size: 1.45rem; }
}
body.dashboard main { max-width: 1680px; }
.dash-kop { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }
.dash-kop h1 { margin: 0; }
.samenvatting { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; font-size: 1.35rem; font-weight: 650; border-radius: 12px; padding: 1rem 1.2rem; margin: .8rem 0; border: 3px solid #166534; }
.samenvatting.prima { background: #dcfce7; color: #14532d; }
.samenvatting.letop { background: #fee2e2; color: #7f1d1d; border-color: #991b1b; }
.samenvatting .button { min-height: 48px; }
.paal-raster { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) {
  .paal-raster { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1600px) {
  .paal-raster { grid-template-columns: 1fr 1fr 1fr; }
}
.paal-kaart { border-width: 3px; padding: .7rem .9rem; }
.paal-kaart p { margin: .12rem 0; }
.paal-kaart.goed, .paal-kaart.charge, .paal-kaart.fault, .paal-kaart.offline, .paal-kaart.warn { background: #fff; border-color: var(--line); color: var(--ink); }
.paal-kop { display: flex; gap: .6rem; align-items: flex-start; }
.paal-koptekst { min-width: 0; flex: 1; }
.paal-koptekst h2 { font-size: 1.45rem; margin: 0 0 .2rem; }
.status-kicker { margin: 0; }
.paal-status { margin: .1rem 0 .35rem; }
.paal-status .badge { font-size: 1.45rem; font-weight: 750; line-height: 1.2; padding: .25rem .7rem; }
.paal-zin { font-size: 1.15rem; margin: .2rem 0; }
.paal-actie { font-size: 1.2rem; font-weight: 650; min-height: 1.6rem; }
.paal-fig { width: 72px; height: auto; flex: 0 0 auto; }
.paal-fig .paal-body { fill: #57534e; }
.paal-fig .paal-scherm { fill: #fffdf8; }
.paal-fig .paal-lamp { fill: #fffdf8; stroke: #1c1915; stroke-width: 2; }
.paal-fig .paal-voet, .paal-fig .paal-plug { fill: #44403c; }
.paal-fig .paal-kabel { fill: none; stroke: #44403c; stroke-width: 6; stroke-linecap: round; }
.paal-kaart.goed .paal-body { fill: #166534; }
.paal-kaart.charge .paal-body { fill: #1e3a8a; }
.paal-kaart.fault .paal-body { fill: #991b1b; }
.paal-kaart.offline .paal-body { fill: #78716c; }
.paal-kaart.warn .paal-body { fill: #92400e; }
.lader-raster { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: .6rem 0; }
.lader-kaart { display: flex; gap: .75rem; align-items: flex-start; border: 3px solid #57534e; border-radius: 12px; padding: .7rem; background: #fff; }
.lader-kaart h2, .lader-kaart h3 { margin: 0 0 .15rem; font-size: 1.25rem; }
.lader-kaart p { margin: .15rem 0; }
.lader-fig { width: 56px; height: auto; flex: 0 0 auto; }
.lader-fig .lader-kast { fill: #57534e; }
.lader-fig .lader-lamp { fill: #fffdf8; stroke: #1c1915; stroke-width: 2; }
.lader-fig .lader-plug { fill: #44403c; }
.lader-kaart.ok .lader-kast, .lader-kaart.goed .lader-kast { fill: #166534; }
.lader-kaart.charge .lader-kast { fill: #1e3a8a; }
.lader-kaart.charge .lader-lamp { fill: #93c5fd; }
.lader-kaart.fault .lader-kast { fill: #991b1b; }
.lader-kaart.fault .lader-lamp { fill: #fecaca; }
.lader-kaart.warn .lader-kast { fill: #92400e; }
.lader-kaart.warn .lader-lamp { fill: #fde68a; }
.lader-kaart.offline .lader-kast { fill: #78716c; }
.lader-kaart.ok, .lader-kaart.goed { border-color: #166534; }
.lader-kaart.charge { border-color: #1e3a8a; }
.lader-kaart.fault { border-color: #991b1b; }
.lader-kaart.warn { border-color: #92400e; }
@media (min-width: 720px) {
  .lader-raster { grid-template-columns: 1fr 1fr; }
}
.paal-kaart.goed .paal-lamp { fill: #dcfce7; }
.paal-kaart.charge .paal-lamp { fill: #93c5fd; animation: paal-puls 1.2s ease-in-out infinite; }
.paal-kaart.fault .paal-lamp { fill: #fecaca; }
.paal-kaart.warn .paal-lamp { fill: #fde68a; }
.badge.offline { background: #e7e5e4; color: #292524; }
.data-line, .data-kort { font-size: 1rem; font-weight: 500; }
.paal-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin: .8rem 0; align-items: flex-start; }
details.bevestig-knop { display: inline-block; max-width: 100%; }
details.bevestig-knop > summary,
details.wat-nu > summary { list-style: none; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .9rem; border-radius: 6px; cursor: pointer; font-weight: 650; font-size: 1.05rem; background: var(--accent); color: #fff; }
details.bevestig-knop > summary::-webkit-details-marker,
details.wat-nu > summary::-webkit-details-marker { display: none; }
details.bevestig-knop.secondary > summary,
details.wat-nu > summary { background: #44403c; }
details.bevestig-knop.gevaar > summary { background: #8f1d1d; }
details.bevestig-knop .bevestig-vak,
details.wat-nu[open] { margin-top: .6rem; }
details.wat-nu[open] > summary { margin-bottom: .6rem; }
.bevestig-vak { border: 3px solid #1c1915; background: #fffdf8; color: #1c1915; border-radius: 10px; padding: 1rem; min-width: min(100%, 22rem); }
.bevestig-vak p { font-size: 1.2rem; }
details.wat-nu ol, details.wat-nu p { font-size: 1.15rem; }
details.wat-nu ol { margin: 0; padding-left: 1.4rem; }
details.wat-nu li { margin: .35rem 0; }
details.meer-acties { margin: .35rem 0 .8rem; }
details.meer-acties > summary { list-style: none; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .9rem; border-radius: 6px; cursor: pointer; font-weight: 650; font-size: 1.05rem; background: #44403c; color: #fff; }
details.meer-acties > summary::-webkit-details-marker { display: none; }
#grafieken details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 1.15rem; font-weight: 650; }
.weg { display: none !important; }
details:not([open]) > :not(summary) { display: none !important; }
.uplot-host { width: 100%; min-height: 4rem; margin: .4rem 0 .2rem; }
.grafiek-keuze { font-size: 1.2rem; font-weight: 650; min-height: 2.8rem; margin: .2rem 0 .8rem; }
.legend-woorden { display: flex; flex-wrap: wrap; gap: .8rem; font-weight: 650; }
.swatch::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .4rem; vertical-align: -1px; border-radius: 50%; border: 0; }
.swatch.verbonden::before { background: #166534; }
.swatch.offline::before { background: #a8a29e; }
.swatch.storing::before { background: #991b1b; }
.swatch.laden::before { background: #9a3412; }
.swatch.eerder::before { background: #a8a29e; }
.uplot .u-legend .u-series:first-child { display: none; }
.swatch.herstart::before { background: #1c1915; }
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin: .4rem 0 1rem; }
.tegel { background: var(--card); border: 2px solid #5c564c; border-radius: 12px; padding: .9rem 1rem; }
.tegel-label { margin: 0; color: var(--muted); font-size: 1rem; font-weight: 650; }
.tegel-getal { margin: .15rem 0 0; font-size: 1.85rem; font-weight: 750; line-height: 1.2; }
.tegel-zin { font-size: 1.35rem; }
.tegel-sub { margin: .25rem 0 0; font-size: 1rem; }
.grafiek-met-as { display: grid; grid-template-columns: 5.5rem 1fr; gap: .45rem; align-items: start; }
.y-as { display: flex; flex-direction: column; justify-content: space-between; min-height: 4.5rem; text-align: right; color: var(--muted); font-size: 1rem; padding-top: .2rem; }
.as-eenheid { margin: .15rem 0 .6rem; font-weight: 650; }
.tijdlijn-wrap { position: relative; margin: .6rem 0 .8rem; }
.tijdlijn { display: flex; height: 36px; border: 2px solid #1c1915; border-radius: 8px; overflow: hidden; background: #e7e5e4; }
.tijdlijn span { display: block; height: 100%; min-width: 2px; }
.tl-offline, .tl-verbonden, .tl-laden, .tl-storing { background: #d6d3d1; }
.tijdlijn-wrap .herstart { position: absolute; top: -6px; width: 4px; height: 48px; background: #1c1915; margin-left: -2px; }
form.lijst-zoek .field { flex: 1 1 12rem; margin: 0; }
form.lijst-zoek .field label { margin: 0 0 .25rem; }
@media (max-width: 720px) {
  .grafiek-met-as { grid-template-columns: 4.2rem 1fr; }
  .tegel-getal { font-size: 1.55rem; }
}
.uplot .u-legend { font: 18px/1.4 "Segoe UI", sans-serif !important; color: #1c1915; }
#grafieken h3 { font-size: 1.25rem; margin: 1rem 0 .3rem; }
#grafieken .period button { font: inherit; min-height: 48px; background: #44403c; color: #fff; }
#grafieken .period button.on { background: var(--accent); text-decoration: underline; }
@keyframes paal-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .paal-kaart.charge .paal-lamp { animation: none; }
}
:focus-visible { outline: 3px solid #1c1915; outline-offset: 2px; }

header { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); flex-wrap: nowrap; }
.kop-extra { flex-wrap: nowrap; }
header form.zoek { flex: 0 1 16rem; min-width: 12rem; }
header nav a { padding: 0 .4rem; }
[hidden] { display: none !important; }
.tegel-sub { display: none; }
.lader-fig { display: none; }
.lader-kaart.ok .status-stip { background: #15803d; }
.lader-kaart.charge .status-stip { background: #1d4ed8; }
.lader-kaart.warn .status-stip { background: #c2410c; }
.lader-kaart.fault .status-stip, .lader-kaart.offline .status-stip { background: #b91c1c; }
.lader-kaart, .lader-kaart.fault, .lader-kaart.charge, .lader-kaart.ok, .lader-kaart.offline, .lader-kaart.warn { background: #fff; border: 1px solid var(--line); color: var(--ink); }
button.gevaar, a.button.gevaar, details.bevestig-knop.gevaar > summary { background: #44403c; color: #fff; }
header a, header summary { color: var(--ink); }
.subbalk { display: flex; gap: .4rem 1rem; flex-wrap: wrap; padding: .35rem 1.2rem; background: #fafaf9; border-bottom: 1px solid var(--line); }
.subbalk a { min-height: 36px; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.subbalk a:hover { color: var(--accent); }
.badge { background: transparent; color: var(--ink); border-radius: 0; padding: 0 0 0 0; }
.badge.ok::before, .badge.bad::before, .badge.warn::before, .badge.charge::before, .badge.offline::before, .badge.grijs::before { content: ""; display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.badge.ok::before { background: #15803d; }
.badge.charge::before { background: #1d4ed8; }
.badge.warn::before { background: #c2410c; }
.badge.grijs::before { background: #a8a29e; }
.badge.bad::before, .badge.offline::before { background: #b91c1c; }
.notice.grijs { background: #f5f5f4; color: #44403c; border-color: #a8a29e; }
button.vraag { min-width: 2rem; min-height: 2rem; padding: 0 .45rem; background: transparent; color: var(--muted); border: 1px solid var(--line); }
button:disabled, .knoppenrij button:disabled { background: #e7e5e4; color: #a8a29e; border-color: #d6d3d1; }
.status-hero, .paal-kaart, .samenvatting, .notice { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 0; }
.status-hero.ok, .status-hero.charge, .status-hero.fault, .status-hero.offline, .status-hero.warn, .samenvatting.prima, .samenvatting.letop { background: #fff; color: var(--ink); border-color: var(--line); }
.stip { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: #a8a29e; vertical-align: middle; }
.stip.groen { background: #15803d; }
.stip.blauw { background: #1d4ed8; }
.stip.licht { background: #4ade80; }
.stip.oranje { background: #c2410c; }
.stip.rood { background: #b91c1c; }
.stip.grijs { background: #a8a29e; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: end; margin: .6rem 0; }
.filters label { margin: 0; font-size: .95rem; }
.filters input, .filters select, .filters button { min-height: 36px; }
.tabbalk { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin: .4rem 0 .8rem; }
.tabbalk a, .tabbalk button { background: transparent; color: var(--ink); border: 0; border-bottom: 2px solid transparent; border-radius: 0; min-height: 36px; padding: .3rem .7rem; text-decoration: none; }
.tabbalk a.aan, .tabbalk button.aan { border-bottom-color: var(--accent); color: var(--accent); font-weight: 650; }
table.lijst { background: #fff; }
table.lijst th a { color: var(--muted); text-decoration: none; min-height: 0; }
table.lijst td .sub, .sub { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }
tr.gedempt { color: #a8a29e; }
tr[data-href] { cursor: pointer; }
.connector-regel { line-height: 1.35; }
.paal-boven { display: grid; grid-template-columns: 1.2fr .9fr 1fr; gap: .8rem; align-items: start; }
.blok, .feiten { margin: 0; }
dl.feiten { display: grid; grid-template-columns: 8.5rem 1fr; gap: .15rem .6rem; }
dl.feiten dt { color: var(--muted); }
.knoppenrij { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.kaart { height: 420px; border: 1px solid var(--line); }
.kaart.klein { height: 280px; }
.marker-stip { background: transparent; border: 0; }
.marker-stip span { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #444; }
body.tab-gezet [data-tab] { display: none; }
body.tab-gezet [data-tab].tab-aan { display: block; }
body.testing [data-knop="start"] > summary { background: #e7e5e4; color: #44403c; }
.notice.ok, .notice.bad, .notice.bezig, .notice.letop, .notice.grijs { background: #fff; color: var(--ink); border-color: var(--line); }
.notice.ok::before, .notice.bad::before, .notice.bezig::before, .notice.letop::before, .notice.grijs::before { content: ""; display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.notice.ok::before { background: #15803d; }
.notice.bad::before { background: #b91c1c; }
.notice.letop::before { background: #c2410c; }
.notice.bezig::before, .notice.grijs::before { background: #a8a29e; }
.status-hero .status-stip { background: #a8a29e; }
.status-hero.ok .status-stip { background: #15803d; }
.status-hero.charge .status-stip { background: #1d4ed8; }
.status-hero.fault .status-stip, .status-hero.offline .status-stip { background: #b91c1c; }
.status-hero.warn .status-stip { background: #c2410c; }
.filters button, .filters a.button { background: var(--accent); color: #fff; border: 0; }
th.smal, td.smal { width: 4.5rem; white-space: nowrap; }
@media (max-width: 480px) {
  .tabbalk { flex-wrap: wrap; overflow: visible; }
  .tabbalk a, .tabbalk button { flex: 0 1 auto; white-space: normal; }
}
details.advanced > summary.help { width: 1.4rem; height: 1.4rem; min-height: 1.4rem; border-radius: 50%; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; padding: 0; background: #fff; color: var(--muted); }
.assemble { display: grid; grid-template-columns: 1fr 16rem; gap: 1rem; }
.labels { display: flex; flex-wrap: wrap; gap: 1rem; }
.label-a6 { width: 280px; min-height: 396px; border: 1px solid var(--line); padding: .8rem; background: #fff; }
ul.qa { list-style: none; padding: 0; }
body.dashboard #grafiek-sessies, body.dashboard #grafiek-status, body.dashboard #grafieken details, body.dashboard #grafieken h3:nth-of-type(n+2) { display: none; }
@media (max-width: 900px) {
  .paal-boven, .assemble { grid-template-columns: 1fr; }
  .kaart { height: 280px; }
}