/* Responsive-revisie van de nabouw — aanvullingen op responsive.css van het ontwerp.
   Eigen bestand, zodat `pnpm extract` (dat responsive.css overschrijft) dit niet wegveegt.
   Laadt na de paginastijl, dus het wint bij gelijke specificiteit.

   Regels van de skill responsive-revisie: desktop (>= 1280px) blijft visueel ongewijzigd, niets
   verbergen, 320px moet werken, één set breekpunten (1024 / 768 / 560 / 480 / 360).
   Elke regel hieronder hoort bij een gemeten bevinding (scripts/responsive-audit.mjs). */

/* ── Op elke breedte: standaardgedrag van de browser dat inhoud buiten zijn kader duwt ── */

/* Een <fieldset> heeft van de browser min-width: min-content. In de filterkolom duwde dat de
   keuzerijen 8px buiten de kaart, op élke breedte. */
#dc-root fieldset {
  min-width: 0;
}
#dc-root fieldset > * {
  min-width: 0;
}

/* Chrome geeft een range-invoer 2px marge links en rechts; met width: 100% valt hij daardoor
   4px buiten zijn kader (filter "Maximale afstand"). */
#dc-root input[type="range"] {
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Lange woorden, e-mailadressen en URL's in tabellen en definitielijsten breken af in plaats van
   hun cel op te rekken. */
#dc-root td,
#dc-root th,
#dc-root dd {
  overflow-wrap: anywhere;
}

/* responsive.css geeft tabellen pas onder 768px een schuifhouder. Op 1024px (laptop, tablet in
   liggend formaat) liep de beheertabel daardoor 107px buiten zijn kaart. */
#dc-root .bv-tabel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── tot 768px ── */
@media (max-width: 768px) {
  /* responsive.css laat knoppen en links al afbreken, maar een link met flex-shrink: 0 krimpt
     niet mee en bleef daardoor breder dan zijn rij (CTA op /over-ons/). */
  #dc-root a[style*="white-space: nowrap"],
  #dc-root button[style*="white-space: nowrap"] {
    flex-shrink: 1 !important;
    max-width: 100%;
    height: auto !important;
    min-height: 44px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    text-align: center;
  }
  /* een knop met tekst op twee regels blijft verticaal gecentreerd */
  #dc-root a[style*="white-space: nowrap"][style*="inline-flex"],
  #dc-root button[style*="white-space: nowrap"][style*="inline-flex"] {
    justify-content: center;
  }

  /* Tikbare doelen van 44px (skill responsive-revisie). responsive.css dekt navigatie, voet en
     definitielijsten al; dit zijn de actielinks in de inhoud ("Bekijk alle 49 kantoren →",
     "Wachtwoord vergeten?", "Bekijk je profiel →"), die maar 24 tot 26px hoog waren. */
  #dc-root :where(div, section, header, footer, nav, h2, h3, aside) > a:not([style*="display"]):not([style*="height"]):not([style*="position: absolute"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Een aankruisvakje van 17px is te klein om te tikken; het vakje groeit mee en de hele regel
     wordt het tikvlak. */
  #dc-root input[type="checkbox"],
  #dc-root input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto !important;
  }
  #dc-root label:has(> input[type="checkbox"]),
  #dc-root label:has(> input[type="radio"]) {
    min-height: 44px;
    align-items: center !important;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  /* Een zoekveld met een vaste breedte van 320px past niet op een 320px-scherm. */
  #dc-root input[type="text"],
  #dc-root input[type="search"],
  #dc-root input[type="email"],
  #dc-root input[type="tel"],
  #dc-root input[type="number"] {
    max-width: 100% !important;
  }
}

/* ── tot 560px: rijen met een statuskolom stapelen ── */
@media (max-width: 560px) {
  /* Dashboardrijen (aanvraag, bericht): avatar + titel + status naast elkaar. De statuskolom stond
     op flex: 0 0 auto en kneep de titel samen tot een streepje van 53px. De status gaat nu onder de
     titel staan, zodat die de volle breedte houdt. */
  #dc-root button[style*="align-items: flex-start"][style*="gap: 14px"] {
    flex-wrap: wrap !important;
  }
  #dc-root button[style*="align-items: flex-start"][style*="gap: 14px"] > span:last-child {
    flex: 0 0 100% !important;
    padding-top: 8px !important;
  }
}