/* =========================================================
   Taep-In — Design System
   Matches the Expo mobile app token-for-token.
   ========================================================= */

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --ti-bg:          #ffffff;
  --ti-fg:          #0a0a0a;
  --ti-card:        #fafafa;
  --ti-border:      #e5e5e5;
  --ti-primary:     #111111;
  --ti-primary-fg:  #ffffff;
  --ti-muted:       #f5f5f5;
  --ti-muted-fg:    #737373;
  --ti-accent:      #a3a3a3;
  --ti-success:     #16a34a;
  --ti-success-fg:  #ffffff;
  --ti-warning:     #d97706;
  --ti-warning-fg:  #ffffff;
  --ti-danger:      #dc2626;
  --ti-danger-fg:   #ffffff;

  --ti-r-card:  14px;
  --ti-r-btn:   12px;
  --ti-r-badge: 20px;

  /* Bootstrap shim */
  --bs-primary:        #111111;
  --bs-primary-rgb:    17, 17, 17;
  --bs-link-color:     #111111;
  --bs-link-hover-color: #444444;
}

/* ── Base ───────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ti-bg);
  color: var(--ti-fg);
  font-size: 1rem;
  line-height: 1.5;
}

/* ── Bootstrap overrides ────────────────────────────────── */
.bg-primary   { background-color: var(--ti-primary) !important; }
.text-primary { color: var(--ti-primary) !important; }
.border-primary { border-color: var(--ti-primary) !important; }
.badge.bg-primary { background-color: var(--ti-primary) !important; }

.btn-primary {
  --bs-btn-bg:           var(--ti-primary);
  --bs-btn-border-color: var(--ti-primary);
  --bs-btn-hover-bg:     #333333;
  --bs-btn-hover-border-color: #333333;
  --bs-btn-active-bg:    #000000;
}
.btn-outline-primary {
  --bs-btn-color:        var(--ti-primary);
  --bs-btn-border-color: var(--ti-primary);
  --bs-btn-hover-bg:     var(--ti-primary);
  --bs-btn-hover-color:  var(--ti-primary-fg);
}

/* All buttons: Inter, font-weight 600, radius 12 */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-radius: var(--ti-r-btn) !important;
}

/* Cards: no shadow, border only, radius 14 */
.card {
  border-radius: var(--ti-r-card) !important;
  border-color: var(--ti-border) !important;
  background-color: var(--ti-card) !important;
  box-shadow: none !important;
}

/* Focus rings */
.form-control:focus, .form-select:focus {
  border-color: var(--ti-primary);
  box-shadow: 0 0 0 0.18rem rgba(17,17,17,0.12);
}

/* Navbar */
.navbar-brand {
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* ── Stat Cards — matches mobile StatCard ───────────────── */
.ti-stats {
  display: flex;
  gap: 10px;
}
.ti-stat {
  flex: 1;
  background: var(--ti-card);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-r-card);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.ti-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.ti-stat-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ti-fg);
}
.ti-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ti-muted-fg);
  text-align: center;
  line-height: 1.3;
}

/* ── Section header — matches mobile sectionHeader ─────── */
.ti-section-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ti-muted-fg);
  margin: 20px 0 8px;
}

