/* ========================================
   Sets Index - View Mode Variants
   ======================================== */

/* Default: show table, hide cards (desktop default, SEO/noscript fallback) */
.sets-table-wrapper {
    display: block;
}

.set-cards {
    display: none;
}

/* Mobile default: show grid, hide table (when no preference set) */
@media (max-width: 767.98px) {
    [data-controller="set-view"]:not([data-set-view]) .sets-table-wrapper {
        display: none;
    }

    [data-controller="set-view"]:not([data-set-view]) .set-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }
}

/* Explicit table view: show table, hide cards */
[data-set-view="table"] .sets-table-wrapper {
    display: block;
}

[data-set-view="table"] .set-cards {
    display: none;
}

/* Explicit grid view: show cards, hide table */
[data-set-view="grid"] .sets-table-wrapper {
    display: none;
}

[data-set-view="grid"] .set-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* View switcher buttons */
[data-set-view="table"] [data-view-button="table"],
[data-set-view="grid"] [data-view-button="grid"] {
    background: var(--bs-primary);
    border-color: var(--bs-light);
    color: white;
}

/* ========================================
   Sets Table Enhancements
   ======================================== */

.sets-table {
    font-size: 0.9rem;
}

.sets-table th {
    white-space: nowrap;
    vertical-align: middle;
}

.sets-table th a {
    text-decoration: none;
    color: var(--bs-body-color);
}

.sets-table th.sorted {
    background: var(--bs-tertiary-bg);
}

.sets-table td {
    vertical-align: middle;
}

.sets-table__image {
    width: 60px;
    padding: 0.25rem !important;
}

.sets-table__image img {
    object-fit: contain;
}

.sets-table__actions {
    white-space: nowrap;
}

.sets-table__actions .btn-group .btn {
    padding: 0.25rem 0.4rem;
}

.sets-table__actions .icon-sm {
    width: 1rem;
    height: 1rem;
}