[v-cloak], .hidden { display: none; }

body {
    /* Spazio per la navbar fissa e sfondo */
    padding-top: 100px!important; 
    background-color: #f8f9fa;
}
/* Breakpoint XXXL (> 1600px) */
@media (min-width: 1600px) {
    .container {
        max-width: 1560px;
    }
}
/* H1 nell'header (logo PAI) */
header h1 {
    margin-bottom: 0;
    line-height: 1;
}

header .navbar {
    background: #154A4E;
}

header .logo {
    height: 70px; 
    padding: 0;
}

header .title {
    font-size: 1.3em!important;
}
header .subtitle {
    font-weight: 400!important;
}

/* --- LOADER --- */
.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: #f8f9fa;;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay-content img {
    max-width: 100px;
}
/* --- END LOADER --- */

/* --- STEPPER VERTICALE--- */
.stepper-list .list-group-item {
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
}
/* Lo step attivo usa lo stile primario di Bootstrap per evidenziarlo */
.stepper-list .list-group-item.active {
    background-color: var(--bs-primary);
    color: white;
    font-weight: bold;
    border-radius: var(--bs-border-radius);
}
/* Colore dell'icona nello step attivo */
.stepper-list .list-group-item.active .bi {
    color: white !important; 
}
/* Lo step completato ha il check verde */
.stepper-list .list-group-item.completed {
    background-color: #e9ecef;
    color: #495057;
}
.stepper-list .list-group-item.completed .bi {
    color: var(--bs-success) !important;
}

.stepper-list .bi {
    min-width: 20px;
}
/* --- END STEPPER VERTICALE --- */


/* --- STEPPER ORIZZONTALE MOBILE (Corretto per Specificità) --- */
@media (max-width: 768px) {
    
    /* Trasforma l'elenco da verticale a orizzontale */
    #procedura-stepper .stepper-list { /* Aggiunto #procedura-stepper per specificità */
        display: flex; 
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0; 
        border: none;
        border-radius: 0;
    }

    /* Rende gli elementi della lista orizzontali */
    #procedura-stepper .stepper-list .list-group-item { /* Aggiunto #procedura-stepper per specificità */
        flex: 0 0 auto; 
        justify-content: center; 
        align-items: center;
        text-align: center;
        border: 1px solid rgba(0, 0, 0, .125); 
        border-top: none;
        border-bottom: none;
        width: auto; 
        padding: 0.5rem 1rem;
        border-radius: 0;
    }
    
    /* 1. NASCONDI TUTTI GLI ELEMENTI DI DEFAULT SU MOBILE (SPECIFICITÀ AUMENTATA) */
    #procedura-stepper .stepper-list .list-group-item {
        display: none !important; 
    }
    
    /* 2. MOSTRA SOLO L'ELEMENTO ATTIVO, IL PRECEDENTE E IL SUCCESSIVO (SPECIFICITÀ AUMENTATA) */
    #procedura-stepper .stepper-list .list-group-item.active,
    #procedura-stepper .stepper-list .list-group-item.prev-step, 
    #procedura-stepper .stepper-list .list-group-item.next-step { 
        display: flex !important; /* Deve essere 'flex' per sovrascrivere il 'd-flex' nascosto */
    }
    
    /* Adattiamo l'icona affinché stia bene in orizzontale */
    #procedura-stepper .stepper-list .list-group-item .bi {
        margin-right: 0.5rem !important; 
    }
    
    /* Assicurati che lo stato attivo sia sempre visibile come un blocco solido */
    #procedura-stepper .stepper-list .list-group-item.active {
        background-color: var(--bs-primary);
        color: white;
        font-weight: bold;
        border-radius: 0; 
    }
}
/* --- END STEPPER ORIZZONTALE MOBILE --- */


/* ACCORDION GENERICO */

.accordion-button {
    background-color: #f8f9fa !important; 
    color: #212529 !important; 
}
.accordion-button:not(.collapsed) {
    background-color: #e9ecef !important; 
    box-shadow: none !important;
}
.accordion-button:not(.collapsed)::after {
    filter: none !important; 
}


/* --- ACCORDION SWITCH --- */

/* L'h2 deve occupare lo spazio necessario per il bottone */
.accordion-header {
    flex-grow: 1; 
    margin-bottom: 0;  
}

.accordion-item > .d-flex {
    background-color: #f8f9fa; /* Colore che corrisponde all'accordion-button compresso */
}

/* Rimuovi la freccia predefinita dello switch (l'accordion-button ne ha già una) */
.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto; /* Spinge la freccia a destra */
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform 0.2s ease-in-out;
}
/* Aggiungo lo switch come icona per differenziare il controllo principale */
.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

/* Colora solo il D-FLEX espanso */
.accordion-item:has(.accordion-button:not(.collapsed)) > .d-flex { 
    background-color: #E9ECEF; 
}

/* Rimuove lo sfondo da QUALSIASI .d-flex che si trova nel corpo dell'accordion */
.accordion-item .accordion-body .d-flex {
    background-color: initial !important;
}

/* --- END ACCORDION SWITCH --- */


/* REMOVE SHADOW */
.accordion-button.collapsed {
    box-shadow: none !important; 
    border-color: transparent !important;
}
.accordion-button:not(.collapsed),
.accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}
.accordion-button:hover {
    box-shadow: none !important;
}



/* MODALE */
.modal-header {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.modal-header.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}



/* FULL CALENDAR */
.fc-col-header-cell-cushion,
.fc-list-day-side-text,
.fc-list-day-text,
.fc-event {
    color: #000;
}
.fc-event-main,
.fc-list-event-title,
.fc-daygrid-event-harness {
    cursor: pointer;
}

.fc-list-event:hover,
.fc-list-event:hover tr,
.fc-list-event:hover td {
    color: #000!important;
    background: #FFF!important;
}

/* focus da tastiera sull'accordion */
.accordion-button:focus-visible { box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; }


/* textarea ridimensionabile */
textarea.form-control {
    resize: vertical; 
    min-height: 100px;
    max-height: 600px; 
}

.auto-expand {
    transition: height 0.3s ease-in-out;
}

.auto-expand:focus {
    height: 250px; /* Circa 10-12 righe di testo */
}

.multiselect__option--disabled {
    color: #000!important;
}
.input-group-text {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-check-input {
    cursor: pointer;
}




/* angolino tagliato del calendario e colori dei vari stati */
 
.diary-event-planned {
  background-color: #0061AD !important; 
  border-color: #0061AD !important;
  color: #ffffff !important; 
}

.diary-event-on-need {
  background-color: #A104CC !important; 
  border-color: #A104CC !important;
  color: #ffffff !important;
}

.diary-event-executed {
  background-color: #E8E8E8 !important; 
  border-color: #333333 !important;
  color: #000000 !important;
}

.diary-event-executed .fc-event-main,
.diary-event-executed .fc-event-time,
.diary-event-executed .fc-event-title {
  color: #000000 !important;
}


.fc-timegrid-event.diary-event-executed {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%) !important;
}

.fc-timegrid-event.diary-event-executed::before {
  content: ""; 
  position: absolute;
  top: 0;
  left: calc(100% - 20px); 
  width: 29px; /* Misura esatta della diagonale */
  border-top: 2px dashed black; /* Stile del tratteggio */
  transform-origin: top left; 
  transform: rotate(45deg); 
  z-index: 10; 
  pointer-events: none; 
}

.sticky-saving {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #ddd;
    z-index:30!important;
}

main.container {
    margin-bottom: 10em;
}