[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 (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;
}



/* 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;
}