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

  Diese Datei ist nur für die Kategorie-Seiten gedacht:
  /forum/category.php?id=...

  Hier kannst du die Optik der Kategorie-Seite ä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.

  Technischer Hinweis:
  Die Variablen stehen hier bewusst in :root.
  Grund: .forum-category-page liegt im HTML innerhalb von .forum-main.
  CSS-Werte werden nur nach unten vererbt, nicht nach oben.
  Deshalb konnte .forum-main den Wert --forum-category-page-padding-top nicht lesen,
  wenn er nur in .forum-category-page gesetzt war.
*/

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

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

  /* Abstand unter dem kompletten Kategorie-Inhalt */
  --forum-category-page-padding-bottom: 0px;

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

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

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

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

  /* Kleine grüne Markierung "Kategorie" */
  --forum-category-tag-font-size: 0.90rem;
  --forum-category-tag-padding-y: 8px;
  --forum-category-tag-padding-x: 12px;
  --forum-category-tag-margin-bottom: 14px;

  /* Großer Kategorie-Titel, z.B. "Support FS25 LiveMap Companion" */
  --forum-category-title-size: clamp(2.1rem, 4vw, 2.5rem);
  --forum-category-title-margin: 0 0 12px;
  --forum-category-title-padding: 0;
  --forum-category-title-line-height: 1.05;
  --forum-category-title-letter-spacing: -0.03em;

  /* Beschreibung unter dem Kategorie-Titel */
  --forum-category-description-size: 1rem;
  --forum-category-description-margin: 0;
  --forum-category-description-line-height: 1.7;
  --forum-category-description-max-width: 760px;

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

  /* Abstand zwischen Beschreibung und Buttons */
  --forum-category-actions-margin-top: 18px;

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

  /* Buttonhöhe. Beispiel: 44px, 48px, 54px */
  --forum-category-button-min-height: 38px;

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

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

  /* =========================================================
     4) Themen-Box außen
     ========================================================= */

  /* Innenabstand der großen weißen Box */
  --forum-category-panel-padding-y: 24px;
  --forum-category-panel-padding-x: 24px;

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

  /* Abstand unter der großen weißen Box */
  --forum-category-panel-margin-bottom: 18px;

  /* =========================================================
     5) Einzelne Themen-Zeilen
     ========================================================= */

  /* Innenabstand jeder Themenzeile */
  --forum-category-thread-row-padding-y: 5px;
  --forum-category-thread-row-padding-x: 0px;

  /* Abstand zwischen linker Seite und Beitragszähler rechts */
  --forum-category-thread-row-gap: 18px;

  /* Mindesthöhe einer Themenzeile. Beispiel: auto, 70px, 90px */
  --forum-category-thread-min-height: auto;

  /* Trennlinie zwischen Themen. 1px = sichtbar, 0px = ausblenden */
  --forum-category-thread-border-width: 1px;

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

  /* Farbe der Trennlinie zwischen den Themenzeilen */
  --forum-category-thread-border-color: var(--line);

  /* =========================================================
     5a) Angepinnte Themen optisch absetzen
     ========================================================= */

  /* Hintergrund für angepinnte Themen. Transparent = keine Hervorhebung */
  --forum-category-pinned-background: Transparent;

  /* Linke Markierung bei angepinnten Themen. 0px = aus */
  --forum-category-pinned-marker-width: 4px;

  /* Farbe der linken Markierung bei angepinnten Themen */
  --forum-category-pinned-marker-color: var(--accent);

  /* Zusätzlicher linker Innenabstand bei angepinnten Themen */
  --forum-category-pinned-padding-left-extra: 10px;

  /* Rundung der angepinnten Themen-Zeilen */
  --forum-category-pinned-radius: 5px;

  /* Abstand unter jeder angepinnten Zeile */
  --forum-category-pinned-margin-bottom: 4px;

  /* Abstand zwischen den angepinnten Themen und den normalen Themen */
  --forum-category-pinned-divider-margin: 28px 0 14px;

  /* Anzeige der Trennzeile. flex = sichtbar, none = ausblenden */
  --forum-category-pinned-divider-display: flex;

  /* Schriftgröße der Trennzeile "Normale Themen" */
  --forum-category-pinned-divider-font-size: 0.78rem;

  /* Schriftfarbe der Trennzeile */
  --forum-category-pinned-divider-color: var(--muted);

  /* Linienfarbe der Trennzeile */
  --forum-category-pinned-divider-line-color: var(--line);

  /* Abstand zwischen Text und Linie in der Trennzeile */
  --forum-category-pinned-divider-gap: 10px;

  /* =========================================================
     6) Themen-Titel und Symbol
     ========================================================= */

  /* Schriftgröße des Thementitels */
  --forum-category-thread-title-size: 1.0rem;

  /* Abstand unter dem Thementitel */
  --forum-category-thread-title-margin: 0 0 5px;

  /* Zeilenhöhe des Thementitels */
  --forum-category-thread-title-line-height: 1.25;

  /* Ordnersymbol links neben dem Titel */
  --forum-category-folder-icon-size: 22px;

  /* Abstand zwischen Ordnersymbol, Titel und Badges */
  --forum-category-title-icon-gap: 8px;

  /* =========================================================
     7) Meta-Text unter dem Titel
     ========================================================= */

  /* Beispiel: "Erstellt von TRIDENTE · 30.04.2026" */
  --forum-category-thread-meta-size: 0.90rem;
  --forum-category-thread-meta-line-height: 1.45;
  --forum-category-thread-meta-margin: 0;

  /* =========================================================
     8) Badges: Angepinnt, Gesperrt, ungelesene Anzahl
     ========================================================= */

  --forum-category-badge-font-size: 0.7rem;
  --forum-category-badge-padding-y: 4px;
  --forum-category-badge-padding-x: 9px;
  --forum-category-badge-radius: 999px;

  /* =========================================================
     9) Rechte Seite: Beitragszähler und Admin-Löschen
     ========================================================= */

  /* Breite der rechten Spalte */
  --forum-category-thread-side-min-width: 132px;

  /* Abstand zwischen Beitragszähler und Admin-Link */
  --forum-category-thread-side-gap: 10px;

  /* Schriftgröße "23 Beiträge" */
  --forum-category-thread-count-size: 0.8rem;

  /* Button/Text "Thema löschen" */
  --forum-category-delete-font-size: 0.8rem;
  --forum-category-delete-min-height: 34px;
  --forum-category-delete-padding-x: 0px;
  --forum-category-delete-radius: 10px;

  /* =========================================================
     10) Leerer Zustand
     ========================================================= */

  /* Text, wenn noch keine Themen vorhanden sind */
  --forum-category-empty-font-size: 1rem;
  --forum-category-empty-margin: 0;
}

