/* public/css/style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    margin: 0;
    background-color: var(--bg-color); /* Usa a cor de fundo da variável de tema */
    color: var(--text-color);
    transition: background-color 0.2s, color 0.2s;
    font-size: 14px;
    line-height: 1.6;
    /* Removido background da abelha daqui para aplicar apenas no tema escuro (nas páginas do dashboard) */
    /* background-image: url('/images/abelha011.png'); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    /* background-attachment: fixed; */
}

/* Aplicar imagem de fundo da abelha apenas no body da página de login */
body:has(.login-container) {
    background-image: url('/images/abelha011.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* === ESTILOS MODERNOS PARA PÁGINA DE LOGIN (REMOVER OU COMENTAR) === */
/* .login-page-body { ... } */
/* .login-wrapper { ... } */
/* .login-info-panel { ... } */
/* .login-info-panel.collapsed { ... } */
/* .login-info-content { ... } */
/* .login-info-logo { ... } */
/* .login-info-panel h1 { ... } */
/* .login-info-panel p { ... } */
/* .login-form-panel { ... } */
/* .login-info-panel.collapsed + .login-form-panel { ... } */
/* .login-form-container h2 { ... } */
/* .login-form-logo-mobile { ... } */
/* .login-form-panel .input-group { ... } */
/* .login-form-panel .input-group label { ... } */
/* .login-form-panel .input-with-icon i { ... } */
/* .login-form-panel .input-with-icon input { ... } */
/* .login-form-panel .input-with-icon input::placeholder { ... } */
/* .form-actions { ... } */
/* .login-form-panel .btn-login { ... } */
/* .login-form-panel .btn-login i { ... } */
/* .login-form-panel .btn-login:hover { ... } */
/* .login-form-panel .login-footer-text { ... } */
/* .login-form-panel .error-message { ... } */
/* @media (max-width: 800px) { ... } */
/* @media (max-width: 480px) { ... } */

/* === FIM ESTILOS MODERNOS PARA PÁGINA DE LOGIN === */

/* Estilos antigos de .login-container, .login-box etc. devem ser removidos ou comentados
   para evitar conflitos. Os estilos abaixo são os genéricos que já existiam 
   e podem precisar de ajuste ou remoção se sobrepostos pelos novos. */

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px; /* Manter padding */
}

.login-box {
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente escuro */
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra mais pronunciada com fundo transparente */
    width: 100%;
    max-width: 400px;
    text-align: center;
    color: white; /* Garantir que o texto dentro da caixa seja legível */
    border: 2px solid var(--primary-color); /* Bordas douradas */
}

.login-box-logo {
    max-width: 150px; /* Ajuste o tamanho da logo conforme necessário */
    height: auto;
    margin-bottom: 20px; /* Espaço abaixo da logo */
}

.login-box h2 {
    margin-bottom: 25px;
    color: white; /* Título branco */
    font-size: 1.6em;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: #ccc; /* Labels em cinza claro */
    font-size: 0.9em;
    font-weight: 500;
}

.input-with-icon {
    position: relative;
}

.input-with-icon > i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa; /* Cor dos ícones */
    font-size: 0.95em;
}

.input-with-icon input[type="email"],
.input-with-icon input[type="password"] {
    width: 100%;
    padding: 12px 15px 12px 45px; /* Aumentado padding para acomodar ícone */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borda semi-transparente clara */
    border-radius: 5px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.1); /* Fundo do input semi-transparente */
    color: white; /* Texto do input branco */
    font-size: 1em; /* Tamanho de fonte um pouco maior para inputs */
}

.input-with-icon input[type="email"]::placeholder,
.input-with-icon input[type="password"]::placeholder {
    color: #ccc; /* Placeholder em cinza claro */
    opacity: 0.8;
}

.btn-login {
    width: 100%;
    padding: 12px 15px;
    background-color: #f8c146; /* Botão com cor primária (amarelo/dourado) */
    color: #0d1117; /* Texto do botão escuro */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1.05em;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-login i {
    margin-right: 8px;
}

.btn-login:hover {
    background-color: #e0ac30; /* Cor do hover mais escura */
}

.login-footer-text {
    margin-top: 30px;
    color: #ccc; /* Texto do footer em cinza claro */
    font-size: 0.85em;
}

/* FIM Estilos da Página de Login Aprimorados */

