.letter-avatar {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #e8edff;
    color: #131f67;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}
/* =========================================================
   RESPONSIVE TABLES
   Convert Bootstrap / MatDash tables into cards on mobile
   ========================================================= */

@media (max-width: 767.98px) {

    /* Table becomes block layout */
    .table {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    /* Hide normal table headers */
    .table thead {
        display: none;
    }

    .table tbody {
        display: block;
        width: 100%;
    }

    /* Each row becomes a card */
    .table tbody tr {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-bottom: 15px;
        padding: 12px 15px;

        border: 1px solid var(--bs-border-color, #e5e5e5);
        border-radius: 10px;

        background: var(--bs-body-bg, #fff);
        box-sizing: border-box;
    }

    /* Each cell becomes a row inside the card */
    .table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100% !important;
        max-width: 100%;
        padding: 9px 0 !important;

        border: 0 !important;
        border-bottom: 1px solid var(--bs-border-color, #eeeeee) !important;

        white-space: normal !important;
        text-align: right;
        gap: 15px;
        box-sizing: border-box;
    }

    .table tbody td:last-child {
        border-bottom: 0 !important;
    }

    /* Label on left */
    .table tbody td::before {
        content: attr(data-label);

        flex: 0 0 42%;
        max-width: 42%;

        font-weight: 600;
        text-align: left;
        color: var(--bs-heading-color, #2a3547);
    }

    /* Prevent content from overflowing screen */
    .table tbody td > * {
        max-width: 58%;
        overflow-wrap: anywhere;
    }

    /* Kill Bootstrap nowrap */
    .table.text-nowrap,
    .table.text-nowrap td {
        white-space: normal !important;
    }

    /* Prevent parent responsive wrapper from causing horizontal scroll */
    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: visible !important;
    }
}
/* Fundraiser: sidebar removed - use full page width (no reserved left space) */
body.nf-no-sidebar .page-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}