/* video-analysis.css — Studio: Analyse, Scouting, Kader/Consent, Responsive, BG-Upload
   Ausgelagert aus video.css. WICHTIG: nach video-game.css laden (CSS-Cascade). */
/* ── Analyse ── */
.vid-ana-toolbar { margin-bottom: 16px; }
.vid-ana-toolbar select { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 10px; font-size: 13px; }
.vid-ana-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.vid-ana-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; text-align: center; }
.vid-ana-num { font-size: 28px; font-weight: 800; font-family: var(--font-display); color: var(--brand); }
.vid-ana-lbl { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.vid-ana-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.vid-ana-table { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; }
.vid-ana-table h3 { font-size: 13px; margin: 0 0 8px; color: var(--text-secondary); }
.vid-ana-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vid-ana-table td { padding: 5px 0; border-bottom: 1px solid var(--border-muted); }
.vid-ana-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* ── Spieler- & Situations-Statistik (video-stats.js) ── */
.vstat-section { margin-top: 28px; }
.vstat-h2 { font-size: 16px; font-weight: 700; margin: 0 0 14px; color: var(--text-primary); }
.vstat-leaders { margin-bottom: 16px; }
.vstat-leader { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 4px 0 2px; }
.vstat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.vstat-block h3 .vstat-approx { font-weight: 400; color: var(--text-secondary); font-size: 11px; }
.vstat-scroll { overflow-x: auto; }
.vstat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vstat-table th { text-align: right; font-weight: 600; font-size: 11px; color: var(--text-secondary); padding: 4px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.vstat-table th:first-child { text-align: left; }
.vstat-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vstat-table td.vstat-name { text-align: left; color: var(--text-primary); }

/* ── Possession-Toggle + Tagging-Erweiterungen ── */
.vid-poss-toggle { display: flex; gap: 6px; }
.vid-poss-toggle button { flex: 1; padding: 7px 10px; font-size: 12px; font-weight: 600; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary); cursor: pointer; }
.vid-poss-toggle button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.vid-poss-toggle button:disabled { opacity: .6; cursor: default; }
.vid-tag-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.vid-field-inline { display: flex; gap: 6px; align-items: center; }
.vid-field-inline select { flex: 1; min-width: 0; }
.vid-field-check { flex-direction: row !important; align-items: center; gap: 8px; }
.vid-field-check input { width: auto; }

/* ── Clip-Tags (Schlagwörter) ── */
.vid-tag-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vt-tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-subtle);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 4px 3px 9px; font-size: 12px; color: var(--text-primary); }
.vt-tag-x { background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 999px; }
.vt-tag-x:hover { color: var(--text-primary); }
.vt-tag-input { flex: 1; min-width: 110px; background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px 9px; font-size: 13px; font-family: var(--font-ui); }
.vt-tag-input:focus { border-color: var(--brand); outline: none; }

/* ── Scouting-Tab ── */
.vid-scout-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vid-scout-head .vid-chip-row { flex: 1; margin-bottom: 0; }
.vid-scout-team-actions { display: flex; align-items: center; gap: 8px; }

/* ── Kader / Consent ── */
.vid-consent-note {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--brand-subtle); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 16px; font-size: 13px;
}
.vid-consent-note strong { color: var(--brand); }
.vid-roster-add { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.vid-roster-add input {
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; font-size: 13px;
}
.vid-roster-list { display: flex; flex-direction: column; gap: 4px; }
.vid-roster-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 8px 12px;
}
.vid-roster-jersey { font-weight: 700; color: var(--text-secondary); min-width: 32px; }
.vid-roster-name { font-weight: 600; flex: 1; }
.vid-roster-pos { color: var(--text-muted); font-size: 12px; }
.vid-roster-minor { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.vid-consent-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); }
.vid-consent-badge.cs-granted { background: rgba(74,222,128,.15); color: var(--success); }
.vid-consent-badge.cs-none { background: rgba(248,113,113,.15); color: var(--danger); }
.vid-consent-badge.cs-revoked { background: rgba(251,191,36,.15); color: var(--warning); }

/* Telestration: Touch & Apple Pencil sauber aufs Videobild zeichnen
   (kein Scroll/Pinch-Hijack während des Zeichnens). */
#teles-overlay.tel-active { touch-action: none; }

/* Game-Tab: Player oben, Clip-Panel darunter (Tablet/Handy inkl. Querformat). */
@media (max-width: 900px), (max-height: 540px) and (pointer: coarse) {
  .vid-game-layout { flex-direction: column; }
  .vid-side-col { flex-basis: auto; width: 100%; align-self: stretch; }
}

