/* CSS para melhorar responsividade em celulares e tablets */

/* Estilos gerais para mobile */
@media (max-width: 768px) {
    /* Container principal mais compacto */
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Títulos menores em mobile */
    h1, h2, h3 {
        font-size: 1.2rem;
    }
    
    /* Cards com margens menores */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Botões em mobile */
    .btn {
        margin-bottom: 0.5rem;
        white-space: nowrap;
    }
    
    /* Flexbox para botões em mobile */
    .mobile-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .mobile-btn-group .btn {
        flex: 1;
        margin-bottom: 0;
        font-size: 0.8rem;
        padding: 0.5rem;
    }
}

/* Estilos específicos para formulários */
@media (max-width: 768px) {
    /* Formulários de filtro em mobile */
    .mobile-filter-form .row {
        margin: 0;
    }
    
    .mobile-filter-form .col-md-3,
    .mobile-filter-form .col-md-2,
    .mobile-filter-form .col-md-1 {
        padding: 0 0.25rem;
        margin-bottom: 0.75rem;
    }
    
    /* Labels menores */
    .form-label {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }
    
    /* Inputs com altura reduzida */
    .form-control, .form-select {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
}

/* Estilos para tabelas responsivas */
@media (max-width: 768px) {
    /* Tabela com scroll horizontal */
    .table-responsive {
        border: none;
        margin-bottom: 1rem;
    }
    
    /* Headers de tabela menores */
    .table th {
        font-size: 0.8rem;
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
    }
    
    /* Células de tabela compactas */
    .table td {
        font-size: 0.8rem;
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }
    
    /* Botões dentro da tabela */
    .table .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        margin: 0.1rem;
    }
}

/* Estilos para cards de estatísticas */
@media (max-width: 768px) {
    /* Cards de estatísticas em mobile */
    .stats-card-mobile {
        margin-bottom: 0.75rem;
    }
    
    .stats-card-mobile .card-body {
        padding: 1rem 0.75rem;
    }
    
    .stats-card-mobile .card-title {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .stats-card-mobile .fs-3 {
        font-size: 1.5rem !important;
    }
}

/* Melhorias para gráficos */
@media (max-width: 768px) {
    .chart-container {
        position: relative;
        height: 300px;
        margin-bottom: 1rem;
    }
    
    .chart-container canvas {
        max-height: 300px !important;
    }
}

/* Menu mobile otimizado */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Melhorias para paginação */
@media (max-width: 768px) {
    .pagination {
        justify-content: center;
        margin-bottom: 1rem;
    }
    
    .pagination .page-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* Modais responsivos */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer .btn {
        margin: 0.25rem;
        flex: 1;
    }
}

/* Utilitários mobile */
@media (max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-show {
        display: block !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-mb-1 {
        margin-bottom: 0.5rem !important;
    }
    
    .mobile-p-2 {
        padding: 0.5rem !important;
    }
}

/* Estilos para tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .table th,
    .table td {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
    
    .btn {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }
}

/* Correções para campos muito pequenos em mobile */
@media (max-width: 576px) {
    .col-md-1 {
        min-width: 120px;
    }
    
    .table th:first-child,
    .table td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
    }
    
    .table thead th:first-child {
        background: var(--bs-dark);
    }
}