/* ============================================
   RESPONSIVIDADE MOBILE
   ============================================ */

/* Mobile - Telas pequenas (até 768px) */
@media screen and (max-width: 768px) {
    /* Container */
    .container {
        padding: 10px;
    }
    
    /* Header */
    .header {
        padding: 0;
        flex-direction: column;
        gap: 0;
    }
    
    .header-content {
        padding: 15px 10px;
    }
    
    .logo-container {
        width: 100%;
        padding: 20px 15px;
    }
    
    .logo-img {
        width: 180px;
        height: 180px;
        object-fit: cover;
        object-position: center;
    }
    
    .header h1 {
        font-size: 1.3rem;
        text-align: center;
    }
    
    .user-menu {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }
    
    .user-name {
        font-size: 0.9rem;
    }
    
    .btn-logout {
        padding: 8px 15px;
        font-size: 0.85rem;
    }
    
    /* Tabs */
    .tabs {
        flex-wrap: wrap;
        gap: 5px;
        padding: 10px 5px;
    }
    
    .tab-btn {
        flex: 1;
        min-width: calc(50% - 5px);
        padding: 12px 8px;
        font-size: 0.85rem;
    }
    
    .tab-btn i {
        font-size: 1rem;
        margin-right: 5px;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px;
        font-size: 0.9rem;
    }
    
    /* Botões */
    button {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
    
    button i {
        font-size: 1rem;
        margin-right: 5px;
    }
    
    /* Cards de Gráficos */
    .cards-graficos {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .card-grafico {
        padding: 15px;
        flex-direction: row;
        align-items: center;
    }
    
    .card-grafico-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        margin-right: 15px;
        margin-bottom: 0;
    }
    
    .card-grafico-content h4 {
        font-size: 1rem;
        margin-bottom: 5px;
    }
    
    .card-grafico-content p {
        font-size: 0.8rem;
    }
    
    /* Gráfico Principal */
    .grafico-card {
        padding: 15px;
    }
    
    #graficoPrincipal {
        max-height: 300px !important;
    }
    
    /* Resumo Financeiro */
    .resumo-financeiro .metricas {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .metrica {
        padding: 15px;
    }
    
    .metrica .valor {
        font-size: 1.5rem;
    }
    
    .metrica .label {
        font-size: 0.85rem;
    }
    
    /* Filtros */
    .filtros {
        flex-direction: column;
        gap: 10px;
    }
    
    .filtros .form-group {
        width: 100%;
    }
    
    /* Ações de Relatório */
    .acoes-relatorio {
        flex-direction: column;
        gap: 10px;
    }
    
    .acoes-relatorio button {
        width: 100%;
    }
    
    /* Itens de Venda */
    .item-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .item-row input {
        width: 100%;
    }
    
    .btn-remover-item {
        width: 100%;
        padding: 10px;
    }
    
    /* Modal */
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 20px auto;
        padding: 20px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header {
        padding: 15px;
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-header h2 {
        font-size: 1.2rem;
    }
    
    /* Produtos Grid */
    .produtos-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .produto-card {
        padding: 15px;
    }
    
    .produto-card img {
        width: 100%;
        height: 200px;
    }
    
    /* Usuários */
    .usuarios-list {
        grid-template-columns: 1fr;
    }
    
    .usuario-card {
        flex-direction: column;
        gap: 15px;
    }
    
    /* Tabelas */
    .table-container {
        overflow-x: auto;
    }
    
    table {
        font-size: 0.85rem;
    }
    
    table th,
    table td {
        padding: 8px 5px;
    }
}

/* Mobile muito pequeno (até 480px) */
@media screen and (max-width: 480px) {
    .header h1 {
        font-size: 1.1rem;
    }
    
    .tab-btn {
        font-size: 0.75rem;
        padding: 10px 5px;
    }
    
    .tab-btn i {
        font-size: 0.9rem;
        margin-right: 3px;
    }
    
    .card-grafico {
        padding: 12px;
    }
    
    .card-grafico-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        margin-right: 10px;
    }
    
    .card-grafico-content h4 {
        font-size: 0.9rem;
    }
    
    .card-grafico-content p {
        font-size: 0.75rem;
    }
    
    button {
        padding: 10px 15px;
        font-size: 0.85rem;
    }
    
    button i {
        font-size: 0.9rem;
        margin-right: 3px;
    }
    
    .modal-content {
        padding: 15px;
    }
    
    #graficoPrincipal {
        max-height: 250px !important;
    }
}

/* Tablet (768px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .cards-graficos {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .resumo-financeiro .metricas {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ajustes gerais para melhor visualização em mobile */
@media screen and (max-width: 768px) {
    /* Melhorar espaçamento */
    .tab-content {
        padding: 15px 10px;
    }
    
    /* Botões de ação sempre visíveis */
    .btn-primary,
    .btn-secondary,
    .btn-excel,
    .btn-print,
    .btn-relatorio {
        min-height: 44px; /* Tamanho mínimo para touch */
    }
    
    /* Ícones maiores em botões */
    .btn-primary i,
    .btn-secondary i,
    .btn-excel i,
    .btn-print i {
        font-size: 1.1rem;
    }
    
    /* Toast */
    .toast {
        left: 10px;
        right: 10px;
        width: auto;
        font-size: 0.9rem;
        padding: 15px;
    }
    
    /* Inputs de data */
    input[type="date"] {
        font-size: 0.9rem;
    }
    
    /* Labels mais legíveis */
    label {
        font-weight: 600;
    }
    
}

/* Orientação paisagem em mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .header {
        padding: 10px;
    }
    
    .header h1 {
        font-size: 1.1rem;
    }
    
    .tabs {
        padding: 8px 5px;
    }
    
    .tab-btn {
        padding: 10px 5px;
        font-size: 0.8rem;
    }
    
    #graficoPrincipal {
        max-height: 200px !important;
    }
}