:root {
    --tx-badge-pledge-bg: #dbeafe;
    --tx-badge-pledge-fg: #1e40af;
    --tx-badge-donation-bg: #ede9fe;
    --tx-badge-donation-fg: #5b21b6;
    --tx-badge-recurring-bg: #ccfbf1;
    --tx-badge-recurring-fg: #0f766e;
    --tx-badge-credit-used-bg: #fef3c7;
    --tx-badge-credit-used-fg: #92400e;
    --tx-badge-credit-in-bg: #dcfce7;
    --tx-badge-credit-in-fg: #15803d;
    --tx-method-emblem-width: 28px;
    --tx-method-emblem-height: 18px;
    --tx-method-credit-emblem-bg: color-mix(in srgb, var(--accent) 12%, var(--field-bg));
    --tx-method-credit-emblem-fg: var(--accent);
    --tx-method-manual-emblem-bg: #5c6573;
    --tx-method-manual-emblem-fg: #fff;
}

.transactions-manager-page .filters-row {
    overflow: visible;

    .filters-row-inner {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 1rem;
        overflow: visible;
    }

    .filters-row-inner > .sliding-filter-group,
    .filters-row-inner > .member-search {
        flex: 0 0 auto;
    }
}

@media (min-width: 769px) {
    .data-grid--transactions {
        &.data-grid {
            --data-grid-min-width: 680px;
            --data-grid-columns:
                115px
                85px
                minmax(100px, 1.5fr)
                minmax(80px, 1fr)
                minmax(110px, 1fr)
                95px
                minmax(90px, 1fr);
            width: 100%;
            min-width: var(--data-grid-min-width);
            box-sizing: border-box;
            visibility: visible;
        }

        .data-grid-body { width: 100%; align-self: stretch; }

        .data-grid-item {
            display: flex;
            flex-direction: column;
        }

        .data-grid-item > .data-grid-row {
            width: calc(100% - 8px);
            min-width: var(--data-grid-min-width, 680px);
            box-sizing: border-box;
            align-items: stretch;
        }

        .data-grid-cell-date       { grid-column: 1; }
        .data-grid-cell-display_id { grid-column: 2; }
        .data-grid-cell-member     { grid-column: 3; }
        .data-grid-cell-campaign   { grid-column: 4; }
        .data-grid-cell-action     { grid-column: 5; }
        .data-grid-cell-amount     { grid-column: 6; }
        .data-grid-cell-method     { grid-column: 7; }

        .data-grid-header .data-grid-cell,
        .data-grid-item > .data-grid-row .data-grid-cell {
            display: flex;
            align-items: center;
            align-self: stretch;
            min-width: 0;
            min-height: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .data-grid-header .data-grid-cell-amount,
        .data-grid-item > .data-grid-row .data-grid-cell-amount {
            justify-content: flex-end;
            text-align: right;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        .data-grid-cell-amount .sortable-label { display: block; text-align: right; }

        .data-grid-item > .data-grid-row .data-grid-cell-action {
            justify-content: flex-start;
        }

        .data-grid-item > .data-grid-row .data-grid-cell-method {
            justify-content: flex-start;
        }

        .data-grid-header .sortable .sortable-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .data-grid-header,
        .data-grid-row,
        .data-grid-detail,
        .data-grid-detail-row {
            width: 100%;
            min-width: var(--data-grid-min-width, 700px);
            max-width: none;
            box-sizing: border-box;
        }
    }
}

.transaction-row {
    cursor: pointer;
}

.tx-detail-strip {
    display: none;
    padding: 0 0 4px;
    margin: 0 4px;
    min-width: calc(var(--data-grid-min-width, 680px) - 8px);
    box-sizing: border-box;
}

.tx-action-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.tx-expand-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tx-expand-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tx-expand-heading {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-family: var(--font-sans);
}

.tx-expand-table-wrap {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--field-bg, var(--color-light));
}

.tx-expand-table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.tx-expand-table {
    width: auto;
    min-width: 100%;
    margin: 0;
    border-collapse: collapse;

    th,
    td {
        padding: 0.5rem 0.75rem;
        text-align: left;
        font-size: 0.8125rem;
        font-family: var(--font-sans);
        vertical-align: middle;
    }

    thead th {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
        background: color-mix(in srgb, var(--accent) 6%, var(--field-bg, var(--color-light)));
        border-bottom: 1px solid var(--border-color);
    }

    tbody td {
        border-top: 1px solid var(--border-color);
        color: var(--text-color);
    }

    .tx-expand-table__num {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
}

.tx-still-open {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.15rem 0.65rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 12%, var(--field-bg, var(--color-light)));
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--accent);
    line-height: 1.35;
    white-space: nowrap;
}

.tx-detail-panel {
    background: var(--manager-grid-expanded-surface, color-mix(in srgb, var(--accent) 11%, var(--color-light) 89%));
    border: none;
    border-radius: 0 0 12px 12px;
    padding: 14px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;

    .row {
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        gap: 20px;
    }

    .tx-expand-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border: none;
        background: var(--color-light);
    }

    .pledge-detail-panel .tx-detail-panel-fields {
        width: 100%;
        flex: 0 0 auto;
        align-items: flex-start;
        align-content: flex-start;
    }

    .pledge-detail-user-column > .recent-pledges-header-row,
    .pledge-detail-payment-column > .recent-pledges-header-row {
        min-height: 1.75rem;
        align-items: center;
        flex-shrink: 0;
    }

    .pledge-detail-user-column + .pledge-detail-payment-column,
    .pledge-detail-payment-column + .pledge-detail-user-column {
        min-width: 0;
    }
}