/* ── Studio auf Handy (Hochkant ≤700px ODER kurzes Querformat-Handy) ──────── */
@media (max-width: 700px), (max-height: 540px) and (pointer: coarse) {
  .vid-page-content { padding: 12px; }
  .vid-page-header { flex-wrap: wrap; gap: 8px; row-gap: 6px; }
  .vid-page-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vid-page-tabs::-webkit-scrollbar { display: none; }
  .vid-tab { flex: 0 0 auto; }
  .vid-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .vid-tag-grid { grid-template-columns: 1fr; }
  .vid-pick-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .vp-controls { gap: 6px; padding: 6px 8px; }
  .vp-btn { min-height: 40px; }
  /* Verwaltungs-/Tag-Zeilen (Organize/Members) brechen um statt zu quetschen */
  .org-row { flex-wrap: wrap; }
  .org-row .org-f-name, .org-row .org-f-opp, .org-row .org-f-tour, .org-row .org-f-season { flex: 1 1 45%; min-width: 120px; }
  .org-row .org-f-date, .org-row .org-f-start, .org-row .org-f-end { flex: 1 1 30%; }
  /* Header-Tools (Team-Auswahl, Quota) dürfen umbrechen */
  .vid-page-tools { flex-wrap: wrap; }
  .vid-lib-top { gap: 8px; }
}

/* ── Hintergrund-Upload: Header-Indikator + Panel ── */
.vid-upload-indicator { position: relative; }
.vid-upload-indicator.hidden { display: none; }
.vid-up-ind-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: var(--r-full); padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.vid-up-ind-btn:hover { border-color: var(--brand); color: var(--text-primary); }
.vid-up-ind-btn.is-active { border-color: var(--brand); color: var(--brand); }
.vid-up-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  width: 340px; max-width: 90vw;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xl); overflow: hidden;
}
.vid-up-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.vid-up-panel-body { max-height: 60vh; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.vid-up-row { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); }
.vid-up-row-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.vid-up-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid-up-row-status { color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.vid-up-bar { height: 6px; border-radius: var(--r-full); background: var(--bg-elevated); overflow: hidden; }
.vid-up-fill { height: 100%; background: var(--brand); transition: width .25s; }
.vid-up-row.is-done .vid-up-fill { background: var(--success); }
.vid-up-row.is-error .vid-up-fill { background: var(--danger); }
.vid-up-row.is-error .vid-up-row-status { color: var(--danger); }

/* ── Sprachumschalter im Studio-Header ── */
.vid-lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.vid-lang-switch button { background: var(--bg-elevated); color: var(--text-secondary); border: none; padding: 6px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.vid-lang-switch button:hover { color: var(--text-primary); }
.vid-lang-switch button.active { background: var(--brand); color: #fff; }

/* ── Player-Controls (Icon + Label) ── */
.vp-controls { gap: 8px; padding: 10px 14px; flex-wrap: wrap; }
.vp-btn { min-width: 50px; height: 50px; }
.vp-btn svg { width: 20px; height: 20px; }
.vp-btn--primary { min-width: 58px; }
.vp-btn--primary svg { width: 22px; height: 22px; }

/* Clip-Filter (Spiel-Tab) */
.vid-clip-filter { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.vid-clip-filter select {
  flex: 1; min-width: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-color: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 8px 30px 8px 11px; font-size: 13px; font-family: var(--font-ui);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%23F97316' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color .12s, box-shadow .12s;
}
.vid-clip-filter select:hover { border-color: var(--text-muted); }
.vid-clip-filter select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-glow, rgba(249,115,22,.22)); }

/* ── Clip↔Play-Picker (größer, mit Filtern + Vorschau) ── */
.vid-pick-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vid-pick-search {
  flex: 1; min-width: 160px; height: 42px; padding: 0 14px;
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; font-family: var(--font-ui);
}
.vid-pick-search:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-glow, rgba(249,115,22,.22)); }
.vid-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.vid-pick-item {
  position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 10px 12px; cursor: pointer;
}
.vid-pick-item:hover { border-color: var(--brand); }
.vid-pick-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.vid-pick-sub { font-size: 12px; color: var(--text-muted); }
.vid-pick-badge { position: absolute; right: 10px; top: 10px; font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-subtle, rgba(249,115,22,.15)); padding: 2px 8px; border-radius: var(--r-full); }
.vid-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; max-height: 62vh; overflow: auto; }
.vid-pick-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; cursor: pointer; text-align: left; }
.vid-pick-card:hover { border-color: var(--brand); }
.vid-pick-thumb { aspect-ratio: 360 / 210; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-base); }
.vid-pick-thumb svg { width: 100%; height: 100%; display: block; }
.vid-pick-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 6px; }

/* Verknüpftes Play in der Statistik (mit Vorschau) */
.vid-link-play { display: flex; flex-direction: column; gap: 8px; }
.vid-link-thumb { display: block; width: 100%; aspect-ratio: 360 / 210; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-base); cursor: pointer; padding: 0; }
.vid-link-thumb:hover { border-color: var(--brand); }
.vid-link-thumb svg { width: 100%; height: 100%; display: block; }
.vid-link-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vid-link-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.vid-link-actions { display: flex; gap: 4px; }

