/* ============================================================================
   Completed Events report (/reports/completed-events, Acct-L role) — card list.
   Reuses sales.css pills/controls/chips/KPIs; only the event cards live here.
   Flat: solid surface + hairline border, no glass, no hover (nothing here is
   clickable). Breakpoints: mobile <768, tablet 768–1199, desktop ≥1200.
   ============================================================================ */

/* Hairline between the two control rows inside the filter card */
.ce-divider { height: 1px; background: var(--surface-border, #e9ecef); margin: .9rem 0; }

/* Search box gets the extra width; every control on the same 40px rhythm */
.sr-field.ce-search .form-control { width: 300px; }
.sr-field.ce-search .form-control::placeholder { font-size: .82rem; }

.ce-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* ---- Card list ---- */
.ce-list { display: flex; flex-direction: column; gap: .75rem; }
.ce-card {
    background: var(--surface-card, #fff); border: 1px solid var(--surface-border, #e9ecef);
    border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.04));
    padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .65rem; min-width: 0;
}
[data-theme="dark"] .ce-card { background: var(--surface-card, #23262a); border-color: rgba(255,255,255,.1); }

.ce-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; min-width: 0; }
.ce-who { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.ce-name { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.ce-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.ce-event { font-size: .82rem; color: var(--text-secondary, #6c757d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.ce-when { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--text-secondary, #6c757d); white-space: nowrap; margin-left: auto; }
.ce-when i { font-size: .9rem; }
.ce-dot { opacity: .6; }

.ce-tags { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Stat strip: label above value, right-aligned figures on a tabular grid */
.ce-stats {
    display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35rem .9rem;
    padding: .65rem 0 0; border-top: 1px solid var(--surface-border, #e9ecef);
}
.ce-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.ce-stat span { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary, #6c757d); white-space: nowrap; }
.ce-stat strong { font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ce-stat.total strong { font-size: 1.15rem; font-weight: 800; }
.ce-stat strong.sr-neg { color: #dc3545; }
.ce-stat strong.sr-dim { color: var(--text-secondary, #6c757d); font-weight: 500; }

/* Foot: payment methods, tips, register lines, Clover order — small, one rhythm */
.ce-foot { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .76rem; color: var(--text-secondary, #6c757d); }
.ce-foot:empty { display: none; }
.ce-foot-item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.ce-foot-item i { font-size: .85rem; }

.ce-more { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: .25rem 0 .5rem; }

/* ---- Breakpoints ---- */
@media (max-width: 767.98px) {
    .sr-field.ce-search .form-control { width: 100%; }
    .ce-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ce-card { padding: .85rem 1rem; gap: .55rem; }
    .ce-name { font-size: .95rem; }
    .ce-event { max-width: 100%; }
    .ce-when { margin-left: 0; width: 100%; font-size: .76rem; }
    .ce-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .75rem; }
    .ce-stat { align-items: flex-start; }
    .ce-stat span { font-size: .56rem; }
    .ce-stat strong { font-size: .88rem; }
    .ce-stat.total strong { font-size: 1.05rem; }
    .ce-foot { font-size: .7rem; gap: .25rem .8rem; }
    .ce-foot-item { white-space: normal; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .sr-field.ce-search .form-control { width: 240px; }
    .ce-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ce-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem 1rem; }
}

/* Labeled pill groups (Type / Payment / Clover): label stays visible, unlike .sr-field.actions */
.sr-field.ce-group > label { visibility: visible; }
@media (max-width: 767.98px) { .sr-field.ce-group { width: 100%; } }

/* Once the control row wraps (tablet / mobile) the preset pills sit on their own line —
   drop the invisible spacer label so they hug the date inputs instead of floating. */
@media (max-width: 1199.98px) { .ce-page .sr-field.actions > label { display: none; } }

/* Balance note: small italic under the figure — green for an overpayment, red when still due */
.ce-stat strong.sr-pos { color: #198754; }
.ce-stat .ce-note { font-size: .62rem; font-style: italic; color: #198754; line-height: 1.2; white-space: nowrap; }
.ce-stat .ce-note.due { color: #dc3545; }