/* ══════════════════════════════════════════════════════════════════════════
   Willaert CDS — huisstijllaag bovenop het Paces-thema
   Zelfde tokens als het beheerportaal (admin.willaert-cds.com):
   primary #236dc9, dark #313a46, Nunito. Merkaccent: oranje #ff7425,
   navy #0d0845 (uit het logo).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --cds-orange: #ff7425;
  --cds-orange-soft: rgba(255, 116, 37, 0.12);
  --cds-navy: #0d0845;
  --cds-amber: #ffb100;
}

/* ══════════════════════════════════════════════════════════════════════════
   Schermvullend skelet

   Elke pagina is precies één venster hoog. De kop (tegels, filters) en de voet
   staan stil; alleen `.page-body` scrollt. Dat scheelt het heen-en-weer van
   scrollen naar de filters en terug naar de lijst.
   ══════════════════════════════════════════════════════════════════════════ */

/* Het document zelf scrollt nooit: elke pagina past in het venster en regelt
   zijn eigen overloop in .page-body. Alleen op schermen met het skelet — het
   aanmeld- en setupscherm mogen op een laag venster wél scrollen. */
html:has(body.app-shell),
body.app-shell {
  height: 100%;
  overflow: hidden;
}

.content-page {
  /* 100dvh volgt op een telefoon de adresbalk; 100vh is de terugval */
  height: calc(100vh - var(--theme-topbar-height, 65px));
  height: calc(100dvh - var(--theme-topbar-height, 65px));
  overflow: hidden;
  padding-bottom: 0;
}

.page-head,
.cds-footer {
  flex: 0 0 auto;
}

.page-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Voor pagina's die het midden zelf indelen (verrijken, scraper): niets
   scrollt op paginaniveau, de kolommen erin regelen hun eigen overloop. */
.page-body--fill {
  overflow: hidden;
}

.page-body--fill > .container-fluid {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Vastgezette tabelkop binnen de scrollende lijst ─────────────────────── */
.cds-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* Ondoorzichtig: de rijen schuiven eronder door en mogen er niet doorheen
     schemeren */
  background: #eef1f5;
  box-shadow: inset 0 -1px 0 var(--bs-border-color, #e5e7eb);
  white-space: nowrap;
}

/* ── Merkbalk: dunne oranje lijn bovenaan de topbar ──────────────────────── */
.app-topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cds-orange) 0%, var(--cds-amber) 100%);
  z-index: 2;
}

