/* ==========================================================================
   FORUM TEMPLATE STYLES
   Extends css/style.css (shared header/footer/vars/buttons/fonts).
   Class names are kept generic and repeatable on purpose — every
   `.board-row`, `.thread-row` and `.post` is meant to become one loop
   iteration once this is wired up to PHP.
   ========================================================================== */

/* ---------- BREADCRUMB ---------- */
.breadcrumb{
  max-width:1100px; margin:0 auto; padding:36px 5% 0;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  font-size:0.8rem; letter-spacing:0.5px; color:var(--text-dim);
}
.breadcrumb a{color:var(--text-dim); transition:color .2s;}
.breadcrumb a:hover{color:var(--frost-glow);}
.breadcrumb .sep{color:var(--border); opacity:0.8;}
.breadcrumb .current{color:var(--frost-glow);}

/* ---------- FORUM STATS BAR ---------- */
.forum-stats-bar{
  max-width:1100px; margin:0 auto; padding:0 5%;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:18px;
}
.forum-stats-bar .stat{
  text-align:center; padding:22px 14px; border:1px solid var(--border); border-radius:10px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
}
.forum-stats-bar .stat h3{font-family:var(--font-display); font-size:1.5rem; color:var(--frost-glow);}
.forum-stats-bar .stat p{color:var(--text-dim); font-size:0.72rem; letter-spacing:1.5px; text-transform:uppercase; margin-top:6px;}

/* ---------- FORUM INDEX (board groups) ---------- */
.forum-groups{max-width:1100px; margin:0 auto; padding:70px 5% 150px;}
.forum-group{margin-bottom:50px;}
.forum-group:last-child{margin-bottom:0;}
.forum-group-title{
  font-family:var(--font-display); font-size:1.15rem; letter-spacing:1px;
  color:var(--text); padding-bottom:14px; margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.board-list{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--panel);}

.board-row{
  display:grid; grid-template-columns:56px 1fr 140px 240px; align-items:center; gap:22px;
  padding:22px 24px; border-bottom:1px solid var(--border);
  transition:background .25s ease;
}
.board-row:last-child{border-bottom:none;}
.board-row:hover{background:rgba(111,216,255,0.04);}
.board-icon{
  width:44px; height:44px; border-radius:10px;
  background:linear-gradient(135deg, var(--frost), var(--frost-dim));
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; color:#050810; font-weight:800;
  box-shadow:0 8px 20px rgba(111,216,255,0.18);
}
.board-info a{
  font-family:var(--font-display); font-size:1.05rem; font-weight:600;
  color:var(--text); letter-spacing:0.3px; transition:color .2s;
}
.board-info a:hover{color:var(--frost-glow);}
.board-info p{color:var(--text-dim); font-size:0.85rem; margin-top:6px; line-height:1.6;}
.board-stats{text-align:center; font-size:0.78rem; color:var(--text-dim); line-height:1.7;}
.board-stats strong{display:block; color:var(--frost-glow); font-size:1rem; font-family:var(--font-display);}
.board-lastpost{display:flex; align-items:center; gap:12px; font-size:0.78rem; color:var(--text-dim); line-height:1.55;}
.board-lastpost .avatar{width:34px; height:34px; border-radius:50%; flex-shrink:0;}
.board-lastpost a{color:var(--text); transition:color .2s;}
.board-lastpost a:hover{color:var(--frost-glow);}
.board-lastpost .lp-time{color:var(--text-dim); font-size:0.72rem;}

/* generic small circular avatar placeholder (no images needed yet) */
.avatar{
  border-radius:50%;
  background:linear-gradient(135deg, var(--frost-dim), var(--panel));
  border:1px solid var(--border);
}