/* Estilos para mensagem de erro e sucesso */
.error-message, .success-message {
    padding: 8px 10px;
    border-radius: 3px;
    margin-bottom: 10px;
    font-size: 11px;
    border: 1px solid transparent;
}
.error-message {
    color: #ff8991; /* Cor do texto de erro */
    background-color: rgba(255, 0, 0, 0.2); /* Fundo de erro semi-transparente */
    border-color: #a13a45; /* Borda de erro */
}

.success-message {
    color: #89f19c; /* Cor do texto de sucesso */
    background-color: rgba(0, 255, 0, 0.2); /* Fundo de sucesso semi-transparente */
    border-color: #3aa14a; /* Borda de sucesso */
}

/* Layout do Dashboard */
.dashboard-layout {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 60px; /* Largura inicial recolhida */
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
    padding-top: 15px;
    padding-bottom: 15px;
    transition: width 0.3s ease;
    overflow-x: hidden;
    flex-shrink: 0; /* Impede que o sidebar encolha */
    height: 100vh; /* Ocupa a altura total da viewport */
    z-index: 1000;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    overflow-y: auto; /* Para scroll interno se necessário */
    position: fixed; /* Mantém o sidebar fixo na tela */
    top: 0;
    left: 0;
}

/* Estado expandido do sidebar */
.sidebar-is-expanded .sidebar {
    width: 200px;
}

.sidebar-header {
    margin-bottom: 20px;
    /* padding: 0 10px; */ /* Removido padding para centralizar melhor o ícone */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza ícone no modo recolhido */
    height: 48px; /* Altura similar aos links */
}

.sidebar-is-expanded .sidebar-header {
    justify-content: flex-start;
    padding-left: 15px; /* Padding à esquerda no modo expandido */
    padding-right: 15px;
}

.sidebar-header i {
    font-size: 1.5em;
    min-width: 60px; /* Largura do sidebar recolhido para centralizar */
    text-align: center;
    transition: min-width 0.3s ease, margin-right 0.3s ease;
    line-height: normal; /* Reset line-height */
}

.sidebar-is-expanded .sidebar-header i {
    min-width: auto;
    margin-right: 10px;
    line-height: normal; /* Reset line-height */
}

.sidebar-header .sidebar-title {
    display: none;
    opacity: 0;
    transition: opacity 0.2s 0.1s ease-in-out;
    white-space: nowrap;
    font-size: 1.1em; /* Ajustar tamanho do título */
    font-weight: 600;
}

.sidebar-is-expanded .sidebar-header .sidebar-title {
    display: inline;
    opacity: 1;
}

.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-nav li a {
    display: flex;
    align-items: center;
    color: var(--sidebar-text);
    text-decoration: none;
    justify-content: center; /* Centraliza ícone no modo recolhido */
    height: 48px;
    box-sizing: border-box;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, padding 0.3s ease, justify-content 0.3s ease;
    padding: 0; /* Removido padding horizontal aqui, será no ícone/texto */
}

.sidebar-is-expanded .sidebar-nav li a {
    justify-content: flex-start;
    padding: 0 15px; /* Padding normal no modo expandido */
}

.sidebar-nav li a i {
    font-size: 1.2em;
    min-width: 60px; /* Largura do sidebar recolhido para centralizar */
    text-align: center;
    transition: min-width 0.3s ease, margin-right 0.3s ease;
    line-height: normal; /* Reset line-height */
}

.sidebar-is-expanded .sidebar-nav li a i {
    min-width: auto;
    margin-right: 10px;
    line-height: normal; /* Reset line-height */
}

.sidebar-nav li a .link-text {
    display: none;
    opacity: 0;
    transition: opacity 0.2s 0.1s ease-in-out;
}

.sidebar-is-expanded .sidebar-nav li a .link-text {
    display: inline;
    opacity: 1;
}

.sidebar-nav li a:hover {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-hover-color);
}

.sidebar-nav li a.active {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--sidebar-link-hover-color);
    font-weight: bold;
}

/* Main Content Container - Ocupa o restante da largura e gerencia o scroll */
.main-content-wrapper {
    flex-grow: 1; /* Permite que este container ocupe o espaço restante */
    display: flex;
    flex-direction: column; /* Conteúdo interno (header + content-area) empilhado verticalmente */
    margin-left: 60px; /* Dá espaço para o sidebar recolhido */
    transition: margin-left 0.3s ease;
    /* Remover overflow-y daqui, o scroll será na content-area */
}

.sidebar-is-expanded .main-content-wrapper {
    margin-left: 200px; /* Ajusta a margem para o sidebar expandido */
}

