/* -----------------------------------------------------------
   style_mobile.css - Responsividade Ajustada (Final)
   ----------------------------------------------------------- */

/* 1. REGRA DE OURO */
* {
    box-sizing: border-box;
}

/* 2. TRAVA A LARGURA DA PÁGINA */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Botão Toggle de Filtros (Desktop: Invisível) */
.btn-toggle-filters {
    display: none; 
    width: 100%;
    padding: 12px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 15px;
    text-align: center;
    transition: background 0.3s;
}
.btn-toggle-filters:hover {
    background-color: #5a6268;
}

/* === REGRAS APENAS PARA CELULAR (Max 768px) === */
@media screen and (max-width: 768px) {
    
    /* Ajuste do Corpo */
    body {
        background-color: #f0f2f5;
        padding: 10px;
        font-size: 14px;
    }

    /* Container Principal */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        border-radius: 8px;
        background: #fff;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* --- CABEÇALHO --- */
    header {
        flex-direction: column !important;
        text-align: center;
        padding: 15px 10px;
        width: 100%;
        gap: 10px;
        height: auto !important;
    }
    header img {
        margin: 0;
        height: 60px !important; /* Força tamanho menor */
    }
    header h1 {
        font-size: 18px;
        margin: 5px 0 15px 0;
        text-align: center !important;
        width: 100%;
    }

    /* Menu de Usuário */
    .logout, .user-menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        gap: 10px;
        align-items: stretch !important;
        margin-top: 0;
    }
    
    .logout span, .user-menu span {
        display: none !important; 
    }

    /* Links como Botões Largos */
    a.nav-link-blue, a.btn-sair-vermelho, .nav-link {
        margin-left: 0 !important;
        display: block;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        border-radius: 6px;
        background-color: #f8f9fa;
        border: 1px solid #ddd;
    }

    /* --- WELCOME BOX --- */
    .welcome-box {
        padding: 15px;
        margin-bottom: 20px;
    }
    .welcome-box h3 {
        font-size: 16px;
    }

    /* --- FILTROS --- */
    .btn-toggle-filters {
        display: block !important;
    }

    .filter-container, .filter-div {
        display: none !important;
        width: 100%;
        padding: 15px;
        border: 1px solid #ddd;
        background-color: #f8f8f8;
        border-radius: 6px;
        margin-bottom: 15px;
    }

    .filter-container.open, .filter-div.open {
        display: flex !important;
        flex-direction: column !important;
        animation: slideDown 0.3s ease-out;
    }
    
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .filter-group {
        width: 100%;
        margin-bottom: 10px;
    }
    .filter-group input, 
    .filter-group select,
    #input-id, #input-titulo, #select-status, 
    #f-id, #f-titulo, #f-status {
        width: 100% !important;
        height: 45px;
        box-sizing: border-box;
    }

    .filter-actions {
        flex-direction: column;
        width: 100%;
        margin: 0;
        gap: 10px;
    }
    .filter-actions button, .filter-actions a {
        width: 100%;
        display: block;
        text-align: center;
        padding: 12px;
    }

    /* --- CARDS (AQUI ESTÁ A CORREÇÃO DO ESPAÇO) --- */
    .card {
        flex-direction: column !important;
        padding: 15px;
        margin-bottom: 15px;
        width: 100%;
        align-items: stretch !important; /* Garante que estique */
    }
    
    .card-info, .card-status {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important; /* Reseta o flex do desktop */
        border: none;
        padding: 0;
    }

    .card-status {
        border-top: 1px dashed #ccc;
        border-bottom: 1px dashed #ccc;
        padding: 15px 0;
        margin: 15px 0;
        background-color: #fafafa;
        overflow-x: auto; 
    }

    /* CORREÇÃO CRÍTICA DO ESPAÇO EM BRANCO */
    .card-actions {
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important; /* Reseta o flex: 0 0 160px do desktop */
        height: auto !important; /* Força altura automática */
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        margin-top: 0;
        padding: 0;
    }

    .card-actions .btn, .card-actions a {
        width: 100% !important;
        padding: 12px 0;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        height: auto !important; /* Remove altura fixa se houver */
        min-height: 44px; /* Altura mínima boa para toque */
    }

    /* --- TABELAS --- */
    .doc-table, .historico-table, .mini-table, .aprov-list {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        border: 1px solid #eee;
    }
    
    .doc-table th, .doc-table td, .historico-table th, .historico-table td {
        padding: 10px 15px;
    }

    /* --- MODAL --- */
    .modal-content {
        width: 90%;
        margin: 20% auto;
        padding: 20px;
    }
    .modal-content textarea {
        width: 100%;
        box-sizing: border-box;
    }
}