body {
    background-color: #f0f0f0; /* Um cinza bem claro só para ver se funciona */
}

.header {
    display: flex;
    justify-content: space-between; /* Alinha "Usuário" na esquerda e "Sair" na direita */
    align-items: center;
    padding: 10px 20px;
    background-color: #ffffff; /* Fundo branco */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra leve */
}

.header-info p {
    margin: 0;
    color: #333;
    font-size: 1.1rem;
}

.header-info p strong {
    color: #009688; /* Tom de Turquesa/Teal para o nome */
}

.logout-btn { 
    background-color: #dc3545; /* Vermelho para "Sair" */
    color: white; 
    padding: 10px 15px; 
    text-decoration: none; 
    border-radius: 5px; 
    border: none; 
    cursor: pointer; 
    font-size: 16px; 
    transition: background-color 0.3s;
}

.logout-btn:hover {
    background-color: #c82333;
}

/* --- Estilos do Painel de Botões --- */
.container {
    padding: 20px; /* Espaçamento geral */
}

.container h2 {
    color: #333;
    border-bottom: 2px solid #009688; /* Linha com a cor turquesa */
    padding-bottom: 5px;
}

.button-grid {
    display: grid;
    /* Cria 3 colunas. 'repeat(3, 1fr)' significa:
    Repita 3 vezes, cada uma com 1 fração (1fr) do espaço. 
    */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* Espaço (vão) entre os botões */
}

.function-button {
    background-color: #009688; /* Cor Turquesa/Teal Principal */
    color: white;
    padding: 30px 20px; /* Botões "altos" para fácil clique */
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    transition: background-color 0.3s; /* Efeito suave na cor */
}

.function-button:hover {
    background-color: #00796b; /* Tom mais escuro ao passar o mouse */
}

/* Estilo do Botão Primário (Nova Venda) */
.function-button.primary {
    background-color: #1abc9c; /* Tom de verde-água (mais claro) */
}

.function-button.primary:hover {
    background-color: #16a085; /* Versão mais escura dele */
}

/* --- ESTILOS DA PÁGINA DE NOVA VENDA --- */

.sale-container {
    display: flex; /* <-- A Mágica do Layout */
    gap: 20px;     /* Espaço entre as colunas */
}

/* Coluna da Esquerda (Cardápio) */
.product-list {
    flex: 2; /* Faz esta coluna ter 2/3 da largura */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Coluna da Direita (Carrinho) */
.cart {
    flex: 1; /* Faz esta coluna ter 1/3 da largura */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    align-self: flex-start; 
}

.cart-items {
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.category-block {
    margin-bottom: 20px;
}

.category-title {
    color: #009688; /* Turquesa */
    border-bottom: 2px solid #009688;
    padding-bottom: 5px;
}

.product-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer; 
    transition: background-color 0.2s;
}

.product-item:hover {
    background-color: #f9f9f9;
}

.product-name {
    font-weight: bold;
}

.product-price {
    color: #28a745; /* Verde */
}

/* --- ESTILOS DO CARRINHO (ATUALIZAÇÃO) --- */
.cart .product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-item-details {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaço entre o preço e o botão X */
}
.remove-item-btn {
    background-color: #ffc107; /* Amarelo/Laranja */
    color: #333;
    border: none;
    border-radius: 50%; /* Deixa redondo */
    width: 25px;
    height: 25px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    line-height: 25px; 
    text-align: center;
    transition: background-color 0.2s;
}
.remove-item-btn:hover {
    background-color: #e0a800;
}

.category-filters {
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin-bottom: 20px; 
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
}

.category-filter-btn {
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 10px 15px;
    border-radius: 20px; 
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s;
}

.category-filter-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}


.category-filter-btn.active {
    background-color: #009688; 
    color: white;
    border-color: #009688;
}

.product-block.hidden {
    display: none;
}

/* --- ESTILOS DA PÁGINA DE GERENCIAR ESTOQUE --- */

