/* Melhorias de responsividade para mobile */
@media (max-width: 768px) {
    /* Ajustes gerais */
    body {
        font-size: 14px;
    }
    
    .container {
        padding: 0 8px;
    }
    
    /* Cabeçalho responsivo */
    .header-content {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .header-actions {
        width: 100%;
        justify-content: center;
    }
    
    /* Cards de estatísticas */
    .stat-card {
        padding: 12px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .stat-info p {
        font-size: 18px;
    }
    
    /* Barras de busca e filtros */
    .search-bar {
        flex-direction: column;
        gap: 8px;
    }
    
    .search-bar input[type="text"] {
        width: 100%;
    }
    
    .search-bar button {
        width: 100%;
    }
    
    .filters {
        flex-direction: column;
        gap: 8px;
    }
    
    .filter-group {
        width: 100%;
    }
    
    /* Tabelas responsivas */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 16px;
    }
    
    table {
        min-width: 640px; /* Garante largura mínima para scroll */
    }
    
    th, td {
        padding: 8px;
        font-size: 13px;
    }
    
    /* Ajuste em cards e painéis */
    .card, .grafico-card {
        padding: 12px;
        margin-bottom: 16px;
    }
    
    /* Formulários responsivos */
    .form-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .form-col {
        width: 100%;
    }
    
    /* Modais responsivos */
    .modal-content {
        width: 95%;
        margin: 24px auto;
        max-height: 85vh;
    }
    
    .modal-header, .modal-footer {
        padding: 12px;
    }
    
    .modal-body {
        padding: 12px;
    }
    
    /* Botões e ações */
    .btn {
        padding: 8px 12px;
    }
    
    .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    /* Gráficos */
    .grafico-card {
        height: 250px;
    }
    
    .dashboard-graficos {
        gap: 12px;
    }
    
    /* Ajustes específicos para dispositivos muito pequenos */
    @media (max-width: 375px) {
        .tabs {
            flex-wrap: wrap;
        }
        
        .tab {
            flex: 1 0 33.333%;
            text-align: center;
            padding: 8px 4px;
            font-size: 12px;
        }
        
        .tab i {
            margin-right: 4px;
        }
    }
}

/* Modo de visualização para tabelas em dispositivos muito pequenos */
@media (max-width: 480px) {
    .mobile-card-view tbody,
    .mobile-card-view tr,
    .mobile-card-view td {
        display: block;
    }
    
    .mobile-card-view thead {
        display: none;
    }
    
    .mobile-card-view tbody tr {
        margin-bottom: 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 12px;
        position: relative;
    }
    
    .mobile-card-view td {
        border: none;
        padding: 8px 8px 8px 40%;
        position: relative;
        text-align: left;
        display: flex;
        align-items: center;
    }
    
    .mobile-card-view td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 35%;
        padding-right: 10px;
        font-weight: bold;
        text-align: right;
    }
    
    .mobile-card-view .actions {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

/* Melhorias de acessibilidade para toque */
@media (hover: none) and (pointer: coarse) {
    /* Aumenta áreas de toque para dedos */
    .btn, .tab, select, input[type="checkbox"], input[type="radio"] {
        min-height: 44px;
    }
    
    .btn-sm {
        min-height: 38px;
        min-width: 38px;
    }
    
    /* Melhora espaçamento para facilitar toque */
    .pagination-item {
        min-width: 40px;
        height: 40px;
    }
}