@charset "UTF-8";
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* Cookie consent overlay */
.cookie-consent {
  position: fixed;
  inset: 0;
  display: grid;
  align-items: flex-start;
  justify-items: center;
  padding: 120px 24px 24px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  z-index: 50;
}
.cookie-consent[hidden] {
  display: none;
}
.cookie-consent__dialog {
  width: min(600px, 100%);
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  color: #0f172a;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.35);
  padding: 28px 28px 24px;
  text-align: left;
  position: relative;
}
.cookie-consent__dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
.cookie-consent__header {
  margin-bottom: 16px;
}
.cookie-consent__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #0f172a;
}
.cookie-consent__body {
  margin: 0 0 18px;
  color: #475569;
  line-height: 1.5;
}
.cookie-consent__link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.cookie-consent__link:hover {
  text-decoration: underline;
}
.cookie-consent__options {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}
.cookie-consent__option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  padding-left: 18px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.cookie-consent__option::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(30, 107, 214, 0.6), rgba(30, 107, 214, 0.1));
}
.cookie-consent__option input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.cookie-consent__option strong {
  display: block;
  font-size: 15px;
  color: #0f172a;
  margin-bottom: 4px;
}
.cookie-consent__option span {
  font-size: 13px;
  color: #475569;
}
.cookie-consent__option:hover {
  border-color: rgba(30, 107, 214, 0.4);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.cookie-consent__btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  min-width: 160px;
}
.cookie-consent__btn:active {
  transform: translateY(1px);
}
.cookie-consent__btn:focus-visible {
  outline: 3px solid rgba(30, 107, 214, 0.35);
  outline-offset: 2px;
}
.cookie-consent__btn--primary {
  background: linear-gradient(135deg, #1e6bd6 0%, #2f7ff0 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(30, 107, 214, 0.35);
}
.cookie-consent__btn--primary:hover {
  box-shadow: 0 16px 32px rgba(30, 107, 214, 0.4);
}
.cookie-consent__btn--ghost {
  background: #f1f5f9;
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.4);
}
.cookie-consent__btn--ghost:hover {
  background: #e8eef6;
  border-color: rgba(30, 107, 214, 0.35);
}

body.has-cookie-consent {
  overflow: hidden;
}

/* Keep the policy readable before consent has been saved. */
html.privacy body.has-cookie-consent {
  overflow-y: auto;
  padding-bottom: 350px;
}
html.privacy .cookie-consent {
  inset: auto 0 0;
  align-items: end;
  padding: 16px 24px 20px;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}
html.privacy .cookie-consent__dialog {
  width: min(920px, 100%);
  padding: 20px 22px 18px;
  pointer-events: auto;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.65);
}
html.privacy .cookie-consent__header {
  margin-bottom: 12px;
}
html.privacy .cookie-consent__title {
  margin-bottom: 8px;
  font-size: 20px;
}
html.privacy .cookie-consent__body {
  margin-bottom: 12px;
}
html.privacy .cookie-consent__options {
  margin-bottom: 14px;
}
@media (max-width: 600px) {
  html.privacy body.has-cookie-consent {
    padding-bottom: 390px;
  }
  html.privacy .cookie-consent {
    padding: 10px;
  }
  html.privacy .cookie-consent__dialog {
    max-height: min(62vh, 430px);
    overflow-y: auto;
    padding: 16px;
    border-radius: 14px;
  }
  html.privacy .cookie-consent__btn {
    width: 100%;
  }
}

.topbar,
.lang {
  position: relative;
  z-index: 60;
}

.cookie-consent__open {
  position: fixed;
  right: 20px;
  bottom: 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.25);
  z-index: 40;
}
.cookie-consent__open:focus-visible {
  outline: 3px solid rgba(30, 107, 214, 0.45);
  outline-offset: 2px;
}

html.login .cookie-consent__option input {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

html.login * {
  box-sizing: border-box;
}
html.login {
  /* Document sizing (scoped) */
}
html.login, html.login body {
  height: auto;
  min-height: 100%;
}
html.login body {
  margin: 0;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* IMPORTANT: allow normal scrolling so header remains visible */
  display: block;
  padding: 18px 16px 44px;
  overflow-x: hidden;
  position: relative;
  /* background layers */
}
html.login body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background: radial-gradient(900px 500px at 50% 10%, rgba(255, 255, 255, 0.12), transparent 60%), radial-gradient(700px 420px at 20% 60%, rgba(30, 107, 214, 0.1), transparent 65%), radial-gradient(700px 420px at 80% 70%, rgba(30, 107, 214, 0.08), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
html.login body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, transparent 0 55%, rgba(0, 0, 0, 0.24) 90%);
  pointer-events: none;
  z-index: 0;
}
html.login body.help-modal-open {
  overflow: hidden;
}
html.login .page {
  width: min(920px, 100%);
  margin: 1rem auto 0;
  position: relative;
  z-index: 1;
}
html.login [data-client-login-card] {
  position: relative;
  overflow: hidden;
}
html.login body.is-client-loading [data-client-login-card]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.52);
  pointer-events: none;
  z-index: 3;
}
html.login body.is-client-loading [data-client-login-card]::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.3), rgba(148, 163, 184, 0.55), rgba(148, 163, 184, 0.3));
  background-size: 220% 100%;
  animation: indexShimmer 1.2s ease-in-out infinite;
  z-index: 4;
  pointer-events: none;
}
html.login body.is-client-loading [data-client-login-card] .content {
  pointer-events: none;
}
@keyframes indexShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
html.login {
  /* Header */
}
html.login .topbar {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
  padding-top: 6px;
}
@media (max-width: 520px) {
  html.login .topbar {
    margin-bottom: 16px;
  }
}
html.login .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: #F5F6F8;
}
html.login .brand .mark {
  width: 92px;
  height: 92px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
}
html.login .brand .mark img {
  width: 54px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.18));
}
@media (max-width: 520px) {
  html.login .brand .mark {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }
  html.login .brand .mark img {
    width: 40px;
  }
}
html.login .brand .meta {
  line-height: 1.1;
}
html.login .brand .meta .env {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html.login .brand .meta .title {
  margin-top: 10px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 750;
  color: #FFFFFF;
  text-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
@media (max-width: 520px) {
  html.login .brand .meta .title {
    margin-top: 8px;
  }
}
html.login .brand .meta .subtitle {
  margin-top: 8px;
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 650;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
html.login .lang {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  gap: 10px;
}
html.login .lang button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #F5F6F8;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.02s ease;
}
html.login .lang button[aria-pressed=true] {
  background: rgba(30, 107, 214, 0.22);
  border-color: rgba(30, 107, 214, 0.55);
}
html.login .lang button:hover {
  background: rgba(255, 255, 255, 0.12);
}
html.login .lang button:active {
  transform: translateY(1px);
}
html.login .lang button:focus-visible {
  outline: 3px solid rgba(30, 107, 214, 0.35);
  outline-offset: 2px;
}
@media (max-width: 870px) {
  html.login .lang {
    position: static;
    margin-top: 14px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  html.login .lang button {
    min-height: 48px;
    min-width: 112px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.15;
  }
}
@media (max-width: 520px) {
  html.login .lang button {
    min-height: 42px;
    min-width: 98px;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 10px;
  }
}
@media (max-width: 870px) and (max-width: 520px) {
  html.login .lang {
    margin-top: 12px;
    gap: 8px;
  }
}
html.login .manualGuide--login {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #F5F6F8;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.02s ease;
}
html.login .manualGuide--login svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
html.login .manualGuide--login:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}
html.login .manualGuide--login:active {
  transform: translateY(1px);
}
html.login .manualGuide--login:focus-visible {
  outline: 3px solid rgba(30, 107, 214, 0.35);
  outline-offset: 2px;
}
@media (max-width: 870px) {
  html.login .topbar {
    flex-direction: column;
    align-items: center;
  }
  html.login .brand {
    order: 1;
  }
  html.login .manualGuide--login {
    position: static;
    order: 2;
    margin-top: 14px;
  }
  html.login .lang {
    order: 3;
  }
}
html.login {
  /* Cards */
}
html.login .stack {
  display: grid;
  gap: 22px;
  margin-top: 6px;
}
@media (max-width: 520px) {
  html.login .stack {
    gap: 16px;
  }
}
html.login .card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
html.login .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
html.login .card__top-accent {
  height: 6px;
  background: linear-gradient(90deg, var(--accent), rgba(30, 107, 214, 0.55));
}
html.login .card__inner {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  padding: 22px 24px;
  align-items: start;
}
@media (max-width: 870px) {
  html.login .card__inner {
    grid-template-columns: 1fr;
    padding: 18px 18px;
  }
}
@media (max-width: 520px) {
  html.login .card__inner {
    padding: 16px;
  }
}
html.login.privacy .card__inner {
  grid-template-columns: 1fr;
}
html.login {
  /* Left badge */
}
html.login .badge {
  display: grid;
  place-items: start;
  gap: 10px;
  padding-top: 2px;
}
@media (max-width: 870px) {
  html.login .badge {
    align-items: center;
    justify-items: center;
  }
}
html.login .badge__icon {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 20%, rgba(30, 107, 214, 0.18), transparent 60%), #F3F7FF;
  border: 1px solid #D8E6FF;
  display: grid;
  place-items: center;
  color: var(--accent);
  box-shadow: 0 10px 20px rgba(17, 24, 39, 0.1);
}
@media (max-width: 520px) {
  html.login .badge__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
}
html.login .badge__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #374151;
}
html.login .content h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #1F2A44;
}
html.login .content p {
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
html.login {
  /* Form */
}
html.login .row {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  grid-template-areas: "label control help";
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 870px) {
  html.login .row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label label" "control help";
  }
}
@media (max-width: 520px) {
  html.login .row {
    gap: 8px;
  }
}
html.login label {
  grid-area: label;
  font-size: 13px;
  color: #374151;
  font-weight: 650;
}
html.login input,
html.login select {
  grid-area: control;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  outline: none;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html.login input:focus,
html.login select:focus {
  border-color: rgba(30, 107, 214, 0.75);
  box-shadow: 0 0 0 4px rgba(30, 107, 214, 0.16);
}
html.login .pw-wrap {
  position: relative;
  width: 100%;
}
html.login .info {
  grid-area: help;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #D8E6FF;
  background: #F3F7FF;
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: help;
  position: relative;
}
html.login .info span {
  font-weight: 900;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
html.login .info .tip {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 280px;
  background: #0F172A;
  color: #E5E7EB;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  z-index: 10;
}
@media (max-width: 520px) {
  html.login .info {
    width: 30px;
    height: 30px;
  }
  html.login .info .tip {
    width: 220px;
    right: auto;
    left: 0;
  }
}
html.login .info:hover .tip, html.login .info:focus-within .tip {
  opacity: 1;
  transform: translateY(0);
}
html.login .actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 520px) {
  html.login .actions {
    flex-direction: column;
    align-items: stretch;
  }
}
html.login .btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  padding: 11px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, transform 0.02s ease, box-shadow 0.15s ease;
  box-shadow: 0 12px 22px rgba(30, 107, 214, 0.22);
}
html.login .btn:hover {
  background: var(--accentHover);
  box-shadow: 0 16px 30px rgba(30, 107, 214, 0.28);
}
html.login .btn:active {
  transform: translateY(1px);
}
html.login .btn:focus-visible {
  outline: 3px solid rgba(30, 107, 214, 0.35);
  outline-offset: 2px;
}
@media (max-width: 520px) {
  html.login .btn {
    width: 100%;
  }
}
html.login .link {
  align-self: center;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 750;
}
html.login .link:hover {
  text-decoration: underline;
}
@media (max-width: 520px) {
  html.login .link {
    text-align: center;
  }
}
html.login .pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(17, 24, 39, 0.04);
  cursor: pointer;
  color: var(--muted);
  font-weight: 750;
  padding: 7px 10px;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
