/* KTM Voyage CRM — het meldingenoverzicht (#/feedback) [QFB-ADM]
 *
 * Alleen wat de bestaande componenten niet dekken. De pagina leunt bewust op
 * .card, .pill (met de t-* tinten uit base.css), .stat-grid, .filters, .fchips,
 * .btn en de tabel- en kaartweergave uit components.css: een tweede
 * statuskleurenschema of een tweede kaartrand invoeren is precies hoe een app
 * er per scherm anders uit gaat zien.
 *
 * Elke kleur komt uit public/css/tokens.css. Geen hex, geen rgba(), en geen
 * opacity voor tekstcontrast — een doorzichtige letter kan geen thema volgen, en
 * dat kostte op 02-08 het categoriekopje in het menu zijn WCAG-contrast (3,46:1
 * waar 4,5:1 moet).
 *
 * Prefix .fbi- , gelijk aan de sleutelprefix fbi_ van de pagina. De widget die
 * op elk scherm staat gebruikt .fbk- ; die twee mogen nooit door elkaar lopen.
 */

.fbi-h1{margin:0 0 var(--sp-1)}
.fbi-sub{margin:0 0 var(--sp-4);color:var(--text-muted);max-width:70ch;line-height:1.55}

/* ---------- de lijst ---------- */

.fbi-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:var(--sp-3) 0}
.fbi-search{position:relative;flex:1 1 240px;min-width:200px}
.fbi-search-ic{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  display:flex;color:var(--text-faint);pointer-events:none;
}
.fbi-search input{width:100%;padding-left:32px}

.fbi-title{color:var(--text);font-weight:600;text-decoration:none}
.fbi-title:hover{color:var(--accent-text-strong);text-decoration:underline}
.fbi-role{color:var(--text-faint)}
.fbi-default{color:var(--text-faint)}

/* De twee kleine merktekens achter een rij: bijlagen en browserfouten. */
.fbi-mini{
  display:inline-flex;align-items:center;gap:3px;
  margin-left:6px;font-size:11px;font-weight:700;color:var(--text-muted);
}
.fbi-mini svg{width:13px;height:13px}
.fbi-mini-bad{color:var(--bad)}

/* Op een telefoon wordt de tabel een kaartlijst; components.css schakelt daar
   met .cards/.table-wrap tussen. Deze regel zorgt alleen dat de tabelversie
   niet zijwaarts over de pagina schuift maar binnen zijn eigen kader scrollt. */
.fbi-tbl{overflow-x:auto}

/* ---------- de detailweergave ---------- */

.fbi-detail-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px;margin:0 0 var(--sp-4);
}
.fbi-ref{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.fbi-ref-k{color:var(--text-muted);font-size:12px}
.fbi-ref code{
  padding:2px 8px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);
  font-size:12px;color:var(--text);
}

.fbi-card{margin:0 0 var(--sp-4)}
.fbi-card h2{margin:0 0 var(--sp-3);font-size:15px}
.fbi-h3{margin:var(--sp-4) 0 var(--sp-2);font-size:13px;color:var(--text-muted)}

.fbi-meta{margin:0 0 var(--sp-3);color:var(--text-muted);font-size:13px}
.fbi-meta small{color:var(--text-faint)}

/* De melding zelf. pre-wrap omdat de kopjes uit het formulier ("Wat wilde je
   doen?") als echte regels zijn samengesteld en dat de leesbaarheid draagt. */
.fbi-msg{
  white-space:pre-wrap;
  padding:12px 14px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);
  line-height:1.6;
}

.fbi-dl{margin:0;display:grid;gap:6px}
.fbi-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:10px;align-items:baseline}
.fbi-row dt{margin:0;color:var(--text-muted);font-size:12px}
.fbi-row dd{margin:0;font-size:13px;line-height:1.5;word-break:break-word}
.fbi-url{color:var(--text-faint);font-size:12px}

.fbi-perms{display:flex;flex-wrap:wrap;gap:4px}
.fbi-perms code,.fbi-dl code{
  padding:1px 6px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);
  font-size:11.5px;color:var(--text-muted);
}

.fbi-note{margin:var(--sp-3) 0 0;color:var(--text-faint);font-size:12px;line-height:1.55}

/* ---------- wat de browser deed ---------- */

.fbi-calls{width:100%;border-collapse:collapse;font-size:12.5px}
.fbi-calls td{padding:4px 10px 4px 0;vertical-align:top;color:var(--text-muted)}
.fbi-calls td:nth-child(2){color:var(--text);word-break:break-all}
.fbi-calls td small{color:var(--text-faint)}
/* Een mislukt verzoek is de nuttigste regel van het hele rapport, dus het valt
   op door KLEUR EN GEWICHT — niet door kleur alleen, want dat is voor een
   kleurenblinde lezer geen verschil. */
.fbi-calls tr.is-bad td:nth-child(3){color:var(--bad);font-weight:700}

.fbi-errs{margin:0;padding-left:18px;font-size:12.5px;line-height:1.6}
.fbi-errs li{margin:0 0 6px}
.fbi-errs small{display:block;color:var(--text-faint)}

.fbi-atts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fbi-atts li{display:flex;align-items:center;gap:8px;font-size:13px}
.fbi-atts svg{flex:0 0 auto;color:var(--text-faint)}
.fbi-atts small{color:var(--text-faint)}

.fbi-note-f{margin:var(--sp-3) 0}

/* ---------- telefoon ---------- */

@media (max-width:640px){
  /* Twee kolommen naast elkaar worden op 390px twee smalle kolommen die allebei
     onleesbaar zijn. Label boven waarde leest daar beter. */
  .fbi-row{grid-template-columns:1fr;gap:2px}
  .fbi-detail-head{align-items:flex-start;flex-direction:column}
  .fbi-calls{font-size:12px}
}