.tx-detail-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;

    + .tx-detail-panel-header {
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }
}

.tx-detail-panel-title {
    display: flex;
    align-items: center;
    margin-right: auto;
    gap: 8px;
    font-size: 0.88em;
    font-weight: 600;
    color: var(--text-color);

    i { color: var(--accent); }
}

.tx-detail-panel-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
    align-items: flex-start;
    align-content: flex-start;
    min-width: 0;
}

.tx-detail-panel-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.tx-detail-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.tx-detail-card {
    background: var(--field-bg, var(--color-light));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 1 auto;
    align-self: flex-start;
    height: -moz-fit-content;
    height: fit-content;
    min-width: 0;

    &.tx-detail-card--wide {
        flex: 1 1 12rem;
        min-width: min(12rem, 100%);
    }
}

.tx-detail-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.tx-detail-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tx-detail-card-action {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;

    &:hover,
    &:active {
        text-decoration: underline;
    }

    &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--accent-shadow-focus);
        border-radius: 4px;
    }
}

.tx-detail-card-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    word-break: break-word;
}

.tx-detail-card-gateway {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;

    i {
        flex-shrink: 0;
        color: var(--accent);
    }
}

.tx-detail-card-mono {
    font-family: monospace;
    letter-spacing: 0.02em;
}

.tx-detail-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--color-light);
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    font-size: 0.88em;
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;

    &:hover,
    &:active {
        background: var(--accent);
        color: var(--text-on-accent);
    }

    &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--accent-shadow-focus);
    }
}

.tx-action-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.78em;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
}

.tx-action-badge--pledge_payment      { background: var(--tx-badge-pledge-bg);      color: var(--tx-badge-pledge-fg); }
.tx-action-badge--donation            { background: var(--tx-badge-donation-bg);     color: var(--tx-badge-donation-fg); }
.tx-action-badge--recurring_donation  { background: var(--tx-badge-recurring-bg);    color: var(--tx-badge-recurring-fg); }
.tx-action-badge--open_credit         { background: var(--tx-badge-credit-used-bg);  color: var(--tx-badge-credit-used-fg); }
.tx-action-badge--open_credit_created { background: var(--tx-badge-credit-in-bg);    color: var(--tx-badge-credit-in-fg); }
.tx-action-badge--unknown             { background: var(--gray-200);                 color: var(--text-default); }

.tx-method-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--field-bg, var(--color-light));
    max-width: 100%;
    min-height: calc(var(--tx-method-emblem-height) + 8px);
    box-sizing: border-box;

    &.tx-method-chip--sm {
        padding: 2px 8px;
        min-height: calc(var(--tx-method-emblem-height) + 4px);
    }

    &.tx-method-chip--credit .tx-method-chip__icon-wrap {
        background: var(--tx-method-credit-emblem-bg);
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tx-method-credit-emblem-fg) 22%, transparent);

        .tx-method-chip__icon {
            color: var(--tx-method-credit-emblem-fg);
        }
    }

    &.tx-method-chip--manual .tx-method-chip__icon-wrap {
        background: var(--tx-method-manual-emblem-bg);
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tx-method-manual-emblem-fg) 22%, transparent);

        .tx-method-chip__icon {
            color: var(--tx-method-manual-emblem-fg);
        }
    }
}

.multi-select-dropdown-item .tx-method-chip {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 0;
    min-height: var(--tx-method-emblem-height);
    margin-right: 0.5rem;
}

.tx-method-chip__logo-wrap,
.tx-method-chip__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tx-method-emblem-width);
    height: var(--tx-method-emblem-height);
    border-radius: 3px;
    flex-shrink: 0;
    overflow: hidden;
}

.tx-method-chip__icon-wrap {
    background: color-mix(in srgb, var(--accent) 10%, var(--color-light));
}

.tx-method-chip__icon {
    font-size: 0.7em;
    line-height: 1;
    flex-shrink: 0;
    color: var(--accent);
}

.tx-method-chip__logo {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
}

.tx-method-chip__label {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tx-empty-cell { color: var(--gray-300); }

@media (max-width: 768px) {
    .data-grid--transactions {
        .tx-detail-strip {
            display: none !important;
        }
        .data-grid-mobile-pill-line-2 {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tx-mobile-pill-meta {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            max-width: 100%;
            min-width: 0;
            vertical-align: middle;
        }

        .tx-mobile-pill-meta__action {
            flex: 0 1 auto;
            min-width: 0;
            display: inline-flex;
            align-items: center;
        }

        .tx-mobile-pill-meta__action .tx-action-badge {
            display: inline-flex;
            align-items: center;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
        }

        .tx-mobile-pill-meta__method {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            line-height: 0;
        }

        .tx-mobile-pill-meta__method .tx-method-chip--sm {
            padding: 2px;
            min-height: 0;
            gap: 0;
            border-radius: 4px;
        }
    }
}