/* ========== Void Badge ========== */

.void-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    background-color: #dc2626;
    color: #ffffff;
    text-transform: uppercase;
}

.void-row { opacity: 0.7; }
.void-row td { text-decoration: line-through; text-decoration-color: #9ca3af; }
.void-row td:nth-last-child(1),
.void-row td:nth-last-child(2) { text-decoration: none; }

/* ========== Amount Column ========== */

.amount-column { text-align: right; }
.amount-cell { text-align: right; font-weight: 500; white-space: nowrap; }

/* ========== Active Void Toggle ========== */

.filter-toggle-btn.active {
    background: #ecfdf5;
    border-color: #059669;
    color: #065f46;
}

/* ========== Filter Count Badge ========== */

/* The filter bar is a flex row with the search box at flex: 1, so any width a
   button gains is taken from the search box. The global .filter-count sits inline
   with an 8px flex gap + 6px margin + its own padding, which widens the button by
   ~30px the moment a filter is applied. Pin it to the button's corner instead
   (.filter-toggle-btn is already position: relative) so it takes no width. */
.filter-toggle-btn .filter-count {
    position: absolute;
    top: -6px;
    right: -6px;
    margin-left: 0;
}