/* Gesamtbreite und Außenabstände
   Wichtig:
   Die Variablen stehen oben in :root, damit auch .forum-main sie lesen kann.
   .forum-category-page liegt im HTML innerhalb von .forum-main und kann Werte nicht nach oben vererben.
*/
body.forum-page-category .forum-main,
.forum-main:has(.forum-category-page) {
  padding-top: var(--forum-category-page-padding-top) !important;
  padding-bottom: var(--forum-category-page-padding-bottom) !important;
}

/* Breite der Kategorie-Seite */
body.forum-page-category .forum-wrap,
.forum-wrap:has(.forum-category-page) {
  max-width: var(--forum-category-wrap-max-width) !important;
}

/* Fallback: schadet nicht, falls ein Browser :has() nicht verwenden sollte. */
.forum-category-page {
  width: 100%;
}

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

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

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

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

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

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

/* Themen-Box */
.forum-category-page .forum-category-thread-panel {
  padding: var(--forum-category-panel-padding-y) var(--forum-category-panel-padding-x) !important;
  border-radius: var(--forum-category-panel-radius) !important;
  margin-bottom: var(--forum-category-panel-margin-bottom) !important;
}

/* Einzelne Themen-Zeilen */
.forum-category-page .forum-category-thread-row {
  display: flex !important;
  justify-content: space-between !important;
  min-height: var(--forum-category-thread-min-height) !important;
  padding: var(--forum-category-thread-row-padding-y) var(--forum-category-thread-row-padding-x) !important;
  gap: var(--forum-category-thread-row-gap) !important;
  border-bottom-width: var(--forum-category-thread-border-width) !important;
  border-bottom-style: var(--forum-category-thread-border-style) !important;
  border-bottom-color: var(--forum-category-thread-border-color) !important;
  align-items: center !important;
}

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

