/* Colori Base */
:root {
    --colore-corso: rgb(237, 237, 233);
    --colore-corsoselezionato: rgb(207, 207, 203);
    --colore-opzione: rgb(249, 199, 79);
    --colore-prenotazione: rgb(220, 235, 245);
    --colore-prova: rgb(252, 184, 254);
    --colore-recupero: rgb(255, 238, 187);
    --colore-maestro: rgb(142, 196, 143,0.6);
    --colore-maestroselezionato: rgb(122, 176, 123);
    --colore-maestro-hover: rgb(142, 196, 143);
    --colore-ospite: rgb(215, 125, 163);
    --colore-chiusura: rgb(140, 140, 140, 0.8);
    --colore-chiusurafestiva: rgb(140, 140, 140);
    --colore-occupato: rgb(180, 180, 180);
    --colore-annullato: rgb(255, 51, 0);
    --colore-corso-light: rgb(237, 237, 233,0.5);
    --colore-opzione-light: rgb(249, 199, 79,0.5);
    --colore-prenotazione-light: rgb(220, 235, 245,0.5);
    --colore-prova-light: rgb(252, 184, 254,0.5);
    --colore-recupero-light: rgb(255, 238, 187,0.5);
    --colore-maestro-light: rgb(142, 196, 143,0.5);
    --colore-ospite-light: rgb(215, 125, 163,0.5);
    --colore-segreteria: rgb(224, 200, 64,0.6);
    --colore-segreteria-hover: rgb(224, 200, 64);
    --colore-administrator: rgb(130, 125, 101, 0.6);
    --colore-manager: rgb(22, 154, 163,0.6);
    --colore-scheduler: rgb(171, 165, 19,0.6);
    --colore-my-scheduler: rgb(187, 69, 48,0.6);
    --colore-prenotazioni: rgb(240, 242, 177,0.6);
    --colore-administrator-hover: rgb(130, 125, 101);
    --colore-manager-hover: rgb(22, 154, 163);
    --colore-scheduler-hover: rgb(171, 165, 19);
    --colore-my-scheduler-hover: rgb(187, 69, 48);
    --colore-prenotazioni-hover: rgb(240, 242, 177);
    --colore-cella-evidenziata: rgb(255, 253, 175);
}

.custom-cell-background {
    background-color: var(--colore-cella-evidenziata) !important;
}

a.administrator, .btn-link .administrator {
    background-color: var(--colore-administrator);
    color: black;
    border: none;
}

    a.administrator:hover, .btn.segreteria:hover {
        background-color: var(--colore-administrator-hover);
        color: black;
    }

a.manager, .btn-link .manager {
    background-color: var(--colore-manager);
    color: black;
    border: none;
}

    a.manager:hover, .btn.manager:hover {
        background-color: var(--colore-manager-hover);
        color: black;
    }


a.segreteria, .btn-link .segreteria {
    background-color: var(--colore-segreteria);
    color: black;
    border: none;
}

    a.segreteria:hover, .btn.segreteria:hover {
        background-color: var(--colore-segreteria-hover);
        color: black;
    }

a.maestro, .btn-link .maestro {
    background-color: var(--colore-maestro);
    color: black;
    border: none;
}

    a.maestro:hover, .btn.maestro:hover {
        background-color: var(--colore-maestro-hover);
        color: black;
    }


a.scheduler, .btn-link .scheduler {
    background-color: var(--colore-scheduler);
    color: black;
    border: none;
}

    a.scheduler:hover, .btn.scheduler:hover {
        background-color: var(--colore-scheduler-hover);
        color: black;
    }

a.my-scheduler, .btn-link .my-scheduler {
    background-color: var(--colore-my-scheduler);
    color: black;
    border: none;
}

    a.my-scheduler:hover, .btn.my-scheduler:hover {
        background-color: var(--colore-my-scheduler-hover);
        color: black;
    }

a.prenotazioni, .btn-link .prenotazioni {
    background-color: var(--colore-prenotazioni);
    color: black;
    border: none;
}

    a.prenotazioni:hover, .btn.prenotazioni:hover {
        background-color: var(--colore-prenotazioni-hover);
        color: black;
    }



/* Scheduler*/



.e-schedule .e-timeline-view .e-resource-left-td {
    width: 90px;
    padding-left: 0px;
}


