/**
 * Football Forum - Modern CSS Framework
 * A responsive, modern CSS framework for the football forum system
 * Includes dark mode support and CSS variables for easy theming
 */

:root {
  /* Main colors - updated to match team colors */
  --forum-primary: var(--team-primary, #B01B1D);
  --forum-primary-rgb: var(--team-primary-rgb, 176, 27, 29);
  --forum-primary-dark: var(--team-secondary, #440000);
  --forum-primary-light: rgba(var(--team-primary-rgb, 176, 27, 29), 0.7);
  --forum-secondary: #ff8f00;
  --forum-success: #43a047;
  --forum-danger: #e53935;
  --forum-warning: #ffb300;
  --forum-info: #039be5;
  
  /* Neutral colors */
  --forum-text: #212121;
  --forum-text-secondary: #757575;
  --forum-text-tertiary: #9e9e9e;
  --forum-border: #e0e0e0;
  --forum-border-light: #f0f0f0;
  --forum-bg-light: #ffffff;
  --forum-bg-off: #f5f7fa;
  --forum-bg-hover: #f0f4f8;
  
  /* Element-specific colors */
  --forum-card-bg: #ffffff;
  --forum-card-border: #e0e0e0;
  --forum-card-shadow: rgba(0, 0, 0, 0.04);
  
  /* Role colors */
  --forum-role-admin: var(--team-primary, #B01B1D);
  --forum-role-moderator: var(--team-secondary, #440000);
  --forum-role-member: #5c6bc0;
  
  /* Avatar sizes */
  --forum-avatar-sm: 24px;
  --forum-avatar-md: 36px;
  --forum-avatar-lg: 64px;
  
  /* Spacing */
  --forum-spacing-xs: 0.25rem;
  --forum-spacing-sm: 0.5rem;
  --forum-spacing: 1rem;
  --forum-spacing-md: 1.5rem;
  --forum-spacing-lg: 2rem;
  
  /* Border radius */
  --forum-radius-sm: 4px;
  --forum-radius: 8px;
  --forum-radius-lg: 12px;
  
  /* Transitions */
  --forum-transition: 0.3s ease-in-out;
}

/* Force light mode colors when site theme is light */
[data-bs-theme="light"] {
  /* Main colors in light mode - explicitly set */
  --forum-primary: var(--team-primary, #B01B1D);
  --forum-primary-dark: var(--team-secondary, #440000);
  --forum-primary-light: rgba(var(--team-primary-rgb, 176, 27, 29), 0.7);
  
  /* Neutral colors in light mode - explicitly set */
  --forum-text: #212121;
  --forum-text-secondary: #757575;
  --forum-text-tertiary: #9e9e9e;
  --forum-border: #e0e0e0;
  --forum-border-light: #f0f0f0;
  --forum-bg-light: #ffffff;
  --forum-bg-off: #f5f7fa;
  --forum-bg-hover: #f0f4f8;
  
  /* Element-specific colors in light mode */
  --forum-card-bg: #ffffff;
  --forum-card-border: #e0e0e0;
  --forum-card-shadow: rgba(0, 0, 0, 0.04);
}

/* Dark mode colors */
[data-bs-theme="dark"] {
  /* Main colors in dark mode */
  --forum-primary: var(--team-primary, #B01B1D);
  --forum-primary-dark: var(--team-secondary, #440000);
  --forum-primary-light: rgba(var(--team-primary-rgb, 176, 27, 29), 0.6);
  
  /* Neutral colors in dark mode */
  --forum-text: #f5f5f5;
  --forum-text-secondary: #b0b0b0;
  --forum-text-tertiary: #757575;
  --forum-border: #424242;
  --forum-border-light: #383838;
  --forum-bg-light: #2d2d2d;
  --forum-bg-off: #252525;
  --forum-bg-hover: #383838;
  
  /* Element-specific colors */
  --forum-card-bg: #2d2d2d;
  --forum-card-border: #383838;
  --forum-card-shadow: rgba(0, 0, 0, 0.2);
}

/* Explicit dark mode hover states to override any other styles */
[data-bs-theme="dark"] .forum-listing-item:hover {
  background-color: #383838 !important;
}

[data-bs-theme="dark"] .forum-card:hover {
  background-color: var(--forum-card-bg) !important;
}

[data-bs-theme="dark"] .poll-item:hover {
  background-color: #383838 !important;
}

[data-bs-theme="dark"] .online-user:hover {
  background-color: #383838 !important;
}

/* Basic resets */
.forum-card,
.forum-post,
.forum-listing,
.forum-pagination,
.forum-stats-card {
  box-sizing: border-box;
}

/* Cards */
.forum-card {
  background-color: var(--forum-card-bg);
  border: 1px solid var(--forum-card-border);
  border-radius: var(--forum-radius);
  box-shadow: 0 2px 4px var(--forum-card-shadow);
  margin-bottom: var(--forum-spacing);
  overflow: hidden;
  transition: all var(--forum-transition);
}

.forum-card:hover {
  box-shadow: 0 4px 8px var(--forum-card-shadow);
}

.forum-card-header {
  border-bottom: 1px solid var(--forum-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--forum-spacing);
  background-color: var(--forum-bg-off);
}

.forum-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--forum-text);
}

.forum-card-content {
  position: relative;
}

/* Shared forum page headers */
.forum-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
  background-color: var(--forum-card-bg);
  border: 1px solid var(--forum-card-border);
  border-radius: var(--forum-radius);
  color: var(--forum-text);
}

.forum-header-title {
  white-space: nowrap;
  margin-bottom: 0;
  color: var(--forum-text);
}

.forum-header-title i {
  color: inherit;
}

.forum-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.forum-search-form {
  margin-bottom: 0;
}

.forum-search-group {
  display: flex;
  flex-wrap: nowrap;
}

.forum-search-input {
  min-width: 250px;
}

.forum-search-group .form-control {
  background-color: var(--forum-bg-off);
  border-color: var(--forum-border);
  color: var(--forum-text);
}

.forum-search-group .form-control::placeholder {
  color: var(--forum-text-secondary);
}

.forum-topic-sort-actions {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.forum-topic-sort-actions .btn,
.forum-new-topic-btn,
.forum-return-btn {
  white-space: nowrap !important;
}

/* Forum listings - categories, topics, posts */
.forum-listing {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.forum-listing-item {
  border-bottom: 1px solid var(--forum-border-light);
  transition: background-color var(--forum-transition);
}

.forum-listing-item:last-child {
  border-bottom: none;
}

.forum-listing-item:hover {
  background-color: var(--forum-bg-hover);
}

.forum-listing-link {
  display: block;
  color: var(--forum-text);
  text-decoration: none;
  padding: var(--forum-spacing);
}

.forum-listing-link:hover {
  color: var(--forum-text);
  text-decoration: none;
}

/* Category styling */
.forum-category-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--forum-primary, #B01B1D);
  border-radius: var(--forum-radius);
  color: white;
  font-size: 1.2rem;
  margin-right: var(--forum-spacing);
  flex-shrink: 0;
  transition: all var(--forum-transition);
}

.forum-category-details {
  flex-grow: 1;
  overflow: hidden;
}

.forum-category-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  transition: color 0.2s ease;
}

.forum-category-link {
  color: var(--forum-text);
  text-decoration: none;
}

.forum-category-link:hover {
  color: var(--forum-primary);
  text-decoration: none;
}

.forum-category-link:hover .forum-category-name {
  color: var(--forum-primary, #B01B1D);
}

.forum-category-description {
  color: var(--forum-text-secondary);
  font-size: 0.9rem;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Forum stats */
.forum-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--forum-text-secondary);
  font-size: 0.85rem;
  padding: 0 var(--forum-spacing);
  min-width: 70px;
  text-align: center;
}

.forum-stats-value {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--forum-text);
  display: block;
  margin-bottom: 2px;
}

/* Last post info */
.forum-last-post {
  padding-left: var(--forum-spacing);
  min-width: 200px;
  font-size: 0.9rem;
  color: var(--forum-text-secondary);
}

.forum-last-post-title {
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.forum-last-post-title a {
  color: var(--forum-text);
  text-decoration: none;
}

.forum-last-post-title a:hover {
  color: var(--forum-primary);
  text-decoration: none;
}

.forum-last-post-meta {
  display: flex;
  align-items: center;
}

.forum-last-post-avatar {
  width: var(--forum-avatar-sm);
  height: var(--forum-avatar-sm);
  border-radius: 50%;
  overflow: hidden;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--forum-bg-off);
}

.forum-last-post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Forum posts */
.forum-post {
  background-color: var(--forum-card-bg);
  border-radius: var(--forum-radius);
  border: 1px solid var(--forum-card-border);
  margin-bottom: var(--forum-spacing);
  overflow: hidden;
  position: relative;
}

.forum-post.highlighted {
  border: 2px solid var(--forum-primary);
  animation: highlight-pulse 1.5s ease-out;
}

@keyframes highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--forum-primary-rgb, 176, 27, 29), 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(var(--forum-primary-rgb, 176, 27, 29), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--forum-primary-rgb, 176, 27, 29), 0); }
}

