/*
  Forum Common CSS
  Contains shared variables, base layout, thread rendering, mobile card layout
  and small utilities used across forum hub/category/tag pages.
*/

/* --- CSS Variables (shared) --- */
:root{
  --forum-bg: #f7f8fa;
  --forum-surface: #ffffff;
  --forum-text: #111827;
  --forum-muted: #6b7280;
  --forum-border: #e5e7eb;
  --forum-grid-columns: 80px 120px 1fr 120px 80px 80px 140px 60px;
  --forum-accent: #2563eb;
  --forum-accent-2: #0ea5e9;
  --forum-warn: #f59e0b;
  --forum-success: #10b981;
  --forum-danger: #ef4444;
  --forum-radius: 16px;
  --forum-radius-sm: 10px;
  --forum-shadow: 0 10px 24px rgba(0,0,0,.05);
  --forum-shadow-sm: 0 6px 16px rgba(0,0,0,.05);
  --forum-focus: 0 0 0 3px rgba(37, 99, 235, .35);
  --forum-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* @media (prefers-color-scheme: dark){
  :root{
    --forum-bg: #0b0f14;
    --forum-surface: #0f172a;
    --forum-text: #e5e7eb;
    --forum-muted: #9ca3af;
    --forum-border: #1f2937;
    --forum-accent: #60a5fa;
    --forum-accent-2: #38bdf8;
    --forum-shadow: 0 10px 24px rgba(0,0,0,.45);
    --forum-shadow-sm: 0 6px 16px rgba(0,0,0,.35);
    --forum-focus: 0 0 0 3px rgba(96, 165, 250, .4);
  }
} */

/* --- Base layout used by all forum pages --- */
#forum-app.forum-container, #forum-category-app.forum-container{
  font-family: var(--forum-font) !important;
  color: var(--forum-text);
  background: var(--forum-bg);
  min-height: 70vh;
  padding: clamp(14px, 2vw, 24px);
}


.forum-topbar h1{ margin:0 0 10px 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 750; letter-spacing: -0.02em; }

