/* ==========================================================================
   Excel-style column filter (static/js/table-filter.js), see DESIGN_SYSTEM.md
   "Kolomfilter" for the attributes. Only --ye-* tokens from app.css, no
   hardcoded colours, no !important.
   ========================================================================== */

/* Rows hidden by the filter. A class, not inline style, so a fresh render
   (server-rendered page) always starts from a clean state. */
.xf-hidden { display: none !important; }

/* ---------- Button in the column header ---------- */
.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(--ye-radius-sm);
    background: transparent; color: var(--ye-text-muted);
    font-size: .75rem; line-height: 1; vertical-align: middle;
    cursor: pointer;
    transition: background-color var(--ye-transition), color var(--ye-transition);
}
.xf-btn:hover, .xf-btn[aria-expanded="true"] { background: var(--ye-hover); color: var(--ye-text); }
.xf-btn:focus-visible { outline: 2px solid var(--ye-focus-outline); outline-offset: 1px; box-shadow: var(--ye-focus-ring); }
.xf-btn.is-sorted { color: var(--ye-text); }
.xf-btn.is-active {
    background: var(--ye-accent-soft); border-color: var(--ye-accent-border); color: var(--ye-text-strong);
}
@media (pointer: coarse) {
    .xf-btn { width: var(--ye-touch); height: var(--ye-touch); margin: -.75rem -.5rem -.75rem 0; font-size: .875rem; }
}
/* A header with a filter button stays on one line. */
.data-table th:has(> .xf-btn) { white-space: nowrap; }

/* ---------- Filter bar above the list ---------- */
.xf-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--ye-border-subtle);
    background: var(--ye-surface-sunken);
    font-size: var(--ye-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(--ye-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.xf-bar__count:empty { display: none; }
.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(--ye-radius-pill);
    background: var(--ye-text-strong); color: var(--ye-surface);
    font-size: var(--ye-text-2xs); font-weight: var(--ye-weight-semibold);
}
.xf-bar__badge[hidden] { display: none; }
/* Laptop and tablet: the headers carry the buttons, the bar only appears once
   a filter or sort is active. A list without column headers always keeps the
   Filter button. */
@media (min-width: 768px) {
    .xf-bar--table .xf-bar__open { display: none; }
    .xf-bar--table.is-idle { display: none; }
}
/* Phone: a card list without headers, so the Filter button always shows. */
@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(--ye-touch); }
}
.card > .xf-bar:first-child { border-top: 0; }

/* Filter chip: "Status: Open, In progress" with a remove button. */
.xf-chip {
    display: inline-flex; align-items: stretch; max-width: 100%;
    border: 1px solid var(--ye-accent-border); border-radius: var(--ye-radius-pill);
    background: var(--ye-accent-soft); color: var(--ye-text-strong);
    font-size: var(--ye-text-xs); line-height: 1.2;
}
.xf-chip--sort { border-color: var(--ye-border); background: var(--ye-surface); }
.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(--ye-radius-pill) 0 0 var(--ye-radius-pill);
    cursor: pointer;
}
.xf-chip__label { font-weight: var(--ye-weight-semibold); }
.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(--ye-radius-pill) var(--ye-radius-pill) 0; cursor: pointer;
}
.xf-chip__main:hover, .xf-chip__remove:hover { background: var(--ye-hover); }
.xf-chip__main:focus-visible, .xf-chip__remove:focus-visible { outline: 2px solid var(--ye-focus-outline); outline-offset: -2px; }
@media (pointer: coarse) {
    .xf-chip__main, .xf-chip__remove { min-height: var(--ye-touch); }
    .xf-chip__remove { width: var(--ye-touch); }
}
@media (max-width: 575.98px) { .xf-chip__main { max-width: calc(100vw - 7rem); } }

/* Nothing left after filtering. */
.xf-empty { padding: var(--ye-space-8) var(--ye-space-4); text-align: center; color: var(--ye-text-muted); }
.xf-empty[hidden] { display: none; }
.xf-empty__text { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 0 .75rem; }

