/* ============================================================
   Factuurvragen en betaling tegenhouden (slice 4).
   Alleen bestaande tokens; licht en donker via de tokens.
   ============================================================ */

.fg { gap: 10px; }
.fg-pil svg { flex-shrink: 0; }
.fg-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); white-space: nowrap; }
.fg-badge b { font-weight: 600; margin-left: 2px; }
.fg-badge.is-vraag { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }

/* ---- tegenhoudstatus ---- */
.fg-status, .fg-voorstel { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text); background: var(--bg-2); border: 1px solid var(--line); flex-wrap: wrap; }
.fg-status > svg, .fg-voorstel > svg { flex-shrink: 0; margin-top: 2px; color: var(--text-2); }
.fg-status.is-tegen { background: var(--signal-soft); border-color: color-mix(in srgb, var(--signal) 35%, var(--line)); }
.fg-status.is-tegen > svg { color: var(--signal); }
.fg-voorstel { background: color-mix(in srgb, var(--amber) 10%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.fg-voorstel > svg { color: var(--amber); }
.fg-status__t { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.fg-status__t b { font-weight: 500; }
.fg-status__t i { font-style: normal; font-size: 12px; color: var(--text-2); }
.fg-klaar { font-size: 12px; color: var(--brand); }

/* ---- tabs ---- */
.fg-tabs .wl-chip em.is-vraag { color: var(--amber-tekst); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.fg-tab__open { margin-left: 6px; font-size: 11px; color: var(--amber-tekst); font-weight: 500; }

/* ---- berichten ---- */
.fg-berichten, .fg-antwoorden { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fg-berichten { max-height: 420px; overflow: auto; }
.fg-antwoorden { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--line-strong); }
.fg-bericht { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; }
.fg-antwoorden .fg-bericht { background: var(--surface); }
.fg-bericht--vraag { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); }
.fg-bericht--systeem { background: transparent; border-style: dashed; }
.fg-bericht.is-voormij { box-shadow: inset 3px 0 0 var(--amber); }
.fg-bericht__kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-2); }
.fg-bericht__kop > b { color: var(--text); font-weight: 500; }
.fg-bericht__kop time { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fg-aan { font-size: 11.5px; }
.fg-aan b { font-weight: 500; color: var(--text); }
.fg-bericht__tekst { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); line-height: 1.5; }
.fg-bericht.is-ingetrokken > .fg-bericht__tekst { text-decoration: line-through; color: var(--text-3); }
.fg-vermeld { font-weight: 600; color: var(--brand); }
.fg-bericht__acties { display: flex; gap: 12px; flex-wrap: wrap; }
.fg-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 500; color: var(--brand); cursor: pointer; }
.fg-link:hover { text-decoration: underline; }
.fg-link--zacht { color: var(--text-2); }
.fg-link:disabled { opacity: .5; cursor: default; }
.fg-antwoordveld { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.fg-bevestig { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text); }

/* ---- invoer ---- */
.fg-invoer { display: flex; flex-direction: column; gap: 6px; }
.fg-invoer__veld { position: relative; }
.fg-invoer textarea, .fg-antwoordveld textarea, .fg-tijdlijn__balk input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; resize: vertical; }
.fg-invoer textarea:focus, .fg-antwoordveld textarea:focus, .fg-tijdlijn__balk input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.fg-suggesties { position: absolute; left: 8px; bottom: calc(100% - 4px); z-index: 30; min-width: 220px; max-width: calc(100% - 16px); list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); }
.fg-suggesties li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 9px; border-radius: 7px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.fg-suggesties li i { font-style: normal; font-size: 11px; color: var(--text-2); }
.fg-suggesties li b { font-weight: 500; }
.fg-suggesties li.is-actief, .fg-suggesties li:hover { background: var(--brand-soft); }
.fg-invoer__voet { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.fg-vraagaan { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-right: auto; }
.fg-vraagaan select { font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 8px; }

/* ---- tijdlijn ---- */
.fg-tijdlijn { display: flex; flex-direction: column; gap: 8px; }
.fg-tijdlijn__balk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fg-tijdlijn__balk input { flex: 1; min-width: 160px; width: auto; padding: 6px 10px; }
.fg-tijdlijn__lijst li.fg-tl--bericht b { color: var(--brand); }
.fg-tl__actie { display: inline-block; margin-left: 6px; font-style: normal; font-size: 11px; color: var(--text-3); }

/* ---- vensters ---- */
.fg-venster { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.fg-venster__titel { margin: 2px 0 0; }
.fg-venster__body { overflow: auto; }
.fg-venster__voet { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.fg-form { display: flex; flex-direction: column; gap: 12px; }
.fg-form select, .fg-form textarea, .fg-form input[type="date"] { font: inherit; font-size: 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 9px; box-sizing: border-box; width: 100%; }
.fg-keuzes { display: flex; flex-direction: column; gap: 6px; }
.fg-keuze { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.fg-keuze.is-on { border-color: var(--brand); background: var(--brand-soft); }
.fg-keuze input, .fi-veld .fg-keuze input { flex: 0 0 auto; width: auto; margin: 3px 0 0; padding: 0; }
.fg-keuze span, .fi-veld label.fg-keuze span { display: flex; flex-direction: column; gap: 2px; margin-top: 0; font-size: 12.5px; }
.fg-keuze b { font-weight: 500; color: var(--text); }
.fg-keuze i { font-style: normal; font-size: 12px; color: var(--text-2); }
.fg-twee { display: flex; flex-direction: column; gap: 10px; padding-left: 12px; border-left: 2px solid var(--line-strong); }

/* ---- uitgesloten van de betaalbatch ---- */
.fg-buiten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.fg-buiten li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--text-2); }
.fg-buiten li b { font-weight: 500; color: var(--text); }
.fg-buiten li .num { font-variant-numeric: tabular-nums; color: var(--text); }
.fg-vragen-kop { display: flex; gap: 6px; align-items: center; }
.fg-celpil { display: inline-flex; margin-left: 6px; vertical-align: middle; }

/* ---- set van PDF's uit één mail ---- */
.fg-setlijst { margin: 0; padding-left: 20px; font-size: 12.5px; color: var(--text); display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }

/* ---- btw-deadline ---- */
.fg-btw { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow: clip; }
.fg-btw__balk { width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--text); text-align: left; cursor: pointer; }
.fg-btw__balk:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fg-btw__balk > b { font-weight: 600; }
.fg-btw__wanneer { color: var(--text-2); }
.fg-btw__tellers { display: inline-flex; gap: 12px; flex-wrap: wrap; margin-left: auto; color: var(--text-2); }
.fg-btw__tellers em { font-style: normal; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-left: 3px; }
.fg-btw__uit { display: flex; flex-direction: column; gap: 8px; padding: 4px 14px 12px; border-top: 1px solid var(--line); }
.fg-btw--rond .fg-btw__balk > svg:first-child { color: var(--brand); }
.fg-btw--rustig .fg-btw__balk > svg:first-child { color: var(--text-2); }
.fg-btw--let { background: color-mix(in srgb, var(--amber) 9%, var(--surface)); border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.fg-btw--let .fg-btw__balk > svg:first-child, .fg-btw--let .fg-btw__wanneer { color: var(--amber-tekst); }
.fg-btw--telaat { background: var(--signal-soft); border-color: color-mix(in srgb, var(--signal) 40%, var(--line)); }
.fg-btw--telaat .fg-btw__balk > svg:first-child, .fg-btw--telaat .fg-btw__wanneer { color: var(--signal); font-weight: 500; }
.gk-btw { margin-bottom: 12px; }