/* Header */
.top-header {
    width: 100%; /* Ocupa a largura total do seu container (main-content-wrapper) */
    position: sticky; /* Faz o header grudar no topo enquanto scrolla dentro do main-content-wrapper */
    top: 0; /* Ancorar no topo do container scrollável */
    z-index: 999; /* Garante que fique acima do conteúdo */
    background-color: var(--header-bg); /* Usa a variável de tema (transparente no dark mode) */
    color: var(--header-text); /* Usa a variável de tema */
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* Impede que o header encolha */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    /* Removido margin-left daqui */
}

.top-header .header-title {
    display: flex; /* Para alinhar a logo verticalmente se necessário */
    align-items: center;
}

.header-logo {
    height: 15px; /* Ajuste a altura conforme necessário */
    width: auto;
    margin: 0; /* Remove margens do h1 que existia antes */
}

/* Esconde a logo branca por padrão (tema claro) */
html[data-theme='light'] .header-logo.logo-white {
    display: none;
}
html[data-theme='light'] .header-logo.logo-red {
    display: inline-block;
}

/* Esconde a logo vermelha e mostra a branca no tema escuro */
html[data-theme='dark'] .header-logo.logo-red {
    display: none;
}
html[data-theme='dark'] .header-logo.logo-white {
    display: inline-block;
}

.top-header .header-title h1 {
    margin: 0;
    font-size: 1.4em; /* Aumentar tamanho do título */
    color: var(--heading-color);
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaçamento entre os elementos de ação */
}

.header-actions button,
.header-actions a {
    display: flex; /* Usar flex para alinhar ícone e texto */
    align-items: center;
    margin-left: 0; /* Remover margem anterior */
    padding: 8px 12px; /* Ajustar padding para botões/links */
    font-size: 0.9em; /* Ajustar tamanho da fonte */
    border-radius: 5px; /* Cantos mais arredondados */
    text-decoration: none;
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: 1px solid var(--primary-color); /* Usar variável de tema */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.header-actions button i,
.header-actions a i {
    margin-right: 8px; /* Espaçamento entre ícone e texto */
    font-size: 1.1em; /* Tamanho do ícone */
}

.header-actions button:hover,
.header-actions a:hover {
    background-color: var(--button-primary-hover-bg);
    border-color: var(--button-primary-hover-bg); /* Ajustar borda no hover */
}

.user-info {
    color: var(--text-color-secondary); /* Cor mais suave para info do usuário */
    font-size: 1em;
}

/* Estilos para alternar ícones de tema */
#theme-toggle-button {
    padding: 8px; /* Padding ajustado para um botão de ícone */
    width: 40px; /* Largura e altura fixas para um botão quadrado */
    height: 40px;
    display: flex; /* Garante que o ícone fique centralizado */
    justify-content: center;
    align-items: center;
    /* Remove a cor de fundo e borda primária, se aplicadas pela classe pai .header-actions button */
    background-color: transparent; 
    border: none;
}

#theme-toggle-button i {
    margin-right: 0; /* Remove margem à direita do ícone */
}

#theme-toggle-button .action-text {
    display: none; /* Oculta o texto do botão de tema */
}

html[data-theme='light'] .top-header .header-actions #theme-toggle-button .fa-sun {
    display: inline-block !important; /* Mostrar sol no tema claro */
    color: var(--text-color); /* Cor do ícone no tema claro */
}

html[data-theme='light'] .top-header .header-actions #theme-toggle-button .fa-moon {
    display: none !important; /* Ocultar lua no tema claro */
}

html[data-theme='dark'] .top-header .header-actions #theme-toggle-button .fa-sun {
    display: none !important; /* Ocultar sol no tema escuro */
}

html[data-theme='dark'] .top-header .header-actions #theme-toggle-button .fa-moon {
    display: inline-block !important; /* Mostrar lua no tema escuro */
    color: var(--primary-color); /* Cor do ícone no tema escuro (dourado) */
}

.content-area {
    padding: 20px;
    flex-grow: 1; /* Permite que a área de conteúdo preencha o espaço restante no main-content-wrapper */

    width: 100%; /* Ocupa a largura total do seu container */
    box-sizing: border-box;
    /* Removido display: flex e flex-direction: column se não for necessário para layout interno */
    overflow-y: auto; /* Apenas a área de conteúdo scrolla */
}

.content-area > h1 {
    font-size: 1.5em; /* Ajustado */
    margin-top: 0;
    margin-bottom: 20px; /* Aumentado */
    color: var(--heading-color);
}

