/* Flight Deck - Main Styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: #f5f7fa;
  color: #2c3e50;
  overflow: hidden;
  width: 100%;
  position: fixed;
  height: 100vh;
}

.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.app-header {
  background: linear-gradient(135deg, #023a76 0%, #012141 100%);
  color: white;
  padding: 0.25rem 1rem;
  padding-top: max(0.25rem, env(safe-area-inset-top));
  /* Landscape on a notched iPhone puts the notch down one SIDE, where the
     horizontal padding was a flat 1rem - so the header ran under it and its
     leading content was clipped (C16). The top inset alone never covered
     this. env() is 0 without a notch, so max() leaves every other device and
     the web exactly as they were. */
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  padding-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  flex-shrink: 0;
  position: relative;
  z-index: 100;
}

.header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.header-row.header-hidden {
  display: none;
}

/* Ensure all buttons in header are vertically aligned */
.header-row .btn {
  align-self: center;
}

/* Ensure all buttons in header are vertically aligned */
.header-row .btn {
  align-self: center;
}

/* Ensure all buttons in header are vertically aligned */
.header-row .btn {
  align-self: center;
}

/* First row centered for homescreen */
.homescreen-header-content.header-row:first-of-type {
  justify-content: center;
}

.header-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.header-title-group h1 {
  margin: 0;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
}

.header-title-group .subtitle {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* First row left-aligned for attendee */
.attendee-header-content.attendee-header-title-row {
  justify-content: flex-start;
}

.flex-spacer {
  flex: 1;
}

/* Only relevant in the landscape single-row layout below; hidden elsewhere */
.homescreen-title-trailing-spacer {
  display: none;
}

/* Compact single-row header: either wide enough outright, or narrow but short
   on vertical space (e.g. a phone in landscape). Deliberately NOT based on
   orientation - that's just a width/height ratio, which flips unpredictably
   on a freely resizable desktop window at a fixed width. max-height reflects
   the actual constraint (is there room for a taller stacked header) instead. */
@media (min-width: 600px) and (max-height: 500px), (min-width: 900px) {
  .app-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  
  /* Hidden elements must stay hidden - high specificity */
  .header-row.header-hidden {
    display: none !important;
  }
  
  /* Homescreen: flatten both rows into single row */
  .homescreen-header-content.header-row:not(.header-hidden) {
    display: contents;
  }
  
  .homescreen-header-content .user-info-btn {
    order: 1;
  }
  
  .homescreen-header-content .homescreen-profile-spacer {
    order: 2;
    flex: 1;
  }
  
  /* Centered via symmetric flex spacers on both sides rather than absolute
     positioning + transform — Safari has long-standing bugs with absolutely
     positioned descendants of display:contents ancestors, which this avoids
     entirely. Only truly centered when the profile button and printer button
     are similar widths, which holds in practice. */
  .homescreen-header-content .header-title-group {
    order: 3;
    flex-shrink: 0;
  }

  .homescreen-header-content .homescreen-title-trailing-spacer {
    display: block;
    order: 4;
    flex: 1;
  }

  .homescreen-header-content .printer-btn {
    order: 5;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Attendee: flatten both rows into single row */
  .attendee-header-content.header-row:not(.header-hidden) {
    display: contents;
  }
  
  .attendee-header-content #backToEventsBtn {
    order: 1;
  }
  
  .attendee-header-content .current-event-info {
    order: 2;
    flex: 1;
  }
  
  .attendee-header-content .flex-spacer {
    display: none;
  }
  
  .attendee-header-content #syncBadgePrintsBtn {
    order: 3;
    margin-left: 0;
  }
  
  .attendee-header-content #syncAttendeesBtn {
    order: 4;
  }
  
  .attendee-header-content .printer-btn {
    order: 5;
  }

  .attendee-header-content #createGuestBtn {
    order: 6;
  }
  
  /* Space for offline indicator when visible - homescreen's printer-btn is
     still the rightmost element there. */
  .app-header.has-offline-indicator .homescreen-header-content .printer-btn {
    margin-right: 3.5rem;
  }
}

/* Space for the fixed-position offline indicator (top-right corner) when
   visible, on whichever attendee-header button currently sits at that corner.
   createGuestBtn is last/rightmost in both the portrait-stacked title row and
   the landscape-flattened single row, so one rule (outside the landscape-only
   media query above) covers both layouts and both web and native. */
.app-header.has-offline-indicator .attendee-header-content #createGuestBtn {
  margin-right: 3.5rem;
}

/* Exact complement of the compact-header query above - re-show the flex-spacer
   whenever the stacked (non-compact) header layout is in effect. */
@media (max-width: 599px), (min-width: 600px) and (max-width: 899px) and (min-height: 501px) {
  .attendee-header-content .flex-spacer {
    display: block;
    flex: 1;
  }
}

/* Offline Indicator - Fixed Position in Header, aligned with title top */
.offline-indicator-fixed {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0.25rem);
  right: 1rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: rgba(220, 53, 69, 0.15);
  border-radius: 50%;
  animation: offlinePulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes offlinePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.95);
  }
}

/* Attendee event info styling */
.attendee-header-content .current-event-info {
  text-align: left;
}

.header-left h1 {
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logo-icon {
  height: 1.5rem;
  width: auto;
  vertical-align: middle;
}

.subtitle {
  font-size: 0.9rem;
  color: #7f8c8d;
  margin: 0;
}

/* Header buttons */
.header-row .btn,
.header-row .user-info-btn {
  flex-shrink: 0;
}

/* Ensure all header buttons have consistent height */
.header-right .btn,
.header-right .user-info-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

.user-info-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: background-color 0.2s;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}

@media (hover: hover) {
.user-info-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
}

.user-info {
  font-size: 0.85rem;
  line-height: 1.2;
  text-align: left;
}

.user-info strong {
  white-space: nowrap;
}

