@import url("green-light.css");

body, html { margin: 0; padding: 0; height: 100%; font-family: 'Roboto', sans-serif; background-color: #f8f9fa; }
        .app-container { display: flex; flex-direction: column; min-height: 100vh; }
        .app-header { background-color: var(--md-sys-color-primary-container, #eaddff); color: var(--md-sys-color-on-primary-container, #1c1b1f); padding: 12px 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: flex; align-items: center; }
        .app-header h1 { margin: 0; font-size: 1.5em; }
        .main-content-wrapper { display: flex; flex-grow: 1; padding: 24px; gap: 24px; }
        .sidebar-left { width: 320px; flex-shrink: 0; background-color: var(--md-sys-color-surface-container-low, #f3edf7); padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .sidebar-left h2 { margin-top: 0; color: var(--md-sys-color-on-surface-variant, #49454f); }
        .content-right { flex-grow: 1; background-color: var(--md-sys-color-surface, #fef7ff); padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
        .content-right h2 { margin-top: 0; color: var(--md-sys-color-on-surface, #1c1b1f); }
        .tts-form md-filled-select,
        .tts-form md-filled-text-field,
        .tts-form md-checkbox,
        .tts-form md-slider { display: block; width: 100%; margin-bottom: 24px; }
        .tts-form .button-container { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-start; }
        .tts-form .message-container, .tts-form .debug-output, .tts-form .audio-player-container { margin-top: 24px; padding: 16px; border-radius: 8px; }
        .tts-form .audio-player-container { background-color: var(--md-sys-color-surface-variant, #e7e0ec); }
        .tts-form .message-container.error { background-color: var(--md-sys-color-error-container, #f9dedc); color: var(--md-sys-color-on-error-container, #410e0b); }
        .tts-form .message-container.success { background-color: var(--md-sys-color-tertiary-container, #d0e6a5); color: var(--md-sys-color-on-tertiary-container, #1a1c18); }
        .tts-form .debug-output pre { background-color: #eee; padding: 10px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; }
        .app-footer { background-color: var(--md-sys-color-surface-variant, #e7e0ec); color: var(--md-sys-color-on-surface-variant, #49454f); padding: 16px 24px; text-align: center; font-size: 0.9em; }


.login-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh;
        }
        .login-card {
            width: 100%;
            max-width: 400px;
            padding: 32px;
            border-radius: 12px;
            background-color: var(--md-sys-color-surface, #fef7ff);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .login-card h1 {
            text-align: center;
            margin-top: 0;
            margin-bottom: 24px;
        }
        .login-card md-filled-text-field {
            width: 100%;
            margin-bottom: 20px;
        }
        .login-card .button-container {
            margin-top: 24px;
            display: flex;
            justify-content: flex-end;
        }
        .login-card .error-message {
            color: var(--md-sys-color-error, #b3261e);
            margin-bottom: 16px;
            text-align: center;
        }
        
#feedback-snackbar.snackbar-success {
    --md-snackbar-container-color: #2e7d32; /* Verde scuro Material */
    --md-sys-color-inverse-on-surface: #ffffff; /* Testo bianco */
}

#feedback-snackbar.snackbar-error,
#feedback-snackbar.snackbar-warning { /* Applichiamo lo stesso stile a warning ed error */
    --md-snackbar-container-color: #d32f2f; /* Rosso scuro Material */
    --md-sys-color-inverse-on-surface: #ffffff; /* Testo bianco */
}

#feedback-snackbar.snackbar-info {
    --md-snackbar-container-color: #0288d1; /* Blu scuro Material */
    --md-sys-color-inverse-on-surface: #ffffff; /* Testo bianco */
}

/*
 * Stili per la sidebar dei testi salvati
 * per aggiungere una barra di scorrimento verticale.
*/

.saved-texts-list {
    /* Imposta un'altezza massima per la lista. */
    max-height: 70vh;
    /* Aggiunge la barra di scorrimento verticale SOLO quando serve. */
    overflow-y: auto;
    /* Aggiunge un po' di spazio a destra per non far appiccicare la scrollbar alle card. */
    padding-right: 8px; 
}

/* Rende evidente che le card sono cliccabili */
.saved-text-card {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    border: 1px solid var(--md-sys-color-outline-variant); /* Bordo di default */
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px; /* Aggiunge un po' di spazio tra le card */
}

/* Stile per la card al passaggio del mouse (hover) */
.saved-text-card:hover {
    /* MODIFICA: Usiamo un colore di sfondo più diretto e supportato
       per garantire che l'effetto hover sia sempre visibile. */
    background-color: var(--md-sys-color-surface-container-high);
}

/* Stile per la card selezionata (attiva) */
.saved-text-card.active {
    border-color: var(--md-sys-color-primary);
    /* MODIFICA: Usiamo i token Material per uno stile più pulito e coerente */
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}


/* Stili per il footer delle card dei testi salvati */
.card-footer {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Spazio tra la riga della data e la riga dei tag */
    margin-top: 8px;
    font-size: 0.8em;
    color: var(--md-sys-color-on-surface-variant);
}

.card-footer-line {
    display: flex;
    justify-content: space-between; /* Allinea gli elementi ai lati */
    align-items: center;
    width: 100%;
}

/* Stili per i tag (autore, pubblico, gruppo) */
.author-tag {
    font-style: italic;
}

.visibility-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9em;
}

.visibility-tag.public {
    background-color: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}

.visibility-tag.group {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/*
 * Stili per il sistema di cartelle nella sidebar
 */

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-right: 8px; /* Allinea i pulsanti con la lista sottostante */
}

.sidebar-header h2 {
    margin: 0;
}

.sidebar-header div {
    display: flex;
}

.saved-items-list {
    max-height: 75vh; /* Puoi aggiustare l'altezza */
    overflow-y: auto;
    padding-right: 8px;
}

.folder-item {
    margin-bottom: 8px;
}

.folder-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--md-sys-color-surface-container);
    transition: background-color 0.2s ease-in-out;
}

.folder-header:hover {
    background-color: var(--md-sys-color-surface-container-high);
}

.folder-header .folder-icon {
    transition: transform 0.2s ease-in-out;
}

.folder-item.collapsed .folder-header .folder-icon {
    transform: rotate(-90deg);
}

.folder-content {
    padding-left: 20px; /* Crea il rientro per i contenuti */
    border-left: 1px solid var(--md-sys-color-outline-variant);
    margin-left: 12px; /* Allinea la linea con l'icona */
    padding-top: 8px;
    overflow: hidden;
    max-height: 1000px; /* Un valore alto per l'animazione */
    transition: max-height 0.3s ease-in-out, padding-top 0.3s ease-in-out;
}

/* Stato collassato (chiuso) */
.folder-item.collapsed .folder-content {
    max-height: 0;
    padding-top: 0;
    border-left-color: transparent;
}