/* StudiHub - Mobile-First UX/UI Best Practices & Optimization */

/* 1. Prevenzione Zoom Automatico su iOS / Safari (WCAG & Mobile Usability) */
@media (max-width: 767.98px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important; /* Evita lo zoom forzato al focus su iOS */
    }

    /* Padding ed altezze ottimizzate per il tocco delle dita (Touch Target >= 44px) */
    .btn,
    .form-control,
    .form-select,
    .input-group-text {
        min-height: 46px;
        font-size: 1rem;
    }

    /* Container Spacing per schermi piccoli */
    .container, .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Adattamento Card per Mobile */
    .card {
        border-radius: 14px !important;
    }

    .card-body {
        padding: 1.25rem !important;
    }
}

/* 2. Touch Target per Checkbox e Radio Buttons */
.form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-left: 2rem;
}

.form-check-input {
    width: 1.35rem;
    height: 1.35rem;
    margin-left: -2rem;
    cursor: pointer;
}

.form-check-label {
    padding-top: 2px;
    cursor: pointer;
    user-select: none;
}

/* 3. Sticky Action Bar per Mobile Forms (Pulsanti Salva/Invia in basso) */
.mobile-sticky-actions {
    position: sticky;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.85rem 1rem;
    margin-left: -12px;
    margin-right: -12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
    .mobile-sticky-actions {
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
}

/* 4. Touch File Upload styling */
.mobile-file-upload {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.mobile-file-upload:hover,
.mobile-file-upload:focus-within {
    border-color: #0d6efd;
    background: #f0f7ff;
}

.mobile-file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* 5. Prevenzione Scroll Orizzontale ed Eliminazione Margini a Destra Sprecati */
html, body {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

@media (max-width: 575.98px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container, .container-fluid {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .row {
        margin-left: -4px !important;
        margin-right: -4px !important;
    }

    .row > [class*="col-"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .auth-page-wrapper {
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 1rem 0.25rem !important;
    }
}

/* Tabelle Responsive Touch */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}