/* ============================================================
   Custom Forum Styles
   ============================================================ */

:root {
  --cf-bg:         #f4f5f7;
  --cf-surface:    #ffffff;
  --cf-border:     #e1e4e8;
  --cf-primary:    #2563eb;
  --cf-primary-h:  #1d4ed8;
  --cf-danger:     #dc2626;
  --cf-danger-h:   #b91c1c;
  --cf-text:       #1e293b;
  --cf-muted:      #6b7280;
  --cf-pin-bg:     #fef9c3;
  --cf-radius:     10px;
  --cf-shadow:     0 1px 4px rgba(0,0,0,.08);
}

.cf-forum { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--cf-text); }

/* ── HEADER ── */
.cf-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.cf-title  { font-size:1.6rem; font-weight:700; margin:0; }

/* ── CARD ── */
.cf-card {
  background:var(--cf-surface);
  border:1px solid var(--cf-border);
  border-radius:var(--cf-radius);
  padding:1.25rem 1.5rem;
  margin-bottom:1rem;
  box-shadow:var(--cf-shadow);
}
.cf-form-card { padding:1.5rem; }
.cf-form-card h3 { margin:0 0 1rem; font-size:1.1rem; }

/* ── CATEGORIES ── */
.cf-categories { display:flex; flex-direction:column; gap:.5rem; }
.cf-category-row {
  display:flex; align-items:center; gap:1rem;
  background:var(--cf-surface); border:1px solid var(--cf-border);
  border-radius:var(--cf-radius); padding:1rem 1.25rem;
  box-shadow:var(--cf-shadow); transition:box-shadow .15s;
}
.cf-category-row:hover { box-shadow:0 3px 10px rgba(0,0,0,.12); }
.cf-cat-icon  { font-size:1.6rem; flex-shrink:0; }
.cf-cat-info  { flex:1; min-width:0; }
.cf-cat-name  { font-size:1.05rem; font-weight:600; color:var(--cf-primary); text-decoration:none; }
.cf-cat-name:hover { text-decoration:underline; }
.cf-cat-desc  { margin:.25rem 0 0; font-size:.875rem; color:var(--cf-muted); }
.cf-cat-stats { font-size:.85rem; color:var(--cf-muted); white-space:nowrap; }
.cf-cat-actions { display:flex; gap:.4rem; }

/* ── BREADCRUMB ── */
.cf-breadcrumb { font-size:.875rem; color:var(--cf-muted); margin-bottom:1rem; }
.cf-breadcrumb a { color:var(--cf-primary); text-decoration:none; }
.cf-breadcrumb a:hover { text-decoration:underline; }
.cf-breadcrumb span { margin:0 .35rem; }

