/*
 * Stijlen van het klantportaal. Componenten volgen het design system (bundle.css), met twee bewuste afwijkingen:
 * Manrope wordt zelf gehost (geen Google Fonts: AVG en een strakke CSP), en de melding is nieuw voor het portaal.
 */

/* ---------- Lettertype ---------- */
@font-face {
  font-family: Manrope;
  src: url("../fonts/Manrope-VariableFont_wght-l9n8zLJ.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--teal-50);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.1px;

  /* iOS Safari kent alleen de versie met voorvoegsel. */
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.dgm-skip {
  position: absolute;
  left: var(--space-10);
  top: -100px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--teal-900);
  color: var(--white);
  z-index: 10;
}
.dgm-skip:focus { top: var(--space-10); }

.dgm-link { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

/* Toetsenbordfocus: 2px teal-900 met 2px wit ertussen, zichtbaar op licht en op teal-700 */
.dgm-btn:focus-visible,
.dgm-link:focus-visible,
.dgm-skip:focus-visible,
.dgm-header__home:focus-visible,
.dgm-invoices__page:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--white);
}

/* ---------- Knop ---------- */
.dgm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: 16px 36px;
  border: var(--border-strong) solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.dgm-btn:hover { filter: brightness(1.06); }
.dgm-btn--solid { background: var(--teal-800); color: var(--white); }

/* Ghost: alleen op donker teal (de kopbalk) */
.dgm-btn--ghost {
  background: var(--glass);
  color: var(--white);
  border-width: var(--border-hairline);
  border-color: var(--glass-border);
}

/* ---------- Tekstveld ---------- */
.dgm-field { display: flex; flex-direction: column; gap: 6px; }
.dgm-field__label { font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--ink); }

.dgm-field__input {
  width: 100%;
  padding: 11px 15px;
  border: var(--border-hairline) solid var(--field-border);
  border-radius: var(--radius-field);
  background: var(--white);
  color: var(--field-text);
  font: inherit;
  font-size: 16px; /* 16px: mobiele browsers zoomen anders in */
}

.dgm-field__input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--teal-900);
}

/* Foutmelding bij een veld: woord, vorm (ruit) en rode rand, nooit alleen kleur */
.dgm-field__input[aria-invalid="true"] { padding: 10px 14px; border: 2px solid var(--danger-700); }

.dgm-field__error {
  display: flex;
  gap: var(--space-10);
  align-items: baseline;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--danger-700);
}

.dgm-field__error::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: currentcolor;
  transform: rotate(45deg);
}

/* ---------- Melding (nieuw voor het portaal) ---------- */
.dgm-notice {
  display: flex;
  gap: var(--space-10);
  align-items: baseline;
  margin: 0 0 var(--space-30);
  padding: 14px 16px;
  border-radius: var(--radius-field);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.dgm-notice::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: currentcolor;
  border-radius: 50%; /* info: cirkel */
}
.dgm-notice p { margin: 0; }
.dgm-notice__label { display: block; font-weight: 700; }
.dgm-notice--info    { background: var(--teal-50); }
.dgm-notice--info .dgm-notice__label    { color: var(--teal-900); }
.dgm-notice--info::before    { color: var(--teal-900); }
.dgm-notice--warning { background: var(--warning-50); }
.dgm-notice--warning .dgm-notice__label { color: var(--warning-700); }
.dgm-notice--warning::before { color: var(--warning-700); border-radius: 2px; } /* waarschuwing: vierkant */
.dgm-notice--danger  { background: var(--danger-50); }
.dgm-notice--danger .dgm-notice__label  { color: var(--danger-700); }
.dgm-notice--danger::before  { color: var(--danger-700); border-radius: 0; transform: rotate(45deg); } /* storing: ruit */

/* ---------- Inlogpagina ---------- */
.dgm-page--login {
  min-height: 100vh;
  min-height: 100dvh;
}

.dgm-page__main {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  padding: var(--space-30) 16px;
}

.dgm-login {
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
}

/* Het logo is alleen wit: het staat op een teal-700-balk over de volle breedte bovenaan de kaart */
.dgm-login__logo {
  display: flex;
  justify-content: center;
  padding: var(--space-20);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--teal-700);
}
.dgm-login__logo img { display: block; height: 40px; width: auto; max-width: 100%; }
.dgm-login__body { padding: var(--space-30) var(--space-30) var(--space-50); }

.dgm-login__title {
  margin: 0 0 var(--space-10);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--teal-900);
}
.dgm-login__text { margin: 0 0 var(--space-30); }
.dgm-login form { display: grid; gap: var(--space-20); }
.dgm-login .dgm-btn { width: 100%; }

.dgm-login__codefield .dgm-field__input {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--teal-900);
}
.dgm-login__other { margin: var(--space-20) 0 0; font-size: 16px; }
.dgm-login__help { margin: var(--space-20) 0 0; font-size: 14px; line-height: 1.5; }

/* ---------- Hulpklasse ---------- */
.dgm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Kopbalk (pagina's na het inloggen) ---------- */
.dgm-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px var(--space-30);
  padding: var(--space-30) var(--space-50);
  background: var(--teal-700);
  color: var(--white);
  border-bottom: 1px solid var(--glass-border);
}
.dgm-header__home { display: block; line-height: 0; border-radius: var(--radius-sm); }
.dgm-header__logo { display: block; height: 48px; width: auto; }
.dgm-header form { margin: 0; }
.dgm-header .dgm-btn { padding: 12px 24px; }

