/* Events: lists, calendar, check-in code and QR, staff console.
   Only classes prefixed "events-" live here; everything else is app.css. */

.events-cards { list-style: none; padding: 0; margin: 0; }
.events-card { display: flex; flex-direction: column; gap: var(--sp-2); height: 100%; }
.events-date { font-size: .84rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

.events-calendar table { table-layout: fixed; width: 100%; }
.events-calendar td { vertical-align: top; height: 6.5rem; padding: var(--sp-2); }
.events-calendar .events-outside { color: var(--text-faint); background: var(--surface-sunken, transparent); }
.events-calendar .events-today .events-daynum { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.events-daynum { display: block; font-size: .84rem; margin-bottom: var(--sp-1); }
.events-cal-item { display: block; font-size: .8rem; line-height: 1.3; margin-bottom: var(--sp-1); overflow-wrap: anywhere; }
.events-cal-canceled { text-decoration: line-through; }
@media (max-width: 720px) {
  .events-calendar td { height: auto; min-width: 5.5rem; }
}

.events-checkin { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.events-qr { width: 168px; max-width: 100%; background: #fff; padding: var(--sp-1); border-radius: var(--radius); border: 1px solid var(--border); }
.events-qr svg { display: block; width: 100%; height: auto; }
.events-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .12em; margin: var(--sp-1) 0; }

.events-actions { flex-wrap: wrap; gap: var(--sp-2); }
.events-actions form, .events-inline { display: inline; margin: 0; }
.events-cancel { max-width: 40rem; }
.events-filter { align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
.events-filter .field { margin-bottom: 0; }
.events-split { align-items: flex-start; }