/* ===========================
   NVAO-like theme (accessible)
   =========================== */

/* ---- Design tokens ---- */
:root{
  --color-primary: #2a8082;
  --color-accent:  #dc3031;
  --color-dark:    #000000;        /* donkerblauw-grijs voor tekst */
  --color-mid:     #5C6873;        /* secundaire tekst */
  --color-light:   #f8fdf0;        /* achtergrond lichtgrijs */
  --color-white:   #FFFFFF;

  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;

  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1rem;          /* 16px */
  --line-height-base: 1.5;

  --max-content: 1200px;

  --focus-ring: 3px solid var(--color-accent);
}

/* ---- Global reset-ish ---- */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-base);
  font-size:var(--font-size-base);
  line-height:var(--line-height-base);
  color:var(--color-dark);
  background:var(--color-white);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---- Layout wrappers ---- */
header, main, footer{
  width:100%;
}

.site-header{
  background:var(--color-primary);
  color:#000;
  padding:1.5rem 1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.site-header h1{
  margin:0;
  font-size:2rem;
  line-height:1.2;
  font-weight:700;
  text-align:center;
}

.site-header .logo-link{
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
}

.site-header .logo{
  height:80px;
}

.site-header .home-link{
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  background:var(--color-white);
  color:var(--color-dark);
  padding:0.5rem 1rem;
  border-radius:var(--radius-sm);
  text-decoration:none;
  font-weight:700;
}

@media (max-width: 600px){
  .site-header{
    flex-direction:column;
  }
  .site-header .logo-link{
    position:static;
    transform:none;
  }
  .site-header .logo{
    margin-bottom:1rem;
  }
  .site-header .home-link{
    position:static;
    transform:none;
    margin-top:1rem;
  }
}

button.contrast-toggle{
  background:var(--color-white);
  color:var(--color-dark);
  border:1px solid var(--color-dark);
}
button.contrast-toggle:hover,
button.contrast-toggle:focus{
  background:var(--color-accent);
  color:#000;
  border-color:var(--color-dark);
}

/* Intro section with buttons and description */
.intro{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1.5rem;
}

.intro .intro-sidebar{
  flex:0 0 25%;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.intro .settings,
.intro .toelichting{
  background:var(--color-light);
  padding:1rem;
  border-radius:var(--radius-md);
}

.intro .visitatie{
  background:var(--color-light);
  padding:1rem;
  border-radius:var(--radius-md);
}

.intro .settings .intro-buttons{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.intro .toelichting{
    flex:1;
}

.intro .intro-description{
  white-space:pre-line;
}

.intro .toelichting:focus{
  outline:var(--focus-ring);
}

.intro h2{
  margin-top:0;
  font-size:1.25rem;
}

.intro-buttons button{
  font-size:1.25rem;
  padding:1rem 1.5rem;
}

@media (max-width:800px){
  .intro{
    flex-direction:column;
  }
  .intro .intro-sidebar{
    flex:0 0 auto;
    width:100%;
  }
}
.link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-decoration:none;
  font-weight:400;
  font-size:1.25rem;
  padding:1rem 1.5rem;
  background:var(--color-white);
  color:var(--color-dark);
  border:1px solid var(--color-dark);
  border-radius:var(--radius-sm);
}

.link-button:hover,
.link-button:focus{
  background:var(--color-accent);
  color:#000;
  border-color:var(--color-dark);
}
button.dataset-toggle{
  background:var(--color-white);
  color:var(--color-dark);
  border:1px solid var(--color-dark);
}
button.dataset-toggle:hover,
button.dataset-toggle:focus{
  background:var(--color-accent);
  color:#000;
  border-color:var(--color-dark);
}
button.lang-toggle{
  background:var(--color-white);
  color:var(--color-dark);
  border:1px solid var(--color-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem; /* override default horizontal padding for square button */
}
button.lang-toggle .flag-icon{
  width:3.5rem;
  height:auto;
  display:block;
}
button.lang-toggle:hover,
button.lang-toggle:focus{
  background:var(--color-accent);
  color:#000;
  border-color:var(--color-dark);
}

button[aria-pressed="true"]{
  background:var(--color-accent);
  color:#000;
  border-color:var(--color-dark);
}

main{
  max-width:var(--max-content);
  margin:0 auto;
  padding:1.5rem 1rem 3rem;
  background:var(--color-white);
  flex:1;
}

footer{
  background:var(--color-light);
  color:var(--color-mid);
  padding:1.5rem 1rem;
  font-size:.875rem;
  margin-top:auto;
}

/* ---- Links & buttons ---- */
a{
  color:var(--color-primary);
  text-decoration:underline;
}
a:hover,
a:focus{
  color:var(--color-accent);
}

button{
  cursor:pointer;
  font:inherit;
  border:1px solid var(--color-primary);
  background:var(--color-primary);
  color:#000;
  padding:.5rem .9rem;
  border-radius:var(--radius-sm);
}
button:hover,
button:focus{
  background:var(--color-accent);
  border-color:var(--color-dark);
}
button[disabled]{
  opacity:.4;
  cursor:not-allowed;
}

/* ---- Skip link ---- */
.skip-link{
  position:absolute;
  top:-40px;
  left:0;
  background:var(--color-accent);
  color:#000;
  padding:.5rem 1rem;
  z-index:1000;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  text-decoration:none;
}
.skip-link:focus{
  top:0;
}

/* ---- Forms / Filters ---- */
.filters{
  display:grid;
  gap:.75rem 1rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin-bottom:1.5rem;
  background:var(--color-light);
  padding:1rem;
  border-radius:var(--radius-md);
}
.filters h2{
  grid-column:1/-1;
  margin:.25rem 0 0;
  font-size:1.25rem;
}
.filters .filter-box{
  display:flex;
  flex-direction:column;
}
.filters .filter-box label{
  margin-bottom:.25rem;
}
.filters label{
  font-weight:600;
  font-size:.9rem;
  color:var(--color-mid);
}
.filters input[type="text"],
.filters input[type="date"],
.filters select{
  width:100%;
  padding:.45rem .6rem;
  border:1px solid #CED4DA;
  border-radius:var(--radius-sm);
  font:inherit;
  background:#fff;
}
.filters input:focus,
.filters select:focus{
  outline:var(--focus-ring);
  border-color:var(--color-accent);
}

/* ---- Table ---- */
.table-wrapper{
  overflow-x:auto;
  margin-bottom:1rem;
}

#excel-table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
}
#excel-table thead{
  background:var(--color-primary);
  color:#000;
}
#excel-table thead th{
  text-align:left;
  padding:.75rem .5rem;
  font-weight:600;
  word-break:keep-all;
  overflow-wrap:normal;
}
#excel-table tbody td{
  padding:.65rem .5rem;
  border-bottom:2px solid #000;
  vertical-align:top;
}

