/* ==========================================================================
   Kolomfilter (static/js/table-filter.js), zie DESIGN_SYSTEM.md "Kolomfilter"
   --------------------------------------------------------------------------
   Knop in de kolomkop, filterbalk boven de lijst, paneel (zwevend op laptop
   en tablet, sheet van onderen op de telefoon). Alleen tokens uit app.css.
   ========================================================================== */

/* Rijen die de filter verbergt. Klasse, geen style: live bijwerken zet het
   class-attribuut terug en de filter past zich daarna opnieuw toe. */
.xf-hidden { display: none !important; }

/* ---------- Knop in de kolomkop ---------- */
.xf-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem;
    margin: -.25rem 0 -.25rem .25rem;
    padding: 0; border: 1px solid transparent; border-radius: var(--ds-radius-sm);
    background: transparent; color: var(--ds-gray-400);
    font-size: .75rem; line-height: 1; vertical-align: middle;
    cursor: pointer;
    transition: background-color var(--ds-transition), color var(--ds-transition);
}
.xf-btn:hover, .xf-btn[aria-expanded="true"] { background: var(--ds-gray-100); color: var(--ds-gray-800); }
.xf-btn:focus-visible { outline: 2px solid var(--ds-navy-900); outline-offset: 1px; box-shadow: var(--ds-ring); }
.xf-btn.is-sorted { color: var(--ds-gray-800); }
.xf-btn.is-active {
    background: var(--ds-yellow-100); border-color: var(--ds-yellow-400); color: var(--ds-navy-900);
}
.xf-btn.is-loading > .bi, .xf-bar__open.is-loading > .bi { visibility: hidden; }
.xf-btn.is-loading::after, .xf-bar__open.is-loading::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ds-spin .7s linear infinite;
}
.xf-bar__open { position: relative; }
.xf-bar__open.is-loading::after { left: 1.1rem; }
@media (pointer: coarse) {
    .xf-btn { width: var(--ds-touch); height: var(--ds-touch); margin: -.75rem -.5rem -.75rem 0; font-size: .875rem; }
}
/* Koppen met een filterknop blijven op één regel. */
.data-table th:has(> .xf-btn) { white-space: nowrap; }

/* ---------- Filterbalk boven de lijst ---------- */
.xf-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--ds-gray-150);
    background: var(--ds-gray-25);
    font-size: var(--ds-text-sm);
}
.xf-bar__chips { display: flex; flex-wrap: wrap; gap: .375rem; min-width: 0; }
.xf-bar__chips:empty { display: none; }
.xf-bar__count { margin-left: auto; color: var(--ds-gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xf-bar__count:empty { display: none; }
.xf-bar__count.is-warning { color: var(--ds-warning-fg); white-space: normal; }
.xf-bar__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-navy-900); color: var(--ds-gray-0);
    font-size: var(--ds-text-2xs); font-weight: 600;
}
.xf-bar__badge[hidden] { display: none; }
/* Laptop en tablet: de koppen hebben de knoppen, de balk verschijnt pas als
   er een filter of sortering staat. Een lijst zonder kolomkoppen houdt de
   knop Filteren altijd. */
@media (min-width: 768px) {
    .xf-bar--table .xf-bar__open { display: none; }
    .xf-bar--table.is-idle { display: none; }
}
/* Telefoon: kaartenlijst zonder koppen, dus altijd de knop Filteren. */
@media (max-width: 767.98px) {
    .xf-bar { padding: .5rem 1rem; }
    .xf-bar__count { margin-left: 0; }
    .xf-bar__open, .xf-bar__clear { min-height: var(--ds-touch); }
}
.card > .xf-bar:first-child, .table-card > [data-live-region] > .xf-bar:first-child { border-top: 0; }

