/* ============================================================
   index.css  —  Home dashboard page
   Requires: base.css
   ============================================================ */

/* ── Widget (home-page card variant) ── */
.widget {
  background: var(--surface);
  overflow: hidden;
}
.widget-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  gap: .5rem;
}
.widget-header h2 { font-size: .95rem; font-weight: 700; }
.widget-body    { padding: .75rem 1rem; }
.widget-filters {
  padding: .5rem 1rem; border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.widget-filters::-webkit-scrollbar { display: none; }

/* ── Filter tabs (discipline) ── */
.filter-tabs { display: flex; gap: .4rem; width: max-content; }
.filter-btn {
  padding: .3rem .75rem; border-radius: 99px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .15s; font-family: inherit; white-space: nowrap;
}
.filter-btn:hover { border-color: var(--muted); color: var(--text); }
.filter-btn.active                           { background: var(--surface2); border-color: var(--text); color: var(--text); }
.filter-btn[data-filter="weg"].active        { background: rgba(245,158,11,.18); border-color: var(--weg); color: var(--weg); }
.filter-btn[data-filter="veldrijden"].active { background: rgba(52,211,153,.12); border-color: var(--veldrijden); color: var(--veldrijden); }
.filter-btn[data-filter="mtb"].active        { background: rgba(167,139,250,.14); border-color: var(--mtb); color: var(--mtb); }

/* ── Latest results ── */
.results-list { display: flex; flex-direction: column; gap: 1.25rem; }
.result-date-heading {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  padding-bottom: .5rem; border-bottom: 1px solid var(--border); margin-bottom: .6rem;
}
.no-results {
  font-size: .82rem; color: var(--muted); padding: .35rem .25rem;
}
.result-event-group { margin-bottom: .75rem; }
.result-event-group:last-child { margin-bottom: 0; }
.result-event-name {
  font-size: .85rem; font-weight: 700;
  margin-bottom: .3rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.race-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .5rem; border-radius: 6px; gap: .5rem; transition: background .1s;
}
.race-row:hover  { background: var(--surface2); }
.race-row-left   { flex: 1; min-width: 0; }
.race-cat        { font-size: .68rem; color: var(--muted); font-weight: 600; margin-bottom: .1rem; }
.race-winner     { font-size: .85rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-winner .p1 { color: var(--accent); font-weight: 700; }
.race-others     { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .05rem; }
.race-link       { font-size: .8rem; color: var(--border); text-decoration: none; flex-shrink: 0; padding: .25rem; }
.race-link:hover { color: var(--accent); }

/* ── Older results (collapsible) ── */
details.result-older-group { list-style: none; }
details.result-older-group > summary { list-style: none; }
details.result-older-group > summary::-webkit-details-marker { display: none; }
.result-older-summary {
  display: flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  padding-bottom: .5rem; border-bottom: 1px solid var(--border); margin-bottom: .6rem;
  cursor: pointer; user-select: none; list-style: none;
}
.result-older-summary::after {
  content: '›'; margin-left: auto; font-size: .9rem; line-height: 1;
  transition: transform .2s; display: inline-block;
}
details.result-older-group[open] > .result-older-summary::after { transform: rotate(90deg); }
.older-count {
  font-size: .65rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px;
  background: var(--surface2); color: var(--muted); text-transform: none; letter-spacing: 0;
}
details.result-older-group .result-date-group { margin-top: .75rem; }

.cta-link {   font-size: 12px;color: var(--accent); }
.top-score-label {   font-size: 10px;color: var(--muted); }
.upcoming-list { display: flex; flex-direction: column; gap: .5rem; }
.upcoming-card {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .75rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface2);
  transition: border-color .15s; min-height: 44px;
}
.upcoming-card:active { border-color: var(--accent); }
.upcoming-date-block {
  text-align: center; flex-shrink: 0;
  background: var(--bg); border-radius: 6px; padding: .3rem .55rem; min-width: 40px;
}
/* .upcoming-day / .upcoming-month from base.css */
.upcoming-cats { font-size: .7rem; color: var(--muted); margin-top: .1rem;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 300px;}
/* override base upcoming-day size for index block */
.upcoming-date-block .upcoming-day { font-size: 1.25rem; font-weight: 900; }
.upcoming-meta  { font-size: .75rem; color: var(--muted); margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcoming-name  { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 300px; }

/* ── Spotlight ── */
.spotlight-card { position: relative; overflow: hidden; }
.spotlight-card::before {
  content: ''; position: absolute; top: -50px; right: -30px;
  width: 180px; height: 180px;
  pointer-events: none;
}
.spotlight-head   { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.spotlight-avatar {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface2); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; user-select: none;
}
.spotlight-name   { font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.spotlight-sub    { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.spotlight-scores {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .5rem; margin: .75rem 0;
}
.spotlight-score  { background: var(--surface2); border-radius: 8px; padding: .5rem; text-align: center; }
.score-val        { font-size: 1.2rem; font-weight: 800; color: var(--accent); line-height: 1; }
.score-label      { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: .15rem; }
.spotlight-pills  { display: flex; gap: .35rem; flex-wrap: wrap; }
.pill             { font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 99px; background: var(--surface2); color: var(--text); }
.pill.gold        { background: rgba(245,158,11,.18); color: var(--accent); }
.pill.green       { background: rgba(34,197,94,.15);  color: var(--green); }
.btn-primary {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--buttontext);
  font-size: .85rem; font-weight: 700; padding: .65rem 1rem;
  border-radius: 8px; text-decoration: none;
  transition: background .15s; width: 100%; margin-top: .75rem;
}
.btn-primary:active { background: #fbbf24; }

/* ── Top lists ── */
.two-col { display: flex; flex-direction: column; gap: 8px; }
.top-list { list-style: none; }
.top-list-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .75rem; border-radius: 6px; transition: background .1s; min-height: 44px;
}
.top-list-item:hover { background: var(--surface2); }
.top-rank        { font-size: .75rem; font-weight: 900; width: 20px; text-align: center; flex-shrink: 0; color: var(--muted); }
.top-rank.gold   { color: #fbbf24; }
.top-rank.silver { color: #94a3b8; }
.top-rank.bronze { color: #d97706; }
.top-info        { flex: 1; min-width: 0; }
.top-name        { font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-sub         { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-score       { text-align: right; flex-shrink: 0; }
.top-score-val   { font-size: .95rem; font-weight: 800; color: var(--accent); }
.top-score-lbl   { font-size: .6rem; color: var(--muted); display: block; }

/* ── Responsive ── */
@media (min-width: 600px) {
  .page { max-width: 95%; margin: 0 auto; padding: 1.5rem; gap: 1.5rem; }
  .widget { border-radius: var(--radius); border: 1px solid var(--border); }
  .widget-header  { padding: .9rem 1.25rem; }
  .widget-body    { padding: 1rem 1.25rem; }
  .widget-filters { padding: .6rem 1.25rem; }
  .spotlight-avatar { width: 72px; height: 72px; font-size: 1.7rem; }
  .spotlight-name   { font-size: 1.3rem; }
  .btn-primary      { width: auto; justify-content: flex-start; }
  .two-col          { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .upcoming-cats { width: 100%;}
  .upcoming-name { width: 100%;}
}

@media (min-width: 900px) {
  .page           { padding: 2rem 1.5rem; gap: 2rem; }
  .widget-header  { padding: 1rem 1.5rem; }
  .widget-body    { padding: 1.1rem 1.5rem; }
  .widget-filters { padding: .65rem 1.5rem; }
  .upcoming-card:hover { border-color: var(--accent); }
  .spotlight-card { display: flex; gap: 1.5rem; align-items: flex-start; }
  .spotlight-card::before { top: -60px; right: -40px; width: 240px; height: 240px; }
  .spotlight-body { flex: 1; min-width: 0; }
  .spotlight-cta  { flex-shrink: 0; }
  .btn-primary    { margin-top: 0; }
}