/* ==========================================================================
   MOBILE FIXES - Sito pubblico ASP Cosenza Tirocini (/sites)
   --------------------------------------------------------------------------
   Caricato DOPO bootstrap-italia.minb435.css per applicare override mirati
   sulle viste pubbliche: index.php, registrazione.php, join_tutor.php,
   esito_*.php, action.php (datatable), header_pubblic.php, footer.php.

   Approccio: conservativo, solo correzioni a problemi di rendering mobile.
   Non modifica il design su desktop.
   ========================================================================== */


/* ==========================================================================
   1. RESET E BASE GLOBALE
   ========================================================================== */

/* Previene scroll orizzontale causato da elementi a larghezza fissa */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Tutte le immagini diventano fluide */
img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   2. TAP TARGET (linee guida Apple/Google: minimo 44x44px)
   ========================================================================== */

@media (max-width: 767.98px) {

    .btn {
        min-height: 44px;
        padding: 0.55rem 1rem;
        line-height: 1.4;
    }

    .btn-sm {
        min-height: 38px;
    }

    .form-check {
        margin-bottom: 0.75rem;
    }

    .form-check-input {
        margin-top: 0.35rem;
        width: 1.15rem;
        height: 1.15rem;
    }
}


/* ==========================================================================
   3. INPUT E SELECT (form usabili al touch, no zoom su iOS)
   ========================================================================== */

@media (max-width: 767.98px) {

    .select-wrapper select,
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="password"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px;
        /* font-size 16px previene lo zoom automatico iOS Safari */
    }

    label {
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 0.25rem;
    }
}


/* ==========================================================================
   4. HEADER PUBBLICO (sites/template/header_pubblic.php)
   --------------------------------------------------------------------------
   Su mobile il brand H2 "Azienda Sanitaria Provinciale di Cosenza" è
   troppo grande, il logo non si scala bene e l'hamburger non è visibile.
   ========================================================================== */

@media (max-width: 991.98px) {

    .it-header-center-content-wrapper {
        padding: 0.5rem 0;
        flex-wrap: wrap;
    }

    .it-header-center-wrapper .it-brand-wrapper a img {
        max-height: 48px;
        width: auto;
    }

    .it-brand-text h2.no_toc {
        font-size: 1.05rem !important;
        line-height: 1.25;
        margin: 0;
    }

    .it-brand-text h3.no_toc {
        font-size: 0.85rem !important;
        margin: 0;
    }
}

@media (max-width: 575.98px) {

    .it-header-center-wrapper .it-brand-wrapper a img {
        max-height: 40px;
    }

    .it-brand-text {
        padding-left: 0.5rem !important;
    }

    .it-brand-text h2.no_toc {
        font-size: 0.92rem !important;
    }

    /* Header slim opener — meno aggressivo su schermi stretti */
    .it-header-slim-wrapper .nav-mobile {
        font-size: 0.85rem;
    }
}

/* Hamburger toggler più visibile e cliccabile */
.custom-navbar-toggler {
    background: transparent;
    border: 1px solid rgba(0, 102, 204, 0.4);
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}

.custom-navbar-toggler::before {
    content: "\f0c9";
    /* fa-bars */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #0066CC;
    font-size: 1.25rem;
}

/* Nasconde la svg vuota originale */
.custom-navbar-toggler .icon:empty,
.custom-navbar-toggler .icon use[*|href=""],
.custom-navbar-toggler svg.icon {
    display: none;
}


/* ==========================================================================
   5. HOMEPAGE / HERO (sites/index.php)
   --------------------------------------------------------------------------
   - Il <p> descrittivo era nascosto sotto lg (`d-none d-lg-block`)
   - L'H1 hero esce dalla card su iPhone in portrait
   - I due bottoni "Accedi" e "Registrati" stanno su una riga e si stringono
   ========================================================================== */

/* Mostra la descrizione dell'hero anche su tablet e mobile */
@media (max-width: 991.98px) {

    .it-hero-wrapper .it-hero-text-wrapper p.d-none.d-lg-block {
        display: block !important;
        font-size: 0.95rem;
        line-height: 1.5;
        margin-top: 0.5rem;
    }

    .it-hero-wrapper .it-hero-text-wrapper {
        padding: 1rem 1.25rem;
    }

    .it-hero-wrapper .it-hero-text-wrapper h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin: 0;
    }
}

@media (max-width: 575.98px) {

    .it-hero-wrapper .it-hero-text-wrapper h1 {
        font-size: 1.2rem;
    }

    .it-hero-wrapper .it-hero-text-wrapper p {
        font-size: 0.875rem;
        line-height: 1.45;
    }

    .it-hero-wrapper .img-responsive-wrapper {
        min-height: 180px;
    }

    .it-hero-wrapper.it-bottom-overlapping-content {
        margin-bottom: 1rem;
    }
}

/* Card "A chi è rivolta?": pulsanti in colonna su smartphone */
@media (max-width: 575.98px) {

    .card-wrapper .card-body .btn + .btn {
        margin-top: 0.5rem;
    }

    .card-wrapper .card-body .btn {
        display: block;
        width: 100%;
    }
}


/* ==========================================================================
   6. FORM REGISTRAZIONE TIROCINANTE / TUTOR
   --------------------------------------------------------------------------
   Problema critico: i blocchi "luogo di nascita / provincia / comune / CAP"
   hanno style="float: left;" inline, e il contenitore #nascita_row è
   col-md-9 senza fallback per breakpoint inferiori — su mobile gli elementi
   floattano e si sovrappongono.
   ========================================================================== */

