/* https://www.asciiart.eu/text-to-ascii-art */

/*   ____ _       _           _         ____ ____ ____   */
/*  / ___| | ___ | |__   __ _| | ___   / ___/ ___/ ___|  */
/* | |  _| |/ _ \| '_ \ / _` | |/ _ \ | |   \___ \___ \  */
/* | |_| | | (_) | |_) | (_| | |  __/ | |___ ___) |__) | */
/*  \____|_|\___/|_.__/ \__,_|_|\___|  \____|____/____/  */

/* Globale focusindicator — donkerblauw #1F5181 (contrast ≥ 3:1 op wit)
   Geldt voor alle interactieve elementen via :focus-visible (WCAG 2.4.7) */
:focus-visible {
  outline: 3px solid #1F5181;
  outline-offset: 2px;
}

/* Override Bootstrap's lichtblauwe box-shadow op knoppen en links */
.btn:focus,
.btn:focus-visible {
  box-shadow: none !important;
  outline: 3px solid #1F5181 !important;
  outline-offset: 2px;
}

:root {
  /* Bug 2 (WCAG 2.4.11 Focus Not Obscured): centrale scroll-offset gelijk aan de
     sticky-headerhoogte van Dienstverleningskompas (~70-80px). Wordt gebruikt voor
     scroll-padding-top en scroll-margin-top zodat gefocuste elementen niet achter
     de sticky .navbar-custom verdwijnen. */
  --nav-sticky-offset: 70px;
}

main {
  padding-top: 0;
  /* Navbar is sticky (in document flow), geen extra padding nodig */
  flex: 1 0 auto;
  /* flex-grow: 1, flex-shrink: 0, flex-basis: auto — voorkomt krimpen van content */
}



html {
  /* Bug 2 (WCAG 2.4.11): scroll-offset gekoppeld aan --nav-sticky-offset */
  scroll-padding-top: var(--nav-sticky-offset);
  /* Zorg dat scrollbars verschijnen wanneer content overflowt (WCAG 1.4.10) */
  overflow: auto;
}

/* Bug 2 (WCAG 2.4.11): vangnetregel — houd via scroll-margin-top ook elementen die
   via anchors/JS in beeld scrollen onder de sticky header, niet erachter. */
:where(a[href], button, input, select, textarea, [tabindex]):focus {
  scroll-margin-top: var(--nav-sticky-offset);
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Ensure the body fills the viewport height */
}

/* Background overlay */
/* Background overlay */
.background-overlay {
  position: relative;
  width: 100%;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.85); /* wit met 85% dekking */
  padding: 30px; /* Optional padding */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
  margin: 20px auto;
  border-radius: 20px;
}


ion-icon {
  pointer-events: none;
}

.bg-wit {
  background-color: #fff;
  color: #1F5181;
}

.card-label{
  font-size: 16px;
  margin-top: 10px;
  line-height: 24px;
  color: #212529;
}


/*  _   _                _            */
/* | | | | ___  __ _  __| | ___ _ __  */
/* | |_| |/ _ \/ _` |/ _` |/ _ \ '__| */
/* |  _  |  __/ (_| | (_| |  __/ |    */
/* |_| |_|\___|\__,_|\__,_|\___|_|    */


.navbar-custom {
  display: flex;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  align-items: center;
  min-height: 60px;
  position: sticky;
  top: 0;
  z-index: 1030;
  flex-wrap: wrap;
}

.back-button-container {
  flex-shrink: 0;
  /* Prevents the back button container from shrinking */
  width: 50px;
  /* Static width to reserve space whether the button is there or not */
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 3px;
  margin-left: 10px;
  margin-right: 0px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  background-color: #FFF;
}

/* Skip-link: verborgen tot focus via toetsenbord */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: 12px 20px;
  background-color: var(--bs-primary);
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 3px solid #1F5181;
  outline-offset: -3px;
  color: #ffffff;
}

#main-content:focus {
  outline: none;
}

.logo {
  margin-top: 0px;
  padding-left: 0px;
  /* Adjust as necessary to position the logo where you want it relative to the end of the back button container */
  margin-left: 5px;
}

.logo img {
  height: 50px;
  width: auto;
}

