/*
  FS25 LiveMap Forum - Thread Custom CSS
  Datei auf dem Server: /forum/assets/forum-thread-custom.css

  Diese Datei ist nur für die Thread-/Beitragsansicht gedacht:
  /forum/thread.php?id=...

  Hier kannst du die Optik eines geöffneten Themas ändern, ohne die allgemeine
  forum-base.css anfassen zu müssen. Die Datei ist bewusst in Bereiche aufgeteilt.

  Wichtig:
  - Änderungen nach dem Upload mit STRG + F5 neu laden.
  - Werte wie 0px, 12px, 1.2rem, auto, none können direkt ersetzt werden.
  - Die Beispiele stehen als Kommentare direkt neben den Variablen.
  - Diese Datei verändert keine PHP-Logik, keine Datenbank und keine Mailfunktionen.
*/

:root {
  /* =========================================================
     1) Gesamtbereich der Thread-Seite
     ========================================================= */

  /* Abstand vom Header bis zur kleinen grünen Kategorie-Markierung.
     Beispiel: 20px = dichter am Header, 38px = wie Forum-Startseite, 55px = weiter unten */
  --forum-thread-page-padding-top: 38px;

  /* Abstand unter dem kompletten Thread-Inhalt */
  --forum-thread-page-padding-bottom: 60px;

  /* Maximale Breite des Inhalts. Beispiel: 1120px, 1200px, 1320px */
  --forum-thread-wrap-max-width: 1320px;

  /* =========================================================
     2) Oberer Titelbereich
     ========================================================= */

  /* Abstand unter dem Titelbereich bis zur Beitragsbox */
  --forum-thread-hero-margin-bottom: 24px;

  /* Innenabstand oben/unten im Titelbereich. Beispiel: 0px, 12px, 24px */
  --forum-thread-hero-padding-top: 0px;
  --forum-thread-hero-padding-bottom: 0px;

  /* Kleine grüne Markierung mit dem Kategorienamen */
  --forum-thread-tag-font-size: 0.90rem;
  --forum-thread-tag-padding-y: 8px;
  --forum-thread-tag-padding-x: 12px;
  --forum-thread-tag-margin-bottom: 20px;

  /* Großer Thementitel */
  --forum-thread-title-size: clamp(2.1rem, 4vw, 2.0rem);
  --forum-thread-title-margin: 0 0 12px;
  --forum-thread-title-padding: 0;
  --forum-thread-title-line-height: 1.05;
  --forum-thread-title-letter-spacing: -0.03em;

  /* Beschreibung unter dem Thementitel: Autor, Datum, Gesperrt-Hinweis */
  --forum-thread-description-size: 0.8rem;
  --forum-thread-description-margin: 0;
  --forum-thread-description-line-height: 0.0;
  --forum-thread-description-max-width: 760px;

  /* =========================================================
     3) Button-Zeile unter dem Titel
     ========================================================= */

  /* Abstand zwischen Beschreibung und Buttons */
  --forum-thread-actions-margin-top: 30px;

  /* Abstand zwischen Buttons */
  --forum-thread-actions-gap: 12px;

  /* Buttonhöhe. Beispiel: 42px, 46px, 54px */
  --forum-thread-button-min-height: 40px;

  /* Button-Schriftgröße */
  --forum-thread-button-font-size: 0.8rem;

  /* Button-Rundung */
  --forum-thread-button-radius: 14px;

  /* =========================================================
     4) Große Beitragsbox außen
     ========================================================= */

  /* Außen-/Innenabstand der unsichtbaren Beitragsliste um die einzelnen Beitragsboxen.
     WICHTIG: 0px = die Beitragsbox beginnt bündig mit den Buttons/der Überschrift.
     Wenn dieser Wert größer ist, rückt die komplette Beitragsbox nach innen. */
  --forum-thread-posts-panel-padding-y: 0px;
  --forum-thread-posts-panel-padding-x: 0px;

  /* Rundung der großen weißen Box */
  --forum-thread-posts-panel-radius: 24px;

  /* Abstand unter der Beitragsbox bis zum Antwortbereich */
  --forum-thread-posts-panel-margin-bottom: 18px;

  /* =========================================================
     5) Einzelner Beitrag
     ========================================================= */

  /* Innenabstand eines einzelnen Beitrags.
     WICHTIG: padding-x ist der linke/rechte Abstand vom Beitragstext innerhalb der großen Beitragsbox.
     Beispiel: 0px = ganz links, 18px = kleiner Abstand, 24px = wie vorher, 36px = mehr Abstand */
  --forum-thread-post-padding-y: 20px;
  --forum-thread-post-padding-x: 24px;

  /* Mindesthöhe eines Beitrags. Beispiel: auto, 90px, 140px */
  --forum-thread-post-min-height: auto;

  /* Abstand zwischen Beiträgen */
  --forum-thread-post-gap: 0px;

  /* Trennlinie zwischen Beiträgen. 1px = sichtbar, 0px = ausblenden */
  --forum-thread-post-border-width: 1px;

  /* Stil der Trennlinie. Beispiel: solid, dashed, dotted, none */
  --forum-thread-post-border-style: solid;

  /* Farbe der Trennlinie */
  --forum-thread-post-border-color: var(--line);

  /* =========================================================
     6) Kopfzeile im Beitrag: Avatar, Name, Datum, Admin-Badge
     ========================================================= */

  /* Abstand zwischen Avatar/Name/Datum */
  --forum-thread-post-header-gap: 10px;

  /* Abstand unter der Kopfzeile bis zum Beitragstext */
  --forum-thread-post-header-margin-bottom: 10px;

  /* Schriftgröße in der Kopfzeile */
  --forum-thread-post-header-font-size: 0.95rem;

  /* Benutzername in der Kopfzeile */
  --forum-thread-post-username-size: 1rem;

  /* Datum in der Kopfzeile */
  --forum-thread-post-date-size: 0.80rem;

  /* =========================================================
     7) Beitragstext
     ========================================================= */

  /* Schriftgröße des normalen Beitragstextes */
  --forum-thread-post-content-size: 1rem;

  /* Zeilenhöhe des Beitragstextes */
  --forum-thread-post-content-line-height: 1.4;

  /* Abstand unter Absätzen im Beitrag */
  --forum-thread-post-paragraph-margin-bottom: 12px;

  /* Maximale Breite großer Bilder im Beitrag */
  --forum-thread-post-image-max-width: 100%;

  /* Rundung von Bildern im Beitrag */
  --forum-thread-post-image-radius: 14px;

  /* =========================================================
     8) Aktionszeile unter dem Beitrag
     ========================================================= */

  /* Abstand über der Aktionszeile: Antworten, Bedanken, Bearbeiten */
  --forum-thread-post-actions-margin-top: 10px;

  /* Abstand zwischen den Aktionslinks */
  --forum-thread-post-actions-gap: 14px;

  /* Schriftgröße der Aktionslinks */
  --forum-thread-post-actions-font-size: 0.75rem;

  /* Schriftfarbe der Aktionsboxen */
  --forum-thread-post-actions-color: #5a6b7d;

  /* Schriftfarbe beim Darüberfahren mit der Maus */
  --forum-thread-post-actions-hover-color: #0f172a;

  /* Hintergrund der Aktionsboxen */
  --forum-thread-post-actions-background: #ffffff;

  /* Hintergrund beim Darüberfahren mit der Maus */
  --forum-thread-post-actions-hover-background: #f3f6fa;

  /* Rahmenfarbe der Aktionsboxen */
  --forum-thread-post-actions-border-color: rgba(219, 228, 239, .9);

  /* Rahmenstärke der Aktionsboxen. 0px = kein Rahmen */
  --forum-thread-post-actions-border-width: 1px;

  /* Rundung der Aktionsboxen */
  --forum-thread-post-actions-radius: 10px;

  /* Innenabstand links/rechts der Aktionsboxen */
  --forum-thread-post-actions-padding-x: 10px;

  /* Innenabstand oben/unten der Aktionsboxen */
  --forum-thread-post-actions-padding-y: 6px;

  /* Rote Aktionsboxen: "Thema löschen" und "Beitrag löschen" */
  --forum-thread-danger-action-color: #a71818;
  --forum-thread-danger-action-hover-color: #a71818;
  --forum-thread-danger-action-background: #ffffff;
  --forum-thread-danger-action-hover-background: #f3f6fa;
  --forum-thread-danger-action-border-color: #8f1111;

  /* =========================================================
     9) Bedanken-Anzeige
     ========================================================= */

  /* Abstand über "Klaus hat sich bedankt" */
  --forum-thread-thanks-margin-top: 12px;

  /* Schriftgröße der Bedanken-Anzeige */
  --forum-thread-thanks-font-size: 0.90rem;

  /* =========================================================
     10) Antwortbereich unten
     ========================================================= */

  /* Innenabstand der Antwortbox */
  --forum-thread-reply-panel-padding-y: 24px;
  --forum-thread-reply-panel-padding-x: 20px;

  /* Rundung der Antwortbox */
  --forum-thread-reply-panel-radius: 24px;

  /* Überschrift "Antwort schreiben" */
  --forum-thread-reply-title-size: 1.2rem;
  --forum-thread-reply-title-margin: 0 0 16px;

  /* =========================================================
     11) Textfeld / Editor-Grundwerte
     ========================================================= */

  /* Höhe des Antwort-Textfeldes. Beispiel: 260px, 340px, 420px */
  --forum-thread-textarea-min-height: 320px;

  /* Schriftgröße im Antwort-Textfeld */
  --forum-thread-textarea-font-size: 1rem;

  /* Rundung des Antwort-Textfeldes */
  --forum-thread-textarea-radius: 16px;

  /* Abstand zwischen Toolbar, Vorschau, Textfeld und Button */
  --forum-thread-editor-gap: 5px;

  /* BBCode-Toolbar Abstand unten */
  --forum-thread-toolbar-margin-bottom: 2px;

  /* Speichern-Button Abstand oben */
  --forum-thread-submit-margin-top: 2px;
}

