/* Gemeinsames Einstellungsformular: Freie Session (#page-practice) und Runden-Editor der Championship.
   Markup aus public/js/session-fields.js (renderSessionSettings). */
.session-form .card { background:var(--color-surface); margin-bottom:12px; padding:14px; border-radius:var(--radius-md); border:1px solid var(--color-border); }
.session-form .card-title { font-size:0.9rem; font-weight:600; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--color-border); display:flex; justify-content:space-between; align-items:center; }
.session-form .field-row { display:flex; gap:10px; margin-bottom:10px; }
.session-form .field { flex:1; display:flex; flex-direction:column; }
.session-form .field label { font-size:0.72rem; color:var(--color-text-muted); text-transform:uppercase; margin-bottom:4px; font-weight:600; }
.session-form input[type="number"],
.session-form input[type="time"],
.session-form input[type="date"],
.session-form input[type="range"],
.session-form input[type="text"],
.session-form select { background:var(--color-bg); border:1px solid var(--color-border); color:var(--color-text); padding:7px 8px; border-radius:4px; outline:none; width:100%; font-size:0.85rem; }
.session-form .track-search { width:100%; margin-bottom:8px; }
.session-form .track-scroll { max-height:140px; overflow-y:auto; background:var(--color-bg); border:1px solid var(--color-border); border-radius:4px; }
.session-form .track-opt { padding:6px 10px; cursor:pointer; font-size:0.82rem; border-bottom:1px solid rgba(255,255,255,0.04); display:flex; justify-content:space-between; }
.session-form .track-opt:hover, .session-form .track-opt.sel { background:rgba(168,85,247,0.1); color:var(--color-primary); }
.session-form .track-id-small { font-size:0.7rem; color:var(--color-text-muted); }
.session-form .selected-track-info { background:rgba(168,85,247,0.08); border:1px solid rgba(168,85,247,0.3); padding:8px 10px; border-radius:4px; margin-top:8px; color:var(--color-text); font-size:0.85rem; }
.session-form .laps-toggle { display:flex; border:1px solid var(--color-border); border-radius:4px; overflow:hidden; }
.session-form .laps-btn { flex:1; background:transparent; border:none; padding:7px; color:var(--color-text-muted); cursor:pointer; font-weight:600; font-size:0.85rem; }
.session-form .laps-btn.active { background:var(--color-surface-hover); color:var(--color-primary); }
.session-form .toggle-label { font-size:0.82rem; display:flex; align-items:center; gap:6px; cursor:pointer; }
.session-form .section-label { font-size:0.82rem; font-weight:700; color:var(--color-primary); text-transform:uppercase; letter-spacing:0.5px; margin:14px 0 8px; }
.session-form .weather-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-bottom:8px; }
.session-form .weather-slot { background:var(--color-bg); border:1px solid var(--color-border); padding:8px; border-radius:4px; text-align:center; }
/* Wetter-Auswahl mit Spiel-Icon (weiß; im hellen Design dunkel eingefärbt) */
.session-form .wx-select { display:flex; align-items:center; gap:6px; }
.session-form .wx-select select { flex:1; min-width:0; }
.session-form .wx-icon { width:22px; height:22px; flex-shrink:0; object-fit:contain; }
[data-theme="light"] .session-form .wx-icon { filter:brightness(0) opacity(0.7); }
/* Fahrzeugvorschau bei „Identische Fahrzeuge“ */
.session-form .vehicle-preview { position:relative; margin-top:8px; border-radius:6px; overflow:hidden; background:linear-gradient(135deg, #1b2230, #0f141c); }
.session-form .vehicle-preview-img { display:block; width:100%; max-width:480px; aspect-ratio:1024/384; object-fit:contain; margin:0 auto; }
.session-form .vehicle-preview-logo { position:absolute; top:6px; left:8px; height:28px; max-width:70px; object-fit:contain; }
.session-form .weather-slot-num { font-size:0.65rem; color:var(--color-text-muted); margin-bottom:4px; font-weight:700; }
.session-form .slot-count-row { display:flex; gap:4px; margin-bottom:8px; }
.session-form .slot-btn { background:var(--color-bg); border:1px solid var(--color-border); color:var(--color-text-muted); padding:4px 10px; border-radius:4px; cursor:pointer; font-size:0.8rem; }
.session-form .slot-btn.active { background:var(--color-primary); color:white; border-color:var(--color-primary); }
.session-form .slider-val { color:var(--color-primary); }
.session-form .card-title .toggle-label { font-weight: 500; text-transform: none; letter-spacing: 0; }
.session-form .field-hint { font-size: 0.75rem; color: var(--color-text-muted); margin: -4px 0 10px; line-height: 1.4; }
.session-form .options-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.session-form .options-grid .field { margin: 0; }
.session-form .slot-count-row { align-items: center; }
@media (max-width: 600px) {
  .session-form .field-row { flex-direction: column; gap: 8px; }
}
/* Zweizeilige Beschriftungen: Auswahlfelder trotzdem auf einer Linie */
.session-form .options-grid .field { justify-content: space-between; }

/* Einklappbare Karten (session-fields.js makeCardsCollapsible) */
.session-form .card[data-section] > .card-title { cursor: pointer; user-select: none; gap: 10px; justify-content: flex-start; }
.session-form .card[data-section] > .card-title .card-label { flex-shrink: 0; }
.session-form .card[data-section] > .card-title .card-summary { flex: 1; min-width: 0; font-size: 0.76rem; font-weight: 400; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.session-form .card[data-section] > .card-title .toggle-label { flex-shrink: 0; }
.session-form .card[data-section] > .card-title .card-chevron { flex-shrink: 0; color: var(--color-text-muted); transition: transform 0.15s; }
.session-form .card[data-section].collapsed > .card-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.session-form .card[data-section].collapsed > .card-title .card-chevron { transform: rotate(-90deg); }
.session-form .card[data-section].collapsed > :not(.card-title) { display: none !important; }
.session-form .card[data-section]:not(.collapsed) > .card-title .card-summary { visibility: hidden; }