/* ═══════════════════════════════════════════════════════════════════════
   FORUM THEME — Military / Defense / Science / Semiconductor
   Global override for all forum pages.
   100% theme-aware: uses --z-* tokens, switches with data-theme.
   Loaded AFTER page-specific CSS to override defaults.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Forum Design Tokens (derived from theme) ── */
.forum-home-container,
.forum-category-container,
.forum-thread-container,
.forum-search-container,
.forum-recent-container,
.forum-my-threads-container,
.forum-subscriptions-container,
.forum-user-profile-container,
.forum-new-thread-container,
[class*="forum-"] {
  --fm-accent: var(--z-accent, #f59e0b);
  --fm-accent-light: var(--z-accent-light, #fbbf24);
  --fm-accent-glow: var(--z-accent-glow, rgba(245, 158, 11, 0.15));
  --fm-bg: var(--z-bg, #0f172a);
  --fm-bg-deep: var(--z-bg-deep, #0a101e);
  --fm-surface: var(--z-surface-1, #1e293b);
  --fm-surface-2: var(--z-surface-2, #273548);
  --fm-surface-3: var(--z-surface-3, #334155);
  --fm-text: var(--z-text, #f1f5f9);
  --fm-text-sec: var(--z-text-sec, #94a3b8);
  --fm-text-muted: var(--z-text-muted, #64748b);
  --fm-border: var(--z-border, rgba(255, 255, 255, 0.08));
  --fm-border-hover: var(--z-border-hover, rgba(255, 255, 255, 0.15));
  --fm-success: var(--z-success, #10b981);
  --fm-danger: var(--z-danger, #ef4444);
  --fm-info: var(--z-info, #3b82f6);
  --fm-font-mono: var(--z-font-mono, 'JetBrains Mono', monospace);
  --fm-radius: var(--z-radius-md, 12px);
  --fm-radius-sm: var(--z-radius-sm, 8px);
}

/* ═══════════════════════════════════════
   1. GLOBAL BACKGROUNDS
   ═══════════════════════════════════════ */

/* All forum page containers */
.forum-home-container,
.forum-category-container,
.forum-thread-container,
.forum-search-container,
.forum-recent-container,
.forum-my-threads-container,
.forum-subscriptions-container,
.forum-user-profile-container,
.forum-new-thread-container {
  background: var(--fm-bg-deep);
  color: var(--fm-text);
}

/* ═══════════════════════════════════════
   2. HERO SECTIONS (all pages with heroes)
   ═══════════════════════════════════════ */

.hero-header,
.search-hero,
.recent-hero,
.category-hero,
.profile-hero,
.subscriptions-hero,
.my-threads-hero,
.new-thread-hero,
[class*="-hero"] {
  background: linear-gradient(165deg, var(--fm-bg-deep) 0%, var(--fm-bg) 100%) !important;
  border-bottom: 1px solid var(--fm-border);
}

/* Hero gradient overlay — theme accent */
.hero-gradient,
.search-hero .hero-gradient,
[class*="hero-gradient"] {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fm-accent) 6%, transparent),
    transparent 50%,
    color-mix(in srgb, var(--fm-accent) 4%, transparent)
  ) !important;
}

/* Hero pattern — tactical grid */
.hero-pattern,
[class*="hero-pattern"] {
  background-image:
    linear-gradient(color-mix(in srgb, var(--fm-accent) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fm-accent) 4%, transparent) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: 1 !important;
}

/* Floating icons — theme colored */
.floating-icon,
.floating-elements .floating-icon {
  color: var(--fm-accent) !important;
  opacity: 0.08 !important;
}

/* Hero title */
.hero-title .title-main,
.hero-title,
[class*="hero-title"] {
  color: var(--fm-text) !important;
}

.hero-title .title-sub {
  color: var(--fm-accent) !important;
}

.hero-title .title-icon i {
  color: var(--fm-accent) !important;
}

/* Hero description */
.hero-description {
  color: var(--fm-text-sec) !important;
}

/* Hero feature items */
.feature-item,
.hero-features .feature-item {
  background: color-mix(in srgb, var(--fm-accent) 6%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--fm-accent) 12%, transparent) !important;
  color: var(--fm-text-sec) !important;
}

.feature-item i {
  color: var(--fm-accent) !important;
}

/* ═══════════════════════════════════════
   3. BUTTONS — Tactical Style
   ═══════════════════════════════════════ */

.btn-primary,
.btn.btn-primary,
[class*="forum-"] .btn-primary {
  background: linear-gradient(135deg, var(--fm-accent), var(--fm-accent-light)) !important;
  border: none !important;
  color: var(--fm-bg-deep) !important;
  font-weight: 700 !important;
  border-radius: var(--fm-radius-sm) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--fm-accent) 30%, transparent) !important;
  transform: translateY(-1px) !important;
}

.btn-secondary,
.btn.btn-secondary {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--fm-accent) 25%, transparent) !important;
  color: var(--fm-accent) !important;
  border-radius: var(--fm-radius-sm) !important;
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--fm-accent) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--fm-accent) 50%, transparent) !important;
}

/* ═══════════════════════════════════════
   4. STAT CARDS — HUD Metrics
   ═══════════════════════════════════════ */

.stat-card,
[class*="stat-card"] {
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius) !important;
  transition: all 0.3s ease !important;
}

.stat-card:hover {
  border-color: color-mix(in srgb, var(--fm-accent) 25%, transparent) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2),
              0 0 16px color-mix(in srgb, var(--fm-accent) 6%, transparent) !important;
  transform: translateY(-2px) !important;
}