html.login .pw-toggle:hover {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
}
html.login .pw-toggle:focus-visible {
  outline: 3px solid rgba(30, 107, 214, 0.35);
  outline-offset: 2px;
}
html.login {
  /* Footer */
}
html.login .footer {
  margin-top: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  align-content: center;
}
html.login .footer .footer__dpo {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-decoration: none;
}
html.login .footer .footer__dpo:hover {
  text-decoration: underline;
}
html.login .footer img {
  margin-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
html.login .help-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  z-index: 20;
}
html.login .help-modal[hidden] {
  display: none;
}
html.login .help-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(4px);
}
html.login .help-modal__dialog {
  position: relative;
  width: min(520px, 100%);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.35);
  padding: 20px 22px 18px;
  z-index: 1;
  display: grid;
  gap: 12px;
}
html.login .help-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
html.login .help-modal__header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #1f2a44;
}
html.login .help-modal__close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #d8e6ff;
  background: #f3f7ff;
  color: var(--accent);
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.02s ease;
}
html.login .help-modal__close:hover {
  background: #e3edff;
}
html.login .help-modal__close:active {
  transform: translateY(1px);
}
html.login .help-modal__close:focus-visible {
  outline: 3px solid rgba(30, 107, 214, 0.35);
  outline-offset: 2px;
}
html.login .help-modal__content p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
html.login .help-modal__content ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #111827;
  font-size: 13px;
  line-height: 1.5;
  display: grid;
  gap: 6px;
}
html.login {
  /* Motion accessibility */
}
@media (max-width: 520px) {
  html.login body {
    padding: 12px 10px 24px;
  }
  html.login .page {
    margin-top: 0.5rem;
  }
  html.login .topbar {
    margin-bottom: 12px;
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  html.login .brand {
    order: 1;
  }
  html.login .manualGuide--login {
    order: 2;
    min-height: 40px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 10px;
  }
  html.login .lang {
    order: 3;
    position: static;
    margin-top: 10px;
    width: min(320px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  html.login .lang button {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    padding: 7px 9px;
  }
  html.login .card {
    border-radius: 14px;
  }
  html.login .card:hover {
    transform: none;
  }
  html.login .card__inner {
    padding: 14px;
  }
  html.login .row {
    margin-bottom: 8px;
  }
  html.login .actions {
    gap: 8px;
    margin-top: 10px;
  }
  html.login .btn {
    min-height: 44px;
    padding: 10px 14px;
  }
  html.login .help-modal {
    padding: 14px 10px;
  }
  html.login .help-modal__dialog {
    border-radius: 14px;
    padding: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.login * {
    transition: none !important;
  }
}

body[data-standalone-detail=true] #tab-details.is-active .detailsLayout {
  min-height: calc(100vh - 245px);
  display: flex;
  flex-direction: column;
}
body[data-standalone-detail=true] #tab-details.is-active .detailsSubTables,
body[data-standalone-detail=true] #tab-details.is-active .detailsSubTable,
body[data-standalone-detail=true] #tab-details.is-active .detailsSubWrap {
  min-height: 0;
  flex: 1 1 auto;
}
body[data-standalone-detail=true] #tab-details.is-active .detailsSubTables,
body[data-standalone-detail=true] #tab-details.is-active .detailsSubTable {
  display: flex;
  flex-direction: column;
}
body[data-standalone-detail=true] #tab-details.is-active .detailsSubWrap {
  height: auto;
}

body.is-standalone-detail .topbar {
  display: none !important;
}
body.is-standalone-detail .panel[aria-label="Dossier search and list"] {
  position: relative;
  min-height: 66vh;
  background: transparent;
  border-color: #D6E3F8;
}
body.is-standalone-detail .panel[aria-label="Dossier search and list"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(237, 244, 255, 0.96) 0%, rgba(228, 239, 255, 0.98) 100%);
  border-radius: inherit;
  z-index: 0;
}
body.is-standalone-detail .panel[aria-label="Dossier search and list"] > *:not(.panel__top-accent) {
  display: none !important;
}
body.is-standalone-detail .panel[aria-label="Dossier search and list"] .panel__top-accent {
  position: relative;
  z-index: 1;
}
body.is-standalone-detail .footer {
  display: none !important;
}

body[data-standalone-detail=true] .topbar,
body[data-standalone-detail=true] .footer {
  display: none !important;
}
body[data-standalone-detail=true] .page--detail-only {
  min-height: 100vh;
  padding: 28px;
}
body[data-standalone-detail=true] .detailHuePanel {
  width: min(1120px, 100%);
  height: 72vh;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid #D6E3F8;
  background: linear-gradient(180deg, rgba(237, 244, 255, 0.96) 0%, rgba(228, 239, 255, 0.98) 100%);
  position: relative;
}
body[data-standalone-detail=true] .detailHuePanel__accent {
  height: 10px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #1E6BD6, #2EA4D6);
}

body.is-modalOpen:not(.is-standalone-detail) .topbar {
  display: none !important;
}
body.is-modalOpen:not(.is-standalone-detail) .panel[aria-label="Dossier search and list"] {
  position: relative;
  min-height: 66vh;
  background: transparent;
  border-color: #D6E3F8;
}
body.is-modalOpen:not(.is-standalone-detail) .panel[aria-label="Dossier search and list"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(237, 244, 255, 0.96) 0%, rgba(228, 239, 255, 0.98) 100%);
  border-radius: inherit;
  z-index: 0;
}
body.is-modalOpen:not(.is-standalone-detail) .panel[aria-label="Dossier search and list"] > *:not(.panel__top-accent) {
  display: none !important;
}
body.is-modalOpen:not(.is-standalone-detail) .panel[aria-label="Dossier search and list"] .panel__top-accent {
  position: relative;
  z-index: 1;
}

