/* ============================================================
   TRAININGSEINHEITEN/STYLE.CSS - Seitenspezifische Styles
   (Relations-Auswahl und Chips kommen aus ortsgemeinschaft/style.css: .og-*)
   ============================================================ */

/* ---------- Filter in der Toolbar ---------- */
.te-filter {
  margin-left: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

/* ---------- Tabelle: Spaltenbreiten ---------- */
.table-trainingseinheiten th:nth-child(1) { width: 8%; }
.table-trainingseinheiten th:nth-child(2) { width: 30%; }
.table-trainingseinheiten th:nth-child(3) { width: 16%; }
.table-trainingseinheiten th:nth-child(4) { width: 10%; }
.table-trainingseinheiten th:nth-child(5) { width: 11%; }
.table-trainingseinheiten th:nth-child(6) { width: 15%; }
.table-trainingseinheiten th:nth-child(7) { width: 10%; }

/* Veranstaltungsarten: eigene Spaltenbreiten, Rhythmus zeilenweise ohne Umbruch */
.table-trainingseinheiten.table-va th:nth-child(1) { width: 90px; }   /* Bild */
.table-trainingseinheiten.table-va th:nth-child(2) { width: 30%; }    /* Veranstaltungsart */
.table-trainingseinheiten.table-va th:nth-child(3) { width: 16%; }    /* Typ */
.table-trainingseinheiten.table-va th:nth-child(4) { width: 15%; }    /* Rhythmus */
.table-trainingseinheiten.table-va th:nth-child(5) { width: 150px; }  /* Bausteine */
.table-trainingseinheiten.table-va th:nth-child(6) { width: 13%; }    /* Vorlage */
.table-trainingseinheiten.table-va th:nth-child(7) { width: 120px; }  /* Aktionen */
.table-va .va-rhythmus > div,
.table-va .va-vorlage-zahl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.table-va .va-icons { max-width: 116px; }
.table-va .va-status-zeile { margin-top: 10px; }

.table-trainingseinheiten td {
  overflow-wrap: break-word;
}

/* Entwürfe nicht mehr hinterlegt – Tabellen einheitlich weiß,
   der Status steht als Etikett „Entwurf“ in der Zeile */

.te-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Symbol je Baustein ---------- */
.te-symbol .material-icons {
  font-size: 20px;
}

.te-symbol.te-b-vision       { background: var(--pal-violett); }
.te-symbol.te-b-auftrag      { background: var(--pal-kupfer); }
.te-symbol.te-b-gott         { background: var(--pal-blau); }
.te-symbol.te-b-eltern       { background: var(--pal-beere); }
.te-symbol.te-b-gemeinschaft { background: var(--pal-gruen); }

/* ---------- Baustein & Status ---------- */
.te-baustein,
.te-status {
  display: inline-block;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 999px;
  white-space: nowrap;
}

.te-status {
  margin-top: 4px;
}

.te-baustein.te-b-vision       { color: var(--pal-violett-nacht); background: var(--pal-anthrazit-hell); }
.te-baustein.te-b-auftrag      { color: var(--pal-kupfer); background: var(--neutral-50); }
.te-baustein.te-b-gott         { color: var(--pal-blau); background: var(--neutral-100); }
.te-baustein.te-b-eltern       { color: var(--pal-beere); background: var(--neutral-100); }
.te-baustein.te-b-gemeinschaft { color: var(--pal-gruen-dunkel); background: var(--pal-gruen-hell); }

.te-status.is-entwurf { color: var(--el-te-entwurf-dunkel); background: var(--el-te-entwurf-hell); --st-farbe: var(--el-te-entwurf); }
.te-status.is-fertig  { color: var(--el-te-fertig-dunkel); background: var(--el-te-fertig-hell); --st-farbe: var(--el-te-fertig); }

.te-files-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--ink-soft);
}

.te-files-count .material-icons {
  font-size: 16px;
}

/* ---------- Detailansicht ---------- */
dialog.te-overview,
dialog.te-dialog {
  max-width: 720px;
}