/* ── THREAD LIST ── */
.cf-thread-list { display:flex; flex-direction:column; gap:.5rem; }
.cf-thread-row {
  display:flex; align-items:center; gap:1rem;
  background:var(--cf-surface); border:1px solid var(--cf-border);
  border-radius:var(--cf-radius); padding:.85rem 1.25rem;
  box-shadow:var(--cf-shadow); transition:box-shadow .15s;
}
.cf-thread-row:hover { box-shadow:0 3px 10px rgba(0,0,0,.12); }
.cf-thread-row.cf-pinned { background:var(--cf-pin-bg); }
.cf-thread-meta-left { flex:1; min-width:0; display:flex; flex-direction:column; gap:.25rem; }
.cf-thread-title { font-weight:600; color:var(--cf-primary); text-decoration:none; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cf-thread-title:hover { text-decoration:underline; }
.cf-thread-author { font-size:.8rem; color:var(--cf-muted); }
.cf-thread-stats { font-size:.8rem; color:var(--cf-muted); white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; }
.cf-thread-mod-actions { display:flex; gap:.3rem; }

/* ── BADGES ── */
.cf-badge { font-size:.7rem; padding:.2rem .5rem; border-radius:999px; font-weight:600; }
.cf-badge--pin  { background:#fde68a; color:#92400e; }
.cf-badge--lock { background:#fca5a5; color:#7f1d1d; }

/* ── THREAD HEAD ── */
.cf-thread-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.cf-thread-heading { font-size:1.4rem; font-weight:700; margin:0 0 .4rem; }
.cf-thread-head-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── POSTS ── */
.cf-post { margin-bottom:1rem; }
.cf-post--original { border-left:4px solid var(--cf-primary); }
.cf-post-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; }
.cf-post-author { display:flex; align-items:center; gap:.5rem; font-size:.875rem; }
.cf-avatar { border-radius:50% !important; }
.cf-post-actions { display:flex; gap:.3rem; }
.cf-post-content { line-height:1.7; word-break:break-word; }

/* ── FORMS ── */
label { display:block; font-size:.875rem; font-weight:600; margin:.75rem 0 .25rem; }
.cf-input {
  width:100%; box-sizing:border-box;
  border:1px solid var(--cf-border); border-radius:6px;
  padding:.55rem .75rem; font-size:.95rem;
  background:#fafafa; transition:border .15s, box-shadow .15s;
}
.cf-input:focus { outline:none; border-color:var(--cf-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); background:#fff; }
.cf-textarea { resize:vertical; min-height:100px; }
.cf-form-actions { display:flex; gap:.5rem; margin-top:1rem; }
.cf-form-status { margin-top:.75rem; font-size:.875rem; color:var(--cf-danger); }

/* ── EDITOR TOOLBAR ── */
.cf-editor-wrap { margin-bottom:.5rem; }
.cf-editor-toolbar { display:flex; gap:.3rem; margin-bottom:.3rem; }
.cf-fmt {
  border:1px solid var(--cf-border); background:var(--cf-surface);
  border-radius:4px; padding:.25rem .6rem; cursor:pointer; font-size:.85rem;
  transition:background .1s;
}
.cf-fmt:hover { background:#f0f4ff; }

/* ── FILE INPUT ── */
.cf-file-input { margin:.4rem 0 .6rem; }
.cf-file-preview { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0; }
.cf-preview-item { max-width:120px; }
.cf-preview-img  { max-width:120px; max-height:90px; border-radius:6px; border:1px solid var(--cf-border); object-fit:cover; }
.cf-preview-file { font-size:.8rem; color:var(--cf-muted); word-break:break-all; }

/* ── ATTACHMENTS ── */
.cf-attachments { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.cf-att-img-link { display:block; }
.cf-att-img   { max-width:240px; max-height:200px; border-radius:8px; border:1px solid var(--cf-border); object-fit:cover; }
.cf-att-video { max-width:320px; border-radius:8px; }
.cf-att-file  { display:inline-flex; align-items:center; gap:.3rem; font-size:.85rem; color:var(--cf-primary); text-decoration:none; padding:.3rem .6rem; border:1px solid var(--cf-border); border-radius:6px; background:#f8fafc; }
.cf-att-file:hover { background:#f0f4ff; }

/* ── BUTTONS ── */
.cf-btn {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.5rem 1rem; border-radius:6px; font-size:.9rem; font-weight:600; cursor:pointer;
  border:1px solid var(--cf-border); background:var(--cf-surface); color:var(--cf-text);
  transition:background .15s, border-color .15s, color .15s; text-decoration:none;
}
.cf-btn:hover { background:#f0f4ff; border-color:#bfcfea; }
.cf-btn--primary { background:var(--cf-primary); border-color:var(--cf-primary); color:#fff; }
.cf-btn--primary:hover { background:var(--cf-primary-h); border-color:var(--cf-primary-h); color:#fff; }
.cf-btn--danger { background:var(--cf-danger); border-color:var(--cf-danger); color:#fff; }
.cf-btn--danger:hover { background:var(--cf-danger-h); border-color:var(--cf-danger-h); }
.cf-btn--sm { padding:.3rem .65rem; font-size:.8rem; }
.cf-btn:disabled { opacity:.55; cursor:not-allowed; }

/* ── PAGINATION ── */
.cf-pagination { display:flex; gap:.4rem; margin-top:1rem; flex-wrap:wrap; }
.cf-page-btn {
  padding:.4rem .75rem; border:1px solid var(--cf-border); border-radius:6px;
  text-decoration:none; font-size:.875rem; color:var(--cf-text); background:var(--cf-surface);
}
.cf-page-btn:hover, .cf-page-btn--active { background:var(--cf-primary); border-color:var(--cf-primary); color:#fff; }

/* ── META / MISC ── */
.cf-meta { color:var(--cf-muted); font-size:.8rem; }
.cf-empty { color:var(--cf-muted); font-style:italic; text-align:center; padding:2rem; }
.cf-cat-description { margin:0 0 1rem; color:var(--cf-muted); font-size:.9rem; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .cf-thread-row, .cf-category-row { flex-wrap:wrap; }
  .cf-thread-stats, .cf-cat-stats  { flex-direction:row; }
  .cf-att-img { max-width:100%; }
}