.e-schedule .e-recurrence-icon,
.e-schedule .e-recurrence-edit-icon {
    display: none !important;
}

.e-schedule .e-agenda-view .e-appointment.e-template {
    flex-direction: row !important;
}
/* Distanza di 1px tra elementi nella stessa cella - tutte le viste */
.e-schedule .e-appointment {
    margin-bottom: 1px !important;
    margin-top: 0 !important;
}

    .e-schedule .e-appointment:last-child {
        margin-bottom: 0 !important;
    }

/* Rimuovi padding extra dalle celle per ridurre spazio tra eventi */
.e-schedule:not(#MyScheduler) .e-work-cells .e-appointment-wrapper,
.e-schedule:not(#MyScheduler) .e-appointment-container {
    padding: 0 !important;
}

.e-schedule .e-timeline-view .e-appointment .e-subject,
.e-schedule .e-timeline-month-view .e-appointment .e-subject {
    font-size: 13px !important;
    font-weight: 400 !important;
}

.e-schedule .e-timeline-view .e-child-node, 
.e-schedule .e-timeline-month-view .e-child-node,
.timeline-resource-grouping.e-schedule .e-timeline-view .e-work-cells,
.timeline-resource_grouping.e-schedule .e-timeline-view .e-resource-cells {
    height: 40px;
    
}
.timeline-resource-grouping.e-schedule .e-timeline-view .e-date-header-wrap table col,
.timeline-resource-grouping.e-schedule .e-timeline-view .e-content-wrap table col {
    width: 70px;
}


/* Timeline View - Default appointment height 20px */
.e-schedule .e-timeline-view .e-appointment,
.e-schedule .e-timeline-month-view .e-appointment,
.timeline-resource-grouping.e-schedule .e-appointment {
    height: 20px !important;
}

.timeline-resource_grouping.e-schedule .e-month-header-wrap .e-day.e-title {
    height: 60px !important;
}

/* Timeline View - Opzione e Prenotazione height 100% occupano intera cella */
.e-schedule .e-timeline-view .e-appointment.opzione,
.e-schedule .e-timeline-view .e-appointment.prenotazione,
.e-schedule .e-timeline-month-view .e-appointment.opzione,
.e-schedule .e-timeline-month-view .e-appointment.prenotazione,
.timeline-resource-grouping.e-schedule .e-appointment.opzione,
.timeline-resource_grouping.e-schedule .e-appointment.prenotazione 

{
    height:  100% !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Rimuovi margini per opzione e prenotazione per occupare l'intera cella */
.e-schedule .e-timeline-view .e-appointment-wrapper .e-appointment.opzione,
.e-schedule .e-timeline-view .e-appointment-wrapper .e-appointment.prenotazione,
.e-schedule .e-timeline-month-view .e-appointment-wrapper .e-appointment.opzione,
.e-schedule .e-timeline-month-view .e-appointment-wrapper .e-appointment.prenotazione {
    margin: 0 !important;
}

/* Forza l'appointment wrapper a occupare l'intera altezza della cella per opzione/prenotazione */
.e-schedule .e-timeline-view .e-work-cells:has(.e-appointment.opzione) .e-appointment-wrapper,
.e-schedule .e-timeline-view .e-work-cells:has(.e-appointment.prenotazione) .e-appointment-wrapper,
.e-schedule .e-timeline-month-view .e-work-cells:has(.e-appointment.opzione) .e-appointment-wrapper,
.e-schedule .e-timeline-month-view .e-work-cells:has(.e-appointment.prenotazione) .e-appointment-wrapper {
    height: 100%;
    padding: 0 !important;
}

.e-schedule .e-timeline-view .e-appointment.memo, 
.e-schedule .e-timeline-month-view .e-appointment.memo, 
.timeline-resource-grouping.e-schedule .e-appointment.memo
{
    height: 20px !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
.schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col,
.schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col {
    width: 200px;
}

    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-date-header-wrap table col,
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col {
        width: 200px;
    }



/* MyScheduler: TUTTI gli eventi 50px */
#MyScheduler .e-agenda-view .e-appointment {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    line-height: normal !important;
}

    /* MyScheduler: Eventi corso selezionati - solo cambio colore sfondo */
    #MyScheduler .e-agenda-view .e-appointment:has(.corso.selected) {
        background: var(--colore-corsoselezionato) !important;
    }

    /* Fallback per browser che non supportano :has() */
    #MyScheduler .e-agenda-view .e-appointment .corso.selected,
    #MyScheduler .e-agenda-view .e-appointment > div.corso.selected {
        background: var(--colore-corsoselezionato) !important;
    }

