/* ══════════════════════════════════════════════════════════════════════
   Sportart des Vereins (Trampolin / Doppelmini / Turnen)
   Siehe app/services/sport_service.py. <html> trägt data-sport,
   data-sport-hd (0/1) und data-sport-counts (0/1).

   Elemente, die nur für bestimmte Sportarten gelten, werden markiert mit
     data-sport="hd"      → nur wenn der Verein HD misst (Trampolin)
     data-sport="counts"  → nur wenn Sprünge gezählt werden (Trampolin, Doppelmini)
     data-sport="tramp"   → nur Trampolin (z. B. Eurotramp-Positionen)
     data-sport="tof"     → nur wenn Flugzeit gemessen wird (Trampolin, Doppelmini)
     data-sport="turnen"  → nur im Turnen-Modus
   Es wird nur ausgeblendet – gespeicherte Daten bleiben unverändert.
   ══════════════════════════════════════════════════════════════════════ */

html[data-sport-hd="0"] [data-sport~="hd"],
html[data-sport-counts="0"] [data-sport~="counts"],
html:not([data-sport="trampolin"]) [data-sport~="tramp"],
html[data-sport-tof="0"] [data-sport~="tof"],
html:not([data-sport="turnen"]) [data-sport~="turnen"] {
  display: none !important;
}

/* Plakette in der Kopfzeile */
.sport-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--header-text-color, var(--text-color));
  background: rgba(124, 77, 255, 0.14);
  border: 1px solid rgba(124, 77, 255, 0.35);
}
.sport-badge--doppelmini { background: rgba(14, 165, 233, 0.14); border-color: rgba(14, 165, 233, 0.4); }
.sport-badge--turnen { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.4); }
.site-header__context { gap: 8px; }

