/* mobile.css - Versão Final Ajustada (Menu Largo, Botão Redondo e Grids Alinhados) */

@media (max-width: 992px) { /* Tablet e Celular */

    /* --- GERAL --- */
    body {
        height: auto;
        overflow-y: auto;
        background-color: #f3f4f6;
    }

    .layout-wrapper {
        flex-direction: column;
        height: auto;
        overflow: visible;
        position: relative;
    }

    /* --- BOTÃO DE MENU (Estilo Botão Flutuante) --- */
    .mobile-nav-toggle {
        display: flex !important;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1100; /* Acima de tudo */
        background-color: var(--vestro-blue);
        color: white;
        width: 50px;
        height: 50px;
        border-radius: 50%; /* Redondo */
        font-size: 1.8rem;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Sombra forte */
        cursor: pointer;
        border: 2px solid white; /* Borda branca para destaque */
    }

    /* Esconde o botão de seta original (do PC) */
    .sidebar-toggle {
        display: none !important;
    }

    /* --- SIDEBAR (Menu Lateral) --- */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 1050; /* Acima do conteúdo */
        width: 85vw;   /* Ocupa 85% da largura da tela */
        max-width: 320px;
        background: #fff;
        transform: translateX(-100%); /* Escondido na esquerda */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
        overflow-y: auto;
    }

    /* --- CORREÇÃO: MENU ABERTO (Largura Total) --- */
    /* Sobrescreve a regra do PC que deixava o menu fino (80px) */
    .sidebar.collapsed {
        width: 85vw !important;  
        max-width: 320px !important;
        transform: translateX(0) !important; /* Traz para a tela */
    }
    
    /* Garante que os textos e logos apareçam */
    .sidebar.collapsed .link-text,
    .sidebar.collapsed .arrow-icon,
    .sidebar.collapsed .user-welcome,
    .sidebar.collapsed .submenu {
        display: block !important;
        opacity: 1 !important;
    }
    
    .sidebar.collapsed .logo {
        max-width: 140px !important;
        margin: 0 auto !important;
        display: block;
    }
    
    .sidebar.collapsed .menu-item {
        justify-content: flex-start !important;
        padding: 15px 20px !important;
    }
    
    .sidebar.collapsed .logo-area {
        padding: 20px !important;
        text-align: center;
    }

    /* --- TOP BAR --- */
    .top-bar {
        padding: 15px 15px 15px 80px; /* Margem esquerda maior para o botão redondo não cobrir texto */
        background: #fff;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        flex-wrap: wrap;
    }

    .user-welcome {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }

    /* --- CONTEÚDO PRINCIPAL --- */
    .content-area {
        width: 100%;
        min-height: 100vh;
        display: block;
        padding-top: 0; 
        overflow-x: hidden; 
    }
    
    .main-content {
        padding: 10px;
        height: auto !important;
        overflow: visible !important;
    }

    /* --- CORREÇÃO DE GRIDS (Relatórios e Dashboard) --- */
    /* Transforma tudo em coluna única e largura total */
    .dash-grid-top, 
    .dash-grid-bottom,
    .report-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        gap: 15px !important;
        margin-bottom: 20px;
    }

    /* Cartões ocupando 100% da largura */
    .dash-card, 
    .chart-card,
    .table-section,
    .charts-section {
        width: 100% !important;
        min-height: auto !important; 
        margin: 0 !important;
        box-sizing: border-box; 
    }
    
    /* Previne gráficos de vazarem */
    .chart-box, 
    .chart-card > div {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    /* Cabeçalho dos relatórios */
    .report-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .filter-bar {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .filter-select {
        flex: 1;
        min-width: 100%; /* Select ocupa linha inteira no mobile */
    }

    /* --- TABELAS (Scroll Horizontal Suave) --- */
    .table-container,
    .table-section {
        width: 100%;
        overflow-x: auto !important; /* Permitir scroll no container */
        border-radius: 8px;
        margin: 0;
        -webkit-overflow-scrolling: touch;
    }

    .vestro-table {
        display: table !important; /* Voltar a ser tabela */
        width: 100%;
        min-width: 650px; /* Força scroll em telas pequenas */
    }
    
    .vestro-table th, .vestro-table td {
        padding: 12px 10px; /* Áreas de toque maiores */
        font-size: 0.85rem;
    }

    /* --- TANQUES --- */
    .main-content.cards-container {
        display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 15px;
    }

    .vestro-card {
        height: auto;
        min-height: auto;
    }

    /* --- LOGIN --- */
    .login-card {
        padding: 30px 20px;
        width: 90%;
        margin: 20px auto;
    }
}