/* =========================================================
   WATCHBACK DISCUSSION + ADMIN
   Uses the main WatchBack styles as its visual base.
   ========================================================= */


/* =========================================================
   ACTIVE DISCUSSION NAV LINK
   ========================================================= */

.active-nav{
color:#a3ee63!important;
}


/* =========================================================
   DISCUSSION PAGE BASE
   ========================================================= */

.discussion-main{
min-height:70vh;
background:
linear-gradient(
180deg,
#061019,
#091620 55%,
#071018
);
}


.discussion-wrap{
width:min(1120px,calc(100% - 36px));
margin:0 auto;
}


/* =========================================================
   DISCUSSION HERO
   ========================================================= */

.discussion-hero{
padding:72px 0 52px;
background:
radial-gradient(
circle at 75% 20%,
rgba(120,198,63,.12),
transparent 30%
),
linear-gradient(
180deg,
#07131d,
#091823
);
border-bottom:1px solid #233b4a;
}


.discussion-hero h1{
max-width:760px;
margin:.12em 0 .22em;
font-size:clamp(2.1rem,5vw,4.3rem);
line-height:.95;
letter-spacing:-.035em;
text-transform:uppercase;
}


.discussion-hero p:last-child{
max-width:760px;
color:#b8c8d1;
font-size:1rem;
line-height:1.55;
}


/* =========================================================
   MAIN DISCUSSION CONTENT
   ========================================================= */

.discussion-content{
padding:40px 0 64px;
}


.discussion-grid{
display:grid;
grid-template-columns:
minmax(0,1.5fr)
minmax(260px,.72fr);
gap:18px;
align-items:start;
}


.discussion-side{
display:grid;
gap:18px;
}


/* =========================================================
   CARDS
   ========================================================= */

.discussion-card{
background:
linear-gradient(
180deg,
#0d1b27,
#09151e
);
border:1px solid #294654;
border-radius:13px;
padding:22px;
box-shadow:
0 14px 34px rgba(0,0,0,.22);
}


.discussion-card h2{
margin:.2em 0 .35em;
font-size:1.55rem;
line-height:1.05;
}


.discussion-card p{
color:#9eb0bc;
}


.form-intro{
margin-top:0;
}


.compact-card p:last-child{
margin-bottom:0;
}


/* =========================================================
   FORMS
   ========================================================= */

.discussion-form{
display:grid;
gap:14px;
margin-top:18px;
}


.discussion-form label{
display:grid;
gap:6px;
}


.discussion-form label>span{
font-size:.72rem;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
color:#c9d6dc;
}


.discussion-form input[type="text"],
.discussion-form input[type="password"],
.discussion-form textarea{
width:100%;
border:1px solid #345362;
border-radius:8px;
background:#07141d;
color:#f4f8fb;
padding:11px 12px;
font:inherit;
outline:none;
}


.discussion-form textarea{
resize:vertical;
min-height:110px;
}


.discussion-form input[type="text"]:focus,
.discussion-form input[type="password"]:focus,
.discussion-form textarea:focus{
border-color:#78c63f;
box-shadow:
0 0 0 3px rgba(120,198,63,.10);
}


.discussion-form input::placeholder,
.discussion-form textarea::placeholder{
color:#647a87;
}


.file-label input[type="file"]{
width:100%;
color:#b8c8d1;
font-size:.8rem;
}


.file-label input[type="file"]::file-selector-button{
margin-right:10px;
border:1px solid #355466;
border-radius:7px;
background:#132733;
color:#dce7ec;
padding:7px 10px;
font-weight:800;
cursor:pointer;
}


.file-label input[type="file"]::file-selector-button:hover{
border-color:#78c63f;
color:#a3ee63;
}


.file-label small{
color:#718895;
}


/* =========================================================
   MODERATION NOTE
   ========================================================= */

.moderation-note{
display:grid;
gap:3px;
padding:11px 12px;
border-left:3px solid #a3ee63;
background:#102319;
color:#c9d8ce;
font-size:.78rem;
line-height:1.45;
}


.moderation-note strong{
color:#a3ee63;
}


.small-note{
display:block;
}


/* =========================================================
   HONEYPOT
   ========================================================= */

.honeypot{
position:absolute!important;
left:-10000px!important;
top:auto!important;
width:1px!important;
height:1px!important;
overflow:hidden!important;
}


