body {
    background-color: #f0f2f5;
}

.hidden {
    display: none;
}

/* Stile per le directory nella lista file */
#file-list .list-group-item.directory {
    font-weight: bold;
    color: #0d6efd; /* Colore primario di Bootstrap */
}

/* Stile per la label cliccabile nelle directory */
#file-list .list-group-item.directory .form-check-label {
    cursor: pointer;
}

#file-list .list-group-item.directory .form-check-label:hover {
    text-decoration: underline;
}

/* Layout a due colonne per la lista file (usa CSS Grid) */
@media (min-width: 768px) {
    #file-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Colori pallidi per i pulsanti di azione */
#file-input {
    background-color: #e7f3ff; /* Azzurro pallido */
}

#create-dir-btn {
    background-color: #e9f7ef; /* Verde pallido */
}

#app-wrapper {
    transition: max-width 0.5s ease-in-out, flex-basis 0.5s ease-in-out;
}

/* Stili per rendere più evidente il percorso corrente */
#current-path-display {
    background-color: #e9ecef; /* Grigio chiaro di Bootstrap */
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #343a40; /* Grigio scuro */
}

/* Imposta il colore rosso per l'icona della casa */
#home-btn i {
    color: #dc3545; /* Rosso "danger" di Bootstrap */
    transition: color 0.2s ease-in-out; /* Aggiunge una transizione fluida */
}

/* Scurisce leggermente l'icona quando il mouse è sopra */
#home-btn:hover i {
    color: #b02a37; 
}

/* --- SEZIONE STILI PER LA VISUALIZZAZIONE MOBILE --- */

/* Applica queste regole solo su schermi più piccoli di 768px */
@media (max-width: 767px) {
    /* Seleziona la barra dei controlli */
    .d-block.d-md-flex {
        flex-direction: column; /* Impila gli elementi verticalmente */
        align-items: stretch;   /* Fa in modo che gli elementi occupino tutta la larghezza */
    }

    /* Allinea il testo del percorso a sinistra */
    #current-path-display {
        display: block; /* <-- LA CORREZIONE CHIAVE: Allarga l'elemento */
        text-align: left; /* Ora questa regola funzionerà */
        margin-bottom: 0.75rem; /* 12px di spazio */
    }

    /* Seleziona il contenitore dei pulsanti */
    .text-md-end {
        display: flex;          /* Lo rende un contenitore flessibile */
        flex-wrap: wrap;        /* Permette ai pulsanti di andare a capo se non c'è spazio */
        justify-content: flex-end; /* Allinea i pulsanti a destra */
        gap: 0.5rem;            /* Aggiunge spazio uniforme (8px) tra e sotto i pulsanti */
    }

    /* Rimuove il margine sinistro (ms-1) che non serve più grazie a 'gap' */
    .text-md-end .ms-1 {
        margin-left: 0 !important;
    }
}