.post-header {
  padding: var(--forum-spacing-sm) var(--forum-spacing);
  border-bottom: 1px solid var(--forum-border-light);
  background-color: var(--forum-bg-off);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.post-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  justify-content: flex-end;
}

.action-btn {
  background: none;
  border: none;
  color: var(--forum-text-secondary);
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  border-radius: var(--forum-radius-sm);
  transition: all var(--forum-transition);
  text-decoration: none;
}

.action-btn:hover {
  background-color: var(--forum-bg-light);
  color: var(--forum-primary);
}

.user-info {
  padding: var(--forum-spacing);
  border-right: 1px solid var(--forum-border-light);
  text-align: center;
  background-color: var(--forum-bg-off);
}

.user-avatar-container {
  margin-bottom: var(--forum-spacing);
}

.forum-avatar {
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forum-text-secondary);
  background-color: var(--forum-bg-light);
}

.avatar-sm {
  width: var(--forum-avatar-sm);
  height: var(--forum-avatar-sm);
  font-size: 0.8rem;
}

.avatar-md {
  width: var(--forum-avatar-md);
  height: var(--forum-avatar-md);
  font-size: 1rem;
}

.avatar-lg {
  width: var(--forum-avatar-lg);
  height: var(--forum-avatar-lg);
  font-size: 1.5rem;
}

