/*
  Gedeelde styling voor lijst-tabellen in SIT-apps:
    - .tbl-th / .tbl-th-label / .tbl-th-sort  → header-filter + sort UX
    - .tbl-filter-panel                        → dropdown boven de tabel
    - .tbl-toolbar                             → "X van Y" + reset-knop
    - .tbl-chip                                → gekleurde label-chip in cellen

  Bron: DEV/Shared/sit_ui/static/table_filters.css — nooit direct in een app
  bewerken; sync via sync_sit_ui.ps1.
  Gebruik in JS: window.initTableFilters({...}) uit table_filters.js.

  Kleur: gebruikt --sit-primary (aliased via sit_header.css als --wa-primary,
  --pi-oranje, --pm-primary etc.), zodat het in elke app dezelfde accentkleur
  krijgt zonder per-app override.
*/

/* ── Header-cell ─────────────────────────────────────────────────────── */
.tbl-th {
  position: relative;
  vertical-align: middle;
}
.tbl-th-inner {
  display: flex; align-items: center; gap: 4px;
  min-width: 0;
}
.tbl-th-inner.justify-content-end { justify-content: flex-end; }

.tbl-th-label {
  background: transparent; border: 0; padding: 0;
  font: inherit; color: inherit;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
}
.tbl-th-label:hover { color: var(--sit-primary, #FF6B1A); }
.tbl-th.is-filter-active .tbl-th-label {
  color: var(--sit-primary, #FF6B1A);
}

.tbl-th-sort {
  background: transparent; border: 0; padding: 2px 4px;
  cursor: pointer; opacity: 0.5;
  font: inherit; color: inherit;
  line-height: 1;
}
.tbl-th-sort:hover { opacity: 1; }
.tbl-th-sort::before { content: "\2195"; font-size: 0.9em; }  /* ↕ */
.tbl-th-sort.is-asc  { opacity: 1; color: var(--sit-primary, #FF6B1A); }
.tbl-th-sort.is-desc { opacity: 1; color: var(--sit-primary, #FF6B1A); }
.tbl-th-sort.is-asc::before  { content: "\2191"; }  /* ↑ */
.tbl-th-sort.is-desc::before { content: "\2193"; }  /* ↓ */
/* Als de knop een Bootstrap-icon <i> bevat: verberg het pseudo-element. */
.tbl-th-sort:has(i)::before { content: none; }

/* ── Dropdown-panel ──────────────────────────────────────────────────── */
.tbl-filter-panel {
  position: absolute;
  z-index: 1050;
  background: #fff;
  color: #0F172A;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  padding: 8px;
  min-width: 220px;
  max-width: 320px;
  font-size: 0.88rem;
}
.tbl-filter-search {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font: inherit; color: inherit;
  outline: none;
  margin-bottom: 6px;
}
.tbl-filter-search:focus { border-color: var(--sit-primary, #FF6B1A); }
.tbl-filter-actions {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.tbl-filter-spacer { flex: 1; }
.tbl-filter-mini {
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.78rem;
  cursor: pointer;
  color: inherit;
}
.tbl-filter-mini:hover { background: #F1F5F9; }
.tbl-filter-list {
  max-height: 260px;
  overflow-y: auto;
  border-top: 1px solid #F1F5F9;
  padding-top: 4px;
}
.tbl-filter-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px;
  cursor: pointer;
  border-radius: 4px;
}
.tbl-filter-item:hover { background: #F8FAFC; }
.tbl-filter-item input { margin: 0; }
.tbl-filter-item span {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbl-filter-empty {
  padding: 6px 4px;
  color: #94A3B8;
  font-size: 0.82rem;
  text-align: center;
}
.tbl-filter-daterow {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  font-size: 0.82rem;
  color: #64748B;
}
.tbl-filter-daterow input {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  font: inherit; color: #0F172A;
}

/* ── Toolbar boven de tabel (alleen reset + teller) ──────────────────── */
.tbl-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.tbl-toolbar-teller {
  color: #64748B; font-size: 0.85rem;
}

/* ── Chip in cell (masterdata / debiteuren / entiteiten / status) ───── */
.tbl-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  background: #F1F5F9;     /* neutrale fallback als er geen inline-style is */
  color: #0F172A;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
/* Status-varianten — override de defaults, geen inline-style nodig. */
.tbl-chip.status-open          { background: #E0F2FE; color: #075985; }
.tbl-chip.status-gefactureerd  { background: #DCFCE7; color: #166534; }
.tbl-chip.status-concept       { background: #F1F5F9; color: #475569; }
.tbl-chip.status-verzonden     { background: #FFEDD5; color: #9A3412; }
.tbl-chip.status-betaald       { background: #DCFCE7; color: #166534; }
.tbl-chip.status-vervallen     { background: #FEE2E2; color: #991B1B; }

/* Chip UIT per entity-type — driven door `<body data-chip-off="X Y Z">`
   met per-app dynamisch gegenereerde CSS-regels in base.html. Elke chip
   moet `data-entity="X"` dragen om matchbaar te zijn. Zie install_filters()
   in chip_colors.py + de `chip_off_css` Jinja-filter voor generatie. */

@media (prefers-color-scheme: dark) {
  .tbl-filter-panel {
    background: #1E293B; color: #F1F5F9;
    border-color: #334155;
  }
  .tbl-filter-search, .tbl-filter-daterow input {
    background: #0F172A; color: #F1F5F9; border-color: #334155;
  }
  .tbl-filter-mini { border-color: #334155; }
  .tbl-filter-mini:hover { background: #334155; }
  .tbl-filter-item:hover { background: #334155; }
  .tbl-filter-list { border-top-color: #334155; }
}