/* Huisstijl Dis: rustig, zakelijk; groen-grijs uit het Digio-logo als accent. */
:root {
    --dis-accent: #6f8a7a;
    --dis-rand: #e3e6e4;
    --dis-achtergrond: #f6f7f6;
}

html, body { height: 100%; margin: 0; }
body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--dis-achtergrond); color: #1f2421; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; }
h1:focus { outline: none; }

.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-header { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 1.25rem;
              background: #fff; border-bottom: 1px solid var(--dis-rand); }
.app-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; font-weight: 600; font-size: 1.1rem; }
.app-user { display: flex; align-items: center; gap: .5rem; }
.app-user a { color: inherit; text-decoration: none; }
.app-user form { margin: 0; }
.app-body { display: flex; flex: 1; }
.app-sidebar { width: 250px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--dis-rand); padding: .5rem 0; }
.app-content { flex: 1; padding: 1.5rem 2rem; min-width: 0; }

.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.tegel { background: #fff; border: 1px solid var(--dis-rand); border-radius: 8px; padding: 1rem 1.25rem; display: flex; flex-direction: column; }
.tegel .getal { font-size: 1.75rem; font-weight: 600; color: var(--dis-accent); }

.relatie-grid .dxbl-grid-table tbody tr { cursor: pointer; }

.account-layout { min-height: 100vh; }
.account-header { padding: 1rem 2rem; background: #fff; border-bottom: 1px solid var(--dis-rand); }
.account-body { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
                   box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

@media (max-width: 760px) {
    .app-body { flex-direction: column; }
    .app-sidebar { width: auto; border-right: 0; border-bottom: 1px solid var(--dis-rand); }
    .app-content { padding: 1rem; }
}

/* Relatiekaart */
.terug { margin: 0 0 .5rem; }
.terug a { color: var(--dis-accent); text-decoration: none; }
.kaart-kop h1 { margin-bottom: .25rem; }
.kaart-meta { color: #5b625e; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 1.25rem; }
.kaart-blokken { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kaart-blok { background: #fff; border: 1px solid var(--dis-rand); border-radius: 8px; padding: 1rem 1.25rem; }
.kaart-blok h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #5b625e; margin: 0 0 .75rem; }
.kaart-blok dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.kaart-blok dt { color: #5b625e; font-weight: 400; }
.kaart-blok dd { margin: 0; overflow-wrap: anywhere; }
.kaart-blok .profiel { white-space: pre-wrap; margin: .75rem 0 0; color: #333; }
.kaart-tabs { background: #fff; border: 1px solid var(--dis-rand); border-radius: 8px; padding: .5rem 1rem 1rem; }
.tab-balk { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .75rem 0; }
.tab-totaal { font-weight: 600; margin: .75rem 0 0; }
.tab-noot { color: #6b726e; font-size: .85rem; margin: .5rem 0 0; }
.mededeling { white-space: pre-wrap; padding: .25rem 0; }
.rij-rood td { color: #b42318; }
.rij-rood { background: #fdf1f0; }
.tekst-rood td { color: #b42318; }

/* Formulieren */
.relatie-formulier { background: #fff; border: 1px solid var(--dis-rand); border-radius: 8px; padding: 1rem; }
.knoppen { display: flex; gap: .5rem; margin: 1rem 0 2rem; }
.melding-fout { background: #fdf1f0; border: 1px solid #f3c2bd; color: #8a1c12; border-radius: 6px; padding: .6rem .9rem; margin-bottom: 1rem; }
.kop-rij { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.fout { color: #c00; margin: .5rem 0; }
.koppel-tabel { border-collapse: collapse; width: 100%; font-size: .9rem; }
.koppel-tabel th, .koppel-tabel td { text-align: left; padding: .25rem .5rem; border-bottom: 1px solid #e5e5e5; }
.koppel-tabel th { font-weight: 600; color: #555; }
.beheer-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem 2rem; }
.beheer-groepen h2 { font-size: 1.05rem; margin: .5rem 0; }
.beheer-groepen ul { list-style: none; padding: 0; margin: 0; }
.beheer-groepen li { padding: .2rem 0; }
.beheer-grid { max-width: 900px; }
.label-systeem { font-size: .8rem; color: #777; border: 1px solid #ccc; border-radius: 3px; padding: 0 .3rem; margin-left: .4rem; }
.rechten-groepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; margin-top: .75rem; }
.rechten-groep { border: 1px solid #ddd; border-radius: 4px; padding: .4rem .75rem .6rem; display: flex; flex-direction: column; gap: .25rem; }
.rechten-groep legend { font-size: .95rem; font-weight: 600; width: auto; float: none; padding: 0 .3rem; margin: 0; }
.rechten-oud { margin-top: 1rem; }
.rechten-oud summary { cursor: pointer; color: #555; }
.melding { color: #1a6b2f; margin: .5rem 0; }
/* Actieknoppen in een gridrij: mogen doorlopen op een volgende regel in plaats van afgekapt te worden. */
.acties { white-space: normal; display: flex; flex-wrap: wrap; column-gap: .25rem; align-items: center; }
.acties .dxbl-btn { padding-left: .25rem; padding-right: .25rem; }

/* Overzichten */
.filter { margin-bottom: .5rem; }
table.details th { text-align: left; font-weight: 600; padding: 2px 16px 2px 0; }
table.details td { padding: 2px 0; }
/* Editors in een filterbalk niet laten uitrekken tot de volle breedte. */
.tab-balk > .dxbl-text-edit:not([style*="width"]) { width: 200px; }
textarea.code, .code textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
iframe.mail-voorbeeld { width: 100%; height: 420px; border: 1px solid #ddd; margin-top: .75rem; background: #fff; }
.mailing-opbouw { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
.mailing-opbouw aside { font-size: .85rem; }
.mailing-opbouw table.velden td { padding: 1px 8px 1px 0; vertical-align: top; }
@media (max-width: 1100px) { .mailing-opbouw { grid-template-columns: 1fr; } }
.voortgang { padding: .5rem .75rem; border: 1px solid #cfe0f5; background: #f2f7fd; margin: .5rem 0; }