.forum-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--forum-text);
  word-break: break-word;
}

.user-role {
  margin-bottom: var(--forum-spacing-sm);
}

.role-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.role-badge.admin {
  color: white;
  background-color: var(--forum-role-admin);
}

.role-badge.moderator {
  color: white;
  background-color: var(--forum-role-moderator);
}

.role-badge.member {
  color: white;
  background-color: var(--forum-role-member);
}

.user-stats {
  color: var(--forum-text-secondary);
  font-size: 0.85rem;
}

.post-body {
  padding: var(--forum-spacing);
}

.post-content {
  color: var(--forum-text);
  line-height: 1.6;
  word-break: break-word;
  overflow-wrap: break-word;
}

.post-footer {
  color: var(--forum-text-tertiary);
  font-size: 0.85rem;
  margin-top: var(--forum-spacing-sm);
  padding-top: var(--forum-spacing-sm);
  border-top: 1px dashed var(--forum-border-light);
}

/* Topic specific styles */
.forum-topic-title {
  font-weight: 600;
  color: var(--forum-text);
  margin-bottom: 0.25rem;
}

.forum-topic-meta {
  color: var(--forum-text-secondary);
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Status indicators */
.topic-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--forum-bg-off);
  color: var(--forum-text-secondary);
  margin-right: var(--forum-spacing);
}

.topic-sticky .topic-icon {
  color: var(--forum-primary);
}

.topic-locked .topic-icon {
  color: var(--forum-text-tertiary);
}

.forum-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  font-weight: 600;
}

.forum-badge-sticky {
  color: #fff;
  background-color: var(--forum-primary, #B01B1D);
}

.forum-badge-locked {
  color: #fff;
  background-color: var(--forum-primary-dark, #440000);
}

/* Forum breadcrumb */
.forum-breadcrumb {
  background-color: var(--forum-bg-off);
  border-radius: var(--forum-radius);
  padding: 0.75rem 1rem;
}

.forum-breadcrumb .breadcrumb {
  margin-bottom: 0;
}

.forum-breadcrumb .breadcrumb-item a {
  color: var(--forum-primary);
  text-decoration: none;
}

.forum-breadcrumb .breadcrumb-item.active {
  color: var(--forum-text-secondary);
}

/* Pagination */
.forum-pagination .page-link {
  color: var(--forum-primary);
  background-color: var(--forum-bg-light);
  border-color: var(--forum-border);
}

.forum-pagination .page-item.active .page-link {
  background-color: var(--forum-primary);
  border-color: var(--forum-primary);
  color: white;
}

.forum-pagination .page-link:hover {
  color: white;
  background-color: var(--forum-primary);
  border-color: var(--forum-primary);
}

/* Editor */
.forum-editor {
  border: 1px solid var(--forum-border);
  border-radius: var(--forum-radius);
  overflow: hidden;
}

.forum-editor-toolbar {
  background-color: var(--forum-bg-off);
  padding: 8px;
  border-bottom: 1px solid var(--forum-border);
  gap: 5px;
}

.editor-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--forum-radius-sm);
  color: var(--forum-text-secondary);
  cursor: pointer;
  transition: all var(--forum-transition);
}