/* Filterpil: "Status: Open, Bezig" met kruisje */
.xf-chip {
    display: inline-flex; align-items: stretch; max-width: 100%;
    border: 1px solid var(--ds-yellow-400); border-radius: var(--ds-radius-pill);
    background: var(--ds-yellow-100); color: var(--ds-navy-900);
    font-size: var(--ds-text-xs); line-height: 1.2;
}
.xf-chip--sort { border-color: var(--ds-gray-200); background: var(--ds-gray-0); }
.xf-chip__main {
    display: inline-flex; align-items: center; gap: .25rem; min-width: 0;
    padding: .3125rem .25rem .3125rem .625rem;
    border: 0; background: transparent; color: inherit; font: inherit; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem;
    border-radius: var(--ds-radius-pill) 0 0 var(--ds-radius-pill);
    cursor: pointer;
}
.xf-chip__label { font-weight: 600; }
.xf-chip__remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; padding: 0; border: 0; background: transparent; color: inherit;
    border-radius: 0 var(--ds-radius-pill) var(--ds-radius-pill) 0; cursor: pointer;
}
.xf-chip__main:hover, .xf-chip__remove:hover { background: rgba(15, 23, 42, .06); }
.xf-chip__main:focus-visible, .xf-chip__remove:focus-visible { outline: 2px solid var(--ds-navy-900); outline-offset: -2px; }
@media (pointer: coarse) {
    .xf-chip__main, .xf-chip__remove { min-height: var(--ds-touch); }
    .xf-chip__remove { width: var(--ds-touch); }
}
@media (max-width: 575.98px) { .xf-chip__main { max-width: calc(100vw - 7rem); } }

/* Niets meer over na filteren */
.xf-empty { padding: var(--ds-space-8) var(--ds-space-4); text-align: center; color: var(--ds-gray-500); }
.xf-empty[hidden] { display: none; }
.xf-empty__text { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 .75rem; }

/* ---------- Paneel ---------- */
.xf-host { position: fixed; inset: 0; z-index: 1080; pointer-events: none; }
.xf-host > * { pointer-events: auto; }
.xf-panel {
    display: flex; flex-direction: column;
    background: var(--ds-gray-0); color: var(--ds-gray-800);
    border: 1px solid var(--ds-gray-200);
    box-shadow: var(--ds-shadow-lg);
    font-size: var(--ds-text-sm);
    outline: 0;
}
.xf-host--popover .xf-panel {
    position: fixed; width: 18.5rem; max-width: calc(100vw - 1rem);
    max-height: min(34rem, calc(100vh - 1rem));
    border-radius: var(--ds-radius-lg);
}
.xf-host--sheet .xf-backdrop {
    position: fixed; inset: 0;
    background: var(--bs-backdrop-bg, var(--ds-navy-950)); opacity: .45;
}
.xf-host--sheet .xf-panel {
    position: fixed; left: 0; right: 0; bottom: 0;
    max-height: 88vh; max-height: 88dvh;
    border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: xf-sheet-in .18s ease-out;
    font-size: var(--ds-text-base);
}
.xf-host--sheet .xf-panel::before {
    content: ''; display: block; width: 2.5rem; height: .25rem; margin: .5rem auto 0;
    border-radius: var(--ds-radius-pill); background: var(--ds-gray-300); flex: none;
}
@keyframes xf-sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .xf-host--sheet .xf-panel { animation: none; } }
html.xf-lock, html.xf-lock body { overflow: hidden; }

