/* ============================================================
   FS25 Portal — Forum & Tickets
   Depends on: 01-tokens.css, 02-base.css, 03-layout.css, 04-components.css
   ------------------------------------------------------------
   Two support surfaces built from the same shop-floor vocabulary:
   the forum is a bulletin board (category plaques, thread rows,
   posts with a small operator-ID plate down the side); tickets
   are a queue, so the row is dense and the ticket ID reads as a
   stamped serial. The ticket detail header borrows the spec-plate
   recipe from 02-base.css directly rather than inventing a
   second boxed-panel language.
   ============================================================ */

/* ============================================================
   Forum — category index
   ============================================================ */

.forum-categories {
  display: grid;
  gap: var(--s3);
}

.forum-cat-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light);
  color: inherit;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.forum-cat-card:hover {
  border-color: var(--amber-line);
  background: var(--surface-2);
}

.forum-cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: var(--fs-lg);
  border-radius: var(--r);
}

.forum-cat-info { flex: 1; min-width: 0; }

.forum-cat-info h3 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-md);
  margin-bottom: 2px;
}

.forum-cat-info p {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forum-cat-stats {
  display: flex;
  gap: var(--s5);
  flex-shrink: 0;
}

.forum-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.forum-stat-num {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.forum-stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-faint);
}

.forum-cat-latest {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 190px;
  flex-shrink: 0;
  text-align: right;
}

.forum-latest-title {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forum-latest-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

.forum-cat-arrow {
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform var(--t) var(--ease), color var(--t) var(--ease);
}

.forum-cat-card:hover .forum-cat-arrow {
  color: var(--amber);
  transform: translateX(2px);
}

/* ============================================================
   Forum — category view (thread list + sidebar)
   ============================================================ */

.forum-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--s5);
  align-items: start;
}

.forum-threads {
  display: grid;
  gap: var(--s2);
}

.forum-thread-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  color: inherit;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.forum-thread-row:hover {
  border-color: var(--amber-line);
  background: var(--surface-2);
}

.forum-thread-status { flex-shrink: 0; }

/* Thread status states not already covered by the shared
   .status-badge/.thread-badge colour table in 04-components.css. */
.thread-badge.open   { color: var(--steel); border-color: var(--steel-line); background: var(--steel-soft); }
.thread-badge.pinned { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }

.forum-thread-info { flex: 1; min-width: 0; }

.forum-thread-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.forum-thread-meta {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.forum-thread-stats {
  display: flex;
  gap: var(--s4);
  flex-shrink: 0;
}

.forum-thread-stat {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.forum-thread-stat svg { opacity: 0.7; }

.forum-thread-last {
  width: 130px;
  flex-shrink: 0;
  text-align: right;
}

.forum-thread-last-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-faint);
}

.forum-thread-last-meta {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* ---------- Sidebar ---------- */

.forum-sidebar-card { padding: var(--s4); }

.forum-sidebar-card h4 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  color: var(--text-faint);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: var(--hairline) solid var(--border);
}

.forum-sidebar-link {
  display: block;
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  border-radius: var(--r-sm);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.forum-sidebar-link:hover { background: var(--surface-2); color: var(--text); }

.forum-sidebar-link.active {
  background: var(--amber-soft);
  color: var(--amber);
}

/* ============================================================
   Forum — thread detail
   ============================================================ */

.forum-thread-header {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s5);
}

.forum-thread-badges {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.forum-thread-main-title { font-size: var(--fs-xl); }

.forum-thread-info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

/* The author's name is not machine data — break it back to body type. */
.forum-thread-info-row strong {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text);
}

/* ---------- Posts (original post + replies) ----------
   The sidebar is a small operator-ID plate: avatar and role are
   the only things it carries, and both stay clearly subordinate
   to the post body beside them. */

.forum-post,
.ticket-post {
  display: flex;
  gap: var(--s5);
  padding: var(--s5);
  margin-bottom: var(--s3);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light);
}

/* The original post gets a stamped top rivet-line to mark it as
   the thread's primary plate. */
.forum-post-op { border-top: 2px solid var(--amber); }

.forum-post.solution {
  border-color: var(--green-line);
  box-shadow: var(--edge-light), 0 0 0 1px var(--green-soft);
}

/* A staff reply on a ticket reads the same way an official part
   gets flagged: the plate-edge amber line, not a new colour. */
