/* Forum Neon Skin - Matching Concurs Design */

/* ---------- Page backdrop + header blending on forum pages ---------- */
body.page-forum {
    background: #151625;
    min-height: 100vh;
  }
  
  /* ---------- Forum wrapper ---------- */
  .forum-container {
    --forum-bg: #0b0f14;
    --forum-surface: #0f1722;
    --forum-border: rgba(22, 241, 211, 0.35);
    --forum-neon: #16f1d3;
    --forum-text: #e6f1fb;
    --forum-dim: rgba(230, 241, 251, 0.68);
    --forum-muted: rgba(230, 241, 251, 0.45);
  
    background: transparent;
    min-height: 100vh;
    padding: 2rem 0;
  }
  
  /* ---------- Forum Header ---------- */
  .forum-header {
    background: linear-gradient(180deg, #07141a, #0d1a22);
    border: 2px solid var(--forum-border);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 0 0 2rem 0; /* remove top margin to avoid odd strip */
    box-shadow:
      0 0 18px rgba(22, 241, 211, 0.25),
      inset 0 0 20px rgba(22, 241, 211, 0.08);
    position: relative;
    overflow: hidden;
  }
  
  .forum-header::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    pointer-events: none;
    box-shadow: 0 0 44px rgba(22, 241, 211, 0.35) inset;
  }
  
  .forum-header h1 {
    color: var(--forum-text);
    font-weight: 900;
    font-size: 2.5rem;
    margin: 0;
    text-shadow: 0 0 10px rgba(22, 241, 211, 0.15);
    letter-spacing: 0.5px;
  }
  
  .forum-header .btn-new-thread {
    background: linear-gradient(135deg, var(--forum-neon), #0fb8a0);
    border: none;
    color: #002a24;
    font-weight: 900;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    box-shadow: 0 0 20px rgba(22, 241, 211, 0.4);
    transition: all 0.3s ease;
  }
  
  .forum-header .btn-new-thread:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(22, 241, 211, 0.6);
    color: #002a24;
  }
  
  /* ---------- Forum Actions ---------- */
  .forum-actions {
    background: linear-gradient(180deg, #07141a, #0d1a22);
    border: 1px solid var(--forum-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 0 15px rgba(22, 241, 211, 0.2);
  }
  
  /* ---------- Search ---------- */
  .forum-search { position: relative; margin-bottom: 1rem; }
  .forum-search input {
    background: linear-gradient(180deg, #0a1a22, #0f1e28);
    border: 2px solid var(--forum-border);
    border-radius: 12px;
    color: var(--forum-text);
    padding: 0.75rem 1rem 0.75rem 3rem;
    font-size: 1rem;
    width: 100%;
    transition: all 0.3s ease;
  }
  .forum-search input:focus { outline: none; border-color: var(--forum-neon); box-shadow: 0 0 20px rgba(22, 241, 211, 0.3); }
  .forum-search input::placeholder { color: var(--forum-muted); }
  .forum-search::before {
    content: "🔍";
    position: absolute;
    left: 1rem; top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem; opacity: 0.7;
  }
  
  /* ---------- Category Pills ---------- */
  .forum-categories {
    display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.5rem 0;
    scrollbar-width: thin; scrollbar-color: var(--forum-neon) transparent;
  }
  .forum-categories::-webkit-scrollbar { height: 6px; }
  .forum-categories::-webkit-scrollbar-track { background: transparent; }
  .forum-categories::-webkit-scrollbar-thumb { background: var(--forum-neon); border-radius: 3px; }
  
  .forum-category-pill {
    background: linear-gradient(135deg, #0a1a22, #0f1e28);
    border: 2px solid var(--forum-border);
    border-radius: 999px;
    color: var(--forum-text);
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px;
    cursor: pointer; transition: all 0.3s ease; white-space: nowrap; flex-shrink: 0;
    text-decoration: none; display: inline-flex; align-items: center; position: relative; z-index: 1;
  }
  .forum-category-pill:hover {
    border-color: var(--forum-neon);
    box-shadow: 0 0 15px rgba(22, 241, 211, 0.3);
    transform: translateY(-1px);
    color: var(--forum-text); text-decoration: none;
  }
  .forum-category-pill.active {
    background: linear-gradient(135deg, var(--forum-neon), #0fb8a0);
    border-color: var(--forum-neon); color: #002a24;
    box-shadow: 0 0 20px rgba(22, 241, 211, 0.4);
  }
  .forum-category-pill::before { content: ''; position: absolute; inset: 0; z-index: -1; }
  .forum-category-pill .badge {
    background: rgba(22, 241, 211, 0.2) !important;
    color: var(--forum-neon) !important;
    font-size: 0.7rem; padding: 0.2rem 0.4rem;
  }
  
  /* ---------- Thread Cards ---------- */
  .forum-thread-card {
    background: linear-gradient(180deg, #07141a, #0d1a22);
    border: 2px solid var(--forum-border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    position: relative; overflow: hidden;
  }
  .forum-thread-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--forum-neon), transparent);
    opacity: 0; transition: opacity 0.3s ease;
  }
  .forum-thread-card:hover {
    transform: translateY(-4px);
    border-color: var(--forum-neon);
    box-shadow: 0 8px 25px rgba(22, 241, 211, 0.25), 0 0 20px rgba(22, 241, 211, 0.15);
  }
  .forum-thread-card:hover::before { opacity: 1; }
  
  .forum-thread-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.75rem; }
  .forum-thread-title a { color: var(--forum-text); text-decoration: none; transition: color 0.3s ease; }
  .forum-thread-title a:hover { color: var(--forum-neon); text-shadow: 0 0 10px rgba(22, 241, 211, 0.3); }
  
  .forum-thread-excerpt { color: var(--forum-dim); font-size: 0.95rem; line-height: 1.5; margin-bottom: 1rem; }
  
  /* put author + time on the same side, neat spacing */
  .forum-thread-meta { display: flex; align-items: center; gap: 1rem !important; justify-content: flex-start !important; margin-bottom: 1rem; flex-wrap: wrap; }
  .forum-thread-author { color: var(--forum-text); font-weight: 600; font-size: 0.9rem; }
  .forum-thread-time { color: var(--forum-muted); font-size: 0.85rem; }
  .forum-thread-stats { display: flex; gap: 1.5rem; align-items: center; }
  .forum-stat { display: flex; align-items: center; gap: 0.5rem; color: var(--forum-muted); font-size: 0.85rem; }
  .forum-stat-icon { width: 16px; height: 16px; opacity: 0.7; }
  .forum-thread-activity { color: var(--forum-muted); font-size: 0.8rem; text-align: right; margin-top: 0.5rem; }
  
  /* ---------- Category Badge ---------- */
  .forum-category-badge {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 900; letter-spacing: 0.5px;
    padding: 0.25rem 0.75rem; border-radius: 999px; color: #002a24;
    background: linear-gradient(135deg, var(--forum-neon), #0fb8a0);
    box-shadow: 0 0 10px rgba(22, 241, 211, 0.45); margin-bottom: 0.75rem;
  }
  
  /* ---------- Sort Select ---------- */
  .forum-sort { margin-bottom: 1rem; }
  .forum-sort select {
    background: linear-gradient(180deg, #0a1a22, #0f1e28);
    border: 2px solid var(--forum-border);
    border-radius: 8px; color: var(--forum-text);
    padding: 0.5rem 1rem; font-size: 0.9rem; cursor: pointer;
  }
  .forum-sort select:focus { outline: none; border-color: var(--forum-neon); box-shadow: 0 0 15px rgba(22, 241, 211, 0.3); }
  
  /* ---------- Pagination ---------- */
  .forum-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
  .forum-pagination .page-link {
    background: linear-gradient(180deg, #0a1a22, #0f1e28);
    border: 2px solid var(--forum-border); color: var(--forum-text);
    padding: 0.5rem 1rem; border-radius: 8px; text-decoration: none; transition: all 0.3s ease;
  }
  .forum-pagination .page-link:hover { border-color: var(--forum-neon); box-shadow: 0 0 15px rgba(22, 241, 211, 0.3); color: var(--forum-neon); }
  .forum-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--forum-neon), #0fb8a0);
    border-color: var(--forum-neon); color: #002a24; box-shadow: 0 0 20px rgba(22, 241, 211, 0.4);
  }
  
  /* ---------- Responsive ---------- */
  @media (max-width: 768px) {
    .forum-container { padding-top: 180px; padding-bottom: 1rem; }
    .forum-header { padding: 1rem; margin: 0 0 1.5rem 0; }
    .forum-header h1 { font-size: 2rem; text-align: center; margin-bottom: 1rem; }
    .forum-header .btn-new-thread { width: 100%; }
    .forum-actions { padding: 1rem; margin-bottom: 1.5rem; }
    .forum-thread-card { padding: 1rem; margin-bottom: 1rem; }
    .forum-thread-meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .forum-thread-stats { justify-content: flex-start; }
    .forum-thread-activity { text-align: left; }
    .forum-categories { padding: 0.25rem 0; }
    .forum-category-pill { padding: 0.4rem 1rem; font-size: 0.8rem; }
  }
  
  /* ---------- Animations ---------- */
  .forum-fade-in { opacity: 0; transform: translateY(20px); animation: forumFadeIn 0.6s ease forwards; }
  .forum-fade-in:nth-child(1){animation-delay:.1s}.forum-fade-in:nth-child(2){animation-delay:.2s}.forum-fade-in:nth-child(3){animation-delay:.3s}
  .forum-fade-in:nth-child(4){animation-delay:.4s}.forum-fade-in:nth-child(5){animation-delay:.5s}.forum-fade-in:nth-child(6){animation-delay:.6s}
  @keyframes forumFadeIn { to { opacity: 1; transform: translateY(0); } }
  
  /* ---------- Form Elements ---------- */
  .forum-select, .forum-input, .forum-textarea {
    background: linear-gradient(180deg, #0a1a22, #0f1e28);
    border: 2px solid var(--forum-border);
    border-radius: 12px; color: var(--forum-text) !important;
    padding: 0.75rem 1rem; font-size: 1rem; width: 100%; transition: all 0.3s ease;
  }
  .forum-input::placeholder, .forum-textarea::placeholder { color: var(--forum-dim) !important; opacity: 1; }
  .forum-select:focus, .forum-input:focus, .forum-textarea:focus { outline: none; border-color: var(--forum-neon); box-shadow: 0 0 20px rgba(22, 241, 211, 0.3); }
  .forum-textarea { resize: vertical; min-height: 120px; }
  .forum-label { color: var(--forum-text); font-weight: 600; margin-bottom: 0.5rem; }
  
  /* ---------- Alerts ---------- */
  .alert {
    background: linear-gradient(180deg, #0a1a22, #0f1e28);
    border: 2px solid var(--forum-border);
    border-radius: 12px; color: var(--forum-text);
  }
  .alert-warning { border-color:#ffc107; color:#ffc107; }
  .alert-info    { border-color:#17a2b8; color:#17a2b8; }
  .alert-success { border-color:#28a745; color:#28a745; }
  .alert-danger  { border-color:#dc3545; color:#dc3545; }
  .alert-link { color: var(--forum-neon); text-decoration: none; }
  .alert-link:hover { color: var(--forum-neon); text-decoration: underline; }
  .alert-sm { padding: 0.5rem 0.75rem; font-size: 0.85rem; margin-bottom: 0.5rem; }
  
  /* ---------- Focus Styles ---------- */
  .forum-thread-card:focus-within { outline: 2px solid var(--forum-neon); outline-offset: 2px; }
  .forum-category-pill:focus { outline: 2px solid var(--forum-neon); outline-offset: 2px; }
  .forum-search input:focus { outline: 2px solid var(--forum-neon); outline-offset: 2px; }
  
  /* ---------- Likes & Replies ---------- */
  .forum-like-btn {
    background: transparent; border: 1px solid var(--forum-border); color: var(--forum-text);
    border-radius: 999px; padding: 0.25rem 0.6rem; display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; transition: transform 0.15s ease, box-shadow 0.2s ease; cursor: pointer;
  }
  .forum-like-btn:hover { box-shadow: 0 0 12px rgba(22, 241, 211, 0.25); transform: translateY(-1px); }
  .forum-like-btn i.is-liked { color: var(--forum-neon); }
  
  .forum-post-children { margin-left: 1.25rem; border-left: 2px solid var(--forum-border); padding-left: 1rem; }
  .forum-post-reply { margin-bottom: 1rem; }
  .forum-post-actions { border-top: 1px solid rgba(22, 241, 211, 0.2); padding-top: 0.75rem; }
  
  .forum-reply-btn {
    background: transparent !important; border-color: var(--forum-border) !important; color: var(--forum-text) !important;
    font-size: 0.8rem; padding: 0.25rem 0.5rem;
  }
  .forum-reply-btn:hover { background: rgba(22, 241, 211, 0.1) !important; border-color: var(--forum-neon) !important; color: var(--forum-neon) !important; }
  
  .replying-pill { display: inline-block; border: 1px solid var(--forum-border); border-radius: 999px; padding: 0.25rem 0.75rem; margin: 0.5rem 0; color: var(--forum-text); }
  #reply-cancel { cursor: pointer; margin-left: 0.5rem; opacity: 0.7; }
  .replying-to-pill { display:inline-block; border:1px solid var(--forum-border); border-radius:999px; padding:.2rem .6rem; color:var(--forum-text); font-size:.85rem; }
  
  /* ---------- Buttons: Neon theme ---------- */
  .forum-container .btn {
    border-radius: 12px; font-weight: 800; letter-spacing: .3px;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .forum-container .btn-primary {
    background: linear-gradient(135deg, var(--forum-neon), #0fb8a0);
    border: 0; color: #002a24; box-shadow: 0 0 16px rgba(22,241,211,.35);
  }
  .forum-container .btn-primary:hover,
  .forum-container .btn-primary:focus {
    transform: translateY(-1px); box-shadow: 0 0 26px rgba(22,241,211,.55); color: #002a24;
  }
  .forum-container .btn-secondary {
    background: linear-gradient(180deg, #0a1a22, #0f1e28);
    border: 2px solid var(--forum-border); color: var(--forum-text);
  }
  .forum-container .btn-secondary:hover,
  .forum-container .btn-secondary:focus {
    border-color: var(--forum-neon); color: var(--forum-neon); box-shadow: 0 0 16px rgba(22,241,211,.30);
  }
  /* Make “Răspunde” submit look consistent */
  .forum-container #reply-form .btn { border-radius: 12px; }
  /* Select option readability */
  .forum-container .forum-select option { background: #0a1a22; color: var(--forum-text); }
  .forum-container .forum-select option:checked,
  .forum-container .forum-select option:hover { background: #0f1e28; color: var(--forum-text); }
  /* Force neon primary style for .btn-new-thread */
  .forum-container .btn-new-thread {
    background: linear-gradient(135deg, var(--forum-neon), #0fb8a0) !important;
    border: 0 !important; color: #002a24 !important; font-weight: 900;
    padding: 0.75rem 1.5rem; border-radius: 12px; font-size: 0.9rem; letter-spacing: 0.5px;
    box-shadow: 0 0 20px rgba(22,241,211,.4); transition: transform .15s ease, box-shadow .2s ease;
  }
  .forum-container .btn-new-thread:hover,
  .forum-container .btn-new-thread:focus { transform: translateY(-2px); box-shadow: 0 0 30px rgba(22,241,211,.6); color: #002a24 !important; outline: none; }
  /* ===========================
   Forum page header + spacing fixes
   =========================== */

/* Use the same background everywhere on the forum page */
body.page-forum,
body.page-forum #app,
body.page-forum main {
  background: linear-gradient(180deg, #061016, #0b1220 60%, #0a111b) !important;
}

/* Make the site header seamless on the forum page */
body.page-forum header,
body.page-forum .navbar,
body.page-forum .site-header,
body.page-forum .topbar {
  background: transparent !important;      /* no different bg */
  box-shadow: none !important;              /* kill any glow/shadow line */
  border: 0 !important;                     /* kill any bottom border */
  width: 100% !important;                   /* avoid 100vw scrollbar overlap */
}

/* Some themes draw a bottom hairline via ::after — remove it */
body.page-forum header::after,
body.page-forum .navbar::after,
body.page-forum .site-header::after,
body.page-forum .topbar::after {
  content: none !important;
}

/* Ensure page content sits under a fixed header by 300px */
/* Forum container spacing - clean and simple */
.page-forum .forum-container {
    background: transparent;
    margin-top: 0;
    padding-top: 2rem;
  }
  /* Emoji sizing (Twemoji) */
.post-body img.emoji,
.forum-thread-body img.emoji {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.15em; /* sits nicely on baseline */
  max-width: none;         /* override generic img { max-width:100% } */
}
.emoji-inline-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.emoji-panel {
  position: absolute;
  bottom: -400px; /* under textarea */
  right: 0;
  z-index: 1050;
  display: none;
  background: rgba(8,18,26,0.96);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,255,220,0.18);
}
.emoji-panel emoji-picker {
  width: 320px;
  max-height: 360px;
}
/* Forum: improve readability of muted notes on dark bg */
.page-forum .text-muted{
  color: rgba(230,241,251,.72) !important; /* brighter */
  opacity: 1 !important;                   /* cancel any dimming */
  letter-spacing: .2px;
  text-shadow: 0 0 10px rgba(22,241,211,.18);
}
/* Forum usernames */
/* Usernames everywhere (thread card, thread view, replies) */
.forum-thread-author strong,
.forum-post-author strong,
.forum-thread-activity .strong,
.forum-username {
    color: #0bbd9c; /* darker neon green */
    font-weight: 600;
}

/* Icons near usernames */
.forum-thread-author i.fas.fa-user,
.forum-post-author i.fas.fa-user {
    color: #059a7d; /* even darker green for contrast */
    margin-right: 4px;
}

/* Mentions inside replies */
a.username-mention {
    color: #0bbd9c;
    font-weight: 600;
}
a.username-mention:hover {
    text-decoration: underline;
}
/* Thread header author (inside show.blade.php) */
.forum-container .forum-header .forum-thread-meta .forum-thread-author {
  color: #0bbd9c !important;   /* darker green */
  font-weight: 700;
}
.forum-container .forum-header .forum-thread-meta .forum-thread-author i.fa-user {
  color: #059a7d !important;   /* icon darker */
  margin-right: 6px;
}

/* keep mentions consistent */
a.username-mention { color: #0bbd9c; font-weight: 600; }
a.username-mention:hover { text-decoration: underline; }
/* ======================================================
   Forum — Mobile & Tablet (keeps desktop intact)
   Scope: .page-forum
   ====================================================== */

/* ------------ Phones (≤576px) ------------ */
@media (max-width: 576.98px) {
  .page-forum .container { padding-left: 14px; padding-right: 14px; }

  /* Titles */
  .page-forum h1 { font-size: clamp(22px, 7.5vw, 30px); line-height: 1.15; margin-bottom: 10px; text-align: center; }
  .page-forum h2, .page-forum .section-title { font-size: clamp(18px, 6vw, 22px); margin: 8px 0; }

  /* Thread list cards */
  .page-forum .thread-card,
  .page-forum .forum-thread,
  .page-forum .card.post,
  .page-forum .card.reply {
    margin-bottom: 12px;
    padding: 12px;
  }

  /* Meta row readability */
  .page-forum .meta, .page-forum .text-muted { color: #9ec7d3 !important; opacity: .9; font-size: 12px; }

  /* Actions: buttons full width for tap comfort */
  .page-forum .btn, .page-forum .ap-btn-neon { width: 100%; max-width: 420px; justify-content: center; }

  /* Composer: textarea & emoji row */
  .page-forum textarea { min-height: 120px; }
  .page-forum .emoji-toolbar { gap: 8px; }

  /* Replies: one column, tidy indentation for depth 1 */
  .page-forum .replies { margin-top: 10px; }
  .page-forum .reply-item { padding: 10px; }
  .page-forum .reply-item.depth-1 { margin-left: 14px; border-left: 2px solid rgba(22,241,211,0.25); padding-left: 10px; }

  /* Code/quotes/images */
  .page-forum pre, .page-forum code { white-space: pre-wrap; word-break: break-word; }
  .page-forum img { max-width: 100%; height: auto; }

  /* Pagination */
  .page-forum .pagination { gap: 6px; justify-content: center; }

  /* Safe area (iOS) */
  @supports (padding: max(0px)) {
    .page-forum .container {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
  }
}

/* ------------ Small tablets (577–767px) ------------ */
@media (min-width: 577px) and (max-width: 767.98px) {
  .page-forum h1 { font-size: clamp(26px, 5.2vw, 34px); text-align: center; }
  .page-forum .btn, .page-forum .ap-btn-neon { max-width: 520px; margin-left: auto; margin-right: auto; }
  .page-forum .reply-item.depth-1 { margin-left: 18px; }
}

/* ------------ Tablets (768–991px) ------------ */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Keep two-column layouts only if you explicitly have grids.
     Otherwise this block intentionally stays light to avoid desktop shifts. */
  .page-forum .btn, .page-forum .ap-btn-neon { width: auto; }
}

/* Desktop remains unchanged */