.archive-view-container {
    padding-top: 16px;
}

/* Single flex row: search left | toggle center | chips right.
   On narrow screens the medium toggle reflows to its own centered row below. */
.archive-controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding: 36px 0 20px 0;
}

.archive-controls-search {
    flex: 1 1 0;
    min-width: 180px;
}

/* archive-search-field rides on MudTextField, whose root is a child Razor component element.
   Blazor isolation does not stamp the scope attribute there, so ::deep is required. */
::deep .archive-search-field {
    max-width: 420px;
    width: 100%;
}

.archive-controls-medium {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.archive-controls-genre {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
}

/* Narrow screens: push the medium toggle to a full-width centered second row.
   Search and genre chips stay together on the first row. */
@media (max-width: 600px) {
    .archive-controls-medium {
        order: 1;
        flex: 1 0 100%;
        justify-content: center;
    }

    .archive-controls-genre {
        order: 0;
        flex: 0 1 auto;
    }
}