/* Gesamtbreite und Außenabstände */
body.forum-page-thread .forum-main,
.forum-main:has(.forum-thread-page) {
  padding-top: var(--forum-thread-page-padding-top) !important;
  padding-bottom: var(--forum-thread-page-padding-bottom) !important;
}

body.forum-page-thread .forum-wrap,
.forum-wrap:has(.forum-thread-page) {
  max-width: var(--forum-thread-wrap-max-width) !important;
}

.forum-thread-page {
  width: 100%;
}

/* Oberer Titelbereich */
.forum-thread-page .forum-thread-hero {
  display: flow-root !important;
  margin-bottom: var(--forum-thread-hero-margin-bottom) !important;
  padding-top: var(--forum-thread-hero-padding-top) !important;
  padding-bottom: var(--forum-thread-hero-padding-bottom) !important;
}

.forum-thread-page .forum-thread-tag {
  display: inline-flex !important;
  margin-bottom: var(--forum-thread-tag-margin-bottom) !important;
  padding: var(--forum-thread-tag-padding-y) var(--forum-thread-tag-padding-x) !important;
  font-size: var(--forum-thread-tag-font-size) !important;
}

.forum-thread-page .forum-thread-title {
  display: block !important;
  margin: var(--forum-thread-title-margin) !important;
  padding: var(--forum-thread-title-padding) !important;
  font-size: var(--forum-thread-title-size) !important;
  line-height: var(--forum-thread-title-line-height) !important;
  letter-spacing: var(--forum-thread-title-letter-spacing) !important;
}