.stat-icon,
.stat-card .stat-icon {
  color: var(--fm-accent) !important;
}

.stat-number,
.stat-value {
  color: var(--fm-text) !important;
  font-family: var(--fm-font-mono) !important;
}

.stat-label {
  color: var(--fm-text-muted) !important;
  font-family: var(--fm-font-mono) !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════
   5. CATEGORY CARDS — Sector Panels
   ═══════════════════════════════════════ */

.category-card,
[class*="category-card"] {
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.category-card:hover {
  border-color: var(--fm-border-hover) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.25) !important;
}

/* Category icon — themed background */
.category-icon,
[class*="category-icon"] {
  border-radius: var(--fm-radius-sm) !important;
}

/* Category title */
.category-name,
.category-title,
[class*="category-name"],
[class*="category-title"] {
  color: var(--fm-text) !important;
  font-weight: 700 !important;
}

/* Category description */
.category-description,
.category-desc,
[class*="category-desc"] {
  color: var(--fm-text-sec) !important;
}

/* Category meta (thread count, post count) */
.category-meta,
.category-stats,
[class*="category-meta"],
[class*="category-stats"] {
  color: var(--fm-text-muted) !important;
  font-family: var(--fm-font-mono) !important;
  font-size: 0.6875rem !important;
}

/* Private badge */
.private-badge,
[class*="private-badge"] {
  background: color-mix(in srgb, var(--fm-danger) 12%, transparent) !important;
  color: var(--fm-danger) !important;
  border: 1px solid color-mix(in srgb, var(--fm-danger) 25%, transparent) !important;
  font-family: var(--fm-font-mono) !important;
  font-size: 0.5625rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════
   6. THREAD CARDS & ITEMS
   ═══════════════════════════════════════ */

.thread-item,
.thread-card,
.discussion-item,
.activity-item,
[class*="thread-item"],
[class*="thread-card"],
[class*="discussion-item"] {
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius-sm) !important;
  transition: all 0.25s ease !important;
}

.thread-item:hover,
.thread-card:hover,
.discussion-item:hover,
.activity-item:hover {
  border-color: var(--fm-border-hover) !important;
  background: var(--fm-surface-2) !important;
}

/* Thread title */
.thread-title,
.discussion-title,
[class*="thread-title"] {
  color: var(--fm-text) !important;
}

.thread-title:hover,
.discussion-title:hover,
[class*="thread-title"]:hover {
  color: var(--fm-accent) !important;
}

/* Thread meta */
.thread-meta,
.thread-info,
[class*="thread-meta"] {
  color: var(--fm-text-muted) !important;
}

/* ═══════════════════════════════════════
   7. TRENDING / ACTIVITY PANELS
   ═══════════════════════════════════════ */

.trending-panel,
.activity-panel,
.recent-panel,
[class*="trending-"],
[class*="activity-panel"] {
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius) !important;
}

