/* Mobile-specific styles for Android devices */

/* Ottimizzazioni per Android */
@media only screen and (max-width: 768px) {
    body {
        font-size: 16px !important; /* Previene zoom automatico su Android */
        -webkit-text-size-adjust: 100%;
    }

    .container {
        padding: 10px !important;
    }

    h1 {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }

    .card {
        margin-bottom: 15px !important;
    }

    .card-body {
        padding: 15px !important;
    }

    #scanner-container {
        height: 300px !important;
        margin-bottom: 15px;
    }

    .btn {
        font-size: 18px !important;
        padding: 12px 24px !important;
        margin: 5px !important;
        width: 100% !important;
        touch-action: manipulation; /* Migliora responsività touch */
    }

    .form-control {
        font-size: 16px !important;
        padding: 10px !important;
        height: auto !important;
    }

    /* Ottimizzazione griglia DevExpress per mobile */
    .dxgvTable {
        font-size: 14px !important;
    }

    .dxgvHeader {
        font-size: 14px !important;
        padding: 8px !important;
    }

    .dxgvDataRow td {
        padding: 10px 5px !important;
    }

    /* Scanner overlay per mobile */
    .scanner-overlay {
        width: 90% !important;
        height: 80px !important;
        border-width: 3px !important;
    }

    /* Feedback visuale migliore */
    .alert {
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Nasconde elementi non essenziali su mobile */
    .d-mobile-none {
        display: none !important;
    }
}

/* Stili per migliorare l'usabilità touch */
input[type="text"],
input[type="button"],
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Animazione per feedback scansione */
@keyframes scanSuccess {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.scan-success {
    animation: scanSuccess 0.3s ease-in-out;
}

/* Miglioramenti per la visualizzazione video */
#interactive video {
    object-fit: cover;
    border-radius: 8px;
}

/* Indicatore di caricamento */
.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Stili per landscape mode su Android */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    #scanner-container {
        height: 200px !important;
    }

    h1 {
        font-size: 1.4rem !important;
        margin: 5px 0 !important;
    }

    .card {
        margin-bottom: 10px !important;
    }

    .card-body {
        padding: 10px !important;
    }
}

/* Supporto per Dark Mode Android */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212 !important;
        color: #ffffff !important;
    }

    .card {
        background-color: #1e1e1e !important;
        border-color: #333 !important;
    }

    .form-control {
        background-color: #2a2a2a !important;
        color: #ffffff !important;
        border-color: #444 !important;
    }

    .btn-primary {
        background-color: #1976d2 !important;
        border-color: #1976d2 !important;
    }

    .btn-success {
        background-color: #388e3c !important;
        border-color: #388e3c !important;
    }

    .btn-danger {
        background-color: #d32f2f !important;
        border-color: #d32f2f !important;
    }
}

/* Ottimizzazioni per performance */
* {
    -webkit-tap-highlight-color: transparent; /* Rimuove highlight blu su tap Android */
}

/* Previene scroll bounce su iOS/Android */
html, body {
    overscroll-behavior: none;
}

/* Migliora leggibilità su schermi piccoli */
@media only screen and (max-width: 360px) {
    body {
        font-size: 14px !important;
    }

    h1 {
        font-size: 1.5rem !important;
    }

    .btn {
        font-size: 16px !important;
        padding: 10px 20px !important;
    }
}