.forum-thread-page .forum-thread-description {
  max-width: var(--forum-thread-description-max-width) !important;
  margin: var(--forum-thread-description-margin) !important;
  font-size: var(--forum-thread-description-size) !important;
  line-height: var(--forum-thread-description-line-height) !important;
}

/* Button-Zeile */
.forum-thread-page .forum-thread-actions {
  margin-top: var(--forum-thread-actions-margin-top) !important;
  gap: var(--forum-thread-actions-gap) !important;
}

.forum-thread-page .forum-thread-actions .btn {
  min-height: var(--forum-thread-button-min-height) !important;
  font-size: var(--forum-thread-button-font-size) !important;
  border-radius: var(--forum-thread-button-radius) !important;
}

/* Beitragsliste außen */
.forum-thread-page .forum-thread-posts-panel {
  padding: var(--forum-thread-posts-panel-padding-y) var(--forum-thread-posts-panel-padding-x) !important;
  border-radius: var(--forum-thread-posts-panel-radius) !important;
  margin-bottom: var(--forum-thread-posts-panel-margin-bottom) !important;
}

/* Einzelner Beitrag */
.forum-thread-page .forum-thread-post-card {
  min-height: var(--forum-thread-post-min-height) !important;
  padding: var(--forum-thread-post-padding-y) var(--forum-thread-post-padding-x) !important;
  margin: 0 !important;
  border-bottom-width: var(--forum-thread-post-border-width) !important;
  border-bottom-style: var(--forum-thread-post-border-style) !important;
  border-bottom-color: var(--forum-thread-post-border-color) !important;
}

