/* The event door (door.js, API migration 0168): the scan stage in its
   booking state (bookings.css), a ticket per card, the count readable at
   arm's length, Admit as the one big action.

   One left edge: the stage's content sits at the same inset as the manual
   field's below it (the stage's border is the strong one, the field's the
   default one, so the padding makes up the difference), and every ticket
   keeps one even padding and one even gap between its rows. */

.pt-stage .dr-door {
  gap: var(--tud-space-5);
  padding: calc(var(--tud-space-6) + var(--tud-border-default) - var(--tud-border-strong));
}
.dr-who { display: grid; gap: var(--tud-space-1); }
.dr-who-name { margin: 0; font-size: clamp(30px, 5vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.dr-who-sub { margin: 0; font-size: 17px; font-weight: 600; color: var(--tud-color-text-secondary); }
.dr-none { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; }

/* Admit everyone: the one primary action when a Pass holds two or more paid tickets */
.dr-everyone { display: grid; width: 100%; }
.dr-everyone .btn { width: 100%; min-height: 56px; font-size: 19px; }
#dr-everyone-status { margin: 0; }

.dr-tickets { display: grid; gap: var(--tud-space-3); width: 100%; margin: 0; padding: 0; list-style: none; }
.dr-ticket {
  display: grid; gap: var(--tud-space-3); padding: var(--tud-space-5);
  border: var(--tud-border-default) solid var(--tud-color-border-strong); border-radius: var(--tud-radius-md);
  background: var(--tud-color-bg-canvas);
}
.dr-ticket > * { margin: 0; }
.dr-ticket[data-state="admissible"] { border-color: var(--tud-color-status-success-text); }
.dr-ticket[data-state="unpaid"], .dr-ticket[data-state="cancelled"], .dr-ticket[data-state="balance_due"] { border-color: var(--tud-color-status-error-text); }
.dr-ticket-title { font-size: 20px; line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
/* TEST and the state together, in one row under the title, on every ticket */
.dr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tud-space-2); margin-top: calc(-1 * var(--tud-space-1)); }
.dr-chips:empty { display: none; }
.dr-ticket-what { display: flex; flex-wrap: wrap; gap: var(--tud-space-1) var(--tud-space-3); font-size: 17px; font-weight: 600; }
.dr-ticket-when { color: var(--tud-color-text-muted); }
.dr-count { font-size: 18px; font-weight: 600; line-height: 1; }
.dr-count b { font-size: clamp(34px, 6vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.dr-say { font-size: 16px; font-weight: 700; color: var(--tud-color-status-error-text); }
.dr-ticket[data-state="not_today"] .dr-say, .dr-ticket[data-state="ended"] .dr-say { color: var(--tud-color-text-secondary); }
.dr-acts { display: flex; flex-wrap: wrap; gap: var(--tud-space-3); }
.dr-acts .btn { flex: 1 1 0; min-height: 52px; padding-inline: var(--tud-space-6); font-size: 18px; }
.dr-history { font-size: 14px; color: var(--tud-color-text-muted); }
/* the booking code is the last line of every ticket, in one style */
.dr-ticket-foot { display: flex; align-items: baseline; gap: var(--tud-space-3); font-size: 14px; color: var(--tud-color-text-muted); }
.dr-status:empty { display: none; }
/* "2 admitted" is read out, not shown: the count above already says it */
.dr-status.is-success { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* door logins, under the scan stage, for the owner */
#pt-door-staff:empty { display: none; }
#pt-door-staff { margin-top: var(--tud-space-6); }
.dr-staff { display: grid; gap: var(--tud-space-4); max-width: 640px; border: var(--tud-border-hairline) solid var(--tud-color-border-default); border-radius: var(--tud-radius-md); background: var(--tud-color-bg-surface); }
.dr-staff-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.dr-staff-row { display: flex; align-items: center; justify-content: space-between; gap: var(--tud-space-3); padding: var(--tud-space-3) 0; border-top: var(--tud-border-hairline) solid var(--tud-color-border-default); }
.dr-staff-row:first-child { border-top: 0; padding-top: 0; }
.dr-staff-who { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.dr-staff-acts { display: flex; gap: var(--tud-space-2); flex-wrap: wrap; }
.dr-staff-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: end; gap: var(--tud-space-3); }
@media (max-width: 599px) {
  .dr-staff-form { grid-template-columns: minmax(0, 1fr); }
}
/* On a phone, the same grid as the manual field below: inset, and buttons
   that keep the whole line (portal.css .pt-manual at 720px). */
@media (max-width: 720px) {
  .pt-stage .dr-door { padding: calc(var(--tud-space-5) + var(--tud-border-default) - var(--tud-border-strong)); }
  .dr-acts .btn, .dr-door .bk-scan-acts .btn { flex: 1 1 100%; }
  .dr-door .bk-scan-acts { width: 100%; }
}

/* Ops only (Admin "Open portal"): the switch that makes test tickets follow the real date */
.dr-ops-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tud-space-3); margin-top: var(--tud-space-4); }
.dr-ops-row .sh-switch-label { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--tud-color-text-primary); }

/* The event door with no signal (door-offline.js): one quiet line under the
   code field, a dot for its state, and the admits a sync could not record. */
.dr-offline {
  display: flex; align-items: center; gap: var(--tud-space-2); margin: var(--tud-space-3) 0 0;
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--tud-color-text-muted);
}
.dr-offline::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tud-color-text-muted);
}
.dr-offline[data-tone="ready"]::before { background: var(--tud-color-status-success-text); }
.dr-offline[data-tone="off"] { color: var(--tud-color-text-primary); }
.dr-offline[data-tone="off"]::before { background: var(--tud-color-status-warning-text); }
.dr-offline.hidden { display: none; }
.dr-conflicts {
  display: grid; gap: var(--tud-space-3); margin-top: var(--tud-space-4); padding: var(--tud-space-5);
  border: var(--tud-border-default) solid var(--tud-color-status-error-text); border-radius: var(--tud-radius-md);
  background: var(--tud-color-bg-canvas);
}
.dr-conflicts > * { margin: 0; }
.dr-conflicts-title { font-size: 17px; font-weight: 800; color: var(--tud-color-status-error-text); }
.dr-conflicts-list { display: grid; gap: var(--tud-space-2); padding: 0; list-style: none; font-size: 15px; font-weight: 600; line-height: 1.4; }
.dr-conflicts-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tud-space-1) var(--tud-space-2); }
.dr-conflicts-at { color: var(--tud-color-text-muted); font-weight: 500; }
.dr-conflicts .btn { justify-self: start; }
.dr-who .dr-chips { margin-top: var(--tud-space-1); }