@import url('layout/menu-lateral.css');
@import url('layout/header.css');
@import url('layout/rodape.css');

/* PRINCIPAL */

:root {
    --bg-body: #050505;
    --bg-header: rgba(10, 10, 10, 0.8);
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --accent: #17763a; /* Cor primária */
    --accent-hover: #0e5327;
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(255, 255, 255, 0.05);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0f172a;
    color: var(--text-main);
    overflow: hidden; /* Evita scroll na página toda */
}

/* Container que segura tudo */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* CONTENT */
.content {
    flex: 1;
    padding: 24px;
    overflow-y: auto; /* Scroll apenas aqui dentro */
}

/* ==========================================================================
   1. ESTRUTURA PADRÃO (DESKTOP)
   ========================================================================== */
.app-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background: #0b0f19;
}

/* O wrapper segura o Header e o Conteúdo jogando um abaixo do outro */
.main-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* Evita quebras de caixas flex */
}

.content {
    flex: 1;
    padding: 0; /* O padding interno já é controlado pelas suas views */
}

/* ==========================================================================
   2. REGRAS PARA DISPOSITIVOS MÓVEIS (MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* Esconde completamente a Sidebar */
    .sidebar {
        display: none !important;
    }

    /* Esconde completamente o Header superior */
    .menu-superior-central { /* Substitua pelo nome da classe real do seu header se necessário */
        display: none !important;
    }

    /* Garante que o container e a área principal ocupem 100% da tela mobile */
    .app-container {
        display: block; /* Remove o flex para evitar comportamentos inesperados no mobile */
    }

    .main-wrapper {
        width: 100%;
        min-height: 100vh;
    }

    .content {
        width: 100%;
        display: block;
    }
}