/*
  styles-ui-fixes.css — Layout- und Lesbarkeitskorrekturen
  Stand: 2026-09-04 · geprüft bei 390 / 700 / 820 / 1100 / 1440 / 1920 px Breite
  Einbinden NACH styles.css und styles-plan-visibility.css:
      <link rel="stylesheet" href="./styles-ui-fixes.css">
  Reine CSS-Ergänzung, kein HTML- oder JS-Eingriff. Jede Regel ist einzeln
  entfernbar; die Nummern verweisen auf den Prüfbericht.
*/

/* ---------------------------------------------------------------------------
   F1 · Sidebar wird abgeschnitten (blockierend)
   styles.css:16491 setzt height:100dvh + overflow:clip. Ist der Inhalt höher
   als das Fenster (gemessen 779 px Inhalt bei 720 px Fensterhöhe), sind
   Speicherstatus, „Erneut versuchen“ und die Versionszeile dauerhaft
   unerreichbar — ohne Scrollmöglichkeit.
--------------------------------------------------------------------------- */
body.app-shell .app-sidebar {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4a4d55 transparent;
}

body.app-shell .app-sidebar::-webkit-scrollbar {
  width: 10px;
}

body.app-shell .app-sidebar::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: #4a4d55;
}

/* Unterer Rand: letzte Zeile klebt sonst am Fensterrand, sobald gescrollt wird. */
body.app-shell .app-sidebar > .site-footer {
  padding-bottom: 6px;
}

/* ---------------------------------------------------------------------------
   F2 · Plan (Schritt 6): Konkurrenz, Runde und Notiz werden abgeschnitten
   styles.css:18853 erzwingt min-height:52px !important zusammen mit
   overflow:hidden. Sobald der Text mehr als zwei Zeilen braucht, fehlen
   gemessen 35–78 px Inhalt und es gibt keine Scrollmöglichkeit im Feld.
   Lösung: Feldhöhe folgt dem Inhalt (field-sizing), sonst scrollbar.
--------------------------------------------------------------------------- */
body.app-shell #planStep :is(
  .schedule-competition-input,
  .schedule-round-input,
  .schedule-note-input
) {
  field-sizing: content;
  height: auto;
  max-height: none;
  overflow-y: auto;
}

/* Runde brach nicht um (white-space:nowrap, styles.css:5853) — lange
   Rundennamen wie „Zwischenrunde / Platzierungsspiel“ liefen aus dem Feld. */
body.app-shell #planStep .schedule-round-input {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Spielernamen dürfen ebenfalls wachsen statt zu schneiden. */
body.app-shell #planStep .schedule-player-input {
  field-sizing: content;
  height: auto;
  overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   F3 · Zu kleine Schriften (10–11 px) in Plan, Übersicht und Betreuung
   In der Halle auf Laptop und Handy nicht mehr sicher lesbar. 12 px ist die
   Untergrenze, Trainerkürzel im Plan tragen die Betreuungsinformation und
   gehen auf 13 px.
--------------------------------------------------------------------------- */
body.app-shell .schedule-coach-code {
  font-size: calc(13px * var(--plan-scale));
}

body.app-shell .overview-next-label,
body.app-shell .source-option-kicker,
body.app-shell .assignment-load-count,
body.app-shell .assignment-load-copy span,
body.app-shell .assignment-conflict-item span,
body.app-shell .technical-error-details,
body.app-shell .schedule-association-badge {
  font-size: 12px;
}

body.app-shell :is(
  #exportScheduleBtn,
  #exportScheduleXlsxBtn,
  #printBtn,
  #exportPlayersBtn,
  #exportCoachesBtn,
  .mobile-filter-chip
) {
  font-size: 14px;
}

/* ---------------------------------------------------------------------------
   F4 · Zu kleines Klickziel: „Alle Verbände/Nationen anzeigen“ war 19 px hoch
--------------------------------------------------------------------------- */
body.app-shell .source-association-details > summary {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding-block: 8px;
}

/* ---------------------------------------------------------------------------
   F5 · Dialoge auf kleinen Fenstern: Aktionsknöpfe lagen unterhalb des
   sichtbaren Bereichs (gemessen: Karte 723 px bei 700 px Fensterhöhe).
   Karte scrollt in sich, die Knopfzeile bleibt unten stehen.
--------------------------------------------------------------------------- */
body.app-shell .project-dialog .project-dialog-card {
  box-sizing: border-box;
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
}

body.app-shell .project-dialog .dialog-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  margin-bottom: -18px;
  padding-block: 12px 18px;
  background: #fff;
  box-shadow: 0 -1px 0 var(--line);
}

/* ---------------------------------------------------------------------------
   F6 · Lange Namen und Vereinsnamen dürfen nirgends aus ihrer Karte laufen
   Vorsorglich für Teilnehmerliste, Betreuungsliste und Chips: umbrechen
   statt überstehen. Keine Änderung, solange der Text passt.
--------------------------------------------------------------------------- */
body.app-shell :is(
  .participant-list,
  .assignment-list,
  .selected-player-chips,
  .coach-code-list,
  .tournament-trainer-list,
  .trainer-pool-list
) :is(strong, span, div, label) {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   F7 · Konto-Menü überlappt Überschrift und Sidebar-Titel auf schmalen
   Fenstern (gefunden 2026-09-04 beim Handy-Test der F1-Korrektur)
   account-collaboration-ui.js haengt das Menü per JS als
   position:fixed; top:18px; right:18px an document.body — ausserhalb von
   Topbar und Sidebar, ohne dass dort Platz reserviert wird. Mit vollem
   Namen ("Maya Kunats") ist die Pille auf schmalen Fenstern breit genug,
   um den Seitentitel bzw. den Sidebar-Header zu verdecken. Lösung: unter
   620px nur das Kürzel zeigen, dann bleibt genug Abstand.
   #accountMenuToggle ist eine ID (höhere Spezifität als die per JS
   injizierten .account-menu-toggle-Regeln), damit die Reihenfolge im
   <head> keine Rolle spielt.
--------------------------------------------------------------------------- */
@media (max-width: 620px) {
  #accountMenuToggle .account-menu-label {
    display: none;
  }

  #accountMenuToggle {
    gap: 0;
    padding: 8px;
  }
}