/* Mobile: Auto-hide topbar on scroll down, show on scroll up */
@media (max-width: 767px) {
  .forum-topbar.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  
  .forum-topbar.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

.forum-filters-container{ position: relative; max-width:1200px; margin-bottom:16px; }
.forum-filters{ display:grid; grid-template-columns: 1fr 1fr 1fr auto auto; gap:10px; align-items:center; }

/* --- Threads list & header/grid alignment (shared) --- */
#forum-threads{ margin: 16px 0 18px 0; background: var(--forum-surface); border-radius: var(--forum-radius); box-shadow: var(--forum-shadow); overflow: hidden; border: 1px solid var(--forum-border); }

.forum-headers{ display:grid; grid-template-columns: var(--forum-grid-columns); gap:8px; padding:16px 20px; background: linear-gradient(135deg, var(--forum-accent) 0%, var(--forum-accent-2) 100%); color:white; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.5px; border-bottom:2px solid var(--forum-border); }
.forum-headers > div{ display:flex; align-items:center; justify-content:center; }
.forum-headers .col-thread{ justify-content:flex-start; }

/* Desktop grid for thread rows - shared */
@media (min-width: 768px) {
  /* Ensure forum-headers has same grid structure as thread-row */
  .forum-headers{ padding:16px 20px !important; }
  
  .thread-row{ display:grid; grid-template-columns: var(--forum-grid-columns); gap:8px; align-items:center; padding:12px 20px !important; border-bottom:1px solid var(--forum-border); background:var(--forum-surface); transition: background-color .2s ease; }
  .thread-row:hover{ background: color-mix(in oklab, var(--forum-accent) 3%, var(--forum-surface)); }
  .thread-row:last-child{ border-bottom:none; }

  /* Explicit column placement for thread rows */
  .thread-row > .col-status{ grid-column: 1 / 2; }
  .thread-row > .col-author{ grid-column: 2 / 3; }
  .thread-row > .col-thread{ grid-column: 3 / 4; min-width: 0; overflow: hidden; }
  .thread-row > .col-category{ grid-column: 4 / 5; display:flex; justify-content:center; align-items:center; }
  .thread-row > .col-replies{ grid-column: 5 / 6; display:flex; justify-content:center; align-items:center; }
  .thread-row > .col-views{ grid-column: 6 / 7; display:flex; justify-content:center; align-items:center; }
  .thread-row > .col-lastpost{ grid-column: 7 / 8; display:flex; justify-content:center; align-items:center; }
  .thread-row > .col-actions{ grid-column: 8 / 9; display:flex; justify-content:center; align-items:center; }

  /* Explicit column placement for forum headers */
  .forum-headers > .col-status{ grid-column: 1 / 2; }
  .forum-headers > .col-author{ grid-column: 2 / 3; }
  .forum-headers > .col-thread{ grid-column: 3 / 4; }
  .forum-headers > .col-category{ grid-column: 4 / 5; }
  .forum-headers > .col-replies{ grid-column: 5 / 6; }
  .forum-headers > .col-views{ grid-column: 6 / 7; }
  .forum-headers > .col-lastpost{ grid-column: 7 / 8; }
  .forum-headers > .col-actions{ grid-column: 8 / 9; }
}

/* Thread column */
.col-thread{
  min-width: 0; /* Allow text truncation */
  padding: 8px 0;
  overflow: hidden; /* Prevent content overflow */
}

.thread-main{
  width: 100%;
  min-width: 0; /* Allow flex children to shrink */
  overflow: hidden; /* Prevent content overflow */
}

.thread-title{
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden; /* Prevent overflow */
  text-overflow: ellipsis; /* Add ellipsis for long titles */
}

.thread-title a{
  color: var(--forum-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limit to 2 lines */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.thread-title a:hover{
  color: var(--forum-accent);
}

.thread-meta{
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 10px;
  color: var(--forum-muted);
}

.thread-meta .avatar-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* border: 1px solid var(--forum-border); */
  flex-shrink: 0;
}

.thread-meta .avatar-placeholder-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #888;
  flex-shrink: 0;
}

.thread-meta .username {
  font-size: 12px;
  font-weight: 500;
  color: var(--forum-text-muted, #666);
  text-decoration: none;
}

.thread-meta .username:hover {
  color: var(--forum-accent);
}

.thread-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 20px;
}

.thread-tags .tag{
  display: inline-block;
  background: var(--forum-border);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  color: var(--forum-muted);
}

.thread-tags .tag.more{
  background: color-mix(in oklab, var(--forum-accent) 15%, var(--forum-surface));
  color: var(--forum-accent);
  font-weight: 600;
}

.thread-excerpt{
  font-size: 13px;
  color: var(--forum-muted);
  line-height: 1.4;
  margin-top: 6px;
}

/* Responsive: Compact columns below 1080px */
@media (min-width: 768px) and (max-width: 1079px) {
  :root {
    /* Make lastpost and author columns flexible, reduce category width */
    --forum-grid-columns: 70px minmax(70px, 0.5fr) 1fr minmax(50px, 0.5fr) 70px 70px minmax(60px, 0.55fr) 50px;
  }
  
  /* Reduce padding to save space */
  .forum-headers,
  .thread-row {
    padding: 12px 12px !important;
    gap: 6px;
  }
  
  /* Make lastpost content more compact */
  .col-lastpost {
    text-align: center;
  }
  
  .lastpost-info {
    gap: 4px !important;
  }
  
  .lastpost-details {
    font-size: 11px;
  }
  
  /* Compact category display */
  .category-name {
    font-size: 10px !important;
  }
  
  .category-icon {
    font-size: 20px !important;
  }

  .thread-meta .avatar-sm {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* border: 1px solid var(--forum-border); */
  flex-shrink: 0;
  }
}

/* Shared utilities and controls used by all pages */
.btn-share{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; border:1px solid transparent; background:transparent; cursor:pointer; transition: background-color .12s ease, transform .08s ease, box-shadow .12s ease; color:var(--forum-text); }
.btn-share .material-icons{ font-size:18px; line-height:1; }
.btn-share:hover{ background: color-mix(in oklab, var(--forum-accent) 6%, var(--forum-surface)); border-color: color-mix(in oklab, var(--forum-accent) 12%, transparent); }
.btn-share:focus-visible{ box-shadow: var(--forum-focus); outline:none; }
.sr-only{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.count-number{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; font-size:16px; font-weight:700; color:#ffffff; background:var(--forum-accent); text-align:center; }

/* Mobile: card layout and bottom stats grouping (shared) */
@media (max-width: 767px) {
  .forum-headers{ display:none !important; }
  .thread-row{ display:flex !important; flex-direction:column !important; gap:16px; padding:16px; border-radius:var(--forum-radius); margin-bottom:16px; box-shadow:var(--forum-shadow-sm); border:1px solid var(--forum-border); background:var(--forum-surface); width:100%; }
  .thread-row > .col-views, .thread-row > .col-replies, .thread-row > .col-status { display:none !important; }
  .thread-mobile-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; order:3; padding-top:8px; border-top:1px solid var(--forum-border); margin-top:8px; }
  .thread-mobile-stats { display:flex; align-items:center; justify-content:space-between; width:100%; gap:16px; }
  .mobile-vote-actions { display:inline-flex; align-items:center; gap:0; order:1; background:transparent; border:1px solid var(--forum-border); border-radius:12px; overflow:hidden; max-width:50%; }
  .mobile-right-stats { display:flex; align-items:center; gap:8px; }

  /* Ensure consistent ordering on mobile bottom: votes (left) then replies, views, share (right) */
  .thread-mobile-stats > .mobile-vote-actions { order: 1; }
  .thread-mobile-stats > .mobile-right-stats { order: 2; display:flex; align-items:center; gap:8px; }
  .thread-mobile-stats > .mobile-right-stats .col-replies { order: 1; display:flex; align-items:center; }
  .thread-mobile-stats > .mobile-right-stats .col-views { order: 2; display:flex; align-items:center; }
  .thread-mobile-stats > .mobile-right-stats .mobile-share-action { order: 3; display:inline-flex; align-items:center; justify-content:center; }
}

/* --- Thread Status Badges --- */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  min-height: 15px;
  padding: 0 4px;
  font-size: 10px;
  margin-left: 2px;
  background: var(--forum-border);
}

.status-badge.pending-approval {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.status-badge.hidden {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.status-badge.open {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

.status-badge.solved {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.status-badge.closed {
  background: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
}

.status-badge.locked {
  background: #fce7f3;
  color: #9f1239;
  border: 1px solid #f9a8d4;
}

.status-badge.sticky {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fde047;
}

/* Dark mode status badges */
@media (prefers-color-scheme: dark) {
  .status-badge.pending-approval {
    background: #451a03;
    color: #fef3c7;
    border-color: #78350f;
  }
  
  .status-badge.hidden {
    background: #450a0a;
    color: #fee2e2;
    border-color: #991b1b;
  }
  
  .status-badge.open {
    background: #064e3b;
    color: #d1fae5;
    border-color: #065f46;
  }
  
  .status-badge.solved {
    background: #1e3a8a;
    color: #dbeafe;
    border-color: #1e40af;
  }
  
  .status-badge.closed {
    background: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
  }
  
  .status-badge.locked {
    background: #500724;
    color: #fce7f3;
    border-color: #9f1239;
  }
  
  .status-badge.sticky {
    background: #451a03;
    color: #fef3c7;
    border-color: #78350f;
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }


.category-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 60px; /* Ensure consistent height even without product tags */
  justify-content: center;
}

.category-icon{
  font-size: 24px;
  margin-bottom: 2px;
}

.category-name{
  font-size: 11px;
  font-weight: 600;
  color: var(--forum-text);
  text-transform: uppercase;
}

.product-tags{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.brand-tag, .model-tag{
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 6px;
  font-weight: 600;
}

.brand-tag{
  background: color-mix(in oklab, var(--forum-success) 15%, var(--forum-surface));
  color: var(--forum-success);
}

.model-tag{
  background: color-mix(in oklab, var(--forum-warn) 15%, var(--forum-surface));
  color: var(--forum-warn);
}