/*
This file is designed to ADD styles to 'styles.css', not conflict with it.
It styles components unique to the feedback page.
It assumes 'styles.css' is loaded first and inherits its variables and base styles.
*/

/* Feature Card Styles */
.feature-card {
    /* The .card style (bg, border, shadow) comes from styles.css */
    /* This class just adds the flex layout and overrides padding for a more compact list */
    display: flex;
    gap: 1rem;
    padding: 1.25rem; /* p-5, overrides the default card padding */
}

.vote-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Use a semi-transparent background derived from your theme */
    background-color: rgba(255, 255, 255, 0.05); 
    border-radius: 0.5rem;
    padding: 0.5rem 0.25rem;
    align-self: flex-start;
    border: 1px solid var(--panel-border); /* Uses variable from styles.css */
}

.vote-button {
    color: #64748B; /* Slate-500 */
    transition: color 0.2s, transform 0.1s;
    padding: 0.25rem;
    border-radius: 9999px;
}
.vote-button:hover {
    color: var(--text-primary); /* Uses variable from styles.css */
    transform: scale(1.1);
}
.vote-button.upvoted {
    color: var(--success-color); /* Uses variable from styles.css */
}
.vote-button.downvoted {
    color: var(--danger-color); /* Uses variable from styles.css */
}
.vote-button:active {
    transform: scale(0.95);
}

.vote-score {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text-primary); /* Uses variable from styles.css */
    margin: 0.25rem 0;
}

/* Status Badge Styles */
/* These are unique to this page and don't conflict */
.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.5rem;
}
.status-open { background-color: rgba(86, 101, 115, 0.5); color: #F8F9F9; }
.status-under-review { background-color: rgba(245, 176, 65, 0.7); color: #FEF9E7; }
.status-planned { background-color: rgba(52, 152, 219, 0.7); color: #EAF2F8; }
.status-completed { background-color: rgba(46, 204, 113, 0.7); color: #E8F8F5; }
.status-declined { background-color: rgba(231, 76, 60, 0.6); color: #F9EBEA; }

/* Styles for Admin Comment and Panel */
/* Adapted to use styles.css variables */
.admin-comment {
    /* Use primary-accent from styles.css with alpha */
    background-color: rgba(139, 92, 246, 0.1); 
    border-left: 4px solid var(--primary-accent);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    border-radius: 0.25rem;
}
.admin-comment p { margin: 0; }
.admin-comment .comment-author {
    font-weight: 600;
    color: var(--primary-accent); /* Use the main accent color */
}

.admin-panel {
    border-top: 1px solid var(--panel-border); /* Uses variable from styles.css */
    margin-top: 1rem;
    padding-top: 1rem;
}

/* Style for the active category filter button */
#category-filters .btn.btn-secondary.active {
    /* Mirrors the .tab-button.active style from styles.css */
    color: var(--primary-accent);
    background-color: rgba(139, 92, 246, 0.15); /* --primary-accent with opacity */
    border-color: var(--primary-accent);
    box-shadow: none;
}

/*
==========================================================================
   NEW STYLES FOR v2.1.0 (Comments & Tabs)
========================================================================== 
*/

/* Tab Adjustments */
/* Make tabs wrap better on mobile and remove icons for a cleaner look */
#view-tabs .tab-button {
    padding: 0.75rem 1rem; /* Slightly smaller padding */
    font-size: 0.875rem; /* 14px */
}

/* Hide icons that were in the original HTML */
#view-tabs .tab-button svg {
    display: none;
}

/* Feature Card Footer */
.feature-card-footer {
    border-top: 1px solid var(--panel-border);
    margin-top: 1rem;
    padding-top: 0.75rem;
}

.comments-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem; /* 6px */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: #94a3b8; /* slate-400 */
    background-color: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comments-toggle-btn:hover {
    color: var(--text-primary);
    background-color: var(--panel-border);
}

/* Comments Section */
.feature-card.comments-open {
    /* When comments are open, the layout changes */
    flex-direction: column;
}

.comments-section-container {
    /* This container takes up the full width of the card */
    width: 100%;
    border-top: 1px solid var(--panel-border);
    padding-top: 1rem;
    margin-top: 1rem;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem; /* For scrollbar */
    margin-bottom: 1.5rem;
}

.comment-item {
    background-color: var(--background-main);
    border: 1px solid var(--panel-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.comment-author {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.comment-meta {
    font-size: 0.75rem;
    color: #64748b; /* slate-500 */
    margin-left: auto;
}

.comment-body p {
    font-size: 0.875rem;
    color: #cbd5e1; /* slate-300 */
    line-height: 1.6;
    margin: 0;
    /* Allow long strings to break */
    word-break: break-word;
    white-space: pre-wrap;
}

/* Comment Author Badges */
.comment-badge {
    font-size: 0.65rem; /* 10px */
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comment-badge.admin {
    background-color: var(--primary-accent);
    color: white;
    box-shadow: 0 0 8px var(--accent-glow);
}

.comment-badge.author {
    background-color: #64748b; /* slate-500 */
    color: white;
}

/* Comment Form */
.comment-form {
    border-top: 1px solid var(--panel-border);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* Use a smaller button for the comment form */
.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.comments-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.comment-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8; /* slate-400 */
    background-color: var(--panel-border);
    border: 1px solid #333;
    padding: 0.25rem 0.6rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-close-btn:hover {
    background-color: #333;
    color: white;
}