:root {
    --bg-principal: #f4f6f9;
    --bg-painel: #ffffff;
    --texto-principal: #333333;
    --texto-secundario: #666666;
    --borda: #cccccc;
    --bg-menu: #e2e8f0;
    --hover-menu: #cbd5e1;
    --cor-destaque: #0056b3;
    --bg-tabela-header: #e9ecef;
}

[data-theme="dark"] {
    --bg-principal: #121212;
    --bg-painel: #1e1e1e;
    --texto-principal: #e0e0e0;
    --texto-secundario: #a0a0a0;
    --borda: #333333;
    --bg-menu: #252525;
    --hover-menu: #3a3a3a;
    --cor-destaque: #4da3ff;
    --bg-tabela-header: #2c2c2c;
}

body {
    margin: 0; padding: 0; font-family: Arial, sans-serif;
    background-color: var(--bg-principal); color: var(--texto-principal);
    display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}

/* Cabeçalho */
header {
    display: flex; justify-content: space-between; align-items: center;
    background-color: var(--bg-painel); border-bottom: 2px solid var(--borda);
    padding: 5px 20px; height: 70px; z-index: 10;
}
.header-esquerda { display: flex; align-items: center; gap: 15px; }

/* Estilo para a imagem da Logo */
.logo-img { height: 55px; width: auto; object-fit: contain; padding: 2px; }

.titulo-sistema h1 { margin: 0; font-size: 18px; font-weight: bold; color: var(--cor-destaque); }
.titulo-sistema p { margin: 0; font-size: 11px; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 1px; }

