/* ==========================================================
   STYYCRAFT – forum.css
   ==========================================================
   Ergaenzt style.css um Forum-spezifische Styles. Nutzt
   dieselben CSS-Variablen (--teal, --surface, --border, ...).
   ========================================================== */

.forum-main{ max-width: 900px; margin: 0 auto; padding: 40px 24px 80px; }

.forum-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap: 16px;
  margin-bottom: 36px;
}
.forum-topbar h1{
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0 0 6px;
  font-size: 1.8rem;
}
.forum-auth-area{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.forum-auth-area .user-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px 6px 6px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.forum-auth-area .user-chip img{
  width: 26px; height:26px; border-radius:50%;
  image-rendering: pixelated;
}
.rank-pill{
  display:inline-block;
  font-size: 0.68rem;
  font-weight:700;
  padding: 2px 8px;
  border-radius: 20px;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

/* ---------- Kategorien ---------- */
.category-list{ display:flex; flex-direction:column; gap:14px; }
.category-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  cursor:pointer;
  transition: border-color .2s ease, transform .2s ease;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 16px;
}
.category-card:hover{ border-color: var(--teal); transform: translateY(-2px); }
.category-card h3{ font-family: var(--font-display); margin:0 0 6px; text-transform:uppercase; }
.category-card p{ margin:0; color: var(--text-dim); font-size:0.88rem; }
.category-card .stats{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align:right;
  white-space:nowrap;
}

/* ---------- Threads ---------- */
.forum-back-link{
  display:inline-block;
  margin-bottom: 20px;
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor:pointer;
}
.forum-back-link:hover{ text-decoration:underline; }
.thread-list-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 18px;
  flex-wrap:wrap;
  gap: 10px;
}
.thread-list{ display:flex; flex-direction:column; gap:10px; }
.thread-row{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  cursor:pointer;
  transition: border-color .2s ease;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  flex-wrap:wrap;
}
.thread-row:hover{ border-color: var(--teal); }
.thread-row .title-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.thread-row h4{ font-family: var(--font-display); margin:0; font-size:1rem; }
.thread-row .meta{ font-family: var(--font-mono); font-size:0.72rem; color: var(--text-dim); margin-top:4px; }
.thread-row .icon{ font-size:0.9rem; }
.thread-tag{
  display:inline-block;
  font-size:0.65rem;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 20px;
  font-weight:700;
}
.thread-row .reply-count{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space:nowrap;
}

/* ---------- Einzelner Thread ---------- */
.thread-view-header{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.thread-view-header h2{
  font-family: var(--font-display);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.thread-view-header .mod-actions{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.mod-btn{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
}
.mod-btn:hover{ border-color: var(--teal); color: var(--teal-bright); }
.mod-btn.danger:hover{ border-color:#ff5f56; color:#ff5f56; }

.post-list{ display:flex; flex-direction:column; gap:14px; }
.post-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  display:flex;
  gap: 16px;
}
.post-card .author-col{
  width: 110px;
  flex-shrink:0;
  text-align:center;
}
.post-card .author-col img{
  width: 56px; height:56px;
  border-radius: 8px;
  image-rendering: pixelated;
  border:1px solid var(--border);
  background: var(--bg-alt);
  margin-bottom: 8px;
}
.post-card .author-col .username{
  font-family: var(--font-display);
  font-size: 0.85rem;
  word-break: break-word;
}
.post-card .post-body{ flex:1; min-width:0; }
.post-card .post-body time{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}
.post-card .post-body p{ white-space: pre-line; margin: 10px 0 0; }
.post-card .post-actions{ margin-top:10px; }
.reaction-row{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
}
.reaction-btn{
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  display:flex;
  align-items:center;
  gap: 5px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.reaction-btn:hover{ border-color: var(--teal); color: var(--teal-bright); }
.reaction-btn.like-btn.active{ border-color:#27c93f; color:#27c93f; background: rgba(39,201,63,0.08); }
.reaction-btn.dislike-btn.active{ border-color:#ff5f56; color:#ff5f56; background: rgba(255,95,86,0.08); }
.reaction-count{ font-weight:700; }

.reply-form{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-top: 20px;
}
.reply-form textarea{ min-height: 110px; }

.tag-checkbox-list{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 6px;
}
.tag-checkbox-list label{
  display:flex;
  align-items:center;
  gap:6px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor:pointer;
}

.locked-notice{
  text-align:center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 20px;
}

/* ---------- Rich-Text-Editor ---------- */
.rt-toolbar{
  display:flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.rt-btn{
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor:pointer;
}
.rt-btn:hover{ border-color: var(--teal); color: var(--teal-bright); }

.emoji-picker-wrap{ position: relative; }
.emoji-picker{
  display:none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 260px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5);
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.emoji-picker.open{ display:grid; }
.emoji-item{
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 1.15rem;
  padding: 5px;
  cursor: pointer;
  line-height: 1;
}
.emoji-item:hover{ background: var(--bg-alt); }

.rt-editor{
  min-height: 130px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
}
.rt-editor:focus{ outline:none; border-color: var(--teal); }
.rt-editor img{ max-width:100%; border-radius: 8px; margin: 6px 0; display:block; }
.rt-editor:empty::before{ content: attr(data-placeholder); color: var(--text-dim); }

/* Gerenderter Post-Inhalt (aus dem Editor gespeichert) */
.post-content-html img{ max-width:100%; border-radius: 8px; margin: 8px 0; display:block; }
.post-content-html p{ margin: 0 0 10px; }
.post-content-html ul, .post-content-html ol{ margin: 0 0 10px 22px; padding:0; }
.post-content-html a{ color: var(--teal-bright); text-decoration: underline; }

.post-signature{
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.post-signature img{ max-width:100%; }

/* ---------- Profil ---------- */
.avatar-edit-row{
  display:flex;
  align-items:center;
  gap: 16px;
}
.avatar-edit-row img{
  width: 72px; height:72px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.socials-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.socials-grid input{
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 11px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
}
@media (max-width: 480px){
  .socials-grid{ grid-template-columns: 1fr; }
}
.social-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.social-links a{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--teal);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  text-decoration:none;
}
.social-links a:hover{ border-color: var(--teal); }