.content-area form div {
    margin-bottom: 12px;
}

.content-area label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 11px;
}

.content-area input[type="file"],
.content-area select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border-color, var(--border-color));
    border-radius: 3px;
    box-sizing: border-box;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 12px;
}

.content-area button[type="submit"] {
    padding: 8px 18px;
    font-size: 12px;
    background-color: var(--button-primary-bg, var(--primary-color));
    color: var(--button-primary-text, white);
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.content-area button[type="submit"]:hover {
    background-color: var(--button-primary-hover-bg, var(--primary-hover-color));
}

.result-container {
    margin-top: 15px;
    padding: 0;
    background-color: transparent;
    border: none;
}

.result-container > .card > h2 {
    margin-top: 0;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.result-container pre {
    background-color: var(--code-bg);
    color: var(--code-text);
    padding: 10px;
    border-radius: 3px;
    overflow-x: auto;
    font-size: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.page-footer {
    text-align: center;
    padding: 10px;
    background-color: var(--footer-bg);
    color: var(--footer-text);
    border-top: 1px solid var(--border-color);
    font-size: 10px;
    flex-shrink: 0;
}

/* === Estilos para Layout de Resultados Inspirado na Imagem === */
.dashboard-grid-resultados {
    display: grid;
    gap: 20px; /* Aumentado gap entre colunas */
    padding-top: 10px;
}
.dashboard-grid-resultados.dashboard-2-colunas {
    grid-template-columns: 300px 1fr; /* Coluna esquerda fixa, direita flexível */
}

.coluna-esquerda .card, 
.coluna-central .card {
    margin-bottom: 20px;
    border-radius: 4px; /* Bordas dos cards */
    padding: 15px;
    background-color: var(--card-bg);
    
    color: var(--card-text-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.coluna-esquerda .card h2,
.coluna-central .card h2 {
    font-size: 1.05em; /* Títulos dos cards */
    color: var(--card-header-color);
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-header-border-color);
}

/* Card de Selecionar Arquivo */
.card.card-selecionar-arquivo label {
    color: var(--text-color);
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 4px;
}
.card.card-selecionar-arquivo input, 
.card.card-selecionar-arquivo select {
    background-color: var(--input-in-card-bg);
    color: var(--input-in-card-text);
    border: 1px solid var(--input-in-card-border);
    font-size: 11px;
    padding: 7px;
    border-radius: 3px;
    margin-bottom: 10px;
    width:100%;
    box-sizing: border-box;
}
.card.card-selecionar-arquivo button[type="submit"] {
    background-color: var(--button-card-bg);
    color: var(--button-card-text);
    font-weight: 500;
    width:100%;
    padding: 8px;
    font-size:12px;
    border:none;
    border-radius:3px;
}

/* Card Dados do Servidor e Margens */
.card.dados-servidor-card div, .margens-card div{
    padding: 4px 0;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}
.card.dados-servidor-card div span:first-child, .margens-card div span:first-child {
    color: var(--text-color);
    margin-right: 5px;
}
.card.dados-servidor-card strong, .margens-card strong {
    color: var(--strong-text-color);
    font-weight: 500;
    text-align: right;
}
.margens-card .valor-destaque {
    background-color: var(--primary-color); /* Destaque amarelo no tema escuro */
    color: var(--button-primary-text); /* Texto escuro para contraste */
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}
.margens-card .real-utilizavel {
    font-size: 9px;
    color: #888;
    justify-content: flex-end;
    padding-top:0;
    margin-top:-2px;
}
.margens-card .titulo-margem-disponivel {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    color: var(--card-header-color);
    justify-content: flex-start;
}
.margens-card hr {
    border: 0;
    border-top: 1px solid var(--card-header-border-color);
    margin: 10px 0;
}

/* Tabelas (Coluna Central) */
.card.tabela-card .card-header-com-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-header-border-color);
    margin-bottom: 10px;
    padding-bottom: 8px;
}
.card.tabela-card .card-header-com-total h2 {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.card.tabela-card .total-no-header {
    font-size: 1em;
    font-weight: bold;
    color: var(--strong-text-color);
}

.tabela-dados {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0; /* Removido margin-top pois o card-header já tem */
    font-size: 10px;
}

.tabela-dados th,
.tabela-dados td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--table-border-color);
}

.tabela-dados th {
    background-color: var(--table-header-bg); /* Usar variável de tema */
    color: var(--table-header-text); /* Cor padrão, será sobreposta abaixo */
    font-weight: 500; /* Mais suave */
    white-space: nowrap;
}

.tabela-dados tr:nth-child(even) td {
    background-color: var(--table-row-even-bg);
}
.tabela-dados td.status-compulsorio { color: var(--status-compulsorio-color); font-weight:500; }
.tabela-dados td.status-fixa, .tabela-dados td.status-fixo { color: var(--status-fixa-color); font-weight:500; }
.tabela-dados td.status-variavel { color: var(--status-variavel-color); font-weight:500; }
.tabela-dados td.status-facultativo { color: var(--status-facultativo-color); font-weight:500; }

/* === Tema Escuro (Colmeia Style) === */
html[data-theme='dark'] {
    /* Background da abelha para o tema escuro */
    body {
        background-image: url('/images/abelha011.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-color: rgba(0, 0, 0, 0); /* Cor de fundo transparente no tema escuro */
    }

    --bg-color: rgba(0, 0, 0, 0); /* Transparente */
    --text-color: #ffffff; /* Branco */
    --border-color: rgba(255, 255, 255, 0.3); /* Borda branca semi-transparente */
    --input-bg: rgba(255, 255, 255, 0.1); /* Input semi-transparente */
    --input-text: #ffffff; /* Texto do input branco */
    --input-border-color: rgba(255, 255, 255, 0.3); /* Borda do input semi-transparente */

    --primary-color: #ffffff; /* Dourado -> Branco */
    --primary-hover-color: #cccccc; /* Dourado Hover -> Cinza claro */
    
    --sidebar-bg: transparent; /* Sidebar transparente */
    --sidebar-text: #ffffff; /* Texto do sidebar branco */
    --sidebar-border: rgba(255, 255, 255, 0.3); /* Borda do sidebar semi-transparente */
    --sidebar-link-color: #ffffff; /* Links do sidebar branco */
    --sidebar-link-hover-bg: rgba(255, 255, 255, 0.2); /* Hover semi-transparente */
    --sidebar-link-hover-color: #ffffff; /* Texto do hover branco */

    --header-bg: transparent; /* Header transparente */
    --header-text: #ffffff; /* Texto do header branco */

    --content-bg: rgba(0, 0, 0, 0); /* Conteúdo transparente */
    --heading-color: #ffffff; /* Títulos brancos */

    --card-bg: rgba(0, 0, 0, 0.6); /* Card semi-transparente */
    --card-border-color: rgba(255, 255, 255, 0.3); /* Borda do card semi-transparente */
    --card-text-color: #ffffff; /* Texto do card branco */
    --card-header-color: #ffffff; /* Título do card branco */
    --card-header-border-color: rgba(255, 255, 255, 0.3); /* Borda do título do card semi-transparente */

    --input-in-card-bg: rgba(255, 255, 255, 0.1); /* Input no card semi-transparente */
    --input-in-card-text: #ffffff; /* Texto do input no card branco */
    --input-in-card-border: rgba(255, 255, 255, 0.3); /* Borda do input no card semi-transparente */

    --button-card-bg: rgba(255, 255, 255, 0.2); /* Botão no card semi-transparente */
    --button-card-text: #ffffff; /* Texto do botão no card branco */
    --button-primary-bg: rgba(255, 255, 255, 0.2); /* Botão primário semi-transparente */
    --button-primary-text: #ffffff; /* Texto do botão primário branco */
    --button-primary-hover-bg: rgba(255, 255, 255, 0.3); /* Hover semi-transparente */

    --strong-text-color: #ffffff; /* Texto forte branco */

    --table-border-color: rgba(255, 255, 255, 0.3); /* Borda da tabela semi-transparente */
    --table-header-bg: rgba(255, 255, 255, 0.1); /* Fundo do cabeçalho da tabela semi-transparente */
    --table-header-text: #ffffff; /* Texto do cabeçalho da tabela branco */
    --table-row-even-bg: rgba(255, 255, 255, 0.05); /* Fundo de linhas pares da tabela semi-transparente */

    --error-text-color: #ffb3b3; /* Tom mais suave de vermelho para erro */
    --error-bg-color: rgba(255, 0, 0, 0.2); /* Fundo de erro semi-transparente */
    --error-border-color: rgba(255, 0, 0, 0.3); /* Borda de erro semi-transparente */
    --success-text-color: #b3ffb3; /* Tom mais suave de verde para sucesso */
    --success-bg-color: rgba(0, 255, 0, 0.2); /* Fundo de sucesso semi-transparente */
    --success-border-color: rgba(0, 255, 0, 0.3); /* Borda de sucesso semi-transparente */

    --code-bg: rgba(255, 255, 255, 0.1); /* Fundo de código semi-transparente */
    --code-text: #ffffff; /* Texto de código branco */
    --footer-bg: rgba(0, 0, 0, 0.5); /* Footer semi-transparente */
    --footer-text: #cccccc; /* Texto do footer cinza claro */

    /* Cores de Status para Tema Escuro */
    --status-compulsorio-color: #ff7b7b;
    --status-fixa-color: #79c0ff;
    --status-variavel-color: #d8aaff;
    --status-facultativo-color: #56d364;

    /* Garantir que a cor do texto no cabeçalho da tabela seja branca no tema escuro */
    .tabela-dados th {
        color: #ffffff !important;
    }

    /* Garantir que o card-text-color seja branco no tema escuro, se não for suficiente */
    .card {
        color: var(--card-text-color);
    }

    /* Estilos para inputs e selects no tema escuro (garantir transparência e texto claro) */
    input[type="email"], input[type="password"], input[type="text"], input[type="file"], select, textarea {
        background-color: var(--input-bg); /* Usa variável semi-transparente */
        color: var(--input-text); /* Usa variável de texto branco */
        border: 1px solid var(--input-border-color); /* Usa variável de borda semi-transparente */
    }
    
    /* Estilos específicos para selects no tema escuro, se necessário */
    select {
         background-color: var(--input-bg); /* Reafirmar background semi-transparente */
         color: var(--input-text); /* Reafirmar texto branco */
         border: 1px solid var(--input-border-color); /* Reafirmar borda semi-transparente */
    }
    
    /* Estilos para as opções do select no tema escuro */
    select option {
        background-color: var(--input-bg); /* Fundo semi-transparente para opções */
        color: var(--input-text); /* Texto branco para opções */
    }

    /* Ajusta a cor dos rótulos nos cards da coluna esquerda para branco ou cor clara */
    .coluna-esquerda .card span {
        color: var(--text-color);
    }

    /* Regra mais específica para os itens da lista no siape_result.ejs, se necessário */
     .coluna-esquerda .siape-info-list span {
        color: var(--text-color);
    }

    body {
        color: var(--text-color);
    }

    .card {
        background-color: var(--card-bg);
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .card h2, .card h3, .card h4 {
         color: var(--text-color);
    }

     .card.siape-info-card h2 {
         color: var(--primary-color);
     }

    input[type="email"], input[type="password"], input[type="text"], input[type="file"], select, textarea {
        background-color: var(--input-bg-color);
        border-color: var(--input-border-color);
        color: var(--text-color);
    }

    select option {
         background-color: var(--input-bg-color);
         color: var(--text-color);
    }

    .tabela-dados th,
    .tabela-dados td {
        border-bottom-color: #555; /* Cor da borda da tabela no tema escuro */
    }

    .tabela-dados th {
         background-color: #444; /* Cor de fundo para cabeçalhos de tabela no tema escuro */
         color: var(--text-color);
    }

    .margens-cruzadas-card {
        background-color: #333;
        border-left-color: var(--primary-color);
    }

     .margens-cruzadas-card h2 {
         color: var(--primary-color);
     }

    .margens-cruzadas-card span {
         color: var(--text-color);
    }

    .valor-positivo {
         color: var(--success-text-color);
    }

    .valor-negativo {
        color: var(--error-text-color);
    }
}

/* Estilos movidos de views/partials/siape_result.ejs */
.duas-colunas-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}
.coluna-esquerda, .coluna-direita {
    flex: 1;
    min-width: 300px;
}
.coluna-esquerda .card, .coluna-direita .card {
    margin-bottom: 20px;
}
.tabela-dados {
    width: 100%;
    border-collapse: collapse;
}
.tabela-dados th, .tabela-dados td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--table-border-color);
}
.tabela-dados th {
    background-color: var(--table-header-bg);
}

