body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
table.table-sm td, table.table-sm th { vertical-align: middle; }
.badge-status-Open { background-color: #6c757d; }
.badge-status-PartiallyPaid { background-color: #fd7e14; }
.badge-status-Paid { background-color: #198754; }
.badge-status-Cancelled { background-color: #343a40; }
.badge-bank-Unmatched { background-color: #6c757d; }
.badge-bank-Matched { background-color: #198754; }
.badge-bank-Ignored { background-color: #343a40; }
.instance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    height: 1.6rem;
    padding: 0 .55rem;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: .25rem;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 0 0 .12rem rgba(255,255,255,.2);
}
.instance-prod {
    background: #dc3545;
    color: #fff;
}
.instance-test {
    background: #ffc107;
    color: #212529;
}
.instance-dev {
    background: #20c997;
    color: #06281f;
}

/* Rij-kleur op betaalstatus (override Bootstrap-striping) */
tr.row-status-Open    > * { background-color: #fdecea !important; } /* niet betaald: zacht rood */
tr.row-status-PartiallyPaid > * { background-color: #fff3cd !important; } /* deels: zacht geel */
tr.row-status-Paid    > * { background-color: #e6f4ea !important; } /* betaald: zacht groen */
tr.row-status-Cancelled > * { background-color: #e9ecef !important; color: #6c757d; }

.preview-box { background:#f8f9fa; border:1px solid #dee2e6; border-radius:.375rem; padding:1rem; }