.editor-btn:hover {
  background-color: var(--forum-bg-light);
  color: var(--forum-primary);
}

.forum-editor-content {
  border: none;
  border-radius: 0;
  resize: vertical;
  padding: var(--forum-spacing);
  background-color: var(--forum-card-bg);
  color: var(--forum-text);
}

.forum-editor-content:focus {
  outline: none;
  box-shadow: none;
}

.forum-preview-card {
  background-color: var(--forum-card-bg);
  border: 1px solid var(--forum-card-border);
  color: var(--forum-text);
  box-shadow: 0 2px 4px var(--forum-card-shadow);
}

/* Forced (!important) so Bootstrap's .card-header / .btn-close defaults can't
   win the cascade regardless of stylesheet load order. A solid team-red bar
   with white text keeps the white ✕ close button clearly visible. */
.forum-preview-header {
  background-color: var(--forum-primary) !important;
  border-bottom: none !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.6rem 0.85rem;
}

.forum-preview-header i,
.forum-preview-header span {
  color: #fff !important;
}

.forum-preview-close {
  background-color: transparent !important;
  border-radius: 999px;
  opacity: 1 !important;
  padding: 0.4rem;
}

.forum-preview-close:hover,
.forum-preview-close:focus {
  background-color: rgba(255, 255, 255, 0.25) !important;
  opacity: 1 !important;
}

.forum-preview-content {
  background-color: var(--forum-card-bg);
  color: var(--forum-text);
}

.forum-preview-content a {
  color: var(--forum-primary);
}

.forum-preview-content blockquote,
.forum-preview-content pre {
  background-color: var(--forum-bg-off);
  border-color: var(--forum-border);
  color: var(--forum-text);
}

.forum-preview-content code {
  color: inherit;
}

/* Buttons */
.forum-btn-primary {
  background-color: var(--forum-primary);
  border-color: var(--forum-primary);
  color: white;
  transition: all var(--forum-transition);
}

.forum-btn-primary:hover {
  background-color: var(--forum-primary-dark);
  border-color: var(--forum-primary-dark);
  color: white;
}

.forum-btn-outline {
  border: 1px solid var(--forum-border);
  background-color: var(--forum-bg-light);
  color: var(--forum-text-secondary);
  font-size: 0.85rem;
  transition: all var(--forum-transition);
}

.forum-btn-outline:hover {
  background-color: var(--forum-bg-light);
  color: var(--forum-primary);
  border-color: var(--forum-primary);
}

/* Stats cards */
.forum-stats-card {
  background-color: var(--forum-card-bg);
  border-radius: var(--forum-radius);
  padding: var(--forum-spacing);
  text-align: center;
  height: 100%;
  border: 1px solid var(--forum-border);
  transition: all var(--forum-transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.forum-stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--forum-card-shadow);
}

.forum-stats-icon {
  font-size: 1.8rem;
  color: var(--forum-primary);
  margin-bottom: var(--forum-spacing-sm);
}

.forum-stats-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--forum-text);
  margin-bottom: var(--forum-spacing-xs);
}

.forum-stats-label {
  color: var(--forum-text-secondary);
  font-size: 0.9rem;
}

/* Online users */
.online-users {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.online-user {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background-color: var(--forum-bg-off);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--forum-text);
  text-decoration: none;
  transition: all var(--forum-transition);
}

.online-user:hover {
  background-color: var(--forum-bg-hover);
  color: var(--forum-primary);
}

.online-user img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
  object-fit: cover;
}

.online-user.admin {
  border: 1px solid var(--forum-role-admin);
}

.online-user.moderator {
  border: 1px solid var(--forum-role-moderator);
}