/* Fim dos estilos movidos */

.valor-positivo {
    color: var(--success-color); /* Verde para positivo */
    font-weight: 600;
}

.valor-negativo {
    color: var(--error-color); /* Vermelho para negativo */
    font-weight: 600;
}

/* Ajuste para o tema claro */
html[data-theme='light'] .valor-positivo {
    background-color: var(--success-color) !important;
    color: #fff !important;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}

html[data-theme='light'] .valor-negativo {
    background-color: var(--error-color) !important;
    color: #fff !important;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}

/* Estilos para o Modal */
.modal {
    display: none; /* Escondido por padrão */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6); /* Fundo do modal semi-transparente */
    align-items: center;
    justify-content: center;
}

/* Adicionado estilo para mostrar o modal */
.modal.visible {
    display: flex; /* Agora só aparece quando a classe 'visible' é adicionada */
}

.modal-content {
    background-color: var(--card-bg); /* Fundo do modal */
    margin: auto; /* Auto margin combinado com flexbox centraliza */
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px; /* Largura máxima do modal */
    box-shadow: var(--card-box-shadow); /* Sombra igual aos cards */
    position: relative; /* Para posicionar o botão de fechar */
}

.modal-content h2 {
    color: var(--heading-color);
    font-size: 1.5em;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color); /* Linha sob o título */
    padding-bottom: 15px;
}

