/* Portal-specific styling on top of Bootstrap. Deliberately small: the less
   custom CSS there is, the less there is to keep working on a phone. */

.listing-table th a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.listing-table th a:hover {
    text-decoration: underline;
}

.listing-table td,
.listing-table th {
    vertical-align: middle;
}

/* Money reads far better right-aligned and in a tabular figure font, so
   columns of rupees line up digit for digit. */
.amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.amount-negative {
    color: var(--bs-danger);
}

.balance-tile {
    border-left: 4px solid var(--bs-primary);
}

.balance-tile .balance-value {
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.balance-tile.tile-funded {
    border-left-color: var(--bs-teal, #20c997);
}

.balance-tile.tile-event {
    border-left-color: var(--bs-orange, #fd7e14);
}

.overflow-warning {
    border-left: 4px solid var(--bs-warning);
}

/* On a phone the listing tables scroll sideways rather than squashing the
   money columns into an unreadable width. */
@media (max-width: 767.98px) {
    .table-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.login-card {
    max-width: 26rem;
    margin: 6vh auto;
}

@media print {
    .no-print { display: none !important; }
}