* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body { background: #f8f9fa; color: #1a2b4c; overflow-x: hidden; }

/* LAYOUT ESTRUTURAL COM ROLAGENS INDEPENDENTES */
.wrapper { 
    display: flex; 
    height: 100vh;      /* Ocupa exatamente 100% da altura da tela visível */
    width: 100vw; 
    overflow: hidden;   /* Mantém o contêiner externo fixo, forçando as rolagens internas */
}

/* 🛡️ CORREÇÃO 1: Menu fixado com rolagem própria se houver muitos links */
.sidebar { 
    width: 260px; 
    background: #1a2b4c; 
    color: white; 
    padding: 25px 12px; 
    display: flex; 
    flex-direction: column; 
    
    /* 🛡️ ESSA COMBINAÇÃO DA ALTURA COM OVERFLOW ACABA COM O ERRO DE ENCOBRIR LINKS: */
    height: 100%;       /* Ocupa toda a altura disponível dentro do wrapper */
    overflow-y: auto;   /* Libera a rodinha do mouse/deslize do dedo para navegar nos links ocultos */
    
    flex-shrink: 0; 
}
.sidebar .brand { font-size: 20px; font-weight: bold; color: #0056b3; margin-bottom: 25px; text-align: center; background: white; padding: 10px; border-radius: 6px; }

.menu-categoria {
    width: 100%;
    background: none;
    border: none;
    color: #9cb2cd;
    text-align: left;
    padding: 12px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    transition: color 0.2s;
}
.menu-categoria:hover { color: white; }

/* Seta indicadora de aberto/fechado */
.menu-categoria::after {
    content: '▼';
    font-size: 9px;
    transition: transform 0.2s;
    color: #627d98;
}
.menu-categoria.ativo::after {
    transform: rotate(-180deg); /* Gira a seta para cima quando aberto */
    color: #0056b3;
}

/* Gaveta que esconde/mostra os links */
.menu-sublinks {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out; /* Animação suave ao abrir */
    padding-left: 8px;
}

.sidebar a { 
    color: #ecf0f1; 
    text-decoration: none; 
    padding: 10px 14px; 
    display: block; 
    border-radius: 6px; 
    margin-bottom: 3px; 
    font-weight: 500; 
    font-size: 14px;
}

.sidebar a:hover, .sidebar a.active { background: #0056b3; color: white; }

.menu-divisor { border: 0; border-top: 1px solid #2c3e50; margin: 15px 0 5px 0; }

/* 🛡️ CORREÇÃO 1.2: Área de conteúdo rola sozinha */
.main-content { 
    flex: 1; 
    padding: 30px; 
    height: 100%; 
    overflow-y: auto; 
    min-width: 0; 
}

/* MENUS RESPONSIVOS (MOBILE) */
.mobile-header { display: none; background: #1a2b4c; color: white; padding: 15px; justify-content: space-between; align-items: center; position: relative; z-index: 999; }
.menu-toggle { background: none; border: none; color: white; font-size: 24px; cursor: pointer; }

/* CARDS DE LOGIN E FORMULÁRIOS */
.card-login { width: 90%; max-width: 420px; margin: 10vh auto; background: white; padding: 30px 25px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 86, 179, 0.08); border-top: 8px solid #0056b3; }
.dashboard-card { background: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); margin-bottom: 25px; }
.form-group { margin-bottom: 15px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
input, select { 
    width: 100%; 
    padding: 12px 14px; 
    border: 1px solid #ced4da; 
    border-radius: 6px; 
    font-size: 16px; 
    color: #495057;
    /* 🛡️ CORREÇÃO: Força o navegador a exibir o texto sempre em maiúsculas */
    text-transform: uppercase; 
}

input[type="email"] {
    text-transform: none;
}
.btn { background: #0056b3; color: white; border: none; padding: 12px 20px; border-radius: 6px; font-weight: 600; cursor: pointer; width: 100%; font-size: 15px; }
.btn:hover { background: #004085; }
.btn-danger { background: #dc3545; } .btn-danger:hover { background: #bd2130; }
.btn-success { background: #28a745; } .btn-success:hover { background: #218838; }

/* TABELAS E RESPONSIVIDADE */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 15px; border: 1px solid #dee2e6; border-radius: 6px; }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #dee2e6; font-size: 14px; white-space: nowrap; }
th { background: #f1f3f5; font-weight: 600; }

/* STATUS E ALERTAS */
.alert { padding: 12px; border-radius: 6px; margin-bottom: 15px; font-size: 14px; text-align: center; }
.alert-error { background: #f8d7da; color: #721c24; }
.alert-success { background: #d4edda; color: #155724; }
.alert-warning { background: #fff3cd; color: #856404; }
.badge { padding: 3px 6px; border-radius: 4px; font-size: 11px; font-weight: bold; }
.badge-active { background: #d4edda; color: #155724; }
.badge-temp { background: #fff3cd; color: #856404; }
.badge-danger { background: #f8d7da; color: #721c24; }

/* FUNDO ESCURO QUANDO A GAVETA MOBILE ABRE */
.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.4); z-index: 990; }
.sidebar-overlay.open { display: block; }

/* 🛡️ REGRAS EXCLUSIVAS PARA CELULAR (MOBILE) */
/* 🛡️ REGRAS EXCLUSIVAS PARA CELULAR COM CORREÇÕES DE SOBREPOSIÇÃO E BARRAS NATIVAS */
@media (max-width: 768px) {
    .wrapper { 
        flex-direction: column; 
        height: calc(100vh - 56px); 
    }
    
    /* 🛡️ CORREÇÃO TOPO E BASE: Ajuste de prioridade e espaçamento de segurança */
    .sidebar { 
        position: fixed; 
        top: 0; 
        left: -260px; 
        width: 260px; 
        height: 100vh; 
        /* z-index em 1000 faz o menu flutuar DE FATO por cima do topo de 3 risquinhos */
        z-index: 1000; 
        box-shadow: 4px 0 15px rgba(0,0,0,0.3);
        transition: left 0.3s ease-in-out;
        
        /* Proteções de margem interna contra o topo do celular e base do Android */
        padding-top: 20px;
        padding-bottom: calc(25px + env(safe-area-inset-bottom)); 
    }
    
    /* Afasta a logomarca do topo para não bater na barra de status do celular */
    .sidebar .brand {
        margin-top: 15px;
        margin-bottom: 20px;
    }

    /* 🛡️ CORREÇÃO BOTÃO SAIR: Empurra o botão para cima para não sumir sob a barra do Android */
    .sidebar a[href*="logout"] {
        margin-top: auto; 
        margin-bottom: 20px; /* Garante folga mesmo em celulares antigos sem safe-area */
        background: #111d33;
    }
    
    .sidebar.open { 
        left: 0; 
        display: flex; 
    }
    
    /* Mantém a barra de controle por baixo do menu quando ele abre */
    .mobile-header { 
        display: flex; 
        z-index: 990; 
    }
    
    .main-content { 
        padding: 15px; 
    }

    /* 🛡️ CORREÇÃO: Força o formulário de novo período a quebrar uma linha por campo no celular */
    .form-lote-responsivo {
        grid-template-columns: 1fr !important; /* Muda de 3 colunas para 1 única coluna */
        gap: 15px !important;
    }
    
    .form-lote-responsivo .btn {
        width: 100% !important; /* Faz o botão ocupar a largura inteira no celular */
        margin-top: 5px;
    }    
}