.ticket-post.staff {
  border-left: var(--plate-edge) solid var(--amber);
  background: var(--surface-2);
}

.forum-post-sidebar,
.ticket-post-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  width: 72px;
  flex-shrink: 0;
}

.avatar.medium { width: 40px; height: 40px; font-size: var(--fs-md); }

.forum-post-role {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--track-plate);
  padding: 2px var(--s2);
  color: var(--text-faint);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  white-space: nowrap;
}

.forum-post-role.admin      { color: var(--steel); border-color: var(--steel-line); background: var(--steel-soft); }
.forum-post-role.superadmin { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }

.forum-post-body { flex: 1; min-width: 0; }

.forum-post-header {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.forum-post-author {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
}

.forum-post-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.forum-post-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hairline) solid var(--border);
}

.forum-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}

.forum-action-btn:hover {
  background: var(--surface-3);
  border-color: var(--amber-line);
  color: var(--amber);
}

.forum-action-btn.active {
  color: var(--green);
  border-color: var(--green-line);
  background: var(--green-soft);
}

.forum-action-btn.danger:hover {
  color: var(--red);
  border-color: var(--red-line);
  background: var(--red-soft);
}

/* ---------- Reply form / locked notice / plain form card ---------- */

.forum-reply-form {
  margin-top: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge-light);
}

.forum-reply-form h3 {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--text-dim);
  margin-bottom: var(--s4);
}

.forum-locked-notice {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--steel);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--steel-soft);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}

.forum-locked-notice svg { color: var(--steel); flex-shrink: 0; }

/* .forum-form-card gets its panel treatment (surface/border/radius/
   shadow) from the shared list in 04-components.css; it just needs
   the padding that utility didn't apply here. */
.forum-form-card { padding: var(--s5); }

/* ============================================================
   Tickets — queue list
   ------------------------------------------------------------
   A support queue is scanned, not admired: ID first as a stamped
   serial, title dominant, status/priority immediately legible.
   ============================================================ */

.ticket-list {
  display: grid;
  gap: var(--s2);
}

.ticket-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r);
  color: inherit;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.ticket-row:hover {
  border-color: var(--amber-line);
  background: var(--surface-2);
}

.ticket-id {
  flex-shrink: 0;
  min-width: 52px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-plate);
  color: var(--amber);
}

.ticket-info { flex: 1; min-width: 0; }

.ticket-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.ticket-meta {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* Priority is a distinct class from .status-badge, so its base
   pill and colour table live here rather than in 04-components.css. */
.priority-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text-dim);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-radius: var(--r-sm);
}

.priority-badge.low      { color: var(--text-faint); }
.priority-badge.medium   { color: var(--steel); border-color: var(--steel-line); background: var(--steel-soft); }
.priority-badge.high     { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.priority-badge.critical { color: var(--red);   border-color: var(--red-line);   background: var(--red-soft); }

/* ============================================================
   Tickets — detail
   ------------------------------------------------------------
   The header reuses the spec-plate recipe from 02-base.css
   directly (surface-2 body, amber left edge, right-only radius)
   instead of a parallel boxed-panel style: serial, title and
   byline all live on the one stamped plate.
   ============================================================ */

.ticket-header {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--surface-2);
  border: var(--hairline) solid var(--border);
  border-left: var(--plate-edge) solid var(--amber);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  box-shadow: var(--edge-light);
}

.ticket-header-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.ticket-main-title { font-size: var(--fs-xl); }

.ticket-info-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: var(--hairline) solid var(--border-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.ticket-info-row strong {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text);
}

/* ============================================================
   Responsive — co-located, not in a global dumping ground
   ============================================================ */

@media (max-width: 860px) {
  .forum-cat-stats { display: none; }
  .forum-cat-latest { display: none; }

  .forum-layout { grid-template-columns: 1fr; }
  .forum-sidebar { display: none; }

  .forum-thread-last { display: none; }

  .forum-post,
  .ticket-post { flex-direction: column; }

  .forum-post-sidebar,
  .ticket-post-sidebar {
    flex-direction: row;
    width: auto;
  }

  .ticket-row { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .forum-cat-card { flex-wrap: wrap; }
  .forum-thread-row { flex-wrap: wrap; }

  .forum-post,
  .ticket-post { padding: var(--s4); }

  .forum-reply-form,
  .forum-form-card { padding: var(--s4); }

  .ticket-header { padding: var(--s3) var(--s4); }
}