/* =========================================================
   SUBMISSION MESSAGES
   ========================================================= */

.submission-message{
display:grid;
gap:3px;
margin-bottom:20px;
padding:13px 15px;
border-radius:9px;
}


.success-message{
background:#10251a;
border:1px solid #3c624b;
color:#d9ecdf;
}


.success-message strong{
color:#a3ee63;
}


.error-message{
background:#2b1618;
border:1px solid #704047;
color:#f4d9dd;
}


.error-message strong{
color:#ff8f9a;
}


/* =========================================================
   PUBLIC THREAD SECTION
   ========================================================= */

.thread-section{
margin-top:42px;
}


.thread-heading{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:18px;
margin-bottom:15px;
}


.thread-heading h2{
margin:.15em 0 0;
}


.thread-heading>span{
color:#8da3af;
font-size:.76rem;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty-discussion{
padding:28px;
text-align:center;
background:#0b1a24;
border:1px dashed #34505e;
border-radius:11px;
color:#9eb0bc;
}


.empty-discussion strong{
color:#eaf2f6;
}


.empty-discussion p{
margin-bottom:0;
}


/* =========================================================
   THREAD CARD
   ========================================================= */

.thread-card{
margin-bottom:14px;
padding:18px;
background:#0d1b27;
border:1px solid #294654;
border-radius:11px;
box-shadow:
0 8px 24px rgba(0,0,0,.16);
}


.thread-meta{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
margin-bottom:10px;
}


.thread-meta strong{
color:#a3ee63;
}


.thread-meta time{
color:#718895;
font-size:.7rem;
}


.thread-body{
color:#d5e0e5;
font-size:.9rem;
line-height:1.62;
overflow-wrap:anywhere;
}


/* =========================================================
   COMMENT IMAGES
   ========================================================= */

.comment-image-link{
display:inline-block;
margin-top:13px;
}


.comment-image{
display:block;
width:auto;
max-width:min(360px,100%);
max-height:260px;
object-fit:cover;
border:1px solid #365463;
border-radius:8px;
box-shadow:
0 8px 20px rgba(0,0,0,.25);
}


/* =========================================================
   REPLY BUTTON
   ========================================================= */

.reply-toggle{
margin-top:13px;
padding:0;
background:none;
border:0;
color:#a3ee63;
font-weight:900;
cursor:pointer;
}


.reply-toggle:hover{
text-decoration:underline;
}


/* =========================================================
   REPLY FORM
   ========================================================= */

.reply-form{
margin-top:14px;
padding:15px;
background:#091720;
border:1px solid #294654;
border-radius:9px;
}


.reply-form[hidden]{
display:none!important;
}


/* =========================================================
   APPROVED REPLIES
   ========================================================= */

.reply-list{
margin-top:16px;
padding-left:20px;
border-left:2px solid #294654;
}


.reply-card{
margin-top:10px;
padding:13px 14px;
background:#091720;
border:1px solid #223d4b;
border-radius:8px;
}


.reply-image{
max-height:190px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-brand{
color:#fff;
}


/* =========================================================
   ADMIN PAGE
   ========================================================= */

.admin-body{
min-height:100vh;
background:
linear-gradient(
180deg,
#061019,
#0a151e
);
color:#f4f8fb;
}


/* =========================================================
   ADMIN LOGIN
   ========================================================= */

.admin-login-shell{
min-height:100vh;
display:grid;
place-items:center;
padding:24px;
}


.admin-login-card{
width:min(470px,100%);
}


.admin-brand{
margin-bottom:22px;
}


.admin-login-card h1{
margin-bottom:6px;
}


.admin-login-card>p{
color:#9eb0bc;
}


/* =========================================================
   ADMIN TOP BAR
   ========================================================= */

.admin-topbar{
position:sticky;
top:0;
z-index:20;
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
padding:
12px clamp(18px,4vw,48px);
background:
rgba(4,11,17,.96);
border-bottom:
1px solid #233b4a;
}


.admin-links{
display:flex;
gap:14px;
}


.admin-links a{
color:#a3ee63;
text-decoration:none;
font-size:.8rem;
font-weight:800;
}


.admin-links a:hover{
text-decoration:underline;
}


/* =========================================================
   ADMIN MAIN SHELL
   ========================================================= */

.admin-shell{
width:min(1120px,calc(100% - 36px));
margin:0 auto;
padding:34px 0 64px;
}


.admin-heading{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:20px;
margin-bottom:24px;
}


.admin-heading h1{
margin:.15em 0 0;
}


/* =========================================================
   PENDING COUNT
   ========================================================= */

.pending-count{
padding:7px 11px;
border-radius:999px;
background:#213217;
border:1px solid #4f7a38;
color:#a3ee63;
font-weight:900;
font-size:.75rem;
}


/* =========================================================
   ADMIN SECTIONS
   ========================================================= */

.admin-section{
margin-top:26px;
}


.admin-section-title{
margin-bottom:12px;
}


.admin-section-title h2{
margin:0;
}


.admin-section-title p{
margin:4px 0 0;
color:#8399a7;
}


.admin-list{
display:grid;
gap:12px;
}


/* =========================================================
   ADMIN COMMENT CARD
   ========================================================= */

.admin-comment-card{
padding:17px;
background:#0d1b27;
border:1px solid #34505e;
border-radius:11px;
box-shadow:
0 8px 24px rgba(0,0,0,.16);
}


.admin-comment-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
margin-bottom:12px;
}


.admin-comment-head>div{
display:grid;
gap:4px;
}


.admin-comment-head strong{
color:#f4f8fb;
}


.admin-comment-head time{
color:#718895;
font-size:.7rem;
}


/* =========================================================
   ADMIN TYPE LABEL
   ========================================================= */

.admin-type{
color:#f1b94b;
font-size:.59rem;
font-weight:900;
letter-spacing:.09em;
}


.approved-type{
color:#a3ee63;
}


.approved-card{
opacity:.94;
}


/* =========================================================
   ADMIN COMMENT BODY
   ========================================================= */

.admin-comment-body{
color:#d9e3e8;
line-height:1.6;
overflow-wrap:anywhere;
}


/* =========================================================
   REPLY CONTEXT
   ========================================================= */

.reply-context{
display:grid;
gap:4px;
margin-bottom:12px;
padding:10px 12px;
background:#07151e;
border-left:3px solid #4ea0ff;
font-size:.75rem;
color:#93a7b2;
}


.reply-context strong{
color:#bcd7ee;
}


/* =========================================================
   ADMIN IMAGE PREVIEW
   ========================================================= */

.admin-image-link{
display:flex;
align-items:center;
gap:12px;
width:max-content;
max-width:100%;
margin-top:14px;
color:#a3ee63;
text-decoration:none;
font-size:.75rem;
}


.admin-image-link:hover span{
text-decoration:underline;
}


.admin-image-link img{
width:120px;
height:76px;
object-fit:cover;
border-radius:7px;
border:1px solid #3a5867;
}


/* =========================================================
   ADMIN ACTION BUTTONS
   ========================================================= */

.admin-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:15px;
}


