/* App-level tweaks on top of MudBlazor, mostly for mobile. */

html, body {
    overflow-x: hidden;
}

/* Keep dialog bodies inside the viewport and let tall content scroll, on every
   screen size (without this, desktop dialogs grew past the window and clipped). */
.mud-dialog-content {
    overflow-y: auto;
    max-height: calc(100vh - 220px);
}

/* When a date/time picker opens as its own dialog, let it size to the calendar
   instead of being squeezed by the rules above. */
.mud-picker-content {
    max-height: none;
}

/* Static availability calendar: days with availability (primary) vs. days that
   already have a session/appointment (orange). */
.availability-day {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-radius: 9999px !important;
    font-weight: 600;
}

.appointment-day {
    background-color: var(--mud-palette-warning) !important;
    color: var(--mud-palette-warning-text) !important;
    border-radius: 9999px !important;
    font-weight: 600;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.legend-available {
    background-color: var(--mud-palette-primary);
}

.legend-appointment {
    background-color: var(--mud-palette-warning);
}

/* Project tab buttons (Songs/Sessions/Availability). On phones, Songs and
   Sessions share the top row and Availability gets its own row below, so the
   long label never gets cut off. On wider screens all three sit in one row. */
.tab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.tab-grid-wide {
    grid-column: 1 / -1;
}

@media (min-width: 600px) {
    .tab-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tab-grid-wide {
        grid-column: auto;
    }
}

/* Phones: keep dialogs inside the viewport and let tall content (the
   propose-session dialog, etc.) scroll instead of being clipped. */
@media (max-width: 600px) {
    .mud-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
    }

    .mud-dialog-content {
        max-height: calc(100vh - 170px);
        max-height: calc(100dvh - 170px);
    }

    /* Tighter page gutters so cards and tables use the full width. */
    .mud-main-content .mud-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Drop the mic emoji from the brand on small screens. */
    .brand-icon {
        display: none;
    }
}