/* Klimaatregie intern portaal, gedeelde stijl */

:root {
  --kr-groen: #27D366;
  --kr-groen-donker: #117a35;
  --kr-zachtgroen: #e6f6ec;
  --kr-inkt: #0f1115;
  --kr-grijs: #63696f;
  --kr-lijn: #e7e3dc;
  --kr-soft: #f4f2ed;
  --kr-radius: 16px;
  --kr-bg: #efece6;
  --kr-kaart: #ffffff;
  --kr-kop-bg: #f6f4ef;
  --kr-veld-bg: #ffffff;
  --kr-zij-breedte: 252px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.kr-portaal-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--kr-bg);
  color: var(--kr-inkt);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

/* Kopbalk */
.kr-portaal-kop {
  background: var(--kr-kaart);
  border-bottom: 3px solid var(--kr-groen);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.kr-portaal-kop-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kr-portaal-kop-links img {
  height: 34px;
  width: auto;
  display: block;
}

.kr-portaal-kop-titel {
  font-family: inherit; font-weight: 800; letter-spacing: -0.5px;
  font-size: 17px;
  font-weight: 600;
  color: var(--kr-inkt);
}

.kr-portaal-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.kr-portaal-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--kr-inkt);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 5px;
}

.kr-portaal-nav a:hover { background: var(--kr-zachtgroen); }
.kr-portaal-nav a.kr-nav-actief { background: var(--kr-zachtgroen); color: var(--kr-groen-donker); }
.kr-portaal-nav a.kr-nav-uitloggen { color: var(--kr-grijs); }

/* Inhoud */
.kr-portaal-inhoud {
  max-width: 1000px;
  margin: 28px auto;
  padding: 0 20px;
}

.kr-portaal-paginatitel {
  font-family: inherit; font-weight: 800; letter-spacing: -0.5px;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 4px;
}

.kr-portaal-paginasub {
  color: var(--kr-grijs);
  margin-bottom: 24px;
  font-size: 14px;
}

/* Tegels op dashboard */
.kr-tegelrooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.kr-tegel {
  background: var(--kr-kaart);
  border: 1px solid var(--kr-lijn);
  border-radius: 8px;
  padding: 22px 20px;
  text-decoration: none;
  color: var(--kr-inkt);
  display: block;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.kr-tegel:hover {
  border-color: var(--kr-groen);
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.10);
}

.kr-tegel-titel {
  font-family: inherit; font-weight: 800; letter-spacing: -0.5px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.kr-tegel-tekst {
  font-size: 13.5px;
  color: var(--kr-grijs);
}

.kr-tegel-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--kr-groen-donker);
  background: var(--kr-zachtgroen);
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
}

/* Tabellen (bonnenarchief) */
.kr-tabel {
  width: 100%;
  border-collapse: collapse;
  background: var(--kr-kaart);
  border: 1px solid var(--kr-lijn);
  border-radius: 8px;
  overflow: hidden;
}

.kr-tabel th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kr-grijs);
  background: var(--kr-zachtgroen);
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--kr-lijn);
}

.kr-tabel td {
  padding: 11px 14px;
  border-bottom: 1px solid #e8eee9;
  font-size: 14px;
}

