/* Styling for section controls */
.category-title {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    padding-right: 80px; /* Make room for controls */
}

.section-controls {
    margin-top: 0.5rem;
}

.section-controls .btn {
    padding: 0.25rem 0.5rem;
    color: var(--color-primary);
}

.section-controls .btn:hover {
    color: var(--color-primary-dark);
}

/* Ensure the controls don't break the layout on mobile */
@media (max-width: 576px) {
    .section-controls {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        display: flex;
        justify-content: flex-end;
        margin-top: -1.5rem;
        margin-bottom: 1rem;
    }
    
    .category-title {
        padding-right: 0;
    }
}