/* Panel headers */
.panel-header,
.section-title-bar,
[class*="panel-header"],
[class*="section-title"] {
  color: var(--fm-text) !important;
  border-bottom: 1px solid var(--fm-border) !important;
}

/* Rank numbers */
.rank-number,
.trending-rank,
[class*="rank-number"] {
  color: var(--fm-accent) !important;
  font-family: var(--fm-font-mono) !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════
   8. BREADCRUMBS — Navigation Path
   ═══════════════════════════════════════ */

.breadcrumb,
.breadcrumb-nav,
[class*="breadcrumb"] {
  font-family: var(--fm-font-mono) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.04em !important;
}

.breadcrumb-item a {
  color: var(--fm-text-muted) !important;
  text-decoration: none !important;
}

.breadcrumb-item a:hover {
  color: var(--fm-accent) !important;
}

.breadcrumb-item.active {
  color: var(--fm-text-sec) !important;
}

/* ═══════════════════════════════════════
   9. FORM ELEMENTS — Tactical Input
   ═══════════════════════════════════════ */

[class*="forum-"] input[type="text"],
[class*="forum-"] input[type="search"],
[class*="forum-"] textarea,
[class*="forum-"] select,
.search-input,
.thread-input,
.reply-input {
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius-sm) !important;
  color: var(--fm-text) !important;
  transition: all 0.25s ease !important;
}

[class*="forum-"] input:focus,
[class*="forum-"] textarea:focus,
[class*="forum-"] select:focus,
.search-input:focus {
  border-color: var(--fm-accent) !important;
  box-shadow: 0 0 0 3px var(--fm-accent-glow) !important;
  outline: none !important;
}

[class*="forum-"] input::placeholder,
[class*="forum-"] textarea::placeholder {
  color: var(--fm-text-muted) !important;
}

/* ═══════════════════════════════════════
   10. TOOLBAR BUTTONS
   ═══════════════════════════════════════ */

.toolbar-btn {
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-border) !important;
  color: var(--fm-text-sec) !important;
  border-radius: var(--fm-radius-sm) !important;
  transition: all 0.25s ease !important;
}

.toolbar-btn:hover,
.toolbar-btn.active {
  background: color-mix(in srgb, var(--fm-accent) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--fm-accent) 25%, transparent) !important;
  color: var(--fm-accent) !important;
}

/* ═══════════════════════════════════════
   11. TAGS & BADGES
   ═══════════════════════════════════════ */

.badge,
.tag,
.label,
[class*="badge-"],
[class*="tag-"] {
  font-family: var(--fm-font-mono) !important;
  font-size: 0.5625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  border-radius: 4px !important;
}

/* Pinned / Sticky */
.badge-pinned,
.badge-sticky,
[class*="pinned"],
[class*="sticky"] {
  background: color-mix(in srgb, var(--fm-accent) 12%, transparent) !important;
  color: var(--fm-accent) !important;
}

/* Solved / Answered */
.badge-solved,
.badge-answered,
[class*="solved"],
[class*="answered"] {
  background: color-mix(in srgb, var(--fm-success) 12%, transparent) !important;
  color: var(--fm-success) !important;
}

/* ═══════════════════════════════════════
   12. PAGINATION
   ═══════════════════════════════════════ */

.pagination .page-link,
.pagination-link,
[class*="pagination"] a {
  background: transparent !important;
  border: 1px solid var(--fm-border) !important;
  color: var(--fm-text-sec) !important;
  font-family: var(--fm-font-mono) !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
  transition: all 0.25s ease !important;
}

