/* ======================================================
   ESTILOS APENAS PARA DISPOSITIVOS MÓVEIS
   ====================================================== */

@media (max-width: 768px) {

    /* --- AJUSTES GERAIS --- */
    body {
        flex-direction: column;
    }

    .main-content {
        padding: 15px; /* Menos padding em telas pequenas */
    }

    /* --- SIDEBAR RESPONSIVA --- */
    .sidebar {
        position: fixed;
        left: -100%; /* Começa escondida fora da tela */
        width: 280px;
        height: 100%;
        z-index: 2000; /* Garante que fique acima de todo o resto */
        transition: left 0.3s ease-in-out;
        background-color: #ffffff;
    }

    .sidebar.active {
        left: 0; /* Mostra a sidebar quando ativada pelo JS */
    }

    /* --- CABEÇALHO RESPONSIVO (A CORREÇÃO PRINCIPAL) --- */
    .main-header {
        display: flex;
        justify-content: space-between; /* Alinha itens nas extremidades */
        align-items: center;
        gap: 10px; /* Espaço entre os itens */
    }

    .menu-toggle-btn {
        display: block; /* Garante que o botão de menu seja visível */
        background: none;
        border: 1px solid #ccc;
        padding: 8px 12px;
        font-size: 1rem;
        cursor: pointer;
        order: -1; /* Coloca o botão de menu sempre na esquerda */
    }
    
    .main-header h1, .main-header div > h1 {
        font-size: 1.1rem; /* Reduz um pouco o tamanho do título */
        margin: 0;
        text-align: left;
    }

    .main-header p#welcome-message {
        display: none; /* Opcional: Esconde a mensagem de boas-vindas */
    }

    /* --- AJUSTE PARA TABELAS --- */
    .table-container {
        overflow-x: auto; /* Permite rolagem horizontal */
    }

    table {
        white-space: nowrap;
    }
}