/* ==================================================================
   ARQUIVO: style.css (TEMA FINAL - FUNDO #4F4F4F | CARDS #1C1C1C)
   ================================================================== */

:root {
    /* --- PALETA DE CORES PRINCIPAL --- */
    --cor-sidebar-bg: #1C1C1C;       /* Fundo Menu e Topo (Agora igual aos cards) */
    --cor-sidebar-text: #F8F8FF;     /* Texto/Ícones Menu e Topo */
    
    --cor-body-bg: #4F4F4F;          /* Fundo das Telas (Cinza Médio) */
    --cor-card-bg: #1C1C1C;          /* Fundo dos Cards/Infos (Preto Suave) */
    
    --cor-texto-principal: #F8F8FF;  /* Texto geral (Branco Fantasma) */
    --cor-texto-secundario: #B0B0B0; /* Texto secundário (Cinza Claro) */
    
    --cor-primaria: #0d6efd;         /* Azul Ação */
    --cor-borda: #333333;            /* Bordas sutis */
    
    --sidebar-width: 260px;
    --header-height: 60px;
    --card-radius: 8px;
}

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

body {
    background-color: var(--cor-body-bg);
    color: var(--cor-texto-principal);
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.2s; }

/* ==================================================================
   1. MENU LATERAL (SIDEBAR) - FIXO (#1C1C1C)
   ================================================================== */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    background-color: var(--cor-sidebar-bg);
    color: var(--cor-sidebar-text);
    border-right: 1px solid var(--cor-borda);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid var(--cor-borda);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-header img { max-height: 35px; width: auto; }

.menu-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px 0;
}
.menu-scroll-container::-webkit-scrollbar { width: 5px; }
.menu-scroll-container::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }

.sidebar-menu { list-style: none; padding: 0; }
.sidebar-menu .menu-header {
    padding: 20px 25px 5px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 0.5px;
}

.sidebar-menu li a {
    display: flex; align-items: center;
    padding: 12px 25px;
    color: var(--cor-sidebar-text);
    font-size: 0.95rem;
    border-left: 4px solid transparent;
}
.sidebar-menu li a:hover {
    background-color: #2a2a2a; /* Ligeiramente mais claro que o fundo */
    color: var(--cor-primaria);
}
.sidebar-menu li.active a {
    background-color: #2a2a2a;
    color: var(--cor-primaria);
    border-left-color: var(--cor-primaria);
    font-weight: 600;
}
.sidebar-menu li a i { width: 25px; margin-right: 10px; text-align: center; font-size: 1.1em; }

/* ==================================================================
   2. TOPO (HEADER) - FIXO (#1C1C1C)
   ================================================================== */
.main-header {
    height: var(--header-height);
    position: fixed;
    top: 0; left: var(--sidebar-width); right: 0;
    background-color: var(--cor-sidebar-bg); /* Mesmo fundo do menu */
    color: var(--cor-sidebar-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px;
    border-bottom: 1px solid var(--cor-borda);
    z-index: 900;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.welcome-message h1 { font-size: 1rem; margin: 0; font-weight: 500; color: #fff; }
.header-right .icon-group { display: flex; gap: 20px; align-items: center; }
.header-right i { font-size: 1.1rem; color: #ccc; cursor: pointer; }
.header-right i:hover { color: var(--cor-primaria); }

/* ==================================================================
   3. ÁREA PRINCIPAL
   ================================================================== */
.main-content {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    padding: 0;
    min-height: calc(100vh - var(--header-height));
}
.main-container { padding: 30px; max-width: 1600px; margin: 0 auto; }

/* Cards agora têm a mesma cor do Sidebar (#1C1C1C), mas sobre o fundo (#4F4F4F) */
.card-custom, .card-kpi, .table-custom-container, .filter-card, .modal-box, .content-card {
    background-color: var(--cor-card-bg);
    color: var(--cor-texto-principal);
    border-radius: var(--card-radius);
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border: 1px solid var(--cor-borda);
    margin-bottom: 25px;
}

/* --- ELEMENTOS GERAIS --- */
h1, h2, h3, h4, h5, h6 { color: #fff; }
.text-muted { color: #aaa !important; }
.text-dark-emphasis { color: #fff !important; }

/* Campos de Formulário */
.form-control, .form-select, input, select, textarea {
    background-color: #2c2c2c !important; 
    border: 1px solid #444 !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 10px;
}
.form-control:focus {
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
}

/* Tabelas */
.table-custom-container { padding: 0; overflow: hidden; }
.table-custom th {
    background-color: #111; color: #fff;
    font-weight: 600; padding: 15px; border-bottom: 2px solid #333;
}
.table-custom td {
    padding: 15px; border-bottom: 1px solid #333; color: #ddd;
}
.table-hover tbody tr:hover { background-color: #2a2a2a; }

/* Botões */
.btn-primary { background-color: var(--cor-primaria); border: none; }
.btn-outline-secondary { border-color: #666; color: #ccc; }
.btn-outline-secondary:hover { background-color: #333; color: #fff; }
.badge { font-weight: 500; }
.bg-light { background-color: #333 !important; color: #fff !important; border: none !important; }

/* KPIs */
.icon-box {
    width: 50px; height: 50px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-right: 15px;
}
.kpi-title { font-size: 0.85rem; color: #aaa; font-weight: 700; text-transform: uppercase; }
.kpi-value { font-size: 1.8rem; font-weight: 700; margin-top: 5px; color: #fff; }

.text-receita { color: #2ecc71 !important; }
.text-despesa { color: #e74c3c !important; }
.bg-receita-light { background-color: rgba(46, 204, 113, 0.15) !important; }
.bg-despesa-light { background-color: rgba(231, 76, 60, 0.15) !important; }
.bg-primary-light { background-color: rgba(13, 110, 253, 0.15) !important; }

.autocomplete-results { background-color: #2c2c2c; border: 1px solid #444; color: #fff; }
.autocomplete-item:hover { background-color: var(--cor-primaria); color: #fff; }