@font-face {
  font-family: 'Apercu';
  src: url("../assets/fonts/apercu.ttf") format('truetype');
  font-weight: 400 800;
}

/* Names referenced inside the Illustrator-exported badge SVGs — same
   variable font file, the browser picks the right instance per weight. */
@font-face { font-family: 'ApercuPro'; src: url("../assets/fonts/apercu.ttf") format('truetype'); font-weight: 400 800; }
@font-face { font-family: 'ApercuPro-Medium'; src: url("../assets/fonts/apercu.ttf") format('truetype'); font-weight: 400 800; }
@font-face { font-family: 'ApercuPro-Bold'; src: url("../assets/fonts/apercu.ttf") format('truetype'); font-weight: 400 800; }

:root {
  --ink: #0a0a0a;
  --muted: #666666;
  --faint: #999999;
  --border: #e6e6e6;
  --bg: #f4f4f2;
  --blue: #4f7fff;
  --pink: #ff2e93;
  --blue-bg: #eef1ff;
  --pink-bg: #fdeaf2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Apercu', ui-sans-serif, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

a { color: var(--blue); }
a:hover { color: var(--pink); }

button, input { font-family: inherit; }

/* Locks the admin console to the same fixed 1080x1920 portrait canvas as
   the kiosk, scaled to fit whatever screen it's shown on. Keeps the two
   consistent even though the console will usually run on a normal laptop
   screen rather than the kiosk's touchscreen. */

.admin-viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #161616;
}

.admin-canvas {
  flex: none;
  width: 1080px;
  height: 1920px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  transform: scale(min(calc(100vw / 1080px), calc(100vh / 1920px)));
}

/* login */

.login-screen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 44px 36px;
  background: #fff;
  border-radius: 24px;
  border: 1.5px solid var(--border);
  box-shadow: 0 30px 70px -30px rgba(10, 10, 10, .2);
  animation: fadeIn .35s ease both;
}

.login-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.login-brand img { height: 40px; width: auto; }
.login-brand span { font-size: 14px; font-weight: 700; color: var(--faint); letter-spacing: .12em; text-transform: uppercase; text-align: center; }

.login-form { display: flex; flex-direction: column; gap: 20px; }
.login-form label { font-size: 15px; font-weight: 600; color: var(--muted); text-align: center; }

.pin-input {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  cursor: text;
}
.pin-input:focus-within { border-color: var(--ink); }

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--border);
  transition: background .12s ease, transform .12s ease;
}
.pin-dot.is-filled { background: var(--ink); transform: scale(1.15); }

.pin-hidden-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: text;
}

.login-form button {
  height: 64px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-top: 4px;
}

.login-demo-note { font-size: 14px; color: var(--faint); text-align: center; }
.login-error { font-size: 14px; color: var(--pink); text-align: center; font-weight: 600; }
.login-kiosk-link { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; }

/* dashboard shell */

.dashboard { height: 100%; display: flex; flex-direction: column; }

.dash-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: #fff;
  border-bottom: 1.5px solid var(--border);
}

.dash-brand { display: flex; align-items: center; gap: 12px; }
.dash-brand img { height: 22px; width: auto; }
.dash-brand span { font-size: 12.5px; font-weight: 700; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }

.dash-header-actions { display: flex; align-items: center; gap: 10px; }
.dash-header-actions a { font-size: 14px; font-weight: 600; text-decoration: none; }
.dash-header-actions button {
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1.5px solid var(--border);
  cursor: pointer;
}

.dash-nav {
  flex: none;
  display: flex;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1.5px solid var(--border);
  gap: 8px;
}

.dash-nav-btn {
  flex: 1;
  text-align: center;
  padding: 16px 8px;
  font-size: 14.5px;
  font-weight: 700;
  background: transparent;
  color: var(--faint);
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.dash-nav-btn.is-active { color: var(--ink); border-bottom-color: var(--blue); }

.dash-main {
  flex: 1;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 28px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dash-main-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.dash-main-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; }

.kiosk-status { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--faint); white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: none; }

.dash-page { display: none; flex-direction: column; gap: 16px; }
.dash-page.is-active { display: flex; }

/* overview */

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

.stat-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-card .stat-label { font-size: 13.5px; font-weight: 600; color: var(--faint); }
.stat-card .stat-value { font-size: 32px; font-weight: 800; }

/* search + rows */

.search-input {
  height: 48px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 0 16px;
  font-size: 15px;
}

.result-count { font-size: 13.5px; color: var(--faint); }

.row-list { display: flex; flex-direction: column; gap: 16px; }

.empty-state { padding: 50px 20px; text-align: center; color: var(--faint); font-size: 15px; }

/* help row */

