.gig-toggle-compact .mud-toggle-item {
    padding: 2px 10px;
    min-height: 28px;
    font-size: 0.75rem;
}

/* SEARCH BAR — sticks under the app bar */
.searchoptions {
    position: sticky;
    top: 64px; /* app bar height */
    margin-top: -16px !important;
    padding-top: 16px !important;
    background: white;
    z-index: 1000;
}

    .searchoptions .mud-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .searchoptions .mud-item {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

/* DATE HEADER — grey background */
.group-header {
    background-color: #D2CACA;
    border-radius: 5px !important;
    margin: 0 !important;
    padding: 0 !important;        
    z-index: 900;
}

    /* DATE HEADER — sticks under the search bar */
    .group-header.sticky {
        position: sticky;
        top: 144px; /* 64px app bar + 64px search bar */
        z-index: 900;
    }

    .group-header.sticky-place {
        position: sticky;
        top: 64px; /* 64px app bar + 64px search bar */
        z-index: 900;
    }

/* MudPaper inside header must not override grey */
.calendar-wrapper {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Required for sticky inside MudBlazor */
.mud-grid,
.mud-grid-item,
.mud-paper {
    overflow: visible !important;
}

.calendar-wrapper {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0;
    border-radius: 5px !important;
    margin-bottom: 10px;
}

.calendar-square {
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    background-color: #D47069;
    color: white;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0 0 5px;
    padding: 4px;
    min-height: 50px;
}

.calendar-day {
    font-size: 0.6rem;    
}

.calendar-date {
    font-size: 0.9rem;
    background-color: white;
    color: #424242;
    padding: 2px 10px;
    border-radius: 2px;
    margin-top: 4px;
}

.group-label {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
}

.gig {
    background-color: #E9E5E0;    
    border-bottom:solid 2px #999;
}

    .gig.cancelled {
        background-color: rgba(200, 200, 200, 0.75);
    }



/* Extra Small (xs): <600px) */
@media (max-width: 599px) {
    .searchoptions {
        top: 46px; /* app bar height */
        margin-top: -26px !important;
        padding-top: 5px !important;
        padding-bottom:10px;
    }

    .group-header.sticky {
        position: sticky;
        top: 226px; /* 64px app bar + 64px search bar */
        z-index: 900;
    }

    .group-header.sticky-place {
        position: sticky;
        top: 56px; /* 64px app bar + 64px search bar */
        z-index: 900;
    }

    .group-label {
        font-size: 1rem;
    }

    .gig {
        
    }

        .gig .artiste-name,
        .gig .venue {
            
        }

            .gig .venue .mud-typography,
            .gig .venue .mud-typography.mud-typography-subtitle2,
            .gig .artiste-name .mud-typography,
            .gig .artiste-name .mud-typography.mud-typography-subtitle2 {
                font-size: 1.25rem !important;
            }

            .gig .artiste-name .mud-typography,
            .gig .artiste-name .mud-typography.mud-typography-body1,
            .gig .venue .mud-typography,
            .gig .venue .mud-typography.mud-typography-body1 {
                font-size: 1.10rem !important;
            }

        /* GENRES */
        .gig .genres.mud-typography-caption {
            font-size: 0.90rem !important;
            margin-left:5px;
        }
}

/* Small (sm): 600px – 959px */
@media (min-width: 600px) and (max-width: 959px) {
    /* DATE HEADER — sticks under the search bar */
    .group-header.sticky {
        position: sticky;
        top: 200px; /* 64px app bar + 64px search bar */
        z-index: 900;
    }

    .group-header.sticky-place {
        position: sticky;
        top: 64px; /* 64px app bar + 64px search bar */
        z-index: 900;
    }

    .group-label {
        font-size: 1.25rem;
    }

    .gig {
    }

        .gig .artiste-name,
        .gig .venue {
        }

            .gig .venue .mud-typography,
            .gig .venue .mud-typography.mud-typography-subtitle2,
            .gig .artiste-name .mud-typography,
            .gig .artiste-name .mud-typography.mud-typography-subtitle2 {
                font-size: 1.25rem !important;
            }

                .gig .artiste-name .mud-typography,
                .gig .artiste-name .mud-typography.mud-typography-body1,
                .gig .venue .mud-typography,
                .gig .venue .mud-typography.mud-typography-body1 {
                    font-size: 1.10rem !important;
                }

        /* GENRES */
        .gig .genres.mud-typography-caption {
            font-size: 0.95rem !important;
        }
}

/* Medium (md): 960px – 1279px */
@media (min-width: 960px) and (max-width: 1279px) {
    .gig {
    }

        .gig .artiste-name,
        .gig .venue {
        }

            .gig .venue .mud-typography,
            .gig .venue .mud-typography.mud-typography-subtitle2,
            .gig .artiste-name .mud-typography,
            .gig .artiste-name .mud-typography.mud-typography-subtitle2 {
                font-size: 1.25rem !important;
            }

                .gig .artiste-name .mud-typography,
                .gig .artiste-name .mud-typography.mud-typography-body1,
                .gig .venue .mud-typography,
                .gig .venue .mud-typography.mud-typography-body1 {
                    font-size: 1.10rem !important;
                }

        /* GENRES */
        .gig .genres.mud-typography-caption {
            font-size: 0.95rem !important;
        }
}

/* Large (lg): 1280px – 1919px */
@media (min-width: 1280px) and (max-width: 1919px) {
    .gig {
    }

        .gig .artiste-name,
        .gig .venue {
        }

            .gig .venue .mud-typography,
            .gig .venue .mud-typography.mud-typography-subtitle2,
            .gig .artiste-name .mud-typography,
            .gig .artiste-name .mud-typography.mud-typography-subtitle2 {
                font-size: 1.25rem !important;
            }

                .gig .artiste-name .mud-typography,
                .gig .artiste-name .mud-typography.mud-typography-body1,
                .gig .venue .mud-typography,
                .gig .venue .mud-typography.mud-typography-body1 {
                    font-size: 1.10rem !important;
                }

        /* GENRES */
        .gig .genres.mud-typography-caption {
            font-size: 0.95rem !important;
        }
}

/* Extra Large (xl): 1920px – 2559px */
@media (min-width: 1920px) and (max-width: 2559px) {
    .gig {
    }

        .gig .artiste-name,
        .gig .venue {
        }

            .gig .venue .mud-typography,
            .gig .venue .mud-typography.mud-typography-subtitle2,
            .gig .artiste-name .mud-typography,
            .gig .artiste-name .mud-typography.mud-typography-subtitle2 {
                font-size: 1.25rem !important;
            }

                .gig .artiste-name .mud-typography,
                .gig .artiste-name .mud-typography.mud-typography-body1,
                .gig .venue .mud-typography,
                .gig .venue .mud-typography.mud-typography-body1 {
                    font-size: 1.10rem !important;
                }

        /* GENRES */
        .gig .genres.mud-typography-caption {
            font-size: 0.95rem !important;
        }
}

/* Extra Extra Large (xxl): ≥2560px */
@media (min-width: 2560px) {
    .gig {
    }

        .gig .artiste-name,
        .gig .venue {
        }

            .gig .venue .mud-typography,
            .gig .venue .mud-typography.mud-typography-subtitle2,
            .gig .artiste-name .mud-typography,
            .gig .artiste-name .mud-typography.mud-typography-subtitle2 {
                font-size: 1.25rem !important;
            }

                .gig .artiste-name .mud-typography,
                .gig .artiste-name .mud-typography.mud-typography-body1,
                .gig .venue .mud-typography,
                .gig .venue .mud-typography.mud-typography-body1 {
                    font-size: 1.10rem !important;
                }

        /* GENRES */
        .gig .genres.mud-typography-caption {
            font-size: 0.95rem !important;
        }
}