/* Vragen (versie 1.23.0): het tabblad met de facturen die de app niet zelf kan
   verwerken, met per factuur een vraag aan finance. Eigen bestand naast
   stijl.css, met de kleuren en maten uit de huisstijl daar (CLAUDE.md §9). Alle
   namen beginnen met vr-. Op een breed scherm een tabel; op een smal scherm
   wordt elke rij een kaart. */

/* Het tabblad blijft verborgen tot er een lijst is en de gebruiker finance is. */
.tab[hidden]{display:none}
body.geen-finance #tab-vragen{display:none}

.vr-uitleg{background:#fff;border:1px solid var(--kaartrand);border-radius:14px;padding:14px 18px;margin-bottom:14px;box-shadow:var(--kaartschaduw);font-size:14px;line-height:1.55;max-width:1240px}
.vr-uitleg p+p{margin-top:6px}
.vr-uitleg .vr-let-op{color:var(--blauw);font-weight:600}

/* Alleen voor schermlezers. */
.vr-status,.vr-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- De balk: collega, klant, status en volgorde ---------- */
.vr-balk{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-bottom:12px}
.vr-filter{display:flex;flex-direction:column;gap:4px;min-width:0}
.vr-filter>span{font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em}
.vr-filter select{font-family:'Exo',Arial,sans-serif;font-size:13px;font-weight:600;color:var(--blauw);border:1px solid var(--kaartrand);border-radius:999px;padding:8px 32px 8px 14px;background:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(3,21,63,.06);max-width:280px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23073889' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
.vr-filter select:hover{border-color:var(--blauw)}
.vr-groepje{display:flex;flex-wrap:wrap;gap:6px}
.vr-knop{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--kaartrand);background:#fff;color:var(--blauw);font-family:'Exo',Arial,sans-serif;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;box-shadow:0 1px 3px rgba(3,21,63,.06);transition:border-color .15s,background-color .15s,color .15s}
.vr-knop:hover{border-color:var(--blauw)}
.vr-knop.actief{background:var(--blauw);border-color:var(--blauw);color:#fff}
.vr-aantal{display:inline-block;min-width:22px;text-align:center;background:var(--hairline);color:var(--blauw);border-radius:999px;font-size:11.5px;font-weight:800;padding:2px 7px;font-variant-numeric:tabular-nums}
.vr-knop.actief .vr-aantal{background:#fff}
.vr-knop[data-vr-status="open"] .vr-aantal{background:var(--oranje);color:#fff}
.vr-knop[data-vr-status="open"].actief .vr-aantal{background:#fff;color:var(--oranje-donker)}
@media (prefers-reduced-motion:reduce){.vr-knop{transition:none}}

.vr-tellingen{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--blauw-black);margin-bottom:12px}
.vr-tel b{font-variant-numeric:tabular-nums;color:var(--blauw)}
.vr-tel-soort,.vr-tel-beeld{color:var(--grijs)}

/* ---------- De tabel ---------- */
.vr-tabel{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--kaartrand);border-radius:14px;box-shadow:var(--kaartschaduw);table-layout:fixed;font-size:13.5px;line-height:1.45}
.vr-tabel th,.vr-tabel td{text-align:left;vertical-align:top;padding:10px 10px;border-bottom:1px solid var(--hairline);overflow-wrap:anywhere}
.vr-tabel thead th{font-size:11.5px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;background:#fcfdff}
.vr-tabel thead th:first-child{border-top-left-radius:14px}
.vr-tabel thead th:last-child{border-top-right-radius:14px}
.vr-tabel thead th:nth-child(1){width:10%}
.vr-tabel thead th:nth-child(2){width:10%}
.vr-tabel thead th:nth-child(3){width:9%}
.vr-tabel thead th:nth-child(4){width:8%}
.vr-tabel thead th:nth-child(5){width:7%}
.vr-tabel thead th:nth-child(6){width:7%}
.vr-tabel thead th:nth-child(7){width:15%}
.vr-tabel thead th:nth-child(8){width:16%}
.vr-tabel thead th:nth-child(9){width:18%}
.vr-groepkop th{background:var(--blauw-hairline);color:var(--blauw);font-weight:800;font-size:14px;padding:8px 12px}
.vr-groepkop .vr-aantal{margin-left:6px}
.vr-rij:hover td{background:#fbfdff}
.vr-bedrag{font-variant-numeric:tabular-nums;white-space:nowrap}
.vr-nr{font-weight:700;color:var(--blauw-black)}
.vr-zacht{color:var(--grijs)}
.vr-soort{display:inline-block;background:var(--hairline);color:var(--blauw);border-radius:6px;padding:0 6px;font-size:11.5px;font-weight:700;margin-bottom:2px}
.vr-vraagtekst{display:block;font-weight:700;color:var(--blauw-black)}
.vr-daarna,.vr-meta{display:block;font-size:12.5px;color:var(--grijs);margin-top:4px}

/* ---------- Het antwoordvak ---------- */
.vr-vak{display:flex;flex-direction:column;gap:6px;min-width:0}
.vr-vak .btn{padding:8px 12px;font-size:12.5px}
.vr-okknoppen{display:flex;gap:6px;flex-wrap:wrap}
.vr-ok,.vr-nee{min-width:84px}
.vr-keuzes{display:flex;flex-direction:column;gap:6px}
.vr-keuze{text-align:left;font-weight:600;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.vr-letter{display:inline-block;min-width:18px;font-weight:800;color:var(--oranje-donker)}
/* Het label en het vak (punt 9 van Interface, ticket 9777): een zichtbaar label van 14 px in inkt, het vak 16/24 zodat Safari op de telefoon niet inzoomt. */
.vr-lbl{font-size:var(--h-tekst-basis);line-height:var(--h-regel-basis);font-weight:var(--hero-gewicht-label);color:var(--h-tekst)}
.vr-tekstvak,.vr-opmerking{width:100%;font-family:'Exo',Arial,sans-serif;font-size:var(--h-tekst-lees);line-height:var(--h-regel-lees);color:var(--blauw-black);border:1px solid var(--kaartrand);border-radius:10px;padding:7px 10px;background:#fff}
.vr-tekstvak{resize:vertical;min-height:52px}
.vr-tekstvak:focus,.vr-opmerking:focus{outline:none;border-color:var(--h-focus);box-shadow:var(--focusring)}
.vr-verstuur{align-self:flex-start}
.vr-vak .btn:disabled,.vr-vak textarea:disabled,.vr-vak input:disabled{opacity:.55;cursor:progress}
.vr-fout{font-size:12.5px;color:var(--rood);background:var(--rood-bg);border:1px solid var(--rood-rand);border-radius:8px;padding:5px 9px}
.vr-beantwoord{display:flex;flex-direction:column;gap:3px;font-size:13px;background:var(--groen-bg);border:1px solid var(--groen-rand);border-radius:10px;padding:7px 10px;margin-bottom:6px}
.vr-beantwoord .vr-door{color:var(--groen-tekst)}
.vr-beantwoord .vr-wat{font-weight:700;color:var(--blauw-black);white-space:pre-wrap}
.vr-beantwoord .vr-opm{color:var(--blauw-black);white-space:pre-wrap}
.vr-beantwoord.vr-eerder{background:var(--geel-bg);border-color:var(--geel-rand)}
.vr-beantwoord.vr-eerder .vr-door{color:var(--geel-tekst)}
.vr-vervallen{font-size:13px;color:var(--grijs);background:var(--hairline);border-radius:10px;padding:7px 10px;margin-bottom:6px}
.vr-wijzig,.vr-annuleer{margin-top:4px}
.vr-meer{text-align:center;margin:14px 0}

/* ---------- Smal scherm: elke rij een kaart ---------- */
@media (max-width:760px){
  .vr-balk{align-items:stretch}
  .vr-filter{flex:1 1 140px}
  .vr-filter select{max-width:none;width:100%}
  .vr-tabel{border:none;background:none;box-shadow:none;table-layout:auto}
  .vr-tabel thead{display:none}
  .vr-tabel,.vr-tabel tbody,.vr-tabel tr,.vr-tabel td,.vr-tabel th{display:block;width:100%}
  .vr-groepkop th{border-radius:10px;margin:14px 0 8px;border:none}
  .vr-rij{background:#fff;border:1px solid var(--kaartrand);border-left:4px solid var(--oranje);border-radius:14px;box-shadow:var(--kaartschaduw);margin-bottom:12px;padding:6px 0}
  .vr-rij.vr-status-beantwoord{border-left-color:var(--groen)}
  .vr-rij.vr-status-vervallen{border-left-color:var(--grijs)}
  .vr-rij:hover td{background:none}
  .vr-tabel td{border-bottom:none;padding:5px 14px;display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px}
  .vr-tabel td::before{content:attr(data-kop);font-size:11px;font-weight:700;color:var(--grijs);text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
  .vr-tabel td.vr-vraag,.vr-tabel td.vr-antwoord{display:block}
  .vr-tabel td.vr-vraag::before,.vr-tabel td.vr-antwoord::before{display:block;margin-bottom:4px}
  .vr-tabel td.vr-antwoord{border-top:1px solid var(--hairline);margin-top:6px;padding-top:10px}
  .vr-verstuur{align-self:stretch}
  .vr-okknoppen .btn{flex:1 1 0}
}