/* ============================================================
   Archief van inkoopfacturen (29-09): zoekbalk, facetten links,
   lijst in het midden en het detail rechts. Bouwt op fiattering.css
   en factuurintake.css; alleen bestaande tokens, licht en donker
   via de tokens.
   ============================================================ */

.fa { display: flex; flex-direction: column; gap: 12px; }

/* ---- zoekbalk ---- */
.fa-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fa-zoek { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px; height: 38px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text-2); }
.fa-zoek:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.fa-zoek input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: 0; }
.fa-zoek input::-webkit-search-cancel-button { display: none; }
.fa-zoek__wis { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.fa-zoek__wis:hover { color: var(--text); background: var(--bg-2); }
.fa-facetknop { display: none; }
.fa-telling { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12.5px; }
.fa-telling b { font-weight: 500; color: var(--text); }
.fa-telling i { font-style: normal; color: var(--text-2); font-variant-numeric: tabular-nums; }
.fa-telling .fa-telling__buiten { font-size: 11.5px; color: var(--text-3, var(--text-2)); }

/* ---- chips ---- */
.fa-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fa-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fa-chip svg { opacity: .7; }
.fa-chips__wis { margin-left: 4px; border: 0; background: transparent; cursor: pointer; font: inherit; }

/* ---- raster: facetten, lijst, detail ---- */
.fa-raster { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.fa.is-gekozen .fa-raster { grid-template-columns: 220px minmax(0, 1fr) minmax(380px, 480px); }
.fa-midden { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fa-facetten { display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 16px); box-shadow: var(--shadow); position: sticky; top: 12px; max-height: calc(100vh - 120px); overflow: auto; }
.fa-facet { display: flex; flex-direction: column; gap: 6px; }
.fa-facet + .fa-facet { padding-top: 12px; border-top: 1px solid var(--line); }
.fa-facet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fa-facet__knop { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; font: inherit; font-size: 12.5px; color: var(--text); text-align: left; cursor: pointer; }
.fa-facet__knop span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-facet__knop em { font-style: normal; flex-shrink: 0; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; line-height: 18px; text-align: center; font-size: 11px; color: var(--text-2); background: var(--bg-2); font-variant-numeric: tabular-nums; }
.fa-facet__knop:hover { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.fa-facet__knop.is-on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); font-weight: 500; }
.fa-facet__knop.is-on em { color: var(--text); background: var(--surface); }
.fa-facet__knop:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.fa-facet__meer { align-self: flex-start; border: 0; background: transparent; padding: 2px 8px; font: inherit; font-size: 12px; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fa-bereik { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fa-bereik label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-2); min-width: 0; }
.fa-bereik input { width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; min-width: 0; }
.fa-bereik input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.fa-facetten__wis { align-self: flex-start; }

/* ---- lijst ---- */
.fa-lijst { border: 1px solid var(--line); border-radius: var(--radius, 16px); overflow: clip; background: var(--surface); box-shadow: var(--shadow); transition: opacity .15s ease; }
.fa-lijst.is-laden { opacity: .6; }
.fa-rij { width: 100%; display: grid; grid-template-columns: 110px minmax(0, 1.6fr) minmax(0, 1.1fr) 128px minmax(0, 1fr) minmax(0, 1fr) 96px; gap: 12px; align-items: center; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; font: inherit; color: var(--text); text-align: left; cursor: pointer; box-shadow: inset 3px 0 0 transparent; }
.fa-lijst > .fa-rij:first-child { border-top: 0; }
.fa-rij--kop { padding: 7px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); background: var(--bg-2); cursor: default; }
.fa-rij:not(.fa-rij--kop):hover { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.fa-rij.is-actief { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand); }
.fa-rij:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fa-cel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fa-cel b { font-weight: 500; font-size: 13px; overflow-wrap: anywhere; }
.fa-cel i { font-style: normal; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fa-cel--datum b, .fa-cel--bewaren b, .fa-cel--geld b, .fa-cel--geld i { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-cel--fase { flex-direction: row; flex-wrap: wrap; gap: 4px; align-items: center; }
.fa-l { display: none; }
/* Zoeken in de tekst: een treffer die alleen in het document zelf stond, rustig onder de rij. */
.fa-rij__fragment { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding: 6px 10px; border-left: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--bg-2) 70%, transparent); border-radius: 0 8px 8px 0; font-size: 12px; color: var(--text-2); }
.fa-rij__fragment i { font-style: normal; font-size: 11px; }
.fa-rij__fragment q { quotes: none; color: var(--text); overflow-wrap: anywhere; }
.fa-rij__fragment mark { background: color-mix(in srgb, var(--brand) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.fa-paginering { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12.5px; color: var(--text-2); }
.fa-voet { text-align: center; }

/* ---- detail ---- */
.fa-detail { min-width: 0; position: sticky; top: 12px; }
.fa-kaart { gap: 12px; }
.fa-kaart__kop { display: flex; flex-direction: column; gap: 4px; padding-right: 80px; }
.fa-kaart__kop h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.fa-kaart__kop p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.fa-kaart__pillen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.fa-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fa-veld { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12.5px; }
.fa-veld span { color: var(--text-2); font-size: 11px; }
.fa-veld b { font-weight: 500; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fa-links__rij { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-links__rij .btn { text-decoration: none; }

/* ---- bonnetjes in het archief (01-10): foto's van de bon ---- */
.fa-fotos__rij { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-foto { display: block; width: 96px; height: 128px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface-2, var(--line)); }
.fa-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fa-foto:hover, .fa-foto:focus-visible { border-color: var(--brand); outline: none; }

/* ---- smal ---- */
@media (max-width: 1400px) {
  .fa.is-gekozen .fa-raster { grid-template-columns: 200px minmax(0, 1fr) minmax(340px, 420px); }
  .fa-rij { grid-template-columns: 96px minmax(0, 1.6fr) minmax(0, 1fr) 120px minmax(0, 1fr) minmax(0, 1fr) 90px; gap: 10px; }
}
@media (max-width: 1200px) {
  .fa.is-gekozen .fa-raster { grid-template-columns: 220px minmax(0, 1fr); }
  .fa.is-gekozen .fa-midden { display: none; }
  .fa-detail { position: static; }
  .fa .fz-terug { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
  .fa .fi-kaart > .fi-sluit { display: none; }
  .fa-kaart__kop { padding-right: 0; }
  .fa-rij { grid-template-columns: 96px minmax(0, 1.4fr) minmax(0, 1fr) 120px minmax(0, 1fr); }
  .fa-cel--exact, .fa-cel--bewaren { display: none; }
}
@media (max-width: 980px) {
  .fa-facetknop { display: inline-flex; }
  .fa-raster, .fa.is-gekozen .fa-raster { grid-template-columns: minmax(0, 1fr); }
  .fa-facetten { display: none; position: static; max-height: none; }
  .fa.is-facetten .fa-facetten { display: flex; }
  .fa.is-gekozen .fa-facetten { display: none; }
}
@media (max-width: 760px) {
  .fa-rij--kop { display: none; }
  .fa-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px 14px; }
  .fa-cel--wie { grid-column: 1 / -1; }
  .fa-cel--exact, .fa-cel--bewaren { display: flex; }
  .fa-l { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
  .fa-cel--fase { flex-direction: column; align-items: flex-start; }
  .fa-velden { grid-template-columns: minmax(0, 1fr); }
  .fa-telling { order: 5; flex-basis: 100%; }
}