/* Facturen · KPI's op mobiel als tabs + één bedrag (24 september 2026, gebruikerskeuze B).
   De drie knoppen blijven de filterkeuze (zelfde knoppen, aria-pressed en markering);
   op mobiel tonen ze kort label + aantal. Het bedrag van de gekozen keuze staat groot
   eronder; zonder één van deze drie filters toont het Openstaand. Iedere knop heeft een
   toegankelijke naam met het volledige bedrag. Desktop: drie kolommen, ongewijzigd. */
#invoicesView .invoice-summary .invoice-tab,
#invoicesView .invoice-summary .invoice-kpi-focus { display: none; }
/* Een oude 3.2-regel geeft een oneven laatste kaart de volle breedte; Alle hoort in de rij. */
#invoicesView .invoice-summary .invoice-kpi-secondary > :last-child { grid-column: auto; }
@media (min-width: 721px) {
  /* Desktop: vier kolommen, waarvan Alle een aantal toont in plaats van een bedrag. */
  #invoicesView .invoice-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #invoicesView .invoice-summary {
    display: grid;
    /* Vier tabs; kolommen volgen de labelbreedte zodat "Ontvangen 38" ook op 320px past. */
    grid-template-columns: repeat(4, auto);
  }
  #invoicesView .invoice-summary .invoice-kpi-secondary { display: contents; }
  #invoicesView .invoice-summary :is(.invoice-hero-card, .invoice-kpi-card) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  #invoicesView .invoice-summary .invoice-kpi-card { border-left: 1px solid var(--line); }
  #invoicesView .invoice-summary :is(.invoice-hero-card, .invoice-kpi-card) > :not(.invoice-tab) { display: none; }
  #invoicesView .invoice-summary .invoice-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    color: var(--ink);
    font: 500 13px/1.2 Figtree, sans-serif;
    font-style: normal;
    white-space: nowrap;
  }
  #invoicesView .invoice-summary .invoice-tab b { color: var(--muted); font-weight: 500; font-size: 12px; }
  #invoicesView .invoice-summary button.is-active .invoice-tab { font-weight: 650; }
  #invoicesView .invoice-summary [data-invoice-filter="overdue"]:has(#invoiceKpiOverdue:not(.is-zero)) .invoice-tab > span {
    color: var(--danger);
  }
  #invoicesView .invoice-summary .invoice-kpi-focus {
    display: grid;
    grid-column: 1 / -1;
    gap: 4px;
    padding: 14px 16px 16px;
  }
  #invoicesView .invoice-summary #invoiceKpiFocusAmount {
    font: 400 clamp(28px, 8.4vw, 36px)/1.1 var(--font-display);
    letter-spacing: -.035em;
    color: var(--ink);
    white-space: nowrap;
  }
  #invoicesView .invoice-summary #invoiceKpiFocusAmount.is-late { color: var(--danger); }
  #invoicesView .invoice-summary #invoiceKpiFocusCaption { color: var(--muted); font-size: 12px; }
}
@media (max-width: 359px) {
  #invoicesView .invoice-summary .invoice-tab { font-size: 12px; gap: 4px; }
}