/* Shared week toolbar grid, week label, responsive toolbar slots, and mobile controls. */

.app-week-nav-label {
    min-height: 2.35rem;
    padding: 0.45rem 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

.app-week-toolbar {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "quick navigation settings";
    gap: 0.75rem;
    align-items: center;
    min-height: 4.5rem;
}

.app-week-toolbar-section {
    min-width: 0;
}

.app-week-toolbar-quick {
    grid-area: quick;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}

.app-week-toolbar-primary,
.app-week-toolbar-reset,
.app-week-toolbar-aux {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.app-week-toolbar-mobile-control {
    display: none;
}

.app-week-toolbar-navigation {
    grid-area: navigation;
    display: flex;
    justify-content: center;
}

.app-week-toolbar-settings {
    grid-area: settings;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.app-week-toolbar-aux {
    min-width: 0;
}

.app-week-toolbar-aux-mobile {
    display: none;
}

.app-week-toolbar-aux-desktop {
    display: inline-flex;
}

@media (max-width: 991.98px) {
    .app-week-toolbar {
        min-height: auto;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        column-gap: 0.75rem;
        row-gap: 0.75rem;
        align-items: center;
    }

    .app-week-toolbar-roster {
        grid-template-areas:
            "primary top-spacer settings"
            "navigation navigation navigation"
            "auxiliary auxiliary auxiliary";
    }

    .app-week-toolbar-timesheets {
        grid-template-areas:
            ". top-spacer settings"
            "navigation navigation navigation";
    }

    .app-week-toolbar-desktop-start {
        display: none;
    }

    .app-week-toolbar-mobile-control {
        display: flex;
    }

    .app-week-toolbar-primary,
    .app-week-toolbar-reset,
    .app-week-toolbar-navigation,
    .app-week-toolbar-settings,
    .app-week-toolbar-aux-mobile {
        position: relative;
        z-index: 1;
    }

    .app-week-toolbar-primary {
        grid-area: primary;
        justify-content: flex-start;
        min-width: 0;
    }

    .app-week-toolbar-timesheets .app-week-toolbar-primary {
        display: none;
    }

    .app-week-toolbar-reset {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: stretch;
        justify-content: center;
        width: 100%;
        min-width: 0;
        margin-inline: 0;
    }

    .app-week-toolbar-settings {
        grid-area: settings;
        justify-content: flex-end;
    }

    .app-week-toolbar-navigation {
        grid-area: navigation;
        width: 100%;
        justify-content: center;
    }

    .app-week-toolbar-aux-desktop {
        display: none;
    }

    .app-week-toolbar-aux-mobile {
        grid-area: auxiliary;
        display: flex;
        justify-content: center;
    }

    .app-week-toolbar-timesheets .app-week-toolbar-aux-mobile {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .app-week-toolbar-timesheets {
        grid-template-areas: "quick navigation settings";
        min-height: 4.5rem;
    }

    .app-week-toolbar-timesheets .app-week-toolbar-desktop-start {
        display: flex;
    }

    .app-week-toolbar-timesheets .app-week-toolbar-mobile-control,
    .app-week-toolbar-timesheets .app-week-toolbar-aux-mobile {
        display: none;
    }

    .app-week-toolbar-timesheets .app-week-toolbar-aux-desktop {
        display: inline-flex;
    }
}