/* "Je bent ingelogd als": rechtsboven, links van Uitloggen */
.dgm-header__who {
  margin: 0 0 0 auto;
  font-size: 15px;
  line-height: 1.4;
  text-align: right;
  overflow-wrap: anywhere;
}
.dgm-header__who strong { font-weight: 600; }

/* ---------- Pagina na het inloggen ---------- */
.dgm-portal { padding: var(--space-30) clamp(16px, 5vw, 50px) var(--space-70); }
.dgm-portal__inner { max-width: 1400px; margin: 0 auto; }

.dgm-portal__title {
  margin: 0 0 var(--space-10);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--teal-900);
}
.dgm-portal__intro { margin: 0 0 var(--space-30); }

/* ---------- Statusbadge (woord plus vorm, nooit alleen kleur) ---------- */
.dgm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.dgm-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentcolor;
} /* cirkel */
.dgm-badge--success { background: var(--success-50); color: var(--success-700); }
.dgm-badge--warning { background: var(--warning-50); color: var(--warning-700); }
.dgm-badge--warning::before { border-radius: 2px; } /* vierkant */
.dgm-badge--danger  { background: var(--danger-50);  color: var(--danger-700); }
.dgm-badge--danger::before  { border-radius: 0; transform: rotate(45deg); } /* ruit */
.dgm-badge--neutral { background: var(--teal-50); color: var(--teal-900); }

/* ---------- Cijfers ---------- */
.dgm-num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

/* ---------- Factuuroverzicht ---------- */
.dgm-invoices {
  padding: var(--space-10) var(--space-30);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--ink);
}
.dgm-invoices--empty { padding: var(--space-30); }

.dgm-invoices__empty-title {
  margin: 0 0 var(--space-10);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--teal-900);
}
.dgm-invoices--empty p { margin: 0; }

.dgm-invoices__table { width: 100%; border-collapse: collapse; line-height: 1.5; }

.dgm-invoices__table th {
  padding: 12px 12px 12px 0;
  border-bottom: 2px solid var(--teal-200);
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-600);
}
.dgm-invoices__table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--divider); }
.dgm-invoices__table tr:last-child td { border-bottom: 0; }
.dgm-invoices__table .is-num { text-align: right; padding-right: var(--space-30); }

/* Smalle schermen: kaartjes in plaats van een tabel (display:none haalt de tabel ook uit de schermlezer) */
.dgm-invoices__list { display: none; margin: 0; padding: 0; list-style: none; }
.dgm-invoice-card { padding: 16px 0; border-bottom: 1px solid var(--divider); }
.dgm-invoice-card:last-child { border-bottom: 0; }

.dgm-invoice-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}
.dgm-invoice-card__head .dgm-link { font-size: 17px; }

.dgm-invoice-card__meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 4px 20px;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.4;
}
.dgm-invoice-card__meta dt { font-size: 14px; font-weight: 500; }
.dgm-invoice-card__meta dd { margin: 0; }
.dgm-invoice-card__result { margin: 10px 0 0; font-size: 15px; }

/* "Nu betalen": compacter dan de grote knop, met een raakvlak van minstens 44px. */
.dgm-btn--pay { padding: 8px 20px; min-height: 44px; }
.dgm-invoices__pay { margin: 8px 0 0; }
.dgm-invoice-card__pay { margin: 12px 0 0; }
.dgm-invoice-card__pay .dgm-btn--pay { width: 100%; }

/* De uitslag: alle bijlagen met hun bestandsnaam. Lange namen breken af in plaats van de kolom te rekken. */
.dgm-invoices__files { margin: 0; padding: 0; list-style: none; }
.dgm-invoices__files li + li { margin-top: 6px; }
.dgm-invoices__files .dgm-link { overflow-wrap: anywhere; }
.dgm-invoices__result { max-width: 24rem; }

/* Alleen de uitslag mag over meerdere regels: nummers, datums, bedragen en de status blijven op één regel. */
.dgm-invoices__table th,
.dgm-invoices__table td:not(.dgm-invoices__result) { white-space: nowrap; }

/* Onder 1000px is de uitslagkolom (met lange bestandsnamen) te smal naast de andere vijf kolommen. */
@media (width <= 999px) {
  .dgm-invoices { padding: var(--space-10) 16px; }
  .dgm-invoices__table { display: none; }
  .dgm-invoices__list { display: block; }
}

/* Paginering */
.dgm-invoices__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10) var(--space-20);
  padding: var(--space-20) 0;
  border-top: 1px solid var(--divider);
  font-size: 14px;
}
.dgm-invoices__count { margin: 0; }

.dgm-invoices__pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dgm-invoices__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
  background: var(--white);
  color: var(--teal-900);
  font-weight: 600;
  text-decoration: none;
}
.dgm-invoices__page:hover { background: var(--teal-50); }
.dgm-invoices__page[aria-current="page"] { background: var(--teal-800); border-color: var(--teal-800); color: var(--white); }
.dgm-invoices__gap { display: inline-block; min-width: 20px; text-align: center; }

/* ---------- Kopbalk en pagina op smalle schermen ---------- */

/* Tot 900px past het adres niet naast logo en knop: het krijgt een eigen regel eronder */
@media (width <= 899px) {
  .dgm-header__who {
    order: 3;
    flex: 1 0 100%;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
    text-align: left;
  }
  .dgm-header form { margin-left: auto; }
}

@media (width <= 599px) {
  .dgm-header { padding: 14px 16px; }
  .dgm-header__logo { height: 36px; }
  .dgm-header .dgm-btn { padding: 10px 18px; }
}

@media (width >= 600px) {
  .dgm-portal__title { font-size: 35px; }
}