fluent-dialog.dialoog:has(.administratie-nsx-dialoog)::part(control) {
    width: min(720px, calc(100vw - 32px)) !important;
}

.administratie-nsx-dialoog { width: 100%; box-sizing: border-box; }
.administratie-nsx-laden { margin-top: 22px; padding: 18px; border-left: 3px solid #107c41; background: #f3f8f5; }

.administratie-nsx-samenvatting {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 20px;
    border: 1px solid #d1d5db;
    background: #d1d5db;
}

.administratie-nsx-samenvatting > div { display: grid; gap: 2px; padding: 10px 12px; background: #f7f7f7; }
.administratie-nsx-samenvatting strong { font-size: 16px; color: #0b5a2d; }
.administratie-nsx-samenvatting span { color: #525252; font-size: 12px; }
.administratie-nsx-groep { margin-top: 20px; }
.administratie-nsx-groep h3 { margin: 0 0 8px; font-size: 14px; }
.administratie-nsx-groep ul,
.administratie-nsx-overgeslagen ul { max-height: 180px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid #d1d5db; }
.administratie-nsx-groep li,
.administratie-nsx-overgeslagen li { padding: 8px 10px; background: #fff; }
.administratie-nsx-groep li + li,
.administratie-nsx-overgeslagen li + li { border-top: 1px solid #e5e5e5; }
.administratie-nsx-groep li div { display: flex; justify-content: space-between; gap: 12px; }
.administratie-nsx-groep li span { color: #616161; font-size: 12px; }
.administratie-nsx-groep li p,
.administratie-nsx-overgeslagen li p { margin: 3px 0 0; overflow-wrap: anywhere; color: #424242; }
.administratie-nsx-leeg { margin: 0; padding: 12px; border: 1px solid #d1d5db; background: #f7f7f7; }
.administratie-nsx-overgeslagen { margin-top: 12px; }
.administratie-nsx-overgeslagen summary,
.administratie-nsx-techniek summary { min-height: 36px; padding: 8px 0; cursor: pointer; color: #0b5a2d; font-weight: 600; }

.administratie-nsx-bestandsnaam { display: grid; gap: 6px; margin-top: 18px; font-weight: 600; }
.administratie-nsx-bestandsnaam input { min-height: 38px; border: 1px solid #8a8886; padding: 7px 10px; font: inherit; font-weight: 400; }
.administratie-nsx-bestandsnaam input:focus-visible { outline: 2px solid #0f6cbd; outline-offset: 1px; }
.administratie-nsx-bestandsnaam input[aria-invalid="true"] { border-color: #c50f1f; background: #fff6f6; }
.administratie-nsx-bestandsnaam small { color: #616161; font-weight: 400; }
.administratie-nsx-bestandsnaam .administratie-nsx-fout { color: #a4262c; }
.administratie-nsx-waarschuwing { margin: 14px 0 0; border-left: 3px solid #d83b01; padding: 9px 12px; background: #fff4ce; }
.administratie-nsx-techniek { margin-top: 10px; border-top: 1px solid #e1e1e1; }
.administratie-nsx-techniek dl { margin: 0; padding: 0 10px; }
.administratie-nsx-techniek dl > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
.administratie-nsx-techniek dt { color: #616161; }
.administratie-nsx-techniek dd { margin: 0; overflow-wrap: anywhere; font-family: Consolas, monospace; font-size: 11px; }

@media (max-width: 599px) {
    fluent-dialog.dialoog:has(.administratie-nsx-dialoog)::part(control) { width: calc(100vw - 20px) !important; }
    .administratie-nsx-samenvatting { grid-template-columns: minmax(0, 1fr); }
    .administratie-nsx-groep ul,
    .administratie-nsx-overgeslagen ul { max-height: none; overflow-y: visible; }
    .administratie-nsx-techniek dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}