/* ── Mitglieder-Reiter ── */
.vu-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
/* Team-Karte */
.vu-team-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vu-team-name { font-size: 18px; font-weight: 800; }
.vu-team-switch { max-width: 280px; font-size: 15px; font-weight: 700; }
.vu-team-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.vu-logo { position: relative; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.vu-logo img { width: 100%; height: 100%; object-fit: cover; }
.vu-logo span { font-size: 18px; font-weight: 800; color: var(--text-secondary); }
.vu-logo.is-editable { cursor: pointer; }
.vu-logo-edit { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; }
.vu-danger { color: var(--danger) !important; }

/* Rollen-Erklärung */
.vu-explain .vu-roles { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vu-explain li { font-size: 13px; color: var(--text-secondary); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vu-explain b { color: var(--text-primary); }

/* Badges */
.vu-badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: var(--r-full); border: 1px solid transparent; white-space: nowrap; }
.vu-b-owner { background: rgba(99,102,241,.15); color: #818cf8; }
.vu-b-mgr   { background: var(--brand-subtle, rgba(249,115,22,.15)); color: var(--brand); }
.vu-b-editor{ background: rgba(14,165,233,.15); color: #38bdf8; }
.vu-b-viewer{ background: var(--bg-elevated); color: var(--text-secondary); border-color: var(--border); }
.vu-b-active{ background: rgba(74,222,128,.14); color: #4ade80; }
.vu-b-pending{ background: rgba(234,179,8,.14); color: #eab308; }
.vu-b-none  { background: transparent; color: var(--text-muted); border-color: var(--border); border-style: dashed; }
.vu-pill { font-size: 12px; color: var(--text-secondary); }

/* Toggle (Manager) */
.vu-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.vu-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.vu-toggle-track { width: 38px; height: 22px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); position: relative; transition: background .15s, border-color .15s; flex: 0 0 auto; }
.vu-toggle-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform .15s, background .15s; }
.vu-toggle input:checked + .vu-toggle-track { background: var(--brand); border-color: var(--brand); }
.vu-toggle input:checked + .vu-toggle-track::after { transform: translateX(16px); background: #fff; }

/* Einladen */
.vu-invite { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vu-invite input[type=email], .vu-invite input[type=text] {
  height: 42px; padding: 0 13px; background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; font-family: var(--font-ui);
}
.vu-invite input[type=email] { flex: 1; min-width: 200px; }
.vu-invite .vid-filter-sel { height: 42px; }

/* Mitglieder-Tabelle */
.vu-table { display: flex; flex-direction: column; }
.vu-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); }
.vu-cell { display: flex; align-items: center; gap: 8px; }
.vu-cell-name { flex: 1 1 200px; min-width: 0; flex-direction: column; align-items: flex-start; gap: 1px; }
.vu-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.vu-email { font-size: 12px; color: var(--text-muted); }
.vu-cell-role .vid-filter-sel, .vu-cell-play .vid-filter-sel { height: 36px; }
.vu-cell-act { margin-left: auto; }

/* Scope-Editor (groß + übersichtlich) */
.vu-scope-modes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.vu-scope-mode { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.vu-scope-mode:has(input:checked) { border-color: var(--brand); background: var(--brand-subtle, rgba(249,115,22,.08)); }
.vu-scope-mode input { width: 18px; height: 18px; accent-color: var(--brand); }
.vu-scope-mode div { display: flex; flex-direction: column; }
.vu-scope-mode strong { font-size: 14px; }
.vu-scope-mode span { font-size: 12px; color: var(--text-muted); }
.vu-scope-search { width: 100%; height: 42px; padding: 0 13px; margin-bottom: 10px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; }
.vu-scope-list { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.vu-scope-block { display: flex; flex-direction: column; gap: 4px; }
.vu-scope-group { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 6px 0 2px; }
.vu-scope-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; cursor: pointer; }
.vu-scope-item.is-sub { margin-left: 24px; }
.vu-scope-item:hover { border-color: var(--brand); }
.vu-scope-item.is-disabled { opacity: .5; }
.vu-scope-item input { width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.vu-scope-ic { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--brand); flex: 0 0 auto; }
.vu-scope-nm { font-weight: 600; }
.vu-scope-count { font-size: 12px; color: var(--text-muted); margin-right: auto; }

/* Tag-Form: Checkbox-Zeile (Blitz) */
.vid-tag-grid .vid-tag-check { flex-direction: row; align-items: center; gap: 8px; color: var(--text-secondary); }
.vid-tag-grid .vid-tag-check input { width: auto; }