.modal-content .close-button {
    color: var(--text-color-secondary);
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    transition: color 0.3s ease;
    cursor: pointer;
}

.modal-content .close-button:hover,
.modal-content .close-button:focus {
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
}

.modal-content .input-group {
    margin-bottom: 15px;
}

.modal-content .input-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--text-color-secondary);
    font-size: 0.9em;
    font-weight: 500;
}

.modal-content .input-group input[type="text"],
.modal-content .input-group select,
.modal-content .input-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--input-border-color);
    border-radius: 5px;
    font-size: 1em;
    color: var(--input-text);
    background-color: var(--input-bg);
    box-sizing: border-box; /* Inclui padding e borda na largura total */
}

.modal-content button[type="submit"] {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

.modal-content button[type="submit"]:hover {
    background-color: var(--button-primary-hover-bg);
}

/* Estilos para Paginação */
.pagination-controls {
    display: flex;
    justify-content: center; /* Centraliza os controles de paginação */
    align-items: center;
    margin-top: 20px;
    gap: 15px; /* Espaçamento entre os elementos */
}

.pagination-controls button {
    background-color: var(--secondary-color); /* Cor secundária para botões */
    color: var(--text-color-light); /* Texto claro */
    padding: 8px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9em;
}

.pagination-controls button:disabled {
    background-color: var(--border-color); /* Cor para botão desabilitado */
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination-controls button:hover:not(:disabled) {
    background-color: var(--secondary-hover-color);
}

.pagination-controls span {
    font-size: 1em;
    color: var(--text-color);
}

/* Estilos para Filtro e Botão Adicionar no cabeçalho do card */
.acoes-cabecalho {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaçamento entre filtro e botão */
}

.acoes-cabecalho .input-filtro {
     padding: 8px 12px;
    border: 1px solid var(--input-border-color);
    border-radius: 5px;
    font-size: 1em;
    color: var(--input-text);
    background-color: var(--input-bg);
     /* Permitir que o campo de filtro cresça, mas com um limite */
    flex-grow: 1;
    max-width: 300px; 
}

.acoes-cabecalho .btn-adicionar {
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.acoes-cabecalho .btn-adicionar:hover {
     background-color: var(--button-primary-hover-bg);
}

/* Estilos para botões de ícone na coluna de ações */
.acoes-coluna .btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color-secondary); /* Cor padrão para ícones */
    font-size: 1.1em;
    margin: 0 5px; /* Espaçamento entre ícones */
    transition: color 0.3s ease;
    padding: 5px;
}

.acoes-coluna .btn-icon:hover {
    color: var(--primary-color); /* Cor ao passar o mouse */
}

/* Ajustar o layout do header do card para acomodar o filtro e botão */
.card-header-com-total {
    display: flex;
    justify-content: space-between; /* Espaça o título e as ações */
    align-items: center;
    margin-bottom: 20px; /* Espaço entre o cabeçalho e a tabela */
    flex-wrap: wrap; /* Permite quebras em telas pequenas */
    gap: 15px; /* Espaço entre os itens do cabeçalho em caso de quebra */
}

/* Ajuste para a coluna de ações na tabela */
.tabela-dados .acoes-coluna {
    width: 100px; /* Largura fixa para a coluna de ações, ajuste conforme necessário */
    text-align: center; /* Centraliza os botões */
    white-space: nowrap; /* Impede quebra de linha nos botões */
}

/* Estilo base para tabelas - já existia, manter para referência ou ajustar */
.tabela-dados {
    width: 100%;
    border-collapse: collapse;
}
.tabela-dados th, .tabela-dados td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color); /* Usar variável de tema */
}
.tabela-dados th {
    background-color: var(--table-header-bg); /* Usar variável de tema */
    color: var(--table-header-text); /* Usar variável de tema */
    font-weight: 600;
}
.tabela-dados tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg); /* Usar variável de tema */
}
.tabela-dados td.status-compulsorio { color: var(--status-compulsorio-color); font-weight:500; }
.tabela-dados td.status-fixa, .tabela-dados td.status-fixo { color: var(--status-fixa-color); font-weight:500; }
.tabela-dados td.status-variavel { color: var(--status-variavel-color); font-weight:500; }
.tabela-dados td.status-facultativo { color: var(--status-facultativo-color); font-weight:500; }

