/* ==========================================================
   board.css
   Topic Connect - 掲示板機能 追加スタイル
   ※ レイアウト/カード/ボタン等の基本コンポーネントは app.css を利用
========================================================== */

/* ================= Nav Badge ================= */

.nav-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:20px;

    height:20px;

    padding:0 6px;

    margin-left:auto;

    border-radius:999px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    font-size:11px;

    font-weight:700;

}

/* ================= Global (App Pages) ================= */

body{

    font-family:"Inter","Noto Sans JP",sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.8;

}

a{

    color:inherit;

}

/* ================= Banned Banner ================= */

.banned-banner{

    padding:16px 24px;

    background:rgba(255,92,92,.12);

    border:1px solid rgba(255,92,92,.35);

    color:#ff8f8f;

    font-size:14px;

    font-weight:600;

}

/* ================= Filter Bar ================= */

.filter-bar{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

}

.filter-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    flex:1;

}

.tag-filter{

    cursor:pointer;

    user-select:none;

    background:none;

    font-family:inherit;

}

.tag-filter.active{

    background:linear-gradient(135deg,rgba(91,140,255,.35),rgba(110,231,255,.2));

    border-color:rgba(91,140,255,.6);

    color:#fff;

}

.sort-select{

    width:auto;

    min-width:150px;

}

/* ================= ID Badge ================= */

.id-badge{

    font-family:"SFMono-Regular",Consolas,monospace;

    font-size:12px;

    color:var(--sub);

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:8px;

    padding:3px 8px;

    letter-spacing:.02em;

}

/* ================= Vote Widget ================= */

.vote-widget{

    display:flex;

    align-items:center;

    gap:10px;

    padding:6px 10px;

    border-radius:14px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    width:fit-content;

}

.vote-widget.vote-vertical{

    flex-direction:column;

    gap:2px;

    padding:8px 6px;

}

.vote-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

    border-radius:8px;

    background:transparent;

    color:var(--sub);

    font-size:16px;

    line-height:1;

    transition:.2s;

    cursor:pointer;

}

.vote-btn:hover{

    background:rgba(255,255,255,.08);

    color:#fff;

}

.vote-btn.voted-up{

    color:#46cd8c;

    background:rgba(70,205,140,.14);

}

.vote-btn.voted-down{

    color:#ff5c5c;

    background:rgba(255,92,92,.14);

}

.vote-score{

    min-width:28px;

    text-align:center;

    font-weight:700;

    font-size:14px;

    color:var(--text);

}

/* ================= Thread Detail ================= */

.thread-detail-body{

    white-space:pre-wrap;

    color:var(--text);

    line-height:1.9;

    font-size:15.5px;

}

.thread-detail-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

}

.thread-owner-actions{

    display:flex;

    gap:8px;

}

.icon-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:10px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    color:var(--sub);

    cursor:pointer;

    transition:.2s;

    font-size:15px;

}

.icon-btn:hover{

    color:#fff;

    border-color:rgba(91,140,255,.4);

}

/* ================= Comments ================= */

.comment-form{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.comment-tree{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.comment-node{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.comment-card{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:18px 20px;

    border-radius:16px;

    background:rgba(255,255,255,.035);

    border:1px solid rgba(255,255,255,.07);

}

.comment-card.deleted{

    opacity:.5;

    font-style:italic;

}

.comment-head{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:13px;

    color:var(--sub);

}

.comment-author{

    color:var(--text);

    font-weight:700;

    font-size:14px;

}

.comment-body{

    white-space:pre-wrap;

    color:var(--text);

    font-size:14.5px;

    line-height:1.75;

}

.comment-actions{

    display:flex;

    align-items:center;

    gap:16px;

    font-size:13px;

    color:var(--sub);

}

.comment-actions button{

    background:none;

    color:var(--sub);

    font-size:13px;

    cursor:pointer;

    transition:.2s;

    display:flex;

    align-items:center;

    gap:5px;

}

.comment-actions button:hover{

    color:var(--primary-light);

}

.comment-children{

    margin-left:26px;

    padding-left:20px;

    border-left:2px solid rgba(255,255,255,.08);

    display:flex;

    flex-direction:column;

    gap:16px;

}

.reply-form-wrap{

    margin-top:4px;

}

/* ================= Empty State ================= */

.empty-state{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:60px 20px;

    text-align:center;

    color:var(--sub);

}

.empty-state .empty-icon{

    font-size:40px;

}

/* ================= Modal ================= */

.modal-overlay{

    position:fixed;

    inset:0;

    z-index:2000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:rgba(4,6,14,.65);

    backdrop-filter:blur(6px);

    opacity:0;

    transition:opacity .2s ease;

}

.modal-overlay.show{

    opacity:1;

}

.modal-box{

    width:100%;

    max-width:560px;

    max-height:88vh;

    overflow-y:auto;

    border-radius:24px;

    padding:32px;

    display:flex;

    flex-direction:column;

    gap:20px;

    transform:translateY(16px);

    transition:transform .2s ease;

}

.modal-overlay.show .modal-box{

    transform:translateY(0);

}

/* ================= Toast ================= */

.toast-container{

    position:fixed;

    bottom:24px;

    right:24px;

    z-index:3000;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.toast{

    padding:14px 20px;

    border-radius:14px;

    background:rgba(15,20,36,.95);

    border:1px solid rgba(255,255,255,.1);

    color:#fff;

    font-size:14px;

    box-shadow:0 12px 30px rgba(0,0,0,.35);

    opacity:0;

    transform:translateY(10px);

    transition:all .3s ease;

}

.toast.show{

    opacity:1;

    transform:translateY(0);

}

.toast-success{

    border-color:rgba(70,205,140,.4);

}

.toast-error{

    border-color:rgba(255,92,92,.4);

}

/* ================= Responsive ================= */

@media (max-width:900px){

    #sidebarToggle{

        display:flex !important;

    }

    .comment-children{

        margin-left:14px;

        padding-left:12px;

    }

    .filter-bar{

        flex-direction:column;

        align-items:stretch;

    }

    .thread-detail-header{

        flex-direction:column;

    }

}