/* =========================================================================
   RESET E CONFIGURAÇÕES GERAIS
   ========================================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root { 
    --bg-color: #1e1e2e; 
    --panel-bg: #2a2a3f; 
    --text-main: #cdd6f4; 
    --accent: #89b4fa; 
    --danger: #f38ba8; 
    --success: #a6e3a1; 
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    display: flex; 
    height: 100vh;
    overflow: hidden; 
}

/* =========================================================================
   ESTILOS DAS LOGOS (TAMANHO AJUSTADO)
   ========================================================================= */
.logo-admin {
    width: 160px; 
    height: auto;
    display: block;
    margin: 0 auto 15px auto; 
}

.logo-sidebar {
    width: 130px; 
    height: auto;
    display: block;
    margin: 0 auto 10px auto; 
}

/* =========================================================================
   TELA DE LOGIN
   ========================================================================= */
.login-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 10px; 

.login-box {
    background-color: var(--panel-bg);
    padding: 25px 20px; 
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.login-box h2 {
    color: var(--accent);
    margin-bottom: 15px; 
}
/* =========================================================================
   ESTILOS DO CAMPO DE SENHA COM OLHO
   ========================================================================= */
.senha-container {
    position: relative;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 8px;
}

.senha-container input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 40px;
    margin: 0;
}

.toggle-senha {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #a6adc8;
    display: flex;
    align-items: center;
    transition: color 0.2s ease-in-out;
}

.toggle-senha:hover { color: var(--text-main); }

/* =========================================================================
   ESTRUTURA DO PAINEL ADMIN (ESPAÇAMENTO REDUZIDO)
   ========================================================================= */
.sidebar { 
    width: 250px; 
    background-color: var(--panel-bg); 
    height: 100vh; 
    padding: 15px; 
    flex-shrink: 0; 
    display: none; 
}

.sidebar h2 { 
    color: var(--accent); 
    border-bottom: 1px solid #45475a; 
    padding-bottom: 10px; 
    margin-bottom: 15px;
}

.sidebar h3 { font-size: 16px; margin-bottom: 10px; }

.main-content { 
    flex: 1; 
    padding: 15px 25px;
    overflow-y: auto; 
    height: 100vh; 
    display: none; 
}

.main-content h2 {
    margin-top: 5px;
    margin-bottom: 20px;
    border-bottom: 1px solid #2a2a3f;
    padding-bottom: 10px;
}

/* =========================================================================
   COMPONENTES E BOTOES
   ========================================================================= */
input, button, select { 
    padding: 12px; margin: 8px 0; border-radius: 5px; 
    border: 1px solid #45475a; background-color: var(--bg-color); 
    color: var(--text-main); font-size: 14px; width: 100%; 
}

button { 
    background-color: var(--accent); color: #11111b; cursor: pointer; 
    font-weight: bold; border: none; transition: opacity 0.2s;
}

button:hover { opacity: 0.9; }

.btn-danger { background-color: var(--danger); color: #11111b; }

/* CARDS */
.card { 
    background-color: var(--panel-bg); padding: 15px 20px; margin-bottom: 15px; 
    border-radius: 8px; display: flex; justify-content: space-between; 
    align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card strong { font-size: 18px; }
.actions { display: flex; gap: 10px; }
.actions button { width: auto; margin: 0; padding: 10px 15px; }

/* MODAL */
.modal { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.7); justify-content: center; align-items: center; 
    z-index: 1000; padding: 20px;
}

.modal-content { 
    background-color: var(--panel-bg); padding: 30px; border-radius: 10px; 
    width: 100%; max-width: 600px; max-height: 85vh; overflow-y: auto; 
}

.filtros { display: flex; gap: 10px; margin: 20px 0; }
.filtros button { flex: 1; font-size: 12px; padding: 10px 5px; }

.comentario-box { 
    background: var(--bg-color); padding: 15px; border-radius: 5px; 
    margin-bottom: 10px; border-left: 4px solid var(--accent); 
}

/* =========================================================================
   MEDIA QUERIES - RESPONSIVIDADE
   ========================================================================= */
@media (max-width: 768px) {
    body { flex-direction: column; overflow-y: auto; height: auto; }
    .sidebar { width: 100%; height: auto; border-bottom: 2px solid #45475a; padding: 20px; }
    .main-content { width: 100%; height: auto; padding: 20px; overflow-y: visible; }
    .card { flex-direction: column; align-items: flex-start; gap: 15px; }
    .actions { width: 100%; flex-direction: column; gap: 10px; }
    .actions button { width: 100%; padding: 14px; font-size: 15px; }
    .filtros { flex-wrap: wrap; gap: 8px; }
    .filtros button { flex: calc(50% - 4px); font-size: 13px; padding: 12px; }
}

@media (max-width: 480px) {
    .login-box { padding: 30px 20px; }
    .modal-content { padding: 20px 15px; }
    .filtros button { flex: 100%; }
}