/*
 * Created Date/By: 2026-10-02 / OpenAI for Jonathan Kilburn
 * Description: Consistent receipt badges, financial cards and payment-history controls.
 * PURPOSE: Extend the approved Nimble surface system without replacing source templates.
 * NOTES: Text/icons accompany colors. Hidden controls remain controlled by server permissions.
 */
.payment-badge {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    border-radius: 999px; padding: .32rem .65rem; font-size: .75rem;
    font-weight: 650; line-height: 1.35; border: 1px solid transparent;
}
.payment-paid_in_full { background: #def6eb; color: #006b48; border-color: #b4e7d1; }
.payment-partial { background: #fff1d5; color: #825000; border-color: #efd299; }
.payment-unpaid { background: #ffe5e9; color: #a20b2d; border-color: #f5bac5; }
.payment-not_applicable, .payment-no_payment_due, .payment-unavailable {
    background: #edf1f5; color: #46576b; border-color: #cdd7e0;
}
.payment-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin: .9rem 0; font-size: .8rem; }
.recent-card > .payment-legend { padding: 0 14px; margin-bottom: 0; }
.payment-filter { min-width: 195px; color: var(--portal-muted); font-size: .75rem; }
.payment-filter select { margin-top: .2rem; }
.payment-metrics { margin-bottom: 12px; }
.metric-amount_due { --metric-color: #008254; --metric-tint: #dff7eb; }
.metric-amount_paid { --metric-color: #086bd9; --metric-tint: #e3efff; }
.metric-orders_paid { --metric-color: #7832ce; --metric-tint: #f0e6ff; }
.metric-orders_unpaid { --metric-color: #bc5c00; --metric-tint: #fff0df; }
.payment-metrics .metric-card { border-left: 4px solid var(--metric-color); }
.payment-metrics .dashboard-icon { color: var(--metric-color); background: var(--metric-tint); }
.payment-metrics .metric-sparkline { color: var(--metric-color); width: 95px; min-width: 50px; }
.payment-metrics .metric-value { font-size: clamp(1.15rem, 1.6vw, 1.85rem); overflow-wrap: anywhere; }
.payment-metrics .metric-top > div { min-width: 0; }
.dashboard-recent-payments { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.dashboard-recent-payments .recent-card:first-child table { min-width: 800px; }
.payment-panel { margin-bottom: 22px; }
.payment-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.payment-panel-heading h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.payment-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.payment-summary-grid > div { background: #f1f6ff; border: 1px solid var(--portal-border); padding: 16px; border-radius: 12px; }
.payment-summary-grid > div > span:first-child { display: block; color: #526b86; font-size: .8rem; margin-bottom: 8px; }
.payment-summary-grid strong { display: block; font-size: 1.35rem; color: #153c65; overflow-wrap: anywhere; }
.payment-summary-grid .payment-badge { display: inline-flex; }
.payment-pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; font-size: .85rem; }
.payment-pager > span { margin-right: auto; }
.payment-entry { border-top: 1px solid var(--portal-border); padding-top: 16px; margin-top: 18px; }
.payment-entry > summary { font-weight: 650; color: #1755a1; cursor: pointer; }
.payment-history-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--portal-border); border-radius: 10px; }
#content .payment-history-scroll th { position: sticky; top: 0; z-index: 1; }
@media (max-width: 1200px) {
    .dashboard-recent-payments { grid-template-columns: 1fr; }
    .payment-metrics .metric-sparkline { width: 76px; }
}
@media (max-width: 700px) {
    .payment-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .payment-filter { min-width: 0; width: 100%; }
}
@media (max-width: 420px) {
    .payment-summary-grid { grid-template-columns: 1fr; }
}