/* ── Sidebar-logo ────────────────────────────────────────────────────────── */
.sidenav-menu .logo img {
  max-width: 100%;
  height: auto;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.cds-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.25rem;
  margin-top: auto;
  border-top: 1px solid var(--bs-border-color, #e5e7eb);
  background: var(--bs-body-bg, #fff);
  font-size: 12px;
  color: #6c757d;
}

.cds-footer a {
  color: inherit;
  text-decoration: none;
}

.cds-footer a:hover {
  color: var(--cds-orange);
}

.cds-footer .cds-footer-mark {
  height: 14px;
  width: auto;
  vertical-align: -2px;
  margin-right: 0.35rem;
}

/* ── Merkaccent op losse elementen ───────────────────────────────────────── */
.text-cds-orange { color: var(--cds-orange) !important; }
.bg-cds-orange { background-color: var(--cds-orange) !important; }

.badge-cds {
  background-color: var(--cds-orange-soft);
  color: var(--cds-orange);
  border: 1px solid rgba(255, 116, 37, 0.25);
}

.btn-cds {
  background-color: var(--cds-orange);
  border-color: var(--cds-orange);
  color: #fff;
}

.btn-cds:hover,
.btn-cds:focus {
  background-color: #e8631a;
  border-color: #e8631a;
  color: #fff;
}

/* ── Aanmeld- en setupscherm ─────────────────────────────────────────────── */

/* Het decoratieve hoekmotief uit de huisstijl. Het Paces-origineel is een SVG
   met een vaste maat; deze PNG is 600px breed en zou op kleine schermen de
   halve pagina vullen, vandaar de schaal per breedte. */
.cds-auth-corner {
  width: 420px;
  height: auto;
  opacity: 0.9;
}

@media (max-width: 991.98px) {
  .cds-auth-corner { width: 260px; }
}

@media (max-width: 575.98px) {
  .cds-auth-corner { width: 170px; }
}

.cds-auth-logo {
  height: 30px;
  width: auto;
}

.cds-auth-footer {
  font-size: 11px;
  color: #9ba6b7;
}

/* ── Tooltips: iets compacter dan de Bootstrap-standaard ─────────────────── */
.tooltip-inner {
  font-size: 11.5px;
  line-height: 1.45;
  max-width: 260px;
  padding: 0.4rem 0.6rem;
  text-align: left;
}

/* Vraagteken-icoon naast labels en kopjes */
.cds-help {
  color: #9ba6b7;
  cursor: help;
  font-size: 13px;
}

.cds-help:hover {
  color: var(--cds-orange);
}

/* ── Handleiding ─────────────────────────────────────────────────────────── */
.cds-manual h5 {
  scroll-margin-top: 1rem;
}

.cds-manual .cds-manual-nav .nav-link {
  padding: 0.3rem 0.6rem;
  font-size: 12.5px;
  color: #6c757d;
  border-left: 2px solid transparent;
  border-radius: 0;
}

.cds-manual .cds-manual-nav .nav-link:hover,
.cds-manual .cds-manual-nav .nav-link.active {
  color: var(--cds-orange);
  border-left-color: var(--cds-orange);
  background: var(--cds-orange-soft);
}

.cds-manual kbd {
  background: #313a46;
  border-radius: 3px;
  font-size: 11px;
  padding: 1px 5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Werkbalk: tegels, export en filters — de vaste kop boven een lijst
   ══════════════════════════════════════════════════════════════════════════ */

.cds-toolbar {
  background: var(--bs-body-bg, #fff);
  border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
  padding: 0.5rem 0.75rem 0.55rem;
}

/* ── Tegelrij ────────────────────────────────────────────────────────────── */
.cds-tiles {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.cds-tile {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 118px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--bs-border-color, #e5e7eb);
  border-radius: 8px;
  background: var(--bs-body-bg, #fff);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.cds-tile > i {
  font-size: 19px;
  line-height: 1;
}

.cds-tile > div {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.cds-tile strong {
  font-size: 17px;
  font-weight: 700;
}

.cds-tile span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #8a969c;
}

/* Alleen de tegels die een filter aan- of uitzetten reageren op de muis */
a.cds-tile:hover {
  border-color: var(--cds-orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

a.cds-tile.is-active {
  border-color: var(--cds-orange);
  background: var(--cds-orange-soft);
}

a.cds-tile.is-active span {
  color: var(--cds-orange);
}

.cds-tile-primary {
  border-color: rgba(35, 109, 201, .35);
  background: rgba(35, 109, 201, .06);
}

.cds-tile-primary > i,
.cds-tile-primary strong {
  color: var(--bs-primary, #236dc9);
}

/* ── Export, rechts uitgelijnd in de tegelrij ────────────────────────────── */
.cds-tile-export {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-inline-start: auto;
  padding-inline-start: 0.75rem;
  border-inline-start: 1px dashed var(--bs-border-color, #e5e7eb);
}

.cds-tile-export-label {
  font-size: 11px;
  color: #8a969c;
  white-space: nowrap;
}

.cds-tile-export-label i {
  margin-inline-end: 0.25rem;
}

/* ── Filterbalk ──────────────────────────────────────────────────────────── */
.cds-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.cds-filter { flex: 0 0 auto; }
.cds-filter-grow   { flex: 1 1 200px; min-width: 170px; max-width: 340px; }
.cds-filter-narrow { width: 104px; }
.cds-filter-small  { width: 152px; }

.cds-filterbar .form-select-sm,
.cds-filterbar .form-control-sm {
  font-size: 12.5px;
}

/* ── Aanjager van de infinite scroll ─────────────────────────────────────── */
.cds-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.75rem;
  font-size: 12.5px;
  color: #8a969c;
}

.cds-sentinel-done {
  font-size: 12px;
  color: #a1a9b1;
}

/* Smalle schermen: tegels en filters mogen dan wel meescrollen, anders blijft
   er van de lijst niets over */
@media (max-width: 767.98px) {
  .cds-toolbar { padding: 0.4rem 0.5rem; }

  /* Tegels op één rij die zijwaarts schuift: wikkelen zou twee of drie rijen
     kosten, en dan blijft er van de lijst te weinig over. */
  .cds-tiles {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 0.4rem;
  }
  .cds-tiles::-webkit-scrollbar { display: none; }

  .cds-tile {
    flex: 0 0 auto;
    min-width: 92px;
    padding: 0.3rem 0.55rem;
  }
  .cds-tile strong { font-size: 15px; }
  .cds-tile-budget { min-width: 160px; }

  .cds-tile-export {
    flex: 0 0 auto;
    margin-inline-start: 0.25rem;
    padding-inline-start: 0.5rem;
  }
  .cds-tile-export-label { display: none; }

  /* Uitgeklapte filters: elk op een eigen regel, maar wel compact */
  .cds-filter-grow,
  .cds-filter-small,
  .cds-filter-narrow { width: 100%; max-width: none; flex: 1 1 100%; }

  #filterCollapse { max-height: 42vh; overflow-y: auto; }
}

/* ── Budgettegel op de verrijkpagina ─────────────────────────────────────── */
.cds-tile-budget {
  min-width: 190px;
  margin-inline-start: auto;
}

.cds-tile-budget strong {
  font-size: 14px;
  white-space: nowrap;
}

.cds-tile-budget.is-warning {
  border-color: rgba(249, 191, 89, .6);
  background: rgba(249, 191, 89, .12);
}

.cds-tile-budget.is-spent {
  border-color: rgba(247, 87, 126, .6);
  background: rgba(247, 87, 126, .12);
}

.cds-tile-budget.is-spent span {
  color: var(--bs-danger, #f7577e);
  font-weight: 600;
}

/* Staat er ook een exportblok in dezelfde rij, dan duwt dat de budgettegel
   niet meer naar rechts — beide claimen anders de vrije ruimte. */
.cds-tiles .cds-tile-budget + .cds-tile-export {
  margin-inline-start: 0;
}