/* 签到系统移动端补充样式：只服务于 / 和 /search 两个签到页面。
   基础样式仍来自 styles.css；本文件不修改 styles.css。 */

.checkin-nav {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}

.checkin-nav-item {
  flex: 1;
  text-align: center;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.checkin-nav-item:active {
  transform: scale(0.99);
}

.checkin-nav-item.active {
  color: #1b1b1f;
  background: linear-gradient(135deg, #ffd166, #f0a93b);
  border-color: transparent;
}

/* styles.css gives .flow-table min-width:760px; the check-in pages are
   mobile-first so we override it here and let cells wrap instead. */
.flow-table {
  min-width: 0;
}

@media (max-width: 560px) {
  .checkin-header {
    gap: 8px;
  }
  .checkin-header h1 {
    font-size: 1.35rem;
  }
  .live-dot {
    font-size: 0.72rem;
    padding: 5px 8px;
  }
  .count-card strong {
    font-size: 2rem;
  }
  .checkin-card {
    padding: 13px;
    border-radius: 15px;
  }
  .card-head h2 {
    font-size: 1rem;
  }
  /* 流动表/签到记录均为 姓名 / 时间 / 操作 三列。 */
  .flow-table th:nth-child(1),
  .flow-table td:nth-child(1) {
    width: 42%;
  }
  .flow-table th:nth-child(2),
  .flow-table td:nth-child(2) {
    width: 34%;
  }
  .flow-table th:nth-child(3),
  .flow-table td:nth-child(3) {
    width: 24%;
  }
  .search-grid {
    grid-template-columns: 1fr;
  }
  .search-grid input {
    grid-column: span 1;
  }
  .search-grid .button {
    grid-column: span 1;
  }
}

@media (max-width: 380px) {
  .checkin-nav {
    gap: 6px;
  }
  .checkin-nav-item {
    padding: 10px 8px;
    font-size: 0.9rem;
  }
}