/*======================================
  COLLECTION VIEW COMPONENT STYLES
======================================*/

.collection-view-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Requires a parent with a defined height */
    width: 100%;
}

.collection-header {
    display: flex;
    flex-wrap: wrap;
    /* Allow controls to wrap on smaller screens */
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    flex-shrink: 0;
    /* Prevent header from shrinking */
    border-bottom: 1px solid #374151;
    /* border-gray-700 */
    margin-bottom: 1rem;
}

.collection-title {
    margin-right: auto;
    /* Pushes controls to the right */
}

.collection-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.collection-controls .form-input,
.collection-controls .btn {
    width: auto;
    /* Override default 100% width */
    min-width: 150px;
}

#collection-sort-dir.btn {
    min-width: 44px;
    /* Fixed width for the direction button */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#collection-grid-container {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    /* Required for flexbox scrolling */
    padding-right: 0.5rem;
    /* Space for the scrollbar */
}

/* --- Card Grid Layout --- */
.card-grid {
    display: grid;
    /* Responsive grid: min 180px width, max 1fr */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    /* This is the key fix: It packs rows to the start of the container, preventing them and their items from stretching vertically when there's extra space. */
    align-content: start;
}