/* Auswahl in den Vereinseinstellungen */
.sport-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.sport-choice__option { display: block; cursor: pointer; }
.sport-choice__option input { position: absolute; opacity: 0; pointer-events: none; }
.sport-choice__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 2px solid var(--border-color, rgba(0, 0, 0, 0.12));
  background: var(--card-background, #fff);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.sport-choice__icon { font-size: 1.8rem; line-height: 1; }
.sport-choice__title { font-weight: 800; font-size: 1.05rem; color: var(--text-color); }
.sport-choice__desc { font-size: 0.85rem; color: var(--light-text, #6c738b); line-height: 1.4; }
.sport-choice__option:hover .sport-choice__card { border-color: rgba(124, 77, 255, 0.5); }
.sport-choice__option input:checked + .sport-choice__card {
  border-color: var(--primary-color, #7c4dff);
  background: rgba(124, 77, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.18);
}
.sport-choice__option input:focus-visible + .sport-choice__card { outline: 2px solid var(--primary-color, #7c4dff); outline-offset: 2px; }

@media (max-width: 600px) {
  .sport-badge { padding: 3px 8px; font-size: 0.72rem; }
}

/* Runden-Einträge: HD-Balken/-Mittellinie im Sprungdiagramm */
html[data-sport-hd="0"] .chart__bar--hd,
html[data-sport-hd="0"] .chart__avg-line--hd,
html[data-sport-hd="0"] .chart__avg-label--hd { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   Turnen-Modus (turnen_service, partials/_turnen_training.html,
   Statistik, Einstellungen, Athletenprofil)
   ══════════════════════════════════════════════════════════════════════ */
.tt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-chip {
  --tt-color: #10b981;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 14px 6px 6px;
  border-radius: 999px; cursor: pointer;
  border: 2px solid var(--border-color, rgba(0, 0, 0, 0.12));
  background: var(--card-background, #fff); color: var(--text-color);
  font-weight: 700; font-size: 0.92rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.tt-chip:hover { border-color: var(--tt-color); }
.tt-chip.is-active {
  border-color: var(--tt-color);
  background: color-mix(in srgb, var(--tt-color) 14%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-color) 22%, transparent);
}
.tt-chip:focus-visible { outline: 2px solid var(--tt-color); outline-offset: 2px; }
.tt-chip__short, .tt-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px;
  background: var(--tt-color, #10b981); color: #fff;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em;
}
.tt-badge { min-width: 28px; height: 24px; font-size: 0.7rem; }
.tt-chip__icon { width: 28px; height: 28px; flex-shrink: 0; }
body.night-mode .tt-chip__icon { filter: brightness(0) invert(1); }
.tt-more { margin-top: 8px; }
.tt-more summary { cursor: pointer; font-size: 0.85rem; color: var(--light-text, #6c738b); margin-bottom: 8px; }
.tt-hint { margin: 8px 0 0; font-size: 0.8rem; color: var(--light-text, #6c738b); }

.tt-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tt-counter { display: flex; flex-direction: column; gap: 4px; }
.tt-counter__main {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 92px; padding: 10px 6px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--tt-c); background: color-mix(in srgb, var(--tt-c) 10%, transparent);
  color: var(--text-color); font-weight: 700;
}
.tt-counter__main:active { transform: scale(0.98); }
.tt-counter__icon { font-size: 1.3rem; line-height: 1; color: var(--tt-c); }
.tt-counter__label { font-size: 0.82rem; }
.tt-counter__value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.tt-counter__minus {
  min-height: 36px; border-radius: 10px; cursor: pointer; font-size: 1.1rem;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
  background: var(--card-background, #fff); color: var(--text-color);
}
.tt-counter--ok { --tt-c: #16a34a; }
.tt-counter--fail { --tt-c: #dc2626; }
.tt-counter--warn { --tt-c: #d97706; }
.tt-summary { margin: 10px 0 4px; font-weight: 700; font-size: 0.92rem; }
.tt-assist-label { display: block; margin-top: 12px; }
.tt-assist { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-assist__option { position: relative; cursor: pointer; }
.tt-assist__option input { position: absolute; opacity: 0; pointer-events: none; }
.tt-assist__option span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border-radius: 10px;
  border: 2px solid var(--border-color, rgba(0, 0, 0, 0.12));
  background: var(--card-background, #fff); color: var(--text-color); font-size: 0.85rem; font-weight: 600;
}
.tt-assist__option input:checked + span {
  border-color: var(--primary-color, #7c4dff); background: rgba(124, 77, 255, 0.1);
}
.tt-assist__option input:focus-visible + span { outline: 2px solid var(--primary-color, #7c4dff); outline-offset: 2px; }

.tt-history__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tt-history__stats[hidden], .tt-history .no-data[hidden] { display: none; }
.tt-history__assist { font-size: 1rem; }
.tt-history__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tt-history__list li {
  display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px;
  background: var(--background-color, rgba(0, 0, 0, 0.03)); font-size: 0.82rem;
}
.tt-history__val { font-weight: 700; white-space: nowrap; }

@media (max-width: 600px) {
  .tt-counter__main { min-height: 80px; }
  .tt-chip { font-size: 0.85rem; }
}

/* Geräteprogramm (Einstellungen / Athletenprofil) */
.tt-program { display: flex; flex-direction: column; gap: 12px; }
.tt-program__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-program__apparatus { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-check { position: relative; cursor: pointer; }
.tt-check input { position: absolute; opacity: 0; pointer-events: none; }
.tt-check > span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px 4px 4px;
  border-radius: 999px; border: 2px solid var(--border-color, rgba(0, 0, 0, 0.12));
  background: var(--card-background, #fff); color: var(--text-color); font-weight: 600; font-size: 0.88rem;
}
.tt-check--plain > span { padding: 4px 12px; }
.tt-check input:checked + span { border-color: var(--primary-color, #7c4dff); background: rgba(124, 77, 255, 0.1); }
.tt-check input:focus-visible + span { outline: 2px solid var(--primary-color, #7c4dff); outline-offset: 2px; }

/* Statistik / Dashboard */
.tt-bars { display: flex; flex-direction: column; gap: 8px; }
.tt-bar { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; gap: 10px; align-items: center; }
.tt-bar__label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.88rem; }
.tt-bar__track { height: 14px; border-radius: 999px; background: var(--border-color, rgba(0, 0, 0, 0.08)); overflow: hidden; }
.tt-bar__track, .tt-bar__fill { display: block; }
.tt-bar__fill { height: 100%; min-width: 4px; border-radius: 999px; background: var(--tt-color, #10b981); }
.tt-bar__value { font-size: 0.82rem; white-space: nowrap; color: var(--light-text, #6c738b); }
.tt-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tt-table th, .tt-table td { padding: 8px 6px; border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)); text-align: left; }
.tt-table th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--light-text, #6c738b); }
.tt-table td.num, .tt-table th.num { text-align: right; white-space: nowrap; }
.tt-table-wrap { overflow-x: auto; }
.tt-rate { font-weight: 800; }
.tt-rate--good { color: #16a34a; }
.tt-rate--mid { color: #d97706; }
.tt-rate--low { color: #dc2626; }
.tt-warning {
  padding: 10px 12px; border-radius: 10px; font-size: 0.86rem;
  background: rgba(217, 119, 6, 0.12); border: 1px solid rgba(217, 119, 6, 0.35);
}
@media (max-width: 600px) {
  .tt-bar { grid-template-columns: 1fr auto; }
  .tt-bar__track { grid-column: 1 / -1; grid-row: 2; }
}