@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --bg-main: #f8fafc; 
    --bg-sidebar: #0f172a; 
    --card-bg: #ffffff;
    --text-main: #0f172a; 
    --text-muted: #64748b; 
    --border-light: #e2e8f0; 
    --brand-primary: #4f46e5; 
    --brand-hover: #4338ca;
    --sidebar-width: 280px;
    --topbar-height: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
body { background: var(--bg-main); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; }

/* ==========================================
   DESKTOP VIEW (Padrão)
========================================== */

/* Barra do celular escondida no PC */
#mobile-topbar { display: none; }
#sidebar-overlay { display: none; }
#menu-close { display: none; }

/* Menu Lateral */
#global-sidebar { 
    width: var(--sidebar-width); 
    background: var(--bg-sidebar); 
    color: white; 
    display: flex; 
    flex-direction: column; 
    padding: 24px; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 100; 
    flex-shrink: 0;
}

.sidebar-header h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; color: #fff;}

.nav-links { display: flex; flex-direction: column; gap: 8px; }

.nav-link { 
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; 
    color: #94a3b8; text-decoration: none; border-radius: 10px; 
    font-weight: 600; transition: all 0.2s; 
}
.nav-link:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-link.active { background: var(--brand-primary); color: white; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3); }

/* Conteúdo Principal (Suas Telas) */
.main-content { flex: 1; overflow-y: auto; padding: 30px; position: relative; }

/* ==========================================
   MOBILE VIEW (Telas menores que 768px)
========================================== */
@media (max-width: 768px) {
    body { flex-direction: column; }

    /* Barra Superior Fixa no Mobile */
    #mobile-topbar { 
        display: flex; 
        align-items: center; 
        gap: 15px;
        height: var(--topbar-height); 
        background: var(--bg-sidebar); 
        color: white; 
        padding: 0 20px; 
        position: fixed; 
        top: 0; left: 0; width: 100%; 
        z-index: 50; 
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    #menu-toggle { 
        background: none; border: none; color: white; cursor: pointer; 
        display: flex; align-items: center; justify-content: center;
    }
    .mobile-logo { font-weight: 700; font-size: 1.2rem; }

    /* Menu Lateral Oculto saindo da Esquerda */
    #global-sidebar { 
        position: fixed; 
        top: 0; left: 0; height: 100%; 
        transform: translateX(-100%); /* Escondido */
        box-shadow: 5px 0 25px rgba(0,0,0,0.5);
    }
    
    #global-sidebar.open { transform: translateX(0); /* Mostrado */ }

    /* Cabeçalho do menu mobile com botão Fechar */
    .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
    .sidebar-header h2 { margin-bottom: 0; }
    
    #menu-close { 
        display: block; background: none; border: none; 
        color: #94a3b8; font-size: 2rem; cursor: pointer; 
    }

    /* Película Escura no Fundo */
    #sidebar-overlay { 
        display: block; position: fixed; top: 0; left: 0; 
        width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); 
        backdrop-filter: blur(2px);
        opacity: 0; visibility: hidden; 
        transition: 0.3s; z-index: 90; 
    }
    #sidebar-overlay.show { opacity: 1; visibility: visible; }

    /* Ajuste da tela principal para não ficar atrás da topbar */
    .main-content { 
        padding: 15px; 
        margin-top: var(--topbar-height); /* Empurra o conteúdo pra baixo */
    }
}