/* Useful Feedback Buttons Styles */

/* Center the button container within the feedback box */
.useful-feedback-buttons {
    display: flex;
    justify-content: space-evenly;
    padding: 26px;
    background-color: #f2f2f2;
    border-radius: 5px;
}

/* HTMX State Classes */
.htmx-request {
    opacity: 0.6;
    pointer-events: none;
}

/* Remove HTMX transition effects that cause layout shifts */
.htmx-swapping {
    opacity: 0;
}

.htmx-settling {
    opacity: 1;
}

/* Button state overrides */
.wp-block-button__link.useful-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hover effects for voted buttons - muted colors to indicate unvoting */
.wp-block-button.vote_up .wp-block-button__link.useful-voted-filled:hover {
    filter: saturate(50%);
}

.wp-block-button.vote_down .wp-block-button__link.useful-voted-filled:hover {
    filter: saturate(50%);
}

/* Admin Styles */
.useful-admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.useful-stat-card {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
}

.useful-stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #007cba;
    display: block;
}

.useful-stat-label {
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.useful-top-posts {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    padding: 1rem;
}

.useful-top-posts h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #495057;
}

.useful-post-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f3f4;
}

.useful-post-item:last-child {
    border-bottom: none;
}

.useful-post-title {
    flex: 1;
    margin-right: 1rem;
}

.useful-post-votes {
    display: flex;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.useful-reset-button {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 0.5rem;
}

.useful-reset-button:hover {
    background: #c82333;
}

.useful-feedback-buttons .wp-block-button__link:hover {
    text-decoration: none;
}