{% extends 'wfbo/_layout.html.twig' %}

{% block title %}Deposits — WFBO{% endblock %}
{% block wfbo_title %}Deposits{% endblock %}

{% block wfbo_content %}

    {% set overdueParam = overdueMode ? 1 : null %}

    {# Flash messages #}
    {% for flash in app.flashes('success') %}
        <div class="alert alert-success mb-4" role="alert" data-testid="flash-success">{{ flash }}</div>
    {% endfor %}

    {# ── Today's totals ── #}
    <div class="row g-3 mb-4 mt-1">
        <div class="col-12 col-sm-6 col-xl-6" data-testid="stat-deposits-today">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Total Deposits</p>
                    <p class="stat-sub mb-1">Today</p>
                    <p class="stat-value--lg" style="color: #16a34a;">₱{{ depositsToday|number_format(2) }}</p>
                    <p class="stat-sub">{{ depositsTodayCount }} approved deposit{{ depositsTodayCount != 1 ? 's' : '' }}</p>
                    <p class="stat-sub" style="margin-top:8px; padding-top:8px; border-top:1px dashed #e5e7eb; color:#b45309;"
                       data-testid="stat-deposits-pending">
                        Pending: ₱{{ pendingDepositsSum|number_format(2) }} ({{ pendingDepositsCount }})
                    </p>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-6" data-testid="stat-withdrawals-today">
            <div class="card h-100">
                <div class="card-body">
                    <p class="stat-label">Total Withdrawals</p>
                    <p class="stat-sub mb-1">Today</p>
                    <p class="stat-value--lg" style="color: #dc2626;">₱{{ withdrawalsToday|number_format(2) }}</p>
                    <p class="stat-sub">{{ withdrawalsTodayCount }} approved withdrawal{{ withdrawalsTodayCount != 1 ? 's' : '' }}</p>
                    <p class="stat-sub" style="margin-top:8px; padding-top:8px; border-top:1px dashed #e5e7eb; color:#b45309;"
                       data-testid="stat-withdrawals-pending">
                        Pending: ₱{{ pendingWithdrawalsSum|number_format(2) }} ({{ pendingWithdrawalsCount }})
                    </p>
                </div>
            </div>
        </div>
    </div>

    {# ── Deposit trend (approved deposits grouped daily / weekly / monthly) ── #}
    {% if not overdueMode %}
        {% set dt = depositTrend %}
        {% set unit = dt.group %}
        <div class="card mb-4" data-testid="deposit-trend">
            <div class="card-body">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
                    <p class="stat-label mb-0">Deposit Trend</p>
                    <div class="d-flex flex-wrap gap-2">
                        {% for key, label in trendPresets %}
                            <a href="{{ path('app_wfbo_deposits', {trend: key, status: currentStatus, search: search ?: null}) }}"
                               class="period-pill {% if dt.range == key %}is-active{% endif %}"
                               data-testid="deposit-trend-range-{{ key }}">{{ label }}</a>
                        {% endfor %}
                    </div>
                </div>
                <p class="stat-sub mb-2" data-testid="deposit-trend-summary">
                    <strong style="color:#111827;" data-testid="deposit-trend-total">₱{{ dt.total|number_format(2) }}</strong>
                    approved in the last {{ dt.window }} · avg ₱{{ dt.avg|number_format(2) }} per {{ unit }}
                    ·
                    {% if dt.changePct is null %}
                        <span data-testid="deposit-trend-change">no deposits in the previous {{ dt.window }} to compare</span>
                    {% else %}
                        <span data-testid="deposit-trend-change" data-direction="{{ dt.changePct >= 0 ? 'up' : 'down' }}"
                              style="font-weight:700; color: {{ dt.changePct >= 0 ? '#16a34a' : '#dc2626' }};">
                            {{ dt.changePct >= 0 ? '▲' : '▼' }} {{ dt.changePct|abs|number_format(1) }}%
                        </span>
                        vs previous {{ dt.window }} (₱{{ dt.prevTotal|number_format(2) }})
                    {% endif %}
                </p>
                <div style="height: 260px;"
                     data-controller="deposit-trend"
                     data-deposit-trend-labels-value="{{ dt.labels|json_encode|e('html_attr') }}"
                     data-deposit-trend-values-value="{{ dt.values|json_encode|e('html_attr') }}"
                     data-deposit-trend-avg-value="{{ dt.avg }}"
                     data-deposit-trend-unit-value="{{ unit }}">
                    <canvas data-deposit-trend-target="canvas" data-testid="deposit-trend-chart"></canvas>
                </div>
            </div>
        </div>
    {% endif %}

    {# ── Overdue pending alert ── #}
    {% if overdueMode %}
        <div class="alert alert-overdue mb-4 d-flex align-items-center justify-content-between flex-wrap gap-2"
             role="alert" data-testid="deposits-overdue-alert">
            <span>&#9888; Showing {{ total }} deposit request{{ total != 1 ? 's' : '' }} pending {{ overdueThresholdMinutes }}+ minutes (oldest first).</span>
            <a href="{{ path('app_wfbo_deposits') }}"
               class="btn btn-sm btn-outline-secondary" data-testid="btn-clear-overdue">Show all</a>
        </div>
    {% else %}
        <div class="alert alert-overdue mb-4 d-flex align-items-center justify-content-between flex-wrap gap-2"
             role="alert" data-testid="deposits-overdue-alert"
             data-wfbo-pending-target="overdueAlert"
             {% if overdueCount == 0 %}style="display:none;"{% endif %}>
            <span data-testid="overdue-alert-text" data-wfbo-pending-target="overdueAlertText">&#9888; {{ overdueCount }} deposit request{{ overdueCount != 1 ? 's' : '' }} pending {{ overdueThresholdMinutes }}+ minutes.</span>
            <a href="{{ path('app_wfbo_deposits', {status: 'pending', overdue: 1}) }}"
               class="btn btn-sm btn-secondary" data-testid="btn-view-overdue">View</a>
        </div>
    {% endif %}

    {# ── Search ── #}
    <form method="get" action="{{ path('app_wfbo_deposits') }}" class="d-flex gap-2 mb-4"
          data-testid="deposit-search-form">
        {% if currentStatus %}<input type="hidden" name="status" value="{{ currentStatus }}">{% endif %}
        <input type="text" name="search" value="{{ search }}"
               placeholder="Search by name or ref. no…"
               class="form-control" style="max-width: 300px; background:#fff; color:#111; border:1px solid #d1d5db;"
               data-testid="input-deposit-search">
        <button type="submit" class="btn btn-sm btn-secondary" data-testid="btn-deposit-search">Search</button>
        {% if search %}
            <a href="{{ path('app_wfbo_deposits', currentStatus ? {status: currentStatus} : {}) }}"
               class="btn btn-sm btn-outline-secondary" data-testid="btn-deposit-search-clear">Clear</a>
        {% endif %}
    </form>

    {# ── Status filter tabs ── #}
    <div class="d-flex gap-2 mb-4 flex-wrap" data-testid="deposit-status-filters">
        {% set filters = [
            {label: 'All',      value: null},
            {label: 'Pending',  value: 'pending'},
            {label: 'Approved', value: 'approved'},
            {label: 'Rejected', value: 'rejected'},
        ] %}
        {% for f in filters %}
            <a href="{{ path('app_wfbo_deposits', {status: f.value, search: search}|filter(v => v is not null and v != '')) }}"
               class="filter-pill {% if currentStatus == f.value %}is-active{% endif %}"
               data-testid="filter-{{ f.label|lower }}">
                {{ f.label }}
                {% if f.value == 'pending' %}
                    <span class="filter-count-badge {% if currentStatus == 'pending' %}filter-count-badge--active{% else %}filter-count-badge--default{% endif %}">
                        {{ pendingCount }}
                    </span>
                {% endif %}
            </a>
        {% endfor %}
    </div>

    {# ── Total count + refresh ── #}
    <div class="d-flex align-items-center justify-content-between mb-3">
        <p class="pagination-info mb-0">
            {{ total }} deposit{{ total != 1 ? 's' : '' }}{{ currentStatus ? ' (' ~ currentStatus ~ ')' : '' }}
        </p>
        <a href="{{ path('app_wfbo_deposits', {page: currentPage, status: currentStatus, search: search, overdue: overdueParam}|filter(v => v is not null and v != '')) }}"
           class="btn btn-sm btn-outline-secondary" data-testid="btn-deposits-refresh">
            ↻ Refresh
        </a>
    </div>

    {# ── Table ── #}
    <div class="card table-card" data-testid="deposits-table-card">
        <div class="table-scroll">
            <table class="data-table" data-testid="deposits-table">
                <thead>
                    <tr class="thead-row--strong">
                        <th class="th-white">#</th>
                        <th class="th-white">User</th>
                        <th class="th-white">Amount</th>
                        <th class="th-white">Sent To</th>
                        <th class="th-white">Ref. No.</th>
                        <th class="th-white">Submitted</th>
                        <th class="th-white">Notes</th>
                        <th class="th-white">Status</th>
                        <th class="th-white">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for deposit in deposits %}
                        {% set paymentLabel  = deposit.paymentDetail ? deposit.paymentDetail.label|upper : '' %}
                        {% set paymentBank   = deposit.paymentDetail ? deposit.paymentDetail.bankName|upper : '' %}
                        {% if paymentLabel == 'GCASH' or paymentBank == 'GCASH' %}
                            {% set rowClass = 'table-row--gcash' %}
                        {% elseif paymentLabel == 'MAYA' or paymentBank == 'MAYA' %}
                            {% set rowClass = 'table-row--maya' %}
                        {% elseif paymentLabel == 'GOTYME' or paymentBank == 'GOTYME' %}
                            {% set rowClass = 'table-row--gotyme' %}
                        {% else %}
                            {% set rowClass = 'table-row--other' %}
                        {% endif %}
                    <tr class="table-row {{ rowClass }}{{ deposit.referenceFlagged ? ' table-row--flagged' : '' }}" data-testid="deposit-row-{{ deposit.id }}">

                        <td class="td-cell td-cell--id">{{ deposit.id }}</td>

                        <td class="td-cell">
                            <p class="fw-medium mb-0">
                                <a href="{{ path('app_wfbo_user_transactions', {id: deposit.user.id}) }}"
                                   style="color:inherit; text-decoration:underline; text-underline-offset:2px;"
                                   data-testid="link-deposit-user-{{ deposit.id }}">
                                    {{ deposit.user.firstName }} {{ deposit.user.lastName }}
                                </a>
                            </p>
                            <p class="text-muted mb-0">{{ deposit.user.userIdentifier }}</p>
                        </td>

                        <td class="td-cell td-cell--nowrap">
                            <p class="amount-primary">{{ deposit.amount|number_format(2) }}</p>
                            {% if deposit.approvedAmount is not null %}
                                <p class="amount-sub stat-value--green fw-semibold">
                                    Approved: {{ deposit.approvedAmount|number_format(2) }}
                                </p>
                            {% endif %}
                        </td>

                        <td class="td-cell td-cell--dark td-cell--nowrap">
                            {% if deposit.paymentDetail %}
                                <p class="fw-medium mb-0">{{ deposit.paymentDetail.label }}</p>
                                <p class="amount-sub text-muted mb-0">{{ deposit.paymentDetail.bankName }}</p>
                                <p class="amount-sub text-muted mb-0 font-mono-sm">{{ deposit.paymentDetail.accountNumber }}</p>
                            {% else %}
                                —
                            {% endif %}
                        </td>

                        <td class="td-cell td-cell--dark td-cell--nowrap font-mono-sm">
                            {{ deposit.transactionReference ?? '—' }}
                            {% if deposit.referenceFlagged %}
                                {# Near-duplicate of an earlier request's reference
                                   (e.g. one digit edited) - see DepositReferenceSimilarityService. #}
                                <div class="mt-1">
                                    <span class="badge-ref-flagged" title="Reference is 90%+ similar to another deposit's"
                                          data-testid="badge-ref-flagged-{{ deposit.id }}">⚠ Similar ref</span>
                                </div>
                                <details class="similar-refs" data-testid="similar-refs-{{ deposit.id }}"{% if deposit.status == 'pending' %} open{% endif %}>
                                    <summary>{{ deposit.similarReferenceMatches|length }} similar request{{ deposit.similarReferenceMatches|length > 1 ? 's' : '' }}</summary>
                                    <ul class="similar-refs__list">
                                        {% for match in deposit.similarReferenceMatches %}
                                            {% set other = similarDeposits[match.depositId] ?? null %}
                                            <li data-testid="similar-ref-{{ deposit.id }}-{{ match.depositId }}">
                                                <span class="similar-refs__pct">{{ (match.similarity * 100)|round(0, 'floor') }}%</span>
                                                #{{ match.depositId }}
                                                {% if other %}
                                                    · {{ _self.ref_diff(other.transactionReference, deposit.transactionReference) }}
                                                    <br>
                                                    <a href="{{ path('app_wfbo_user_transactions', {id: other.user.id}) }}"
                                                       style="color:inherit; text-decoration:underline;">{{ other.user.firstName }} {{ other.user.lastName }}</a>
                                                    · {{ other.amount|number_format(2) }}
                                                    · <span class="similar-refs__status similar-refs__status--{{ other.status }}">{{ other.status|capitalize }}</span>
                                                    · {{ other.createdAt|date('M d, H:i') }}
                                                {% else %}
                                                    <span class="text-muted">(no longer available)</span>
                                                {% endif %}
                                            </li>
                                        {% endfor %}
                                    </ul>
                                </details>
                            {% endif %}
                        </td>

                        <td class="td-cell td-cell--muted td-cell--nowrap">
                            {{ deposit.createdAt|date('M d, Y H:i') }}
                        </td>

                        <td class="td-cell td-cell--dark" style="max-width: 200px;">
                            {{ deposit.notes ?? '—' }}
                        </td>

                        <td class="td-cell">
                            {% if deposit.status == 'pending' %}
                                <span class="badge-status badge-status--pending"
                                      data-testid="badge-deposit-{{ deposit.id }}">Pending</span>
                            {% elseif deposit.status == 'approved' %}
                                <span class="badge-status badge-status--approved"
                                      data-testid="badge-deposit-{{ deposit.id }}">Approved</span>
                                {% set promo = promoByDepositId[deposit.id] ?? null %}
                                {% if promo %}
                                    <span class="badge-status" style="background:#fef3c7; color:#92400e;"
                                          title="{{ promo.campaign }}"
                                          data-testid="badge-deposit-promo-{{ deposit.id }}">Promo +₱{{ promo.amount|number_format(2) }}</span>
                                {% endif %}
                                {% if deposit.reviewNote %}
                                    <p class="amount-sub text-muted">{{ deposit.reviewNote }}</p>
                                {% endif %}
                            {% else %}
                                <span class="badge-status badge-status--rejected"
                                      data-testid="badge-deposit-{{ deposit.id }}">Rejected</span>
                                {% if deposit.reviewNote %}
                                    <p class="amount-sub text-muted">{{ deposit.reviewNote }}</p>
                                {% endif %}
                            {% endif %}
                        </td>

                        <td class="td-cell">
                            {% set reviewHandler = deposit.paymentDetail ? deposit.paymentDetail.financeHandler : null %}
                            {% set canReview = reviewHandler ? (reviewHandler.id == app.user.id) : is_granted('ROLE_ADMIN') %}
                            {% set canTransfer = is_granted('ROLE_ADMIN') %}
                            {% set currentPaymentDetailId = deposit.paymentDetail ? deposit.paymentDetail.id : null %}
                            {% if deposit.status == 'pending' and not canReview and not canTransfer %}
                                <p class="text-muted mb-0" data-testid="deposit-review-restricted-{{ deposit.id }}">
                                    {% if reviewHandler %}Assigned to {{ reviewHandler.firstName }} {{ reviewHandler.lastName }}
                                    {% else %}No handler assigned — admin only{% endif %}
                                </p>
                            {% elseif deposit.status == 'pending' %}
                                <div style="display: flex; flex-direction: column; gap: 8px; min-width: 220px;"
                                     data-controller="review-action">

                                    {% if canReview %}
                                    {# Approved amount override #}
                                    <input type="number"
                                           step="0.01" min="0.01"
                                           placeholder="Approved amount (optional)"
                                           class="table-input"
                                           data-review-action-target="amountInput"
                                           data-testid="input-approved-amount-{{ deposit.id }}">

                                    {# Review note #}
                                    <input type="text"
                                           placeholder="Review note (optional)"
                                           class="table-input"
                                           data-review-action-target="noteInput"
                                           data-testid="input-review-note-{{ deposit.id }}">

                                    <div class="d-flex gap-2">
                                        {# Approve #}
                                        <form method="post"
                                              action="{{ path('app_wfbo_deposit_action', {id: deposit.id, action: 'approve'}) }}"
                                              data-testid="form-approve-{{ deposit.id }}"
                                              data-turbo="false"
                                              data-no-loading
                                              data-action="submit->review-action#submitApprove">
                                            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_deposit_action_' ~ deposit.id) }}">
                                            <input type="hidden" name="reviewNote">
                                            <input type="hidden" name="approvedAmount">
                                            <button type="submit" class="btn btn-approve"
                                                    data-testid="btn-approve-{{ deposit.id }}">
                                                Approve
                                            </button>
                                        </form>

                                        {# Reject #}
                                        <form method="post"
                                              action="{{ path('app_wfbo_deposit_action', {id: deposit.id, action: 'reject'}) }}"
                                              data-testid="form-reject-{{ deposit.id }}"
                                              data-turbo="false"
                                              data-no-loading
                                              data-action="submit->review-action#submitReject">
                                            <input type="hidden" name="_token" value="{{ csrf_token('wfbo_deposit_action_' ~ deposit.id) }}">
                                            <input type="hidden" name="reviewNote">
                                            <button type="submit" class="btn btn-reject"
                                                    data-testid="btn-reject-{{ deposit.id }}">
                                                Reject
                                            </button>
                                        </form>
                                    </div>
                                    {% elseif reviewHandler %}
                                    {# Admin can Transfer even without being the review handler - keep the
                                       handler context visible since Approve/Reject are hidden here. #}
                                    <p class="text-muted mb-0 small" data-testid="deposit-review-restricted-{{ deposit.id }}">
                                        Assigned to {{ reviewHandler.firstName }} {{ reviewHandler.lastName }}
                                    </p>
                                    {% endif %}

                                    {% if canTransfer %}
                                    {# Transfer to another payment method's handler - admin only #}
                                    <form method="post"
                                          action="{{ path('app_wfbo_deposit_transfer', {id: deposit.id}) }}"
                                          data-testid="form-transfer-{{ deposit.id }}"
                                          data-turbo="false"
                                          onsubmit="return confirm('Transfer this deposit to the selected payment method?');"
                                          class="d-flex gap-2 align-items-center">
                                        <input type="hidden" name="_token" value="{{ csrf_token('wfbo_deposit_transfer_' ~ deposit.id) }}">
                                        <input type="hidden" name="page" value="{{ currentPage }}">
                                        <input type="hidden" name="status" value="{{ currentStatus }}">
                                        <select name="payment_detail_id" class="table-input" required
                                                data-testid="select-transfer-payment-detail-{{ deposit.id }}">
                                            <option value="">Transfer to…</option>
                                            {% for pd in paymentDetails %}
                                                {% if pd.id != currentPaymentDetailId %}
                                                    <option value="{{ pd.id }}">
                                                        {{ pd.label }} — {{ pd.financeHandler ? pd.financeHandler.firstName ~ ' ' ~ pd.financeHandler.lastName : 'Unassigned' }}
                                                    </option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                        <button type="submit" class="btn btn-secondary"
                                                data-testid="btn-transfer-{{ deposit.id }}">
                                            Transfer
                                        </button>
                                    </form>
                                    {% endif %}

                                    {% if deposit.transactionImagePath %}
                                        {% set ext = deposit.transactionImagePath|split('.')|last|lower %}
                                        {% if ext in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
                                            <button type="button"
                                                    class="btn-receipt-view"
                                                    onclick="openDepositImageModal('{{ deposit.transactionImagePath }}')"
                                                    data-testid="btn-view-transaction-image-{{ deposit.id }}">
                                                View Transaction
                                            </button>
                                        {% else %}
                                            <a href="{{ deposit.transactionImagePath }}"
                                               target="_blank" rel="noopener"
                                               class="btn-receipt-view"
                                               data-testid="btn-view-transaction-image-{{ deposit.id }}">
                                                View PDF
                                            </a>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            {% else %}
                                <div style="display: flex; flex-direction: column; gap: 6px;">
                                    <span class="td-cell--id" style="font-size: 12px;">
                                        {% if deposit.reviewedBy %}
                                            By {{ deposit.reviewedBy.firstName }}<br>
                                            {{ deposit.reviewedAt|date('M d, Y h:i A') }}
                                        {% else %}
                                            —
                                        {% endif %}
                                    </span>
                                    {% if deposit.transactionImagePath %}
                                        {% set ext = deposit.transactionImagePath|split('.')|last|lower %}
                                        {% if ext in ['jpg', 'jpeg', 'png', 'gif', 'webp'] %}
                                            <button type="button"
                                                    class="btn-receipt-view"
                                                    onclick="openDepositImageModal('{{ deposit.transactionImagePath }}')"
                                                    data-testid="btn-view-transaction-image-{{ deposit.id }}">
                                                View Transaction
                                            </button>
                                        {% else %}
                                            <a href="{{ deposit.transactionImagePath }}"
                                               target="_blank" rel="noopener"
                                               class="btn-receipt-view"
                                               data-testid="btn-view-transaction-image-{{ deposit.id }}">
                                                View PDF
                                            </a>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            {% endif %}
                        </td>

                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="td-empty">
                            No deposits found.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# Pagination #}
    {% if totalPages > 1 %}
    <div class="d-flex align-items-center justify-content-between mt-4" data-testid="deposits-pagination">
        <p class="pagination-info">Page {{ currentPage }} of {{ totalPages }}</p>
        <div class="d-flex gap-2">
            {% if currentPage > 1 %}
                <a href="{{ path('app_wfbo_deposits', {page: currentPage - 1, status: currentStatus, search: search, overdue: overdueParam}|filter(v => v is not null and v != '')) }}"
                   class="btn-page-prev">
                    ← Previous
                </a>
            {% endif %}
            {% if currentPage < totalPages %}
                <a href="{{ path('app_wfbo_deposits', {page: currentPage + 1, status: currentStatus, search: search, overdue: overdueParam}|filter(v => v is not null and v != '')) }}"
                   class="btn-page-next">
                    Next →
                </a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {# ── Transaction image popup modal ── #}
    <dialog id="deposit-image-modal" style="padding: 0; border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); max-width: 90vw; max-height: 90vh; background: #fff;">
        <div style="display: flex; flex-direction: column; max-width: 90vw; max-height: 90vh;">
            <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb;">
                <span style="font-weight: 600; font-size: 14px; color: #111827;">Transaction Image</span>
                <button type="button" onclick="document.getElementById('deposit-image-modal').close()"
                        style="background: none; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: #6b7280; padding: 0 4px;"
                        aria-label="Close">&times;</button>
            </div>
            <div style="overflow: auto; padding: 16px; display: flex; align-items: center; justify-content: center;">
                <img id="deposit-image-modal-img" src="" alt="Transaction Image" style="max-width: 100%; max-height: 70vh; border-radius: 6px; display: block;">
            </div>
        </div>
    </dialog>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
function openDepositImageModal(src) {
    document.getElementById('deposit-image-modal-img').src = src;
    document.getElementById('deposit-image-modal').showModal();
}
document.getElementById('deposit-image-modal').addEventListener('click', function(e) {
    if (e.target === this) this.close();
});
</script>
<style>
.btn-receipt-view {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn-receipt-view:hover { background: #e5e7eb; }
.table-row--flagged td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.badge-ref-flagged {
    display: inline-block;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}
.similar-refs { margin-top: 4px; font-size: 11px; white-space: normal; min-width: 220px; }
.similar-refs summary { cursor: pointer; color: #b91c1c; font-weight: 600; }
.similar-refs__list { list-style: none; padding: 0; margin: 4px 0 0; }
.similar-refs__list li { padding: 4px 0; border-top: 1px dashed #e5e7eb; line-height: 1.5; }
.similar-refs__pct { font-weight: 700; color: #b91c1c; }
.similar-refs__diff { background: #fecaca; color: #991b1b; font-weight: 700; border-radius: 2px; }
.similar-refs__status--approved { color: #047857; font-weight: 600; }
.similar-refs__status--rejected { color: #b91c1c; font-weight: 600; }
.similar-refs__status--pending  { color: #b45309; font-weight: 600; }
dialog::backdrop { background: rgba(0,0,0,0.5); }
</style>
{% endblock %}

{# Renders `ref`, highlighting each character that differs from `against` at
   the same position. Only meaningful for equal-length references (the typical
   "one digit edited" case); otherwise the reference is shown as-is. #}
{% macro ref_diff(ref, against) %}
    {%- if ref|length == against|length and ref|length > 0 -%}
        {%- for i in 0..(ref|length - 1) -%}
            {%- set c = ref|slice(i, 1) -%}
            {%- if c != against|slice(i, 1) -%}<span class="similar-refs__diff">{{ c }}</span>{%- else -%}{{ c }}{%- endif -%}
        {%- endfor -%}
    {%- else -%}
        {{ ref }}
    {%- endif -%}
{% endmacro %}