.forum-thread-page .forum-thread-post-card + .forum-thread-post-card {
  margin-top: var(--forum-thread-post-gap) !important;
}

.forum-thread-page .forum-thread-post-card:last-child {
  border-bottom-width: 0 !important;
}

/* Beitrag-Kopfzeile */
.forum-thread-page .forum-thread-post-header {
  gap: var(--forum-thread-post-header-gap) !important;
  margin-bottom: var(--forum-thread-post-header-margin-bottom) !important;
  font-size: var(--forum-thread-post-header-font-size) !important;
}

.forum-thread-page .forum-thread-post-header strong {
  font-size: var(--forum-thread-post-username-size) !important;
}

.forum-thread-page .forum-thread-post-header span:not(.badge):not(.user-avatar):not(.user-avatar-initials) {
  font-size: var(--forum-thread-post-date-size) !important;
}

/* Beitragstext */
.forum-thread-page .forum-thread-post-content {
  font-size: var(--forum-thread-post-content-size) !important;
  line-height: var(--forum-thread-post-content-line-height) !important;
}

.forum-thread-page .forum-thread-post-content p {
  margin-bottom: var(--forum-thread-post-paragraph-margin-bottom) !important;
}

.forum-thread-page .forum-thread-post-content img {
  max-width: var(--forum-thread-post-image-max-width) !important;
  height: auto !important;
  border-radius: var(--forum-thread-post-image-radius) !important;
}

/* Aktionszeile */
.forum-thread-page .forum-thread-post-actions {
  margin-top: var(--forum-thread-post-actions-margin-top) !important;
  gap: var(--forum-thread-post-actions-gap) !important;
  font-size: var(--forum-thread-post-actions-font-size) !important;
}

.forum-thread-page .forum-thread-post-actions .text-button,
.forum-thread-page .forum-thread-post-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--forum-thread-post-actions-padding-y) var(--forum-thread-post-actions-padding-x) !important;
  border-width: var(--forum-thread-post-actions-border-width) !important;
  border-style: solid !important;
  border-color: var(--forum-thread-post-actions-border-color) !important;
  border-radius: var(--forum-thread-post-actions-radius) !important;
  background: var(--forum-thread-post-actions-background) !important;
  color: var(--forum-thread-post-actions-color) !important;
  font-size: var(--forum-thread-post-actions-font-size) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

.forum-thread-page .forum-thread-post-actions .text-button:hover,
.forum-thread-page .forum-thread-post-actions a:hover {
  background: var(--forum-thread-post-actions-hover-background) !important;
  color: var(--forum-thread-post-actions-hover-color) !important;
}


/* Rote Lösch-Aktionen:
   - oben im Thema: "Thema löschen"
   - unter Beiträgen: "Beitrag löschen"

   Die :has(...)-Selektoren greifen auf typische Formularwerte wie delete_thread/delete_post.
   Die zusätzlichen Klassen-Fallbacks greifen, falls die Buttons bereits Klassen wie btn-danger,
   danger, delete oder danger-link besitzen.
*/
.forum-thread-page .forum-thread-actions .btn-danger,
.forum-thread-page .forum-thread-actions .danger,
.forum-thread-page .forum-thread-actions .delete,
.forum-thread-page .forum-thread-actions form:has(input[value="delete_thread"]) .btn,
.forum-thread-page .forum-thread-actions form:has(button[value="delete_thread"]) .btn,
.forum-thread-page .forum-thread-post-actions .btn-danger,
.forum-thread-page .forum-thread-post-actions .text-button.btn-danger,
.forum-thread-page .forum-thread-post-actions .text-button.danger,
.forum-thread-page .forum-thread-post-actions .text-button.delete,
.forum-thread-page .forum-thread-post-actions .danger-link,
.forum-thread-page .forum-thread-post-actions form:has(input[value="delete_post"]) .text-button,
.forum-thread-page .forum-thread-post-actions form:has(button[value="delete_post"]) .text-button,
.forum-thread-page .forum-thread-post-actions form:has(input[value="delete_post"]) button,
.forum-thread-page .forum-thread-post-actions form:has(button[value="delete_post"]) button {
  background: var(--forum-thread-danger-action-background) !important;
  color: var(--forum-thread-danger-action-color) !important;
  border-color: var(--forum-thread-danger-action-border-color) !important;
}