/* Estilos existentes para cores de valor, garantir que usem variáveis de tema */
.valor-positivo {
    color: var(--success-color); /* Verde para positivo */
    font-weight: 600;
}

.valor-negativo {
    color: var(--error-color); /* Vermelho para negativo */
    font-weight: 600;
}

/* Adicionar regras para o layout flexbox principal */
/* O dashboard-layout já é display: flex */
/* O sidebar é position: fixed */
/* O main-content-wrapper é o container flex-grow que gerencia header e content-area */

/* Estilos para sub-menus no sidebar */
.sidebar-nav ul ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Transição suave */
    max-height: 0;
    opacity: 0;
}

.sidebar-nav ul ul.submenu-active {
    display: block; /* Exibir quando ativo */
    max-height: 500px; /* Altura máxima arbitrária para permitir a transição */
    opacity: 1;
}

.sidebar-nav ul ul li a {
    padding-left: 30px; /* Indentação para sub-itens */
    font-size: 0.9em; /* Tamanho de fonte um pouco menor */
}

.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-left: 60px; /* Alterado de 60px para 0 */ /* Corrigindo duplicação e ajustando */
    transition: margin-left 0.3s ease; /* Transição para a margem */
    overflow-y: auto;
    padding: 0; /* Removido padding, content-area terá padding */
    /* Garantir que o flex-basis padrão não interfira */
    flex-basis: auto;
}

