/* Pro QR attendance modes: check-in, finish, station/checkpoint */
.qr-hub-panel {
  overflow: hidden;
}

.qr-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.qr-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 94px;
  padding: 16px;
  border: 1px solid var(--line, #e6e9f0);
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(16,24,40,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.qr-mode-card:hover {
  transform: translateY(-1px);
  border-color: rgba(28,124,84,.35);
}

.qr-mode-card.active {
  border-color: rgba(28,124,84,.55);
  background: linear-gradient(180deg, #f3fbf7 0%, #ffffff 100%);
  box-shadow: 0 14px 32px rgba(28,124,84,.12);
}

.qr-mode-card input {
  position: absolute;
  top: 14px;
  right: 14px;
  width: auto;
  margin: 0;
}

.qr-mode-card span {
  font-weight: 900;
  color: var(--ink, #152033);
}

.qr-mode-card small {
  color: var(--muted, #667085);
  font-weight: 700;
}

.station-picker-panel {
  padding: 14px 16px;
  border: 1px solid #d9efe5;
  border-radius: 18px;
  background: #f6fffa;
  margin-bottom: 14px;
}

.qr-scanner-controls {
  margin-top: 12px;
}

.qr-reader {
  min-height: 260px;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: #f8fafc;
  overflow: hidden;
  margin: 14px 0;
}

.manual-qr-form {
  padding-top: 10px;
  border-top: 1px solid var(--line, #e6e9f0);
}

.is-checked-in-row td:first-child::after {
  content: 'Checked in';
  display: inline-flex;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #dcfae6;
  color: #067647;
  font-size: .74rem;
  font-weight: 900;
}

@media (max-width: 900px) {
  .qr-mode-grid {
    grid-template-columns: 1fr;
  }
}