.e-schedule .e-agenda-view .e-agenda-item {
    padding: 2px 0;
}

/* Timeline View - Colori */
.e-schedule .e-timeline-view .e-appointment.corso,
.e-schedule .e-timeline-month-view .e-appointment.corso,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.corso,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.corso,
.e-schedule .e-month-view .e-appointment.corso {
    background: var(--colore-corso);
}

.e-schedule .e-timeline-view .e-appointment.opzione,
.e-schedule .e-timeline-month-view .e-appointment.opzione,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.opzione,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.opzione,
.e-schedule .e-month-view .e-appointment.opzione {
    background: var(--colore-opzione);
}

.e-schedule .e-timeline-view .e-appointment.prenotazione,
.e-schedule .e-timeline-month-view .e-appointment.prenotazione,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.prenotazione,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.prenotazione,
.e-schedule .e-month-view .e-appointment.prenotazione {
    background: var(--colore-prenotazione);
}

.e-schedule .e-timeline-view .e-appointment.prova,
.e-schedule .e-timeline-month-view .e-appointment.prova,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.prova,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.prova,
.e-schedule .e-month-view .e-appointment.prova {
    background: var(--colore-prova);
}

.e-schedule .e-timeline-view .e-appointment.recupero,
.e-schedule .e-timeline-month-view .e-appointment.recupero,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.recupero,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.recupero,
.e-schedule .e-month-view .e-appointment.recupero {
    background: var(--colore-recupero);
}

.e-schedule .e-timeline-view .e-appointment.maestro,
.e-schedule .e-timeline-month-view .e-appointment.maestro,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.maestro,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.maestro,
.e-schedule .e-month-view .e-appointment.maestro {
    background: var(--colore-maestro);
}

.e-schedule .e-timeline-view .e-appointment.ospite,
.e-schedule .e-timeline-month-view .e-appointment.ospite,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.ospite,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.ospite,
.e-schedule .e-month-view .e-appointment.ospite {
    background: var(--colore-ospite);
}

.e-schedule .e-agenda-view .e-appointment.chiusura,
.e-schedule .e-timeline-view .e-appointment.chiusura,
.e-schedule .e-timeline-month-view .e-appointment.chiusura,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.chiusura,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.chiusura,
.e-schedule .e-month-view .e-appointment.chiusura {
    background: var(--colore-chiusura);
    color: white;
}

.e-schedule .e-agenda-view .e-appointment.chiusurafestiva,
.e-schedule .e-timeline-view .e-appointment.chiusurafestiva,
.e-schedule .e-timeline-month-view .e-appointment.chiusurafestiva,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.chiusurafestiva,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.chiusurafestiva,
.e-schedule .e-month-view .e-appointment.chiusurafestiva {
    background: var(--colore-chiusurafestiva);
    color: white;
}

.e-schedule .e-agenda-view .e-appointment.occupato,
.e-schedule .e-timeline-view .e-appointment.occupato,
.e-schedule .e-timeline-month-view .e-appointment.occupato,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.occupato,
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.occupato,
.e-schedule .e-month-view .e-appointment.occupato {
    background: var(--colore-occupato);
    color: #555;
    pointer-events: none;
    opacity: 0.7;
}

