/* The ticket sales show page: KPI tiles, floor bars and the sections matrix.
   Every rule is prefixed ticket-sales-, since the layout loads every
   stylesheet, and only the shared variables of application.css are used. */

.ticket-sales-tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.ticket-sales-tile {
  min-width: 8.5rem;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-variant-numeric: tabular-nums;
}
.ticket-sales-tile strong { display: block; font-size: 1.3rem; }
.ticket-sales-tile-all { border-color: var(--border); background: var(--surface-badge); }
.ticket-sales-tile-addon { border-style: dashed; color: var(--muted); }
.ticket-sales-tile-addon strong { color: var(--text); }

.ticket-sales-bars { margin: 0 0 1.5rem; padding: 0; max-width: 40rem; }
.ticket-sales-bar { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.4rem; }
.ticket-sales-bar dt { margin: 0; }
.ticket-sales-bar dd { margin: 0; display: flex; align-items: center; gap: 0.75rem; }
.ticket-sales-bar-track { position: relative; flex: 1; height: 1rem; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ticket-sales-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--text); }
.ticket-sales-bar-attended { position: absolute; inset: 0 auto 0 0; background: var(--ok); opacity: 0.85; }
.ticket-sales-bar-value { white-space: nowrap; font-variant-numeric: tabular-nums; }

.ticket-sales-matrix-wrap { overflow-x: auto; margin: 0 0 1rem; }
.ticket-sales-matrix { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ticket-sales-matrix th.ticket-sales-floor { text-align: center; border-left: 1px solid var(--border); }
.ticket-sales-matrix thead tr:last-child th { text-align: right; }
.ticket-sales-matrix tbody th, .ticket-sales-matrix tfoot th { text-align: left; font-size: inherit; text-transform: none; letter-spacing: 0; color: var(--text); }
.ticket-sales-matrix tfoot th, .ticket-sales-matrix tfoot td { font-weight: 600; }
.ticket-sales-zero { color: var(--muted); }

.ticket-sales-note { color: var(--muted); }
.ticket-sales-preliminary { border-left: 3px solid var(--warning-border); padding-left: 0.75rem; }
.ticket-sales-raw summary { min-height: 44px; cursor: pointer; font-weight: 600; margin: 1rem 0; }

@media (max-width: 40rem) {
  .ticket-sales-tile { min-width: calc(50% - 0.375rem); }
  .ticket-sales-bar { grid-template-columns: 1fr; gap: 0.1rem; }
}

.ticket-sales-bar dd { min-width: 0; flex-wrap: wrap; }
.ticket-sales-bar-track { min-width: 4rem; }
.ticket-sales-bar-value { white-space: normal; }