/* --- Ottimizzazione Mobile Header, Menu e Navigazione Anno (FestMap) --- */
@media screen and (max-width: 767px) {

    /* --- Header e Navbar identici alla pagina Mappa ---
    .app-header {
        padding: 8px 10px !important;
    }*/
/*
    .bottom-nav.inline-nav-links {
        display: flex !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .bottom-nav.inline-nav-links .nav-item {
        flex-direction: column !important;
        gap: 2px !important;
        font-size: 11px !important;
        text-align: center !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .bottom-nav.inline-nav-links .nav-item img.home-logo {
        height: 18px !important;
        width: auto !important;
    }

    .bottom-nav.inline-nav-links .nav-item .nav-icon {
        font-size: 1.1rem !important;
        line-height: 1 !important;
    }

    .bottom-nav.inline-nav-links .nav-item span,
    .bottom-nav.inline-nav-links .nav-item .nav-label {
        color: #ffffff !important;
        font-weight: normal !important;
    }*/

    /* Elemento attivo (Calendario) in evidenza */
    /*.bottom-nav.inline-nav-links .nav-item.active,
    .bottom-nav.inline-nav-links .nav-item.active span,
    .bottom-nav.inline-nav-links .nav-item.active .nav-label {
        color: #ff416c !important;
        font-weight: bold !important;
    }*/

    /* --- Spaziatura generale pagina --- */
    #app {
        padding-top: 70px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
    }

    /* --- Intestazione Anno con testi corti per mobile --- */
    .calendar-header-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 12px !important;
        background: rgba(20, 15, 35, 0.9) !important;
        padding: 10px 8px !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .calendar-header-nav button {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Sostituiamo o compattiamo i testi tramite CSS se necessario,
       oppure lasciamo che il blocco contenga comodamente le parole */
    .calendar-header-nav h2 {
        font-size: 0.95rem !important;
        text-align: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
        color: #fff !important;
    }

    /* --- Barra dei filtri a griglia --- */
    .filters-calendar-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 8px !important;
        border-radius: 10px !important;
        background: rgba(15, 10, 30, 0.95) !important;
        margin-bottom: 12px !important;
    }

    .filters-calendar-bar #filter-testo {
        grid-column: span 2 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .filters-calendar-bar select,
    .filters-calendar-bar input {
        width: 100% !important;
        min-width: 0 !important;
        padding: 7px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
        background: rgba(20, 15, 35, 0.9) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

}

@media (max-width: 767px) {
    /* Adatta la finestra modale agli schermi piccoli */
    .matrix-modal-content {
        width: 95% !important;
        max-width: 100% !important;
        max-height: 85vh !important;
        padding: 12px !important;
        box-sizing: border-box;
        overflow-y: auto !important; /* Permette lo scroll verticale di tutta la modale */
    }

    /* Dis dispone le 4 categorie in colonna anziché affiancate */
    .matrix-modal-columns-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Ogni colonna-categoria occupa tutta la larghezza disponibile */
    .matrix-category-column {
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box;
    }

    /* Ridimensiona leggermente i testi delle card evento per smartphone */
    .matrix-event-card-item {
        padding: 10px !important;
    }

    .matrix-event-title {
        font-size: 1rem !important;
    }
}