/* Matches .avpvh-member-profile-form's own max-width (avpvh-members/assets/registration.css) — this shortcode sits right below that form on the profile page, and without this it falls back to the theme's much narrower default content width instead of lining up with it. */
.avbk-balance {
    max-width: 900px;
    margin: 1.5rem auto;
}

.avbk-balance-table-wrap {
    overflow-x: auto;
}

.avbk-balance-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: .82rem;
}

.avbk-balance-table th,
.avbk-balance-table td {
    padding: .35rem .4rem;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.avbk-balance-table thead th {
    white-space: nowrap;
}

.avbk-balance-table td {
    word-break: break-word;
}

.avbk-balance-table .avbk-cell-nowrap {
    white-space: nowrap;
    text-align: right;
}

.avbk-balance-table th[data-type="number"] {
    text-align: right;
}

.avbk-balance-table .avbk-cell-wrap-words {
    /* Wrap between words (e.g. after the first name) instead of the
       table squeezing this column so narrow it breaks mid-word. */
    word-break: normal;
    overflow-wrap: normal;
}

.avbk-balance-table tfoot th {
    border-top: 2px solid #333;
    border-bottom: none;
}

.avbk-balance-table th.avbk-sortable {
    cursor: pointer;
    user-select: none;
}

.avbk-sort-indicator {
    font-size: .8em;
    color: #555;
}

.avbk-balance-filter-row th {
    padding: .25rem .3rem;
    border-bottom: 2px solid #ccc;
}

.avbk-filter-control {
    width: 100%;
    box-sizing: border-box;
    font-size: .85em;
    font-weight: normal;
    padding: .15rem .3rem;
}

.avbk-balance-table-tools {
    position: relative;
    margin-bottom: .4rem;
}

.avbk-col-toggle-panel[hidden] {
    display: none;
}

.avbk-col-toggle-panel {
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    padding: .5rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .avbk-balance-table {
        font-size: .75rem;
    }

    .avbk-balance-table th,
    .avbk-balance-table td {
        padding: .3rem .25rem;
    }

    .avbk-balance-table .avbk-col-optional {
        display: none;
    }

    /* The theme's own content column keeps a fairly wide side gutter
       (min(6.5rem, 8vw), still ~30px on a phone) even in portrait. This
       table needs all the width it can get, so pull it out to the edges
       of the viewport instead of inheriting that gutter. */
    .avbk-balance-table-wrap {
        margin-left: calc(-1 * var(--wp--style--root--padding-left, min(6.5rem, 8vw)));
        margin-right: calc(-1 * var(--wp--style--root--padding-right, min(6.5rem, 8vw)));
        padding-left: .5rem;
        padding-right: .5rem;
    }

    /* Omschrijving is usually the longest cell but the least important to
       keep on one line — cap it so it wraps before Lid (names) gets
       squeezed instead. */
    .avbk-balance-table th[data-col="omschrijving"],
    .avbk-balance-table td.avbk-col-description {
        max-width: 38vw;
    }
}

.avbk-balance-qr {
    max-width: 200px;
    margin: 1.5rem auto 0;
    text-align: center;
}

.avbk-balance-qr svg {
    width: 100%;
    height: auto;
}

.avbk-balance-qr-hint {
    max-width: 480px;
    margin: .5rem auto 0;
    text-align: center;
}

.avbk-balance-qr-ref {
    text-align: center;
}

.avbk-balance-notice {
    background: #d7f2d7;
    border-left: 4px solid #46b450;
    padding: .75rem 1rem;
}

.avbk-balance-also-form fieldset {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: .75rem 1rem;
    margin: 1rem 0;
}

.avbk-balance-also-form legend {
    font-weight: 600;
    padding: 0 .4rem;
}

.avbk-balance-also-form label {
    display: inline-block;
    margin: 0 1rem .5rem 0;
}

.avbk-balance-also-form button {
    display: block;
    margin-top: .5rem;
}

.avbk-balance-dispute {
    margin-top: 1.5rem;
}

.avbk-balance-dispute summary {
    cursor: pointer;
    color: #2271b1;
}

.avbk-balance-dispute-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: .75rem;
    text-align: left;
}

.avbk-estimate-flag {
    position: relative;
    display: inline-block;
    margin-left: .35em;
    color: #b32d2e;
    font-weight: 600;
    cursor: help;
}

.avbk-estimate-tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    margin-top: .25rem;
    width: max-content;
    max-width: 220px;
    padding: .4rem .6rem;
    border-radius: 4px;
    background: #333;
    color: #fff;
    font-size: .85rem;
    font-weight: normal;
    white-space: normal;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.avbk-estimate-flag:hover .avbk-estimate-tooltip,
.avbk-estimate-flag:focus .avbk-estimate-tooltip {
    display: block;
}

.avbk-status-badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 3px;
    font-size: .85em;
    font-weight: 600;
    white-space: nowrap;
}

.avbk-status-open .avbk-status-badge {
    background: #fbe3e0;
    color: #a02b1e;
}

.avbk-status-paid .avbk-status-badge {
    background: #d7f2d7;
    color: #2a6b2a;
}

.avbk-status-waived .avbk-status-badge {
    background: #eee;
    color: #666;
}