.stock-table {
    width: 100%;
    border-collapse: collapse; /* Tira as bordas duplas */
    margin-top: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.stock-table th,
.stock-table td {
    border: 1px solid #ddd;
    padding: 12px 15px; /* Mais espaçamento */
    text-align: left;
}

.stock-table th {
    background-color: #f8f9fa; /* Cabeçalho cinza claro */
    font-weight: bold;
    color: #333;
}

/* Zebra (linhas alternadas) */
.stock-table tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

.stock-table tbody tr:hover {
    background-color: #f1f1f1; /* Destaque ao passar o mouse */
}

/* Coluna de Ação (Input e Botão) */
.action-column {
    width: 250px; /* Largura fixa para os controles */
    text-align: center !important;
}

.action-cell {
    text-align: center;
}

.stock-update-form {
    display: flex;
    gap: 5px; /* Espaço entre o input e o botão */
}

.stock-input {
    width: 80px; /* Tamanho pequeno para o input */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.save-stock-btn {
    background-color: #007bff; /* Azul */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
}

.save-stock-btn:hover {
    background-color: #0056b3;
}

/* --- ESTILOS DO HEADER (ATUALIZAÇÃO) --- */

/* Um container para os botões no header */
.header-buttons {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre o botão Admin e o Sair */
}

/* O novo botão de Admin */
.admin-btn {
    background-color: #ffc107; /* Amarelo (cor de "alerta"/admin) */
    color: #333;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.2s;
}

.admin-btn:hover {
    background-color: #e0a800;
}

/* --- ESTILOS DO RELATÓRIO DE VENDAS --- */

.report-summary {
    background-color: #f7f7f7; /* Fundo cinza claro */
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
}

.report-summary h3 {
    margin: 0;
    color: #00796b; /* Nosso turquesa escuro */
    font-size: 1.5rem;
}

/* --- ESTILOS DO FECHAMENTO DE CAIXA (NOVO) --- */

.summary-box {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* Cores de status */
.expected { 
    background-color: #e9f5ff; 
    border: 1px solid #007bff; 
}
.alert { 
    background-color: #fcebeb; 
    border: 1px solid #dc3545; 
}
.success { 
    background-color: #ebfcf3; 
    border: 1px solid #28a745; 
}

/* Alinhamento de valores */
.valor { 
    font-weight: bold; 
    float: right; 
}

/* --- ESTILOS DO RELATÓRIO FINAL (AUDITORIA) --- */

.final-result {
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    margin-top: 40px;
}

/* Quebra de Caixa (Falta) */
.final-result.desquadre { 
    border: 2px solid #dc3545; 
    color: #dc3545; 
    background-color: #fcebeb; 
}

/* Caixa Bateu/Sobrou */
.final-result.quadre { 
    border: 2px solid #28a745; 
    color: #28a745; 
    background-color: #ebfcf3; 
}

.final-result h1 { 
    margin-bottom: 20px; 
}

.final-result p { 
    font-size: 1.2rem; 
}

.valor-final { 
    font-size: 2.5rem; 
    font-weight: bold; 
}

/* Estilo para garantir que o campo de input seja grande e visível */
.form-card input[type="number"] {
    font-size: 1.5rem !important;
}

.payment-method-container {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.payment-method-container h4 {
    margin: 0 0 10px 0;
}

.payment-options {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* Esconde o 'radio button' (a bolinha) real */
.payment-options input[type="radio"] {
    display: none;
}

/* Estiliza o 'label' (o texto) para parecer um botão */
.payment-btn {
    flex: 1; /* Faz os 3 botões ocuparem o mesmo espaço */
    padding: 12px 5px;
    border: 1px solid #009688; /* Turquesa */
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    color: #009688;
    cursor: pointer;
    transition: all 0.2s;
}

/* O estilo do botão QUANDO ESTÁ SELECIONADO */
.payment-options input[type="radio"]:checked + .payment-btn {
    background-color: #009688; /* Turquesa */
    color: white;
}

.payment-options input[type="radio"]:hover + .payment-btn {
    background-color: #f0fdfa;
}