.back-button i {
  font-size: 25px;
  /* Increased size of the icon */
  color: var(--bs-primary, #2e7380);
  /* You can change the color if needed */
}

.back-button:hover i {
  color: var(--bs-primary);
  /* Change icon color to white on hover */
}

.navigation-box {
  position: relative;
}

.navbar-right {
  display: flex;
  align-items: center;
  /* Zorg dat alles verticaal gecentreerd is */
  gap: 10px;
  /* Optioneel: Ruimte tussen de elementen */
}

.navbar-left {
  display: flex;
  align-items: center;
  /* Zorg dat alles verticaal gecentreerd is */
}


.navigation {
  font-family: 'Poppins', sans-serif;
  position: relative;
  width: 60px;
  height: auto;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.navigation.active {
  min-width: 250px;
  height: 100%;
}

.navigation .userBx {
  position: relative;
  width: calc(100% - 60px);
  /* Set initial width to fill space minus toggle button */
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  visibility: hidden;
  /* Initially hidden */
  transform: translateX(100%);
  /* Start off-screen to the right */
  transition: transform 0.5s ease;
  /* Animate transform and delay visibility */
  z-index: 1;
}

.navigation.active .userBx {
  transform: translateX(0%);
  /* Move into view */
  visibility: visible;
  /* Make visible immediately when transitioning */
  padding-left: 20px;
  z-index: 1;
}

.navigation .userBx .nav_username {
  color: var(--bs-primary, #2e7380);
  font-size: 0.9em;
  display: block;
  margin: 0;
}

.navigation .userBx .nav_rol {
  color: #555;
  font-size: 0.6em;
  display: block;
}

.menu {
  position: absolute;
  width: 100%;
  background: #fff;
  padding-left: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.5s ease, box-shadow 0.3s ease; /* Combineer transform en box-shadow */
  /* Transition for moving down */
  transform: translateY(-100%);
  /* Start hidden above */
  visibility: hidden;
  z-index: 0;
  box-shadow: 0px 20px 16px 0px rgba(0, 0, 0, 0.2);
}

.menu.with-shadow {
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 12px;   /* linker onderhoek */
  border-bottom-right-radius: 12px;  /* rechter onderhoek */
}





.menu li {
  list-style: none;
  padding-left: 0.5em;
  margin-bottom: 1em;
}

.menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 1em;
  text-decoration: none;
  color: #595959;
  background-color: #ffffff;
}

.menu li a i {
  min-width: 1.5em;
  text-align: center;
}

.menu li a:hover {
  color: var(--bs-primary);
}

.menu li a ion-icon {
  font-size: 1.5em;
}

.navigation .menuToggle {
  position: relative;
  width: 60px;
  height: 60px;
  background: #fff;
  border: none;
  box-shadow: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
}

.navigation .menuToggle:focus {
  outline: none;
  box-shadow: none;
}

.navigation .menuToggle:focus-visible {
  outline: 3px solid #1F5181;
  outline-offset: -3px;
}

.navigation .menuToggle::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  background: #808080;
  transform: translateY(-10px);
  box-shadow: 0 10px #2e7380;
}

.navigation .menuToggle::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  background: #2e7380;
  transform: translateY(10px);
}

.navigation .menuToggle:hover::before {
  background: var(--bs-primary);
  /* Change the color to red on hover */
  box-shadow: 0 10px var(--bs-primary);
}

.navigation .menuToggle:hover::after {
  background: var(--bs-primary);
  /* Change the color to red on hover */
}

.navigation.active .menuToggle::before {
  transform: translateY(0px) rotate(45deg);
  box-shadow: 0 0 #2e7380;
}

.navigation.active .menuToggle::after {
  transform: translateY(0px) rotate(-45deg);
}

.navigation.active .menu {
  transition: transform 0.5s ease;
  /* Transition for moving down */
  transform: translateY(0);
  /* Slide down into view */
  visibility: visible;
  z-index: 0;
}

.model-pill {
  padding: 10px 20px !important;
  font-size: 1rem;
  margin-left: 10px;
  /* Add margin to separate the pills */
}

.org-pill {
  padding: 10px 20px !important;
  font-size: 1rem;
}

.org-switch-link {
  text-decoration: none;
  color: inherit;
}

.org-switch-link:hover .org-pill {
  opacity: 0.85;
  cursor: pointer;
}