/* --- AJUSTE DOS BOTÕES DO CABEÇALHO AQUI --- */
.header-direita { display: flex; align-items: center; gap: 15px; font-size: 14px; }
.btn-header { 
    background: var(--bg-menu); border: 1px solid var(--borda); color: var(--texto-principal); 
    padding: 0 15px; cursor: pointer; border-radius: 4px; font-weight: bold; font-size: 13px; 
    height: 36px; display: flex; align-items: center; justify-content: center;
}
.btn-header:hover { background: var(--hover-menu); }
.btn-sair { background: #c0392b; color: white; border: none; }
.btn-sair:hover { background: #e74c3c; }

/* Área de Trabalho */
.area-trabalho { display: flex; flex: 1; overflow: hidden; }

/* Menu Lateral */
aside {
    width: 170px; 
    background-color: var(--bg-menu); border-right: 2px solid var(--borda);
    padding: 10px; 
    display: flex; flex-direction: column; gap: 8px; 
    transition: width 0.3s;
    overflow-x: hidden; /* Trava inserida para garantir que ele retraia */
}
aside.recolhido { width: 40px; }
aside.recolhido .btn-menu span { display: none; }
.btn-recolher { background: none; border: 2px solid var(--borda); font-size: 18px; cursor: pointer; color: var(--texto-principal); margin-bottom: 10px; padding: 4px; }

/* Botões do Menu */
.btn-menu { 
    background-color: var(--bg-painel); border: 2px solid var(--borda); 
    color: var(--texto-principal); padding: 8px; 
    cursor: pointer; text-align: left; font-weight: bold; 
    font-size: 13px; 
    white-space: normal; line-height: 1.2; border-radius: 4px; 
}
.btn-menu:hover { background-color: var(--hover-menu); }

/* Palco Central e Tabela */
main { flex: 1; padding: 10px; overflow: hidden; display: flex; flex-direction: column; }

.tabela-container {
    flex: 1; overflow-x: auto; overflow-y: auto;
    background-color: var(--bg-painel); border: 2px solid var(--borda);
}

table { border-collapse: collapse; min-width: 100%; font-size: 13px; }

th, td { 
    border: 1px solid var(--borda); 
    padding: 6px 10px; 
    text-align: left; 
    word-wrap: break-word; 
    height: 48px; 
    vertical-align: middle;
    box-sizing: border-box; /* A SOLUÇÃO MÁGICA CONTRA O ESMAGAMENTO DE COLUNAS */
}

/* AQUI MANTIVE O SEU CÓDIGO ORIGINAL QUE CONGELA O TOPO E DEIXA ARRASTAR NATIVO */
th { background-color: var(--bg-tabela-header); font-weight: bold; position: sticky; top: 0; z-index: 5; resize: horizontal; overflow: hidden; }
tr:hover td { background-color: var(--hover-menu); }

/* Colunas Congeladas Gerais */
.col-fixa { position: sticky; background-color: var(--bg-painel); z-index: 6; white-space: nowrap; }
th.col-fixa { background-color: var(--bg-tabela-header); z-index: 10; }

/* CONGELAMENTO ESPECÍFICO PARA A PLANILHA */
.fixa-check { left: 0; min-width: 45px; max-width: 45px; width: 45px; text-align: center; padding: 4px; }
.fixa-btn { left: 45px; min-width: 45px; max-width: 45px; width: 45px; text-align: center; padding: 4px; }
.fixa-linha { left: 90px; min-width: 60px; max-width: 60px; width: 60px; text-align: center; padding: 4px; font-weight: bold; color: var(--texto-secundario); background-color: var(--bg-tabela-header);}
.fixa-cod { left: 150px; min-width: 150px; text-align: left; padding: 4px; font-weight: bold;}

/* CONGELAMENTO ESPECÍFICO PARA O BLING */
.b-fixa-check { left: 0; min-width: 45px; max-width: 45px; width: 45px; text-align: center; padding: 4px; }
.b-fixa-btn { left: 45px; min-width: 45px; max-width: 45px; width: 45px; text-align: center; padding: 4px; }
.b-fixa-cod { left: 90px; min-width: 70px; max-width: 70px; width: 70px; text-align: center; padding: 4px; font-weight: bold;}


.btn-editar { cursor: pointer; background: transparent; border: 1px solid var(--borda); border-radius: 3px; font-size: 14px; padding: 2px 6px; }
.btn-editar:hover { background: #e0e0e0; }
.txt-centro { text-align: center; }

/* --- Estilos das Janelas (Modais) --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; justify-content: center; align-items: center; z-index: 100;
}
.modal-box {
    background-color: var(--bg-painel); padding: 20px; border-radius: 8px;
    border: 2px solid var(--borda); width: 400px; max-width: 90%;
    display: flex; flex-direction: column; gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.modal-box.larga { width: 700px; } /* Janela mais larga para editar produtos */
.modal-box h3 { margin: 0; text-align: center; color: var(--texto-principal); }
.modal-botoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
.btn-salvar { background-color: var(--cor-destaque); color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; font-weight: bold;}
.btn-salvar:hover { filter: brightness(1.1); }
.btn-cancelar { background-color: var(--bg-menu); color: var(--texto-principal); border: 1px solid var(--borda); padding: 10px; border-radius: 4px; cursor: pointer; font-weight: bold;}
.btn-cancelar:hover { background-color: var(--hover-menu); }

/* Grid para organizar os campos lado a lado */
.grid-edicao { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.campo-grupo { display: flex; flex-direction: column; gap: 5px; }
.campo-grupo label { font-size: 12px; font-weight: bold; }
.campo-texto { padding: 10px; border: 1px solid var(--borda); border-radius: 4px; background-color: var(--bg-principal); color: var(--texto-principal); width: 100%; box-sizing: border-box; }

/* --- ANIMAÇÃO DE LOADING (IMPORTAÇÃO) --- */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================================
   ESTILOS EXCLUSIVOS DO DASHBOARD E NOTIFICAÇÕES 
======================================================== */
.painel-dashboard {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

.resumo-coluna { display: flex; flex-direction: column; gap: 15px; }
.card-resumo {
    background: var(--bg-menu);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.card-resumo .icone { font-size: 32px; }
.card-resumo .dados { text-align: right; }
.card-resumo h4 { margin: 0; font-size: 14px; color: var(--texto-secundario); font-weight: normal; }
.card-resumo p { margin: 5px 0 0 0; font-size: 24px; font-weight: bold; color: var(--texto-principal); }

.feed-container {
    background: var(--bg-menu);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    height: 500px; 
    display: flex;
    flex-direction: column;
}
.feed-container h3 { margin-top: 0; margin-bottom: 10px; color: var(--texto-principal); border-bottom: 1px solid var(--borda); padding-bottom: 10px; flex-shrink: 0;}

#feed-eventos {
    overflow-y: auto;
    flex: 1;
    padding-right: 10px;
}
#feed-eventos::-webkit-scrollbar { width: 6px; }
#feed-eventos::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
#feed-eventos::-webkit-scrollbar-track { background: transparent; }

.evento-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--borda);
    align-items: center;
}
.evento-item:last-child { border-bottom: none; }

.evento-icone {
    width: 45px; height: 45px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: white; flex-shrink: 0;
}

.evento-img {
    width: 45px; height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid;
    flex-shrink: 0;
}

.evento-detalhes { flex: 1; }
.evento-detalhes strong { display: block; color: var(--texto-principal); font-size: 15px; margin-bottom: 3px; }
.evento-detalhes span { color: var(--texto-secundario); font-size: 13px; }
.evento-tempo { font-size: 12px; color: #95a5a6; white-space: nowrap; font-weight: bold; }

/* Cores de Fundo (Para os Emojis) */
.bg-venda { background-color: #27ae60; } /* Verde - Vendas */
.bg-novo { background-color: #2980b9; }  /* Azul - Novo Produto */
.bg-edicao { background-color: #f39c12; } /* Laranja - Produto Editado */
.bg-exclusao { background-color: #e74c3c; } /* Vermelho - Produto Excluído */
.bg-cancela { background-color: #c0392b; } /* Vermelho Escuro - Venda Cancelada */
.bg-estoque { background-color: #8e44ad; } /* NOVO: Roxo - Ajuste de Estoque */

/* Cores de Borda (Para as Imagens) */
.border-venda { border-color: #27ae60; }
.border-novo { border-color: #2980b9; }
.border-edicao { border-color: #f39c12; }
.border-exclusao { border-color: #e74c3c; }
.border-cancela { border-color: #c0392b; }
.border-estoque { border-color: #8e44ad; } /* NOVO: Roxo - Ajuste de Estoque */

/* Responsividade do Dashboard */
@media (max-width: 900px) {
    .painel-dashboard { grid-template-columns: 1fr; }
    .resumo-coluna { flex-direction: row; flex-wrap: wrap; }
    .card-resumo { flex: 1; min-width: 200px; }
}

/* ========================================================
   MULTI-AVATARES (BOLINHAS SOBREPOSTAS DO FEED)
======================================================== */
.avatar-unico { 
    width: 45px; height: 45px; border-radius: 50%; 
    object-fit: cover; flex-shrink: 0; border: 2px solid var(--borda); 
}
.avatar-grupo { 
    display: flex; align-items: center; position: relative; 
    width: 65px; height: 45px; flex-shrink: 0; 
}
.avatar-img-1 { 
    width: 45px; height: 45px; border-radius: 50%; object-fit: cover; 
    position: absolute; left: 0; z-index: 2; border: 2px solid var(--bg-menu); 
}
.avatar-img-2 { 
    width: 45px; height: 45px; border-radius: 50%; object-fit: cover; 
    position: absolute; left: 20px; z-index: 1; border: 2px solid var(--bg-menu); opacity: 0.9; 
}
.avatar-contador { 
    position: absolute; left: 40px; z-index: 3; background: var(--cor-destaque); 
    color: #fff; border-radius: 50%; width: 28px; height: 28px; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 11px; font-weight: bold; border: 2px solid var(--bg-menu); 
}