/* ── Twee-zijdige stat balkjes (two_sided_bar macro) ───────────────────── */

.dt-stat-bar__header {
  display: grid;
  grid-template-columns: var(--dt-stat-bar-val-w, 52px) 1fr auto 1fr var(--dt-stat-bar-val-w, 52px);
  gap: .5rem;
  align-items: center;
  color: var(--dt-text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0 .2rem .6rem;
}

.dt-stat-bar__header-label {
  text-align: center;
}

.dt-stat-bar__header-away {
  text-align: right;
}

.dt-stat-bar {
  --dt-stat-bar-val-w: 52px;
  display: grid;
  grid-template-columns: var(--dt-stat-bar-val-w) 1fr auto 1fr var(--dt-stat-bar-val-w);
  gap: .5rem;
  align-items: center;
  padding: .55rem .2rem;
  border-top: 1px solid rgb(255 255 255 / 7%);
}

.dt-stat-bar--sm { --dt-stat-bar-val-w: 36px; }
.dt-stat-bar--lg { --dt-stat-bar-val-w: 72px; }

.dt-stat-bar__val {
  font-size: .85rem;
  font-weight: 700;
}

.dt-stat-bar__val--home { text-align: right; }
.dt-stat-bar__val--away { text-align: left; }

.dt-stat-bar__label {
  font-size: .72rem;
  color: var(--dt-text-muted);
  white-space: nowrap;
  text-align: center;
  min-width: 120px;
}

.dt-stat-bar__track {
  height: 7px;
  background: rgb(255 255 255 / 8%);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}

.dt-stat-bar__track--home { justify-content: flex-end; }
.dt-stat-bar__track--away { justify-content: flex-start; }

.dt-stat-bar__fill {
  height: 100%;
  border-radius: 4px;
  transition: width .35s ease;
}

.dt-stat-bar__fill--home { background: var(--accent, #00e5a4); }
.dt-stat-bar__fill--away { background: #f59e0b; }

@media (width <= 800px) {
  .dt-stat-bar {
    --dt-stat-bar-val-w: 38px;
    gap: .3rem;
  }

  .dt-stat-bar__label {
    min-width: 80px;
    font-size: .65rem;
  }
}

/* ── W/D/L drie-segment balk (wdl_bar macro) ───────────────────────── */

.dt-wdl-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgb(255 255 255 / 8%);
  gap: 2px;
}

.dt-wdl-bar__seg {
  height: 100%;
  transition: width .35s ease;
  min-width: 0;
}

.dt-wdl-bar__seg--win  { background: #10b981; border-radius: 4px 0 0 4px; }
.dt-wdl-bar__seg--draw { background: #6b7280; }
.dt-wdl-bar__seg--loss { background: #ef4444; border-radius: 0 4px 4px 0; }

/* H2H widget container */
.dt-h2h {
  display: grid;
  gap: .75rem;
}

.dt-h2h__summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .8rem;
}

.dt-h2h__badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}

.dt-h2h__badge--win  { background: rgb(16 185 129 / 18%); color: #6ee7b7; }
.dt-h2h__badge--draw { background: rgb(107 114 128 / 22%); color: #d1d5db; }
.dt-h2h__badge--loss { background: rgb(239 68 68 / 18%); color: #fca5a5; }

.dt-h2h__recent {
  display: grid;
  gap: .35rem;
}

.dt-h2h__row {
  display: grid;
  grid-template-columns: 5rem 1fr auto 1fr auto;
  gap: .4rem;
  align-items: center;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: rgb(255 255 255 / 4%);
  font-size: .8rem;
}

.dt-h2h__row-date {
  color: var(--dt-text-muted);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}

.dt-h2h__row-home { text-align: right; }
.dt-h2h__row-away { text-align: left; }

.dt-h2h__row-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  min-width: 3rem;
}

.dt-h2h__row-result {
  font-size: .7rem;
  font-weight: 700;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.dt-h2h__row-result--w { background: rgb(16 185 129 / 22%); color: #6ee7b7; }
.dt-h2h__row-result--d { background: rgb(107 114 128 / 22%); color: #d1d5db; }
.dt-h2h__row-result--l { background: rgb(239 68 68 / 18%); color: #fca5a5; }

@media (width <= 600px) {
  .dt-h2h__row {
    grid-template-columns: 4rem 1fr auto 1fr auto;
    font-size: .75rem;
  }

  .dt-h2h__row-date {
    font-size: .65rem;
  }
}

/* Links inside side card rows (bijv. website-link in clubinfo) */
.dt-side-card a {
  color: var(--dt-text, #fff);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dt-side-card a:hover {
  color: var(--accent, #00e5a4);
}