/* | |    __ _ _ __   __| (_)_ __   __ _ ___ _ __   __ _  __ _(_)_ __   __ _  */
/* | |   / _` | '_ \ / _` | | '_ \ / _` / __| '_ \ / _` |/ _` | | '_ \ / _` | */
/* | |__| (_| | | | | (_| | | | | | (_| \__ \ |_) | (_| | (_| | | | | | (_| | */
/* |_____\__,_|_| |_|\__,_|_|_| |_|\__, |___/ .__/ \__,_|\__, |_|_| |_|\__,_| */
/*  / ___| ___| |__  _ __ _   _(_) |___/__ _|_|          |___/                */
/* | |  _ / _ \ '_ \| '__| | | | | |/ / _ \ '__|                              */
/* | |_| |  __/ |_) | |  | |_| | |   <  __/ |                                 */
/*  \____|\___|_.__/|_|   \__,_|_|_|\_\___|_|                                 */
/* Landingspagina gebruiker */

/* Header line styling */
.header-line {
  width: 40%;
  height: 3px;
  background-color:#15AEA4
}

/* Intro text styling */
.intro-text {
  max-width: 600px;
}

/* Verberg de standaard lichtblauwe Bootstrap box-shadow op elementen
   in cards; het element zelf toont de focusindicator */
.card a:focus,
.card button:focus,
.card a:focus-visible,
.card button:focus-visible {
  box-shadow: none !important;
  outline: 3px solid #1F5181 !important;
  outline-offset: 2px;
}

/* Card header styling for progress cards */
.card-header {
  background-color: #156082;
  /* Adjust to match your design */
}



/* ___       _                                     */
/*|_ _|_ __ | | ___   __ _ _ __   __ _  __ _  ___  */
/* | || '_ \| |/ _ \ / _` | '_ \ / _` |/ _` |/ _ \ */
/* | || | | | | (_) | (_| | |_) | (_| | (_| |  __/ */
/*|___|_| |_|_|\___/ \__, | .__/ \__,_|\__, |\___| */
/*                   |___/|_|          |___/       */

