/* Full-width toolbar using a 3-column grid.
   Left and right columns share equal space (1fr each),
   while center only takes as much width as its content needs (auto),
   ensuring the center section is always geometrically centered. */
.toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left center right";
    align-items: start;
    width: 100%;
}

/* When toolbar-center is NOT present, left and right are auto-sized.
   A 1fr empty middle column pushes right to the end. */
@supports selector(:has(*)) {
    .toolbar:not(:has(.toolbar-center)) {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "left . right";
    }
}

/* Left section: items aligned to the start, wrapping to multiple lines if needed. */
.toolbar-left {
    grid-area: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 8px 0px;
}

/* Center section: items always centered horizontally within the toolbar, wrapping to multiple lines if needed. */
.toolbar-center {
    grid-area: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 0px;
}

/* Right section: items aligned to the end, wrapping to multiple lines if needed. */
.toolbar-right {
    grid-area: right;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 8px 0px;
}

/* Title element inside the toolbar */
.toolbar-title {
    font-weight: 600;
    font-size: 22px;
}

/* Mobile layout (width <= 768px):
   Switches from grid to a vertical flex column.
   Each section and its items stretch to fill the full available width. */
@media (max-width: 768px) {
    .toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-left,
    .toolbar-center,
    .toolbar-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .toolbar-left > *,
    .toolbar-center > *,
    .toolbar-right > * {
        width: 100%;
    }
}