.e-schedule .e-agenda-view .e-appointment {
    border-left: 0px !important;
    width: 100% !important;
}

    /* Agenda View - Colori */
    .e-schedule .e-agenda-view .e-appointment.corso {
        border-left: 3px solid var(--colore-corso) !important;
        background: var(--colore-corso);
    }

    .e-schedule .e-agenda-view .e-appointment.opzione {
        border-left: 3px solid var(--colore-opzione) !important;
        background: var(--colore-opzione);
    }

    .e-schedule .e-agenda-view .e-appointment.prenotazione {
        border-left: 3px solid var(--colore-prenotazione) !important;
        background: var(--colore-prenotazione);
    }

    .e-schedule .e-agenda-view .e-appointment.prova {
        border-left: 3px solid var(--colore-prova) !important;
        background: var(--colore-prova);
    }

    .e-schedule .e-agenda-view .e-appointment.recupero {
        border-left: 3px solid var(--colore-recupero) !important;
        background: var(--colore-recupero);
    }

    .e-schedule .e-agenda-view .e-appointment.maestro {
        border-left: 3px solid var(--colore-maestro) !important;
        background: var(--colore-maestro);
    }

    .e-schedule .e-agenda-view .e-appointment.ospite {
        border-left: 3px solid var(--colore-ospite) !important;
        background: var(--colore-ospite);
    }


/* Padding minimo contenitore giorno in Agenda */
.e-schedule .e-agenda-view .e-day-date-header {
    padding: 2px !important;
}

.e-schedule .e-agenda-view .e-appointment,
.e-schedule .e-timeline-view .e-appointment {
    border-radius: 5px;
    color: black;
}

/* Stati */
.e-schedule .e-appointment.assente,
.e-schedule .e-appointment.chiuso,
.e-schedule .e-appointment.darecuperare {
    color: var(--colore-annullato) !important;
}

.e-schedule .e-appointment.recuperato {
    opacity: 0.5;
}

/* Selected states for corso and maestro - only background color change */
.e-schedule .e-appointment.corso.e-appointment-selected {
    background: var(--colore-corsoselezionato) !important;
}

.e-schedule .e-appointment.maestro.e-appointment-selected {
    background: var(--colore-maestroselezionato) !important;
}

/* Long press visual feedback for touch devices */
.e-schedule .e-appointment.long-press-active {
    transform: scale(0.95);
    opacity: 0.8;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

.content-wrapper.grid-to-schedule .schedule-container {
    display: flex;
    height: 900px;
}

    .content-wrapper.grid-to-schedule .schedule-container .grid-content {
        margin-left: 10px;
    }

.e-schedule.grid-schedule .e-timeline-view .e-resource-left-td,
.e-schedule.grid-schedule .e-timeline-month-view .e-resource-left-td {
    width: 120px;
}

.drag-grid.e-grid .e-cloneproperties.e-draganddrop {
    pointer-events: none;
}

.grid-schedule.e-schedule .e-timeline-view .e-date-header-wrap table col,
.grid-schedule.e-schedule .e-timeline-view .e-content-wrap table col {
    width: 100px;
}

/* ========================================
   RESPONSIVE STYLES - MYSCHEDULER TOOLBAR
   ======================================== */

/* Toolbar base styles */
.myscheduler-toolbar .e-toolbar-items {
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Mobile First - Extra Small devices (phones, less than 576px) */
@media screen and (max-width: 575.98px) {
    /* Scheduler height adjustment for mobile */
    #MyScheduler {
        height: calc(100vh - 200px) !important;
        min-height: 400px !important;
    }

    /* Toolbar wrapping and spacing */
    .myscheduler-toolbar .e-toolbar-items {
        padding: 0.5rem 0.25rem !important;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    /* Date picker and navigation buttons - more compact */
    .myscheduler-toolbar .date-picker-container {
        flex: 0 0 auto;
        display: flex;
        gap: 0.25rem !important;
    }

    /* Narrower date picker on mobile */
    .myscheduler-toolbar .e-datepicker {
        width: 100px !important;
        max-width: 100px !important;
    }

        .myscheduler-toolbar .e-datepicker .e-input-group {
            width: 100px !important;
        }

        .myscheduler-toolbar .e-datepicker input {
            font-size: 0.8rem !important;
            padding: 0.25rem 0.5rem !important;
        }

    /* Navigation buttons - more compact */
    .myscheduler-toolbar .btn-nav {
        padding: 0.25rem 0.4rem !important;
        font-size: 0.875rem !important;
        min-width: 30px;
    }

    /* Assente button - fills remaining space */
    .myscheduler-toolbar .btn-assente-container {
        flex: 0 0 auto;
        display: flex;
        justify-content: flex-end;
        margin-left: auto;
    }

    .myscheduler-toolbar .btn-assente {
        font-size: 0.8rem !important;
        padding: 0.375rem 0.75rem !important;
        white-space: nowrap;
    }

    /* Agenda view appointments - mobile optimization */
    #MyScheduler .e-agenda-view .e-appointment {
        height: auto !important;
        min-height: 60px !important;
        max-height: none !important;
        padding: 0.5rem !important;
    }

        #MyScheduler .e-agenda-view .e-appointment .fw-bold {
            font-size: 0.875rem !important;
        }

        #MyScheduler .e-agenda-view .e-appointment .small {
            font-size: 0.75rem !important;
        }

    /* Date header in agenda */
    .e-schedule .e-agenda-view .e-day-date-header {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Badge on button */
    .myscheduler-toolbar .badge {
        font-size: 0.65rem !important;
    }
}

