/* ==========================================================================
   VerSol Admin UX: Header-Kontrast + Breadcrumb + Accordion
   ========================================================================== */

/* --- Header / Branding: bessere Lesbarkeit --- */
#header {
  background: #0f4c5c;
  color: #ffffff;
}

#header a:link,
#header a:visited {
  color: #ffffff;
  text-decoration: none;
}

#header a:hover,
#header a:focus {
  text-decoration: underline;
}

/* Breadcrumb-Leiste (Django Admin: .breadcrumbs) */
div.breadcrumbs {
  background: #0b3a46;          /* etwas dunkler für Abgrenzung */
  color: rgba(255,255,255,.92);
}

div.breadcrumbs a:link,
div.breadcrumbs a:visited {
  color: #ffffff;
  text-decoration: underline;
}

div.breadcrumbs a:hover,
div.breadcrumbs a:focus {
  text-decoration: none;
}

/* Branding-Zeile (Logo + Dropdown) */
.versol-branding {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.versol-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.versol-branding img {
  height: 38px;
  width: auto;
}

/* Form */
.versol-clubform {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.versol-clubform label {
  color: #ffffff;
  font-weight: 600;
}

/* Dropdown gut lesbar */
.versol-clubform select {
  max-width: 360px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: #ffffff;
  color: #111111;
}

.versol-currentclub {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Accordion: Startseite (/admin/) nutzt CAPTION als Balken --- */
.module.vs-collapsible table caption {
  cursor: pointer;
  user-select: none;
}

/* Pfeilindikator in der Caption (Startseite) */
.module.vs-collapsible table caption::after {
  content: "▾";
  float: right;
  opacity: 0.85;
}

.module.vs-collapsible.vs-collapsed table caption::after {
  content: "▸";
}

/* Inhalt einklappen: Startseite => tbody */
.module.vs-collapsible.vs-collapsed table tbody {
  display: none !important;
}


/* App-Module-Kopfzeile als klickbarer "Header" */
.module.vs-collapsible > h2 {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  /* wichtig: Kontrast und Sichtbarkeit */
  background: #e9eef0;
  color: #0b2b33;
  padding: 10px 12px;
  border-radius: 8px;

  margin: 0 0 10px 0;
}

.module.vs-collapsible > h2 a {
  color: inherit !important;
  text-decoration: none;
  font-weight: 700;
}

/* Pfeilindikator */
.module.vs-collapsible > h2::after {
  content: "▾";
  font-size: 14px;
  opacity: 0.8;
  margin-left: 12px;
}

.module.vs-collapsible.vs-collapsed > h2::after {
  content: "▸";
}

/* Inhalt einklappen */
.module.vs-collapsible.vs-collapsed table,
.module.vs-collapsible.vs-collapsed ul {
  display: none !important;
}

/* Wenn aufgeklappt: Tabelle leicht einrücken */
.module.vs-collapsible table {
  margin-left: 6px;
}

/* Fokus sichtbar auf Caption */
.module.vs-collapsible table caption:focus {
  outline: 2px solid rgba(255,255,255,.75);
  outline-offset: 2px;
}

/* Index: zugeklappt -> tbody weg */
.module.vs-collapsible.vs-collapsed table tbody {
  display: none !important;
}

/* Cursor + Pfeile (falls noch nicht drin) */
.module.vs-collapsible table caption {
  cursor: pointer;
  user-select: none;
}
.module.vs-collapsible table caption::after {
  content: "▾";
  float: right;
  opacity: .85;
}
.module.vs-collapsible.vs-collapsed table caption::after {
  content: "▸";
}
/* App-Container */
.app-block {
  margin-bottom: 1.2rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #d5e0e6;
}

/* Header / Balken */
.app-header {
  background: #2f6f8a;
  color: #ffffff;
  padding: 0.7rem 1rem;
  font-weight: 600;
  cursor: pointer;
}

/* Inhalt */
.app-models {
  background: #ffffff;
  padding: 0.6rem 1rem;
}

/* collapsed */
.app-block.is-collapsed .app-models {
  display: none;
}

/* Hover */
.app-header:hover {
  background: #255a6f;
}