/* ---- Teams: Team-Auswahl, Team-Liste, Fahrerliste (common.js, tab-teams.js, tab-setup.js) ---- */
.team-sel-card { background: var(--md-sys-color-surface-container-high); border-radius: 12px;
                 padding: 14px 16px; margin-bottom: 8px;
                 border: 1px solid var(--md-sys-color-outline-variant);
                 cursor: pointer; display: flex; align-items: center; gap: 12px;
                 transition: background .15s; -webkit-tap-highlight-color: transparent; }
.team-sel-card:hover { background: var(--md-sys-color-surface-container-highest); }
.team-sel-dot { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.team-sel-name { font-weight: 700; font-size: 16px; }
.team-sel-card .hint { margin-top: 2px; }
.team-sel-card .hint.is-current { margin-top: 0; }
#teamSelectList > p { margin: 0 0 8px; }
.slug-hint { font-size: 11px; color: var(--md-sys-color-on-surface-variant); margin-top: 3px; }
#newTeamBtn { margin-bottom: 12px; }
#riderList { margin-bottom: 8px; }
.team-page-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 8px;
                  border-bottom: 1px solid var(--md-sys-color-outline-variant);
                  border-radius: 10px; cursor: pointer; }
.team-page-card.is-roster { background: var(--md-sys-color-secondary-container); }
.team-page-avatar-wrap { position: relative; flex-shrink: 0; }
.team-page-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.team-page-roster-badge { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px;
                           border-radius: 50%; background: var(--md-sys-color-tertiary); color: #fff;
                           display: flex; align-items: center; justify-content: center;
                           font-size: 11px; border: 2px solid var(--md-sys-color-background); }
.team-page-info { flex: 1; min-width: 0; }
/* Teamname nur Anzeige; umbenennen über „Bearbeiten“ */
.team-page-name { font-weight: 600; font-size: 15px; padding: 2px 4px;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-page-slug { font-size: 12px; color: var(--md-sys-color-on-surface-variant); margin-top: 1px; }
.team-page-drag-handle { color: var(--md-sys-color-on-surface-variant); flex-shrink: 0;
                         cursor: grab; display: flex; align-items: center; touch-action: none; }
/* Fahrerliste: ausgewählter Fahrer hinterlegt, Aktionen (Details, Löschen) als eigene Zeile darunter */
.rider-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0;
             border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.rider-row.is-selected { background: var(--md-sys-color-secondary-container); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
/* Fahrer aktiv/deaktiviert: deaktivierte Zeilen gedimmt, nur die Checkbox bleibt kräftig */
.rider-enabled-toggle { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.rider-enabled-toggle input { width: 18px; height: 18px; accent-color: var(--md-sys-color-primary); cursor: inherit; }
.rider-enabled-toggle:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.rider-row.rider-disabled > :not(.rider-enabled-toggle) { opacity: .45; }
/* Abzeichen (Startnummer bzw. Farbkreis) + Name als eine Spalte, öffnet #riderBadgeModal; 40 px Touch-Ziel.
   Wie .live-name-line: Werte rechtsbündig darübergelegt, ein zu langer Name blendet davor aus (mask) */
.rider-name-line { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; --stats-w: 96px; }
.rider-badge-btn { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 8px; overflow: hidden;
                   background: transparent; border: none; cursor: pointer; color: var(--md-sys-color-on-surface); text-align: left; font: inherit;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--stats-w) - 32px), transparent calc(100% - var(--stats-w) - 6px));
          mask-image: linear-gradient(to right, #000 calc(100% - var(--stats-w) - 32px), transparent calc(100% - var(--stats-w) - 6px)); }
.rider-row-name { font-weight: 600; font-size: 15px; white-space: nowrap; }
.rider-stats { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none;
               text-align: right; font-size: 12px; line-height: 1.3; white-space: nowrap;
               color: var(--md-sys-color-on-surface-variant); }
.rider-badge-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
/* Dialog „Fahrer bearbeiten“: Vorschau oben */
.rb-head { display: flex; align-items: center; gap: 10px; }
#rbName { font-weight: 600; }