/* =========================================
   ESTILOS RESPONSIVOS PARA MOBILE
   Aplicado apenas em telas < 768px
========================================= */

@media (max-width: 768px) {
    
    .hide-mobile {
        display: none !important;
    }
    /* 1. Header Global e Títulos */
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    /* 2. Seção de Filtros (Onde ocorre a quebra de largura) */
    .filters-wrapper {
        width: 100%;
        overflow-x: hidden; /* Impede vazamento horizontal */
    }

    .filters {
        display: flex;
        flex-direction: column; /* Coloca um filtro embaixo do outro */
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 12px;
    border-radius: 25px;
    }

    .filters .field {
        width: 100%; /* Força os inputs a ocuparem 100% da tela */
        max-width: none;
    }

    /* 3. Seção de Estatísticas (Cards Numéricos) */
    .stats {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Coloca dois cards por linha */
        gap: 10px;
        width: 100%;
        margin-top: 15px;
    }

    .stat {
        width: 100%;
        box-sizing: border-box;
        padding: 15px 10px;
    }

    /* 4. Toolbar de Ações (Jobs, Ordenar, View Toggle, Botões) */
    .jobs-toolbar .jobs-header {
        flex-direction: column; /* Empilha o título/ordenar com os botões de ação */
        align-items: stretch;
        gap: 15px;
    }

    .jobs-title {
        flex-direction: column; /* Empilha Título "Jobs", Ordenar e Cards/Lista */
        align-items: flex-start;
        width: 100%;
        gap: 10px;
    }

.jobs-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

    /* Container dos botões de ação final ("Ver Cronograma" e "Criar Job") */
    .jobs-header > div:last-child {
        width: 100%;
        flex-direction: column; /* Empilha os botões */
        gap: 10px;
    }

    .jobs-header > div:last-child .btn {
        width: 100%; /* Botões de largura total para facilitar o clique */
        justify-content: center;
    }

    /* Ajuste no dropdown de ordenação para não vazar */
    .custom-dropdown {
        width: 100%;
    }
    .custom-dropdown > .btn {
        width: 100%;
        justify-content: flex-start;
    }
    .dropdown-menu {
        width: 100%;
        position: static; /* Muda de absoluto para estático para empurrar o conteúdo abaixo */
        box-shadow: none;
        border: 1px solid var(--border-color);
        margin-top: 5px;
    }

    /* Toggle Cards/Lista ocupa a tela toda */
    .view-toggle {
        width: 100%;
        display: flex;
    }
    .view-toggle .view-btn {
        flex: 1; /* Divide o espaço igualmente */
        text-align: center;
        justify-content: center;
    }


    /* 6. Layout das Listas e Cards */
    .jobs-sections {
        flex-direction: column; /* Empilha "Em andamento", "Aprovação" e "Concluídos" */
    }

    .jobs-group {
        width: 100%;
    }
    
/* 5. Modais: Ajuste extremo para caber tudo na tela */
.modal-content {
        width: -webkit-fill-available !important;
        max-width: 400px;
        padding: 15px !important;
        margin: auto;
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box !important;
    }

.modal-actions {
    margin-top: 10px !important;
}
    /* 7. Correção de inputs nos modais para Mobile */
    .modal-content .field {
        width: 100%;
        box-sizing: border-box !important;
        min-height: 40px !important; /* Altura um pouco mais compacta */
        font-size: 16px !important; /* Anti-zoom do iPhone mantido */
        margin-bottom: 8px !important; /* Margem reduzida para caber mais coisas */
        padding: 8px 10px !important;
    }

    input[type="date"].field {
        display: block;
        appearance: none;
        -webkit-appearance: none;
        line-height: 1.2;
    }

    /* Correção do bug de invisibilidade do campo Data no Safari/iOS */
    input[type="date"].field {
        display: block;
        appearance: none;
        -webkit-appearance: none;
        padding: 12px 10px;
        line-height: 1.2;
    }
}