dialog.te-wide {
  max-width: 920px;
}

.te-overview .dialog-inner,
.te-dialog .dialog-inner {
  overflow-y: auto;
  max-height: calc(100vh - 80px);
}

.te-pre {
  white-space: pre-wrap;
}

.te-overview .detail-section-title {
  margin: 20px 0 6px;
}

.te-overview .detail-description {
  margin: 0;
  line-height: 1.5;
}

/* ---------- Dateien ---------- */
.te-file-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.te-file-link,
.te-file-row a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}

.te-file-link:hover,
.te-file-row a:hover {
  border-color: var(--accent-dark, var(--gold-mittel));
}

.te-file-link .material-icons,
.te-file-row .material-icons {
  font-size: 18px;
  color: var(--accent-dark, var(--gold-mittel));
}

.te-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.te-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.te-file-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

.te-file-remove input {
  width: auto;
}

/* ---------- Flyer-Vorlage (PDF) in der Detailansicht ---------- */
.te-flyer-seiten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.te-flyer-seiten figure {
  margin: 0;
}

.te-flyer-seiten img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.te-flyer-seiten figcaption {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-soft);
}

/* ---------- Detailansicht: Reiter, Flyer zum Blättern, Rahmen ---------- */
.te-ov-tabs {
  margin-bottom: 20px;
}

.te-ov-kopf {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 14px;
}

.te-ov-kopf.ohne-flyer {
  grid-template-columns: minmax(0, 1fr);
}

.te-ov-kopf .te-box {
  margin: 0;
}

.te-box.multi-select {
  max-height: none;
  overflow: visible;
  margin: 0 0 14px;
}

.te-box .detail-grid {
  margin: 4px 8px 8px;
}

.te-box .detail-description {
  margin: 4px 8px 8px;
}

.te-box .te-leer {
  color: var(--ink-soft);
}

.te-box .og-chips {
  margin: 4px 8px 8px;
}

/* Reiter „Lektionen“: nur der Knopf „+ Lektion“ rechts über der Liste */
.te-lektionen-head.te-lektionen-head-tab {
  justify-content: flex-end;
  margin: 0 0 10px;
  padding-top: 0;
  border-top: 0;
}

.te-flyer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.te-flyer-buehne {
  position: relative;
  cursor: pointer;
}

