/* /Shared/AppointmentCalendar.razor.rz.scp.css */
/* Heron.MudCalendar's toolbar defaults to a single row with overflow-x scroll, which
   crams badly on phone widths. Let it wrap instead, and give the mobile (Day-only)
   toolbar full-width, centred controls so nothing gets clipped or requires scrolling. */
@media (max-width: 600px) {
    [b-rkchlv2wa7] .appt-header {
        flex-direction: column;
        align-items: stretch;
        row-gap: 8px;
    }

    [b-rkchlv2wa7] .appt-add-btn {
        width: 100%;
    }

    [b-rkchlv2wa7] .mud-cal-toolbar {
        flex-wrap: wrap;
        row-gap: 8px;
        overflow-x: visible;
    }

    [b-rkchlv2wa7] .mud-cal-toolbar-nav {
        width: 100%;
        justify-content: center;
    }

    [b-rkchlv2wa7] .mud-cal-mobile .mud-cal-toolbar {
        justify-content: center;
    }

    [b-rkchlv2wa7] .mud-cal-mobile .mud-cal-toolbar > .mud-picker {
        width: 100%;
        order: 1;
    }
}