/* Angepinnte Themen optisch von normalen Themen absetzen */
.forum-category-page .forum-category-thread-row-pinned {
  background: var(--forum-category-pinned-background) !important;
  border-radius: var(--forum-category-pinned-radius) !important;
  padding-left: calc(var(--forum-category-thread-row-padding-x) + var(--forum-category-pinned-padding-left-extra)) !important;
  padding-right: var(--forum-category-thread-row-padding-x) !important;
  margin-bottom: var(--forum-category-pinned-margin-bottom) !important;
  box-shadow: inset var(--forum-category-pinned-marker-width) 0 0 var(--forum-category-pinned-marker-color) !important;
}

.forum-category-page .forum-category-pinned-divider {
  display: var(--forum-category-pinned-divider-display) !important;
  align-items: center !important;
  gap: var(--forum-category-pinned-divider-gap) !important;
  margin: var(--forum-category-pinned-divider-margin) !important;
  color: var(--forum-category-pinned-divider-color) !important;
  font-size: var(--forum-category-pinned-divider-font-size) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

.forum-category-page .forum-category-pinned-divider::before,
.forum-category-page .forum-category-pinned-divider::after {
  content: "" !important;
  display: block !important;
  height: 1px !important;
  flex: 1 1 auto !important;
  background: var(--forum-category-pinned-divider-line-color) !important;
}

.forum-category-page .thread-main-link {
  display: flex !important;
  justify-content: space-between !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: var(--forum-category-thread-row-gap) !important;
}

.forum-category-page .thread-count {
  min-width: 0 !important;
  text-align: right !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
}

/* Thementitel */
.forum-category-page .forum-category-thread-title {
  font-size: var(--forum-category-thread-title-size) !important;
  margin: var(--forum-category-thread-title-margin) !important;
  line-height: var(--forum-category-thread-title-line-height) !important;
}

.forum-category-page .forum-entry-title-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--forum-category-title-icon-gap) !important;
}

.forum-category-page .forum-folder-icon {
  display: inline-block !important;
  object-fit: contain !important;
  width: var(--forum-category-folder-icon-size) !important;
  height: var(--forum-category-folder-icon-size) !important;
  flex-basis: var(--forum-category-folder-icon-size) !important;
}

.forum-category-page .forum-category-thread-meta {
  font-size: var(--forum-category-thread-meta-size) !important;
  line-height: var(--forum-category-thread-meta-line-height) !important;
  margin: var(--forum-category-thread-meta-margin) !important;
}

/* Badges */
.forum-category-page .badge,
.forum-category-page .unread-badge {
  font-size: var(--forum-category-badge-font-size) !important;
  padding: var(--forum-category-badge-padding-y) var(--forum-category-badge-padding-x) !important;
  border-radius: var(--forum-category-badge-radius) !important;
}

/* Rechte Seite */
.forum-category-page .forum-category-thread-side {
  margin-left: auto !important;
  display: grid !important;
  justify-items: end !important;
  align-items: center !important;
  min-width: var(--forum-category-thread-side-min-width) !important;
  gap: var(--forum-category-thread-side-gap) !important;
}

.forum-category-page .forum-category-thread-count {
  font-size: var(--forum-category-thread-count-size) !important;
}

.forum-category-page .thread-admin-actions .text-button {
  min-height: var(--forum-category-delete-min-height) !important;
  padding-left: var(--forum-category-delete-padding-x) !important;
  padding-right: var(--forum-category-delete-padding-x) !important;
  border-radius: var(--forum-category-delete-radius) !important;
  font-size: var(--forum-category-delete-font-size) !important;
}

/* Leerer Zustand */
.forum-category-page .forum-category-empty-text {
  font-size: var(--forum-category-empty-font-size) !important;
  margin: var(--forum-category-empty-margin) !important;
}

/* =========================================================
   Mobile Ansicht
   ========================================================= */
@media (max-width: 760px) {
  .forum-category-page {
    --forum-category-thread-side-min-width: 0px;
    --forum-category-panel-padding-y: 20px;
    --forum-category-panel-padding-x: 20px;
  }

  .forum-category-page .forum-category-thread-row {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .forum-category-page .forum-category-thread-side {
    justify-items: start !important;
  }
}