/*
 * Shared phone tweaks for Heron MudCalendar (used on Approved Visits and
 * Visit Availability). The default toolbar packs Prev, Next, the month
 * dropdown, and the MONTH / WEEK view toggle into one row, which overflows
 * on phones. Let the toolbar wrap onto two rows and tighten paddings.
 *
 * Approved visit cell text needs ellipsis-truncation on the individual MudText
 * lines (not just the wrapper), since each line is its own block element.
 * Blazor's scoped CSS does not propagate through MudText, so these rules live
 * here in the global stylesheet.
 */

.approved-visit .approved-visit-line {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width: 599px) {
    .approved-visit .approved-visit-line {
        font-size: 9px;
        line-height: 1.1;
    }
}

@media (max-width: 599px) {
    .mud-cal-toolbar {
        flex-wrap: wrap;
        gap: 4px;
        row-gap: 6px;
    }

    /* The right-side flex group that holds the MONTH/WEEK toggle should
       wrap below the prev/next/month controls instead of overflowing. */
    .mud-cal-toolbar .mud-width-full.justify-end {
        justify-content: flex-start;
    }

    .mud-cal-toolbar .mud-button,
    .mud-cal-toolbar-nav .mud-button {
        padding: 4px 8px;
        min-width: 0;
        font-size: 0.8rem;
    }

    /* Calendar day cells get extra-narrow on phones; shrink the day number
       font so the date label does not push the cell wider. */
    .mud-cal-month-link,
    .mud-calendar-day-number {
        font-size: 0.75rem;
    }
}