/* ---------------------------------------------------------------------------
   Ticket hub - public listing and admin console
   Loaded after styles.css, whose variables and button/field classes it reuses.
   --------------------------------------------------------------------------- */

/* --- public hub ------------------------------------------------------------ */

.hub-note {
  margin-bottom: 22px;
}

.ticket-month {
  margin: 30px 0 12px;
}

.ticket-month:first-child {
  margin-top: 8px;
}

.ticket-list {
  display: grid;
  gap: 10px;
}

.ticket-card {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.ticket-card.is-full {
  background: var(--surface-2);
}

.ticket-when {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ticket-date {
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.ticket-time,
.ticket-rel {
  font-size: 12.5px;
  color: var(--text-faint);
}

.ticket-heading h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.015em;
}

.ticket-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
}

.ticket-venue {
  font-size: 12.5px;
  color: var(--text-faint);
}

.ticket-avail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.ticket-count strong {
  color: var(--text);
  font-size: 15px;
}

.ticket-count.is-none strong {
  color: var(--text-faint);
}

/* Pending is the number that changes someone's mind, so it is not grey. */
.ticket-pending {
  color: var(--accent);
  font-size: 12.5px;
}

.ticket-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.ticket-action .btn {
  white-space: nowrap;
}

.ticket-modal-when {
  margin: -4px 0 18px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.ticket-request-form .field:last-of-type {
  margin-bottom: 4px;
}

@media (max-width: 620px) {
  .ticket-card {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ticket-when {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .ticket-action .btn {
    width: 100%;
  }
}

/* --- pills ----------------------------------------------------------------- */

.pill-league,
.pill-sports {
  background: var(--accent-soft);
  color: var(--accent);
}

.pill-suite,
.pill-special {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.pill-shown,
.pill-approved,
.pill-confirmed,
.pill-new {
  background: var(--success-soft);
  color: var(--success);
}

.pill-hidden,
.pill-declined,
.pill-released,
.pill-unchanged {
  background: var(--surface-2);
  color: var(--text-faint);
  border: 1px solid var(--border);
}

.pill-pending,
.pill-tentative,
.pill-partial,
.pill-update {
  background: var(--accent-soft);
  color: var(--accent);
}

.pill-promised,
.pill-team {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.pill-client {
  background: var(--accent-soft);
  color: var(--accent);
}

/* --- admin tabs ------------------------------------------------------------ */

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.tab:hover {
  color: var(--text);
}

.tab.is-active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
}

.chip {
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* --- queue ----------------------------------------------------------------- */

.queue-list {
  display: grid;
  gap: 10px;
}

.queue-card {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* A decision is waiting on you, so it should not look like the archive. */
.queue-card.is-pending {
  border-left: 3px solid var(--accent);
}

.queue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.queue-head h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.queue-head p {
  margin: 2px 0 0;
}

.queue-event {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.queue-note {
  margin: 8px 0 0;
  padding: 9px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--text-muted);
}

.queue-note.is-decision {
  background: var(--accent-soft);
  color: var(--accent);
}

.queue-decide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.queue-buttons {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.inline-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.qty-input {
  width: 66px;
  padding: 7px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.decide-note {
  flex: 1;
  min-width: 170px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}

/* --- tables ---------------------------------------------------------------- */

.admin-table tr.is-archived td,
.admin-table tr.is-muted td {
  opacity: 0.55;
}

.admin-table .cell-sub.is-warning {
  color: var(--danger);
}

.admin-table td .cell-sub {
  display: block;
}

.is-none {
  color: var(--text-faint);
}

/* --- event dialog ---------------------------------------------------------- */

.modal-wide {
  max-width: 760px;
}

.event-counts {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.count-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.count-box strong {
  font-size: 20px;
  letter-spacing: -0.02em;
}

.count-box span {
  font-size: 12px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.count-box.is-none strong {
  color: var(--text-faint);
}

.event-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

/* Fields that carry a sentence rather than a value get the full width. */
.event-form .field:has(textarea),
.event-form .check-field,
.event-form .field-error,
.event-form .actions {
  grid-column: 1 / -1;
}

/* Help text of different lengths would otherwise leave the two columns'
   inputs at different heights. Pushing each input to the bottom of its grid
   cell lines them up across the row whatever the label above it says. */
.event-form .field {
  display: flex;
  flex-direction: column;
}

.event-form .field > input,
.event-form .field > select,
.event-form .field > textarea {
  margin-top: auto;
}

.check-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  cursor: pointer;
}

.check-field input {
  margin-top: 3px;
  flex: none;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.check-label {
  display: block;
  font-size: 14px;
  font-weight: 550;
}

.check-field .field-help {
  margin: 1px 0 0;
}

.event-ledger {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.event-ledger h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.mini-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mini-ledger li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 13.5px;
}

.mini-qty {
  min-width: 26px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.mini-ledger .pill {
  margin-left: auto;
}

/* --- import ---------------------------------------------------------------- */

.import-options {
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
}

.import-preview {
  margin-top: 18px;
}

.import-summary {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.import-warning {
  margin: 0 0 8px;
  padding: 9px 12px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  color: var(--accent);
  font-size: 13px;
}

/* --- settings -------------------------------------------------------------- */

.settings-panel {
  max-width: 560px;
}

.settings-panel .form-card-panel {
  padding: 22px 24px;
}

@media (max-width: 620px) {
  .event-form {
    grid-template-columns: 1fr;
  }
  .queue-buttons {
    margin-left: 0;
    width: 100%;
  }
  .queue-buttons .btn {
    flex: 1;
  }
}

/* --- compact buttons ------------------------------------------------------- */

/* The console puts buttons inside table rows and card footers, where the 15px
   default is too tall. Not .btn-inline, which styles.css defines as an
   underlined text link rather than a button. */
.btn-sm {
  font-size: 13.5px;
  padding: 8px 15px;
}

/* Eight columns do not fit a laptop half-screen. Scrolling the table beats
   wrapping every event name onto three lines. .table-wrap already clips. */
.table-wrap .admin-table {
  min-width: 700px;
}

/* A visible secondary button.
   styles.css's .btn-ghost is borderless and hovers red, because in the forms
   app it is always Cancel or Remove. "Ask anyway" and "Paste from Excel" are
   neither: they need to look pressable without reading as destructive. */
.btn-outline {
  background: var(--surface);
  color: var(--text-muted);
  border-color: var(--border-strong);
}

.btn-outline:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-outline:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The sport badge. Distinct from the team badge next to it, so "Hockey" and
   "Avalanche" read as two facts rather than one repeated. */
.pill-sport {
  background: var(--accent);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .pill-sport {
    color: #17150f;
  }
}

.ticket-modal-tags {
  margin: -6px 0 12px;
}