#excel-table td{
  white-space:normal;
  overflow-wrap:anywhere;
}

#excel-table td:focus{
  outline:var(--focus-ring);
}

.main-row.even { background: var(--color-white); }
.main-row.odd  { background: var(--color-light); }
.extra-docs.even { background: var(--color-white); }
.extra-docs.odd  { background: var(--color-light); }
.previous-row.even { background: var(--color-white); }
.previous-row.odd  { background: var(--color-light); }

.previous-row td:first-child{ padding-left:1.5rem; }

#excel-table th:nth-child(1),
#excel-table td:nth-child(1){
  min-width:16ch;
}

#excel-table th:nth-child(2),
#excel-table td:nth-child(2){
  min-width:14ch;
}

#excel-table a{
  color:var(--color-accent);
  text-decoration:none;
}
#excel-table a:hover,
#excel-table a:focus{
  text-decoration:underline;
}

/* Sticky header (optional) */
  @media (min-width:768px){
    .table-wrapper{
      /* allow table to grow so the footer doesn't overlap content when zoomed */
      max-height:none;
    }
    #excel-table thead th{
      background:var(--color-primary);
      color:#000;
      z-index:2;                /* boven data‑rijen */
    }
  }

/* ---- Pagination ---- */
.pagination{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem;
  margin:0;
}
.pagination button{
  min-width:2.25rem;
  padding:.4rem .6rem;
  border-radius:var(--radius-sm);
  border:1px solid var(--color-primary);
  background:var(--color-white);
  color:var(--color-primary);
}
.pagination button:hover,
.pagination button:focus{
  background:var(--color-primary);
  color:#000;
}
.pagination button.active[aria-current="page"]{
  background:var(--color-accent);
  border-color:var(--color-accent);
  color:#000;
}
.pagination .ellipsis{
  padding:.4rem .6rem;
  color:var(--color-mid);
}