.pagination .page-link:hover,
.pagination-link:hover {
  border-color: color-mix(in srgb, var(--fm-accent) 30%, transparent) !important;
  color: var(--fm-text) !important;
}

.pagination .active .page-link,
.pagination-link.active {
  background: color-mix(in srgb, var(--fm-accent) 15%, transparent) !important;
  border-color: var(--fm-accent) !important;
  color: var(--fm-accent) !important;
}

/* ═══════════════════════════════════════
   13. USER AVATARS & PROFILES
   ═══════════════════════════════════════ */

.user-avatar,
[class*="avatar"] {
  border: 2px solid var(--fm-border) !important;
  border-radius: var(--fm-radius-sm) !important;
}

.user-name,
.author-name,
[class*="user-name"],
[class*="author-name"] {
  color: var(--fm-text) !important;
  font-weight: 600 !important;
}

.user-role,
.user-title,
[class*="user-role"] {
  font-family: var(--fm-font-mono) !important;
  font-size: 0.5625rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--fm-accent) !important;
}

/* ═══════════════════════════════════════
   14. QUICK ACTIONS GRID
   ═══════════════════════════════════════ */

.quick-action-card,
.action-card,
[class*="action-card"],
[class*="quick-action"] {
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius) !important;
  transition: all 0.3s ease !important;
}

.quick-action-card:hover,
.action-card:hover {
  border-color: color-mix(in srgb, var(--fm-accent) 25%, transparent) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

.quick-action-card .action-icon,
[class*="action-card"] i {
  color: var(--fm-accent) !important;
}

/* ═══════════════════════════════════════
   15. COMMUNITY GUIDELINES
   ═══════════════════════════════════════ */

.guideline-card,
[class*="guideline"] {
  background: var(--fm-surface) !important;
  border: 1px solid var(--fm-border) !important;
  border-radius: var(--fm-radius-sm) !important;
}

.guideline-card .guideline-icon,
.guideline-icon {
  color: var(--fm-accent) !important;
}

/* ═══════════════════════════════════════
   16. FAB (Floating Action Button)
   ═══════════════════════════════════════ */

.fab,
.floating-action-btn,
[class*="fab-"] {
  background: linear-gradient(135deg, var(--fm-accent), var(--fm-accent-light)) !important;
  color: var(--fm-bg-deep) !important;
  border: none !important;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--fm-accent) 30%, transparent) !important;
}

/* ═══════════════════════════════════════
   17. SCROLL PROGRESS BAR
   ═══════════════════════════════════════ */

.scroll-progress,
[class*="scroll-progress"] {
  background: transparent !important;
}

.scroll-progress::after,
.scroll-progress-bar,
[class*="scroll-progress"] > * {
  background: linear-gradient(90deg, var(--fm-accent), var(--fm-accent-light)) !important;
}

/* ═══════════════════════════════════════
   18. EMPTY STATES
   ═══════════════════════════════════════ */

.empty-state,
[class*="empty-state"],
[class*="no-results"] {
  color: var(--fm-text-muted) !important;
}

.empty-state i,
[class*="empty-state"] i {
  color: var(--fm-text-muted) !important;
  opacity: 0.3 !important;
}

/* ═══════════════════════════════════════
   19. LINKS — Accent Hover
   ═══════════════════════════════════════ */

[class*="forum-"] a:not(.btn):not([class*="nav"]) {
  transition: color 0.2s ease !important;
}

[class*="forum-"] a:not(.btn):not([class*="nav"]):hover {
  color: var(--fm-accent) !important;
}

/* ═══════════════════════════════════════
   20. SUBCATEGORY ITEMS
   ═══════════════════════════════════════ */

.subcategory-item,
[class*="subcategory"] {
  color: var(--fm-text-sec) !important;
}

.subcategory-item:hover {
  color: var(--fm-accent) !important;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  .hero-features {
    flex-wrap: wrap !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-card:hover,
  .category-card:hover,
  .thread-item:hover,
  .quick-action-card:hover {
    transform: none !important;
  }
}