/* ===== MELHORIAS DE RESPONSIVIDADE MOBILE ===== */

/* Ajustes gerais para mobile */
@media (max-width: 768px) {
    /* Remover margens desnecessárias */
    body {
        overflow-x: hidden;
    }
    
    /* Ajustar espaçamentos */
    .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
    
    .space-y-4 > * + * {
        margin-top: 0.75rem !important;
    }
    
    /* Botões full-width em mobile */
    .modal-container button,
    .bg-white button[class*="bg-"] {
        width: 100%;
        justify-content: center;
    }
    
    /* Ajustar padding dos cards */
    .bg-white.rounded-xl {
        padding: 1rem !important;
    }
    
    /* Tabelas scroll horizontal suave */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    /* Melhorar visualização de tabelas */
    table {
        min-width: 600px;
    }
    
    table thead {
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }
    
    /* Inputs e selects maiores para touch */
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        min-height: 44px;
        font-size: 16px !important; /* Previne zoom no iOS */
    }
    
    /* Checkbox e radio maiores */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Modais ocupam tela inteira em mobile */
    #genericModal .modal-container {
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Grid de 4 colunas vira 2 em mobile */
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* Grid de 2 colunas vira 1 em mobile */
    .grid-cols-2,
    .md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Flex wrap em mobile */
    .flex {
        flex-wrap: wrap;
    }
    
    /* Ações de tabela empilhadas */
    td button {
        margin: 0.25rem 0;
    }
    
    /* Charts responsivos */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Badges menores */
    .badge, span[class*="badge"] {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* KPIs cards menores */
    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
    
    .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }
    
    /* Alertas mais compactos */
    .border-l-4 {
        padding: 0.75rem !important;
    }
    
    .border-l-4 i {
        font-size: 1.25rem !important;
    }
    
    /* Sidebar esconde logo grande */
    .sidebar .text-2xl {
        font-size: 1.5rem !important;
    }
    
    /* Fix para select2 e dropdowns */
    select option {
        padding: 0.5rem;
    }
    
    /* Evitar quebra de texto em badges */
    span[class*="rounded-full"] {
        white-space: nowrap;
    }
    
    /* Melhorar ações inline */
    .flex.items-center.space-x-2 button {
        padding: 0.5rem !important;
    }
    
    /* Tooltips não funcionam bem em touch */
    [title]:hover::after {
        display: none;
    }
}

/* Tablets - Ajustes intermediários */
@media (min-width: 769px) and (max-width: 1024px) {
    .main-content {
        padding: 1.5rem !important;
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Sidebar menor em tablets */
    .sidebar {
        width: 240px;
    }
    
    .main-content {
        margin-left: 240px !important;
    }
}

/* Landscape mobile */
@media (max-width: 896px) and (orientation: landscape) {
    /* Header menor em landscape */
    nav {
        height: 50px;
    }
    
    nav .flex {
        height: 50px;
    }
    
    body {
        padding-top: 50px;
    }
    
    /* Sidebar menor */
    .sidebar {
        width: 240px;
    }
    
    /* Modais menores */
    #genericModal .modal-container {
        max-height: 95vh !important;
    }
}

/* Small devices (smartphones pequenos) */
@media (max-width: 375px) {
    /* Ainda mais compacto */
    h1 {
        font-size: 1.25rem !important;
    }
    
    h2 {
        font-size: 1.1rem !important;
    }
    
    button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    /* KPIs cards grid 1 coluna */
    .grid-cols-4,
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Sidebar ainda mais estreita */
    .sidebar {
        width: 260px;
    }
}

/* Modo retrato tablet */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Print styles */
@media print {
    .sidebar,
    nav,
    .mobile-overlay,
    .fab-mobile,
    button {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    
    body {
        padding-top: 0 !important;
    }
}

/* Touch-specific */
@media (hover: none) and (pointer: coarse) {
    /* Aumentar área de toque */
    button,
    a,
    .sidebar-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remover hover effects */
    *:hover {
        background-color: inherit !important;
    }
    
    /* Feedback visual no toque */
    button:active,
    a:active,
    .sidebar-link:active {
        transform: scale(0.98);
        opacity: 0.8;
    }
}

/* Dark mode (opcional - se implementar no futuro) */
@media (prefers-color-scheme: dark) {
    /* Reservado para modo escuro futuro */
}

/* Alto contraste */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }
    
    button {
        font-weight: 600 !important;
    }
}

/* Redução de movimento */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== CLASSES AUXILIARES MOBILE ===== */

/* Mostrar apenas em mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* Esconder em mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Texto menor em mobile */
@media (max-width: 768px) {
    .text-mobile-sm {
        font-size: 0.875rem !important;
    }
}

/* Padding mobile */
@media (max-width: 768px) {
    .p-mobile-sm {
        padding: 0.5rem !important;
    }
}

/* ===== FIX ESPECÍFICOS POR MÓDULO ===== */

/* Dashboard mobile */
@media (max-width: 768px) {
    /* KPIs em 2 colunas */
    #mainContent .grid-cols-1.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Gráficos full-width */
    canvas {
        width: 100% !important;
    }
}

/* Tabelas de listagem mobile */
@media (max-width: 768px) {
    /* Ações em coluna vertical */
    td:last-child {
        white-space: nowrap;
    }
    
    td:last-child button {
        display: inline-block;
        margin: 0.125rem;
    }
}

/* Formulários modal mobile */
@media (max-width: 768px) {
    form .grid {
        gap: 0.75rem !important;
    }
    
    form label {
        font-size: 0.875rem !important;
    }
    
    form .md\\:col-span-2 {
        grid-column: span 1 !important;
    }
}

/* Filtros mobile */
@media (max-width: 768px) {
    .flex.justify-between {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .flex.space-x-3 {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .flex.space-x-3 > * {
        width: 100%;
    }
}

/* Backup module mobile */
@media (max-width: 768px) {
    .lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Alertas mobile */
@media (max-width: 768px) {
    .space-y-3 > * + * {
        margin-top: 0.5rem !important;
    }
}