/* Small devices (landscape phones, tablets, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
    #MyScheduler {
        height: calc(100vh - 180px) !important;
        min-height: 450px !important;
    }

    .myscheduler-toolbar .e-toolbar-items {
        padding: 0.5rem !important;
    }

    .myscheduler-toolbar .e-datepicker {
        max-width: 150px !important;
    }

    .myscheduler-toolbar .btn-nav {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.9rem !important;
    }

    .myscheduler-toolbar .btn-assente {
        font-size: 0.9rem !important;
    }

    #MyScheduler .e-agenda-view .e-appointment {
        height: auto !important;
        min-height: 55px !important;
        max-height: none !important;
    }

        #MyScheduler .e-agenda-view .e-appointment .fw-bold {
            font-size: 0.9rem !important;
        }
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    #MyScheduler {
        height: 600px !important;
    }

    .myscheduler-toolbar .e-toolbar-items {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .myscheduler-toolbar .lightbulb-time {
        font-size: 0.9rem !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    #MyScheduler {
        height: 650px !important;
    }

    .myscheduler-toolbar .e-toolbar-items {
        gap: 0.75rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    #MyScheduler {
        height: 650px !important;
    }

    .myscheduler-toolbar .e-toolbar-items {
        gap: 1rem;
    }
}

/* Grid to schedule responsive styles */
@media screen and (max-width: 768px) {
    .content-wrapper.grid-to-schedule .schedule-container {
        flex-direction: column;
        height: auto !important;
    }

        .content-wrapper.grid-to-schedule .schedule-container .grid-content {
            margin-top: 10px;
            margin-left: 0;
        }

    .drag-grid.e-grid {
        width: 100% !important;
    }

    .grid-content {
        padding-top: 20px;
    }
}



/* ========================================
   SCHEDULER MOBILE - FORCE ALL RESOURCES VISIBLE
   ======================================== */

/* Forza la visualizzazione di tutte le risorse su mobile invece della modalità compatta */
@media screen and (max-width: 768px) {
    /* Riduce la larghezza della colonna dei gruppi/risorse su schermi piccoli */
    .e-schedule .e-timeline-view .e-resource-left-td {
        width: 40px !important;
        min-width: 25px !important;
    }

    /* Abilita scroll orizzontale per vedere tutte le location */
    .e-schedule .e-timeline-view .e-content-wrap,
    .e-schedule .e-timeline-month-view .e-content-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Previeni il wrapping delle risorse */
    .e-schedule .e-timeline-view .e-resource-cells,
    .e-schedule .e-timeline-month-view .e-resource-cells {
        white-space: nowrap;
        min-width: auto !important;
    }

    /* Assicura che il contenitore dello scheduler permetta lo scroll */
    #Schedule {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Mantieni visibile la colonna delle risorse durante lo scroll */
    .e-schedule .e-timeline-view .e-left-indent-wrap,
    .e-schedule .e-timeline-month-view .e-left-indent-wrap {
        position: sticky;
        left: 0;
        z-index: 3;
        background: white;
    }
}

/* Ensure agenda items are readable on all screen sizes */
@media screen and (max-width: 991.98px) {
    .e-schedule .e-agenda-view .e-agenda-item {
        padding: 0.25rem 0;
    }

    .e-schedule .e-agenda-view .e-date-column {
        width: 70px !important;
        font-size: 0.875rem !important;
    }

    .e-schedule .e-agenda-view .e-time-column {
        width: 60px !important;
        font-size: 0.875rem !important;
    }
}