/* ============================================================
   AI Hub Community — Phase 1 Styles
   Dodaj na kraj main.css ili uključi kao community.css
   ============================================================ */

/* ── Tool page tabs ──────────────────────────────────────── */
.tool-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:28px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tool-tab{padding:12px 20px;font-size:.875rem;font-weight:600;color:var(--text-3);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;transition:all .15s}
.tool-tab:hover{color:var(--text-2)}
.tool-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tool-tab-count{font-size:.75rem;font-weight:400;opacity:.7;margin-left:4px}

/* ── Discussions ─────────────────────────────────────────── */
.disc-type-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:4px}
.disc-type-tab{padding:6px 14px;font-size:.8125rem;font-weight:500;color:var(--text-3);background:var(--surface);border:1.5px solid var(--border);border-radius:20px;text-decoration:none;transition:all .15s}
.disc-type-tab:hover{border-color:var(--accent);color:var(--text-2)}
.disc-type-tab.active{background:var(--accent-s);border-color:var(--accent);color:var(--accent)}
.disc-type-cnt{font-size:.6875rem;opacity:.6;margin-left:2px}

.disc-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.disc-card{display:flex;gap:14px;padding:16px 18px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .15s}
.disc-card:hover{border-color:rgba(79,70,229,.3)}

.disc-card-votes{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:36px;flex-shrink:0}
.disc-card-score{font-size:.9375rem;font-weight:700;color:var(--text-2);line-height:1}