.forum-thread-page .forum-thread-actions .btn-danger:hover,
.forum-thread-page .forum-thread-actions .danger:hover,
.forum-thread-page .forum-thread-actions .delete:hover,
.forum-thread-page .forum-thread-actions form:has(input[value="delete_thread"]) .btn:hover,
.forum-thread-page .forum-thread-actions form:has(button[value="delete_thread"]) .btn:hover,
.forum-thread-page .forum-thread-post-actions .btn-danger:hover,
.forum-thread-page .forum-thread-post-actions .text-button.btn-danger:hover,
.forum-thread-page .forum-thread-post-actions .text-button.danger:hover,
.forum-thread-page .forum-thread-post-actions .text-button.delete:hover,
.forum-thread-page .forum-thread-post-actions .danger-link:hover,
.forum-thread-page .forum-thread-post-actions form:has(input[value="delete_post"]) .text-button:hover,
.forum-thread-page .forum-thread-post-actions form:has(button[value="delete_post"]) .text-button:hover,
.forum-thread-page .forum-thread-post-actions form:has(input[value="delete_post"]) button:hover,
.forum-thread-page .forum-thread-post-actions form:has(button[value="delete_post"]) button:hover {
  background: var(--forum-thread-danger-action-hover-background) !important;
  color: var(--forum-thread-danger-action-hover-color) !important;
  border-color: var(--forum-thread-danger-action-border-color) !important;
}

/* Bedanken-Anzeige */
.forum-thread-page .forum-thread-post-thanks {
  margin-top: var(--forum-thread-thanks-margin-top) !important;
  font-size: var(--forum-thread-thanks-font-size) !important;
}

/* Antwortbereich */
.forum-thread-page .forum-thread-reply-panel,
.forum-thread-page .forum-thread-info-panel {
  padding: var(--forum-thread-reply-panel-padding-y) var(--forum-thread-reply-panel-padding-x) !important;
  border-radius: var(--forum-thread-reply-panel-radius) !important;
}

.forum-thread-page .forum-thread-reply-title {
  margin: var(--forum-thread-reply-title-margin) !important;
  font-size: var(--forum-thread-reply-title-size) !important;
}

.forum-thread-page .forum-thread-reply-form {
  gap: var(--forum-thread-editor-gap) !important;
}

.forum-thread-page .forum-thread-bbcode-toolbar {
  margin-bottom: var(--forum-thread-toolbar-margin-bottom) !important;
}

.forum-thread-page .forum-thread-reply-textarea {
  min-height: var(--forum-thread-textarea-min-height) !important;
  font-size: var(--forum-thread-textarea-font-size) !important;
  border-radius: var(--forum-thread-textarea-radius) !important;
}

.forum-thread-page .forum-thread-submit-button {
  margin-top: var(--forum-thread-submit-margin-top) !important;
}

/* =========================================================
   Mobile Ansicht
   ========================================================= */
@media (max-width: 760px) {
  :root {
    --forum-thread-wrap-max-width: 100%;
    --forum-thread-posts-panel-padding-y: 20px;
    --forum-thread-posts-panel-padding-x: 20px;
    --forum-thread-reply-panel-padding-y: 20px;
    --forum-thread-reply-panel-padding-x: 20px;
    --forum-thread-title-size: 2rem;
  }

  .forum-thread-page .forum-thread-actions,
  .forum-thread-page .forum-thread-actions .inline-form {
    width: 100% !important;
  }

  .forum-thread-page .forum-thread-actions .btn {
    width: 100% !important;
  }

  .forum-thread-page .forum-thread-post-header {
    align-items: center !important;
    flex-wrap: wrap !important;
  }
}