/* ============================================================
   Dashboard components that dashboard.css never defined.

   Two groups.

   1. **The frontend's vocabulary, aliased.** Fourteen dashboard pages were
      written with `.card` / `.card__header` / `.table` / `.input` — the
      *buyer site's* names. The dashboard's own are `.dc` / `.dc__header` /
      `.dt` / `.form-input`, so those pages lost every card, table and input
      style and rendered as bare headings and unboxed content. Aliased rather
      than renamed across fourteen files: both vocabularies now work, and a
      page written either way is styled.

   2. **Families that existed only in markup** — the door scoreboard, the
      automation modal, the ticket-type bars.

   Everything is built from the dashboard tokens in dashboard.css, so a tenant's
   accent colour flows through exactly as it does elsewhere.
   ============================================================ */

/* ── 1. Frontend vocabulary → dashboard equivalents ───────────────────────── */

.card {
  background: var(--bg-1);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid var(--bdr);
}

.card__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--tx);
}

.card__body { padding: 1.5rem; }

/* `.table` is the buyer site's name for what the dashboard calls `.dt`. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.table th,
.table td {
  text-align: left;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--bdr);
  vertical-align: top;
}
.table thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx3);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-2); }

.input,
input.input,
select.input,
textarea.input {
  width: 100%;
  font: inherit;
  font-size: .9rem;
  color: var(--tx);
  background: var(--bg-2);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: .55rem .75rem;
}
.input:focus-visible {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-tint);
}

.label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tx2);
  margin-bottom: .3rem;
}

/* The two button variants the buyer site has and the dashboard did not. */
.btn--outline {
  background: transparent;
  border: 1px solid var(--bdr);
  color: var(--tx);
}
.btn--outline:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }

.btn--ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--tx2);
}
.btn--ghost:hover:not(:disabled) { color: var(--acc); background: var(--bg-2); }

/* ── Small shared utilities ───────────────────────────────────────────────── */

.hidden { display: none; }
.muted { color: var(--tx3); }
.title { font-size: 1rem; font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* A monospace run — an id, a code, a key prefix. */
.m { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }

.toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 200;
  max-width: 22rem;
  padding: .8rem 1rem;
  font-size: .875rem;
  color: var(--tx);
  background: var(--bg-1);
  border: 1px solid var(--bdr);
  border-left: 3px solid var(--acc);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
.toast--success { border-left-color: var(--green); }
.toast--error { border-left-color: var(--red); }

/* ── 2. Door scoreboard ───────────────────────────────────────────────────────
   A screen read from across a room, so everything here is larger than the rest
   of the dashboard and the numbers carry the weight. */

.door-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
}

.door-card {
  background: var(--bg-1);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

.door-scoreboard {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  margin-bottom: 1.25rem;
}
.door-stat { text-align: center; }
.door-stat__value {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.door-stat__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-top: .15rem;
}
/* Arrival progress runs *towards* green — on this screen a full house is the
   goal, not a capacity warning. */
.door-stat__value.low { color: var(--tx2); }
.door-stat__value.mid { color: var(--amber); }
.door-stat__value.high { color: var(--green); }

.door-progress-bar-wrap { margin: 1rem 0 .25rem; }
.door-progress-bar-track {
  height: .9rem;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--bdr);
  overflow: hidden;
}
.door-progress-bar-fill {
  height: 100%;
  background: var(--green);
  transition: width .5s ease;
}
.door-progress-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--tx3);
  margin-top: .35rem;
}

.door-refresh-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  color: var(--tx3);
}
.live-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--green);
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Arrivals feed. */
.feed-item {
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: .55rem 0;
  border-bottom: 1px solid var(--bdr);
}
.feed-item:last-child { border-bottom: 0; }
.feed-avatar {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--acc-tint);
  color: var(--acc);
  font-weight: 700;
  font-size: .8rem;
}
.feed-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: .9rem; }
.feed-type { font-size: .8rem; color: var(--tx3); }
.feed-time { flex: 0 0 auto; font-size: .8rem; color: var(--tx3); font-variant-numeric: tabular-nums; }

/* Per-ticket-type breakdown. */
.type-row { margin-bottom: .85rem; }
.type-row:last-child { margin-bottom: 0; }
.type-bar-wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
  margin-bottom: .3rem;
}
.type-bar-track {
  height: .5rem;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--bdr);
  overflow: hidden;
}
.type-bar-fill { height: 100%; background: var(--acc); transition: width .4s ease; }

/* ── 3. Modal (automation rules) ──────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, .6);
}
.modal-box {
  width: 100%;
  max-width: 30rem;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  padding: 1.5rem;
}
.modal-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
.modal-field { margin-bottom: 1rem; }
.modal-hint { font-size: .78rem; color: var(--tx3); margin-top: .3rem; }
.modal-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.modal-row > * { flex: 1 1 10rem; }
.modal-toggle-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  margin-bottom: 1rem;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bdr);
}

/* ── 4. Odds and ends ─────────────────────────────────────────────────────── */

