/* Visual language carried over from the original app, which reps liked: white
   header, red gradient bar, black slide-out drawer, big tiles on the home
   screen. The palette is per-event now — --brand is overwritten at runtime
   from the selected event's primary_color, so Vegas and Orlando look
   different without a code change. */

:root {
  --brand: #c41e3a;
  --brand-dark: #a01729;
  --ink: #1a1a1a;
  --charcoal: #2d2d2d;
  --muted: #646b76;
  --line: #e0e0e0;
  --bg: #f8f9fa;
  --surface: #fff;
  --hot: #c62828;
  --warm: #ef6c00;
  --cold: #1565c0;
  --ok: #17803d;
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: linear-gradient(135deg, var(--bg) 0%, #fff 100%);
  color: var(--ink);
  font: 16px/1.55 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  min-height: 100vh;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--surface);
  min-height: 100vh;
}

/* ---------- Header ---------- */

.header {
  background: var(--surface);
  padding: 16px 20px;
  padding-top: calc(16px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}
.header-logo {
  /* The wordmark is 225x95, so height drives a ~2.4x width. At 46px it ate a
     third of a phone's header; 34px leaves the event name room to breathe. */
  height: 34px;
  width: auto;
  flex-shrink: 0;
}
.header-content {
  text-align: right;
  flex-grow: 1;
  min-width: 0;
}
.header-content h1 {
  /* The event name. A rep capturing against the wrong event is the costly
     mistake, so it gets the most prominent slot and is allowed to wrap. */
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.header-content p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Red bar ---------- */

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  padding: 12px 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.18);
  position: relative;
}
.hamburger {
  background: none;
  border: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 7px 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}
.hamburger:active {
  background: rgba(255, 255, 255, 0.18);
}
.app-title {
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-profile {
  position: relative;
}
.user-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid #fff;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-icon:active {
  background: rgba(255, 255, 255, 0.32);
}
.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1000;
  min-width: 210px;
}
.user-menu-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.user-menu-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}
.user-menu-item {
  width: 100%;
  padding: 13px 16px;
  border: none;
  background: none;
  text-align: left;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
}
.user-menu-item:active {
  background: var(--bg);
}

/* ---------- Drawer ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}
.side-menu {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  max-width: 82vw;
  height: 100vh;
  background: var(--ink);
  color: #fff;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  transition: left 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}
.side-menu.open {
  left: 0;
}
.menu-header {
  background: var(--brand);
  padding: 18px 20px;
  padding-top: calc(18px + env(safe-area-inset-top));
  font-size: 17px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-menu {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  display: flex;
  min-width: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
}
.close-menu:active {
  background: rgba(255, 255, 255, 0.25);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border: none;
  border-bottom: 1px solid var(--charcoal);
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}
.menu-item:active {
  background: var(--brand);
  padding-left: 28px;
}
.menu-item[aria-current='true'] {
  background: var(--brand-dark);
  border-left: 4px solid #fff;
  padding-left: 16px;
}
.menu-item[disabled] {
  opacity: 0.4;
}
.menu-badge {
  margin-left: auto;
  background: var(--warm);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
}

/* ---------- Screens ---------- */

.content {
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
}
.screen {
  display: none;
}
.screen.active {
  display: block;
}

/* Scan Badge on its own row, then the three secondary actions side by side. */
.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.home-button {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 24px 14px;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-button:active {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.14);
}
.home-button .icon {
  margin-bottom: 10px;
  color: var(--brand);
}
.home-button .title {
  font-size: 16px;
  font-weight: 700;
}
.home-button .desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}
/* Scan Badge spans the row. It is the action the app exists for, and a rep
   reaching for it mid-conversation should not have to aim. */
.home-button.wide {
  grid-column: 1 / -1;
}
/* The secondary tiles are a third of a phone's width, so they run tighter. */
.home-button:not(.wide) {
  padding: 18px 6px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.home-button:not(.wide) .icon svg {
  width: 26px;
  height: 26px;
}
.home-button:not(.wide) .title {
  font-size: 14px;
  line-height: 1.2;
}
.home-button:not(.wide) .desc {
  font-size: 11px;
}

.home-button.primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  border-color: var(--brand);
}
.home-button.primary .icon,
.home-button.primary .desc {
  color: rgba(255, 255, 255, 0.92);
}
.home-button[disabled] {
  opacity: 0.45;
}

