/* The event page: header, the six key numbers, charts, alerts.
   Colors come from the variables in app.css; nothing is defined here. */

/* ── Event header ── */
.event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.event-where { overflow-wrap: anywhere; min-width: 0; }
.event-where::before { content: "at "; }

/* ── The six key numbers ── */
.stats-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) {
  .stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stats-6 .stat-value { font-size: 1.4rem; }
}
@media (max-width: 420px) {
  .stats-6 { gap: 0.5rem; }
  .stats-6 .stat { padding: 0.7rem 0.75rem; }
}
.card > .stats { margin-top: 0.75rem; }
.card .stat { background: var(--surface-2); }

/* ── Alerts ── */
.alerts { margin: 0.5rem 0 0.75rem; padding: 0; list-style: none; }
.alerts li {
  padding: 0.7rem 0.9rem; margin: 0 0 0.5rem;
  background: var(--warn-bg); color: var(--warn-text);
  border-left: 4px solid var(--warn-text); border-radius: var(--radius);
}
.alerts a { color: inherit; font-weight: 600; display: inline-block; padding: 0.6rem 0; margin: -0.6rem 0; }

/* ── Chart: bars drawn with CSS ── */
.chart-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.5rem; }
@media (min-width: 1000px) { .chart-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart { margin: 0.75rem 0 0.5rem; min-width: 0; }
.chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.1rem 1rem; margin-bottom: 0.4rem; }
.chart-title { font-weight: 600; }
/* A long run of days scrolls inside this box, never the page. */
.chart-scroll { overflow-x: auto; }
.chart-plot {
  position: relative; display: flex; align-items: stretch; gap: 2px;
  height: 10rem;
  border-bottom: 1px solid var(--border-strong);
}
.chart-plot.is-dense { gap: 1px; }
.chart-col { flex: 1 0 3px; min-width: 0; display: flex; align-items: flex-end; }
.chart-plot.is-dense .chart-col { flex-basis: 2px; }
.chart-bar { display: block; width: 100%; max-width: 3rem; margin: 0 auto; min-height: 2px; background: var(--info-text); border-radius: 4px 4px 0 0; }
.chart-plot.is-dense .chart-bar { border-radius: 2px 2px 0 0; }
.chart-bar.is-zero { min-height: 0; }
.chart-total .chart-bar { background: var(--border-strong); max-width: none; }
.chart-col.is-on { background: var(--surface-2); }
.chart-col.is-on .chart-bar { background: var(--text); }
/* The goal: a dashed line across the plot, labelled in words. */
.chart-goal { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--ok-text); pointer-events: none; }
.chart-goal span {
  position: absolute; right: 0; bottom: 2px; padding: 0 0.35rem;
  font-size: 0.82rem; font-weight: 600; color: var(--ok-text); background: var(--surface); border-radius: 4px;
}
.chart-axis { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.25rem; }
.chart-readout { min-height: 1.4rem; margin: 0.25rem 0 0; }
.chart-table[hidden] { display: none; }

/* Tickets or Revenue: the pressed one is filled. */
.seg .btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ── Share of revenue in a table cell ── */
.share { display: block; min-width: 6rem; }
.share-num { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .share { min-width: 0; text-align: right; }
  .share .bar-track { margin-left: auto; }
}

/* Links in table cells: a full 44px to tap. */
.panel .data td a:not(.btn) { padding: 0.7rem 0; margin: -0.7rem 0; }

/* A control that is shown but not built yet. */
.btn:disabled { cursor: not-allowed; }

/* The type of event, a small label in the event header. */
.event-type {
  padding: 0.1rem 0.55rem; font-size: 0.85rem; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; overflow-wrap: anywhere; min-width: 0;
}