/* ═══════════════════════════════════════════════════════════════════════
   CourtOS Operations — Vereinsfarben und Vereinslogo
   ═══════════════════════════════════════════════════════════════════════
   Die Standardwerte aller Farb-Tokens stehen in vendor/courtos-ui.css — sie
   gelten für alle Apps. Hier steht nur, was zum Vereins-Feature gehört: die
   Darstellung des hochgeladenen Logos und der weiche Übergang beim Farbwechsel.

   `ops-theme.js` überschreibt die Tokens zur Laufzeit mit den in den
   Einstellungen gewählten Vereinsfarben. Deshalb darf in den Stylesheets KEIN
   Marken-Hex mehr direkt stehen; immer var(--cos-…).
   ═══════════════════════════════════════════════════════════════════════ */

/* Der Wechsel der Vereinsfarbe soll nicht hart umspringen, sondern kurz
   überblenden — sonst wirkt das Speichern in den Einstellungen wie ein Fehler. */
@media (prefers-reduced-motion: no-preference) {
  .ops-rail, .ops-subnav, .footer, .cos-btn--primary {
    transition: background-color 220ms ease-out, color 220ms ease-out, border-color 220ms ease-out;
  }
}

/* ---------------------------------------------------------------------
   Vereinslogo — Darstellung an den vier Stellen, an denen es auftaucht.
   --------------------------------------------------------------------- */

/* 1) Kopf der Icon-Leiste, oberhalb des Konto-Avatars. */
.ops-rail__brand {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(var(--cos-on-brand-rgb), .1);
  overflow: hidden;
}
.ops-rail__brand img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Ohne hochgeladenes Logo bleibt der Platz leer statt einen Platzhalter zu zeigen. */
.ops-rail__brand:empty { display: none; }

/* 2) Login- und Ladebildschirm. */
.ops-club-logo {
  display: block;
  max-width: 148px;
  max-height: 72px;
  width: auto;
  height: auto;
  margin: 0 auto 18px;
  object-fit: contain;
}
.ops-loading .ops-club-logo { margin-bottom: 14px; max-height: 60px; }

/* 3) Konto-Menü / Vereinswechsler. */
.ops-rail__menu-club {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--cos-surface-2, #F5F3EF);
}
.ops-rail__menu-club img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.ops-rail__menu-club span {
  min-width: 0;
  font: 700 12px/1.3 var(--cos-font);
  color: var(--cos-brand-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}