/* Stili per il modulo di richiesta */

/* Stili generali */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

/* Stili per le sezioni - Migliorato il contrasto cromatico */
.section-separator {
    position: relative;
    margin: 1.5rem 0;
    padding: 0.7rem 0;
    text-align: center;
    font-weight: bold;
    color: #000;
    border-radius: 4px;
    text-transform: uppercase;
}

.section-orange {
    background: #E86000; /* Colore uniforme più scuro per un migliore contrasto */
    color: #fff; /* Testo bianco per migliore leggibilità */
}

.section-yellow {
    background: #CC9900; /* Colore uniforme più scuro per un migliore contrasto */
    color: #000; /* Mantiene il testo nero con contrasto migliorato */
}

.section-blue {
    background: #005A9E; /* Colore uniforme più scuro per un migliore contrasto */
    color: #fff; /* Testo bianco per migliore leggibilità */
}

/* Stili per i campi */
.form-label {
    font-weight: 600;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
}

/* Indicatore per campi obbligatori */
.required-field::after {
    content: "*";
    color: #d32f2f;
    margin-left: 4px;
    font-weight: bold;
}

.form-legend {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    color: #555;
}

    .form-legend .required-indicator {
        color: #d32f2f;
        font-weight: bold;
    }

input.form-control, select.form-control, .form-select {
    height: calc(2.5rem + 2px);
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

textarea.form-control {
    min-height: 100px;
    height: auto;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    /* Migliorato lo stile di focus per tutti gli elementi interattivi */
    .form-control:focus,
    .form-select:focus,
    button:focus,
    a:focus,
    input:focus {
        outline: 3px solid #0078D7;
        outline-offset: 2px;
        border-color: #0078D7;
        box-shadow: 0 0 0 0.2rem rgba(0, 120, 215, 0.25);
    }

    .form-control.is-invalid, .form-select.is-invalid {
        border-color: #dc3545;
    }

    .form-control.is-valid, .form-select.is-valid {
        border-color: #28a745;
    }

/* Migliorato il contrasto per i messaggi di errore */
.text-danger {
    color: #d32f2f !important;
    font-weight: 500;
}

/* Stile per il logo */
.logo-container {
    border: none !important;
    position: relative;
    height: 150px;
    width: 200px;
    border: 1px solid #666666; /* Bordo più scuro per miglior contrasto */
    margin-bottom: 1rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .logo-container img {
        max-height: 150px;
        max-width: 200px;
    }

.logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0; /* Sfondo più chiaro per miglior contrasto */
}

.logo-icon {
    font-size: 2.5rem;
    color: #444; /* Colore più scuro per miglior contrasto */
}

.logo-text {
    font-size: 0.8rem;
    color: #444; /* Colore più scuro per miglior contrasto */
    text-align: center;
    margin-top: 0.5rem;
}

/* Stili per i file input */
.file-input-container {
    margin-bottom: 1rem;
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.file-name {
    font-size: 0.9rem;
    color: #444; /* Colore più scuro per miglior contrasto */
}

.custom-file-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Contenitore del testo di aiuto per file input */
.file-help-container {
    margin-top: 10px;
    padding-left: 5px;
}

/* Prima riga di testo */
.file-help-main {
    display: block;
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 4px;
}

/* Seconda riga di testo (dimensione) */
.file-help-size {
    display: block;
    font-size: 0.875rem;
    color: #555;
}

.file-help-text {
    font-size: 0.875rem; /* Stessa dimensione di .form-text */
    color: #6c757d;      /* Colore grigio come .text-muted */
    margin-top: 0.25rem; /* Piccolo spazio sopra il testo */
}

.file-help-container {
    margin-top: 0.25rem;
}

/* Counter caratteri descrizione */
.char-counter {
    text-align: right;
    font-size: 0.8rem;
    color: #555; /* Colore più scuro per miglior contrasto */
    margin-top: 0.25rem;
}

    .char-counter.warning {
        color: #d32f2f; /* Rosso più scuro per miglior contrasto */
    }

/* Bottone di invio */
.submit-button {
    background-color: #2E7D32; /* Verde più scuro per miglior contrasto */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.75rem 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s;
}

    .submit-button:hover {
        background-color: #1B5E20;
    }

    .submit-button:focus {
        outline: 3px solid #0078D7;
        outline-offset: 2px;
    }

    .submit-button:disabled {
        background-color: #81C784;
        cursor: not-allowed;
    }

/* Toast notifications */
.toast {
    background-color: #2E7D32; /* Verde più scuro per miglior contrasto */
    color: white;
}

    .toast.error {
        background-color: #C62828; /* Rosso più scuro per miglior contrasto */
    }

.toast-header {
    background-color: rgba(0, 0, 0, 0.2); /* Maggiore opacità per miglior contrasto */
    color: inherit;
}

/* Captcha */
.captcha-container {
    margin-bottom: 1.5rem;
}

.captcha-image {
    border: 1px solid #666666; /* Bordo più scuro per miglior contrasto */
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}

.captcha-refresh {
    cursor: pointer;
    color: #0056B3; /* Blu più scuro per miglior contrasto */
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.captcha-input {
    margin-top: 0.5rem;
}

/* Stili per accessibilità CAPTCHA */
.captcha-alternatives {
    margin-top: 0.5rem;
}

.audio-captcha-button {
    background-color: #0056B3;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.7rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Styling dell'autocomplete */
.ui-autocomplete {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #bbb; /* Bordo più scuro per miglior contrasto */
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background-color: #fff;
    z-index: 1000;
}

    .ui-autocomplete .ui-menu-item {
        padding: 8px 10px;
        font-size: 14px;
        border-bottom: 1px solid #ddd;
    }

        .ui-autocomplete .ui-menu-item:last-child {
            border-bottom: none;
        }

        .ui-autocomplete .ui-state-active,
        .ui-autocomplete .ui-menu-item:hover {
            background-color: #0056B3; /* Blu più scuro per miglior contrasto */
            border-color: #0056B3;
            color: #ffffff; /* Testo bianco per miglior leggibilità */
        }

/* Stile per i campi di sola lettura */
input[readonly].form-control {
    background-color: #e9e9e9; /* Sfondo più scuro per miglior contrasto */
    cursor: not-allowed;
}

/* Stile per il campo comune con autocompletamento */
.comune-autocomplete {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
}

/* Stili per elementi accessibilità aggiuntivi */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Validazione accessibile */
.validation-feedback {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* Adattamenti per schermi piccoli */
@media (max-width: 768px) {
    .container {
        padding: 0 10px;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-control, .form-select {
        height: calc(2.25rem + 2px);
    }

    .submit-button {
        width: 100%;
        justify-content: center;
    }
}

/* Skip link per navigazione da tastiera */
.skip-link {
    background: #0056B3;
    color: white;
    font-weight: bold;
    left: 50%;
    padding: 8px;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
    z-index: 100;
    /* Nascosto ma accessibile alla tastiera */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    text-decoration: none;
}

    .skip-link:focus {
        /* Reso visibile quando ha il focus */
        position: fixed;
        top: 0;
        left: 0;
        width: auto;
        height: auto;
        margin: 10px;
        padding: 10px 15px;
        overflow: visible;
        clip: auto;
        white-space: normal;
        transform: translateY(0);
        background-color: #0056B3;
        color: white;
        text-decoration: none;
        font-weight: bold;
        border: 2px solid #fff;
        box-shadow: 0 0 5px rgba(0,0,0,0.5);
        z-index: 9999;
        border-radius: 4px;
        outline: none;
    }


/* Stili per alert errore plafond */
.plafond-error-alert {
    border-left: 4px solid #C62828;
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border-color: #C62828;
    box-shadow: 0 2px 8px rgba(198, 40, 40, 0.15);
}

.plafond-error-title {
    color: #C62828;
    font-weight: 600;
    font-size: 1rem;
}

.plafond-error-message {
    color: #d32f2f;
    font-weight: 500;
    line-height: 1.4;
}

.plafond-error-help {
    color: #666;
    font-style: italic;
}

.plafond-error-icon {
    color: #C62828;
    font-size: 1.5rem;
    animation: plafondPulse 2s ease-in-out infinite;
}

@keyframes plafondPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .plafond-error-alert .d-flex {
        flex-direction: column;
    }

    .plafond-error-alert .flex-shrink-0 {
        margin-bottom: 0.5rem;
        margin-right: 0;
        text-align: center;
    }
}