/* ---------- BOARD TOOLBAR (thread list page) ---------- */
.forum-toolbar{
  max-width:1100px; margin:50px auto 0; padding:0 5%;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.forum-toolbar h1{font-family:var(--font-display); font-size:1.8rem; letter-spacing:0.5px;}
.forum-toolbar .board-desc{color:var(--text-dim); font-size:0.88rem; margin-top:8px; max-width:520px;}

/* ---------- THREAD LIST ---------- */
.thread-list{max-width:1100px; margin:34px auto 0; padding:0 5% 150px;}
.thread-table{border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--panel);}
.thread-table-head{
  display:grid; grid-template-columns:1fr 110px 110px 220px; gap:16px;
  padding:14px 24px; background:var(--bg-alt);
  font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim);
  border-bottom:1px solid var(--border);
}
.thread-row{
  display:grid; grid-template-columns:1fr 110px 110px 220px; gap:16px; align-items:center;
  padding:20px 24px; border-bottom:1px solid var(--border);
  transition:background .25s ease;
}
.thread-row:last-child{border-bottom:none;}
.thread-row:hover{background:rgba(111,216,255,0.04);}
.thread-row.pinned{background:rgba(111,216,255,0.05);}
.thread-main{display:flex; align-items:flex-start; gap:14px;}
.thread-main .avatar{width:38px; height:38px; flex-shrink:0; margin-top:2px;}
.thread-title-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.thread-title-line a{
  font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--text);
  transition:color .2s;
}
.thread-title-line a:hover{color:var(--frost-glow);}
.thread-meta{color:var(--text-dim); font-size:0.78rem; margin-top:5px;}
.tag-pin, .tag-lock, .tag-hot{
  font-size:0.62rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
  padding:3px 8px; border-radius:20px;
}
.tag-pin{background:rgba(111,216,255,0.15); color:var(--frost-glow); border:1px solid var(--frost-dim);}
.tag-lock{background:rgba(142,162,179,0.15); color:var(--text-dim); border:1px solid var(--border);}
.tag-hot{background:rgba(255,140,90,0.12); color:#ffb98f; border:1px solid rgba(255,140,90,0.35);}
.thread-num{text-align:center; color:var(--text-dim); font-size:0.9rem;}
.thread-num strong{display:block; color:var(--frost-glow); font-family:var(--font-display); font-size:1.1rem;}
.thread-lastpost{display:flex; align-items:center; gap:10px; font-size:0.78rem; color:var(--text-dim);}
.thread-lastpost .avatar{width:30px; height:30px; flex-shrink:0;}
.thread-lastpost a{color:var(--text); transition:color .2s;}
.thread-lastpost a:hover{color:var(--frost-glow);}

/* ---------- PAGINATION ---------- */
.pagination{display:flex; justify-content:center; gap:8px; margin-top:32px; flex-wrap:wrap;}
.pagination a, .pagination span{
  min-width:38px; height:38px; padding:0 6px; border-radius:6px; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; color:var(--text-dim); transition:all .2s;
}
.pagination a:hover{border-color:var(--frost-dim); color:var(--frost-glow);}
.pagination .current{background:linear-gradient(135deg, var(--frost), var(--frost-dim)); color:#050810; border-color:transparent; font-weight:700;}

/* ---------- TOPIC / THREAD VIEW ---------- */
.topic-header{max-width:1100px; margin:34px auto 0; padding:0 5%;}
.topic-header h1{font-family:var(--font-display); font-size:1.9rem; letter-spacing:0.5px; line-height:1.3;}
.topic-header .topic-meta{color:var(--text-dim); font-size:0.82rem; margin-top:12px; display:flex; gap:18px; flex-wrap:wrap;}

.post-list{max-width:1100px; margin:34px auto 0; padding:0 5%; display:flex; flex-direction:column; gap:20px;}
.post{
  display:grid; grid-template-columns:200px 1fr; gap:0;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  background:var(--panel);
}
.post.op{border-color:var(--frost-dim);}
.post-side{
  padding:26px 20px; text-align:center; background:var(--bg-alt);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center;
}
.post-side .avatar{width:64px; height:64px; margin-bottom:14px;}
.post-side .username{font-family:var(--font-display); font-size:0.95rem; color:var(--text); font-weight:600;}
.post-side .rank{
  margin-top:8px; font-size:0.65rem; letter-spacing:1.5px; text-transform:uppercase;
  padding:3px 10px; border-radius:20px;
}
.rank-admin{background:rgba(255,140,90,0.15); color:#ffb98f; border:1px solid rgba(255,140,90,0.35);}
.rank-mod{background:rgba(111,216,255,0.15); color:var(--frost-glow); border:1px solid var(--frost-dim);}
.rank-member{background:rgba(142,162,179,0.12); color:var(--text-dim); border:1px solid var(--border);}
.post-side .post-stats{margin-top:14px; font-size:0.72rem; color:var(--text-dim); line-height:1.8;}
.post-side .post-stats strong{color:var(--text);}

.post-main{display:flex; flex-direction:column;}
.post-header{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:16px 24px; border-bottom:1px solid var(--border);
  font-size:0.76rem; color:var(--text-dim);
}
.post-header .post-num{color:var(--frost-glow);}
.post-body{padding:24px; color:var(--text); line-height:1.85; font-size:0.95rem;}
.post-body p{margin-bottom:14px;}
.post-body p:last-child{margin-bottom:0;}
.post-footer{
  display:flex; justify-content:flex-end; gap:14px; padding:14px 24px;
  border-top:1px solid var(--border);
}
.post-footer .action-link{
  font-size:0.75rem; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim);
  transition:color .2s;
}
.post-footer .action-link:hover{color:var(--frost-glow);}

/* ---------- REPLY BOX ---------- */
.reply-box{max-width:1100px; margin:10px auto 150px; padding:0 5%;}
.reply-box-inner{
  border:1px solid var(--border); border-radius:12px; background:var(--panel); overflow:hidden;
}
.reply-box-head{
  padding:16px 24px; border-bottom:1px solid var(--border);
  font-family:var(--font-display); font-size:0.95rem; letter-spacing:0.5px;
}
.reply-box textarea{
  width:100%; min-height:160px; padding:20px 24px; resize:vertical;
  background:transparent; border:none; color:var(--text); font-family:var(--font-body);
  font-size:0.92rem; line-height:1.7;
}
.reply-box textarea:focus{outline:none;}
.reply-box textarea::placeholder{color:var(--text-dim);}
.reply-box-footer{
  display:flex; justify-content:flex-end; gap:14px; padding:16px 24px;
  border-top:1px solid var(--border);
}

@media(max-width:860px){
  .board-row{grid-template-columns:44px 1fr; grid-template-rows:auto auto;}
  .board-stats, .board-lastpost{display:none;}
  .thread-table-head{display:none;}
  .thread-row{grid-template-columns:1fr; gap:10px;}
  .thread-num, .thread-lastpost{justify-self:start;}
  .post{grid-template-columns:1fr;}
  .post-side{flex-direction:row; justify-content:flex-start; gap:14px; text-align:left; border-right:none; border-bottom:1px solid var(--border);}
  .post-side .avatar{margin-bottom:0;}
}