/* ---------- Panel ---------- */
.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(--ye-surface); color: var(--ye-text);
    border: 1px solid var(--ye-border);
    box-shadow: var(--ye-shadow-lg);
    font-size: var(--ye-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(--ye-radius-lg);
}
.xf-host--sheet .xf-backdrop {
    position: fixed; inset: 0;
    background: var(--bs-backdrop-bg, var(--ye-ink-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(--ye-radius-xl) var(--ye-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(--ye-text-base);
}
.xf-host--sheet .xf-panel::before {
    content: ''; display: block; width: 2.5rem; height: .25rem; margin: .5rem auto 0;
    border-radius: var(--ye-radius-pill); background: var(--ye-border-strong); 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(--ye-text-sm); font-weight: var(--ye-weight-semibold); color: var(--ye-text-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-host--sheet .xf-panel__title { font-size: var(--ye-text-md); }
.xf-back + .xf-panel__title { margin-left: -.25rem; }
.xf-host--sheet .xf-panel__head .btn-icon { width: var(--ye-touch); height: var(--ye-touch); }

.xf-panel__actions { padding: .125rem .375rem .375rem; border-bottom: 1px solid var(--ye-border-subtle); flex: none; }
.xf-action {
    display: flex; align-items: center; gap: .625rem; width: 100%;
    padding: .4375rem .625rem; border: 0; border-radius: var(--ye-radius);
    background: transparent; color: var(--ye-text); font: inherit; text-align: left; cursor: pointer;
}
.xf-action > i.xf-action__check { margin-left: auto; color: var(--ye-text-strong); }
.xf-action:hover:not(:disabled) { background: var(--ye-hover); }
.xf-action:focus-visible { outline: 2px solid var(--ye-focus-outline); outline-offset: -2px; }
.xf-action.is-current { font-weight: var(--ye-weight-semibold); color: var(--ye-text-strong); }
.xf-action:disabled { color: var(--ye-text-muted); cursor: default; }
.xf-action:disabled > i { color: var(--ye-text-muted); }

.xf-panel__search { position: relative; padding: .625rem .75rem .375rem; flex: none; }
.xf-panel__search > i { position: absolute; left: 1.375rem; top: 50%; margin-top: .125rem; transform: translateY(-50%); color: var(--ye-text-muted); 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(--ye-radius-sm);
    cursor: pointer; user-select: none;
}
.xf-option:hover { background: var(--ye-hover); }
.xf-option .form-check-input { margin: 0; flex: none; }
.xf-option--all { font-weight: var(--ye-weight-semibold); color: var(--ye-text-strong); }
.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(--ye-text-muted); }
.xf-option__count {
    flex: none; min-width: 1.5rem; padding: .0625rem .375rem; border-radius: var(--ye-radius-pill);
    background: var(--ye-hover); color: var(--ye-text-secondary);
    font-size: var(--ye-text-2xs); font-variant-numeric: tabular-nums; text-align: center;
}
.xf-panel__none { margin: .5rem .5rem .75rem; color: var(--ye-text-muted); }
.xf-panel__hint { margin: 0 1rem .25rem; color: var(--ye-danger-fg); font-size: var(--ye-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(--ye-border-subtle); flex: none;
}
.xf-panel__meta { margin-right: auto; color: var(--ye-text-muted); font-size: var(--ye-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(--ye-touch); }
.xf-host--sheet .xf-panel__foot [data-op] { flex: 1 1 0; }

/* Column picker (Filter button, or a list without column headers). */
.xf-panel__cols { flex: 1 1 auto; overflow-y: auto; padding: .25rem 0; border-top: 1px solid var(--ye-border-subtle); }
.xf-colbtn {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    min-height: var(--ye-touch); padding: .5rem 1rem;
    border: 0; border-bottom: 1px solid var(--ye-border-subtle); background: transparent;
    color: var(--ye-text); font: inherit; text-align: left; cursor: pointer;
}
.xf-panel__cols > div:last-child .xf-colbtn { border-bottom: 0; }
.xf-colbtn:hover { background: var(--ye-hover); }
.xf-colbtn:focus-visible { outline: 2px solid var(--ye-focus-outline); outline-offset: -2px; }
.xf-colbtn__main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.xf-colbtn__label { font-weight: var(--ye-weight-semibold); color: var(--ye-text-strong); }
.xf-colbtn__sub { color: var(--ye-text-muted); font-size: var(--ye-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xf-colbtn.is-active .xf-colbtn__sub { color: var(--ye-accent-text); }
.xf-colbtn > i { color: var(--ye-text-muted); flex: none; }
.xf-colbtn > i.xf-icon-accent { color: var(--ye-accent-text); }

/* Touch: every row in the panel at least 44 px tall. */
@media (pointer: coarse) {
    .xf-action, .xf-option { min-height: var(--ye-touch); }
    .xf-option .form-check-input { width: 1.25rem; height: 1.25rem; }
    .xf-panel__search > .form-control { min-height: var(--ye-touch); }
}
@media (max-width: 767.98px) {
    .xf-action, .xf-option { min-height: var(--ye-touch); }
    .xf-option .form-check-input { width: 1.25rem; height: 1.25rem; }
}