html.dashboardKlant,
html.dashboardDebiteur {
  /* Scoped tokens */
  --bg: #3F4146;
  --card: #FFFFFF;
  --text: #1F2937;
  --muted: #6B7280;
  --border: #E5E7EB;
  --accent: #1E6BD6;
  --accentHover: #1657AE;
  --success: #2EA44F;
  --successHover: #238A41;
  --shadow: 0 14px 35px rgba(0, 0, 0, .25);
  --radius: 14px;
}
html.dashboardKlant *,
html.dashboardDebiteur * {
  box-sizing: border-box;
}
html.dashboardKlant, html.dashboardKlant body,
html.dashboardDebiteur,
html.dashboardDebiteur body {
  height: auto;
  min-height: 100%;
}
html.dashboardKlant body,
html.dashboardDebiteur body {
  margin: 0;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: block;
  overflow-x: hidden;
  position: relative;
}
html.dashboardKlant body::before,
html.dashboardDebiteur body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background: radial-gradient(900px 500px at 50% 10%, rgba(255, 255, 255, 0.12), transparent 60%), radial-gradient(700px 420px at 20% 60%, rgba(30, 107, 214, 0.1), transparent 65%), radial-gradient(700px 420px at 80% 70%, rgba(30, 107, 214, 0.08), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
html.dashboardKlant body::after,
html.dashboardDebiteur body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, transparent 0 55%, rgba(0, 0, 0, 0.24) 90%);
  pointer-events: none;
  z-index: 0;
}
html.dashboardKlant body.is-modalOpen,
html.dashboardDebiteur body.is-modalOpen {
  overflow: hidden;
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* Top bar */
}
html.dashboardKlant .topbar,
html.dashboardDebiteur .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-bottom: 16px;
  background: rgba(63, 65, 70, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
html.dashboardKlant .topbar__inner,
html.dashboardDebiteur .topbar__inner {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 10px 6px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
@media (max-width: 900px) {
  html.dashboardKlant .topbar__inner,
  html.dashboardDebiteur .topbar__inner {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}
html.dashboardKlant .topbar__left,
html.dashboardDebiteur .topbar__left {
  justify-self: start;
}
html.dashboardKlant .topbar__center,
html.dashboardDebiteur .topbar__center {
  justify-self: center;
}
html.dashboardKlant .topbar__right,
html.dashboardDebiteur .topbar__right {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 900px) {
  html.dashboardKlant .topbar__left, html.dashboardKlant .topbar__center, html.dashboardKlant .topbar__right,
  html.dashboardDebiteur .topbar__left,
  html.dashboardDebiteur .topbar__center,
  html.dashboardDebiteur .topbar__right {
    justify-self: center;
  }
  html.dashboardKlant .topbar__right,
  html.dashboardDebiteur .topbar__right {
    flex-wrap: wrap;
    justify-content: center;
  }
}
html.dashboardKlant .brand,
html.dashboardDebiteur .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #F5F6F8;
}
html.dashboardKlant .brand .brand__mark,
html.dashboardDebiteur .brand .brand__mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
  display: grid;
  place-items: center;
}
html.dashboardKlant .brand .brand__mark img,
html.dashboardDebiteur .brand .brand__mark img {
  width: 28px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16));
}
html.dashboardKlant .brand .brand__meta,
html.dashboardDebiteur .brand .brand__meta {
  line-height: 1.05;
}
html.dashboardKlant .brand .brand__meta .brand__env,
html.dashboardDebiteur .brand .brand__meta .brand__env {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html.dashboardKlant .brand .brand__meta .brand__name,
html.dashboardDebiteur .brand .brand__meta .brand__name {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 780;
  color: #FFFFFF;
}
html.dashboardKlant .pageTitle,
html.dashboardDebiteur .pageTitle {
  color: #FFFFFF;
  font-weight: 850;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}
html.dashboardKlant .iconbar,
html.dashboardDebiteur .iconbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html.dashboardKlant .iconbtn,
html.dashboardDebiteur .iconbtn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #F5F6F8;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.02s ease, border-color 0.15s ease;
}
html.dashboardKlant .iconbtn svg,
html.dashboardDebiteur .iconbtn svg {
  width: 20px;
  height: 20px;
}
html.dashboardKlant .iconbtn:hover,
html.dashboardDebiteur .iconbtn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
html.dashboardKlant .iconbtn:active,
html.dashboardDebiteur .iconbtn:active {
  transform: translateY(1px);
}
html.dashboardKlant .iconbtn:focus-visible,
html.dashboardDebiteur .iconbtn:focus-visible {
  outline: 3px solid rgba(30, 107, 214, 0.35);
  outline-offset: 2px;
}
html.dashboardKlant .iconbtn.iconbtn--danger,
html.dashboardDebiteur .iconbtn.iconbtn--danger {
  color: #FFD6D6;
  border-color: rgba(255, 120, 120, 0.25);
  background: rgba(255, 80, 80, 0.12);
}
html.dashboardKlant .iconbtn.iconbtn--danger:hover,
html.dashboardDebiteur .iconbtn.iconbtn--danger:hover {
  background: rgba(255, 80, 80, 0.18);
}
html.dashboardKlant .lang,
html.dashboardDebiteur .lang {
  display: inline-flex;
  gap: 8px;
  margin-left: 0.75rem;
}
html.dashboardKlant .lang button,
html.dashboardDebiteur .lang button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #F5F6F8;
  padding: 9px 11px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.02s ease;
}
html.dashboardKlant .lang button[aria-pressed=true],
html.dashboardDebiteur .lang button[aria-pressed=true] {
  background: rgba(30, 107, 214, 0.22);
  border-color: rgba(30, 107, 214, 0.55);
}
html.dashboardKlant .lang button[aria-pressed=true]:hover,
html.dashboardDebiteur .lang button[aria-pressed=true]:hover {
  background: rgba(11, 65, 139, 0.22);
}
html.dashboardKlant .lang button:hover,
html.dashboardDebiteur .lang button:hover {
  background: rgba(255, 255, 255, 0.12);
}
html.dashboardKlant .lang button:active,
html.dashboardDebiteur .lang button:active {
  transform: translateY(1px);
}
html.dashboardKlant .page,
html.dashboardDebiteur .page {
  width: min(1200px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* Main panel */
}
html.dashboardKlant .panel,
html.dashboardDebiteur .panel {
  background: rgba(255, 255, 255, 0.97);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
  overflow: hidden;
}
html.dashboardKlant .panel__top-accent,
html.dashboardDebiteur .panel__top-accent {
  height: 6px;
  background: linear-gradient(90deg, var(--accent), rgba(30, 107, 214, 0.55));
}
html.dashboardKlant .panel__header,
html.dashboardDebiteur .panel__header {
  padding: 18px 20px 10px;
}
html.dashboardKlant .panel__header .panel__title,
html.dashboardDebiteur .panel__header .panel__title {
  font-size: 18px;
  font-weight: 850;
  color: #1F2A44;
  margin: 0;
}
html.dashboardKlant .panel__header .panel__subtitle,
html.dashboardDebiteur .panel__header .panel__subtitle {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* Filters */
}
html.dashboardKlant .filters,
html.dashboardDebiteur .filters {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
html.dashboardKlant .filters .filters__row,
html.dashboardDebiteur .filters .filters__row {
  display: grid;
  grid-template-columns: 260px 1fr 260px auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 900px) {
  html.dashboardKlant .filters .filters__row,
  html.dashboardDebiteur .filters .filters__row {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .filters .filters__actions,
html.dashboardDebiteur .filters .filters__actions {
  display: inline-flex;
  gap: 10px;
}
@media (max-width: 900px) {
  html.dashboardKlant .filters .filters__actions,
  html.dashboardDebiteur .filters .filters__actions {
    width: 100%;
    justify-content: flex-end;
  }
}
html.dashboardKlant .filters .filters__hint,
html.dashboardDebiteur .filters .filters__hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
html.dashboardKlant .field,
html.dashboardDebiteur .field {
  display: grid;
  gap: 6px;
}
html.dashboardKlant .field label,
html.dashboardDebiteur .field label {
  font-size: 12px;
  font-weight: 750;
  color: #374151;
}
html.dashboardKlant .field select, html.dashboardKlant .field input, html.dashboardKlant .field textarea,
html.dashboardDebiteur .field select,
html.dashboardDebiteur .field input,
html.dashboardDebiteur .field textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
html.dashboardKlant .field select:focus, html.dashboardKlant .field input:focus, html.dashboardKlant .field textarea:focus,
html.dashboardDebiteur .field select:focus,
html.dashboardDebiteur .field input:focus,
html.dashboardDebiteur .field textarea:focus {
  border-color: rgba(30, 107, 214, 0.75);
  box-shadow: 0 0 0 4px rgba(30, 107, 214, 0.14);
}
html.dashboardKlant .field textarea,
html.dashboardDebiteur .field textarea {
  resize: none;
}
html.dashboardKlant .field.field--grow,
html.dashboardDebiteur .field.field--grow {
  min-width: 240px;
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* Buttons */
}
html.dashboardKlant .btn,
html.dashboardDebiteur .btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 16px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, transform 0.02s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
html.dashboardKlant .btn:active,
html.dashboardDebiteur .btn:active {
  transform: translateY(1px);
}
html.dashboardKlant .btn:focus-visible,
html.dashboardDebiteur .btn:focus-visible {
  outline: 3px solid rgba(30, 107, 214, 0.35);
  outline-offset: 2px;
}
html.dashboardKlant .btn:disabled,
html.dashboardDebiteur .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
html.dashboardKlant .btn.btn--primary,
html.dashboardDebiteur .btn.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 22px rgba(30, 107, 214, 0.2);
}
html.dashboardKlant .btn.btn--primary:hover,
html.dashboardDebiteur .btn.btn--primary:hover {
  background: var(--accentHover);
}
html.dashboardKlant .btn.btn--success,
html.dashboardDebiteur .btn.btn--success {
  background: var(--success);
  color: #fff;
  box-shadow: 0 12px 22px rgba(46, 164, 79, 0.18);
}
html.dashboardKlant .btn.btn--success:hover,
html.dashboardDebiteur .btn.btn--success:hover {
  background: var(--successHover);
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* Table */
}
html.dashboardKlant .tableWrap,
html.dashboardDebiteur .tableWrap {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0 10px 10px;
  overflow: auto;
}
html.dashboardKlant .table,
html.dashboardDebiteur .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13px;
}
html.dashboardKlant .table thead th,
html.dashboardDebiteur .table thead th {
  position: sticky;
  top: 0;
  background: #F6F8FB;
  color: #334155;
  font-weight: 850;
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
html.dashboardKlant .table tbody td,
html.dashboardDebiteur .table tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dashboardKlant .table th:nth-child(1),
html.dashboardKlant .table td:nth-child(1),
html.dashboardDebiteur .table th:nth-child(1),
html.dashboardDebiteur .table td:nth-child(1) {
  width: 110px;
  max-width: 110px;
}
html.dashboardKlant .table th:nth-child(3),
html.dashboardKlant .table td:nth-child(3),
html.dashboardDebiteur .table th:nth-child(3),
html.dashboardDebiteur .table td:nth-child(3) {
  width: 240px;
  max-width: 240px;
}
html.dashboardKlant .table th:nth-child(7),
html.dashboardKlant .table td:nth-child(7),
html.dashboardDebiteur .table th:nth-child(7),
html.dashboardDebiteur .table td:nth-child(7) {
  width: 130px;
  max-width: 130px;
  text-align: left;
}
html.dashboardKlant .table tbody tr,
html.dashboardDebiteur .table tbody tr {
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: background 0.12s ease;
}
html.dashboardKlant .table tbody tr:nth-child(even),
html.dashboardDebiteur .table tbody tr:nth-child(even) {
  background: #F3F8FF;
}
html.dashboardKlant .table tbody tr:hover,
html.dashboardDebiteur .table tbody tr:hover {
  background: rgba(30, 107, 214, 0.08);
}
html.dashboardKlant .table tbody tr.is-selected,
html.dashboardDebiteur .table tbody tr.is-selected {
  background: rgba(30, 107, 214, 0.14) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
html.dashboardKlant .table tbody tr:focus-visible,
html.dashboardDebiteur .table tbody tr:focus-visible {
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 3px rgba(30, 107, 214, 0.25);
}
html.dashboardKlant .tableLoadingRow,
html.dashboardDebiteur .tableLoadingRow {
  pointer-events: none;
}
html.dashboardKlant .tableLoadingRow td .loadingBar,
html.dashboardDebiteur .tableLoadingRow td .loadingBar {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.25), rgba(148, 163, 184, 0.5), rgba(148, 163, 184, 0.25));
  background-size: 220% 100%;
  animation: sbLoading 1.2s ease-in-out infinite;
}
html.dashboardKlant .tabPanel,
html.dashboardDebiteur .tabPanel {
  position: relative;
}
html.dashboardKlant .tabPanel.is-loading::after,
html.dashboardDebiteur .tabPanel.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(1px);
  pointer-events: none;
}
html.dashboardKlant .tabPanel.is-loading::before,
html.dashboardDebiteur .tabPanel.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid rgba(30, 107, 214, 0.28);
  border-top-color: #1e6bd6;
  animation: sbSpin 0.8s linear infinite;
  z-index: 3;
}
@keyframes sbLoading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@keyframes sbSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
html.dashboardKlant .tablePagination,
html.dashboardDebiteur .tablePagination {
  padding: 0 20px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
html.dashboardKlant .tablePagination .pageInfoControl,
html.dashboardDebiteur .tablePagination .pageInfoControl {
  color: #475569;
  font-size: 13px;
  min-width: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
html.dashboardKlant .tablePagination .pageInfoControl #pageInput,
html.dashboardDebiteur .tablePagination .pageInfoControl #pageInput {
  width: 70px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  padding: 0 8px;
  text-align: center;
  font-weight: 700;
}
html.dashboardKlant .legend,
html.dashboardDebiteur .legend {
  padding: 8px 20px 18px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
html.dashboardKlant .legend:not([open]) .legend__item,
html.dashboardDebiteur .legend:not([open]) .legend__item {
  display: none;
}
html.dashboardKlant .legend .legend__title,
html.dashboardDebiteur .legend .legend__title {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 800;
  color: #1F2A44;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(30, 107, 214, 0.2);
  background: rgba(30, 107, 214, 0.08);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
html.dashboardKlant .legend .legend__title:hover,
html.dashboardDebiteur .legend .legend__title:hover {
  background: rgba(30, 107, 214, 0.14);
  border-color: rgba(30, 107, 214, 0.35);
}
html.dashboardKlant .legend .legend__title::-webkit-details-marker,
html.dashboardDebiteur .legend .legend__title::-webkit-details-marker {
  display: none;
}
html.dashboardKlant .legend .legend__title::before,
html.dashboardDebiteur .legend .legend__title::before {
  content: "▸";
  font-size: 18px;
  color: #1E6BD6;
  line-height: 1;
}
html.dashboardKlant .legend[open] .legend__title::before,
html.dashboardDebiteur .legend[open] .legend__title::before {
  content: "▾";
}
html.dashboardKlant .legend .legend__item,
html.dashboardDebiteur .legend .legend__item {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 4px;
  margin-bottom: 4px;
}
html.dashboardKlant .legend .pill,
html.dashboardDebiteur .legend .pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(30, 107, 214, 0.25);
  background: rgba(30, 107, 214, 0.1);
  color: #1F2A44;
  font-weight: 850;
  letter-spacing: 0.02em;
}
html.dashboardKlant .footer,
html.dashboardDebiteur .footer {
  margin-top: 18px;
  margin-bottom: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  align-content: center;
}
html.dashboardKlant .footer img,
html.dashboardDebiteur .footer img {
  margin-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* =========================
     MODAL (popup dossier tabs)
     ========================= */
}
html.dashboardKlant .modal,
html.dashboardDebiteur .modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
html.dashboardKlant .modal.is-open,
html.dashboardDebiteur .modal.is-open {
  display: block;
}
html.dashboardKlant .modal__overlay,
html.dashboardDebiteur .modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
html.dashboardKlant .modal__dialog,
html.dashboardDebiteur .modal__dialog {
  position: relative;
  width: min(1100px, 100% - 28px);
  margin: 2rem auto;
  max-height: calc(100svh - 28px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 4rem);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html.dashboardKlant .algemeenLayout,
html.dashboardDebiteur .algemeenLayout {
  padding: 14px;
}
@media (max-width: 600px) {
  html.dashboardKlant .algemeenLayout,
  html.dashboardDebiteur .algemeenLayout {
    padding: 10px;
  }
}
html.dashboardKlant .algemeenHead,
html.dashboardDebiteur .algemeenHead {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  html.dashboardKlant .algemeenHead,
  html.dashboardDebiteur .algemeenHead {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .algemeenFields,
html.dashboardDebiteur .algemeenFields {
  display: grid;
  gap: 8px;
}
html.dashboardKlant #tab-algemeen .formRow,
html.dashboardDebiteur #tab-algemeen .formRow {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 0.2rem;
}
html.dashboardKlant #tab-algemeen .formRow label,
html.dashboardDebiteur #tab-algemeen .formRow label {
  color: #374151;
  font-size: 13px;
  white-space: nowrap;
}
html.dashboardKlant #tab-algemeen .formRow.formRow--full,
html.dashboardDebiteur #tab-algemeen .formRow.formRow--full {
  grid-template-columns: 170px 1fr;
}
html.dashboardKlant #tab-algemeen .formRow.formRow--split .splitInputs,
html.dashboardDebiteur #tab-algemeen .formRow.formRow--split .splitInputs {
  display: grid;
  grid-template-columns: 1fr auto 120px;
  gap: 10px;
  align-items: center;
}
html.dashboardKlant #tab-algemeen .formRow.formRow--split .splitLabel,
html.dashboardDebiteur #tab-algemeen .formRow.formRow--split .splitLabel {
  color: #6B7280;
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 900px) {
  html.dashboardKlant #tab-algemeen .formRow,
  html.dashboardDebiteur #tab-algemeen .formRow {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  html.dashboardKlant #tab-algemeen .formRow label,
  html.dashboardDebiteur #tab-algemeen .formRow label {
    white-space: normal;
  }
  html.dashboardKlant #tab-algemeen .formRow.formRow--full,
  html.dashboardDebiteur #tab-algemeen .formRow.formRow--full {
    grid-template-columns: 1fr;
  }
  html.dashboardKlant #tab-algemeen .formRow.formRow--split .splitInputs,
  html.dashboardDebiteur #tab-algemeen .formRow.formRow--split .splitInputs {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
html.dashboardKlant .legacyInput,
html.dashboardDebiteur .legacyInput {
  height: 26px;
  padding: 3px 8px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: 13px;
}
html.dashboardKlant #tab-toestand .legacyInput,
html.dashboardDebiteur #tab-toestand .legacyInput {
  text-align: right;
}
html.dashboardKlant .statusBox,
html.dashboardDebiteur .statusBox {
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #f8fafc;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}
html.dashboardKlant .statusBox label,
html.dashboardDebiteur .statusBox label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #6B7280;
  font-size: 13px;
}
@media (max-width: 600px) {
  html.dashboardKlant .statusBox,
  html.dashboardDebiteur .statusBox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}
