/* assets/css/mobile.css - Versão Limpa */

@media (max-width: 768px) {

    /* 1. Ajustes de Leitura */
    body {
        font-size: 14px;
    }

    main {
        padding: 1rem !important;
        padding-bottom: 6rem !important;
        /* Espaço extra para o Widget de IA */
    }

    /* 2. Tabelas Responsivas (Essencial para não quebrar o layout) */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        /* Permite rolar a tabela lateralmente */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        /* Rolagem suave no iPhone */
    }

    /* 3. Ajustes de Mapas e Gráficos */
    #map {
        height: 250px !important;
        z-index: 0 !important;
        /* Garante que o mapa fique atrás do menu */
    }

    .apexcharts-canvas {
        margin: 0 auto;
    }

    /* 4. Força grids a virarem colunas */
    .grid {
        display: flex !important;
        flex-direction: column;
        gap: 1rem !important;
    }

    /* 5. Ajuste do Widget de IA */
    .fixed.bottom-6.right-6 {
        bottom: 1rem !important;
        right: 1rem !important;
        z-index: 30 !important;
        /* Fica abaixo do Overlay do menu */
    }
}