/* Gedeelde stijl voor alle overzicht-/lijstschermen in de back-office en formulieren-modules.
   Eén centrale plek zodat alle "overzicht"-pagina's (Vergunningen, IT-Formulier, ASYCUDA, Facturen,
   Klanten, Medewerkers, Opgeslagen codes, Auditlog, Demo-aanvragen) er identiek uitzien - een
   toekomstige kleur-/stijlwijziging hoeft zo maar op één plek. 2026-09-11. */

.ovz-wrap { padding: 36px 40px; width: 100%; font-family: 'Nunito Sans', 'Segoe UI', Arial, sans-serif; }

.ovz-table-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; overflow-x: auto; }
.ovz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ovz-table th { text-align: left; padding: 12px; background: #103a6b; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; white-space: nowrap; }
.ovz-table th.num, .ovz-table td.num { text-align: right; }
.ovz-table td { padding: 13px 12px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.ovz-table tbody tr:last-child td { border-bottom: none; }

.ovz-mono { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: #0f2648; }
.ovz-ref { font-weight: 700; color: #0f172a; }
.ovz-muted { font-size: 11.5px; color: #94a3b8; }
.ovz-sub { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* Badges: categorie/type/rol (navy-familie) en status (semantisch) */
.ovz-badge { display: inline-block; padding: 4px 11px; border-radius: 100px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ovz-b-navydark { background: #103a6b; color: #fff; }
.ovz-b-navylight { background: #e8eef5; color: #103a6b; }
.ovz-b-slatedark { background: #45668b; color: #fff; }
.ovz-b-slatelight { background: #eef2f7; color: #45668b; }
.ovz-b-terra { background: #b8550b; color: #fff; }
.ovz-b-neutral { background: #f1f5f9; color: #94a3b8; }
.ovz-b-pending { background: #fdf0e3; color: #b8550b; }
.ovz-b-good { background: #d1fae5; color: #059669; }
.ovz-b-bad { background: #fee2e2; color: #dc2626; }

/* Icoon-knoppen: bewerken/bekijken-printen/verwijderen, altijd hetzelfde vierkantje */
.ovz-icon-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ovz-icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid #e2e8f0; display: inline-flex; align-items: center; justify-content: center; color: #5b6b85; text-decoration: none; background: #fff; cursor: pointer; }
.ovz-icon-btn.edit { color: #b8550b; border-color: #b8550b; }
.ovz-icon-btn.view { color: #103a6b; border-color: #103a6b; }
.ovz-icon-btn.del { color: #dc2626; border-color: #dc2626; }

/* Knoppen voor primaire/secundaire rij-acties die geen icoon-knop zijn (bv. "Markeer als betaald") */
.ovz-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ovz-btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; }
.ovz-btn-navy { background: #103a6b; color: #fff; }
.ovz-btn-outline-navy { background: #fff; border-color: #103a6b; color: #103a6b; }
.ovz-btn-outline-red { background: #fff; border-color: #dc2626; color: #dc2626; }

/* Paginering: onder elke overzichttabel, zelfde vierkante-knop-taal als de rij-acties hierboven */
.ovz-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.ovz-pag-info { font-size: 12px; color: #5b6b85; }
.ovz-pag-btns { display: flex; gap: 5px; align-items: center; }
.ovz-pag-btn { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #fff; color: #0f172a; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ovz-pag-btn:hover:not(:disabled) { background: #eef2f7; }
.ovz-pag-btn:disabled { opacity: .4; cursor: default; }
.ovz-pag-btn.actief { background: #103a6b; border-color: #103a6b; color: #fff; }
.ovz-pag-ellipsis { padding: 0 4px; color: #94a3b8; }