/* =========================================================
   K4W AUTO — AGENDA MOBILE V1
   Correção de responsividade da agenda
   ========================================================= */

@media (max-width: 800px) {

    /* Cabeçalho da agenda */

    .calendar-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin: 12px 0 18px !important;
        min-width: 0 !important;
    }

    .calendar-head > div {
        min-width: 0 !important;
        width: 100% !important;
    }

    .calendar-head h1 {
        font-size: clamp(25px, 7vw, 34px) !important;
        line-height: 1.12 !important;
        margin: 7px 0 !important;
    }

    .calendar-head p {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }

    /* Botões do cabeçalho */

    .calendar-head > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .calendar-head > div:last-child > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 9px 8px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    /* Barra de navegação da agenda */

    .calendar-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
    }

    .calendar-toolbar > strong {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    /* Anterior / Hoje / Seguinte */

    .calendar-nav {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 5px !important;
        justify-content: center !important;
    }

    .calendar-nav a {
        display: flex !important;
        flex: 1 1 0 !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 7px 8px !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    /* Semana / Dia / Lista / Mês */

    .view-switch {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        justify-content: stretch !important;
        gap: 4px !important;
    }

    .view-switch a {
        display: flex !important;
        flex: 1 1 0 !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 7px 4px !important;
        font-size: 12px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Filtros */

    .calendar-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: end !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        overflow: visible !important;
    }

    .calendar-filters > div {
        min-width: 0 !important;
        width: 100% !important;
    }

    .calendar-filters label {
        display: block !important;
        margin-bottom: 4px !important;
        font-size: 11px !important;
    }

    .calendar-filters select,
    .calendar-filters input:not([type="hidden"]) {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 40px !important;
        padding: 7px 8px !important;
        font-size: 12px !important;
    }

    .calendar-filters > a {
        display: inline-flex !important;
        grid-column: 1 / -1 !important;
        justify-self: end !important;
        margin: 0 !important;
        font-size: 12px !important;
    }

    /* Grelha semanal */

    .space-calendar {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .calendar-days,
    .space-row {
        width: max-content !important;
        min-width: 1140px !important;
    }

    .space-row > header {
        min-width: 0 !important;
    }

    /* Permitir utilização de espaços vazios no toque */

    .space-cell .empty-cell {
        opacity: 1 !important;
    }

    /* Vista de lista */

    .booking-list {
        min-width: 0 !important;
        width: 100% !important;
    }

    .booking-list > a {
        min-width: 0 !important;
        grid-template-columns: 55px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 12px 10px !important;
    }

    .booking-list > a > div {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    /* Legenda */

    .calendar-legend {
        gap: 8px 12px !important;
        padding: 12px !important;
    }

    /* Garantir espaço para o menu inferior */

    body.backoffice main.container {
        padding-bottom: 100px !important;
    }
}

/* Telemóveis pequenos */

@media (max-width: 380px) {

    .calendar-head > div:last-child {
        grid-template-columns: 1fr !important;
    }

    .calendar-filters {
        grid-template-columns: 1fr !important;
    }

    .view-switch a {
        font-size: 11px !important;
        padding: 6px 2px !important;
    }
}