.qd-min-qty { width: 5.5rem; }

/* ── 5. Page headers and stat tiles (ballot) ──────────────────────────────────
   ballot.html carries no styles of its own, so its whole page chrome — header,
   stat tiles, table, warning — had nothing behind it. */

.page-header { margin-bottom: 1.5rem; }
.page-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-subtitle {
  font-size: .9rem;
  color: var(--tx3);
  margin-top: .2rem;
  max-width: 44rem;
}

.stat-card {
  background: var(--bg-1);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.stat-card__value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-card__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx3);
  margin-top: .15rem;
}

/* The buyer site's name for `.dt` / `.table`. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--bdr);
  vertical-align: top;
}
.data-table thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx3);
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: 0; }

/* dashboard.css has success/error/info but no warning. */
.alert--warning {
  background: var(--amber-tint);
  color: var(--amber);
  border: 1px solid var(--amber);
}

/* ── 6. Custom domain panel (cookery / settings) ──────────────────────────── */

.dom-card {
  background: var(--bg-1);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.dom-status {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .2rem .6rem;
  background: var(--bg-2);
  color: var(--tx3);
  border: 1px solid var(--bdr);
}
.dom-status.active { background: var(--green-tint); color: var(--green); border-color: var(--green); }
.dom-methods { display: grid; gap: .75rem; margin: 1rem 0; }
.dom-method {
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: .85rem 1rem;
}
.dom-recs {
  display: grid;
  gap: .4rem;
  margin-top: .6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  overflow-x: auto;
}
.dom-note { font-size: .8rem; color: var(--tx3); margin-top: .5rem; }
.dom-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
/* Shown when the plan does not include a custom domain. */
.dom-upsell {
  background: var(--acc-tint);
  border: 1px solid var(--acc);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  font-size: .875rem;
}

.ck-card {
  background: var(--bg-1);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.ck-session__what { font-weight: 600; }

/* ── 7. Small per-page bits ───────────────────────────────────────────────── */

/* Row-selection checkboxes, sized to be hit without aiming. */
.row-check,
.wh-evt-cb,
.pm-cb { width: 1rem; height: 1rem; accent-color: var(--acc); cursor: pointer; }

.expandable-row { cursor: pointer; }
.expandable-row:hover { background: var(--bg-2); }

/* Key/value rows inside a compact panel. */
.row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.k { color: var(--tx3); }

.tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: .15rem .55rem;
  background: var(--bg-2);
  color: var(--tx2);
  border: 1px solid var(--bdr);
}
.tag--info { background: var(--acc-tint); color: var(--acc); border-color: var(--acc); }

/* Seating editor modal — its own names for the shared modal shapes. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, .6);
}
.modal-card {
  width: 100%;
  max-width: 28rem;
  background: var(--bg-1);
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  padding: 1.5rem;
}

/* Attendee-field and quantity-discount editors (event-edit). */
.af-label { flex: 1 1 12rem; }
.af-type { flex: 0 0 9rem; }
.af-req { display: flex; align-items: center; gap: .35rem; font-size: .8rem; white-space: nowrap; }
.qd-type { flex: 0 0 9rem; }
.qd-value { flex: 0 0 7rem; }

/* Day-of-week toggles in the occurrence generator. */
.gen-dow {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  padding: .3rem .55rem;
  border: 1px solid var(--bdr);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Per-ticket-type promo scoping. */
.promo-tt { display: flex; align-items: center; gap: .4rem; font-size: .85rem; padding: .2rem 0; }

/* ── 8. Token aliases ─────────────────────────────────────────────────────────
   Forty `var(--…)` references across the dashboard name tokens that do not
   exist here: mostly the *buyer site's* vocabulary (`--color-text-muted`,
   `--color-border`, `--color-bg-alt`), plus a handful of shorthands and
   near-misses. Each resolved to nothing, so a border did not draw or a muted
   label took whatever colour it inherited.

   Aliased rather than rewritten across thirty-three files, and declared on
   `:root` so they follow the tenant's accent exactly as the originals do. */
:root {
  /* the buyer site's names */
  --color-text: var(--tx);
  --color-text-muted: var(--tx3);
  --color-border: var(--bdr);
  --color-bg-alt: var(--bg-2);
  --color-primary: var(--acc);
  --color-error: var(--red);

  /* shorthands and near-misses */
  --accent: var(--acc);
  --muted: var(--tx3);
  --text-muted: var(--tx3);
  --border: var(--bdr);
  --err: var(--red);
  --tx1: var(--tx);
  --bg-3: var(--bg-2);
  --yellow: var(--amber);
  --r: var(--radius);
}