/* ============================================================================
   Online Payments report (/reports/online-payments) — is Clover online checkout
   working, and did each deposit link / web reservation payment go through.
   Reuses sales.css controls/chips/KPIs and the completed-events.css card list;
   only the health card and status tones live here.
   Breakpoints: mobile <768, tablet 768–1199, desktop ≥1200.
   ============================================================================ */

.op-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.op-kpis .op-warn { color: #b7791f; }

.op-note {
    display: flex; align-items: flex-start; gap: .45rem; margin: .85rem 0 0;
    font-size: .76rem; color: var(--text-secondary, #6c757d);
}
.op-note i { font-size: .85rem; margin-top: .05rem; }
.op-note.bad { color: #dc3545; }

/* Checkout health card: the "is Clover checkout working?" answer, above the filters */
.op-health { border-left: 4px solid var(--surface-border, #ced4da); }
.op-health.op-good { border-left-color: #198754; }
.op-health.op-bad { border-left-color: #dc3545; }
.op-health-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.op-health-title { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.op-health-title strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.op-health-title span { display: block; font-size: .8rem; color: var(--text-secondary, #6c757d); }
.op-health-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .4rem; flex: none; background: #adb5bd; }
.op-good .op-health-dot { background: #198754; }
.op-bad .op-health-dot { background: #dc3545; }
.op-health-head .sr-btn { margin-left: auto; }
.op-health-facts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem 1rem;
    margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--surface-border, #e9ecef);
}
.op-health-facts .ce-stat { align-items: flex-start; }
.op-health-facts .ce-stat strong.sr-pos { color: #198754; }

/* Left accent carries the result so a scan down the list reads paid / not paid */
.op-card { border-left-width: 4px; }
.op-card.op-good { border-left-color: #198754; }
.op-card.op-bad { border-left-color: #dc3545; }
.op-card.op-warn { border-left-color: #f0ad4e; }
.op-card.op-other { border-left-color: #6f42c1; }
.op-card.op-muted { border-left-color: var(--surface-border, #ced4da); }

.sr-chip.op-status.warn { background: rgba(240,173,78,.16); color: #a8660b; }
.sr-chip.op-status.muted { background: rgba(108,117,125,.12); color: var(--text-secondary, #6c757d); }
[data-theme="dark"] .sr-chip.op-status.warn { color: #f0ad4e; }
/* Paid another way (phone / terminal): purple, distinct from paid-online green */
.sr-chip.op-status.other { background: rgba(111,66,193,.12); color: #6f42c1; }
[data-theme="dark"] .sr-chip.op-status.other { color: #b69cf0; }
.op-other, .ce-stat strong.op-other { color: #6f42c1; }
[data-theme="dark"] .op-other, [data-theme="dark"] .ce-stat strong.op-other { color: #b69cf0; }

.ce-foot-item.op-error { color: #dc3545; white-space: normal; }

/* Event code is a link to ManageEvent — the only clickable thing on the card */
a.op-code { text-decoration: none; color: inherit; transition: background-color .15s ease; }
a.op-code:hover { background: rgba(108,117,125,.22); }

.op-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.op-stats .ce-stat strong.sr-pos { color: #198754; }

@media (max-width: 767.98px) {
    .op-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .op-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .op-health-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .op-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .op-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}