/* Otimizações Mobile Globais */

/* Prevenir zoom em inputs no iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Touch targets maiores */
@media (max-width: 768px) {
    button,
    a.btn,
    .clickable,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Cards clicáveis */
    .service-card,
    .professional-card,
    .time-slot {
        min-height: 60px;
        padding: 1rem;
    }
}

/* Melhorar scroll em mobile */
@media (max-width: 768px) {
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* Remover highlight de tap */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
}

/* Melhorar legibilidade em mobile */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .text-sm { font-size: 0.875rem; }
    .text-xs { font-size: 0.75rem; }
}

/* Espaçamento melhor em mobile */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Tabelas responsivas */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
}

/* Modais mobile-friendly */
@media (max-width: 768px) {
    .modal {
        width: 95%;
        max-width: 95%;
        margin: 1rem auto;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Melhorar visualização de calendário em mobile */
@media (max-width: 768px) {
    .fc {
        font-size: 0.875rem;
    }
    
    .fc-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .fc-button {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
}

/* Loading states */
.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Animações suaves mas performáticas */
@media (prefers-reduced-motion: no-preference) {
    * {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
}

/* Melhorar contraste em mobile */
@media (max-width: 768px) {
    .text-gray-600 {
        color: #4b5563;
    }
    
    .text-gray-500 {
        color: #6b7280;
    }
}