/* ═══════════════════════════════════════════════════════════
   components.css — Gemeinsam genutzte UI-Komponenten
   Wird von: athlet.html, wettkampf.html, admin.html
   ═══════════════════════════════════════════════════════════ */

/* ── Suche ─────────────────────────────────────────────── */
.search-wrap { position:relative; max-width:520px; margin:0 auto 20px; }
.search-input {
  width:100%; padding:12px 16px 12px 42px;
  border:2px solid #e8e8e8; border-radius:12px;
  font-size:15px; background:#fff; color:#111;
  transition:border-color 0.15s, box-shadow 0.15s;
}
.search-input:focus { outline:none; border-color:#1e3a5f; box-shadow:0 0 0 4px rgba(30,58,95,0.08); }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:16px; color:#aaa; }
.suggestions {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:#fff; border:1px solid #e8e8e8; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.1); z-index:200;
  max-height:320px; overflow-y:auto;
}
.sug-year {
  padding:6px 14px; font-size:10px; font-weight:700; color:#aaa;
  text-transform:uppercase; letter-spacing:0.5px; background:#f9f9f9;
  border-bottom:1px solid #f0f0f0;
}
.suggestion-item {
  padding:10px 14px; cursor:pointer; display:flex;
  align-items:center; gap:10px; transition:background 0.1s;
}
.suggestion-item:hover { background:#f5f8ff; }
.suggestion-item:not(:last-child) { border-bottom:1px solid #f5f5f5; }
.sug-avatar {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}
.sug-avatar-m { background:#dbeafe; color:#1e40af; }
.sug-avatar-w { background:#fce7f3; color:#9d174d; }
.sug-course { font-size:10px; padding:2px 6px; border-radius:6px; font-weight:600; }
.sug-name { font-size:13px; font-weight:600; }
.sug-meta { font-size:11px; color:#888; }

/* ── Tabs ──────────────────────────────────────────────── */
.tabs {
  display:flex; gap:4px; margin-bottom:14px; background:#fff;
  border:1px solid #e8e8e8; border-radius:10px; padding:4px; flex-wrap:wrap;
}
.tab-btn {
  flex:1; min-width:90px; padding:8px 6px; border:none; background:none;
  border-radius:7px; font-size:12px; font-weight:500; color:#888;
  cursor:pointer; transition:all 0.15s; white-space:nowrap;
}
.tab-btn.active { background:#1e3a5f; color:#fff; }
.tab-btn:hover:not(.active) { background:#f5f5f5; color:#333; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── KPI-Kacheln ───────────────────────────────────────── */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:14px; }
.kpi { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:14px 16px; text-align:center; }
.kpi-value { font-size:24px; font-weight:800; color:#1e3a5f; line-height:1; }
.kpi-label { font-size:11px; color:#888; margin-top:4px; }
.kpi-sub   { font-size:10px; color:#bbb; margin-top:2px; }
.kpi.highlight { background:#1e3a5f; border-color:#1e3a5f; }
.kpi.highlight .kpi-value { color:#fff; }
.kpi.highlight .kpi-label { color:rgba(255,255,255,0.7); }
.kpi.gold   { border-color:#f59e0b; background:#fffbeb; }
.kpi.gold .kpi-value { color:#d97706; }
.kpi.green  { border-color:#10b981; background:#f0fdf4; }
.kpi.green .kpi-value { color:#059669; }
.kpi.red    { border-color:#ef4444; }
.kpi.red .kpi-value { color:#dc2626; }

/* ── Card ──────────────────────────────────────────────── */
.card { background:#fff; border:1px solid #e8e8e8; border-radius:12px; overflow:hidden; margin-bottom:14px; }
.card-title {
  padding:12px 16px; background:#f9f9f9; border-bottom:1px solid #eee;
  font-size:12px; font-weight:600; color:#1e3a5f;
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.card-body { padding:0; }

/* ── Datentabelle ──────────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; font-size:12px; }
.data-table th {
  text-align:left; padding:8px 12px; background:#f9f9f9;
  border-bottom:1px solid #eee; font-size:10px; font-weight:600;
  color:#888; text-transform:uppercase; letter-spacing:0.4px;
}
.data-table td { padding:9px 12px; border-bottom:1px solid #f5f5f5; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:#f9fbff; }
.data-table .num { text-align:right; font-variant-numeric:tabular-nums; }

/* ── Rang-Badge ────────────────────────────────────────── */
.rank {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; font-size:11px; font-weight:700;
}
.rank-1 { background:#fef3c7; color:#d97706; }
.rank-2 { background:#f1f5f9; color:#64748b; }
.rank-3 { background:#fef3c7; color:#b45309; }
.rank-n { background:#f5f5f5; color:#999; font-size:10px; }

/* ── Tags ──────────────────────────────────────────────── */
.tag-pb  { background:#d1fae5; color:#065f46; font-size:10px; padding:1px 6px; border-radius:6px; font-weight:600; }
.tag-cr  { background:#dbeafe; color:#1e40af; font-size:10px; padding:1px 6px; border-radius:6px; font-weight:600; }
.tag-dsq { background:#fee2e2; color:#991b1b; font-size:10px; padding:1px 6px; border-radius:6px; font-weight:600; }

/* ── Leerzustand ───────────────────────────────────────── */
.welcome-state { text-align:center; padding:60px 20px; color:#bbb; }
.welcome-state-icon { font-size:48px; margin-bottom:12px; }
.welcome-state p { font-size:14px; }

/* ── Profil-Avatar (athlet + admin) ───────────────────── */
.profile-avatar {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; flex-shrink:0;
}