.user-info small {
  opacity: 0.8;
  font-size: 0.85em;
  display: block;
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   Profile panel wrapper + panel
   ------------------------------------------------------------------------- */
.profile-panel-wrapper {
  position: relative;
}

.profile-panel-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: transparent;
}

.profile-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  min-width: 300px;
  max-width: 360px;
  max-height: calc(100vh - 80px);
  overflow: hidden;
  flex-direction: column;
  color: #2c3e50;
}
.profile-panel[style*="display: block"] {
  display: flex !important;
}

/* Mobile: full-width bottom sheet */
@media (max-width: 480px) {
  .profile-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
  }
}

.profile-panel-header {
  background: linear-gradient(135deg, #023a76 0%, #012141 100%);
  color: #fff;
  padding: 1rem 1.2rem 0.8rem;
}

.profile-panel-header .profile-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.profile-panel-header .profile-email {
  font-size: 0.8rem;
  opacity: 0.8;
}

.profile-panel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.group-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.group-badge.orga  { background: #023a76; color: #fff; }
.group-badge.admin { background: #6c757d; color: #fff; }
.group-badge.sales { background: #e65100; color: #fff; }
.group-badge.usher { background: #00695c; color: #fff; }

/* The admin panel's own row: the controls that would lock you out are
   disabled, and this says why. */
.admin-self-note {
  font-size: 0.72rem;
  color: #7f8c8d;
  font-style: italic;
  margin-top: 0.2rem;
}

.btn-deny:disabled,
.group-check:disabled { opacity: 0.45; cursor: not-allowed; }

.profile-panel-body {
  padding: 0.75rem 1.2rem;
  overflow-y: auto;
  flex: 1;
}

.panel-section {
  border-top: 1px solid #e9ecef;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.panel-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7f8c8d;
  margin-bottom: 0.6rem;
}

.admin-user-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #f0f0f0;
}
.admin-user-row:last-child { border-bottom: none; }

.admin-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #023a76;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.admin-user-info {
  flex: 1;
  min-width: 0;
}
.admin-user-info .admin-user-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-user-info .admin-user-email {
  font-size: 0.75rem;
  color: #7f8c8d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-user-groups {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.admin-user-groups label {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: #555;
  cursor: pointer;
  user-select: none;
}
.admin-user-groups input[type="checkbox"] {
  cursor: pointer;
}

.admin-user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.btn-approve {
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
@media (hover: hover) {
.btn-approve:hover { background: #218838; }
}

.btn-deny {
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
@media (hover: hover) {
.btn-deny:hover { background: #c82333; }
}

.btn-save-groups {
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  background: #023a76;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
@media (hover: hover) {
.btn-save-groups:hover { background: #012141; }
}

/* Momentary confirmation that a group change actually landed. */
@media (hover: hover) {
.btn-save-groups-saved,
.btn-save-groups-saved:hover { background: #1e8e3e; cursor: default; }
}

.btn-save-groups:disabled { opacity: 0.7; cursor: default; }

/* Admin tabs */
.admin-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}
.admin-tab {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: #f0f2f5;
  color: #7f8c8d;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.admin-tab.active {
  background: #023a76;
  color: #fff;
}
.admin-tab .tab-count {
  display: inline-block;
  background: #ff9800;
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
  margin-left: 3px;
  vertical-align: middle;
}

.requested-groups-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: #7f8c8d;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}

.admin-filter-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
  border: 1px solid #dce0e6;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
.admin-filter-input:focus {
  border-color: #023a76;
}

.panel-logout-link {
  display: block;
  text-align: center;
  padding: 0.65rem;
  color: #7f8c8d;
  font-size: 0.85rem;
  text-decoration: none;
  border-top: 1px solid #e9ecef;
  margin-top: 0.5rem;
}
@media (hover: hover) {
.panel-logout-link:hover { color: #2c3e50; background: #f8f9fa; }
}

/* Pending count badge on userInfoBtn */
.pending-count-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ff9800;
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  padding: 0 3px;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Access pending / denied full-screen cards
   ------------------------------------------------------------------------- */
.access-status-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  padding: 2rem;
  padding-left: max(2rem, env(safe-area-inset-left));
  padding-right: max(2rem, env(safe-area-inset-right));
  text-align: center;
}

.access-status-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  max-width: 420px;
  width: 100%;
  overflow: hidden;
}

.access-status-card-header {
  background: linear-gradient(135deg, #023a76 0%, #012141 100%);
  color: #fff;
  padding: 1.5rem 2rem 1.2rem;
}

.access-status-card-header .logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.access-status-card-body {
  padding: 1.75rem 2rem 1.5rem;
}

.access-status-card-body h2 {
  font-size: 1.3rem;
  margin: 0 0 0.75rem;
  color: #2c3e50;
}

.access-status-card-body p {
  color: #7f8c8d;
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}

.access-status-card-body .btn-signout {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.55rem 1.5rem;
  background: #f5f7fa;
  color: #2c3e50;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
@media (hover: hover) {
.access-status-card-body .btn-signout:hover { background: #e9ecef; }
}

/* The primary action on the awaiting-approval screen. It used to carry the
   navy background inline while inheriting .btn-signout's dark slate text,
   which left it unreadable on device (A13). Must stay after the rule above:
   same specificity, later wins. */
.access-status-card-body .btn-request-submit {
  background: #023a76;
  color: #fff;
  border: none;
  cursor: pointer;
}
@media (hover: hover) {
.access-status-card-body .btn-request-submit:hover { background: #012141; }
}
.access-status-card-body .btn-request-submit:disabled { opacity: 0.7; cursor: default; }

/* The state a pending user sits in once their request is in. Without it the
   screen showed the same blank form whether or not anything had been sent. */
.request-sent {
  text-align: left;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  background: #eef6ee;
  border: 1px solid #cfe4cf;
  border-radius: 8px;
}
.request-sent-lead {
  margin: 0 0 0.5rem;
  font-weight: 600;
  color: #1e5c2e;
  font-size: 0.95rem;
}
.request-sent-groups { margin: 0 0 0.5rem; font-size: 0.9rem; color: #2c3e50; }
.request-sent-note   { margin: 0; font-size: 0.82rem; color: #5a6b7b; line-height: 1.45; }

.requested-groups-none { color: #7f8c8d; font-style: italic; }

.request-access-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  text-align: left;
}
.request-access-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
  user-select: none;
}
.request-access-option:has(input:checked) { border-color: #023a76; background: #f0f4ff; }
.request-access-option input { margin-top: 3px; flex-shrink: 0; cursor: pointer; }
.request-access-option strong { display: block; font-size: 0.88rem; color: #2c3e50; }
.request-access-option span   { display: block; font-size: 0.78rem; color: #7f8c8d; }

/* Buttons */
.btn {
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  /* Without this, iOS Safari/WKWebView renders its native button chrome
     underneath our custom background - normally hidden, but the :disabled
     opacity drop lets it show through as a stray dark rectangle. */
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: #023a76;
  color: white;
}

@media (hover: hover) {
.btn-primary:hover {
  background: #012141;
}
}

.btn-primary:active,
.btn-primary:focus {
  background: #023a76;
  outline: none;
}

.btn-secondary {
  background: #023a76;
  color: white;
  border: 1px solid #023a76;
}

@media (hover: hover) {
.btn-secondary:hover {
  background: #012141;
  border-color: #012141;
  color: white;
}
}

.btn-warning {
  background: #ff9800;
  color: white;
  border: 1px solid #ff9800;
}

@media (hover: hover) {
.btn-warning:hover {
  background: #f57c00;
  border-color: #f57c00;
  color: white;
}
}

.btn-icon-only {
  padding: 0.6rem;
  min-width: auto;
  border: none;
  border-radius: 6px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

@media (hover: hover) {
.btn-icon-only:hover {
  background: rgba(255, 255, 255, 0.2);
}
}

.btn-icon-only .btn-icon {
  margin: 0;
}

.btn-success {
  background: #28a745;
  color: white;
  border: 1px solid #28a745;
}

@media (hover: hover) {
.btn-success:hover {
  background: #218838;
  border-color: #1e7e34;
}
}

.btn-warning {
  background: #ffc107;
  color: white;
  border: 1px solid #ffc107;
}

@media (hover: hover) {
.btn-warning:hover {
  background: #e0a800;
  border-color: #d39e00;
}
}

.btn-warning:active,
.btn-warning:focus {
  background: #ffc107;
  border-color: #ffc107;
  outline: none;
}

.btn-large {
  padding: 0.8rem 1.5rem;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.btn-icon {
  font-size: 1.1em;
}

/* Screens */
.screen {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Side insets for the same reason as .app-header. On .screen, not
     .screen-content: every per-screen rule below sets `padding` on
     .screen-content, and that shorthand silently replaced the inset, so
     landscape on a notched iPhone still ran the event list, attendees and
     leads under the notch (G30). Nothing sets padding here, so the inset
     now adds to whatever each screen chooses. 0 without a notch. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.screen.active {
  display: block;
}

.screen-content {
  max-width: 100%;
  margin: 0;
  padding: 0;
  height: calc(100vh - 80px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Event selection screen needs padding and scrolling */
#eventSelectionScreen .screen-content {
  padding: 2rem 1rem;
  overflow-y: auto;
}

/* Session scanning screens. Without these they inherit the base rule's
   padding:0 and overflow:hidden - so the picker had no margins and, on a
   conference with more sessions than fit one screen, no way to scroll to
   the rest of them. */
#sessionPickerScreen .screen-content,
#sessionScanScreen .screen-content {
  padding: 2rem 1rem;
  overflow-y: auto;
}

/* Attendee screen - flex container with no scroll */
#attendeeScreen .screen-content {
  overflow: hidden;
  padding: 0;
}

/* Event selection screen needs padding and scrolling */
#eventSelectionScreen .screen-content {
  padding: 2rem 1rem;
  overflow-y: auto;
}

/* Attendee screen - no scroll on main container */
#attendeeScreen .screen-content {
  overflow: hidden;
}

/* Unauthenticated state - shown below header when no valid session */
#unauthMessage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: #888;
  font-size: 1rem;
}

.screen-content h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

.instructions {
  color: #7f8c8d;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Screen header - title with refresh button on same line */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}

.screen-header h2 {
  margin: 0;
  flex: 0 0 auto;
}

.screen-header #refreshEventsBtn {
  flex: 0 0 auto;
}

/* Genre filter row - full width, aligned left */
.genre-filter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Pinned right, opposite the dropdown it refreshes. margin-left rather than
   justify-content so the select keeps its natural width instead of being
   stretched across the gap. */
.genre-filter-row #refreshEventsBtn {
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .genre-filter-row {
    gap: 0.5rem;
  }

  /* The select's 200px minimum plus the button overflows a small phone;
     let it give up width so both stay on the one row. */
  .genre-filter-row .filter-select {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* Controls */
.controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.controls #refreshEventsBtn {
  align-self: flex-end;
  margin-right: 2rem;
}

.filter-select {
  padding: 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
  min-width: 200px;
}

@media (hover: hover) {
.filter-select:hover,
.filter-select:focus {
  border-color: #023a76;
  outline: none;
}
}

/* Event View Toggle */
.event-view-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  width: calc(100% + 2rem);
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0 1rem;
}

.toggle-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: white;
  color: #666;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (hover: hover) {
.toggle-btn:hover {
  border-color: #023a76;
  color: #023a76;
}
}

.toggle-btn.active {
  background: #023a76;
  color: white;
  border-color: #023a76;
  box-shadow: 0 2px 8px rgba(2, 58, 118, 0.3);
}

.toggle-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* Pagination Controls */
.pagination-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0 2rem;
  align-items: center;
}

.pagination-info {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
  min-height: 1.2rem;
}

.pagination-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  width: 100%;
}

.pagination-buttons .btn {
  min-width: 120px;
}

.pagination-buttons .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading & Error States */
.loading-state, .error-state {
  text-align: center;
  padding: 3rem;
}

.spinner {
  width: 50px;
  height: 50px;
  margin: 0 auto 1rem;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #023a76;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Spinning icon on refresh buttons */
.icon-spin {
  animation: spin 1s linear infinite;
  transform-origin: center;
  display: block;
}

.error-state {
  color: #e74c3c;
}

/* Events List */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.2s;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Only show pointer cursor for single-role users (clickable cards). An inert
   card - a user with no operational group - must not look clickable either. */
.event-card:not(.event-card-dual):not(.event-card-inert) {
  cursor: pointer;
}

.event-footer-none { padding-top: 0.5rem; }

.event-no-access {
  font-size: 0.85rem;
  color: #7f8c8d;
  font-style: italic;
}

@media (hover: hover) {
.event-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-color: rgba(2,58,118,0.2);
}
}

.event-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.event-header h3 {
  font-size: 1.4rem;
  color: #2c3e50;
  margin-bottom: 0.25rem;
}

.event-date {
  font-size: 0.85rem;
  color: #7f8c8d;
}

.event-logos {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.event-logo {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

.event-logo-png {
  filter: invert(1) brightness(0);
}

.event-no-logo {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

.event-courses {
  margin-bottom: 1rem;
}

.event-courses strong {
  color: #023a76;
  font-size: 0.9rem;
}

.event-courses p {
  margin-top: 0.5rem;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.event-footer {
  text-align: right;
}

.event-footer-dual {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Leads Screen */
/* The leads list is the ONE scroll container on this screen.
 *
 * .screen-content's height: calc(100vh - 80px) assumes an 80px header, but the
 * leads header is two rows plus the iOS safe-area inset, so .screen-content was
 * taller than the #leadsScreen it sits in. That left #leadsScreen scrollable as
 * well as the list inside it, and an iOS momentum fling chained from one to the
 * other - which is what parked the first or last card half off screen when you
 * scrolled hard to either end.
 *
 * Scoped to the leads screen: .screen and .screen-content are shared with the
 * event and attendee screens, which are not affected by this. */
#leadsScreen.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#leadsScreen .screen-content {
  height: auto;
  flex: 1;
  /* Without this the list cannot shrink below its content in a column flex
     parent, so it overflows instead of scrolling. */
  min-height: 0;
}

.leads-partner-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  /* Clears the home indicator so the last card is fully reachable. */
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Stops a fling that reaches either end from chaining out to an ancestor. */
  overscroll-behavior: contain;
}

.lead-item {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lead-item-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
}

.lead-expo {
  font-size: 0.75rem;
  color: #7f8c8d;
  flex: 0 0 100%;
}

.lead-type {
  font-size: 0.8rem;
  color: #95a5a6;
}

.lead-name {
  font-weight: 600;
  flex: 1 1 auto;
}

.lead-count {
  font-size: 0.9rem;
  font-weight: 500;
  color: #2c3e50;
  background: #eaf1fb;
  padding: 0.1rem 0.5rem;
  border-radius: 12px;
}

.lead-item-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.lead-downloaded {
  font-size: 0.82rem;
  flex: 1 1 auto;
}

.lead-downloaded-yes {
  color: #27ae60;
}

.lead-downloaded-no {
  color: #95a5a6;
}

.lead-search-input {
  padding: 0.4rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 0.9rem;
  width: 220px;
}

.btn-sm {
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
}

/* Attendee Screen */
.attendee-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 200px;
}

/* Event info in header */
.attendee-header-content .current-event-info {
  text-align: left;
}

.attendee-header-content .current-event-info h2 {
  font-size: 1.5rem;
  margin: 0;
  /* Follows .app-header's white, and must stay light: this heading sits on the
     dark blue header gradient. It read `var(--text-dark)` for a long time,
     which resolved to nothing - the file defines no custom properties at all -
     so it has always inherited white and only looked correct by accident.
     Defining that variable to an actual dark colour would have turned the city
     navy-on-navy. Inherit rather than a literal so it still follows the header
     if the header is ever re-themed. */
  color: inherit;
  text-align: left;
}

.attendee-header-content .current-event-info p {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin: 0;
  text-align: left;
}

/* Badge print count chip, immediately right of the city.
 *
 * The city truncates and the chip never does: on a narrow phone something in
 * this row has to give, and the city is the redundant half - it was just
 * tapped on the previous screen and the date line below still names the
 * conferences. The count is the new information. */
.attendee-header-content .current-event-info {
  min-width: 0;
  flex: 1 1 auto;
}

/* In the stacked layout the title row's spacer would otherwise grow against
   the event info, squeezing the city while empty space sat beside it. The
   buttons row still needs its spacer to push the buttons right, so this is
   scoped to the title row only. */
.attendee-header-title-row .flex-spacer {
  flex: 0 0 auto;
}

/* City and count share one line. The city yields first - it was just tapped on
   the previous screen and the date line repeats the conferences, whereas the
   count is the only place this number appears. */
.current-event-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.attendee-header-content .current-event-info h2 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-stats-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
  /* Matches the cap height of the city beside it rather than the chip's own
     text, so the two read as one line however the font renders. */
  height: 1.5rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
}

@media (hover: hover) {
.badge-stats-chip:hover {
  background: rgba(255, 255, 255, 0.25);
}
}

@media (max-width: 480px) {
  .badge-stats-chip {
    height: 1.35rem;
    padding: 0 0.3rem;
    font-size: 0.7rem;
  }

  .current-event-title-row {
    gap: 0.375rem;
  }
}

/* Below ~400px the Guest Badge button leaves too little for a 1.5rem city
   plus the count, and the city was clipping to a few characters. Trimming the
   heading a step fits both on the smallest phones still in use (SE, mini)
   without touching the layout on anything larger. */
@media (max-width: 400px) {
  .attendee-header-content .current-event-info h2 {
    font-size: 1.2rem;
  }
}

/* Badge stats modal */
.badge-stats-total {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #ecf0f1;
  font-size: 0.95rem;
  color: #566573;
}

.badge-stats-total strong {
  font-size: 1.15rem;
  color: #2c3e50;
  font-variant-numeric: tabular-nums;
}

.badge-stats-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.badge-stats-headline-count {
  font-size: 2rem;
  font-weight: 700;
  color: #2c3e50;
  font-variant-numeric: tabular-nums;
}

.badge-stats-headline-count small {
  font-size: 1rem;
  font-weight: 500;
  color: #7f8c8d;
}

.badge-stats-headline-pct {
  font-size: 1.1rem;
  font-weight: 600;
  color: #7f8c8d;
  font-variant-numeric: tabular-nums;
}

.badge-stats-asof {
  margin: 0.15rem 0 1rem;
  font-size: 0.8rem;
  color: #7f8c8d;
}

.badge-stats-subhead {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #95a5a6;
}

.badge-stats-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
}

.badge-stats-row-label {
  flex: 0 0 7.5rem;
  font-size: 0.9rem;
  color: #2c3e50;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-stats-row-bar {
  flex: 1;
  height: 6px;
  min-width: 2rem;
  border-radius: 3px;
  background: #ecf0f1;
  overflow: hidden;
}

.badge-stats-row-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #023a76;
}

.badge-stats-row-value {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2c3e50;
  font-variant-numeric: tabular-nums;
}

.badge-stats-row-muted .badge-stats-row-label,
.badge-stats-row-muted .badge-stats-row-value {
  color: #95a5a6;
  font-weight: 500;
}

.badge-stats-row-muted .badge-stats-row-bar > span {
  background: #bdc3c7;
}

.badge-stats-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #566573;
}

.badge-stats-report-summary {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #2c3e50;
}

.badge-stats-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: #2c3e50;
}

.badge-stats-report-table th,
.badge-stats-report-table td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #ecf0f1;
  text-align: right;
}

.badge-stats-report-table th:first-child,
.badge-stats-report-table td:first-child {
  text-align: left;
}

.badge-stats-report-table th {
  font-size: 0.75rem;
  font-weight: 600;
  color: #7f8c8d;
}

.badge-stats-report-table tr.is-today td {
  background: #fef9e7;
  font-weight: 600;
}

.badge-stats-report-notes {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #7f8c8d;
}

.current-event-info h2 {
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
}

.current-event-info p {
  color: #7f8c8d;
  font-size: 0.95rem;
}

/* Search Section */
.search-section {
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-tabs {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  color: #6c757d;
  border-bottom: 3px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (hover: hover) {
.tab-btn:hover {
  background: rgba(2, 58, 118, 0.05);
  color: #023a76;
}
}

.tab-btn.active {
  color: #023a76;
  background: white;
  border-bottom-color: #023a76;
}

.tab-icon {
  font-size: 1.2em;
}

.tab-content {
  display: none;
  padding: 1.5rem;
  flex: 1;
  min-height: 0;
}

.tab-content.active {
  display: flex;
  flex-direction: column;
}

/* Search tab - allow scrolling for results */
#searchTab {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Scan tab - never scroll */
#scanTab {
  overflow: hidden;
  touch-action: none;
}

.filter-buttons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.filter-btn {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.1rem;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  background: white;
  color: #7f8c8d;
  font-size: 0.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-align: center;
  line-height: 1.2;
}

@media (hover: hover) {
.filter-btn:hover {
  border-color: #023a76;
  background: rgba(2, 58, 118, 0.05);
}
}

.filter-btn.active {
  background: #023a76;
  color: white;
  border-color: #023a76;
}

.search-box {
  position: relative;
  margin-bottom: 1rem;
}

.search-box input {
  width: 100%;
  padding: 0.8rem 3rem 0.8rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.search-box input:focus {
  outline: none;
  border-color: #023a76;
}

.clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #7f8c8d;
  cursor: pointer;
  padding: 0.5rem;
}

/* Attendee List */
.attendee-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.attendee-item {
  background: white;
  border-radius: 12px;
  padding: 1.5rem 1.5rem 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
}

@media (hover: hover) {
.attendee-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-color: rgba(2,58,118,0.2);
}
}

.attendee-name {
  font-weight: 600;
  font-size: 1.05rem;
  color: #2c3e50;
  margin-bottom: 0.25rem;
}

.attendee-meta {
  font-size: 0.85rem;
  color: #7f8c8d;
}

.attendee-company {
  display: inline-block;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.badge-print-status {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-print-status.printed {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.badge-print-status.not-printed {
  background-color: #e9ecef;
  color: #6c757d;
  border: 1px solid #dee2e6;
}

.attendee-details {
  background: white;
  border-radius: 12px;
  padding: 2rem 2rem 1rem 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-top: 2rem;
}

.attendee-details-card h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #2c3e50;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-row .label {
  font-weight: 600;
  color: #7f8c8d;
}

.detail-row .value {
  color: #2c3e50;
}

.detail-actions {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
}

.sync-status {
  margin-top: 1rem;
}

.sync-message {
  padding: 0.75rem;
  border-radius: 6px;
  background: #e3f2fd;
  color: #1976d2;
}

.sync-message.success {
  background: #e8f5e9;
  color: #388e3c;
}

.sync-message.error {
  background: #ffebee;
  color: #c62828;
}

.no-results {
  text-align: center;
  padding: 2rem;
  color: #7f8c8d;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  /* Keeps a wide dialog clear of the notch in landscape (G30). */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
  font-size: 1.4rem;
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Solid navy on white rather than the previous pale lilac-on-lilac: at this
   size the pill has to be legible at a glance across a badge desk, and the
   low-contrast version was getting missed. */
.guest-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #023a76;
  color: #ffffff;
  border: 1px solid #023a76;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #7f8c8d;
  padding: 0.5rem;
}

.modal-body {
  padding: 1.5rem;
}

.modal-body .badge-print-status {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid #f0f0f0;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

/* Fixed width so swapping the label to "Creating..." during a request
   doesn't visibly shrink/reflow the button row. */
.guest-dialog-btn {
  min-width: 118px;
  justify-content: center;
}

/* Three guest-dialog buttons at their min-width don't fit a phone-width
   modal-footer - wrap them onto multiple rows instead of overflowing. */
@media (max-width: 480px) {
  .modal-footer {
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .guest-dialog-btn {
    flex: 1 1 calc(50% - 0.5rem);
  }
}

.btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spinner-spin 0.6s linear infinite;
}

.guest-dialog-btn.is-loading .btn-spinner {
  display: inline-block;
}

/* All three dialog buttons are disabled while a guest is being created, and the
   global :disabled rule mutes them with opacity - which on iOS lets the native
   button chrome show through as a stray dark block behind the label (the same
   artifact .btn's -webkit-appearance reset was added for). Mute with explicit
   colours instead, so there is no transparency for anything to show through. */
.guest-dialog-btn:disabled {
  opacity: 1;
  background: #8199ba;
  border-color: #8199ba;
  color: #ffffff;
}

/* ...except the one actually doing the work, which stays full-strength so
   "Creating..." reads as the active button rather than another greyed-out one. */
.guest-dialog-btn.is-loading:disabled {
  background: #023a76;
  border-color: #023a76;
  color: #ffffff;
}

@keyframes btn-spinner-spin {
  to { transform: rotate(360deg); }
}

.badge-preview-card {
  background: #f8f9fa;
  border: 2px dashed #023a76;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.badge-preview-card h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.badge-number {
  font-family: monospace;
  font-size: 1.2rem;
  font-weight: bold;
  color: #023a76;
  margin-top: 1rem;
}

/* Printer Status Badge in Print Modal */
.printer-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.printer-status-badge.connected {
  background: #d4edda;
  color: #155724;
  border: 2px solid #28a745;
}

.printer-status-badge.offline {
  background: #fff3cd;
  color: #856404;
  border: 2px solid #ffc107;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
.printer-status-badge.offline:hover {
  background: #ffe9a6;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
}

.printer-status-badge.not-connected {
  background: #f8d7da;
  color: #721c24;
  border: 2px solid #dc3545;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
.printer-status-badge.not-connected:hover {
  background: #ffe9a6;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
}

.printer-status-badge svg {
  flex-shrink: 0;
}

/* Download History Modal */
.download-history-body {
  max-height: 60vh;
  overflow-y: auto;
}

.download-summary {
  background: #eaf1fb;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1rem;
}

.download-summary strong {
  color: #023a76;
  font-size: 1.2rem;
}

.download-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.download-history-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #023a76;
}

.download-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #023a76;
  color: white;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: bold;
}

.download-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.download-email {
  font-weight: 500;
  color: #2c3e50;
  font-size: 0.95rem;
}

.download-date {
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-top: 0.2rem;
}

/* Badge SVG Container - displays actual SVG template */
.badge-svg-container {
  background: white;
  border: 2px solid #023a76;
  border-radius: 8px;
  padding: 0;
  margin: 1rem auto;
  max-width: 620px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.badge-svg-container svg {
  width: 100%;
  height: auto;
  display: block;
}

.badge-note {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}

.print-options {
  margin-top: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Scan Tab */
/* Scan Tab Styles */
.scan-container {
  text-align: center;
  padding: 2rem 0;
  max-width: 600px;
  margin: 0 auto;
}

.qr-scanner {
  position: relative;
  max-width: 500px;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto 1.5rem;
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
}

.qr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

.qr-canvas {
  display: none;
}

.scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.scan-frame {
  position: relative;
  width: 70%;
  aspect-ratio: 1;
  max-width: 280px;
  border: 3px solid rgba(2, 58, 118, 0.8);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  background: transparent;
}

.scan-frame::before,
.scan-frame::after,
.scan-corners::before,
.scan-corners::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 4px solid #3498db;
}

.scan-frame::before {
  top: -3px;
  left: -3px;
  border-right: none;
  border-bottom: none;
  border-radius: 12px 0 0 0;
}

.scan-frame::after {
  top: -3px;
  right: -3px;
  border-left: none;
  border-bottom: none;
  border-radius: 0 12px 0 0;
}

.scan-corners::before {
  bottom: -3px;
  left: -3px;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 12px;
}

.scan-corners::after {
  bottom: -3px;
  right: -3px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 12px 0;
}

.flip-camera-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  pointer-events: all;
}

@media (hover: hover) {
.flip-camera-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}
}

.flip-camera-btn:active {
  transform: scale(0.95);
}

.scan-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.scan-instructions {
  color: #7f8c8d;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.scan-status {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  min-height: 1.5rem;
  color: #3498db;
  font-weight: 500;
}

/* Scan flash animations */
@keyframes flash-green {
  0%, 100% { 
    border-color: rgba(2, 58, 118, 0.8);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  }
  50% { 
    border-color: #2ecc71;
    border-width: 5px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6), 0 0 30px rgba(46, 204, 113, 0.8), inset 0 0 30px rgba(46, 204, 113, 0.3);
  }
}

@keyframes flash-red {
  0%, 100% { 
    border-color: rgba(2, 58, 118, 0.8);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  }
  50% { 
    border-color: #e74c3c;
    border-width: 5px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6), 0 0 30px rgba(231, 76, 60, 0.8), inset 0 0 30px rgba(231, 76, 60, 0.3);
  }
}

@keyframes flash-amber {
  0%, 100% {
    border-color: rgba(2, 58, 118, 0.8);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  }
  50% {
    border-color: #f39c12;
    border-width: 5px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6), 0 0 30px rgba(243, 156, 18, 0.8), inset 0 0 30px rgba(243, 156, 18, 0.3);
  }
}

.scan-flash-green {
  animation: flash-green 0.5s ease-out;
}

.scan-flash-amber {
  animation: flash-amber 0.5s ease-out;
}

.scan-flash-red {
  animation: flash-red 0.5s ease-out;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .scan-container {
    padding: 1rem;
  }
  
  .qr-scanner {
    max-width: 100%;
  }
  
  .scan-controls {
    flex-direction: column;
    padding: 0 1rem;
  }
  
  .scan-controls .btn {
    width: 100%;
  }
}

/* Larger screens - better spacing for filter buttons */
@media (min-width: 769px) {
  .filter-btn {
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
  }
}

/* Landscape mode for scanner - side by side layout */
@media (orientation: landscape) {
  .scan-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    max-width: 100%;
    height: 100%;
  }
  
  .qr-scanner {
    /* Size based on available height, not width */
    max-width: none;
    width: auto;
    height: calc(100vh - 180px); /* Account for header and tabs */
    max-height: 400px;
    aspect-ratio: 1;
    margin: 0;
    flex-shrink: 0;
  }
  
  .scan-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    max-width: 200px;
  }
  
  .scan-instructions {
    margin-top: 0;
    text-align: left;
  }
  
  .scan-status {
    text-align: left;
  }
}


/* Printer Settings */
.printer-status {
  text-align: center;
  padding: 2rem;
}

.printer-status .status-text {
  font-size: 1rem;
  color: #7f8c8d;
  margin-bottom: 1.5rem;
}

.printer-info {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #e1e8ed;
}

.info-row:last-child {
  border-bottom: none;
}

.printer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  justify-content: center;
  align-items: center;
}

.printer-actions .btn {
  width: 100%;
  max-width: 280px;
}

.printer-serial {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin: 0.5rem 0;
}

.printer-hint {
  color: #7f8c8d;
  font-size: 0.85rem;
  margin-top: 1.5rem;
  padding: 0.75rem;
  background: #f8f9fa;
  border-radius: 6px;
}

.printer-connected,
.printer-disconnected {
  text-align: center;
  padding: 1.5rem;
}

.printer-connected h3 {
  color: #28a745;
  margin: 0.5rem 0;
}

.printer-disconnected h3 {
  color: #495057;
  margin: 0.5rem 0;
}

.printer-help {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
}

.printer-help p {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #856404;
}

.printer-help ol {
  margin-left: 1.5rem;
  color: #856404;
}

.printer-help li {
  margin: 0.25rem 0;
}

.browser-warning {
  text-align: center;
  padding: 2rem;
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 8px;
  margin: 1rem 0;
}

.browser-warning h3 {
  color: #856404;
  margin: 1rem 0 0.5rem 0;
}

.browser-warning p {
  color: #856404;
  margin: 0.5rem 0;
}

.browser-warning ul {
  list-style: none;
  padding: 0;
  color: #856404;
  font-weight: 500;
}

.browser-warning ul li {
  margin: 0.5rem 0;
}

.browser-warning ul li:before {
  content: "✓ ";
  color: #28a745;
  font-weight: bold;
}

/* Printer Setup Guide */
.printer-setup-guide {
  text-align: left;
  margin: 1.5rem 0;
  padding: 0 1rem;
}

.setup-step {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.step-number {
  background: linear-gradient(135deg, #023a76 0%, #012141 100%);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-content h4 {
  margin: 0 0 0.5rem 0;
  color: #023a76;
  font-size: 1rem;
}

.step-content p {
  margin: 0;
  color: #495057;
  font-size: 0.9rem;
  line-height: 1.4;
}

.printer-details {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.printer-name {
  font-size: 1.1rem;
  color: #023a76;
  margin: 0 0 0.5rem 0;
}

.printer-serial {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0;
  font-family: 'Courier New', monospace;
}

.printer-info-box {
  background: #d4edda;
  border: 2px solid #28a745;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.printer-info-box p {
  margin: 0;
  color: #155724;
}

.btn-large {
  font-size: 1.1rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
}

.bridge-available {
  text-align: center;
  padding: 2rem;
  background: #d4edda;
  border: 2px solid #28a745;
  border-radius: 8px;
  margin: 1rem 0;
}

.bridge-available h3 {
  color: #155724;
  margin: 1rem 0 0.5rem 0;
}

.bridge-available p {
  color: #155724;
  margin: 0.5rem 0;
}

.printer-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
}

.printer-item {
  padding: 1rem;
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

@media (hover: hover) {
.printer-item:hover {
  background: #e9ecef;
  border-color: #023a76;
  transform: translateX(4px);
}
}

.success-msg {
  background: #d1e7dd;
  border: 1px solid #badbcc;
  border-radius: 6px;
  padding: 0.75rem;
  color: #0f5132;
}

/* Responsive */
@media (max-width: 768px) {
  /* .app-header and .header-left/.header-right rules removed here - they were
     legacy, targeting a header markup structure that no longer exists
     (.header-left/.header-right aren't used anywhere in current HTML), and
     .app-header only still matched by coincidence of class name, which
     silently fought with the compact-header media query above it (same
     specificity, later source order always won within max-width: 768px,
     regardless of what the compact-header logic decided). .app-header's
     own base rule already sets flex-direction: column by default anyway. */

  .events-list {
    grid-template-columns: 1fr;
  }

  .attendee-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .attendee-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .detail-actions {
    flex-direction: column;
  }
}

/* Modern badge edit form styles */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select {
  padding: 0.8rem 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1.25rem;
  font-family: inherit;
  background: #f9f9f9;
  color: #222;
  outline: none;
  transition: border-color 0.2s;
  min-height: 3.2em;
  height: 3.2em;
  width: calc(100% - 1em);
  box-sizing: border-box;
  resize: none;
  display: block;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.form-group input[type="text"]:focus,
.form-group select:focus {
  border-color: #023a76;
  background: #fff;
}

.form-group textarea {
  padding: 0.8rem 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1.25rem;
  font-family: inherit;
  background: #f9f9f9;
  color: #222;
  outline: none;
  transition: border-color 0.2s;
  min-height: 3.2em;
  height: 3.2em;
  width: calc(100% - 1em);
  box-sizing: border-box;
  resize: none;
  display: block;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.form-group textarea:focus {
  border-color: #023a76;
  background: #fff;
}

.form-group:last-child textarea {
  margin-bottom: 0;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}

#guestRestrictSection {
  margin-top: 0.5em;
}

#guestRestrictSection summary {
  cursor: pointer;
  color: #023a76;
  margin-bottom: 0.5em;
}

/* ===========================================================================
   Session scanning (USHER)
   =========================================================================== */

/* Persistent banner — it must never scroll away, so it lives in the header. */
/* The banner sits at the right-hand end of the header row, with the way back
   to the picker on the left where the app's other back buttons live. Its own
   text is right-aligned so it keeps a clean edge against the window. */
.session-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.15rem;
  min-width: 0;
}

.session-banner-main {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

/* The banner sits inside .app-header, which is a dark navy gradient with
   color:white - so everything here is light. The picker's dark-on-white
   palette rendered navy text on navy and was all but invisible. */
.session-banner-partner {
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
}

/* A long session title truncates rather than pushing the partner name out of
   the header or wrapping it onto a third line. The full title stays reachable
   as a tooltip, and the partner - which is what distinguishes two sessions
   sharing a name - is never the part that gets cut. */
.session-banner-name {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 38vw;
}

.session-banner-partner { flex-shrink: 0; }

/* Quieter than the name it introduces - it is there to say what the string is,
   not to compete with it. */
.session-banner-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

.session-banner-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
  flex-wrap: wrap;
}

.session-banner-when {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.session-banner-day {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
}

.session-banner-time { font-weight: 700; color: #fff; }

.session-banner-count {
  font-weight: 700;
  color: #9ecbff;
}

.session-banner-pending {
  background: #f39c12;
  color: #fff;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-weight: 600;
}

/* Session picker */
.session-picker-status {
  font-size: 0.85rem;
  color: #7f8c8d;
  margin-bottom: 0.75rem;
}

.session-picker-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 1200px;
}

/* A session card carries a handful of short lines, so stretching one across a
   desktop window wastes the space and makes the list harder to scan. The grid
   collapses to a single column on a phone, where full width is right. */
.session-partner-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.6rem;
  align-items: start;
}

.session-partner-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.95rem;
  padding: 0 0.2rem;
}

.session-partner-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7f8c8d;
  font-weight: 600;
}

.session-partner-name {
  font-weight: 700;
  color: #023a76;
}

.session-item {
  background: #fff;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

@media (hover: hover) {
.session-item:hover {
  border-color: #023a76;
  box-shadow: 0 2px 6px rgba(2, 58, 118, 0.12);
}
}

/* When the session runs. The day leads, because a conference spans several
   days and the same session name recurs across them. */
.session-item-when {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.session-item-day {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #023a76;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}

.session-item-date {
  font-weight: 600;
  font-size: 0.85rem;
  color: #2c3e50;
}

.session-item-time {
  font-weight: 700;
  font-size: 0.85rem;
  color: #023a76;
  margin-left: auto;
}

.session-item-name {
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.3;
}

.session-item-meta {
  font-size: 0.8rem;
  color: #7f8c8d;
  margin-top: 0.2rem;
}

/* Everything beside the camera: status, result card, rejected list. In
   portrait this stacks under the video; in landscape it is the second column. */
.session-scan-side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* The landscape rule is written for a phone on its side, but a desktop window
   is landscape too - so scope the session screen's own sizing here rather than
   inherit a 200px text column meant for a handset. */
@media (orientation: landscape) {
  #sessionScanScreen .scan-container {
    align-items: flex-start;
    padding-top: 2rem;
  }

  #sessionScanScreen .scan-text-container {
    max-width: none;
    width: 100%;
  }

  .session-scan-side {
    margin: 0;
    text-align: left;
  }
}

/* Result card — colour band plus the details needed to eyeball the person. */
.session-scan-result {
  margin: 0;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  border-left: 8px solid #7f8c8d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  padding: 0.8rem 1rem;
  cursor: pointer;
}

.session-scan-result.result-green { border-left-color: #2ecc71; }
.session-scan-result.result-amber { border-left-color: #f39c12; }
.session-scan-result.result-red   { border-left-color: #e74c3c; }

.session-scan-result .result-verdict {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}

.session-scan-result.result-green .result-verdict { color: #27ae60; }
.session-scan-result.result-amber .result-verdict { color: #e67e22; }
.session-scan-result.result-red   .result-verdict { color: #c0392b; }

.session-scan-result .result-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2c3e50;
  margin-top: 0.2rem;
}

.session-scan-result .result-detail {
  font-size: 0.85rem;
  color: #7f8c8d;
}

.session-scan-result .result-message {
  font-size: 0.85rem;
  color: #2c3e50;
  margin-top: 0.3rem;
}

/* Rejected scans stay visible until the underlying problem is corrected. */
.session-scan-review {
  margin: 0;
  width: 100%;
  background: #fff5f5;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: #721c24;
}

.session-scan-review h4 {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.session-scan-review-item { padding: 0.15rem 0; }

@media (max-width: 768px) {
  /* On a handset the back button takes most of the row, so let the banner wrap
     below it rather than squeeze the session title to a few characters. */
  .session-scan-header-content { flex-wrap: wrap; }

  .session-scan-header-content .flex-spacer { display: none; }

  .session-banner {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .session-banner-main,
  .session-banner-meta { justify-content: flex-start; }

  .session-banner-name { max-width: 100%; }
}