@media (max-width: 767.98px) {

    /* Il contenitore #nascita_row prende l'intera larghezza */
    #nascita_row,
    #nascita_row.col-md-9 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
    }

    /* Override DEGLI style="float:left" inline dei figli interni */
    #nascita_row > [style*="float"],
    .form-group[style*="float: left"],
    .form-group[style*="float:left"],
    .select-wrapper[style*="float: left"],
    .select-wrapper[style*="float:left"] {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        margin-bottom: 1rem;
    }

    /* Stessa correzione per #residenza_row eventuale (riusato da join_tutor) */
    #residenza_row,
    #residenza_row.col-md-9,
    [id$="_row"][class*="col-md-9"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    /* La data di nascita affiancata al CF deve stare sotto */
    .row > .form-group.col-md-4,
    .row > .form-group.col-md-6 {
        margin-bottom: 1rem;
    }
}

/* Card del form più compatta su smartphone */
@media (max-width: 575.98px) {

    .card-wrapper .card .card-body {
        padding: 1rem 0.75rem;
    }

    .card-wrapper .card .card-header {
        padding: 0.75rem;
    }

    .card-wrapper .card .card-header h5.card-title {
        font-size: 1rem;
        margin: 0;
    }

    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Pulsante "Aggiungi titolo di studio": full-width per leggibilità */
@media (max-width: 575.98px) {

    .d-flex.justify-content-end .btn-form {
        width: 100%;
    }

    .d-flex.justify-content-end {
        justify-content: stretch !important;
    }
}

/* Pulsanti di conferma/annulla nel card-footer: stack su mobile */
@media (max-width: 575.98px) {

    .card-footer .text-center .btn-form,
    .card-footer .text-center .btn {
        display: block;
        width: 100%;
        margin: 0 0 0.5rem 0;
    }

    .card-footer .text-center .btn:last-child {
        margin-bottom: 0;
    }

    .card-footer {
        padding: 0.75rem;
    }
}


/* ==========================================================================
   7. ALERT E MESSAGGI (errori del form, esito)
   ========================================================================== */

@media (max-width: 575.98px) {

    .alert {
        padding: 0.75rem;
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .alert .btn-close {
        padding: 0.6rem;
    }
}


/* ==========================================================================
   8. PAGINE ESITO (esito_registrazione.php, esito_join_tutor.php, esito_tutor.php)
   ========================================================================== */

@media (max-width: 575.98px) {

    .container-fluid.my-5 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .card-title svg.icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .card-title.text-center {
        font-size: 1.05rem;
    }
}


/* ==========================================================================
   9. DATATABLES (action.php — vista admin pubblico)
   ========================================================================== */

@media (max-width: 767.98px) {

    table.dataTable {
        font-size: 0.85rem !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_filter input,
    .dataTables_wrapper .dataTables_length select {
        min-height: 38px;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        text-align: left;
        margin-bottom: 0.5rem;
    }

    /* Permette scroll orizzontale solo sulla tabella, non sulla pagina */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================================
   10. FOOTER (sites/template/footer.php)
   ========================================================================== */

@media (max-width: 575.98px) {

    .it-footer-main {
        padding: 1.5rem 0;
    }

    .it-footer-main .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .it-footer-main .it-brand-text h2 {
        font-size: 1rem;
    }

    .it-footer-main .it-brand-text h3 {
        font-size: 0.875rem;
    }

    .it-footer-main .it-brand-wrapper a img {
        max-height: 40px;
    }

    .it-footer-main .row .col-sm-8,
    .it-footer-main .row .col-sm-4 {
        margin-bottom: 1rem;
    }

    .it-footer-main h4 {
        font-size: 1rem;
    }

    .it-footer-main p {
        font-size: 0.875rem;
    }
}


/* ==========================================================================
   11. PULIZIA SPAZIATURE ECCESSIVE
   ========================================================================== */

@media (max-width: 575.98px) {

    /* Doppi <br> generati da PHP riducono il rumore */
    br + br {
        display: none;
    }

    /* Container nidificati su mobile non hanno bisogno di doppio padding */
    .container-fluid > .container {
        padding-left: 0;
        padding-right: 0;
    }
}


/* ==========================================================================
   12. CORREZIONI SELECT2 (caricato globalmente da head.php)
   ========================================================================== */

@media (max-width: 767.98px) {

    .select2-container .select2-selection--single {
        min-height: 44px;
        height: auto !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 42px;
        font-size: 16px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 42px;
    }

    .select2-dropdown {
        font-size: 16px;
    }
}


/* ==========================================================================
   13. CORREZIONI SPECIFICHE BLOCCO TITOLI DI STUDIO (registrazione.php)
   --------------------------------------------------------------------------
   I blocchi `.campiAggiuntivi` e i form ripetuti hanno larghezze fisse
   col-2 / col-5 / col-6 che su mobile sono inutilizzabili.
   ========================================================================== */

@media (max-width: 575.98px) {

    .campiAggiuntivi.col-5,
    .campiAggiuntivi.col-2 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0.75rem;
    }

    .remove-btn {
        width: 100%;
    }
}


/* ==========================================================================
   14. SAFE-AREA iPhone (notch / dynamic island)
   ========================================================================== */

@supports (padding: max(0px)) {

    .it-header-wrapper,
    .it-footer-main {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}