/* Local: frontend/css/style.css */
* {
    margin: 0; padding: 0; box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    /* 1. O FUNDO CYBER-FUTURISTA */
    /* Substitua a URL se você mudou o nome do arquivo. */
    background-image: url('../img/background.jpg');
    
    /* Faz a imagem cobrir a tela inteira */
    background-size: cover;
    
    /* Impede que a imagem role com a página, criando um efeito premium */
    background-attachment: fixed;
    
    /* Centraliza a imagem */
    background-position: center;
    
    color: #ffffff;
    display: flex; flex-direction: column; min-height: 100vh;
}

/* 2. O OVERLAY DE LEITURA */
/* Criamos uma camada escura semi-transparente sobre a imagem de fundo */
/* Isso garante que qualquer texto ou card branco permaneça 100% legível. */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Ajuste o 0.85 para mais escuro ou 0.7 para mais claro. */
    background-color: rgba(18, 18, 18, 0.85); 
    
    z-index: -1; /* Fica atrás de todo o conteúdo */
}

/* --- MENU DE NAVEGAÇÃO (DESIGN PREMIUM E TRANSPARENTE) --- */
.navbar {
    background-color: rgba(30, 30, 30, 0.9); /* Semi-transparente */
    padding: 10px 20px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Sutil */
    position: sticky; top: 0; z-index: 100;
}
.nav-brand { color: #00d2ff; font-weight: bold; font-size: 1.2rem; text-decoration: none; text-shadow: 0 0 5px rgba(0, 210, 255, 0.5); }
.nav-links { display: flex; gap: 15px; align-items: center; }
.nav-link { color: #aaa; text-decoration: none; font-size: 14px; cursor: pointer; transition: 0.2s; }
.nav-link:hover { color: white; }
.nav-link.active { color: #00d2ff; font-weight: bold; }

/* --- CONTAINERS E LAYOUT --- */
.container {
    background-color: rgba(30, 30, 30, 0.95); /* Quase opaco */
    padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    width: 350px; text-align: center;
    margin: 20px auto;
}
.dashboard-layout {
    width: 90%; max-width: 900px; padding: 15px;
    display: flex; flex-direction: column; gap: 15px; margin: 20px auto;
}

h2 { margin-bottom: 5px; color: #00d2ff; font-size: 1.5rem; text-shadow: 0 0 5px rgba(0, 210, 255, 0.5);}
h3 { color: #00d2ff; margin-bottom: 5px; font-size: 1.1rem; text-shadow: 0 0 5px rgba(0, 210, 255, 0.5);}
p { margin-bottom: 10px; font-size: 13px; color: #aaa; }

/* --- INPUTS --- */
input, textarea {
    width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px;
    background-color: rgba(42, 42, 42, 0.5); /* Semi-transparente */
    color: white; font-size: 13px; transition: 0.2s;
}
input:focus, textarea:focus {
    border-color: #00d2ff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}
textarea { resize: vertical; min-height: 60px; }
input[type="file"] { padding: 3px; background: none; border: 1px dashed rgba(255, 255, 255, 0.3);}

/* --- BOTÕES (COM EFEITO NEON SUTIL) --- */
button, .download-btn {
    width: 100%; padding: 8px; background-color: #0078d7;
    color: white; border: none; border-radius: 4px; cursor: pointer;
    font-weight: bold; text-decoration: none; display: inline-block; font-size: 13px; transition: 0.2s;
}
button:hover, .download-btn:hover { 
    background-color: #005a9e;
    box-shadow: 0 0 15px rgba(0, 120, 215, 0.7); /* Brilho neon */
}
.link-btn { background: none; color: #aaa; margin-top: 10px; font-size: 12px; width: auto;}
.link-btn:hover { background: none; text-decoration: underline; color: white;}

/* --- TABELAS E CARDS (O DESIGN DE VIDRO CYBER) --- */
.card {
    /* 3. O EFEITO DE VIDRO SEMI-TRANSPARENTE */
    background-color: rgba(42, 42, 42, 0.9); /* 90% opaco para deixar ver o fundo */
    padding: 15px; border-radius: 8px; text-align: left;
    
    /* 4. O BRILHO DE BORDA NEON */
    border: 2px solid #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4); /* Halo de brilho sutil */
}
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px;}
th, td { padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: left; vertical-align: middle;}
th { color: #aaa; font-weight: normal;}

/* --- UTILITÁRIOS --- */
.upload-form { gap: 5px; margin-top: 10px; }
.btn-danger { background-color: #ff4d4d; width: auto; padding: 5px 10px; font-size: 11px;}
.btn-danger:hover { 
    background-color: #cc0000;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.7);
}
#message, .msg-admin { margin-top: 10px; font-size: 13px; font-weight: bold; text-align: center;}