/* ── Check-in rows — matches mobile renderItem ──────────── */
.ci-rows { display: flex; flex-direction: column; gap: 8px; }
.ci-row {
  background: var(--ti-card);
  border: 1px solid var(--ti-border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.ci-time {
  background: var(--ti-accent);
  color: var(--ti-fg);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  flex-shrink: 0;
  opacity: 0.7;
}
.ci-info   { flex: 1; min-width: 0; }
.ci-name   { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-team   { font-size: 13px; color: var(--ti-muted-fg); margin-top: 2px; }
.ci-swag   { font-size: 18px; color: var(--ti-warning); flex-shrink: 0; }

/* ── Search rows — matches mobile resultRow ─────────────── */
.vol-rows  { display: flex; flex-direction: column; gap: 8px; }
.vol-row {
  background: var(--ti-card);
  border: 1px solid var(--ti-border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.12s ease;
  user-select: none;
}
.vol-row:hover { background: var(--ti-muted); }
.vol-row:active { background: var(--ti-border); }

.vol-avatar {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--ti-primary);
  color: var(--ti-primary-fg);
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vol-info  { flex: 1; min-width: 0; }
.vol-name  { font-size: 16px; font-weight: 600; }
.vol-meta  { font-size: 13px; color: var(--ti-muted-fg); margin-top: 3px; }
.vol-right { display: flex; align-items: center; gap: 6px; color: var(--ti-muted-fg); }
.vol-dot   { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; }

/* ── Volunteer Card — matches VolunteerCard.tsx ──────────── */
.vc {
  background: var(--ti-card);
  border: 1px solid var(--ti-border);
  border-radius: 20px;
  padding: 20px;
}
.vc-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.vc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--ti-primary);
  color: var(--ti-primary-fg);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vc-name { font-size: 20px; font-weight: 700; line-height: 1.2; }
.vc-id   { font-size: 12px; color: var(--ti-muted-fg); margin-top: 2px; font-family: 'Courier New', monospace; }

.vc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.vc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--ti-r-badge);
  font-size: 12px;
  font-weight: 600;
}
.vc-tag.team  { background: rgba(163,163,163,0.25); color: var(--ti-fg); }
.vc-tag.shirt { background: rgba(163,163,163,0.25); color: var(--ti-fg); }
.vc-tag.active   { background: rgba(22,163,74,0.15);  color: var(--ti-success); }
.vc-tag.inactive { background: rgba(0,0,0,0.07);       color: var(--ti-muted-fg); }

.vc-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
}
.vc-msg.success { background: rgba(22,163,74,0.12);  color: var(--ti-success); }
.vc-msg.warning { background: rgba(217,119,6,0.12);  color: var(--ti-warning); }
.vc-msg.danger  { background: rgba(220,38,38,0.12);  color: var(--ti-danger); }

.vc-actions { display: flex; flex-direction: column; gap: 10px; }
.vc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: var(--ti-r-btn);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.vc-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.vc-btn.ci      { background: var(--ti-success); color: var(--ti-success-fg); }
.vc-btn.ci.done { background: rgba(22,163,74,0.15); color: var(--ti-success); border: 1.5px solid var(--ti-success); }
.vc-btn.sw      { background: var(--ti-warning); color: var(--ti-warning-fg); }
.vc-btn.sw.done { background: rgba(217,119,6,0.15); color: var(--ti-warning); border: 1.5px solid var(--ti-warning); }

/* Empty state */
.ti-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 60px 32px;
  color: var(--ti-muted-fg);
  text-align: center;
}
.ti-empty i { font-size: 3.25rem; }
.ti-empty-title { font-size: 18px; font-weight: 500; margin-top: 8px; }
.ti-empty-sub   { font-size: 14px; line-height: 1.5; }

/* ── Dark Mode ──────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --ti-bg:        #000000;
  --ti-fg:        #fafafa;
  --ti-card:      #0a0a0a;
  --ti-border:    #262626;
  --ti-primary:   #ffffff;
  --ti-primary-fg:#000000;
  --ti-muted:     #171717;
  --ti-muted-fg:  #a3a3a3;
  --ti-accent:    #737373;

  --bs-primary:     #ffffff;
  --bs-primary-rgb: 255,255,255;
}
[data-bs-theme="dark"] .bg-primary  { background-color: #111111 !important; }
[data-bs-theme="dark"] .text-primary { color: #e5e5e5 !important; }
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg:    #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-color: #000000;
  --bs-btn-hover-bg: #e5e5e5;
}
[data-bs-theme="dark"] .vc-tag.team,
[data-bs-theme="dark"] .vc-tag.shirt { background: rgba(163,163,163,0.15); }
[data-bs-theme="dark"] .vc-tag.inactive { background: rgba(255,255,255,0.07); }

/* ── Spinner / animations ───────────────────────────────── */
@keyframes popIn {
  0%   { transform: scale(0.4); opacity: 0; }
  80%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}
.pop-in { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }

@keyframes spinAnim { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spinAnim 0.6s linear; }

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .navbar, footer, .no-print { display: none !important; }
}