/* ==========================================================
   SPS MODERN 2027
   MODALS.CSS

   Restyling conservativo dei modali Bootstrap 3
   Compatibile con OpenSTAManager
   ========================================================== */


/* ==========================================================
   01. CONTENITORE MODALE
   ========================================================== */

.modal .modal-content {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 11px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.20),
        0 3px 10px rgba(0, 0, 0, 0.08);

    background-clip: padding-box;
}

/* Non modifichiamo le dimensioni dei modali */
.modal .modal-dialog {
    transform: none;
}


/* ==========================================================
   02. INTESTAZIONE
   ========================================================== */

.modal .modal-header {
    border-radius: 10px 10px 0 0;

    padding: 15px 18px;

    /* Manteniamo il colore originale */
}

/* Titolo */
.modal .modal-title {
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* Icona nel titolo */
.modal .modal-title .fa {
    margin-right: 4px;
}


/* ==========================================================
   03. PULSANTE DI CHIUSURA
   ========================================================== */

.modal .modal-header .close {
    opacity: 0.65;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

/* Hover */
.modal .modal-header .close:hover {
    opacity: 1;
    transform: scale(1.08);
}

/* Focus */
.modal .modal-header .close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
}


/* ==========================================================
   04. CORPO MODALE
   ========================================================== */

.modal .modal-body {
    /* Manteniamo i padding originali di OSM */
    background-color: transparent;
}

/* Label dei campi */
.modal .control-label,
.modal label {
    font-weight: 600;
}

/* Input */
.modal .form-control {
    border-radius: 7px;
}

/* Focus */
.modal .form-control:focus {
    box-shadow: 0 0 0 2px rgba(85, 145, 195, 0.12);
}


/* ==========================================================
   05. SELECT2 NEI MODALI
   ========================================================== */

.modal .select2-container--default
.select2-selection--single,
.modal .select2-container--default
.select2-selection--multiple {
    border-radius: 7px;
}

/* Evita modifiche alla posizione dei dropdown */
.modal .select2-container {
    max-width: 100%;
}


/* ==========================================================
   06. FOOTER
   ========================================================== */

.modal .modal-footer {
    border-radius: 0 0 10px 10px;
    border-top-color: #edf0f4;
}

/* Pulsanti nel footer */
.modal .modal-footer .btn {
    border-radius: 7px;
}

/* Hover */
.modal .modal-footer .btn:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.10);
}


/* ==========================================================
   07. MODALI CON FORM A PIU' STEP
   ========================================================== */

/*
   Non alteriamo:
   - display
   - position
   - overflow
   - z-index
   - larghezze
   - altezza
   - gestione dello scroll

   Questo mantiene compatibilita' con:
   accettazioni, dismissioni e altri wizard.
*/


/* ==========================================================
   08. SCHERMI PICCOLI
   ========================================================== */

@media (max-width: 767px) {

    .modal .modal-content {
        border-radius: 9px;
    }

    .modal .modal-header {
        border-radius: 8px 8px 0 0;
    }

    .modal .modal-footer {
        border-radius: 0 0 8px 8px;
    }
}


/* ==========================================================
   FINE MODALS.CSS
   ========================================================== */