/* Like button styles */
.like-post-btn {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.like-post-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.like-post-btn .like-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 9px;
    background-color: rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn-primary .like-count {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Like animation */
@keyframes likeAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.like-post-btn:active i {
    animation: likeAnimation 0.5s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .user-info {
    border-right: none;
    border-bottom: 1px solid var(--forum-border-light);
    padding-bottom: var(--forum-spacing);
  }
  
  .forum-avatar.avatar-lg {
    width: calc(var(--forum-avatar-lg) * 0.7);
    height: calc(var(--forum-avatar-lg) * 0.7);
  }
  
  .post-header {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: space-between;
  }
  
  .post-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  
  .forum-stats {
    min-width: 50px;
  }
  
  .forum-card-title {
    font-size: 1.1rem;
  }
}

/* Poll Styling - Integrated with Forum */
.poll-item {
  background-color: var(--forum-bg-off);
  border-left: 0px solid var(--forum-primary);
}

.poll-item:hover {
  background-color: var(--forum-bg-hover);
}

.poll-content {
  padding: var(--forum-spacing-sm) 0;
}
/* Poll section tweaks: remove left border for the poll item container when shown as its own section */
.topic-poll .forum-listing-item.poll-item {
  border-left: none !important;
  padding-left: 0.5rem; /* keep spacing consistent */
}

.topic-poll .poll-content {
  padding-left: 0; /* ensure content aligns with other sections */
}

.poll-item .progress {
  background-color: var(--forum-border-light);
  overflow: hidden;
}

.poll-item .progress-bar {
  background-color: var(--forum-primary);
  transition: width 0.3s ease;
}

.poll-item .badge {
  font-size: 0.75rem;
  font-weight: 500;
}

.poll-item .form-check-input:checked {
  background-color: var(--forum-primary);
  border-color: var(--forum-primary);
}

.poll-item .btn-primary {
  background-color: var(--forum-primary);
  border-color: var(--forum-primary);
  font-size: 0.875rem;
}

.poll-item .btn-primary:hover {
  background-color: var(--forum-primary-dark);
  border-color: var(--forum-primary-dark);
}

/* Dark mode poll adjustments */
[data-bs-theme="dark"] .poll-item {
  background-color: var(--forum-card-bg);
  border-left-color: var(--forum-primary-light);
}

[data-bs-theme="dark"] .poll-item .progress {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Forum Attachments Styling */
.forum-attachments {
  background-color: var(--forum-bg-off);
  border: 1px solid var(--forum-border-light);
  border-radius: var(--forum-border-radius);
  padding: var(--forum-spacing);
}

.attachments-header h6 {
  color: var(--forum-text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: var(--forum-spacing-sm);
}

.attachment-item {
  background-color: var(--forum-bg-light);
  border: 1px solid var(--forum-border-light);
  border-radius: var(--forum-border-radius-sm);
  transition: all var(--forum-transition);
}

.attachment-item:hover {
  border-color: var(--forum-primary-light);
  box-shadow: 0 2px 8px rgba(var(--forum-primary-rgb), 0.1);
}

.attachment-icon {
  flex-shrink: 0;
}

.attachment-info {
  min-width: 0; /* Allow text truncation */
}

.attachment-name {
  color: var(--forum-text);
  font-size: 0.9rem;
  font-weight: 500;
  word-break: break-word;
}

.attachment-meta {
  color: var(--forum-text-tertiary);
  font-size: 0.8rem;
}

.attachment-actions .btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

.attachment-preview {
  text-align: center;
}

.attachment-preview img {
  border: 1px solid var(--forum-border-light);
  border-radius: var(--forum-border-radius-sm);
}

/* File upload preview styling */
.file-name {
  font-weight: 500;
  color: var(--forum-text);
}

#file_preview {
  background-color: var(--forum-bg-off);
  border: 1px solid var(--forum-border-light);
  border-radius: var(--forum-border-radius);
}

#file_list .border-bottom:last-child {
  border-bottom: none !important;
}

/* Dark mode attachment adjustments */
[data-bs-theme="dark"] .forum-attachments {
  background-color: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .attachment-item {
  background-color: var(--forum-card-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .attachment-item:hover {
  border-color: var(--forum-primary-light);
}

[data-bs-theme="dark"] .attachment-preview img {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Dark mode adjustments for Bootstrap utility classes used in forum */
[data-bs-theme="dark"] .bg-light {
  background-color: #2a2a2a !important;
}

[data-bs-theme="dark"] .text-dark {
  color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .border {
  border-color: #383838 !important;
}

[data-bs-theme="dark"] .border-bottom {
  border-bottom-color: #383838 !important;
}

/* Dark mode for widget inline styles - override light backgrounds */
[data-bs-theme="dark"] .popular-topics-widget-modern .popular-topic-card,
[data-bs-theme="dark"] .popular-topics-widget-modern .popular-topic-compact,
[data-bs-theme="dark"] .recent-topics-widget-modern .topic-card,
[data-bs-theme="dark"] .recent-topics-widget-modern .topic-compact,
[data-bs-theme="dark"] .forum-stats-widget .stat-card,
[data-bs-theme="dark"] .forum-activity-widget .activity-card,
[data-bs-theme="dark"] .forum-categories-widget .category-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%) !important;
  border-color: #383838 !important;
}

[data-bs-theme="dark"] .popular-topics-widget-modern .meta-item,
[data-bs-theme="dark"] .popular-topics-widget-modern .meta-compact-item,
[data-bs-theme="dark"] .popular-topics-widget-modern .stat-item,
[data-bs-theme="dark"] .popular-topics-widget-modern .stat-compact-item,
[data-bs-theme="dark"] .recent-topics-widget-modern .meta-item,
[data-bs-theme="dark"] .recent-topics-widget-modern .meta-compact-item,
[data-bs-theme="dark"] .recent-topics-widget-modern .stat-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .popular-topics-widget-modern .rank-badge.other,
[data-bs-theme="dark"] .popular-topics-widget-modern .rank-badge-compact.other {
  background: linear-gradient(135deg, #3a3a3a, #2a2a2a) !important;
  color: #b0b0b0 !important;
  border-color: #4a4a4a !important;
}

/* Dark mode for forum cards and search results */
[data-bs-theme="dark"] .card.bg-light {
  background-color: #2d2d2d !important;
  border-color: #383838 !important;
}

[data-bs-theme="dark"] .search-snippet.bg-light {
  background-color: #2a2a2a !important;
  border-color: #383838 !important;
}

/* Dark mode for text colors in widgets */
[data-bs-theme="dark"] .popular-topics-widget-modern .popular-topic-title a,
[data-bs-theme="dark"] .popular-topics-widget-modern .popular-topic-compact-title a,
[data-bs-theme="dark"] .recent-topics-widget-modern .topic-title a,
[data-bs-theme="dark"] .recent-topics-widget-modern .topic-compact-title a {
  color: #e0e0e0;
  /* Keep gradient text but make it work in dark mode */
  background: linear-gradient(135deg, var(--team-primary, #B01B1D), var(--team-secondary, #440000));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark mode for forum stats widget */
[data-bs-theme="dark"] .forum-stats-widget-modern .stats-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%) !important;
  border-color: #383838 !important;
}

[data-bs-theme="dark"] .forum-stats-widget-modern .stats-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .forum-stats-widget-modern .stats-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .forum-stats-widget-modern .stats-label {
  color: #b0b0b0 !important;
}

[data-bs-theme="dark"] .forum-stats-widget-modern .newest-member {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .forum-stats-widget-modern .newest-member:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Dark mode for forum activity widget */
[data-bs-theme="dark"] .forum-activity-widget .activity-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%) !important;
  border-color: #383838 !important;
}

[data-bs-theme="dark"] .forum-activity-widget .activity-meta,
[data-bs-theme="dark"] .forum-activity-widget .activity-compact-meta {
  color: #b0b0b0 !important;
}

[data-bs-theme="dark"] .forum-activity-widget .activity-type {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dark mode for forum categories widget */
[data-bs-theme="dark"] .forum-categories-widget .category-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%) !important;
  border-color: #383838 !important;
}

[data-bs-theme="dark"] .forum-categories-widget .category-compact {
  background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%) !important;
  border-color: #383838 !important;
}

[data-bs-theme="dark"] .forum-categories-widget .category-description {
  color: #b0b0b0 !important;
}

[data-bs-theme="dark"] .forum-categories-widget .category-stats {
  color: #b0b0b0 !important;
}

/* Dark mode for empty states in widgets */
[data-bs-theme="dark"] .empty-state {
  color: #b0b0b0 !important;
}

/* Dark mode for topic/match score in topic.php */
[data-bs-theme="dark"] .fw-bold[style*="color: #333"] {
  color: #e0e0e0 !important;
}

/* Dark mode for borders in forum */
[data-bs-theme="dark"] .rounded[style*="border: 2px solid #dee2e6"] {
  border-color: #383838 !important;
}

/* Dark mode support for badge backgrounds with text-dark */
[data-bs-theme="dark"] .badge.bg-light.text-dark {
  background-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}

/* Dark mode adjustments for forum search results */
[data-bs-theme="dark"] .p-3.bg-light.border-bottom {
  background-color: #2a2a2a !important;
  border-bottom-color: #383838 !important;
}

[data-bs-theme="dark"] .p-2.rounded-circle.bg-light.text-primary {
  background-color: #2a2a2a !important;
}

/* General dark mode text color improvements */
[data-bs-theme="dark"] .text-muted {
  color: #b0b0b0 !important;
}

/* Ensure forum buttons work in dark mode */
[data-bs-theme="dark"] .forum-btn-outline {
  border-color: #383838;
  background-color: #2a2a2a;
  color: #b0b0b0;
}

[data-bs-theme="dark"] .forum-btn-outline:hover {
  background-color: #333;
  color: var(--forum-primary);
  border-color: var(--forum-primary);
}

/* Dark mode for editor */
[data-bs-theme="dark"] .forum-editor {
  border-color: #383838;
}

[data-bs-theme="dark"] .forum-editor-toolbar {
  background-color: #2a2a2a;
  border-bottom-color: #383838;
}

[data-bs-theme="dark"] .forum-editor-content {
  background-color: #2d2d2d;
  color: #e0e0e0;
}

/* Dark mode for online users */
[data-bs-theme="dark"] .online-user {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

[data-bs-theme="dark"] .online-user:hover {
  background-color: #333;
}

/* Additional dark mode hover fixes for all forum sections */
[data-bs-theme="dark"] .forum-listing-item:hover,
[data-bs-theme="dark"] .forum-category-link:hover .forum-listing-item {
  background-color: #383838 !important;
}

/* Dark mode hover for widget cards */
[data-bs-theme="dark"] .popular-topics-widget-modern .popular-topic-card:hover,
[data-bs-theme="dark"] .popular-topics-widget-modern .popular-topic-compact:hover,
[data-bs-theme="dark"] .recent-topics-widget-modern .topic-card:hover,
[data-bs-theme="dark"] .recent-topics-widget-modern .topic-compact:hover {
  background: linear-gradient(135deg, #333 0%, #2a2a2a 100%) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* Dark mode hover for search results */
[data-bs-theme="dark"] .search-result:hover {
  background-color: #383838 !important;
}

/* Dark mode for table hover states */
/* Dark mode for table hover states */
[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background-color: #383838 !important;
  color: #e0e0e0 !important;
}

/* Emoji Picker Styles */
.emoji-picker {
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.emoji {
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s ease;
  display: inline-block;
  user-select: none;
}

.emoji:hover {
  transform: scale(1.3);
}

/* Dark mode for emoji picker */
[data-bs-theme="dark"] .emoji-picker {
  background-color: #2a2a2a !important;
  border-color: #383838 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* =============================================
   Responsive tab navigation (all forum pages)
   ============================================= */

/* default-tabs: the Bootstrap nav-tabs wrapper used on recent.php and other pages */
.default-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 6px;
}

.default-tabs::-webkit-scrollbar {
  display: none;
}

.default-tabs .nav-item {
  flex-shrink: 0;
}

/* Forum header action rows: breadcrumb + buttons */
.forum-header-actions,
.forum-topic-header-actions,
.forum-topic-info-actions,
.forum-topic-sort-actions {
  flex-shrink: 0;
}

/* Prevent forum listing meta from overflowing; scroll instead */
@media (max-width: 575.98px) {
  .forum-header-bar {
    flex-wrap: wrap;
  }

  .forum-header-actions {
    width: 100%;
    flex-wrap: nowrap;
  }

  .forum-search-form {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
  }

  .forum-header-title {
    font-size: clamp(0.95rem, 4vw, 1.1rem);
  }

  .forum-search-input {
    min-width: 0;
    width: 100%;
  }

  .forum-search-group .form-control {
    height: 30px;
    font-size: 0.72rem;
    line-height: 1.15;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  .forum-search-group .btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
  }

  .forum-search-group .btn i {
    margin: 0 !important;
    font-size: 0.9rem;
    line-height: 1;
  }

  .forum-topic-sort-actions .btn,
  .forum-new-topic-btn,
  .forum-return-btn {
    font-size: 0.72rem;
    padding: 0.2rem 0.35rem;
    min-height: 30px;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Nav tabs compact */
  .default-tabs .nav-link {
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* Search form submit/reset buttons stack on very small screens */
  .forum-search-submit-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Post reply / new topic: action row */
  .forum-form-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .forum-form-actions .btn {
    flex-shrink: 0;
  }

  /* Pagination: compact */
  .forum-pagination .page-link {
    padding: 0.25rem 0.45rem;
    font-size: 0.8rem;
  }

  /* Post meta info: allow wrapping */
  .forum-post-meta {
    flex-wrap: wrap;
  }
}

/* =============================================
   Shared composer toolbar (forum-composer.js)
   Built dynamically above every .forum-editor-content
   ============================================= */
.forum-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background-color: var(--forum-bg-off);
  border: 1px solid var(--forum-border);
  border-bottom: none;
  border-radius: var(--forum-radius) var(--forum-radius) 0 0;
}

/* When the toolbar sits directly above the textarea, square off the join. */
.forum-toolbar + .forum-editor-content {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.forum-toolbar-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--forum-radius-sm);
  color: var(--forum-text-secondary);
  cursor: pointer;
  font-size: 0.95rem;
  transition: background-color var(--forum-transition), color var(--forum-transition);
}

.forum-toolbar-btn:hover,
.forum-toolbar-btn:focus-visible {
  background-color: var(--forum-bg-light);
  color: var(--forum-primary);
  outline: none;
}

.forum-toolbar-sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background-color: var(--forum-border);
}

/* ---- Floating menus/popovers (appended to <body>) ---- */
.forum-pop {
  position: absolute;
  z-index: 1085;
  background-color: var(--forum-card-bg, #fff);
  color: var(--forum-text, #212529);
  border: 1px solid var(--forum-border, #dee2e6);
  border-radius: var(--forum-radius, 8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 10px;
}

.forum-pop-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.forum-pop-label {
  display: block;
  font-size: 0.75rem;
  color: var(--forum-text-secondary);
  margin: 6px 0 2px;
}

.forum-pop .forum-pop-url,
.forum-pop .forum-pop-text {
  width: 260px;
  max-width: 70vw;
}

.forum-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}

/* ---- Colour picker ---- */
.forum-color-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.forum-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  padding: 0;
  transition: transform var(--forum-transition);
}

.forum-color-swatch:hover {
  transform: scale(1.18);
}

/* ---- Size menu ---- */
.forum-size-menu {
  display: flex;
  flex-direction: column;
  min-width: 130px;
}

.forum-size-item {
  border: none;
  background: none;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--forum-radius-sm);
  color: var(--forum-text);
  cursor: pointer;
}

.forum-size-item:hover {
  background-color: var(--forum-bg-light);
}

.forum-size-small  { font-size: 0.85em; }
.forum-size-normal { font-size: 1em; }
.forum-size-large  { font-size: 1.35em; }
.forum-size-huge   { font-size: 1.75em; }

/* ---- Emoji picker ---- */
.forum-emoji {
  width: 300px;
  max-width: 86vw;
}

.forum-emoji-search {
  margin-bottom: 8px;
}

.forum-emoji-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  margin-bottom: 8px;
  scrollbar-width: none;
}

.forum-emoji-tabs::-webkit-scrollbar { display: none; }

.forum-emoji-tab {
  flex: 0 0 auto;
  border: none;
  background: var(--forum-bg-off);
  color: var(--forum-text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.forum-emoji-tab.active {
  background: var(--forum-primary);
  color: #fff;
}

.forum-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
}

.forum-emoji-btn {
  border: none;
  background: none;
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px;
  border-radius: var(--forum-radius-sm);
  cursor: pointer;
  transition: transform var(--forum-transition), background-color var(--forum-transition);
}

.forum-emoji-btn:hover {
  background-color: var(--forum-bg-light);
  transform: scale(1.2);
}

.forum-emoji-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--forum-text-secondary);
  padding: 16px 0;
  font-size: 0.85rem;
}

/* Inline code rendered by [ICODE] in posts/previews */
.forum-inline-code {
  background-color: var(--forum-bg-light);
  border: 1px solid var(--forum-border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

/* Dark-mode polish for floating menus (variables cover most of it) */
[data-bs-theme="dark"] .forum-pop {
  background-color: #2a2a2a;
  border-color: #383838;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .forum-toolbar {
  background-color: #2a2a2a;
  border-color: #383838;
}