.disc-card-body{flex:1;min-width:0}
.disc-card-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.disc-card-type{font-size:.875rem}
.disc-card-title{font-size:.9375rem;font-weight:700;color:var(--text-1);line-height:1.3;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.disc-pin-badge{font-size:.6875rem;padding:2px 8px;background:var(--accent-s);color:var(--accent);border-radius:10px;font-weight:600}
.disc-helpful-badge{font-size:.6875rem;padding:2px 8px;background:rgba(22,163,74,.12);color:#16a34a;border-radius:10px;font-weight:600}

.disc-card-preview{font-size:.8125rem;color:var(--text-3);line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.disc-card-meta{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-3);flex-wrap:wrap}
.disc-meta-author{font-weight:600;color:var(--text-2)}
.disc-meta-dot{opacity:.4}
.disc-meta-replies{font-weight:500}

.disc-avatar{width:32px;height:32px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:900;flex-shrink:0}
.disc-avatar-sm{width:20px;height:20px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.5rem;font-weight:900;flex-shrink:0}

.disc-rep-badge{font-size:.6875rem;padding:1px 6px;background:rgba(245,158,11,.12);color:#d97706;border-radius:8px;font-weight:600}

.disc-empty{text-align:center;padding:48px;color:var(--text-3);background:var(--surface);border-radius:12px;border:2px dashed var(--border);margin-top:16px}
.disc-empty h3{color:var(--text-2);margin-bottom:8px}
.disc-empty p{font-size:.875rem}

.disc-paging{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.disc-paging-info{font-size:.8125rem;color:var(--text-3)}

/* New discussion form */
.disc-new-form{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:20px;margin-top:16px}
.disc-type-radio{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.8125rem}
.disc-type-radio input{display:none}
.disc-type-radio span{padding:5px 12px;border:1.5px solid var(--border);border-radius:20px;transition:all .15s}
.disc-type-radio input:checked+span{background:var(--accent-s);border-color:var(--accent);color:var(--accent)}

/* ── Thread ──────────────────────────────────────────────── */
.thread-main{display:flex;gap:16px;padding:24px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px}
.thread-replies{display:flex;flex-direction:column;gap:12px}
.disc-reply{display:flex;gap:14px;padding:18px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px}
.disc-reply-helpful{border-color:rgba(22,163,74,.3);background:rgba(22,163,74,.03)}
.disc-helpful-banner{font-size:.75rem;color:#16a34a;font-weight:600;margin-bottom:8px;padding:4px 10px;background:rgba(22,163,74,.08);border-radius:6px;display:inline-block}
.disc-helpful-btn{font-size:.75rem;padding:2px 8px;background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer;color:var(--text-3);transition:all .15s}
.disc-helpful-btn:hover{border-color:var(--accent);color:var(--accent)}

.disc-body{font-size:.9rem;line-height:1.7;color:var(--text-2)}
.disc-body code{background:var(--accent-s);padding:2px 6px;border-radius:4px;font-size:.8125rem}
.disc-body pre{background:var(--surface-2,var(--surface));border:1px solid var(--border);border-radius:8px;padding:14px;overflow-x:auto;margin:12px 0}
.disc-body pre code{background:none;padding:0}
.disc-body a{color:var(--accent)}

.thread-reply-form{margin-top:28px;padding:24px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px}

/* ── Votes ───────────────────────────────────────────────── */
.vote-btn{display:flex;align-items:center;justify-content:center;width:28px;height:24px;font-size:.75rem;background:none;border:1px solid transparent;border-radius:4px;cursor:pointer;color:var(--text-3);transition:all .15s;padding:0;line-height:1}
.vote-btn:hover{background:var(--accent-s);color:var(--accent)}
.vote-btn.voted.vote-up{color:var(--accent);font-weight:900}
.vote-btn.voted.vote-down{color:#ef4444;font-weight:900}
.disc-votes{display:flex;align-items:center;gap:2px}

/* ── Reviews ─────────────────────────────────────────────── */
.rv-summary{display:grid;grid-template-columns:auto 1fr auto;gap:24px;padding:24px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;margin-bottom:20px;align-items:start}
@media(max-width:640px){.rv-summary{grid-template-columns:1fr;gap:16px}}
.rv-summary-left{text-align:center}
.rv-big-score{font-size:2.5rem;font-weight:900;color:var(--text-1);line-height:1}
.rv-stars-wrap{display:flex;align-items:center;gap:2px;justify-content:center;margin-top:4px}
.rv-star{font-size:.875rem;color:var(--border)}
.rv-star.rv-star-on{color:#f59e0b}
.rv-count{font-size:.75rem;color:var(--text-3);margin-left:6px}
.rv-recommend{font-size:.75rem;color:#16a34a;margin-top:6px;font-weight:600}

.rv-summary-bars{display:flex;flex-direction:column;gap:4px}
.rv-bar-row{display:flex;align-items:center;gap:8px}
.rv-bar-label{font-size:.75rem;color:var(--text-3);width:24px;text-align:right}
.rv-bar-track{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.rv-bar-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .3s}
.rv-bar-num{font-size:.75rem;color:var(--text-3);width:20px}

.rv-summary-cats{display:flex;flex-direction:column;gap:6px}
.rv-cat-row{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--text-2)}
.rv-cat-score{font-weight:700;color:var(--accent)}

.rv-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.rv-sort{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rv-sort-btn{font-size:.8125rem;padding:4px 12px;border:1px solid var(--border);border-radius:16px;color:var(--text-3);text-decoration:none;transition:all .15s}
.rv-sort-btn:hover,.rv-sort-btn.active{background:var(--accent-s);border-color:var(--accent);color:var(--accent)}
.rv-wrote-badge{font-size:.8125rem;color:#16a34a;font-weight:600}

.rv-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.rv-card{padding:20px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px}
.rv-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.rv-card-meta{font-size:.75rem;color:var(--text-3);display:flex;flex-wrap:wrap;gap:4px}
.rv-card-stars{display:flex;gap:1px;margin-bottom:2px}

.rv-ai-warn{font-size:.75rem;color:#d97706;background:rgba(245,158,11,.08);padding:6px 12px;border-radius:6px;margin-bottom:12px;display:inline-block}

.rv-use-case{font-size:.8125rem;color:var(--text-2);margin-bottom:14px;padding:10px 14px;background:var(--accent-s);border-radius:8px}
.rv-use-label{font-weight:600;color:var(--text-1);margin-right:4px}

.rv-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
@media(max-width:640px){.rv-pros-cons{grid-template-columns:1fr}}
.rv-pro,.rv-con{font-size:.875rem;line-height:1.6;color:var(--text-2)}
.rv-pc-label{font-size:.75rem;font-weight:700;margin-bottom:6px}
.rv-pc-pro{color:#16a34a}
.rv-pc-con{color:#dc2626}

.rv-highlight{font-size:.8125rem;color:var(--text-2);padding:8px 12px;background:rgba(245,158,11,.06);border-left:3px solid #f59e0b;border-radius:0 6px 6px 0;margin-bottom:8px}
.rv-highlight-neg{background:rgba(239,68,68,.05);border-left-color:#ef4444}

.rv-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.rv-recommend-badge{font-size:.8125rem;font-weight:600;padding:4px 12px;border-radius:16px}
.rv-rec-yes{color:#16a34a;background:rgba(22,163,74,.08)}
.rv-rec-no{color:#dc2626;background:rgba(220,38,38,.08)}

/* ── Review form ─────────────────────────────────────────── */
.rv-form{display:flex;flex-direction:column;gap:20px}
.rv-form-section{display:flex;flex-direction:column;gap:6px}
.rv-form-label{font-size:.875rem;font-weight:600;color:var(--text-1)}
.rv-req{color:#ef4444}
.rv-form-hint{font-size:.75rem;color:var(--text-3)}

.rv-stars-input{display:flex;gap:4px}
.rv-star-btn{background:none;border:none;font-size:1.75rem;color:var(--border);cursor:pointer;transition:color .1s;padding:0}
.rv-star-btn:hover,.rv-star-btn.rv-star-active{color:#f59e0b}
.rv-stars-sm .rv-star-btn{font-size:1.125rem}

.rv-detail-ratings{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px}
.rv-detail-row{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;color:var(--text-2)}

.rv-rec-option{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.875rem}
.rv-rec-option input{display:none}
.rv-rec-yes-label,.rv-rec-no-label{padding:8px 16px;border:1.5px solid var(--border);border-radius:8px;transition:all .15s}
.rv-rec-option input:checked+.rv-rec-yes-label{background:rgba(22,163,74,.08);border-color:#16a34a;color:#16a34a}
.rv-rec-option input:checked+.rv-rec-no-label{background:rgba(220,38,38,.08);border-color:#dc2626;color:#dc2626}