/* =================================================== */
/* === FOLHA DE ESTILOS PRINCIPAL - PONTO ELETRÔNICO === */
/* =================================================== */

/* --- 1. VARIÁVEIS GLOBAIS DE CORES E TAMANHOS --- */
/* Usar variáveis torna a troca de cores no futuro muito mais fácil. */
:root {
    --navbar-height: 56px;
    --warning-light: #f39c12;
    --warning-dark: #fd7e14;
    --light-bg: #f8f9fa;
    --light-text: #212529;
    --dark-bg: #2e2e2e;
    --dark-text: white;
}

/* --- 2. ESTILOS GERAIS E MODO CLARO/ESCURO --- */
/* Estilos aplicados ao corpo da página (body). */
body {
    /* Adiciona um espaçamento no topo para não ficar atrás da navbar fixa */
    padding-top: var(--navbar-height);
    /* Efeito de transição suave ao trocar de tema */
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.light-mode {
    background-color: var(--light-bg);
    color: var(--light-text);
}

body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

/* --- 3. COMPONENTES DE LAYOUT --- */

/* Barra de Navegação Superior (Navbar) */
.navbar {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.light-mode .navbar { background-color: var(--warning-light); }
.dark-mode .navbar { background-color: var(--warning-dark); }
.dark-mode .navbar-brand { color: white; } /* Garante que a marca fique branca no modo escuro */

/* Conteúdo Principal (Main) */
main {
    padding-left: 15px;
    padding-right: 15px;
}

/* --- 4. COMPONENTES ESPECÍFICOS --- */

/* Cards do Dashboard */
.card-dashboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 10px;
    background-color: #dee2e6; /* Cor de fundo padrão dos cards */
    min-height: 120px;
    transition: transform 0.4s ease, box-shadow 0.5s ease;
    cursor: pointer;
    position: relative; /* Necessário para o pseudo-elemento ::after */
    overflow: hidden; /* Garante que a borda colorida não vaze */
}

/* Efeito de sombra ao passar o mouse */
.card-dashboard:hover {
    transform: translateY(-8px) scale(1.03);
}
.card-yellow:hover { box-shadow: 0 0 40px #f39c12; }
.card-blue:hover { box-shadow: 0 0 40px #00bcd4; }
.card-green:hover { box-shadow: 0 0 40px #4caf50; }
.card-pink:hover { box-shadow: 0 0 40px #e91e63; }
.card-purple:hover { box-shadow: 0 0 40px #673ab7; }
.card-teal:hover { box-shadow: 0 0 40px #26a69a; }
.card-red:hover { box-shadow: 0 0 40px #f44336; }
.card-indigo:hover { box-shadow: 0 0 40px #3f51b5; }


/* Estilos para o conteúdo dentro dos cards */
.card-dashboard i {
    font-size: 1.5rem;
    margin-bottom: 5px;
}
.card-dashboard h5 {
    font-size: 1rem;
    margin-top: 5px;
}
/* Garante que o texto dos cards fique sempre escuro para melhor contraste */
.dark-mode .card-dashboard i,
.dark-mode .card-dashboard h5 {
    color: #212529;
}

/* Efeitos de cores para as "bordas" inferiores dos cards */
/* ::after cria um "falso" elemento dentro do card, que estilizamos como uma borda */
.card-dashboard::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
    border-radius: 0 0 20px 20px;
    transition: background 0.5s ease;
}
.card-dashboard:hover::after {
    background: transparent; /* A borda some para dar lugar à sombra */
}

/* Define a cor da borda para cada classe de card */
.card-yellow::after { background: #f39c12; }
.card-blue::after { background: #00bcd4; }
.card-green::after { background: #4caf50; }
.card-pink::after { background: #e91e63; }
.card-purple::after { background: #673ab7; }
.card-teal::after { background: #26a69a; }
.card-red::after { background: #f44336; }
.card-indigo::after { background: #3f51b5; }


/* =================================================== */
/* === LÓGICA PARA TROCA DE LOGO (MODO CLARO/ESCURO) === */
/* =================================================== */

/* Por padrão, a logo do modo claro (logo1) é visível */
.logo-light {
    display: block;
    margin: 0 auto; /* Centraliza a imagem */
}

/* E a logo do modo escuro (logo2) fica totalmente escondida */
.logo-dark {
    display: none;
    margin: 0 auto;
}

/* Quando o <body> tiver a classe .dark-mode... */
.dark-mode .logo-light {
    display: none; /* Escondemos a logo clara */
}

.dark-mode .logo-dark {
    display: block; /* E mostramos a logo escura */
}


/* Adicione esta regra ao final do seu arquivo style.css */
.tfoot-amarelo {
    background-color: #f39c12; /* Mesma cor do --warning-light */
    color: white;
    font-weight: bold;
}