/* Koppelingen en status (huid, ronde 2): storingen bovenaan als urgentielaag, dan per koppeling één kaart met
   status als ring, laatste sync, gelezen en geschreven, de schakelaars als stand, en de instellingen achter de
   kaart. Alleen tokens van de bouwdoos. */
.kp { display: grid; gap: var(--a4); margin: var(--a3) 0 var(--a4); }
.kp-kop { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; margin-bottom: var(--a3); }
.kp-kop h2 { margin: 0; font-size: var(--tekst-titel); font-weight: 700; color: var(--tekst); }
.kp-kop-som { font-size: var(--tekst-tabel); color: var(--tekst-zacht); }
.kp-kop-knoppen { margin-left: auto; display: flex; gap: var(--a2); flex-wrap: wrap; }
.kp-kaarten { display: grid; gap: var(--a3); }
.kp-storing { box-shadow: var(--schaduw); }
.kp-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3); align-items: start; }
.kp-kaart { display: grid; gap: var(--a3); background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a4); min-width: 0; }
.kp-kaart--fout { background: linear-gradient(120deg, var(--fout-vlak), var(--vlak)); }
.kp-kaart-kop { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--a3); align-items: center; }
.kp-kaart-naam h3 { margin: 0; font-size: var(--tekst-titel); font-weight: 700; color: var(--tekst); }
.kp-ring { position: relative; width: 56px; height: 56px; }
.kp-ring .bd-ring { width: 56px; height: 56px; }
.kp-ring .bd-ring-tekst { display: none; }
.kp-ring-teken { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--tekst-titel); }
.kp-ring--goed .kp-ring-teken { color: var(--goed-tekst); }
.kp-ring--letop .kp-ring-teken { color: var(--letop-tekst); }
.kp-ring--fout .kp-ring-teken { color: var(--fout-tekst); }
.kp-ring--stil .kp-ring-teken { color: var(--tekst-zacht); }
.kp-sync { text-align: right; }
.kp-sync-tijd { font-size: var(--tekst-titel); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tekst); }
.kp-klein { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.kp-fout { color: var(--fout-tekst); }
.kp-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a2); }
.kp-cijfers > div, .kp-cijfers .kp-tegel { min-width: 0; }
.kp-tegel { display: grid; gap: 2px; padding: var(--a2) var(--a3); background: var(--achtergrond); border-radius: var(--radius-kaart); height: 100%; box-sizing: border-box; }
.kp-tegel-getal { font-size: var(--tekst-kaartgetal); font-weight: 700; color: var(--tekst); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kp-tegel-boven { display: flex; align-items: center; gap: var(--a1); flex-wrap: wrap; }
.kp-tegel-tekst { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.kp-schakelaars { display: flex; flex-wrap: wrap; gap: var(--a1); }
.kp-instellingen { border-top: 1px solid var(--lijn); padding-top: var(--a2); }
.kp-instellingen > summary { cursor: pointer; min-height: var(--klikdoel); display: flex; align-items: center; font-size: var(--tekst-tabel); font-weight: 600; color: var(--accent); }
.kp-instellingen-inhoud { display: grid; gap: var(--a2); margin-top: var(--a2); }
.kp-instellingen-inhoud > .fixed-row { flex-wrap: wrap; }
@media (max-width: 1100px) { .kp-raster { grid-template-columns: minmax(0, 1fr); } }
.kp-app { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3) var(--a4); margin-bottom: var(--a4); }
.kp-app > summary { cursor: pointer; min-height: 44px; display: flex; gap: var(--a3); align-items: center; flex-wrap: wrap; }
.kp-app > summary > span:first-child { font-size: var(--tekst-titel); font-weight: 700; color: var(--tekst); }
.kp-app-inhoud { margin-top: var(--a3); }
.kp-ring--goed .bd-ring-vulling { stroke: var(--goed-tekst); }
.kp-ring--letop .bd-ring-vulling { stroke: var(--letop-tekst); }
.kp-ring--fout .bd-ring-vulling, .kp-ring--stil .bd-ring-vulling { stroke: var(--fout-tekst); }
.kp #refreshAllStatus, .kp ~ #refreshAllStatus, #refreshAllStatus { margin: 0 0 var(--a2) !important; }