:root {
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:#20354a;
  background:#f3f6f8;
  font-size:16px;
  line-height:1.5;
  color-scheme:light;
  --navy:#152d46;
  --teal:#087d79;
  --border:#d5e0e8;
  --muted:#52687a
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button {
  border:1px solid #b4c3cf;
  border-radius:6px;
  padding:10px 14px;
  min-height:43px;
  background:#fff;
  color:var(--navy);
  font-weight:600;
  cursor:pointer
}
button:hover:not(:disabled) {
  background:#e8f0f4
}
button:disabled {
  opacity:.45;
  cursor:not-allowed
}
.primary {
  background:var(--teal);
  border-color:var(--teal);
  color:white
}
.primary:hover:not(:disabled) {
  background:#086d69
}
.danger {
  color:#a02934;
  border-color:#d8b5bb
}
.text-button {
  border-color:transparent;
  background:transparent
}
.small-button {
  min-height:36px;
  padding:6px 10px;
  font-size:.875rem
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #32a6a1;
  outline-offset:3px
}
input,select,textarea {
  width:100%;
  padding:9px 11px;
  border:1px solid #aebfcd;
  border-radius:5px;
  background:#fff;
  color:#20354a;
  min-height:42px
}
textarea {
  resize:vertical;
  min-height:100px
}
input[type=checkbox] {
  width:19px;
  min-height:19px;
  height:19px;
  accent-color:var(--teal);
  flex-shrink:0
}
input:disabled,select:disabled,textarea:disabled {
  background:#f1f4f7
}
label {
  font-size:.9rem;
  font-weight:bold
}
h1 {
  font-size:1.8rem;
  line-height:1.2;
  margin:0
}
h2 {
  font-size:1.2rem;
  margin:0 0 14px
}
h3 {
  font-size:1.02rem;
  margin:18px 0 8px
}
p {
  margin:0 0 12px
}
small,.muted {
  color:var(--muted)
}
small {
  font-size:.875rem
}
#shell {
  display:flex;
  min-height:100vh
}
.sidebar {
  width:224px;
  flex:0 0 224px;
  background:var(--navy);
  color:white;
  display:flex;
  flex-direction:column;
  padding:22px 14px;
  position:sticky;
  top:0;
  height:100vh
}
.brand {
  display:flex;
  gap:10px;
  align-items:center;
  padding:0 8px 26px
}
.brand-mark {
  background:#18a69e;
  color:white;
  font-weight:bold;
  font-size:1.5rem;
  width:38px;
  height:42px;
  border-radius:6px;
  text-align:center;
  line-height:42px
}
.brand strong {
  display:block;
  font-size:1.05rem
}
.brand small {
  color:#b8cedc
}
nav {
  display:grid;
  gap:14px;
  overflow-y:auto;
  min-height:0;
  scrollbar-width:thin
}
.nav-group {
  display:grid;
  gap:3px
}
.nav-heading {
  padding:0 12px 5px;
  color:#a9c1d3;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase
}
nav button {
  text-align:left;
  color:#d6e5ef;
  border:0;
  background:transparent;
  font-size:.875rem;
  min-height:38px;
  padding:8px 12px;
  border-left:3px solid transparent
}
nav button.active {
  background:#28445f;
  color:white;
  border-left:3px solid #36c5b8
}
nav button:hover:not(:disabled) {
  background:#27445f
}
.sidebar-bottom {
  margin-top:auto;
  font-size:.875rem;
  color:#bdcddb;
  padding:18px 10px 0
}
.workspace {
  min-width:0;
  flex:1
}
.topbar {
  background:white;
  border-bottom:1px solid var(--border);
  padding:18px 28px;
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:center
}
.topbar small {
  display:block;
  margin-top:3px
}
#fileBadge {
  font-weight:600
}
.header-actions {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  flex-shrink:0
}
.accessbar {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:end;
  padding:12px 28px;
  background:#f8fafc;
  border-bottom:1px solid var(--border)
}
.accessbar label {
  display:grid;
  gap:4px;
  max-width:220px
}
.accessbar select,.accessbar input {
  font-size:.875rem;
  min-height:36px;
  padding:6px 9px
}
.accessbar button {
  margin-bottom:1px
}
main {
  padding:28px;
  max-width:1560px;
  margin:auto
}
/* Navigeren verplaatst de focus naar het scherm; de losse bediening houdt zijn focusrand. */
main:focus {
  outline:none
}
footer {
  padding:6px 28px 24px;
  font-size:.875rem;
  color:var(--muted)
}
#message {
  margin:16px 28px 0;
  padding:12px 16px;
  border:1px solid #b6d8ce;
  border-radius:6px;
  background:#e6f5ee;
  color:#18543c;
  font-size:.95rem
}
#message.error,.alert.error {
  background:#fff0f0;
  color:#922431;
  border-color:#e6b7be
}
#message.warn,.alert.warn {
  background:#fff5df;
  color:#76511c;
  border-color:#e1c78d
}
.page-heading {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:22px
}
.page-heading p {
  margin-top:9px;
  color:var(--muted);
  max-width:72ch
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center
}
.card {
  background:white;
  border:1px solid var(--border);
  border-radius:12px;
  padding:23px;
  margin-bottom:20px;
  box-shadow:0 2px 5px #152d4605
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px
}
.metric {
  background:white;
  border:1px solid var(--border);
  border-top:3px solid var(--teal);
  border-radius:10px;
  padding:18px;
  min-width:0
}
.metric strong {
  display:block;
  font-size:clamp(1.25rem,1.6vw,1.9rem);
  color:var(--navy);
  line-height:1.3;
  margin:8px 0;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere
}
.metric span {
  font-size:.9rem;
  color:var(--muted)
}
.grid-2 {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px
}
.grid-3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.toolbar {
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
  margin-bottom:16px;
  padding:14px 16px;
  background:#eaf0f4;
  border:1px solid var(--border);
  border-radius:9px
}
.toolbar input {
  max-width:340px
}
.toolbar select {
  max-width:260px
}
.toolbar label {
  display:grid;
  gap:5px
}
.toolbar label.check {
  display:flex;
  align-items:center;
  margin:0 0 9px
}
.table-wrap {
  overflow:auto;
  border:1px solid var(--border);
  border-radius:8px;
  scrollbar-width:thin
}
.table-wrap:focus-visible {
  outline:3px solid #32a6a1;
  outline-offset:3px
}
table {
  width:100%;
  border-collapse:collapse;
  background:white;
  font-size:.9375rem;
  line-height:1.5
}
th,td {
  text-align:left;
  border-bottom:1px solid #dce5ed;
  padding:12px 13px;
  vertical-align:top
}
th {
  background:#f2f6f9;
  color:#3f576b;
  font-size:.875rem;
  font-weight:bold;
  white-space:nowrap;
  padding-top:14px;
  padding-bottom:14px
}
tbody tr:nth-child(even) {
  background:#f8fafc
}
tbody tr:hover {
  background:#edf5f6
}
tr:last-child td {
  border-bottom:0
}
td.actions-cell {
  min-width:126px;
  max-width:270px
}
td .actions {
  flex-wrap:wrap
}
td small {
  display:block;
  margin-top:4px;
  max-width:350px
}
td.amount,th.amount {
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
td.number,th.number {
  text-align:right;
  font-variant-numeric:tabular-nums
}
td.amount {
  font-weight:600
}
.badge {
  display:inline-block;
  font-size:.875rem;
  border-radius:5px;
  padding:3px 8px;
  background:#edf2f6;
  color:#455b6c;
  white-space:normal;
  font-weight:600
}
.badge.ok {
  background:#e4f2eb;
  color:#1b6544
}
.badge.warn {
  background:#fff0d0;
  color:#78500b
}
.badge.error {
  background:#fbe6e9;
  color:#9a2938
}
.empty {
  text-align:center;
  padding:45px 20px;
  color:var(--muted)
}
.empty h2 {
  color:var(--navy)
}
.welcome {
  max-width:900px;
  margin:24px auto
}
.welcome h1 {
  margin-bottom:16px
}
.welcome ol {
  padding-left:25px
}
.welcome li {
  margin:12px 0
}
.alert {
  border:1px solid #cbdce7;
  border-radius:6px;
  background:#eff6fa;
  padding:13px 16px;
  margin:12px 0;
  font-size:.95rem
}
.hint {
  font-size:.875rem;
  color:var(--muted);
  margin:5px 0 14px
}
.form-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}
.field {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
  gap:5px
}
.field input:not([type=checkbox]),.field select {
  height:44px;
  min-height:44px;
  width:100%;
  min-width:0;
  box-sizing:border-box
}
.field textarea {
  width:100%;
  box-sizing:border-box
}
.field.wide {
  grid-column:1/-1
}
.field label {
  display:block
}
.check {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:normal;
  margin:10px 0
}
.check label {
  font-weight:normal
}
.checkbox-list {
  max-height:200px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:5px;
  padding:10px
}
.checkbox-list label {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:normal;
  font-size:.9rem;
  margin:6px 0
}
.contact-row {
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  gap:8px;
  margin:8px 0
}
.contact-row label {
  font-size:.875rem
}
.detail-grid {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:7px 14px;
  margin:12px 0
}
.detail-grid dt {
  color:var(--muted);
  font-size:.9rem
}
.detail-grid dd {
  margin:0;
  overflow-wrap:anywhere
}
.link-button {
  padding:0;
  min-height:0;
  border:0;
  background:none;
  color:var(--teal);
  text-align:left;
  font-weight:bold
}
.link-button:hover:not(:disabled) {
  background:none;
  text-decoration:underline
}
.pagination {
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-end;
  margin-top:12px;
  font-size:.9rem
}
.section-tabs {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:18px 0
}
.section-tabs button.selected {
  background:var(--navy);
  color:white
}
.totals {
  background:#eff6f6;
  border:1px solid #c9dddb;
  border-radius:6px;
  padding:18px
}
.totals .grand {
  font-size:1.45rem;
  font-weight:bold;
  color:var(--navy)
}
.summary-line {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:6px 0
}
.invoice-view h2 {
  margin-top:20px
}
.small-text {
  font-size:.875rem
}
.split {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.search-text {
  font-weight:normal
}
.date-note {
  font-size:.875rem;
  color:var(--muted);
  background:#f1f5f8;
  padding:10px;
  border-radius:5px;
  margin:12px 0
}
dialog {
  width:min(980px,calc(100vw - 32px));
  max-height:calc(100vh - 44px);
  padding:0;
  border:1px solid #bdcad5;
  border-radius:9px;
  color:var(--navy);
  box-shadow:0 20px 90px #152d4640
}
dialog::backdrop {
  background:#13253699
}
dialog>form {
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 48px)
}
.dialog-heading,.dialog-footer {
  flex-shrink:0
}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--border);
  padding:18px 24px;
  background:#f8fbfd
}
.dialog-heading h2 {
  margin:0
}
.dialog-body {
  padding:24px;
  overflow-y:auto;
  min-height:0
}
.dialog-footer {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:16px 24px;
  border-top:1px solid var(--border);
  background:#f8fbfd
}
.dialog-error {
  background:#fff0f0;
  color:#972c34;
  border:1px solid #e0a8af;
  padding:12px;
  border-radius:5px;
  margin-bottom:14px
}
.close-button {
  font-size:1.3rem;
  min-height:34px;
  padding:0 10px
}
.code-block {
  font:inherit;
  min-height:85px;
  white-space:pre-wrap
}
.demo-notice {
  color:#7a4c0f;
  background:#fff0d1;
  padding:3px 8px;
  border-radius:4px;
  margin-left:10px;
  font-size:.875rem
}
.import-map {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.import-map label {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  align-items:center;
  gap:8px;
  font-weight:normal
}
#printArea {
  display:none
}
/* Melding bovenaan: waarom (nog) niet gewijzigd kan worden */
.edit-banner {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 20px;
  margin-bottom:18px
}
.edit-banner .actions {
  margin:0
}
/* ── Dossier zorgaanbieder en maandafsluiting (1.1.0) ── */
.provider-card h3 {
  margin:0 0 4px;
  font-size:.95rem;
  color:var(--muted)
}
.provider-card p {
  margin:0;
  overflow-wrap:anywhere
}
.provider-card .grid-3 {
  margin-top:16px
}
a {
  color:#086b68;
  text-underline-offset:3px
}
.team-block {
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  margin:0 0 12px
}
.team-block>summary {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 24px;
  padding:14px 18px;
  cursor:pointer;
  list-style:none
}
.team-block>summary::-webkit-details-marker {
  display:none
}
.team-block>summary::before {
  content:'▸';
  color:var(--teal);
  margin-right:-12px
}
.team-block[open]>summary::before {
  content:'▾'
}
.team-block[open]>summary {
  border-bottom:1px solid var(--border);
  background:#f6f9fb;
  border-radius:8px 8px 0 0
}
.team-title {
  flex:1 1 240px
}
.team-title small {
  display:block
}
.team-figures {
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  color:var(--muted);
  font-size:.92rem
}
.team-figures strong {
  color:var(--teal);
  padding:4px 10px;
  background:#e8f4f2;
  border-radius:6px;
  font-variant-numeric:tabular-nums
}
.team-body {
  padding:14px 18px 18px
}
.team-grid {
  align-items:start;
  margin-top:20px;
  grid-template-columns:minmax(0,1fr)
}
.team-grid>section {
  min-width:0
}
.team-grid h3 {
  margin:0 0 12px
}
.detail-grid.compact {
  margin-top:12px
}
.num {
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.month-table .group-row td {
  background:#eef4f7;
  border-top:2px solid var(--border)
}
.month-table tfoot td {
  border-top:2px solid var(--navy);
  font-weight:bold
}
.month-table td small {
  display:block
}
.error-text {
  color:#a3261b
}
/* Brede dossiers hebben voldoende ruimte voor twee volledige tabellen. */
@media(min-width:1800px) {
  .team-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
}
@media(max-width:1100px) {
  .sidebar {
    width:190px;
    flex-basis:190px;
    padding:22px 10px
  }
  .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  main {
    padding:22px
  }
  .grid-2 {
    grid-template-columns:minmax(0,1fr)
  }
  
}
@media(max-width:760px) {
  #shell {
    display:block
  }
  .sidebar {
    height:auto;
    position:static;
    width:100%;
    padding:12px 16px
  }
  .brand {
    padding:0 0 12px
  }
  nav {
    display:flex;
    overflow:auto
  }
  nav button {
    white-space:nowrap;
    flex:0 0 auto
  }
  .nav-group {
    display:flex;
    gap:5px;
    flex:0 0 auto
  }
  .nav-heading {
    display:none
  }
  .sidebar-bottom {
    display:none
  }
  .topbar {
    padding:15px;
    flex-wrap:wrap
  }
  .header-actions {
    width:100%;
    max-width:100%
  }
  .header-actions button {
    flex:1 1 145px
  }
  .accessbar {
    padding:12px 15px
  }
  .accessbar label {
    max-width:none;
    flex:1;
    min-width:140px
  }
  main {
    padding:18px 14px
  }
  .page-heading {
    flex-direction:column
  }
  .form-grid,.grid-3,.import-map {
    grid-template-columns:minmax(0,1fr)
  }
  .metrics {
    gap:10px
  }
  .metric {
    padding:14px
  }
  .metric strong {
    font-size:1.35rem
  }
  .team-figures {
    gap:8px;
    align-items:center
  }
  .split {
    flex-wrap:wrap
  }
  .pagination {
    flex-wrap:wrap;
    justify-content:flex-start
  }
  .topbar>div:first-child {
    min-width:0;
    overflow-wrap:anywhere
  }
  .summary-line {
    flex-wrap:wrap;
    gap:4px 12px
  }
  .field.wide {
    grid-column:auto
  }
  .contact-row {
    grid-template-columns:1fr
  }
  .dialog-body {
    padding:18px
  }
  #message {
    margin:12px 14px
  }
  th,td {
    padding:10px
  }
  .import-map label {
    grid-template-columns:1fr
  }
  .detail-grid {
    grid-template-columns:100px 1fr
  }
  
}
@media print {
  @page {
    size:A4;
    margin:16mm
  }
  body {
    background:white;
    color:black;
    font-size:11pt
  }
  #shell,dialog,#message {
    display:none!important
  }
  #printArea {
    display:block
  }
  #printArea h1 {
    font-size:20pt
  }
  #printArea h2 {
    font-size:14pt;
    margin-top:22px
  }
  #printArea table {
    font-size:10pt
  }
  #printArea th,#printArea td {
    padding:7px;
    border:1px solid #bbb
  }
  #printArea th {
    background:#eee
  }
  #printArea tr {
    break-inside:avoid
  }
  #printArea thead {
    display:table-header-group
  }
  .print-header {
    border-bottom:2px solid #1c4256;
    padding-bottom:10px;
    margin-bottom:18px
  }
  .print-totals {
    margin-top:18px;
    text-align:right;
    break-inside:avoid
  }
  
}

/* Aanmelden gebruikt dezelfde uitgelijnde velden als de administratie. */
.login-card {max-width:480px;margin:32px auto}
.login-card button {margin-top:16px}
#accountBar span {flex:1}
[hidden] {display:none !important}

/* Tot aanmelden is uitsluitend het inlogscherm zichtbaar, ook bij de eerste paginaverf. */
body.login-only #shell {grid-template-columns:minmax(0,1fr)}
body.login-only .sidebar,body.login-only .topbar,body.login-only .accessbar,
body.login-only footer,body.login-only #message,body.login-only #printArea,
body.login-only dialog {display:none !important}
body.login-only .workspace {min-height:100vh}
body.login-only main {display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;padding:24px;box-sizing:border-box}
body.login-only .login-card {width:100%;margin:0}