.sidebar-is-expanded .main-content {
    margin-left: 200px; /* Alterado de 200px para 0 */ /* Corrigindo duplicação e ajustando */
}

html[data-theme='light'] .margens-card .valor-destaque.valor-positivo {
    background-color: var(--success-color) !important;
    color: #fff !important;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}

html[data-theme='light'] .margens-card .valor-destaque.valor-negativo {
    background-color: var(--error-color) !important;
    color: #fff !important;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
}

/* Estilos para os elementos select nas células da tabela */
.tabela-dados td select {
    width: auto;
    max-width: 120px; /* Define uma largura máxima */
    padding: 4px 8px; /* Reduz o padding */
    font-size: 12px; /* Define um tamanho de fonte menor */
    box-sizing: border-box;
    vertical-align: middle; /* Ajuda no alinhamento vertical na célula */
    border-radius: 4px; /* Cantos levemente arredondados */
    border: 1px solid var(--border-color); /* Usa variável de tema para a borda */
    background-color: var(--input-bg-color); /* Usa variável de tema para o fundo */
    color: var(--text-color); /* Usa variável de tema para a cor do texto */
}

/* Estilos básicos para as opções dentro do select */
.tabela-dados td select option {
    font-size: 12px; /* Garante que o texto das opções também seja menor */
}

/* Melhorar a interação visual ao focar/hover */
.tabela-dados td select:hover {
    border-color: var(--primary-color);
}

.tabela-dados td select:focus {
    border-color: var(--primary-color);
    outline: none; /* Remove o outline padrão */
    box-shadow: 0 0 0 0.2rem rgba(248, 193, 70, 0.25); /* Adiciona um leve brilho (ajustar cor conforme tema) */
}

/* Estilos para os campos de input editáveis nas células da tabela */
.tabela-dados td input[type="text"].editable-valor {
    width: auto;
    max-width: 100px; /* Ajuste a largura máxima conforme necessário */
    padding: 4px 8px; /* Mesmo padding dos selects para consistência */
    font-size: 12px; /* Mesmo tamanho de fonte dos selects */
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
}

/* Melhorar a interação visual ao focar/hover */
.tabela-dados td input[type="text"].editable-valor:hover {
    border-color: var(--primary-color);
}

.tabela-dados td input[type="text"].editable-valor:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(248, 193, 70, 0.25); /* Ajustar cor conforme tema */
}