/* ---- Download button ---- */
.download-btn{
  margin:0;
}

/* ---- Table controls ---- */
.top-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin:1rem 0;
}
.top-controls nav{ flex:1; }
.programme-bulk-toggle{
  white-space:nowrap;
}

/* ---- Bottom controls (pagination under table) ---- */
.bottom-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin:1rem 0;
}
.bottom-controls nav{ flex:1; }

/* ---- Error box ---- */
#error{
  margin-bottom:1rem;
  background:#fdecea;
  color:#611a15;
  border:1px solid #f5c6cb;
  padding:.75rem 1rem;
  border-radius:var(--radius-sm);
}

/* ---- Focus outlines ---- */
:focus-visible{
  outline:var(--focus-ring);
  outline-offset:2px;
}
:focus:not(:focus-visible){
  outline:none;
}

.noscript-warning{
  margin:1rem;
  background:#fdecea;
  color:#611a15;
  border:1px solid #f5c6cb;
  padding:.75rem 1rem;
  border-radius:var(--radius-sm);
}

/* ---- Utility ---- */
.hidden{ display:none !important; }
.visually-hidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

#excel-table thead th.sortable { cursor:pointer; user-select:none; }
#excel-table thead th.sortable .arrow {
  margin-left:4px;
  font-size:.75em;
  display:inline-block;
  width:1em;
  text-align:center;
}
#excel-table thead th.sortable .arrow::after { content:""; }
#excel-table thead th[aria-sort="ascending"]  .arrow::after { content:"▲"; }
#excel-table thead th[aria-sort="descending"] .arrow::after { content:"▼"; }

#excel-table thead th.sortable button{
  background:none;
  border:none;
  color:inherit;
  font:inherit;
  padding:0;
  cursor:pointer;
}
#excel-table thead th.sortable button:focus{
  outline:3px solid #000;
  outline-offset:2px;
}

/* Responsive table: stack cells on narrow viewports */
@media (max-width:60em){
  .table-wrapper{ overflow-x:visible; }
  #excel-table thead{ display:none; }
  #excel-table tbody tr{ display:block; margin-bottom:1rem; }
  #excel-table tbody td{ display:block; width:100%; word-break:break-word; }
  #excel-table tbody td[data-label]::before{
    content: attr(data-label) ":";
    font-weight:600;
    display:block;
    margin-bottom:.25rem;
  }
  /* verberg de kolom "Documenten" in lijstweergave */
  #excel-table tbody tr:not(.extra-docs) td:last-child{ display:none; }
  /* toon extra documenten standaard wanneer kolom verborgen is */
  #excel-table tbody tr.extra-docs[hidden]{ display:block; }
}

/* ---------- Uitklapbare extra‑documenten ---------- */
/* uitklap‑pijltje rechts */
.expander{  
  border:none; background:none; color:inherit;
  cursor:pointer; font-size:1rem; padding:0;
}
.expander::before { content:"▶"; }
.expander[aria-expanded="true"]::before { content:"▼"; }
.expander:hover,
.expander:focus{ background:none; border:none; color:inherit; }

.programme-toggle{
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
  font:inherit;
  padding:0;
  text-align:left;
}
.programme-toggle::before{ content:"▶"; margin-right:.25rem; }
.programme-toggle[aria-expanded="true"]::before{ content:"▼"; }

/* rij met extra documenten */
tr.extra-docs { background:var(--color-light); }
tr.extra-docs td{ padding:.75rem .5rem; }
tr.extra-docs ul{ margin:0; padding-left:1.25rem; }

/* ---- Loading indicator ---- */
.loading{
  display: flex;
  align-items: center;
  justify-content: center;   /* horizontaal centreren */
  gap: .5rem;
  margin-bottom: 1rem;
  font-style: italic;
  font-size: 1.25rem;        /* groter lettertype */
  width: 100%;               /* vult de breedte → centrering werkt altijd */
  text-align: center;
}

.loading.hidden{ display: none; }