.te-flyer-bild {
  display: none;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.te-flyer-bild.is-aktiv {
  display: block;
}

.te-flyer-nav {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.te-flyer-knopf {
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.te-flyer-knopf.is-aktiv {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

@media (max-width: 768px) {
  .te-ov-kopf {
    grid-template-columns: minmax(0, 1fr);
  }

  .te-flyer {
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ---------- Materialstand in der Tabelle ---------- */
.te-material {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.te-material-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}

.te-material-item .material-icons {
  font-size: 16px;
}

.te-material-item.is-komplett {
  color: var(--pal-gruen-dunkel);
}

/* ---------- Detailansicht: Titelbild & Lektionen ---------- */
.te-titelbild {
  max-height: 220px;
  object-fit: cover;
}

.te-lektionen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.te-lektionen-head .detail-section-title {
  margin: 0;
}

.te-btn-small {
  padding: 6px 12px;
  font-size: 13px;
}

.te-btn-small .material-icons {
  font-size: 18px;
}

.te-lektionen-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
  font-size: 14px;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 12px;
}

.te-lektionen-empty .material-icons {
  color: var(--accent-dark, var(--gold-mittel));
}

.te-lektionen-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.te-lektionen-table th {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

.te-lektionen-table td {
  padding: 10px 8px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.te-lektion-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.te-lektion-row:hover {
  background: var(--surface);
}

.te-col-nr { width: 48px; }
.te-col-bibel { width: 22%; }
.te-col-dauer { width: 90px; white-space: nowrap; }
.te-col-dateien { width: 90px; white-space: nowrap; }
.te-col-aktionen { width: 128px; }

.te-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  background: var(--accent-tint, var(--gold-tint));
  color: var(--accent-dark, var(--gold-mittel));
}

.te-lektion-thema {
  font-weight: 700;
}

.te-lektion-ziel {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-soft);
}

.te-file-icon {
  display: inline-block;
  width: 20px;
  overflow: hidden;
  vertical-align: middle;
}

.te-file-icon .material-icons {
  font-size: 18px;
  color: var(--neutral-300);
}

.te-file-icon.is-da .material-icons {
  color: var(--pal-gruen-dunkel);
}

.te-lektion-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}

.te-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  overflow: hidden;
}

.te-mini-btn:hover:not(:disabled) {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}

.te-mini-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.te-mini-btn .material-icons {
  font-size: 16px;
}

.te-lektion-kicker {
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent-dark, var(--gold-mittel));
}

/* Flipchart-Bilder in der Lektionsansicht */
.te-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.te-bilder img {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line);
}

/* ---------- Upload-Bereiche im Lektionsformular ---------- */
.te-upload {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* im Rahmen „Materialien“: keine zusätzlichen Kästen, nur Trennlinien */
.va-form-box .te-upload {
  margin: 0 0 12px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.te-upload > label {
  display: block;
  margin-bottom: 8px;
}

.te-upload .te-file-list:empty {
  display: none;
}

.te-upload-hint {
  margin: -4px 0 14px;
}

.te-file-row img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 8px;
}

/* ---------- Farbe der Trainingseinheit ---------- */
.te-farbe {
  display: flex;
  align-items: center;
  gap: 10px;
}

.te-farbe select {
  flex: 1 1 auto;
  min-width: 0;
}

.te-farbe-muster {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.te-farbe-muster.is-leer {
  background: repeating-linear-gradient(45deg, var(--neutral-100) 0 6px, #fff 6px 12px) !important;
}

.te-farbfeld {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ---------- Mobil ---------- */
@media (max-width: 768px) {
  /* Suche volle Breite, beide Filter nebeneinander darunter */
  .toolbar-left:has(> .te-filter) {
    flex-wrap: wrap;
    gap: 8px;
  }

  .toolbar-left:has(> .te-filter) .suchfeld-container {
    flex: 1 1 100%;
  }

  .te-filter {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
  }

  .te-col-bibel,
  .te-col-dauer {
    display: none;
  }

  .te-lektionen-table {
    table-layout: fixed;
  }

  .te-lektionen-table .te-col-nr { width: 36px; }
  .te-lektionen-table .te-col-dateien { width: 66px; }
  .te-lektionen-table .te-col-aktionen { width: 64px; }

  .te-lektion-actions {
    flex-wrap: wrap;
  }
}

/* Bearbeiten-Dialog: Hinweis unter der Farbzeile, Abstand in den Rahmen */
.te-farbe-hinweis {
  margin: -6px 0 12px;
}



/* Trennstrich zwischen Typ- und Status-Chips (Veranstaltungsarten) */
.va-chip-trenner { width: 1px; height: 22px; margin: 0 4px; background: var(--line); align-self: center; }
.te-filter[hidden] { display: none; }
/* Veranstaltungsarten: Typ-Auswahl mit farbigen Plaketten (Aufbau aus hausgemeinschaft/style.css .hg-select) */
.va-typ-wahl { width: 280px; margin-left: 10px; }
.va-typ-wahl .hg-select-knopf { min-height: 40px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--paper, #fff); }
.va-typ-inhalt { display: flex; align-items: center; gap: 8px; width: 100%; }
.va-typ-alle { padding-left: 6px; font-size: 14px; color: var(--ink); }
.va-typ-anzahl { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.06); color: var(--ink-soft); }
.va-typ-wahl .hg-select-liste { min-width: 280px; }
@media (max-width: 768px) { .va-typ-wahl { width: auto; flex: 1 1 100%; margin-left: 0; } }
.va-typ-sub { font-size: 14px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }