/* IzeChat Help & Support (Phase 4 — Ideas & Feedback). Scoped under
   .ize-fb-* so it cannot leak into unrelated pages. Reuses the Support
   hero/empty/loading/badge primitives from ize-support.css where the
   shapes genuinely match (both load on every page already). */

.ize-fb-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 16px;
    align-items: center;
}
.ize-fb-sort-tab {
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
}
.ize-fb-sort-tab-active { background: #0d6efd; color: #fff; border-color: #0d6efd; }
body.dark_active .ize-fb-sort-tab { background: #1e1e1e; border-color: rgba(255,255,255,.12); color: #eaeaea; }
body.dark_active .ize-fb-sort-tab-active { background: #2563eb; border-color: #2563eb; color: #fff; }

.ize-fb-card {
    display: flex;
    gap: 12px;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
}
.ize-fb-card:hover { border-color: rgba(0,0,0,.18); text-decoration: none; color: inherit; }
body.dark_active .ize-fb-card { border-color: rgba(255,255,255,.08); color: #eaeaea; }
body.dark_active .ize-fb-card:hover { border-color: rgba(255,255,255,.2); }

.ize-fb-vote-btn {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    color: #444;
}
.ize-fb-vote-btn-active { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.ize-fb-vote-btn .ize-fb-vote-count { font-size: 15px; }
body.dark_active .ize-fb-vote-btn { background: #1e1e1e; border-color: rgba(255,255,255,.12); color: #ddd; }
body.dark_active .ize-fb-vote-btn-active { background: #2563eb; border-color: #2563eb; color: #fff; }

.ize-fb-idea-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.ize-fb-idea-meta { font-size: 12px; opacity: .6; }
.ize-fb-status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.ize-fb-status-under_review, .ize-fb-status-pending_review { background: #eaf2ff; color: #1d4ed8; }
.ize-fb-status-planned { background: #f3e8ff; color: #7c3aed; }
.ize-fb-status-in_progress { background: #fff4e5; color: #b45309; }
.ize-fb-status-completed { background: #e7fbf3; color: #047857; }
.ize-fb-status-declined, .ize-fb-status-archived { background: #f1f3f5; color: #666; }
.ize-fb-status-merged { background: #f1f3f5; color: #666; }
body.dark_active .ize-fb-status-under_review, body.dark_active .ize-fb-status-pending_review { background: #142a4d; color: #7fb1ff; }
body.dark_active .ize-fb-status-planned { background: #2e1f47; color: #c9a4ff; }
body.dark_active .ize-fb-status-in_progress { background: #3a2c12; color: #f2b866; }
body.dark_active .ize-fb-status-completed { background: #113328; color: #6fe0b8; }
body.dark_active .ize-fb-status-declined, body.dark_active .ize-fb-status-archived, body.dark_active .ize-fb-status-merged { background: #2a2a2a; color: #ccc; }

.ize-fb-comment { border-radius: 12px; background: #f8f9fa; padding: 10px 14px; margin-bottom: 10px; font-size: 14px; }
.ize-fb-comment-meta { font-size: 11px; opacity: .55; margin-bottom: 4px; }
body.dark_active .ize-fb-comment { background: #1e1e1e; color: #eaeaea; }

.ize-fb-related-chip {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12);
    font-size: 12px;
    margin: 0 6px 6px 0;
    text-decoration: none;
    color: inherit;
}
body.dark_active .ize-fb-related-chip { border-color: rgba(255,255,255,.12); color: #eaeaea; }

@media (max-width: 576px) {
    .ize-fb-card { padding: 10px 12px; }
    .ize-fb-vote-btn { width: 44px; height: 44px; }
}

/* Phase 5 -- Roadmap tab. No new table (a filtered read of Wo_Feedback_Ideas),
   so its styling lives alongside the rest of the Ideas surface rather than in
   a dedicated stylesheet. */
.ize-rm-column { margin-bottom: 22px; }
.ize-rm-column-title { font-size: 14px; font-weight: 700; margin: 0 0 8px; opacity: .8; }
.ize-rm-card {
    display: block;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
}
.ize-rm-card:hover { border-color: rgba(0,0,0,.18); text-decoration: none; color: inherit; }
body.dark_active .ize-rm-card { border-color: rgba(255,255,255,.08); color: #eaeaea; }
body.dark_active .ize-rm-card:hover { border-color: rgba(255,255,255,.2); }