.spinner{
  width: 1em;
  height: 1em;
  border: 2px solid var(--color-primary);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

@keyframes spin{
  from{ transform: rotate(0deg);}
  to  { transform: rotate(360deg);}
}

/* ------------ High contrast mode ------------ */
body.high-contrast{
  background:#000;
  color:#fff;
}
body.high-contrast header,
body.high-contrast main,
body.high-contrast footer{
  background:#000;
  color:#fff;
}
body.high-contrast a{
  color:#ff0;
}
body.high-contrast a:hover,
body.high-contrast a:focus{
  color:#000;
  background:#ff0;
}
body.high-contrast button{
  background:#000;
  color:#fff;
  border-color:#fff;
}
body.high-contrast .pagination button.prev,
body.high-contrast .pagination button.next{
  color:#ccc;
  border-color:#ccc;
}
body.high-contrast .pagination .ellipsis{
  color:#ccc;
}
body.high-contrast button:hover,
body.high-contrast button:focus{
  background:#ff0;
  color:#000;
  border-color:#ff0;
}
body.high-contrast button.contrast-toggle{
  background:#ff0;
  color:#000;
  border-color:#000;
}
body.high-contrast button.contrast-toggle:hover,
body.high-contrast button.contrast-toggle:focus{
  background:#fff;
  color:#000;
  border-color:#fff;
}
body.high-contrast button[aria-pressed="true"]{
  background:#ff0;
  color:#000;
  border-color:#ff0;
}
body.high-contrast .pagination button.active[aria-current="page"]{
  background:#ff0;
  border-color:#ff0;
  color:#000;
}
body.high-contrast :focus-visible{
  outline:3px solid #ff0;
  outline-offset:2px;
}
body.high-contrast #error,
body.high-contrast .noscript-warning{
  background:#000;
  color:#ff0;
  border:1px solid #ff0;
}
body.high-contrast .spinner{
  border-color:#ff0;
  border-right-color:transparent;
}

body.high-contrast .intro .settings,
body.high-contrast .intro .toelichting,
body.high-contrast .intro .visitatie{
  background:#000;
  color:#fff;
}

body.high-contrast .intro .visitatie .link-button{
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

body.high-contrast .intro .visitatie .link-button:hover,
body.high-contrast .intro .visitatie .link-button:focus{
  background:#ff0;
  color:#000;
  border-color:#ff0;
}

body.high-contrast .filters{
  background:#000;
}

body.high-contrast .filters h2,
body.high-contrast .filters label{
  color:#fff;
}

/* High contrast table adjustments */
body.high-contrast #excel-table thead,
body.high-contrast #excel-table thead th{
  background:#000;
  color:#ff0;
}

body.high-contrast .main-row.even,
body.high-contrast .main-row.odd,
body.high-contrast .extra-docs.even,
body.high-contrast .extra-docs.odd,
body.high-contrast .previous-row.even,
body.high-contrast .previous-row.odd{
  background:#000;
}

body.high-contrast #excel-table tbody td{
  border-bottom:2px solid #fff;
}

body.high-contrast #excel-table a{
  color:#ff0;
}
body.high-contrast #excel-table a:hover,
body.high-contrast #excel-table a:focus{
  color:#000;
  background:#ff0;
}

body.high-contrast #excel-table thead th.sortable button:focus{
  outline:3px solid #ff0;
  outline-offset:2px;
}

/* ---------------- Minimum touch target sizes ---------------- */
:root{
  --min-target: 24px;
}

/* Ensure all common interactive controls meet 24x24px */
button,
[role="button"],
summary,
select,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"],
input[type="date"],
input[type="checkbox"],
input[type="radio"],
input[type="file"]::file-selector-button{
  min-width: var(--min-target);
  min-height: var(--min-target);
}

/* Table header sort buttons */
#excel-table thead th.sortable button{
  min-height: var(--min-target);
  width: 100%;
}

/* Expander and programme toggles */
.expander,
.programme-toggle{
  min-width: var(--min-target);
  min-height: var(--min-target);
}

/* Links inside table cells: make hit area at least 24x24 */
#excel-table a{
  display:inline-block;
  min-width: var(--min-target);
  min-height: var(--min-target);
}

/* Pagination buttons already larger, keep min anyway */
.pagination button{ min-height: var(--min-target); }