h1.page {
  font-size: 20px;
  margin: 0 0 4px;
}
.sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 14px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

label {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
}
input,
textarea {
  width: 100%;
  margin-top: 5px;
  padding: 12px;
  /* 16px keeps iOS from zooming the viewport on focus. */
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
textarea {
  min-height: 92px;
  resize: vertical;
}
/* Big, spaced digits so a rep can check what they typed at a glance. */
input.code-input {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5em;
  /* letter-spacing trails the last digit too; this re-centres them. */
  padding-left: calc(12px + 0.5em);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.btn {
  display: block;
  width: 100%;
  padding: 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  border: 2px solid var(--brand);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  cursor: pointer;
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled] {
  opacity: 0.55;
}
.btn.secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn + .btn {
  margin-top: 10px;
}

.camera-wrap {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  margin-bottom: 12px;
}
.camera-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reticle {
  position: absolute;
  inset: 18%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  pointer-events: none;
}

.choices {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}
.choices button {
  flex: 1;
  padding: 12px 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.choices button[aria-pressed='true'] {
  color: #fff;
  border-color: transparent;
}
.choices button[data-value='hot'][aria-pressed='true'] {
  background: var(--hot);
}
.choices button[data-value='warm'][aria-pressed='true'] {
  background: var(--warm);
}
.choices button[data-value='cold'][aria-pressed='true'] {
  background: var(--cold);
}
.choices.value button[aria-pressed='true'] {
  background: var(--ok);
}

.lead {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  margin-bottom: 9px;
  font: inherit;
  cursor: pointer;
}
.lead .name {
  font-weight: 700;
}
.lead .meta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 20px;
  color: #fff;
  margin-right: 6px;
}
.tag.hot {
  background: var(--hot);
}
.tag.warm {
  background: var(--warm);
}
.tag.cold {
  background: var(--cold);
}
.tag.value {
  background: var(--ok);
}

.event-group {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 18px 0 8px;
}
.event-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 9px;
  font: inherit;
  cursor: pointer;
}
.event-option .name,
.event-option .when {
  display: block;
}
.event-option .name {
  font-weight: 600;
}
.event-option .when {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}
.state {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.state.live {
  background: #e7f6ec;
  color: var(--ok);
}
.state.closed {
  background: #eef0f2;
  color: var(--muted);
}

.notice {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
}
.notice.error {
  background: #fdecee;
  border: 1px solid #f5c2c7;
  color: #8a1c2b;
}
.notice.info {
  background: #eef4fd;
  border: 1px solid #cfe0f7;
  color: #12457e;
}
.notice.warn {
  background: #fff4e2;
  border: 1px solid #f7e0bb;
  color: #8a5300;
}
.notice:empty {
  display: none;
}

.empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 34px 16px;
}

.pending {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--warm);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 9px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
  z-index: 900;
  /* A button, so tapping it opens Sync status. */
  width: 100%;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.pending[hidden] {
  display: none;
}

/* Sign-in stands alone: no header, no bar, nothing to navigate to yet. */
.centre {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.centre .card {
  width: 100%;
  max-width: 380px;
}
.centre .logo {
  display: block;
  height: 54px;
  margin: 0 auto 18px;
}

/* Native scanning draws the camera preview behind the WebView, so everything
   in front of it has to become transparent or the viewfinder is invisible.
   Only the reticle and the cancel button stay drawn over the preview. */
body.scanning-native,
body.scanning-native .container,
body.scanning-native .content,
body.scanning-native .camera-wrap {
  background: transparent !important;
}
body.scanning-native .header,
body.scanning-native .top-nav,
body.scanning-native .notice {
  display: none !important;
}
body.scanning-native .camera-wrap video {
  display: none;
}
body.scanning-native .reticle {
  border-color: #fff;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
}