/* ===========================================================
   THREAD PANEL STYLES (thread.css)
   =========================================================== */

.bolist-thread {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

/* === HEADER === */
.thread-header {
  display: flex;
  align-items: center;           /* alles vertikal zentrieren */
  padding: 24px 24px 8px;        /* oben mehr, unten weniger */
  background: transparent !important;
}

/* Avatar-Wrapper */
.thread-avatar {
  margin-right: 16px;
}

/* Avatar-Bild: leicht nach oben ziehen */
.thread-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-top: -40px;              /* Feinjustierung */
}

/* Titel- und Meta-Wrap */
.thread-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;       /* Titel, E-Mail, Datum mittig */
  flex: 1;                       /* füllt die verbleibende Breite */
  margin-left: 16px;
}

/* Erste Zeile: Titel + Badge */
.thread-title-badge {
  display: flex;
  align-items: center;
}

/* Überschrift */
.thread-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #333333;
}

/* Status-Badge neben dem Titel */
.thread-badge {
  margin-left: auto;
  margin-right: 12px;
}
.thread-badge .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 12px;
  white-space: nowrap;
}
/* Offen = blau */
.badge-open {
  background-color: #5D87FF !important;
  color: #FFFFFF !important;
}
.badge-open .fas {
  color: #FFFFFF !important;
}

.badge-accepted {
    background: #4CAF50;
    color: #fff;
}
/* E-Mail unter dem Titel */
.thread-email {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  font-size: 0.85rem;
  color: #666666;
}
.thread-email::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0e0";              /* Envelope-Icon */
  color: #5D87FF;                /* Blau wie Badge */
  margin-right: 6px;
  font-size: 0.9rem;
}

/* Datum & Uhrzeit unter Badge, rechtsbündig */
.thread-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;                      /* enger zusammenrücken */
  margin-top: 4px;
  font-size: 0.75rem;
  color: #666666;
}

/* === BODY (hellblau) === */
.thread-body {
  padding: 24px;
}

.thread-section {
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: #444444;
}
.thread-section strong {
  color: #222222;
}

/* Divider */
.thread-divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 0;
}

/* === REPLIES === */
.thread-replies {
  padding: 24px;
}

.thread-reply {
  background: #e6ffed;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  position: relative;
}
.thread-reply.reply-incoming {
  background: #fff;
}
.thread-reply .reply-content p {
  margin: 0 0 8px;
  font-size: 0.9rem;
  color: #333;
}
.thread-reply .reply-time {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 0.75rem;
  color: #666;
}

/* --- Persönliche Intro-Texte unter dem Header --- */
.thread-intro-wrap {
  padding: 0 24px;
}
.thread-intro,
.thread-intro-text {
  margin: 2px 0;
  font-size: 0.95rem;
  color: #444444;
  line-height: 1.4;
}
/* Optional: etwas mehr Abstand zur folgenden Trennlinie */
.thread-intro-wrap + .thread-divider {
  margin-top: 12px;
}
/* ===================================================================
   Thread: “Nähere Details”
   =================================================================== */
.thread-details {
  padding: 0 24px 16px;
}
.thread-details-title {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  color: #005C9C;
}
.thread-details-list {
  margin: 0;
  padding: 0;
}
.thread-details-list dt {
  float: left;
  width: 160px;
  font-weight: 600;
  clear: left;
}
.thread-details-list dd {
  margin: 0 0 8px 170px;
  color: #333;
}
/* Details zur Herausforderung */
.thread-details {
  padding: 0 24px 24px;
}

.thread-detail-list {
  margin-bottom: 12px;
}

.thread-detail-item {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 4px;
}
.thread-detail-item .fa-calendar-alt {
  margin-right: 8px;
  color: #5D87FF; /* blaues Icon */
}

/* Satz unter den Terminen */
.thread-detail-sentence {
    font-size: 1.2rem;
    color: #444;
    line-height: 1.4;
    margin-top: 8px;
    font-weight: 800;
    padding-left: 2rem;
}
i.fa-solid.fa-location-dot {
    color: #5D87FF;
}

/* ===========================================================
   SPORTART‐BILD
   =========================================================== */
.thread-sport-image-wrap {
  overflow: hidden;
  border-radius: 8px 8px 0 0; /* nur oben abrunden */
  margin-bottom: 16px;
}

.thread-sport-image {
  width: 320px;
  display: block;
  object-fit: cover; 
  /* max-height nach Geschmack, z.B.: max-height: 200px; */
  max-height: 146px;
}

.blue {
  color: #5D87FF;
}