.Login {
  border-radius: 20px;
  background: 
    linear-gradient(
      rgba(var(--bs-primary-rgb), 0.4),   /* overlay in jouw primary kleur */
      rgba(var(--bs-primary-rgb), 0.4)
    ),
    url(../images/Rijksoverheid.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: 100px auto 0;
  max-width: 1080px;
}


.Login section {
  width: 50%;
  background-color: #FFF;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 50px;
  border: 1px solid #dee2e6;
  box-shadow: 
    1.057px 1.52px 3.148px 0px rgba(0, 0, 0, 0.02),
    4.652px 6.689px 6.519px 0px rgba(0, 0, 0, 0.03),
    11.42px 16.419px 13px 0px rgba(0, 0, 0, 0.04),
    21.993px 31.622px 25.481px 0px rgba(0, 0, 0, 0.04),
    37.008px 53.211px 46.852px 0px rgba(0, 0, 0, 0.05),
    57.098px 82.097px 80px 0px rgba(0, 0, 0, 0.07);
}

/* Responsieve login bij hoge zoom (WCAG 1.4.10) */
@media (max-width: 600px) {
  .Login {
    margin: 20px auto 0;
    border-radius: 10px;
    max-width: 100%;
  }

  .Login section {
    width: 100%;
    border-radius: 10px;
    padding: 20px;
  }
}

.text {
  font-family: sans-serif !important;
}

body {
  font-family: sans-serif !important;
}




.dropdown_informatie {
  position: absolute;
  z-index:9999;
  display: none;
  background-color: #f9f9f9;
  width: 35%;
  left: 50%;
  min-width: 200px;
  max-width: 500px;
  box-shadow: 0px 20px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
  border-radius: 0px;
  padding: 10px;
  padding-right: 20px;
  min-height: 80px;
  text-align: left;
}


/* Modal close button: altijd wit (werkt op donkere bg-primary headers) */
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.close-button {
  background-color: transparent; /* Transparent background for a clean look */
  border: none; /* Remove default button border */
  color: #ffffff; 
  font-size: 1.2rem; /* Larger size for better visibility */
  font-weight: bold; /* Bold for emphasis */
  cursor: pointer; /* Pointer cursor to indicate it's clickable */
  outline: none; /* Remove focus outline (we'll add a custom one) */
  position: absolute; /* For custom styling enhancements */
  padding: 0.5rem; /* Add padding for better click area */
  border-radius: 50%; /* Circular button */
  top: 2px;
  right: 5px;
  transition: transform 0.3s ease; /* Smooth hover effects */
}

.close-button:hover {
  transform: scale(1.3); /* Slightly enlarge button on hover */
}

.close-button:focus {
  outline: 2px solid var(--bs-primary); /* Blue outline for accessibility */
  outline-offset: 2px;
}

.close-button:active {
  transform: scale(0.9); /* Shrink slightly when clicked */
}

.password-rules {
    display: block;
    margin-top: 0;
    font-size: 0.85rem;
    color: #666;
}

.nav-tabs .nav-link {
    color: #ffffff;             
    background-color:var(--bs-primary);   
    border: 1px solid transparent;
    margin-right: 4px;
    border-radius: 6px 6px 0 0;
    font-weight: 500;
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible {
    outline: 3px solid #1F5181;
    outline-offset: 2px;
    color: #ffffff;
    background-color: var(--bs-primary);
}
.nav-tabs .nav-link:hover {
    color: #ffffff;            
    background-color: var(--bs-primary);
}
.nav-tabs .nav-link.active {
    color: var(--bs-primary) !important;
    background-color: #ffffff;
    font-weight: bold;
}
.nav-tabs .nav-link.active:focus,
.nav-tabs .nav-link.active:focus-visible {
    outline: 3px solid #1F5181;
    outline-offset: 2px;
    color: var(--bs-primary) !important;
    background-color: #ffffff;
}
footer{
  background-color: #ffffff;
}
.footer-container{
  max-width: 1200px;
  width: 100%;
  font-size: 0.9em;
  margin: auto;
}
.footer-container a{
  color: var(--bs-primary);
  text-decoration: none;
}
.footer-container a:hover{
  text-decoration: underline;
}
.small-text{
  font-size: 0.8em;
}
.background-overlay p a {
  color: var(--bs-primary);
  text-decoration: none;
}
.background-overlay p a:hover{
  text-decoration: underline;
}
.validation-error{
  margin-top: 5px;
}
.tooltip-inner p {
  margin-bottom: 0;
}

.slider-disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    cursor: not-allowed;
}

.slider-disabled::-webkit-slider-thumb {
    background: #bdbdbd;
}

.slider-disabled::-moz-range-thumb {
    background: #bdbdbd;
}

.slider-disabled::-webkit-slider-runnable-track {
    background: #d6d6d6;
}

.slider-disabled::-moz-range-track {
    background: #d6d6d6;
}


/* Zorg dat de nav-container responsief meegroeit */
.nav-container {
  width: 100%;
}


/* =====================================================
   Responsive / Reflow — WCAG 1.4.10
   Bij 400% zoom op 1280x1024 is het effectieve
   viewport ~320px breed. Onderstaande regels zorgen
   dat de navigatie zichtbaar en bereikbaar blijft.
   ===================================================== */

/* Zorg dat de sticky navbar verticaal kan meegroeien
   en horizontaal scrollbaar is als de inhoud niet past */
@media (max-width: 480px) {

  /* Navbar: laat hoogte automatisch meegroeien, sta
     horizontale scroll toe als fallback */
  .navbar-custom {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
  }

  /* Container in de navbar: vul volledige breedte */
  .navbar-custom > .container,
  .navbar-custom > .nav-container {
    max-width: 100% !important;
    flex-wrap: wrap;
    padding: 4px 8px !important;
  }

  /* Linker- en rechterkant: wrap als het niet past */
  .navbar-left,
  .navbar-right {
    flex-wrap: wrap;
    gap: 4px;
  }

  .navbar-right {
    width: 100%;
    justify-content: flex-end;
  }

  /* Logo kleiner bij hoog zoomniveau */
  .logo img {
    height: 36px;
  }

  /* Pills: kleiner en in staat om te wrappen */
  .model-pill,
  .org-pill {
    padding: 4px 10px !important;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .modelselectedtag {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Hamburger menu: iets kleiner */
  .navigation .menuToggle {
    width: 48px;
    height: 48px;
  }

  /* Dropdown menu: beperk hoogte en maak scrollbaar
     zodat het niet buiten het viewport valt */
  .navigation.active .menu,
  .menu {
    overflow-y: auto;
    width: 100vw;
    left: 0;
    right: 0;
    position: fixed;
    /* Bug 1 (WCAG 1.4.10): de navbar wordt bij geopend menu bovenaan vastgezet
       (position: fixed, hogere z-index dan het menu) zodat de sluitknop
       (.menuToggle) bereikbaar blijft. Het menu begint net onder de profielinfo
       (top: 66px) en valt bewust OVER de breadcrumbs, zodat die worden overdekt.
       De profielinfo (.userBx: naam .nav_username + rol .nav_rol) en de sluitknop
       blijven leesbaar/bereikbaar boven het menu. Een lang menu scrollt intern. */
    top: 66px;
    max-height: calc(100vh - 66px);
    transform: none !important;
    z-index: 9999;
    padding-right: 20px;
    border-radius: 0;
  }

  /* Bug 1 (WCAG 1.4.10): pin de volledige navbar (met de sluitknop) bovenaan de
     viewport ZODRA het menu open is, boven het fixed menu (z-index 9999). Zo blijven
     zowel de sluitknop als de menu-items gegarandeerd zichtbaar bovenaan, ongeacht
     de scrollpositie. Alleen actief bij geopend menu, zodat het normale sticky
     gedrag (menu gesloten) ongewijzigd blijft. */
  .navbar-custom:has(.navigation.active) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10000; /* boven het menu (9999) zodat de sluitknop (.menuToggle) bereikbaar blijft */
  }

  /* Fallback zonder :has(): til de sluitknop zelf boven het fixed menu (9999) uit
     wanneer het menu open is, zodat de knop klikbaar blijft ook op browsers zonder
     :has()-ondersteuning. De basisregel geeft .menuToggle al z-index: 4. */
  .navigation.active .menuToggle {
    position: relative;
    z-index: 10001; /* altijd boven het fixed menu */
  }

  /* Wanneer menu niet actief is: verberg het via
     visibility, zonder transform */
  .navigation:not(.active) .menu {
    visibility: hidden;
    display: none;
  }

  .navigation.active .menu {
    visibility: visible !important;
    display: block;
  }

  /* Pas main padding aan (navbar is sticky, neemt eigen ruimte in) */
  main {
    padding-top: 0;
  }

  html {
    /* Bug 2 (WCAG 2.4.11): gebruik de centrale offset, met 80px als fallback */
    scroll-padding-top: var(--nav-sticky-offset, 80px);
  }

  /* navigation-box: mag niet clippen */
  .navigation-box {
    overflow: visible;
  }

  .navigation {
    overflow: visible;
  }

  /* Broodkruimels en content: voorkom horizontale overflow */
  .background-overlay {
    max-width: 100%;
    padding: 12px;
    margin: 10px auto;
    border-radius: 10px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Bug 1 (WCAG 1.4.10 Reflow): voorkom overlap .userBx / .logo bij geopend menu.
     Wanneer het menu open is (.navigation.active) mag het logo geen horizontale
     ruimte meer delen met het profielblok: verberg de navbar-left zodat .userBx
     de volledige breedte krijgt en de profieltekst leesbaar blijft. */
  .navbar-custom:has(.navigation.active) .navbar-left {
    display: none;
  }

  .navigation.active .userBx {
    width: calc(100% - 60px);
    min-width: 0;
    background: #fff; /* dekkende achtergrond, geen doorschijnende overlap */
    z-index: 2;       /* boven eventueel resterende navbar-left content */
  }

  /* Bug 1 (WCAG 1.4.10): fallback voor browsers zonder :has()-ondersteuning.
     Onvoorwaardelijk toegevoegd zodat er altijd een geldige oplossing is: geef
     .userBx een dekkende achtergrond en hogere z-index dan .logo, zodat het
     profielblok het logo overdekt in plaats van eronder te verdwijnen. */
  .logo {
    z-index: 0;
  }

  .navigation .userBx {
    background: #fff;
  }

  .navigation.active .userBx {
    z-index: 2;
    position: relative;
  }

  /* Bug reflow (WCAG 1.4.10): onderdelen-tabel stapelt bij smalle viewport zodat er
     geen horizontale scrollbalk in de leesrichting ontstaat. De onderdelen-overzicht-
     tabel (gerenderd door vragenlijst_user::displayOnderdelen/displayExtraOnderdelen)
     heeft cellen met vaste inline max-breedtes (max-width:130px / max-width:300px) plus
     een actiekolom (~70px); samen overschrijden die de effectieve viewport (~341px) bij
     400% zoom. We targeten UITSLUITEND deze tabel via de unieke class .onderdeel-row op
     de rijen — andere tabellen (o.a. Vraag/Antwoord-layouttabellen met .table-transparent,
     en data-tabellen met .table-striped/.table-responsive) blijven ongemoeid.

     Aanpak: maak tabel/thead/tbody/rij/cel block-level zodat cellen verticaal stapelen.
     De :has()-variant target het tabel-element zelf (voor browsers met :has()); de
     .onderdeel-row-regels eronder werken ook zonder :has() en volstaan al om de overflow
     weg te nemen (de cellen stapelen en krimpen naar de viewportbreedte). */
  table:has(> tbody > tr.onderdeel-row) {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  table:has(> tbody > tr.onderdeel-row) thead,
  table:has(> tbody > tr.onderdeel-row) tbody {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Non-:has() basis: stapel de rijen en cellen. Werkt op elke browser en neemt de
     horizontale overflow alleen al hiermee weg. */
  tr.onderdeel-row,
  tr.onderdeel-row > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* Overschrijf de vaste inline max-breedtes (max-width:130px/300px) zodat de cellen
     kunnen krimpen tot de viewport. !important is hier nodig om de inline style te
     overrulen; laat lange woorden/URLs veilig afbreken. */
  tr.onderdeel-row > td {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  /* De thead (Onderdeel / Beschrijving / Ingevuld / leeg) is betekenisloos zodra de
     cellen stapelen; verberg hem visueel maar houd hem toegankelijk voor screenreaders
     (screen-reader-only), zodat er geen gebroken eenkoloms-header verschijnt. */
  table:has(> tbody > tr.onderdeel-row) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Extra smal (bij extreme zoom, ~200px effectief) */
@media (max-width: 400px) {

  .navbar-custom {
    min-height: 40px !important;
    height: auto !important;
    padding: 2px 0 !important;
    flex-wrap: nowrap !important;
  }

  .navbar-custom > .container,
  .navbar-custom > .nav-container,
  .navbar-custom .container.nav-container {
    flex-wrap: nowrap !important;
    padding: 2px 4px !important;
    max-width: 100% !important;
  }

  .navbar-left,
  .navbar-right {
    flex-wrap: nowrap !important;
    gap: 2px;
  }

  .navbar-left {
    flex-shrink: 0;
  }

  .navbar-right {
    flex-shrink: 1;
    overflow: hidden;
  }

  /* Verberg de model/org pills bij extreme zoom - niet essentieel voor navigatie */
  .model-pill,
  .org-pill,
  .modelselectedtag {
    display: none !important;
  }

  .logo img {
    height: 28px;
  }

  /* Hamburger menu compacter */
  .navigation .menuToggle {
    width: 36px;
    height: 36px;
  }

  .navigation {
    width: 40px;
  }

  .back-button-container {
    width: 30px;
  }

  /* Bug 1 (WCAG 1.4.10 Reflow): dek ook het extreme-zoom-breekpunt af — verberg
     de navbar-left bij geopend menu en geef .userBx de volle viewportbreedte
     zodat de profielinformatie niet achter de .logo verdwijnt. */
  .navbar-custom:has(.navigation.active) .navbar-left {
    display: none;
  }

  .navigation.active .userBx {
    width: calc(100vw - 40px);
    background: #fff;
    z-index: 2;
  }

  /* Bug 1 (WCAG 1.4.10): op dit breekpunt begint het menu net onder de profielinfo
     (top: 52px, i.p.v. de 66px van het 480px-breekpunt) en valt bewust OVER de
     breadcrumbs, zodat die worden overdekt. De profielinfo (.userBx: naam
     .nav_username + rol .nav_rol) en de sluitknop blijven leesbaar/bereikbaar boven
     het menu. De navbar-pin (:has) en de .menuToggle-fallback uit het 480px-blok
     gelden hier ook, zodat de sluitknop bereikbaar blijft. */
  .navigation.active .menu,
  .menu {
    top: 52px;
    max-height: calc(100vh - 52px);
  }
}

/* Headings (h1, h2) altijd in #333, ongeacht text-primary/text-secondary class */
h1, h2,
h1.text-primary, h2.text-primary,
h1.text-secondary, h2.text-secondary {
  color: #333 !important;
}