.help-row {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.help-row-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.help-row-id .name { font-size: 17px; font-weight: 700; }
.help-row-id .email { font-size: 14px; color: var(--muted); }
.help-row-time { font-size: 13px; color: var(--faint); white-space: nowrap; }

.reason-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.reason-pill--pink { background: var(--pink-bg); color: var(--pink); }
.reason-pill--blue { background: var(--blue-bg); color: var(--blue); }

.help-row-actions { display: flex; gap: 10px; }
.help-row-actions button { flex: 1; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; }
.print-btn { background: var(--ink); color: #fff; }
.print-btn.is-printed { background: var(--blue-bg); color: var(--blue); }
.resolve-btn { background: transparent; color: var(--muted); border: 1.5px solid var(--border) !important; }

/* log row */

.log-row {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.log-row-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.log-row-id .name { font-size: 16.5px; font-weight: 700; }
.log-row-id .email { font-size: 13.5px; color: var(--muted); }
.log-row-id .company { font-size: 13.5px; color: var(--faint); }

.log-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.ticket-pill { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; }
.log-row-meta .time { font-size: 13px; color: var(--faint); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* print-only badge / QR — everything else in the console is suppressed at
   print time. body[data-print-target] picks which one is shown. */

.print-badge, .print-qr { display: none; }

@media print {
  @page { size: 75mm 100mm; margin: 0; }

  body[data-print-target="badge"] > *:not(#printBadge) { display: none !important; }
  body[data-print-target="qr"] > *:not(#printQr) { display: none !important; }

  .print-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 75mm;
    height: 100mm;
  }
  .print-qr img { width: 60mm; height: 60mm; }
  .print-qr span {
    font-family: 'Apercu', ui-sans-serif, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
  }

  .print-badge { display: block; }

  .print-badge-side { width: 75mm; height: 100mm; page-break-after: always; }
  .print-badge-side:last-child { page-break-after: auto; }
  .print-badge-side svg { display: block; width: 75mm; height: 100mm; }
}

/* registrants */

.registrants-toolbar { display: flex; gap: 12px; align-items: center; }
.registrants-toolbar .search-input { flex: 1; }

.btn-primary-sm {
  flex: none;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-secondary-sm {
  flex: none;
  padding: 12px 18px;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
}

.registrant-row {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.registrant-row-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.registrant-row-id .name { font-size: 16.5px; font-weight: 700; }
.registrant-row-id .email { font-size: 13.5px; color: var(--muted); }
.registrant-row-id .company { font-size: 13.5px; color: var(--faint); }

.registrant-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.status-pill { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-pill--pending { background: var(--bg); color: var(--muted); }
.status-pill--printed { background: var(--blue-bg); color: var(--blue); }

.registrant-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.registrant-row-actions button {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.registrant-row-actions button.danger { color: var(--pink); border-color: var(--pink-bg); }

/* modals */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  width: 100%;
  max-width: 440px;
  /* fixed px, not vh: the canvas this sits in is a scaled 1920px-tall box,
     and vh would resolve against the real (unscaled) window instead */
  max-height: 1700px;
  overflow-y: auto;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .3);
}

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

.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal-head h2 { font-size: 20px; font-weight: 800; }
.modal-close { background: none; border: none; font-size: 26px; line-height: 1; color: var(--faint); cursor: pointer; padding: 4px; }

#registrantForm label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
#registrantForm input, #registrantForm select {
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
}
.required-note { font-weight: 400; color: var(--faint); text-transform: none; letter-spacing: normal; }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.modal-actions button { padding: 11px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; }
#registrantCancelBtn, #qrModalClose, #qrDownloadBtn {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border) !important;
}
#registrantSaveBtn, #qrPrintBtn, #importConfirmBtn { background: var(--ink); color: #fff; }
#importCancelBtn { background: transparent; color: var(--muted); border: 1.5px solid var(--border) !important; }
#importConfirmBtn:disabled { background: var(--border); color: var(--faint); cursor: not-allowed; }

.qr-modal-body { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 20px; }
.qr-modal-body img { width: 220px; height: 220px; }
.qr-modal-body p { font-size: 13.5px; color: var(--muted); text-align: center; }

/* excel import preview */

.import-summary { font-size: 14px; color: var(--muted); margin-bottom: 16px; }

.import-preview-wrap {
  max-height: 900px;
  overflow-y: auto;
  border: 1.5px solid var(--border);
  border-radius: 12px;
}

.import-preview-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.import-preview-table th, .import-preview-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.import-preview-table th { background: var(--bg); color: var(--muted); font-weight: 700; position: sticky; top: 0; }
.import-preview-table tr:last-child td { border-bottom: none; }
.import-preview-table tr.is-skipped { opacity: .45; }

/* settings */

.settings-block {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 16px;
}
.settings-block h2 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.settings-hint { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }

.settings-row { display: flex; gap: 10px; }

.settings-row--radio { flex-direction: column; gap: 12px; }
.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
}
.radio-option:has(input:checked) { border-color: var(--blue); background: var(--blue-bg); }
.radio-option input { flex: none; }
.settings-option-hint { display: block; font-size: 12.5px; font-weight: 400; color: var(--faint); margin-top: 2px; }
#cameraSelect {
  flex: 1;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
}

.settings-status { display: block; margin-top: 10px; font-size: 13px; color: var(--blue); font-weight: 600; }

.settings-block--danger { border-color: var(--pink-bg); }
.settings-block--danger h2 { color: var(--pink); }

.btn-danger-sm {
  flex: none;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
}