.admin-actions form{
margin:0;
}


.danger-button{
background:#35191c;
color:#ff9ba4;
border:1px solid #6a343a;
}


.danger-button:hover{
background:#462126;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:850px){

.discussion-grid{
grid-template-columns:1fr;
}

}


/* =========================================================
   PHONE
   ========================================================= */

@media(max-width:720px){

.discussion-hero{
padding:44px 0 35px;
}


.discussion-hero h1{
font-size:clamp(2rem,9vw,2.7rem);
}


.discussion-wrap{
width:min(100% - 28px,1120px);
}


.discussion-content{
padding-top:24px;
padding-bottom:42px;
}


.discussion-card{
padding:16px;
}


.thread-section{
margin-top:30px;
}


.thread-heading{
align-items:flex-start;
flex-direction:column;
gap:5px;
}


.thread-card{
padding:14px;
}


.thread-meta{
align-items:flex-start;
flex-direction:column;
gap:2px;
}


.reply-list{
padding-left:10px;
}


.comment-image{
max-width:100%;
}


.admin-topbar{
align-items:flex-start;
flex-direction:column;
}


.admin-links{
flex-wrap:wrap;
}


.admin-shell{
width:min(100% - 28px,1120px);
padding-top:24px;
}


.admin-heading{
align-items:flex-start;
flex-direction:column;
}


.admin-comment-head{
flex-direction:column;
}


.admin-image-link{
align-items:flex-start;
flex-direction:column;
}

}