.kr-tabel tr:last-child td { border-bottom: none; }
.kr-tabel tr:hover td { background: #fafcfa; }

.kr-tabel a { color: var(--kr-groen-donker); font-weight: 600; text-decoration: none; }
.kr-tabel a:hover { text-decoration: underline; }

.kr-tabel .kr-verwijder { color: #b33a3a; font-weight: 500; font-size: 13px; }

/* Knoppen */
.kr-knop {
  display: inline-block;
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: var(--kr-groen);
  border: none;
  padding: 11px 26px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

.kr-knop:hover { background: var(--kr-groen-donker); }

.kr-knop-licht {
  display: inline-block;
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--kr-inkt);
  background: var(--kr-kaart);
  border: 1px solid var(--kr-lijn);
  padding: 11px 22px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}

.kr-knop-licht:hover { border-color: var(--kr-grijs); }

/* Rustige icoon-actieknoppen, gedeeld over de pagina's */
.kr-actiebalk { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.kr-actie {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid var(--kr-lijn);
  background: var(--kr-kaart, #fff);
  color: var(--kr-inkt);
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.kr-actie:hover { background: var(--kr-soft); border-color: var(--kr-grijs); text-decoration: none; }
.kr-actie svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--kr-grijs); }
.kr-actie-primair { background: var(--kr-groen); border-color: var(--kr-groen); color: #0a0a0a; box-shadow: 0 2px 10px rgba(39, 211, 102, 0.35); }
.kr-actie-primair:hover { background: var(--kr-groen); border-color: var(--kr-groen); color: #0a0a0a; }
.kr-actie-primair svg { color: #0a0a0a; }
.kr-actie-verwijder { color: #b33a3a; border-color: transparent; background: transparent; }
.kr-actie-verwijder svg { color: #b33a3a; }
.kr-actie-verwijder:hover { background: rgba(179, 58, 58, 0.12); border-color: transparent; }
.kr-actie-rechts { margin-left: auto; }
@media (max-width: 760px) { .kr-actie-rechts { margin-left: 0; } }


/* Meldingen */
.kr-melding {
  background: var(--kr-zachtgroen);
  border: 1px solid #c8e8d4;
  color: var(--kr-groen-donker);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
}

.kr-melding-fout {
  background: #fdf0f0;
  border: 1px solid #ecc8c8;
  color: #b33a3a;
}

/* Loginpagina */
.kr-login-vlak {
  max-width: 380px;
  margin: 80px auto;
  background: var(--kr-kaart);
  border: 1px solid var(--kr-lijn);
  border-radius: 10px;
  padding: 36px 32px;
  text-align: center;
}

.kr-login-vlak img {
  height: 40px;
  margin-bottom: 18px;
}

.kr-login-vlak h1 {
  font-family: inherit; font-weight: 800; letter-spacing: -0.5px;
  font-size: 20px;
  margin-bottom: 20px;
}

.kr-login-vlak input[type="password"] {
  width: 100%;
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-size: 15px;
  padding: 11px 12px;
  border: 1px solid var(--kr-lijn);
  border-radius: 6px;
  margin-bottom: 14px;
}

.kr-login-vlak input[type="password"]:focus {
  outline: none;
  border-color: var(--kr-groen);
}

.kr-leeg-staat {
  background: var(--kr-kaart);
  border: 1.5px dashed var(--kr-lijn);
  border-radius: 8px;
  padding: 36px 20px;
  text-align: center;
  color: var(--kr-grijs);
  font-size: 14px;
}

/* Uitbreidingen beheer en BRL */
.kr-w-blok { border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; border: 1.5px solid; }
.kr-w-rood { background: #fdf0ef; border-color: #e5b8b4; color: #8f2f27; }
.kr-w-geel { background: #fdf6e7; border-color: #e8d3a0; color: #7a5d1a; }
.kr-w-groen { background: var(--kr-zachtgroen); border-color: #c8e8d4; color: var(--kr-groen-donker); }
.kr-form-vlak { background: #fff; border: 1px solid var(--kr-lijn); border-radius: 8px; padding: 18px 20px; margin-bottom: 22px; }
.kr-form-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; margin-bottom: 16px; }
.kr-dagdeel-melding { border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.kr-dagdeel-melding-vrij { background: var(--kr-zachtgroen, #e6f9ed); color: var(--kr-groen-donker, #117a35); }
.kr-dagdeel-melding-bezet { background: #fbe9e7; color: #b23c2e; }
.kr-form-veld label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kr-grijs); font-weight: 600; margin-bottom: 3px; }
.kr-form-veld input, .kr-form-veld select, .kr-form-veld textarea { width: 100%; font-family: 'Hanken Grotesk', Arial, sans-serif; font-size: 14.5px; padding: 11px 13px; border: 1.5px solid var(--kr-lijn); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(26, 43, 33, 0.04); transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; }
.kr-form-veld input:focus, .kr-form-veld select:focus, .kr-form-veld textarea:focus { outline: none; border-color: var(--kr-groen); box-shadow: 0 0 0 3px rgba(39, 211, 102, 0.14); }
.kr-vorm-sectiekop { background: #eef9f1; border-left: 3.5px solid var(--kr-groen); color: var(--kr-groen-donker); font-weight: 800; font-size: 13.5px; padding: 8px 14px; border-radius: 6px; margin: 18px 0 12px; grid-column: 1 / -1; }
.kr-zoekbalk { display: flex; gap: 8px; margin-bottom: 20px; }
.kr-zoekbalk input { flex: 1; font-family: 'Hanken Grotesk', Arial, sans-serif; font-size: 15px; padding: 11px 14px; border: 1px solid var(--kr-lijn); border-radius: 8px; }
.kr-zoekbalk input:focus { outline: none; border-color: var(--kr-groen); }
.kr-status-pil { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kr-pil-groen { background: var(--kr-zachtgroen); color: var(--kr-groen-donker); }
.kr-pil-geel { background: #fdf6e7; color: #b08a2e; }
.kr-pil-rood { background: #fdf0ef; color: #b33a3a; }
.kr-pil-grijs { background: #eef2ef; color: var(--kr-grijs); }
.kr-pil-blauw { background: #eaf2fd; color: #2563a8; }
.kr-pil-oranje { background: #fdeede; color: #c2691c; }

/* Designopfrissing: rustiger en overzichtelijker */
.kr-zoekbalk { position: relative; margin-bottom: 24px; }
.kr-zoekbalk input {
  padding: 13px 18px 13px 44px;
  border-radius: 999px;
  border: 1px solid var(--kr-lijn);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%236b7a70' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 16px center;
  box-shadow: 0 1px 3px rgba(26, 43, 33, 0.06);
}
.kr-zoekbalk input:focus { border-color: var(--kr-groen); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12); }
.kr-zoekbalk .kr-knop { border-radius: 999px; padding-left: 22px; padding-right: 22px; }

.kr-tabel { box-shadow: 0 1px 3px rgba(26, 43, 33, 0.05); border-radius: 10px; overflow: hidden; }
.kr-tabel thead th { background: #f4f8f5; }
.kr-tabel tbody tr:hover td { background: #fafdfb; }

.kr-dash-cijfer { box-shadow: 0 1px 3px rgba(26, 43, 33, 0.05); transition: border-color 0.12s ease, transform 0.12s ease; }
.kr-dash-cijfer:hover { transform: translateY(-1px); }
.kr-tegel { box-shadow: 0 1px 3px rgba(26, 43, 33, 0.05); }
.kr-form-vlak { box-shadow: 0 1px 3px rgba(26, 43, 33, 0.05); }

.kr-dash-sectie, .kr-portaal-paginatitel { position: relative; }
.kr-sectiekop-strip { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px 0; }
.kr-sectiekop-strip::after { content: ""; flex: 1; height: 1px; background: var(--kr-lijn); }
.kr-sectiekop-strip .kr-dash-sectie { margin: 0; }

.kr-filterbalk { position: relative; margin-bottom: 18px; max-width: 440px; }
.kr-filterbalk input {
  width: 100%; font-family: 'Hanken Grotesk', Arial, sans-serif; font-size: 14.5px;
  padding: 11px 16px 11px 42px; border: 1px solid var(--kr-lijn); border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a70' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 15px center;
  box-shadow: 0 1px 3px rgba(26, 43, 33, 0.05);
}
.kr-filterbalk input:focus { outline: none; border-color: var(--kr-groen); box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12); }

/* Modal voor dialogen zoals de Jortt-factuur */
.kr-modal-achter { display: none; position: fixed; inset: 0; background: rgba(26, 43, 33, 0.45); z-index: 200; align-items: center; justify-content: center; padding: 16px; }
.kr-modal { background: #fff; border-radius: 14px; padding: 26px 28px; max-width: 460px; width: 100%; box-shadow: 0 18px 50px rgba(26, 43, 33, 0.25); }
.kr-modal-kop { font-family: inherit; font-weight: 800; letter-spacing: -0.5px; font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.kr-modal-tekst { font-size: 13.5px; color: var(--kr-grijs); line-height: 1.55; margin-bottom: 14px; }
.kr-modal-keuze { display: flex; gap: 10px; margin-bottom: 8px; }
.kr-modal-keuze label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--kr-lijn); border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.kr-modal-keuze label:has(input:checked) { border-color: var(--kr-groen); background: var(--kr-zachtgroen); color: var(--kr-groen-donker); }
.kr-modal-uitleg { font-size: 12.5px; color: var(--kr-grijs); margin-bottom: 14px; line-height: 1.5; }
.kr-modal-fout { font-size: 13px; color: #b33a3a; font-weight: 600; min-height: 18px; margin-bottom: 8px; }
.kr-modal-knoppen { display: flex; gap: 10px; }

/* Algemene verfijning */
.kr-portaal-kop { box-shadow: 0 1px 6px rgba(26, 43, 33, 0.06); position: sticky; top: 0; z-index: 100; }
.kr-portaal-paginatitel { letter-spacing: -0.01em; }
.kr-knop, .kr-knop-licht { transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease; }
.kr-knop:active, .kr-knop-licht:active { transform: scale(0.98); }
.kr-portaal-nav a { border-radius: 6px; padding: 6px 10px; transition: background-color 0.12s ease; }
.kr-portaal-nav a:hover { background: var(--kr-zachtgroen); }
.kr-leeg-staat { border-radius: 10px; }
.kr-w-blok a { color: inherit; font-weight: 700; }
@media (max-width: 700px) {
  .kr-portaal-inhoud { padding-left: 14px; padding-right: 14px; }
  .kr-modal { padding: 20px; }
}

/* ===== Huisstijl homepage: pilknoppen, kaarten, chip en groet ===== */

.kr-knop {
  background: var(--kr-groen);
  color: #000;
  font-weight: 800;
  border: 0;
  border-radius: 50px;
  padding: 11px 22px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(39, 211, 102, 0.26);
}
.kr-knop:hover { background: var(--kr-groen); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(39, 211, 102, 0.34); color: #000; }
.kr-knop-licht {
  background: #fff;
  color: #000;
  font-weight: 700;
  border: 1px solid #e2e2e2;
  border-radius: 50px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.kr-knop-licht:hover { background: var(--kr-groen); border-color: var(--kr-groen); color: #000; }

.kr-w-blok, .kr-dossier-vlak, .kr-vlak, .kr-leeg-staat {
  background: var(--kr-soft);
  border: 1px solid var(--kr-lijn);
  border-radius: var(--kr-radius);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.kr-w-blok:hover, .kr-dossier-vlak:hover { border-color: rgba(39, 211, 102, 0.4); box-shadow: 0 10px 26px rgba(39, 211, 102, 0.09); }

table.kr-tabel { border-radius: var(--kr-radius); overflow: hidden; border: 1px solid var(--kr-lijn); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04); }
table.kr-tabel thead th { background: var(--kr-soft); color: var(--kr-inkt); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.5px; }
table.kr-tabel tbody tr:hover { background: #f7fdf9; }

/* Gebruikerschip rechtsboven */
.kr-gebruiker-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--kr-soft);
  border: 1px solid var(--kr-lijn);
  border-radius: 50px;
  padding: 5px 6px 5px 6px;
}
.kr-gebruiker-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--kr-groen);
  color: #000;
  font-weight: 800;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kr-gebruiker-info { display: flex; flex-direction: column; line-height: 1.15; padding-right: 2px; }
.kr-gebruiker-naam { font-size: 13px; font-weight: 800; color: var(--kr-inkt); white-space: nowrap; }
.kr-gebruiker-rol { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--kr-groen-donker); }
.kr-gebruiker-uit {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2e2e2;
  color: var(--kr-inkt);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kr-gebruiker-uit svg { width: 15px; height: 15px; }
.kr-gebruiker-uit:hover { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }

/* Begroeting */
.kr-groet { margin-bottom: 26px; }
.kr-groet-titel { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: var(--kr-inkt); }
.kr-groet-naam { color: var(--kr-groen-donker); }
.kr-groet-sub { font-size: 14.5px; color: var(--kr-grijs); margin-top: 4px; }

/* Navigatie strakker in homepagestijl */
.kr-portaal-kop { border-bottom: 1px solid var(--kr-lijn); box-shadow: 0 1px 10px rgba(10, 10, 10, 0.05); }
.kr-portaal-nav a { font-weight: 700; font-size: 13.5px; color: var(--kr-grijs); }
.kr-portaal-nav a:hover { color: var(--kr-inkt); background: var(--kr-soft); }
.kr-portaal-nav a.kr-nav-actief { background: var(--kr-zachtgroen); color: var(--kr-groen-donker); }

@media (max-width: 860px) {
  .kr-gebruiker-info { display: none; }
  .kr-gebruiker-chip { padding: 4px; }
}

/* ===== Verfijningen: rustige, consistente overgangen en stabiliteit ===== */
:root { --kr-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --kr-snel: 150ms; --kr-rustig: 240ms; }

html { scroll-behavior: smooth; }

.kr-knop, .kr-knop-licht, .kr-portaal-nav a, .kr-gebruiker-chip, .kr-w-blok a, a {
  transition: background-color var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease), color var(--kr-snel) var(--kr-ease), box-shadow var(--kr-snel) var(--kr-ease), transform var(--kr-snel) var(--kr-ease);
}

.kr-tegel { transition: transform var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease), box-shadow var(--kr-snel) var(--kr-ease); }
.kr-tegel:hover { transform: translateY(-2px); }

.kr-knop:active, .kr-knop-licht:active { transform: translateY(1px) scale(0.99); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(39, 211, 102, 0.30);
}

@keyframes kr-inhoud-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; } }
.kr-portaal-inhoud { animation: kr-inhoud-in var(--kr-rustig) var(--kr-ease) both; }

/* Rustige hover-accenten voor lijsten en kaarten */
.kr-pb-item { transition: transform var(--kr-snel) var(--kr-ease), box-shadow var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease); }
.kr-pb-item:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 17, 21, 0.06); }
.kr-trf-kaart { transition: border-color var(--kr-snel) var(--kr-ease), box-shadow var(--kr-snel) var(--kr-ease); scroll-margin-top: 88px; }
.kr-trf-kaart:hover { box-shadow: 0 6px 18px rgba(15, 17, 21, 0.05); }
.kr-pb-link, .kr-trf-link, .kr-pb-pill { transition: background-color var(--kr-snel) var(--kr-ease), border-color var(--kr-snel) var(--kr-ease), color var(--kr-snel) var(--kr-ease), transform var(--kr-snel) var(--kr-ease); }
.kr-pb-pill:active { transform: scale(0.97); }

table tbody tr { transition: background-color var(--kr-snel) var(--kr-ease); }

/* Systeemvoorkeur 'minder beweging': alles blijft werken, zonder animatie */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .kr-portaal-inhoud { animation: none !important; }
}

/* ===================== Nachtmodus ===================== */
/* Alleen actief op het interne portaal. Klant- en inlogpagina's blijven licht. */
.kr-thema-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--kr-lijn); background: var(--kr-kaart);
  color: var(--kr-grijs); cursor: pointer; padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.kr-thema-knop:hover { border-color: var(--kr-groen); color: var(--kr-groen-donker); }
.kr-thema-icoon { width: 18px; height: 18px; display: block; }

/* Telefoon-indicator in de kop (alleen beheer): toont of het nummer op de website zichtbaar is.
   Groen stipje = nummer staat aan, rood stipje = nummer staat uit. Klik opent Druktemelding. */
.kr-kop-tel {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--kr-lijn); background: var(--kr-kaart);
  color: var(--kr-grijs); cursor: pointer; padding: 0; text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.kr-kop-tel svg { width: 17px; height: 17px; display: block; }
.kr-kop-tel:hover { border-color: var(--kr-groen); color: var(--kr-groen-donker); }
.kr-kop-tel-stip {
  position: absolute; top: -2px; right: -2px;
  width: 11px; height: 11px; border-radius: 999px;
  border: 2px solid var(--kr-kaart);
}
.kr-kop-tel-aan .kr-kop-tel-stip { background: #16a34a; }
.kr-kop-tel-uit .kr-kop-tel-stip { background: #d64545; }
.kr-kop-tel-uit { color: #d64545; }
.kr-kop-tel-uit:hover { border-color: #d64545; color: #d64545; }
.kr-kop-tel-bezig { opacity: .55; pointer-events: none; }

html[data-thema="donker"] body.kr-portaal-body {
  --kr-inkt: #e9ecef;
  --kr-grijs: #9aa2ab;
  --kr-lijn: #262c33;
  --kr-soft: #1a1f26;
  --kr-zachtgroen: #123320;
  --kr-groen-donker: #4ade80;
  --kr-bg: #0b0d10;
  --kr-kaart: #14181e;
  --kr-kop-bg: #0f1216;
  --kr-veld-bg: #161b21;
  color-scheme: dark;
  background: var(--kr-bg);
  color: var(--kr-inkt);
}

/* Vaste lichte oppervlakken uit de gedeelde stijl */
html[data-thema="donker"] body.kr-portaal-body .kr-portaal-kop { background: var(--kr-kop-bg); }
html[data-thema="donker"] body.kr-portaal-body .kr-tegel,
html[data-thema="donker"] body.kr-portaal-body .kr-tabel,
html[data-thema="donker"] body.kr-portaal-body .kr-knop-licht,
html[data-thema="donker"] body.kr-portaal-body .kr-leeg-staat,
html[data-thema="donker"] body.kr-portaal-body .kr-login-vlak,
html[data-thema="donker"] body.kr-portaal-body .kr-form-vlak { background: var(--kr-kaart); }
html[data-thema="donker"] body.kr-portaal-body .kr-tabel td { border-bottom-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-tabel tr:hover td { background: var(--kr-soft); }
/* Statuspillen hadden alleen lichte varianten; in donkere modus bleef de
   achtergrond licht met lichte tekst erop, dus onleesbaar (instrumenten.php). */
html[data-thema="donker"] body.kr-portaal-body .kr-pil-geel { background: #3a2c15; color: #eec37e; }
html[data-thema="donker"] body.kr-portaal-body .kr-pil-rood { background: #3a1d1d; color: #f2a3a3; }
html[data-thema="donker"] body.kr-portaal-body .kr-pil-grijs { background: #262c33; color: #c2c9d1; }

/* ---------------------------------------------------------------------------
   Darkmode-vangnet. Een blok met een inline lichte achtergrond (style="back-
   ground:#fff" en varianten) wordt in donkere modus onleesbaar: lichte tekst
   op een licht vlak. Nieuwe blokken horen een eigen klasse met een
   html[data-thema="donker"]-variant te krijgen, maar wordt dat een keer
   vergeten, dan vangt onderstaande regel het op. Werkt alleen binnen het
   beheerportaal in donkere modus, dus mail-HTML en printweergaven blijven
   ongemoeid. Dit is een vangnet, geen vervanging van een nette klasse.
   --------------------------------------------------------------------------- */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#f"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #f"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#F"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #F"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#e"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #e"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#E"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #E"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:white"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: white"],
html[data-thema="donker"] body.kr-portaal-body [style*="background-color:#f"],
html[data-thema="donker"] body.kr-portaal-body [style*="background-color: #f"],
html[data-thema="donker"] body.kr-portaal-body [style*="background-color:#e"],
html[data-thema="donker"] body.kr-portaal-body [style*="background-color: #e"] {
  background: var(--kr-kaart) !important;
  border-color: var(--kr-lijn) !important;
}
/* Inline donkere tekstkleuren op zo'n vlak trekken we mee, anders blijft het
   donker op donker. */
html[data-thema="donker"] body.kr-portaal-body [style*="color:#0"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #0"],
html[data-thema="donker"] body.kr-portaal-body [style*="color:#1a1a1a"],
html[data-thema="donker"] body.kr-portaal-body [style*="color:#333"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #333"] {
  color: var(--kr-inkt) !important;
}
@media print {
  html[data-thema="donker"] body.kr-portaal-body [style*="background"] { background: #fff !important; }
}

/* Invoervelden */
html[data-thema="donker"] body.kr-portaal-body .kr-form-veld input,
html[data-thema="donker"] body.kr-portaal-body .kr-form-veld select,
html[data-thema="donker"] body.kr-portaal-body .kr-form-veld textarea,
html[data-thema="donker"] body.kr-portaal-body .kr-zoekbalk input,
html[data-thema="donker"] body.kr-portaal-body .kr-login-vlak input,
html[data-thema="donker"] body.kr-portaal-body input[type="text"],
html[data-thema="donker"] body.kr-portaal-body input[type="password"],
html[data-thema="donker"] body.kr-portaal-body input[type="number"],
html[data-thema="donker"] body.kr-portaal-body input[type="email"],
html[data-thema="donker"] body.kr-portaal-body input[type="date"],
html[data-thema="donker"] body.kr-portaal-body input[type="search"],
html[data-thema="donker"] body.kr-portaal-body select,
html[data-thema="donker"] body.kr-portaal-body textarea {
  background: var(--kr-veld-bg); color: var(--kr-inkt); border-color: var(--kr-lijn);
}

/* Knoppen en sectiekoppen */
html[data-thema="donker"] body.kr-portaal-body .kr-knop:hover { background: #1fb45c; }
html[data-thema="donker"] body.kr-portaal-body .kr-vorm-sectiekop { background: var(--kr-zachtgroen); }

/* Waarschuwingsblokken */
html[data-thema="donker"] body.kr-portaal-body .kr-melding-fout,
html[data-thema="donker"] body.kr-portaal-body .kr-w-rood { background: #2c1719; border-color: #5a2b2b; color: #f0a8a1; }
html[data-thema="donker"] body.kr-portaal-body .kr-w-geel { background: #2a2413; border-color: #574c25; color: #e6cd8c; }

/* Eigen componenten met een vaste witte achtergrond */
html[data-thema="donker"] body.kr-portaal-body .kri-acct-menu,
html[data-thema="donker"] body.kr-portaal-body .kri-acct-knop,
html[data-thema="donker"] body.kr-portaal-body .kri-update-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-mk-afspraken,
html[data-thema="donker"] body.kr-portaal-body .kr-kf-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-kf-knop.kr-kf-opnieuw,
html[data-thema="donker"] body.kr-portaal-body .kr-trf-kaart { background: var(--kr-kaart); color: var(--kr-inkt); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kri-acct-item:hover { background: var(--kr-soft); }
html[data-thema="donker"] body.kr-portaal-body .kr-aanvr-statusbtn { background: var(--kr-veld-bg); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-aanvr-statusbtn-actief { background: var(--kr-inkt); border-color: var(--kr-inkt); color: var(--kr-bg); }
html[data-thema="donker"] body.kr-portaal-body .kr-aanvr-verwijder { background: var(--kr-veld-bg); border-color: #5a2b2b; color: #f0a8a1; }

/* Inline witte vlakken (style="background:#fff") breed opvangen */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fff"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fff"] { background: var(--kr-kaart) !important; }

/* Veelgebruikte lichte tinten in inline-stijl */
html[data-thema="donker"] body.kr-portaal-body [style*="background:#eef9f1"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #eef9f1"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#e6f9ed"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #e6f9ed"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#eef1f4"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #eef1f4"] { background: var(--kr-zachtgroen) !important; }
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf0f0"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf0f0"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fdf3f3"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fdf3f3"] { background: #2c1719 !important; }
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fbf6e9"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fbf6e9"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fef3e2"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fef3e2"],
html[data-thema="donker"] body.kr-portaal-body [style*="background:#fff7e6"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: #fff7e6"] { background: #2a2413 !important; }

/* Donkere inline tekstkleuren leesbaar houden op donkere kaarten */
html[data-thema="donker"] body.kr-portaal-body [style*="color:#0f1115"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #0f1115"],
html[data-thema="donker"] body.kr-portaal-body [style*="color:#0a0a0a"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #0a0a0a"],
html[data-thema="donker"] body.kr-portaal-body [style*="color:#111"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #111"] { color: var(--kr-inkt) !important; }

/* Zwart monochroom logo omkeren naar wit op donkere achtergrond */
html[data-thema="donker"] body.kr-portaal-body .kr-portaal-kop-links img,
html[data-thema="donker"] body.kr-portaal-body img[src*="logo.svg"] { filter: invert(1); }

/* Planbord in nachtmodus: rustige, gedempte tinten in plaats van felle vlakken */
html[data-thema="donker"] body.kr-portaal-body .kri-update-zone { background: var(--kr-kaart); }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-item,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-tegel { background: var(--kr-kaart); }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill[data-type="schouw"].kr-pb-aan { border-color: #7a5c2c; color: #d9b578; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-tegel-schouw,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-item-schouw { border-left-color: #d9b578; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-badge-schouw,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-status-open { background: #2b2416; border-color: #4a3f24; color: #d9b578; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill[data-type="onderhoud"].kr-pb-aan { border-color: #3d4a68; color: #93a8d4; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-tegel-onderhoud,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-item-onderhoud { border-left-color: #93a8d4; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-badge-onderhoud { background: #1c2333; border-color: #34405c; color: #93a8d4; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill[data-type="overig"].kr-pb-aan,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-badge-overig { background: var(--kr-soft); border-color: var(--kr-lijn); color: #b3bbc4; }
html[data-thema="donker"] body.kr-portaal-body .kr-pb-link { border-color: var(--kr-lijn); }

/* ===== Nachtmodus: automatisch gegenereerde paginadekking ===== */
html[data-thema="donker"] body.kr-portaal-body #kr-2fa-qr,
html[data-thema="donker"] body.kr-portaal-body .kr-2fa-vlak,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-checkbox,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-notes,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-phase-card,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-pill,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-step button,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-step-body,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-tabel .kr-bs-weg,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-toc-link:hover,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-toc-num,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-topic,
html[data-thema="donker"] body.kr-portaal-body .kr-dash-log,
html[data-thema="donker"] body.kr-portaal-body .kr-hb-vlak,
html[data-thema="donker"] body.kr-portaal-body .kr-herstel code,
html[data-thema="donker"] body.kr-portaal-body .kr-inst-form,
html[data-thema="donker"] body.kr-portaal-body .kr-instmap-inhoud,
html[data-thema="donker"] body.kr-portaal-body .kr-instmap-teller,
html[data-thema="donker"] body.kr-portaal-body .kr-kf-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-kf-knop.kr-kf-opnieuw,
html[data-thema="donker"] body.kr-portaal-body .kr-kl-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-kl-login-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-klant-bon,
html[data-thema="donker"] body.kr-portaal-body .kr-klant-knop-primair,
html[data-thema="donker"] body.kr-portaal-body .kr-klant-kop,
html[data-thema="donker"] body.kr-portaal-body .kr-klant-onderhoud,
html[data-thema="donker"] body.kr-portaal-body .kr-klant-uitlog,
html[data-thema="donker"] body.kr-portaal-body .kr-klant-vlak,
html[data-thema="donker"] body.kr-portaal-body .kr-laadscherm-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-lg-chip,
html[data-thema="donker"] body.kr-portaal-body .kr-mk-afspraken,
html[data-thema="donker"] body.kr-portaal-body .kr-mk-login-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-ml-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-ml-onderwerpbalk,
html[data-thema="donker"] body.kr-portaal-body .kr-mt-bewerk,
html[data-thema="donker"] body.kr-portaal-body .kr-ov-handtekening,
html[data-thema="donker"] body.kr-portaal-body .kr-ov-handtekeningvak,
html[data-thema="donker"] body.kr-portaal-body .kr-ov-hero,
html[data-thema="donker"] body.kr-portaal-body .kr-ov-upload,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-item,
html[data-thema="donker"] body.kr-portaal-body .kr-pb-pill,
html[data-thema="donker"] body.kr-portaal-body .kr-sch-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-st-cel,
html[data-thema="donker"] body.kr-portaal-body .kr-st-fmt-knop,
html[data-thema="donker"] body.kr-portaal-body .kr-st-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-sta-periode,
html[data-thema="donker"] body.kr-portaal-body .kr-tags-koppel,
html[data-thema="donker"] body.kr-portaal-body .kr-tags-koppel-klant,
html[data-thema="donker"] body.kr-portaal-body .kr-tags-vrij,
html[data-thema="donker"] body.kr-portaal-body .kr-tv-kaart,
html[data-thema="donker"] body.kr-portaal-body .kr-tv-pagina,
html[data-thema="donker"] body.kr-portaal-body .kr-wb-canvas,
html[data-thema="donker"] body.kr-portaal-body .kr-wb-typepil,
html[data-thema="donker"] body.kr-portaal-body .kr-wb-vel,
html[data-thema="donker"] body.kr-portaal-body .kr-wbk-hk,
html[data-thema="donker"] body.kr-portaal-body .kr-wbk-hk img,
html[data-thema="donker"] body.kr-portaal-body .kr-wbk-vel,
html[data-thema="donker"] body.kr-portaal-body .kri-acct-menu,
html[data-thema="donker"] body.kr-portaal-body .kri-kaart,
html[data-thema="donker"] body.kr-portaal-body .kri-update-kaart,
html[data-thema="donker"] body.kr-portaal-body .kri-update-zone,
html[data-thema="donker"] body.kr-portaal-body .kri-wb-veld { background: var(--kr-kaart); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-bs-notes-textarea,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-veld input[type=email],
html[data-thema="donker"] body.kr-portaal-body .kr-bs-veld input[type=text],
html[data-thema="donker"] body.kr-portaal-body .kr-bs-veld select,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-veld textarea,
html[data-thema="donker"] body.kr-portaal-body .kr-kl-kaart input[type="text"],
html[data-thema="donker"] body.kr-portaal-body .kr-kl-kaart select,
html[data-thema="donker"] body.kr-portaal-body .kr-kl-kaart textarea,
html[data-thema="donker"] body.kr-portaal-body .kr-kl-veld input,
html[data-thema="donker"] body.kr-portaal-body .kr-kl-veld select,
html[data-thema="donker"] body.kr-portaal-body .kr-ml-veld input,
html[data-thema="donker"] body.kr-portaal-body .kr-ml-veld select,
html[data-thema="donker"] body.kr-portaal-body .kr-ml-veld textarea,
html[data-thema="donker"] body.kr-portaal-body .kr-ov-veld input,
html[data-thema="donker"] body.kr-portaal-body .kr-sch-klusvorm input,
html[data-thema="donker"] body.kr-portaal-body .kr-sch-klusvorm select,
html[data-thema="donker"] body.kr-portaal-body .kr-trf-tabel input,
html[data-thema="donker"] body.kr-portaal-body .kri-onderhoud-veld input,
html[data-thema="donker"] body.kr-portaal-body .kri-onderhoud-veld select,
html[data-thema="donker"] body.kr-portaal-body .kri-upload-veld input { background: var(--kr-veld-bg); color: var(--kr-inkt); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-bs-pill.kr-bs-pill-actief,
html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-label,
html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-qrcaptie,
html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-titel,
html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-voet,
html[data-thema="donker"] body.kr-portaal-body .kr-etiket .kr-et-waarde,
html[data-thema="donker"] body.kr-portaal-body .kr-instmap-avatar,
html[data-thema="donker"] body.kr-portaal-body .kr-kf-knop,
html[data-thema="donker"] body.kr-portaal-body .kr-md-avatar,
html[data-thema="donker"] body.kr-portaal-body .kr-st-cel.kr-st-actief,
html[data-thema="donker"] body.kr-portaal-body .kr-st-fmt-actief,
html[data-thema="donker"] body.kr-portaal-body .kri-wisselbalk-terug { color: var(--kr-inkt); }
html[data-thema="donker"] body.kr-portaal-body .kr-ag-pil-onderhoud,
html[data-thema="donker"] body.kr-portaal-body .kr-kf-vink,
html[data-thema="donker"] body.kr-portaal-body .kr-sch-nieuw,
html[data-thema="donker"] body.kr-portaal-body .kr-tv-kop { color: var(--kr-groen-donker); }

/* Leesbaarheid van pill-knoppen, hover en tabel-hover in nachtmodus */
html[data-thema="donker"] body.kr-portaal-body .kr-knop-licht { background: var(--kr-kaart); color: var(--kr-inkt); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kr-knop-licht:hover { background: var(--kr-groen); border-color: var(--kr-groen); color: #06210f; }
html[data-thema="donker"] body.kr-portaal-body table.kr-tabel tbody tr:hover { background: var(--kr-soft); }
html[data-thema="donker"] body.kr-portaal-body [style*="color:#000"],
html[data-thema="donker"] body.kr-portaal-body [style*="color: #000"] { color: var(--kr-inkt) !important; }

/* Tekst op een groene achtergrond blijft altijd zwart, ook bij hover en in nachtmodus */
html[data-thema="donker"] body.kr-portaal-body .kr-knop,
html[data-thema="donker"] body.kr-portaal-body .kr-knop:hover,
html[data-thema="donker"] body.kr-portaal-body .kr-knop-licht:hover,
html[data-thema="donker"] body.kr-portaal-body .kr-bs-pill-actief,
html[data-thema="donker"] body.kr-portaal-body .kr-st-actief,
html[data-thema="donker"] body.kr-portaal-body .kr-st-fmt-actief,
html[data-thema="donker"] body.kr-portaal-body [style*="background:var(--kr-groen)"],
html[data-thema="donker"] body.kr-portaal-body [style*="background: var(--kr-groen)"] { color: #0a0a0a !important; }

/* ===== Nachtmodus: klantlogboek en klant-inlog (volgt systeemthema) ===== */
html[data-thema="donker"] body.kr-klant-body,
html[data-thema="donker"] body.kr-kl-login-body,
html[data-thema="donker"] body.kr-inlog-body {
  --kr-inkt: #eef1f4;
  --kr-grijs: #9aa3ad;
  --kr-lijn: #2b3138;
  --kr-soft: #1b2026;
  --kr-zachtgroen: #15321f;
  --kr-groen-donker: #46d381;
  --kr-bg: #0f1216;
  --kr-kaart: #181d23;
  --kr-veld-bg: #1d232a;
  color-scheme: dark;
  background: var(--kr-bg);
  color: var(--kr-inkt);
}
html[data-thema="donker"] body.kr-klant-body .kr-klant-kop,
html[data-thema="donker"] body.kr-klant-body .kr-klant-vlak,
html[data-thema="donker"] body.kr-klant-body .kr-klant-bon,
html[data-thema="donker"] body.kr-klant-body .kr-klant-onderhoud,
html[data-thema="donker"] body.kr-klant-body .kr-klant-uitlog,
html[data-thema="donker"] body.kr-kl-login-body .kr-kl-login-kaart,
html[data-thema="donker"] body.kr-inlog-body .kr-mk-login-kaart { background: var(--kr-kaart); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-kl-login-body .kr-kl-code,
html[data-thema="donker"] body.kr-inlog-body .kr-mk-veld input { background: var(--kr-veld-bg); color: var(--kr-inkt); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-klant-body .kr-klant-contact { background: #20262e; }
html[data-thema="donker"] body.kr-klant-body .kr-klant-dlknop { background: #117a35 !important; color: #fff !important; }
html[data-thema="donker"] body.kr-klant-body .kr-klant-knop-primair { background: var(--kr-kaart) !important; }
html[data-thema="donker"] body.kr-kl-login-body .kr-kl-login-fout,
html[data-thema="donker"] body.kr-inlog-body .kr-mk-fout { background: #2c1719; color: #f0a8a1; }
html[data-thema="donker"] body.kr-klant-body img[src*="logo.svg"],
html[data-thema="donker"] body.kr-kl-login-body img[src*="logo.svg"],
html[data-thema="donker"] body.kr-inlog-body img[src*="logo.svg"] { filter: invert(1); }

/* Inline vlakken op de klantpagina's (wit en amber) in nachtmodus */
html[data-thema="donker"] body.kr-klant-body [style*="background:#fff"],
html[data-thema="donker"] body.kr-klant-body [style*="background: #fff"],
html[data-thema="donker"] body.kr-kl-login-body [style*="background:#fff"],
html[data-thema="donker"] body.kr-kl-login-body [style*="background: #fff"],
html[data-thema="donker"] body.kr-inlog-body [style*="background:#fff"],
html[data-thema="donker"] body.kr-inlog-body [style*="background: #fff"] { background: var(--kr-kaart) !important; }
html[data-thema="donker"] body.kr-klant-body [style*="background:#fbf6e9"],
html[data-thema="donker"] body.kr-klant-body [style*="background: #fbf6e9"] { background: #2a2413 !important; border-color: #574c25 !important; }

/* ===== Mobiel: alles binnen het scherm en compacter ===== */
/* Tabellen die breder zijn dan het scherm scrollen binnen hun eigen kader
   in plaats van de hele pagina op te rekken. Teksten en knoppen worden
   compacter zodat de meeste tabellen gewoon passen zonder te scrollen. */
@media (max-width: 700px) {
  html, body { max-width: 100vw; overflow-x: clip; }
  .kr-portaal-inhoud { padding-left: 12px; padding-right: 12px; }

  .kr-tabel { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kr-tabel th { padding: 8px 9px; font-size: 10px; letter-spacing: 0.04em; }
  .kr-tabel td { padding: 8px 9px; font-size: 12.5px; }
  .kr-tabel td a.kr-knop, .kr-tabel td .kr-knop { padding: 6px 11px !important; font-size: 12px !important; white-space: nowrap; }
  .kr-tabel td [style*="border-radius:12px"] { font-size: 11px !important; padding: 4px 9px !important; }

  .kr-dash-sectie { font-size: 17px; }
  .kr-dash-sectie a { font-size: 11.5px !important; }
  .kr-w-blok { font-size: 13px; }
  .kr-zoekbalk .kr-knop { padding: 10px 16px; font-size: 13.5px; }
  .kr-leeg-staat { font-size: 13px; }
  .kr-tegel { padding: 14px 15px; }

  /* Uitlijning op smalle schermen: titels, actiebalken en formulieren netjes
     onder elkaar in plaats van half afgekapt naast elkaar. */
  .kr-portaal-paginatitel { font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
  .kr-portaal-paginasub { font-size: 13px; line-height: 1.6; }
  .kr-actiebalk { flex-wrap: wrap; gap: 8px; }
  .kr-actiebalk .kr-actie { flex: 1 1 auto; justify-content: center; }
  .kr-actie-rechts { margin-left: 0; width: 100%; }
  .kr-form-rooster { grid-template-columns: 1fr !important; gap: 10px !important; }
  .kr-form-vlak { padding: 16px 15px; }
  .kr-knop, .kr-knop-licht { padding: 11px 18px; font-size: 13.5px; }
  /* Een knop die alleen staat mag de volle breedte pakken, dat tikt prettiger */
  .kr-form-vlak > .kr-knop { width: 100%; }
  .kr-modal { padding: 18px 16px; border-radius: 14px; }
}

/* ============================================================
   Superskin 2026: vaste zijbalk links op desktop, creme licht
   thema en een diep donker thema. Puur CSS bovenop de bestaande
   kop (kop.php); alle knoppen, menu's en scripts blijven gelijk.
   Op mobiel (tot 940px) blijft de vertrouwde bovenbalk met
   hamburger gewoon werken.
   ============================================================ */

@media (min-width: 941px) {
  /* Inhoud opschuiven; alleen op pagina's die de portaalkop hebben.
     Klantlogboek, inlogpagina en printpagina's blijven onaangeroerd. */
  body.kr-portaal-body:has(.kr-portaal-kop) { padding-left: var(--kr-zij-breedte); }

  body.kr-portaal-body .kr-portaal-kop {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--kr-zij-breedte);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 16px 14px 14px;
    background: var(--kr-kop-bg);
    border-bottom: none;
    border-right: 1px solid var(--kr-lijn);
    box-shadow: none;
    overflow: hidden;
    z-index: 900;
  }
  /* De balk zelf staat muisvast; alleen het menugedeelte scrolt intern als het
     op een klein scherm niet past. Zo schuift er nooit iets mee met de muis. */
  body.kr-portaal-body .kr-portaal-kop .kr-portaal-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    scrollbar-width: thin;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-portaal-kop-links,
  body.kr-portaal-body .kr-portaal-kop .kr-kop-snelrij,
  body.kr-portaal-body .kr-portaal-kop .kr-mkop-rechts { flex: 0 0 auto; }

  /* Vaste volgorde in de balk: logo, statusknoppen, menu, en onderin update plus account */
  body.kr-portaal-body .kr-portaal-kop .kr-portaal-kop-links { order: 1; }
  body.kr-portaal-body .kr-portaal-kop .kr-kop-snelrij { order: 2; }
  body.kr-portaal-body .kr-portaal-kop .kr-portaal-nav { order: 3; }
  body.kr-portaal-body .kr-portaal-kop .kr-mkop-rechts { order: 4; }

  /* Statusknoppen (telefoon, thema, postvak) op een rij direct onder het logo,
     met de Live-status netjes rechts uitgelijnd naast het postvak */
  body.kr-portaal-body .kr-portaal-kop .kr-kop-snelrij {
    padding: 10px 6px 10px;
    border-bottom: 1px solid var(--kr-lijn);
    margin-bottom: 6px;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 999px;
    background: var(--kr-kaart);
    border: 1px solid var(--kr-lijn);
    color: var(--kr-inkt);
    text-decoration: none;
  }
  /* Alleen het statusstipje tonen; de tekst zit in de title en scheelt breedte,
     zodat de rij statusknoppen nooit meer over de rand van de zijbalk valt */
  body.kr-portaal-body .kr-portaal-kop .kr-zij-live span:not(.kr-voet-stip) { display: none; }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-live .kr-voet-stip { width: 11px; height: 11px; }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-live:hover { border-color: var(--kr-groen); }

  /* Logo bovenin: groter en gecentreerd */
  body.kr-portaal-body .kr-portaal-kop-links {
    justify-content: center;
    gap: 10px;
    padding: 6px 6px 8px;
    border-bottom: none;
    margin-bottom: 0;
  }
  body.kr-portaal-body .kr-portaal-kop-links img { height: 44px !important; }

  /* Statusregel onder de accountchip: live-stip, versienummer en bijwerken */
  body.kr-portaal-body .kr-portaal-kop .kr-zij-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-top: 9px;
    font-size: 11px;
    font-weight: 700;
    color: var(--kr-grijs);
    letter-spacing: 0.02em;
    text-align: center;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-status-rij {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-status-rij:hover { color: var(--kr-inkt); }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-status-link { border-bottom: 1px dotted currentColor; }
  body.kr-portaal-body .kr-portaal-kop .kr-zij-status-dim { color: var(--kr-grijs); opacity: 0.75; font-weight: 600; }

  /* De pagina-voet onderaan toont hetzelfde; op desktop met zijbalk dubbel, dus weg */
  body.kr-portaal-body:has(.kr-portaal-kop) .kr-portaal-voet { display: none; }

  /* Navigatie als verticale lijst met sectielabel */
  body.kr-portaal-body .kr-portaal-nav {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px 0 6px;
  }
  body.kr-portaal-body .kr-portaal-nav::before {
    content: 'Menu';
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--kr-grijs);
    padding: 4px 12px 6px;
  }
  body.kr-portaal-body .kr-portaal-nav > a,
  body.kr-portaal-body .kr-portaal-nav .kr-nav-meer-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--kr-grijs);
    padding: 8px 12px;
    border-radius: 11px;
    border: 1px solid transparent;
    line-height: 1.3;
    /* Lange menunamen zoals Kwaliteitsmanagementsysteem mogen over twee regels
       afbreken in plaats van uit de balk te lopen of te worden afgekapt. */
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  body.kr-portaal-body .kr-portaal-nav > a:hover,
  body.kr-portaal-body .kr-portaal-nav .kr-nav-meer-item:hover {
    background: var(--kr-soft);
    color: var(--kr-inkt);
  }
  body.kr-portaal-body .kr-portaal-nav > a.kr-nav-actief,
  body.kr-portaal-body .kr-portaal-nav .kr-nav-meer-item.kr-nav-meer-actief {
    background: var(--kr-kaart);
    color: var(--kr-inkt);
    border-color: var(--kr-lijn);
    box-shadow: 0 1px 3px rgba(15, 17, 21, 0.07);
  }
  body.kr-portaal-body .kr-portaal-nav > a.kr-nav-actief::before,
  body.kr-portaal-body .kr-portaal-nav .kr-nav-meer-item.kr-nav-meer-actief::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--kr-groen);
    flex: 0 0 auto;
    margin-top: 5px;
  }

  /* Het Meer-menu opengeklapt als eigen sectie onderaan de navigatie */
  body.kr-portaal-body .kr-portaal-nav .kr-nav-meer { display: block; position: static; width: 100%; margin-top: 10px; order: 99; }
  body.kr-portaal-body .kr-portaal-nav .kr-nav-meer-knop { display: none; }
  body.kr-portaal-body .kr-portaal-nav .kr-nav-meer-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
    min-width: 0;
    transition: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* Onderste blok: update-strook boven de accountchip */
  body.kr-portaal-body .kr-portaal-kop .kr-mkop-rechts {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--kr-lijn);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body.kr-portaal-body .kr-portaal-kop .kr-mkop-rechts form { margin: 0; }
  body.kr-portaal-body .kr-portaal-kop .kri-update-zone {
    width: 100%;
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    background: var(--kr-kaart);
    padding: 8px 12px;
  }
  body.kr-portaal-body .kr-portaal-kop .kri-update-zone svg { width: 15px; height: 15px; }
  body.kr-portaal-body .kr-portaal-kop .kri-update-tekst { display: inline; font-size: 12.5px; font-weight: 700; }
  body.kr-portaal-body .kr-portaal-kop .kri-pv { margin-right: 0; }
  body.kr-portaal-body .kr-portaal-kop .kri-pv-knop { width: 36px; height: 36px; border-radius: 999px; background: var(--kr-kaart); }
  body.kr-portaal-body .kr-portaal-kop .kri-pv-stip { border-color: var(--kr-kaart); }
  body.kr-portaal-body .kr-portaal-kop .kri-acct { width: 100%; }
  body.kr-portaal-body .kr-portaal-kop .kri-acct-knop {
    width: 100%;
    border-radius: 13px;
    background: var(--kr-kaart);
    border: 1px solid var(--kr-lijn);
    padding: 7px 9px;
  }
  body.kr-portaal-body .kr-portaal-kop .kri-acct-chevron { margin-left: auto; }
  body.kr-portaal-body .kr-portaal-kop .kr-gebruiker-naam { white-space: normal; word-break: break-word; }

  /* Accountmenu opent naar boven; postvakmenu opent naar beneden onder de statusrij */
  body.kr-portaal-body .kr-portaal-kop .kri-acct-menu {
    top: auto;
    bottom: calc(100% + 10px);
    right: auto;
    left: 0;
    min-width: 0;
    width: calc(var(--kr-zij-breedte) - 28px);
    transform: translateY(6px);
  }
  body.kr-portaal-body .kr-portaal-kop .kri-acct.kri-open .kri-acct-menu { transform: translateY(0); }

  /* Postvakmenu: als los paneel rechts naast de zijbalk, zodat het nooit wordt
     afgekapt door de vaste balk en alle regels op volle breedte passen */
  body.kr-portaal-body .kr-portaal-kop .kri-pv-menu {
    position: fixed;
    top: 70px;
    bottom: auto;
    left: calc(var(--kr-zij-breedte) + 12px);
    right: auto;
    min-width: 0;
    width: 320px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 18px 48px rgba(15, 17, 21, 0.18);
  }
}

/* Verfijning van gedeelde bouwstenen in de nieuwe stijl (licht en donker) */
.kr-tegel { border-radius: 14px; }
table.kr-tabel, .kr-tabel { border-radius: 14px; }
.kr-knop { border-radius: 11px; }
.kr-knop-licht { border-radius: 11px; background: var(--kr-kaart); }
.kr-tegel-label { border-radius: 999px; }
.kr-portaal-inhoud { max-width: 1080px; }
table.kr-tabel tbody tr:hover { background: var(--kr-soft); }
.kr-tabel tr:hover td { background: var(--kr-soft); }

/* Donker thema: passende schaduwen en menu-oppervlakken */
html[data-thema="donker"] body.kr-portaal-body .kr-portaal-kop { border-right-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kri-acct-menu,
html[data-thema="donker"] body.kr-portaal-body .kr-nav-meer-menu { background: var(--kr-kaart); border-color: var(--kr-lijn); }
html[data-thema="donker"] body.kr-portaal-body .kri-acct-menu { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5); }
html[data-thema="donker"] body.kr-portaal-body .kri-acct-item:hover { background: var(--kr-soft); }
html[data-thema="donker"] body.kr-portaal-body .kri-acct-uit:hover { background: #2c1719; }
html[data-thema="donker"] body.kr-portaal-body .kri-update-zone { background: var(--kr-kaart); border-color: var(--kr-lijn); color: var(--kr-grijs); }
html[data-thema="donker"] body.kr-portaal-body table.kr-tabel thead th { background: var(--kr-soft); color: var(--kr-inkt); }
html[data-thema="donker"] body.kr-portaal-body .kr-tegel:hover { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); }
@media (min-width: 941px) {
  html[data-thema="donker"] body.kr-portaal-body .kr-portaal-nav .kr-nav-meer-menu { background: transparent; border: none; box-shadow: none; }
}