html.dashboardKlant .algemeenMid,
html.dashboardDebiteur .algemeenMid {
  margin-top: 12px;
}
html.dashboardKlant .midBox,
html.dashboardDebiteur .midBox {
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #f8fafc;
  padding: 12px;
  display: grid;
  gap: 10px;
}
html.dashboardKlant .algemeenBottom,
html.dashboardDebiteur .algemeenBottom {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  html.dashboardKlant .algemeenBottom,
  html.dashboardDebiteur .algemeenBottom {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .courtBox,
html.dashboardDebiteur .courtBox {
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #f8fafc;
  padding: 12px;
}
html.dashboardKlant .legacyTextarea,
html.dashboardDebiteur .legacyTextarea {
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  padding: 8px;
  resize: none;
  font-size: 13px;
}
html.dashboardKlant .agendaBox,
html.dashboardDebiteur .agendaBox {
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #f8fafc;
  padding: 12px;
}
html.dashboardKlant .agendaTitle,
html.dashboardDebiteur .agendaTitle {
  text-align: center;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}
html.dashboardKlant .agendaTableWrap,
html.dashboardDebiteur .agendaTableWrap {
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
}
@media (max-width: 900px) {
  html.dashboardKlant .agendaTableWrap,
  html.dashboardDebiteur .agendaTableWrap {
    overflow: auto;
  }
}
html.dashboardKlant .agendaTable,
html.dashboardDebiteur .agendaTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
@media (max-width: 900px) {
  html.dashboardKlant .agendaTable,
  html.dashboardDebiteur .agendaTable {
    min-width: 420px;
  }
}
html.dashboardKlant .agendaTable th, html.dashboardKlant .agendaTable td,
html.dashboardDebiteur .agendaTable th,
html.dashboardDebiteur .agendaTable td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
html.dashboardKlant .agendaTable thead th,
html.dashboardDebiteur .agendaTable thead th {
  background: #f3f4f6;
  font-weight: 700;
}
html.dashboardKlant .agendaTable tbody tr:nth-child(even),
html.dashboardDebiteur .agendaTable tbody tr:nth-child(even) {
  background: #e9f4ff;
}
html.dashboardKlant .agendaScroll,
html.dashboardDebiteur .agendaScroll {
  max-height: 260px;
  overflow: auto;
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* Blue dossier bar (like screenshots) */
}
html.dashboardKlant .dossierBar,
html.dashboardDebiteur .dossierBar {
  background: linear-gradient(90deg, var(--accent), rgb(30, 107, 214));
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
html.dashboardKlant .dossierBar__left,
html.dashboardDebiteur .dossierBar__left {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
html.dashboardKlant .dossierIcon,
html.dashboardDebiteur .dossierIcon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.02s ease;
}
html.dashboardKlant .dossierIcon svg,
html.dashboardDebiteur .dossierIcon svg {
  width: 20px;
  height: 20px;
  color: inherit;
  fill: none;
}
html.dashboardKlant .dossierIcon svg *,
html.dashboardDebiteur .dossierIcon svg * {
  stroke: currentColor;
}
html.dashboardKlant .dossierIcon:hover,
html.dashboardDebiteur .dossierIcon:hover {
  background: rgba(255, 255, 255, 0.16);
}
html.dashboardKlant .dossierIcon:active,
html.dashboardDebiteur .dossierIcon:active {
  transform: translateY(1px);
}
html.dashboardKlant .dossierIcon.dossierIcon--danger,
html.dashboardDebiteur .dossierIcon.dossierIcon--danger {
  border-color: rgba(255, 120, 120, 0.3);
  background: rgba(255, 80, 80, 0.16);
}
html.dashboardKlant .dossierIcon.dossierIcon--danger:hover,
html.dashboardDebiteur .dossierIcon.dossierIcon--danger:hover {
  background: rgba(255, 80, 80, 0.22);
}
html.dashboardKlant .dossierBar__title,
html.dashboardDebiteur .dossierBar__title {
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 0 6px;
}
html.dashboardKlant .dossierBar__title .sep,
html.dashboardDebiteur .dossierBar__title .sep {
  opacity: 0.8;
  padding: 0 6px;
}
html.dashboardKlant .dossierBar__right,
html.dashboardDebiteur .dossierBar__right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html.dashboardKlant .dossierLangSelect,
html.dashboardDebiteur .dossierLangSelect {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: rgba(255, 255, 255, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3.5 6 4.5 4 4.5-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  color: #fff;
  min-height: 42px;
  padding: 10px 34px 10px 12px;
  border-radius: 12px;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
html.dashboardKlant .dossierLangSelect option,
html.dashboardDebiteur .dossierLangSelect option {
  color: #0f172a;
}
html.dashboardKlant .dossierClose,
html.dashboardDebiteur .dossierClose {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: background 0.15s ease, transform 0.02s ease;
}
html.dashboardKlant .dossierClose:hover,
html.dashboardDebiteur .dossierClose:hover {
  background: rgba(255, 255, 255, 0.16);
}
html.dashboardKlant .dossierClose:active,
html.dashboardDebiteur .dossierClose:active {
  transform: translateY(1px);
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* Tabs */
}
html.dashboardKlant .tabs,
html.dashboardDebiteur .tabs {
  background: #EAF2FF;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  html.dashboardKlant .tabs,
  html.dashboardDebiteur .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
}
@media (max-width: 600px) {
  html.dashboardKlant .tabs,
  html.dashboardDebiteur .tabs {
    gap: 4px;
    padding: 6px 8px;
    scroll-snap-type: x mandatory;
  }
}
html.dashboardKlant .tab,
html.dashboardDebiteur .tab {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(30, 107, 214, 0.22);
  background: rgba(255, 255, 255, 0.65);
  color: #1F2A44;
  padding: 9px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  min-height: 36px;
  transition: background 0.15s ease, transform 0.02s ease;
  white-space: nowrap;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
html.dashboardKlant .tab:hover,
html.dashboardDebiteur .tab:hover {
  background: rgba(255, 255, 255, 0.92);
}
html.dashboardKlant .tab:active,
html.dashboardDebiteur .tab:active {
  transform: translateY(1px);
}
html.dashboardKlant .tab.is-active,
html.dashboardDebiteur .tab.is-active {
  background: rgba(30, 107, 214, 0.4);
  box-shadow: 0 10px 20px rgba(17, 24, 39, 0.1);
  border-color: rgba(30, 107, 214, 0.4);
}
@media (max-width: 600px) {
  html.dashboardKlant .tab,
  html.dashboardDebiteur .tab {
    padding: 7px 9px;
    font-size: 13px;
    border-radius: 10px;
  }
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* Modal content */
}
html.dashboardKlant .modalBody,
html.dashboardDebiteur .modalBody {
  background: rgba(255, 255, 255, 0.97);
  padding: 14px;
  overflow: auto;
}
@media (max-width: 600px) {
  html.dashboardKlant .modalBody,
  html.dashboardDebiteur .modalBody {
    padding: 10px;
  }
}
html.dashboardKlant .tabPanel,
html.dashboardDebiteur .tabPanel {
  display: none;
}
html.dashboardKlant .tabPanel.is-active,
html.dashboardDebiteur .tabPanel.is-active {
  display: block;
}
html.dashboardKlant .grid2,
html.dashboardDebiteur .grid2 {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}
@media (max-width: 900px) {
  html.dashboardKlant .grid2,
  html.dashboardDebiteur .grid2 {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .cardIn,
html.dashboardDebiteur .cardIn {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(17, 24, 39, 0.08);
  padding: 14px;
}
html.dashboardKlant .cardIn .cardIn__title,
html.dashboardDebiteur .cardIn .cardIn__title {
  font-weight: 900;
  color: #1F2A44;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 0.02em;
}
html.dashboardKlant .cardIn__soft,
html.dashboardDebiteur .cardIn__soft {
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid rgba(30, 107, 214, 0.18);
  background: rgba(30, 107, 214, 0.06);
  padding: 12px;
}
html.dashboardKlant .cardIn__soft .softTitle,
html.dashboardDebiteur .cardIn__soft .softTitle {
  font-weight: 900;
  color: #1F2A44;
  font-size: 13px;
}
html.dashboardKlant .cardIn__soft .softText,
html.dashboardDebiteur .cardIn__soft .softText {
  margin: 6px 0 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}
html.dashboardKlant .kv,
html.dashboardDebiteur .kv {
  display: grid;
  gap: 8px;
}
html.dashboardKlant .kv .kv__row,
html.dashboardDebiteur .kv .kv__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
@media (max-width: 900px) {
  html.dashboardKlant .kv .kv__row,
  html.dashboardDebiteur .kv .kv__row {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .kv .k,
html.dashboardDebiteur .kv .k {
  font-weight: 850;
  color: #334155;
  font-size: 12px;
}
html.dashboardKlant .kv .v,
html.dashboardDebiteur .kv .v {
  color: #111827;
  font-size: 13px;
}
html.dashboardKlant .tableMiniWrap,
html.dashboardDebiteur .tableMiniWrap {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
html.dashboardKlant .tableMini,
html.dashboardDebiteur .tableMini {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 620px;
  font-size: 13px;
}
html.dashboardKlant .tableMini thead th,
html.dashboardDebiteur .tableMini thead th {
  background: #F6F8FB;
  color: #334155;
  font-weight: 900;
  text-align: left;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
html.dashboardKlant .tableMini tbody td,
html.dashboardDebiteur .tableMini tbody td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}
html.dashboardKlant .tableMini tbody tr:nth-child(even),
html.dashboardDebiteur .tableMini tbody tr:nth-child(even) {
  background: #F3F8FF;
}
html.dashboardKlant .note,
html.dashboardDebiteur .note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
html.dashboardKlant .placeholderChart,
html.dashboardDebiteur .placeholderChart {
  height: 220px;
  border-radius: 14px;
  border: 1px dashed rgba(30, 107, 214, 0.35);
  background: radial-gradient(circle at 30% 20%, rgba(30, 107, 214, 0.12), transparent 60%), linear-gradient(180deg, rgba(30, 107, 214, 0.06), rgba(30, 107, 214, 0.02));
}
html.dashboardKlant .placeholderChart--pie,
html.dashboardDebiteur .placeholderChart--pie {
  height: 180px;
  width: 180px;
  border-radius: 50%;
  margin: 6px auto 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: radial-gradient(circle at center, #fff 0 55%, transparent 56% 100%), conic-gradient(rgba(46, 164, 79, 0.25) 0 25%, rgba(245, 158, 11, 0.25) 25% 50%, rgba(239, 68, 68, 0.25) 50% 75%, rgba(30, 107, 214, 0.25) 75% 100%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.6);
}
html.dashboardKlant .toestandLayout,
html.dashboardDebiteur .toestandLayout {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (max-width: 900px) {
  html.dashboardKlant .toestandLayout,
  html.dashboardDebiteur .toestandLayout {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .toestandCard .cardIn__title,
html.dashboardDebiteur .toestandCard .cardIn__title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
html.dashboardKlant .toestandGrid,
html.dashboardDebiteur .toestandGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) {
  html.dashboardKlant .toestandGrid,
  html.dashboardDebiteur .toestandGrid {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .toestandGroup__title,
html.dashboardDebiteur .toestandGroup__title {
  font-weight: 900;
  color: #1F2A44;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin: 10px 0 8px;
}
html.dashboardKlant .toestandFields,
html.dashboardDebiteur .toestandFields {
  display: grid;
  gap: 12px;
}
html.dashboardKlant .toestandGrid--ordered,
html.dashboardDebiteur .toestandGrid--ordered {
  align-items: start;
  -moz-column-gap: 24px;
       column-gap: 24px;
}
html.dashboardKlant .toestandGroup--stacked,
html.dashboardDebiteur .toestandGroup--stacked {
  display: grid;
  gap: 14px;
}
html.dashboardKlant .toestandSubgroup,
html.dashboardDebiteur .toestandSubgroup {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  display: grid;
  gap: 10px;
}
html.dashboardKlant .toestandSubgroup--bottom,
html.dashboardDebiteur .toestandSubgroup--bottom {
  margin-top: 10px;
}
html.dashboardKlant .toestandField,
html.dashboardDebiteur .toestandField {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(230px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #F8FAFC;
}
@media (max-width: 900px) {
  html.dashboardKlant .toestandField,
  html.dashboardDebiteur .toestandField {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
html.dashboardKlant .toestandField label,
html.dashboardDebiteur .toestandField label {
  font-weight: 850;
  color: #334155;
  font-size: 12px;
}
html.dashboardKlant .toestandField--algemeenTotaal .legacyInput,
html.dashboardDebiteur .toestandField--algemeenTotaal .legacyInput {
  color: var(--accent) !important;
  font-weight: 900;
}
html.dashboardKlant .toestandField--divider,
html.dashboardDebiteur .toestandField--divider {
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  border-top: 3px solid rgba(15, 23, 42, 0.35);
  border-radius: 0;
  grid-template-columns: 1fr;
}
html.dashboardKlant .toestandCharts,
html.dashboardDebiteur .toestandCharts {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  html.dashboardKlant .toestandCharts,
  html.dashboardDebiteur .toestandCharts {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .toestandCharts > .cardIn,
html.dashboardDebiteur .toestandCharts > .cardIn {
  display: flex;
  flex-direction: column;
}
html.dashboardKlant .toestandPie,
html.dashboardDebiteur .toestandPie {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 14px;
  align-items: center;
}
@media (max-width: 900px) {
  html.dashboardKlant .toestandPie,
  html.dashboardDebiteur .toestandPie {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .toestandPie__chart,
html.dashboardDebiteur .toestandPie__chart {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  margin: 0 auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: radial-gradient(circle at center, #fff 0 55%, transparent 56% 100%), conic-gradient(rgba(46, 164, 79, 0.25) 0 33%, rgba(245, 158, 11, 0.25) 33% 66%, rgba(30, 107, 214, 0.25) 66% 100%);
  position: relative;
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
  html.dashboardKlant .toestandPie__chart,
  html.dashboardDebiteur .toestandPie__chart {
    width: 170px;
    height: 170px;
  }
}
html.dashboardKlant .toestandPie__legend,
html.dashboardDebiteur .toestandPie__legend {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #1F2A44;
}
html.dashboardKlant .toestandPie__values,
html.dashboardDebiteur .toestandPie__values {
  margin-top: auto;
  display: grid;
  gap: 6px;
  font-size: 12px;
  padding-top: 10px;
}
html.dashboardKlant .toestandValueRow,
html.dashboardDebiteur .toestandValueRow {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #1F2A44;
  font-weight: 700;
}
html.dashboardKlant .toestandPie__values--histogram,
html.dashboardDebiteur .toestandPie__values--histogram {
  margin-top: 14px;
}
html.dashboardKlant .legendDot,
html.dashboardDebiteur .legendDot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
html.dashboardKlant .legendDot--geind,
html.dashboardDebiteur .legendDot--geind {
  background: rgba(46, 164, 79, 0.75);
}
html.dashboardKlant .legendDot--kosten,
html.dashboardDebiteur .legendDot--kosten {
  background: rgba(245, 158, 11, 0.75);
}
html.dashboardKlant .legendDot--openstaand,
html.dashboardDebiteur .legendDot--openstaand {
  background: rgba(30, 107, 214, 0.75);
}
html.dashboardKlant .inningHistogram,
html.dashboardDebiteur .inningHistogram {
  display: grid;
  grid-auto-flow: column;
  align-items: end;
  gap: 12px;
  height: 190px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #F8FAFC;
  overflow-x: auto;
}
html.dashboardKlant .inningHistogram__group,
html.dashboardDebiteur .inningHistogram__group {
  display: grid;
  align-items: end;
  gap: 6px;
  min-width: 46px;
}
html.dashboardKlant .inningHistogram__bars,
html.dashboardDebiteur .inningHistogram__bars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  align-items: end;
  height: 130px;
}
html.dashboardKlant .inningHistogram__bar,
html.dashboardDebiteur .inningHistogram__bar {
  display: block;
  width: 100%;
  min-height: 6px;
  border-radius: 6px 6px 0 0;
}
html.dashboardKlant .inningHistogram__bar--kosten,
html.dashboardDebiteur .inningHistogram__bar--kosten {
  background: rgba(245, 158, 11, 0.7);
}
html.dashboardKlant .inningHistogram__bar--inning,
html.dashboardDebiteur .inningHistogram__bar--inning {
  background: rgba(46, 164, 79, 0.75);
}
html.dashboardKlant .inningHistogram__label,
html.dashboardDebiteur .inningHistogram__label {
  font-size: 11px;
  text-align: center;
  color: #475569;
  font-weight: 700;
}
html.dashboardKlant .inningHistogram__legend,
html.dashboardDebiteur .inningHistogram__legend {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #1F2A44;
}
html.dashboardKlant .afrekeningLayout,
html.dashboardDebiteur .afrekeningLayout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  html.dashboardKlant .afrekeningLayout,
  html.dashboardDebiteur .afrekeningLayout {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .afrekeningSheet,
html.dashboardDebiteur .afrekeningSheet {
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #F8FAFC;
  border-radius: 12px;
  padding: 12px;
  min-height: 360px;
  display: grid;
  gap: 10px;
}
html.dashboardKlant .afrekeningList,
html.dashboardDebiteur .afrekeningList {
  display: grid;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.15);
  border-bottom: 1px solid rgba(15, 23, 42, 0.15);
}
html.dashboardKlant .afrekeningRow,
html.dashboardDebiteur .afrekeningRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: #1F2A44;
  font-weight: 700;
}
html.dashboardKlant .afrekeningRow[hidden],
html.dashboardDebiteur .afrekeningRow[hidden] {
  display: none !important;
}
html.dashboardKlant .afrekeningRow--underline,
html.dashboardDebiteur .afrekeningRow--underline {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.15);
  margin-bottom: 2px;
}
html.dashboardKlant .afrekeningRow--summary,
html.dashboardKlant .afrekeningRow--total,
html.dashboardDebiteur .afrekeningRow--summary,
html.dashboardDebiteur .afrekeningRow--total {
  font-weight: 900;
}
html.dashboardKlant .afrekeningRow--negative,
html.dashboardDebiteur .afrekeningRow--negative {
  color: var(--accent);
  font-weight: 900;
}
html.dashboardKlant .afrekeningRow__detail,
html.dashboardDebiteur .afrekeningRow__detail {
  font-size: 11px;
  color: #64748B;
  line-height: 1.4;
  margin-top: -4px;
}
html.dashboardKlant .afrekeningActions,
html.dashboardDebiteur .afrekeningActions {
  display: grid;
  gap: 10px;
  padding-top: 34px;
  justify-items: center;
}
@media (max-width: 900px) {
  html.dashboardKlant .afrekeningActions,
  html.dashboardDebiteur .afrekeningActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
    padding-top: 12px;
  }
}
html.dashboardKlant .afrekeningAction,
html.dashboardDebiteur .afrekeningAction {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #FFFFFF;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
  display: grid;
  place-items: center;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  padding: 12px;
}
@media (max-width: 900px) {
  html.dashboardKlant .afrekeningAction,
  html.dashboardDebiteur .afrekeningAction {
    width: 100%;
    height: 48px;
    font-size: 14px;
  }
}
html.dashboardKlant .afrekeningAction__icon,
html.dashboardDebiteur .afrekeningAction__icon {
  width: 24px;
  height: 24px;
  color: #1F2A44;
}
html.dashboardKlant .afrekeningAction__icon path,
html.dashboardKlant .afrekeningAction__icon rect,
html.dashboardKlant .afrekeningAction__icon circle,
html.dashboardDebiteur .afrekeningAction__icon path,
html.dashboardDebiteur .afrekeningAction__icon rect,
html.dashboardDebiteur .afrekeningAction__icon circle {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.dashboardKlant .afrekeningAction:not(:disabled):hover,
html.dashboardKlant .afrekeningAction:not(:disabled):focus-visible,
html.dashboardDebiteur .afrekeningAction:not(:disabled):hover,
html.dashboardDebiteur .afrekeningAction:not(:disabled):focus-visible {
  background: #F3F8FF;
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}
html.dashboardKlant .afrekeningAction:disabled,
html.dashboardDebiteur .afrekeningAction:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html.dashboardKlant .infoLayout,
html.dashboardDebiteur .infoLayout {
  display: grid;
  gap: 16px;
}
html.dashboardKlant .infoSheet,
html.dashboardDebiteur .infoSheet {
  border: 1px solid rgba(15, 23, 42, 0.15);
  background: #F8FAFC;
  border-radius: 12px;
  padding: 12px;
  min-height: 260px;
}
html.dashboardKlant .infoSheet__title,
html.dashboardDebiteur .infoSheet__title {
  font-weight: 900;
  color: #1F2A44;
  font-size: 12px;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
html.dashboardKlant .infoSheet__body,
html.dashboardDebiteur .infoSheet__body {
  min-height: 200px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  padding: 10px;
  font-size: 12px;
  color: #475569;
  white-space: pre-line;
}
html.dashboardKlant .infoFooter,
html.dashboardDebiteur .infoFooter {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 12px;
  background: #F8FAFC;
  display: grid;
  gap: 12px;
}
html.dashboardKlant .infoRow,
html.dashboardDebiteur .infoRow {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #1F2A44;
}
@media (max-width: 900px) {
  html.dashboardKlant .infoRow,
  html.dashboardDebiteur .infoRow {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .infoGoods,
html.dashboardDebiteur .infoGoods {
  display: grid;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #1F2A44;
}
html.dashboardKlant .infoGoods textarea,
html.dashboardDebiteur .infoGoods textarea {
  min-height: 120px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 8px;
  resize: none;
  background: #fff;
  font-size: 12px;
  color: #475569;
}
html.dashboardKlant .detailsLayout,
html.dashboardDebiteur .detailsLayout {
  display: grid;
  gap: 18px;
}
html.dashboardKlant .detailsIntro,
html.dashboardDebiteur .detailsIntro {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #475569;
}
html.dashboardKlant .detailsTableWrap,
html.dashboardDebiteur .detailsTableWrap {
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 12px;
  background: #fff;
}
html.dashboardKlant .detailsTableScroll,
html.dashboardDebiteur .detailsTableScroll {
  height: 260px;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
  html.dashboardKlant .detailsTableScroll,
  html.dashboardDebiteur .detailsTableScroll {
    height: 240px;
  }
}
html.dashboardKlant .detailsTableTitle,
html.dashboardDebiteur .detailsTableTitle {
  padding: 10px 12px;
  background: #F3F8FF;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 12px;
  font-weight: 900;
  color: #1F2A44;
  text-align: center;
}
html.dashboardKlant .detailsTable,
html.dashboardDebiteur .detailsTable {
  width: 100%;
  height: 100%;
  min-width: 0;
  table-layout: fixed;
}
html.dashboardKlant .detailsTable th,
html.dashboardDebiteur .detailsTable th {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
html.dashboardKlant .detailsTable td,
html.dashboardDebiteur .detailsTable td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dashboardKlant .detailsTable th:nth-child(1),
html.dashboardKlant .detailsTable td:nth-child(1),
html.dashboardDebiteur .detailsTable th:nth-child(1),
html.dashboardDebiteur .detailsTable td:nth-child(1) {
  width: 11%;
}
html.dashboardKlant .detailsTable th:nth-child(2),
html.dashboardKlant .detailsTable td:nth-child(2),
html.dashboardDebiteur .detailsTable th:nth-child(2),
html.dashboardDebiteur .detailsTable td:nth-child(2) {
  width: 33%;
}
html.dashboardKlant .detailsTable th:nth-child(3),
html.dashboardKlant .detailsTable td:nth-child(3),
html.dashboardDebiteur .detailsTable th:nth-child(3),
html.dashboardDebiteur .detailsTable td:nth-child(3) {
  width: 10%;
}
html.dashboardKlant .detailsTable th:nth-child(4),
html.dashboardKlant .detailsTable td:nth-child(4),
html.dashboardDebiteur .detailsTable th:nth-child(4),
html.dashboardDebiteur .detailsTable td:nth-child(4) {
  width: 10%;
}
html.dashboardKlant .detailsTable th:nth-child(5),
html.dashboardKlant .detailsTable td:nth-child(5),
html.dashboardDebiteur .detailsTable th:nth-child(5),
html.dashboardDebiteur .detailsTable td:nth-child(5) {
  width: 12%;
}
html.dashboardKlant .detailsTable th:nth-child(6),
html.dashboardKlant .detailsTable td:nth-child(6),
html.dashboardDebiteur .detailsTable th:nth-child(6),
html.dashboardDebiteur .detailsTable td:nth-child(6) {
  width: 8%;
}
html.dashboardKlant .detailsTable th:nth-child(7),
html.dashboardKlant .detailsTable td:nth-child(7),
html.dashboardDebiteur .detailsTable th:nth-child(7),
html.dashboardDebiteur .detailsTable td:nth-child(7) {
  width: 16%;
}
html.dashboardKlant .detailsTable__body tr,
html.dashboardDebiteur .detailsTable__body tr {
  cursor: pointer;
}
html.dashboardKlant .detailsTable thead,
html.dashboardKlant .detailsTable__body tr,
html.dashboardDebiteur .detailsTable thead,
html.dashboardDebiteur .detailsTable__body tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
html.dashboardKlant .detailsTable__body,
html.dashboardDebiteur .detailsTable__body {
  display: block;
  height: calc(100% - 38px);
  overflow-y: auto;
  overflow-x: hidden;
}
html.dashboardKlant .detailsTable__body tr:nth-child(even),
html.dashboardDebiteur .detailsTable__body tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.06);
}
html.dashboardKlant .detailsTable__body tr.is-selected,
html.dashboardDebiteur .detailsTable__body tr.is-selected {
  background: #1696cf;
  color: #fff;
  font-weight: 700;
}
html.dashboardKlant .detailsTable__body tr td,
html.dashboardDebiteur .detailsTable__body tr td {
  min-height: 30px;
}
html.dashboardKlant .detailsBoeken,
html.dashboardDebiteur .detailsBoeken {
  display: grid;
  grid-template-columns: 180px 200px 220px 220px auto;
  gap: 14px;
  align-items: center;
  padding: 6px 10px;
}
@media (max-width: 900px) {
  html.dashboardKlant .detailsBoeken,
  html.dashboardDebiteur .detailsBoeken {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .detailsBoeken .legacyInput,
html.dashboardDebiteur .detailsBoeken .legacyInput {
  height: 38px;
}
html.dashboardKlant .detailsBoeken[hidden],
html.dashboardDebiteur .detailsBoeken[hidden] {
  display: none !important;
}
html.dashboardKlant .detailsBoeken__label,
html.dashboardDebiteur .detailsBoeken__label {
  font-size: 16px;
  font-weight: 500;
  color: #0d6efd;
  line-height: 1.1;
}
@media (max-width: 900px) {
  html.dashboardKlant .detailsBoeken__label,
  html.dashboardDebiteur .detailsBoeken__label {
    font-size: 14px;
  }
}
html.dashboardKlant .detailsSubTables,
html.dashboardDebiteur .detailsSubTables {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (max-width: 900px) {
  html.dashboardKlant .detailsSubTables,
  html.dashboardDebiteur .detailsSubTables {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .detailsSubTable--full,
html.dashboardDebiteur .detailsSubTable--full {
  width: 100%;
}
html.dashboardKlant .detailsSubTable,
html.dashboardDebiteur .detailsSubTable {
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
html.dashboardKlant .detailsSubTitle,
html.dashboardDebiteur .detailsSubTitle {
  padding: 10px 12px;
  background: #F3F8FF;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  font-size: 12px;
  font-weight: 900;
  color: #1F2A44;
}
html.dashboardKlant .detailsSubWrap,
html.dashboardDebiteur .detailsSubWrap {
  height: 320px;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
  html.dashboardKlant .detailsSubWrap,
  html.dashboardDebiteur .detailsSubWrap {
    height: 240px;
  }
}
html.dashboardKlant .detailsMiniTable--boekhoudfiche,
html.dashboardDebiteur .detailsMiniTable--boekhoudfiche {
  width: 100%;
  min-width: 1200px;
  table-layout: fixed;
}
@media (max-width: 900px) {
  html.dashboardKlant .detailsMiniTable--boekhoudfiche,
  html.dashboardDebiteur .detailsMiniTable--boekhoudfiche {
    min-width: 720px;
  }
}
html.dashboardKlant .detailsMiniTable--boekhoudfiche th,
html.dashboardKlant .detailsMiniTable--boekhoudfiche td,
html.dashboardDebiteur .detailsMiniTable--boekhoudfiche th,
html.dashboardDebiteur .detailsMiniTable--boekhoudfiche td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dashboardKlant .detailsMiniTable,
html.dashboardDebiteur .detailsMiniTable {
  min-width: 360px;
}
html.dashboardKlant .detailsMiniTable tbody tr:nth-child(even),
html.dashboardDebiteur .detailsMiniTable tbody tr:nth-child(even) {
  background: rgba(15, 23, 42, 0.06);
}
@media (max-width: 900px) {
  html.dashboardKlant .detailsMiniTable,
  html.dashboardDebiteur .detailsMiniTable {
    min-width: 280px;
  }
}
html.dashboardKlant .modal.is-details-tab .modalBody,
html.dashboardDebiteur .modal.is-details-tab .modalBody {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.dashboardKlant #tab-details.is-active,
html.dashboardDebiteur #tab-details.is-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
}
html.dashboardKlant #tab-details.is-active .detailsLayout,
html.dashboardDebiteur #tab-details.is-active .detailsLayout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.dashboardKlant #tab-details.is-active .detailsTableScroll,
html.dashboardDebiteur #tab-details.is-active .detailsTableScroll {
  height: 260px;
  min-height: 260px;
  max-height: 260px;
  flex: 0 0 260px;
}
html.dashboardKlant #tab-details.is-active .detailsSubTables,
html.dashboardDebiteur #tab-details.is-active .detailsSubTables {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.dashboardKlant #tab-details.is-active .detailsSubTable,
html.dashboardDebiteur #tab-details.is-active .detailsSubTable {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.dashboardKlant #tab-details.is-active .detailsSubWrap,
html.dashboardDebiteur #tab-details.is-active .detailsSubWrap {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: auto;
}
html.dashboardKlant .modal.is-historiek-tab .modalBody,
html.dashboardDebiteur .modal.is-historiek-tab .modalBody {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.dashboardKlant #tab-historiek.is-active,
html.dashboardDebiteur #tab-historiek.is-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
}
html.dashboardKlant #tab-historiek.is-active .historiekLayout,
html.dashboardDebiteur #tab-historiek.is-active .historiekLayout {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
html.dashboardKlant #tab-historiek.is-active .historiekTable,
html.dashboardDebiteur #tab-historiek.is-active .historiekTable {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
html.dashboardKlant #tab-historiek.is-active .historiekTable__body,
html.dashboardDebiteur #tab-historiek.is-active .historiekTable__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
html.dashboardKlant .historiekLayout,
html.dashboardDebiteur .historiekLayout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  html.dashboardKlant .historiekLayout,
  html.dashboardDebiteur .historiekLayout {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .historiekTable,
html.dashboardDebiteur .historiekTable {
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 900px) {
  html.dashboardKlant .historiekTable,
  html.dashboardDebiteur .historiekTable {
    overflow: auto;
  }
}
html.dashboardKlant .historiekTable__header,
html.dashboardDebiteur .historiekTable__header {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #1F2A44;
  background: #F3F8FF;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
@media (max-width: 900px) {
  html.dashboardKlant .historiekTable__header,
  html.dashboardDebiteur .historiekTable__header {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  html.dashboardKlant .historiekTable__header,
  html.dashboardKlant .historiekRow,
  html.dashboardDebiteur .historiekTable__header,
  html.dashboardDebiteur .historiekRow {
    min-width: 320px;
  }
}
html.dashboardKlant .historiekTable__body,
html.dashboardDebiteur .historiekTable__body {
  min-height: 420px;
}
html.dashboardKlant .historiekRow,
html.dashboardDebiteur .historiekRow {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  padding: 10px 12px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
}
@media (max-width: 900px) {
  html.dashboardKlant .historiekRow,
  html.dashboardDebiteur .historiekRow {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .historiekRow.is-alt,
html.dashboardDebiteur .historiekRow.is-alt {
  background: rgba(30, 107, 214, 0.08);
}
html.dashboardKlant .historiekRow.is-selected,
html.dashboardDebiteur .historiekRow.is-selected {
  background: rgba(30, 107, 214, 0.18);
  color: #1F2A44;
  font-weight: 700;
}
html.dashboardKlant .historiekActions,
html.dashboardDebiteur .historiekActions {
  display: grid;
  justify-items: center;
  align-content: start;
  align-items: start;
  gap: 10px;
  padding-top: 14px;
}
@media (max-width: 900px) {
  html.dashboardKlant .historiekActions,
  html.dashboardDebiteur .historiekActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }
}
html.dashboardKlant .historiekActions .note,
html.dashboardDebiteur .historiekActions .note {
  margin-top: 0;
  text-align: center;
}
html.dashboardKlant .historiekAction,
html.dashboardDebiteur .historiekAction {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #1E6BD6;
  color: #fff;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.12);
  display: grid;
  place-items: center;
  font-size: 26px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
@media (max-width: 900px) {
  html.dashboardKlant .historiekAction,
  html.dashboardDebiteur .historiekAction {
    width: 100%;
    height: 48px;
    font-size: 22px;
  }
}
html.dashboardKlant .historiekAction__icon,
html.dashboardDebiteur .historiekAction__icon {
  width: 24px;
  height: 24px;
  color: inherit;
}
html.dashboardKlant .historiekAction__icon path,
html.dashboardDebiteur .historiekAction__icon path {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.dashboardKlant .historiekAction:not(:disabled):hover,
html.dashboardKlant .historiekAction:not(:disabled):focus-visible,
html.dashboardDebiteur .historiekAction:not(:disabled):hover,
html.dashboardDebiteur .historiekAction:not(:disabled):focus-visible {
  background: #0c4499;
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: 0 8px 16px rgba(30, 107, 214, 0.25);
  transform: translateY(-1px);
}
html.dashboardKlant .historiekAction:disabled,
html.dashboardDebiteur .historiekAction:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html.dashboardKlant .vragenLayout,
html.dashboardDebiteur .vragenLayout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenLayout,
  html.dashboardDebiteur .vragenLayout {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .vragenTable,
html.dashboardDebiteur .vragenTable {
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenTable,
  html.dashboardDebiteur .vragenTable {
    overflow: auto;
  }
}
html.dashboardKlant .vragenTable__header,
html.dashboardDebiteur .vragenTable__header {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  gap: 12px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #1F2A44;
  background: #F3F8FF;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenTable__header,
  html.dashboardDebiteur .vragenTable__header {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenTable__header,
  html.dashboardKlant .vragenRow,
  html.dashboardDebiteur .vragenTable__header,
  html.dashboardDebiteur .vragenRow {
    min-width: 320px;
  }
}
html.dashboardKlant .vragenTable__body,
html.dashboardDebiteur .vragenTable__body {
  min-height: 220px;
}
html.dashboardKlant .vragenRow,
html.dashboardDebiteur .vragenRow {
  display: grid;
  grid-template-columns: 160px 1fr 160px;
  gap: 12px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: #475569;
  cursor: pointer;
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenRow,
  html.dashboardDebiteur .vragenRow {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .vragenRow.is-alt,
html.dashboardDebiteur .vragenRow.is-alt {
  background: rgba(30, 107, 214, 0.08);
}
html.dashboardKlant .vragenRow.is-selected,
html.dashboardDebiteur .vragenRow.is-selected {
  background: rgba(30, 107, 214, 0.18);
  color: #1F2A44;
  font-weight: 700;
}
html.dashboardKlant .vragenActions,
html.dashboardDebiteur .vragenActions {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding-top: 6px;
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenActions,
  html.dashboardDebiteur .vragenActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }
}
html.dashboardKlant .vragenAction,
html.dashboardDebiteur .vragenAction {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #1E6BD6;
  color: #fff;
  font-size: 26px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenAction,
  html.dashboardDebiteur .vragenAction {
    width: 100%;
    height: 48px;
    font-size: 22px;
  }
}
html.dashboardKlant .vragenAction svg,
html.dashboardDebiteur .vragenAction svg {
  width: 24px;
  height: 24px;
}
html.dashboardKlant .vragenAction svg circle,
html.dashboardKlant .vragenAction svg path,
html.dashboardDebiteur .vragenAction svg circle,
html.dashboardDebiteur .vragenAction svg path {
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.dashboardKlant .vragenAction:not(:disabled):hover,
html.dashboardKlant .vragenAction:not(:disabled):focus-visible,
html.dashboardDebiteur .vragenAction:not(:disabled):hover,
html.dashboardDebiteur .vragenAction:not(:disabled):focus-visible {
  background: #0c4499;
  border-color: rgba(15, 23, 42, 0.2);
  box-shadow: 0 8px 16px rgba(30, 107, 214, 0.25);
  transform: translateY(-1px);
}
html.dashboardKlant .vragenAction:disabled,
html.dashboardDebiteur .vragenAction:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
html.dashboardKlant .vragenForm,
html.dashboardDebiteur .vragenForm {
  grid-column: 1/-1;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 12px;
  padding: 12px;
  background: #F8FAFC;
  display: grid;
  gap: 12px;
}
html.dashboardKlant .vragenForm[hidden],
html.dashboardDebiteur .vragenForm[hidden] {
  display: none !important;
}
html.dashboardKlant .vragenForm__row,
html.dashboardDebiteur .vragenForm__row {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: #1F2A44;
  font-weight: 800;
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenForm__row,
  html.dashboardDebiteur .vragenForm__row {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .vragenForm__field,
html.dashboardDebiteur .vragenForm__field {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: #1F2A44;
  font-weight: 800;
}
html.dashboardKlant .vragenForm__field textarea,
html.dashboardDebiteur .vragenForm__field textarea {
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 8px;
  resize: none;
  background: #fff;
  font-size: 12px;
  color: #475569;
}
html.dashboardKlant .vragenForm__submit,
html.dashboardDebiteur .vragenForm__submit {
  display: flex;
  justify-content: flex-end;
}
html.dashboardKlant .vragenForm__attachments,
html.dashboardDebiteur .vragenForm__attachments {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(460px, 1.15fr);
  gap: 12px;
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenForm__attachments,
  html.dashboardDebiteur .vragenForm__attachments {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .vragenDropzone,
html.dashboardDebiteur .vragenDropzone {
  min-height: 110px;
  border: 1px dashed rgba(15, 23, 42, 0.28);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  cursor: pointer;
}
html.dashboardKlant .vragenDropzone.is-dragover,
html.dashboardDebiteur .vragenDropzone.is-dragover {
  border-color: #1E6BD6;
  background: rgba(30, 107, 214, 0.08);
}
html.dashboardKlant .vragenDropzone__title,
html.dashboardDebiteur .vragenDropzone__title {
  font-size: 16px;
  color: #1F2A44;
  font-weight: 500;
}
html.dashboardKlant .vragenDropzone__actions,
html.dashboardDebiteur .vragenDropzone__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
html.dashboardKlant .vragenFiles,
html.dashboardDebiteur .vragenFiles {
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
html.dashboardKlant .vragenFiles__title,
html.dashboardDebiteur .vragenFiles__title {
  padding: 10px 12px;
  font-size: 18px;
  text-align: center;
  font-weight: 500;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}
html.dashboardKlant .vragenFiles__columns,
html.dashboardDebiteur .vragenFiles__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenFiles__columns,
  html.dashboardDebiteur .vragenFiles__columns {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .vragenFiles__column,
html.dashboardDebiteur .vragenFiles__column {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 124px;
}
html.dashboardKlant .vragenFiles__column:not(:last-child),
html.dashboardDebiteur .vragenFiles__column:not(:last-child) {
  border-right: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
@media (max-width: 900px) {
  html.dashboardKlant .vragenFiles__column:not(:last-child),
  html.dashboardDebiteur .vragenFiles__column:not(:last-child) {
    border-right: 0;
  }
}
html.dashboardKlant .vragenFiles__columnTitle,
html.dashboardDebiteur .vragenFiles__columnTitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #334155;
  background: linear-gradient(180deg, rgba(30, 107, 214, 0.1), rgba(30, 107, 214, 0.04));
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  padding: 7px 10px;
}
html.dashboardKlant .vragenFiles__list,
html.dashboardDebiteur .vragenFiles__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-height: 132px;
  max-height: 132px;
  overflow: auto;
}
html.dashboardKlant .vragenFiles__list li,
html.dashboardDebiteur .vragenFiles__list li {
  margin: 4px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 8px;
  background: #F8FAFC;
  font-size: 0.8rem;
  color: #1F2A44;
  min-height: 34px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dashboardKlant .vragenFiles__item,
html.dashboardDebiteur .vragenFiles__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
html.dashboardKlant .vragenFiles__itemName,
html.dashboardDebiteur .vragenFiles__itemName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.dashboardKlant .vragenFiles__remove,
html.dashboardDebiteur .vragenFiles__remove {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.12);
  color: #B91C1C;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
html.dashboardKlant .vragenFiles__remove:hover,
html.dashboardDebiteur .vragenFiles__remove:hover {
  background: rgba(239, 68, 68, 0.18);
}
html.dashboardKlant .vragenFiles__remove:focus-visible,
html.dashboardDebiteur .vragenFiles__remove:focus-visible {
  outline: 2px solid rgba(239, 68, 68, 0.35);
  outline-offset: 1px;
}
html.dashboardKlant .vragenFiles__empty,
html.dashboardDebiteur .vragenFiles__empty {
  color: #64748B;
  font-style: italic;
  background: rgba(148, 163, 184, 0.08) !important;
  border-style: dashed !important;
}
html.dashboardKlant .checkboxField,
html.dashboardDebiteur .checkboxField {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #1F2A44;
  font-size: 12px;
}
html.dashboardKlant .partijenDetail,
html.dashboardDebiteur .partijenDetail {
  margin-top: 14px;
  border: 2px solid rgba(15, 23, 42, 0.15);
}
html.dashboardKlant .partijenDetail__head,
html.dashboardDebiteur .partijenDetail__head {
  display: grid;
  grid-template-columns: 160px minmax(200px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 4px 0 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
html.dashboardKlant .partijenDetail__head .legacyInput,
html.dashboardDebiteur .partijenDetail__head .legacyInput {
  max-width: 420px;
}
@media (max-width: 900px) {
  html.dashboardKlant .partijenDetail__head,
  html.dashboardDebiteur .partijenDetail__head {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .partijenDetail__label,
html.dashboardDebiteur .partijenDetail__label {
  font-weight: 900;
  color: #334155;
  font-size: 13px;
}
html.dashboardKlant .partijenDetail__body,
html.dashboardDebiteur .partijenDetail__body {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 0.6fr;
  gap: 18px;
  padding: 14px 0 8px;
}
@media (max-width: 900px) {
  html.dashboardKlant .partijenDetail__body,
  html.dashboardDebiteur .partijenDetail__body {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .partijenDetail__title,
html.dashboardDebiteur .partijenDetail__title {
  font-weight: 900;
  color: #1F2A44;
  margin-bottom: 8px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
html.dashboardKlant .partijenDetail__chart,
html.dashboardDebiteur .partijenDetail__chart {
  display: grid;
  justify-items: center;
  gap: 10px;
}
html.dashboardKlant .partijenDetail__payments .tableMini,
html.dashboardDebiteur .partijenDetail__payments .tableMini {
  min-width: 100%;
}
html.dashboardKlant .partijenDetail__actions,
html.dashboardDebiteur .partijenDetail__actions {
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: center;
}
@media (max-width: 900px) {
  html.dashboardKlant .partijenDetail__actions,
  html.dashboardDebiteur .partijenDetail__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
html.dashboardKlant .iconAction,
html.dashboardDebiteur .iconAction {
  border: none;
  background: transparent;
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
  font-weight: 800;
  color: #1F2A44;
  cursor: pointer;
}
html.dashboardKlant .iconAction:hover .iconAction__icon,
html.dashboardDebiteur .iconAction:hover .iconAction__icon {
  background: rgba(30, 107, 214, 0.4);
}
html.dashboardKlant .iconAction__icon,
html.dashboardDebiteur .iconAction__icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(30, 107, 214, 0.12);
  color: #1D4ED8;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(30, 107, 214, 0.18);
  transition: background 0.15s ease-in-out;
}
html.dashboardKlant .iconAction__text,
html.dashboardDebiteur .iconAction__text {
  font-size: 12px;
}
html.dashboardKlant .partijenDetail__foot,
html.dashboardDebiteur .partijenDetail__foot {
  display: grid;
  grid-template-columns: 160px minmax(200px, 280px);
  gap: 10px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
html.dashboardKlant .partijenDetail__foot label,
html.dashboardDebiteur .partijenDetail__foot label {
  font-weight: 900;
  color: #334155;
  font-size: 13px;
}
@media (max-width: 900px) {
  html.dashboardKlant .partijenDetail__foot,
  html.dashboardDebiteur .partijenDetail__foot {
    grid-template-columns: 1fr;
  }
}
html.dashboardKlant .statusPills,
html.dashboardDebiteur .statusPills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
html.dashboardKlant .sPill,
html.dashboardDebiteur .sPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #F8FAFC;
  color: #1F2A44;
}
html.dashboardKlant .sPill.sPill--ok,
html.dashboardDebiteur .sPill.sPill--ok {
  background: rgba(46, 164, 79, 0.1);
  border-color: rgba(46, 164, 79, 0.22);
}
html.dashboardKlant .sPill.sPill--warn,
html.dashboardDebiteur .sPill.sPill--warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}
html.dashboardKlant .sPill.sPill--stop,
html.dashboardDebiteur .sPill.sPill--stop {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.22);
}
html.dashboardKlant .sPill.sPill--run,
html.dashboardDebiteur .sPill.sPill--run {
  background: rgba(30, 107, 214, 0.1);
  border-color: rgba(30, 107, 214, 0.22);
}
html.dashboardKlant .vraagForm,
html.dashboardDebiteur .vraagForm {
  display: grid;
  gap: 12px;
}
html.dashboardKlant .vraagActions,
html.dashboardDebiteur .vraagActions {
  display: flex;
  justify-content: flex-end;
}
html.dashboardKlant,
html.dashboardDebiteur {
  /* Motion accessibility */
}
@media (prefers-reduced-motion: reduce) {
  html.dashboardKlant *,
  html.dashboardDebiteur * {
    transition: none !important;
  }
}

html.dashboardKlantMaster .page {
  padding-top: 0;
}
html.dashboardKlantMaster .page > .panel,
html.dashboardKlantMaster .footer {
  display: none;
}
html.dashboardKlantMaster .modal {
  position: fixed;
  inset: 0;
  z-index: 100;
}
html.dashboardKlantMaster .modal__overlay {
  display: block;
}
html.dashboardKlantMaster .modal__dialog {
  width: min(1100px, 100% - 28px);
  margin: 2rem auto;
  max-height: calc(100vh - 4rem);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html.dashboardKlantMaster .dossierBar .lang {
  margin-left: 0;
  gap: 6px;
}
html.dashboardKlantMaster .dossierBar .lang button {
  min-width: 44px;
  padding: 7px 10px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1;
}
html.dashboardKlantMaster .dossierBar .lang button[aria-pressed=true] {
  color: #0f3f80;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(30, 107, 214, 0.14), 0 8px 18px rgba(12, 42, 88, 0.24);
}
html.dashboardKlantMaster .dossierBar .lang button[aria-pressed=true]:hover {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.95);
}

html.dashboardVragenPage .dashboardVragenBody {
  margin: 0;
}
html.dashboardVragenPage .modal--standalone {
  position: relative;
  inset: auto;
  display: block;
  padding: 0;
}
html.dashboardVragenPage .modal--standalone .modal__dialog {
  width: min(1320px, 100% - 28px);
  margin: 2rem auto;
  max-height: calc(100vh - 4rem);
  overflow: auto;
}
html.dashboardVragenPage .dossierBar {
  padding: 10px 12px;
}
html.dashboardVragenPage .dossierBar__left {
  justify-self: start;
}
html.dashboardVragenPage .dossierBar__title {
  font-size: 20px;
}
html.dashboardVragenPage .dossierBar .lang {
  margin-left: 0;
  gap: 6px;
}
html.dashboardVragenPage .dossierBar .lang button {
  min-width: 44px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  font-size: 15px;
  line-height: 1;
}
html.dashboardVragenPage .dossierBar .lang button[aria-pressed=true] {
  color: #0f3f80;
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 1px rgba(30, 107, 214, 0.14), 0 8px 18px rgba(12, 42, 88, 0.24);
}
html.dashboardVragenPage .dossierBar .lang button[aria-pressed=true]:hover {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.95);
}
html.dashboardVragenPage .dossierBar .lang button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}
html.dashboardVragenPage .dossierClose {
  min-height: 42px;
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 12px;
}
html.dashboardVragenPage .modalBody {
  padding: 10px;
}
html.dashboardVragenPage .vragenLayout {
  grid-template-columns: 1fr auto;
  gap: 10px;
}
html.dashboardVragenPage .vragenTableWrap {
  display: grid;
  gap: 8px;
}
html.dashboardVragenPage .vragenTable {
  min-height: 220px;
}
html.dashboardVragenPage .vragenTable__header {
  font-size: 11px;
}
html.dashboardVragenPage .vragenTable__header,
html.dashboardVragenPage .vragenRow {
  grid-template-columns: 120px minmax(280px, 1fr) 180px 130px;
}
html.dashboardVragenPage .vragenTable__header {
  padding: 8px 10px;
}
html.dashboardVragenPage .vragenRow {
  border: 0;
  width: 100%;
  text-align: left;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  padding: 8px 10px;
}
html.dashboardVragenPage .vragenTable__body {
  min-height: 150px;
  max-height: 245px;
  overflow: auto;
}
html.dashboardVragenPage .vragenAction {
  width: 54px;
  height: 54px;
}
html.dashboardVragenPage .vragenAction svg {
  width: 20px;
  height: 20px;
}
html.dashboardVragenPage .vragenPager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
html.dashboardVragenPage .vragenPager span {
  font-weight: 700;
  font-size: 13px;
  color: #1F2A44;
  min-width: 180px;
  text-align: center;
}
html.dashboardVragenPage .vragenPager .btn {
  padding: 8px 11px;
  font-size: 12px;
  border-radius: 10px;
}
html.dashboardVragenPage .vragenForm {
  display: grid !important;
  gap: 8px;
}
html.dashboardVragenPage .vragenForm label {
  font-size: 12px;
}
html.dashboardVragenPage .vragenForm .legacyInput,
html.dashboardVragenPage .vragenForm .checkboxField {
  min-height: 34px;
  font-size: 12px;
}
html.dashboardVragenPage .vragenForm__row {
  gap: 8px;
}
html.dashboardVragenPage .vragenForm__field textarea {
  height: 60px;
  font-size: 12px;
  padding: 8px;
}
html.dashboardVragenPage .vragenDropzone {
  min-height: 96px;
  padding: 12px;
}
html.dashboardVragenPage .vragenDropzone__title,
html.dashboardVragenPage .vragenFiles__title,
html.dashboardVragenPage .vragenFiles__list,
html.dashboardVragenPage .vragenFiles__columnTitle {
  font-size: 12px;
}
html.dashboardVragenPage .vragenForm__submit {
  justify-content: flex-end;
}
html.dashboardVragenPage .vragenForm__submit .btn {
  min-width: 46px;
  height: 42px;
  border-radius: 12px;
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 600px) {
  html.dashboardKlant .dossierBar,
  html.dashboardDebiteur .dossierBar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "left" "right";
    gap: 8px;
    padding: 10px;
  }
  html.dashboardKlant .dossierBar__left,
  html.dashboardDebiteur .dossierBar__left {
    grid-area: left;
    justify-self: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
  }
  html.dashboardKlant .dossierBar__title,
  html.dashboardDebiteur .dossierBar__title {
    grid-area: title;
    width: 100%;
    min-width: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  html.dashboardKlant .dossierBar__right,
  html.dashboardDebiteur .dossierBar__right {
    grid-area: right;
    justify-self: center;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
  }
}
html.dashboardKlant #t_algemeen_totaal,
html.dashboardDebiteur #t_algemeen_totaal {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  font-weight: 900 !important;
}

html.dashboardDebiteur .panel {
  position: relative;
}
html.dashboardDebiteur .panel.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(1px);
  pointer-events: none;
  z-index: 2;
}
html.dashboardDebiteur .panel.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid rgba(30, 107, 214, 0.28);
  border-top-color: #1e6bd6;
  animation: debiteurSpin 0.8s linear infinite;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}
@keyframes debiteurSpin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
html.dashboardDebiteur .page--debiteur {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
html.dashboardDebiteur .panel__title--sm {
  font-size: 17px;
}
html.dashboardDebiteur .debiteurGrid {
  display: grid;
  gap: 20px;
  padding: 18px 20px 6px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
@media (max-width: 900px) {
  html.dashboardDebiteur .debiteurGrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  html.dashboardDebiteur .debiteurGrid {
    padding: 16px 14px 4px;
  }
}
html.dashboardDebiteur .debiteurCard {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px;
  background: #FAFAFB;
  display: grid;
  gap: 14px;
}
@media (max-width: 600px) {
  html.dashboardDebiteur .debiteurCard {
    padding: 14px;
  }
}
html.dashboardDebiteur .debiteurRow {
  display: grid;
  gap: 12px;
}
html.dashboardDebiteur .debiteurCard--chart {
  align-content: start;
  justify-items: center;
  background: #F3F4F6;
}
@media (max-width: 600px) {
  html.dashboardDebiteur .debiteurCard--chart {
    padding: 14px 10px 16px;
  }
}
html.dashboardDebiteur .debiteurCard__title {
  font-size: 14px;
  font-weight: 800;
  color: #1F2A44;
}
html.dashboardDebiteur .pieChart {
  --inning-paid-color: #22C55E;
  --inning-open-color: #DC2626;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(#E5E7EB 0 100%);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.7);
}
@media (max-width: 600px) {
  html.dashboardDebiteur .pieChart {
    width: 130px;
    height: 130px;
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.7);
  }
}
html.dashboardDebiteur .pieChart__label {
  font-size: 12px;
  color: #4B5563;
  margin-top: -4px;
}
html.dashboardDebiteur .chartLegend {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #374151;
}
html.dashboardDebiteur .chartLegend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html.dashboardDebiteur .legendSwatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
html.dashboardDebiteur .legendSwatch--paid {
  background: var(--inning-paid-color, #22C55E);
}
html.dashboardDebiteur .legendSwatch--open {
  background: var(--inning-open-color, #DC2626);
}
html.dashboardDebiteur .debiteurDivider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 8px 20px 0;
}
@media (max-width: 600px) {
  html.dashboardDebiteur .debiteurDivider {
    margin: 8px 14px 0;
  }
}
html.dashboardDebiteur .planSection {
  padding: 18px 20px 22px;
  display: grid;
  gap: 16px;
}
@media (max-width: 600px) {
  html.dashboardDebiteur .planSection {
    padding: 16px 14px 20px;
  }
}
html.dashboardDebiteur .planDescription {
  margin: 8px 0 6px;
  color: #4B5563;
  font-size: 13px;
}
html.dashboardDebiteur .planList {
  margin: 0;
  padding-left: 16px;
  color: #4B5563;
  font-size: 13px;
  display: grid;
  gap: 6px;
}
html.dashboardDebiteur .planGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr) auto;
  align-items: start;
}
@media (max-width: 900px) {
  html.dashboardDebiteur .planGrid {
    grid-template-columns: 1fr;
  }
}
html.dashboardDebiteur .planOptions {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: #374151;
}
html.dashboardDebiteur .planOptions legend {
  font-size: 12px;
  font-weight: 750;
  color: #374151;
  margin-bottom: 4px;
}
html.dashboardDebiteur .planOptions label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html.dashboardDebiteur .planResult textarea {
  min-height: 160px;
}
@media (max-width: 600px) {
  html.dashboardDebiteur .planResult textarea {
    min-height: 130px;
  }
}
html.dashboardDebiteur .planActions {
  display: grid;
  gap: 10px;
  align-self: center;
}
@media (max-width: 900px) {
  html.dashboardDebiteur .planActions {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }
}
@media (max-width: 600px) {
  html.dashboardDebiteur .planActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}
html.dashboardDebiteur .planAction {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 0;
  background: #1F7DB8;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 22px rgba(31, 125, 184, 0.25);
  cursor: pointer;
  transition: transform 0.02s ease, background 0.15s ease;
}
html.dashboardDebiteur .planAction svg {
  width: 26px;
  height: 26px;
}
html.dashboardDebiteur .planAction:hover {
  background: #176A9D;
}
html.dashboardDebiteur .planAction:active {
  transform: translateY(1px);
}
@media (max-width: 600px) {
  html.dashboardDebiteur .planAction {
    width: 100%;
    height: 46px;
    border-radius: 10px;
  }
  html.dashboardDebiteur .planAction svg {
    width: 22px;
    height: 22px;
  }
}
html.dashboardDebiteur .debiteurNotes {
  color: #F8FAFC;
  font-size: 14px;
  line-height: 1.6;
  display: grid;
  gap: 10px;
  padding: 0 4px 22px;
}
@media (max-width: 600px) {
  html.dashboardDebiteur .debiteurNotes {
    font-size: 13px;
    padding: 0 10px 18px;
  }
}
html.dashboardDebiteur .noteIcon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #1F7DB8;
  display: inline-grid;
  place-items: center;
  margin: 0 8px;
}
html.dashboardDebiteur .noteIcon svg {
  width: 18px;
  height: 18px;
  color: #fff;
}
@media (max-width: 600px) {
  html.dashboardDebiteur .page--debiteur {
    padding: 0 10px;
  }
  html.dashboardDebiteur .panel {
    border-radius: 14px;
  }
  html.dashboardDebiteur .topbar__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 6px;
    padding: 8px 10px 10px;
  }
  html.dashboardDebiteur .topbar__left,
  html.dashboardDebiteur .topbar__center,
  html.dashboardDebiteur .topbar__right {
    justify-self: center;
    width: 100%;
  }
  html.dashboardDebiteur .brand {
    justify-content: center;
    gap: 10px;
  }
  html.dashboardDebiteur .brand__mark {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
  html.dashboardDebiteur .brand__name {
    font-size: 22px;
    line-height: 1.1;
  }
  html.dashboardDebiteur .pageTitle {
    font-size: 22px;
    line-height: 1;
    text-align: center;
  }
  html.dashboardDebiteur .topbar__right {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  html.dashboardDebiteur .iconbar {
    display: inline-flex;
    justify-content: center;
  }
  html.dashboardDebiteur .iconbtn {
    width: 44px;
    height: 44px;
  }
  html.dashboardDebiteur .lang {
    width: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  html.dashboardDebiteur .lang button {
    min-width: 0;
    width: 100%;
    min-height: 40px;
    padding: 8px 6px;
    border-radius: 12px;
    font-size: 13px;
  }
  html.dashboardDebiteur .panel__header {
    padding: 14px 14px 10px;
  }
  html.dashboardDebiteur .panel__title {
    font-size: 16px;
  }
  html.dashboardDebiteur .panel__subtitle {
    font-size: 12px;
  }
}

a.manualGuide {
  text-decoration: none;
}

.manualGuide svg {
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 2.288;
}

.manualGuide svg .manualGuide__fill {
  fill: #ffffff;
  stroke: #ffffff;
}

/* Theme tokens scoped to login pages only */
:root {
  --bg: #3F4146;
  --card: #FFFFFF;
  --text: #1F2937;
  --muted: #6B7280;
  --border: #E5E7EB;
  --accent: #1E6BD6;
  --accentHover: #1657AE;
  --success: #2EA44F;
  --successHover: #238A41;
  --shadow: 0 14px 35px rgba(0, 0, 0, .25);
  --radius: 14px;
}