.xf-panel__head { display: flex; align-items: center; gap: .25rem; padding: .5rem .5rem .25rem 1rem; flex: none; }
.xf-panel__title { flex: 1 1 auto; margin: 0; font-size: var(--ds-text-sm); font-weight: 600; color: var(--ds-gray-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-host--sheet .xf-panel__title { font-size: var(--ds-text-md); }
.xf-back + .xf-panel__title { margin-left: -.25rem; }
.xf-host--sheet .xf-panel__head .btn-icon { width: var(--ds-touch); height: var(--ds-touch); }

.xf-panel__actions { padding: .125rem .375rem .375rem; border-bottom: 1px solid var(--ds-gray-150); flex: none; }
.xf-action {
    display: flex; align-items: center; gap: .625rem; width: 100%;
    padding: .4375rem .625rem; border: 0; border-radius: var(--ds-radius);
    background: transparent; color: var(--ds-gray-800); font: inherit; text-align: left; cursor: pointer;
}
.xf-action > .bi:first-child { color: var(--ds-gray-500); font-size: 1rem; width: 1rem; }
.xf-action > .bi-check2 { margin-left: auto; color: var(--ds-navy-900); }
.xf-action:hover:not(:disabled) { background: var(--ds-gray-100); }
.xf-action:focus-visible { outline: 2px solid var(--ds-navy-900); outline-offset: -2px; }
.xf-action.is-current { font-weight: 600; color: var(--ds-gray-900); }
.xf-action:disabled { color: var(--ds-gray-400); cursor: default; }
.xf-action:disabled > .bi { color: var(--ds-gray-300); }

.xf-panel__search { position: relative; padding: .625rem .75rem .375rem; flex: none; }
.xf-panel__search > .bi { position: absolute; left: 1.375rem; top: 50%; margin-top: .125rem; transform: translateY(-50%); color: var(--ds-gray-400); pointer-events: none; }
.xf-panel__search > .form-control { padding-left: 2rem; }

.xf-panel__list { flex: 1 1 auto; min-height: 3rem; overflow-y: auto; overscroll-behavior: contain; padding: 0 .375rem .375rem; }
.xf-host--popover .xf-panel__list { max-height: 16rem; }
.xf-option {
    display: flex; align-items: center; gap: .625rem;
    padding: .3125rem .5rem; margin: 0; border-radius: var(--ds-radius-sm);
    cursor: pointer; user-select: none;
}
.xf-option:hover { background: var(--ds-gray-50); }
.xf-option .form-check-input { margin: 0; flex: none; }
.xf-option--all { font-weight: 600; color: var(--ds-gray-900); }
.xf-option__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-option__text.is-empty { font-style: italic; color: var(--ds-gray-500); }
.xf-option__count {
    flex: none; min-width: 1.5rem; padding: .0625rem .375rem; border-radius: var(--ds-radius-pill);
    background: var(--ds-gray-100); color: var(--ds-gray-600);
    font-size: var(--ds-text-2xs); font-variant-numeric: tabular-nums; text-align: center;
}
.xf-panel__none { margin: .5rem .5rem .75rem; color: var(--ds-gray-500); }
.xf-panel__hint { margin: 0 1rem .25rem; color: var(--ds-danger-fg); font-size: var(--ds-text-xs); }
.xf-panel__hint[hidden] { display: none; }

.xf-panel__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
    padding: .625rem .75rem; border-top: 1px solid var(--ds-gray-150); flex: none;
}
.xf-panel__meta { margin-right: auto; color: var(--ds-gray-500); font-size: var(--ds-text-xs); font-variant-numeric: tabular-nums; }
.xf-host--sheet .xf-panel__foot { padding: .75rem 1rem; }
.xf-host--sheet .xf-panel__foot .btn { min-height: var(--ds-touch); }
.xf-host--sheet .xf-panel__foot [data-op] { flex: 1 1 0; }

/* Kolomkeuze (knop Filteren) */
.xf-panel__cols { flex: 1 1 auto; overflow-y: auto; padding: .25rem 0; border-top: 1px solid var(--ds-gray-150); }
.xf-colbtn {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    min-height: var(--ds-touch); padding: .5rem 1rem;
    border: 0; border-bottom: 1px solid var(--ds-gray-150); background: transparent;
    color: var(--ds-gray-800); font: inherit; text-align: left; cursor: pointer;
}
.xf-panel__cols > div:last-child .xf-colbtn { border-bottom: 0; }
.xf-colbtn:hover { background: var(--ds-gray-50); }
.xf-colbtn:focus-visible { outline: 2px solid var(--ds-navy-900); outline-offset: -2px; }
.xf-colbtn__main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.xf-colbtn__label { font-weight: 600; color: var(--ds-gray-900); }
.xf-colbtn__sub { color: var(--ds-gray-500); font-size: var(--ds-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-colbtn.is-active .xf-colbtn__sub { color: var(--ds-yellow-text); }
.xf-colbtn > .bi { color: var(--ds-gray-400); flex: none; }
.xf-colbtn > .bi-funnel-fill { color: var(--ds-yellow-text); }

/* Touch: elke regel in het paneel minstens 44 px hoog */
@media (pointer: coarse) {
    .xf-action, .xf-option { min-height: var(--ds-touch); }
    .xf-option .form-check-input { width: 1.25rem; height: 1.25rem; }
    .xf-panel__search > .form-control { min-height: var(--ds-touch); }
}
@media (max-width: 767.98px) {
    .xf-action, .xf-option { min-height: var(--ds-touch); }
    .xf-option .form-check-input { width: 1.25rem; height: 1.25rem; }
}

@media print { .xf-bar, .xf-btn, .xf-empty, .xf-host { display: none !important; } }

/* th_sort in een tabel met kolomfilter: het filterpijltje is genoeg; de
   sorteerrichting verschijnt pas als er gesorteerd is. */
[data-excel-filter] th[aria-sort="none"] > .th-sort::after { display: none; }