/* publico/css/estilos.css (Versão compatível com Dark Mode) */

/* Estilos gerais para o corpo do documento */
body {
    padding-top: 85px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* * CORREÇÃO: Usando variáveis do Bootstrap.
     * --bs-body-bg e --bs-body-color mudam automaticamente
     * entre os modos light e dark.
     */
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Estilos para o container principal */
.container {
    padding-top: 20px; /* Espaçamento extra abaixo da navbar fixa */
    padding-bottom: 20px;
}

/* Estilos para títulos h1, h2, etc. */
h1, h2, h3, h4, h5, h6 {
    /* CORREÇÃO: Usando a variável de cor de título do Bootstrap. */
    color: var(--bs-heading-color);
    margin-bottom: 1rem;
}

/* * Os estilos para cards e formulários abaixo já são majoritariamente
 * compatíveis, pois o Bootstrap sobrescreve suas variáveis internas
 * para esses componentes no modo escuro.
 */

.card {
    border: 1px solid var(--bs-border-color-translucent); /* Borda sutil */
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-control:focus {
    /* O Bootstrap já lida bem com isso, não precisa de alteração. */
    border-color: #80bdff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

/* * Os botões primários podem manter a cor da sua marca. O Bootstrap
 * ajusta a cor do texto e os estados (hover, active) automaticamente.
 */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Rodapé */
.text-muted {
    font-size: 0.9rem;
}
/* Em sistema/publico/css/estilos.css */

/* =================================================================== */
/* CSS DEFINITIVO PARA TABELAS RESPONSIVAS (FORMATO DE CARD)           */
/* =================================================================== */
@media (max-width: 767px) {
    /* 1. Esconde o cabeçalho original da tabela no desktop */
    .table-mobile-cards thead {
        display: none;
    }

    /* 2. Transforma a linha (tr) em um card com borda e espaçamento */
    .table-mobile-cards tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--bs-border-color-translucent);
        border-radius: 0.5rem;
        padding: 0.5rem 1rem; /* Reduzido padding vertical */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    /* 3. A MÁGICA DO FLEXBOX: Transforma a célula (td) em um container flexível */
    .table-mobile-cards td {
        display: flex;                 /* ATIVA O FLEXBOX */
        justify-content: space-between;/* Empurra o rótulo para a esquerda e o valor para a direita */
        align-items: center;           /* Alinha verticalmente os itens no centro */
        text-align: right;             /* Alinha o texto do VALOR à direita */
        padding: 0.75rem 0;            /* Espaçamento vertical dentro da célula */
        border-bottom: 1px solid var(--bs-border-color-translucent);
    }

    /* Remove a borda da última célula para um acabamento melhor */
    .table-mobile-cards tr:last-child td:last-child,
    .table-mobile-cards td:last-of-type {
        border-bottom: none;
    }

    /* 4. Cria o RÓTULO (label) a partir do atributo data-label */
    .table-mobile-cards td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        margin-right: 1rem; /* Espaço entre o rótulo e o valor */
    }

    /* 5. TRATAMENTO ESPECIAL PARA A CÉLULA DE AÇÕES */
    .table-mobile-cards td[data-label="Ações"] {
        display: block; /* Desativa o flexbox apenas para esta célula */
        text-align: center; /* Centraliza os botões */
        padding-top: 1rem;
    }

    /* Oculta o rótulo "Ações:", pois os botões já são autoexplicativos */
    .table-mobile-cards td[data-label="Ações"]::before {
        display: none;
    }
    
    /* Garante um pequeno espaço entre os botões de ação */
    .table-mobile-cards td[data-label="Ações"] > a {
        margin: 0.25rem;
    }
}
/* --- ESTILOS PERSONALIZADOS PARA A BARRA DE NAVEGAÇÃO --- */

/* Cor para os links normais da barra de navegação */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-brand {
    color: #E0E0E0; /* Defina a cor que desejar. Este é um cinza claro. */
}

/* Cor para o link quando o mouse passa por cima (opcional) */
.navbar-dark .navbar-nav .nav-link:hover {
    color: #FFFFFF; /* Cor ao passar o mouse. Branco, por exemplo. */
}

/* Cor para o link da PÁGINA ATIVA */
/* O seu sistema usa a classe .text-info, então vamos sobrescrevê-la */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.active:hover {
    color: #00FFFF !important; /* Cor para o link ativo. Ciano, por exemplo. */
}
/* --- NOVAS OPÇÕES DE CORES PARA A NAVBAR --- */

.bg-slate {
    background-color: #4A5568 !important;
}

.bg-ocean {
    background-color: #3B82F6 !important;
}

.bg-emerald {
    background-color: #10B981 !important;
}

.bg-amber {
    background-color: #F59E0B !important;
}

.bg-indigo {
    background-color: #6366F1 !important;
}

.bg-teal {
    background-color: #14B8A6 !important;
}

.bg-wine {
    background-color: #800020 !important;
}
body.login-page {
    background-image: url('/images/fundo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* ====== Efeito de Transparência (Vidro Fosco) ====== */
.login-card {
    background: rgba(255, 255, 255, 0.15); /* leve transparência */
    backdrop-filter: blur(12px);           /* efeito de desfoque atrás */
    -webkit-backdrop-filter: blur(12px);   /* compatibilidade Safari */
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: #fff; /* texto claro para contraste */
}

/* Ajustar cores de campos e labels */
.login-card .form-label,
.login-card .input-group-text,
.login-card input {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: none;
}
/* ====== Cabeçalho translúcido ====== */
.login-card .card-header {
    background: rgba(0, 0, 0, 0.35);   /* fundo escuro translúcido */
    backdrop-filter: blur(10px);       /* desfoque de vidro */
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

/* Ajustar o texto e o logo no header */
.login-card .card-header h4 {
    color: #fff;                       /* texto branco */
    margin-top: 0.5rem;
}

.login-card .card-header img {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)); /* leve brilho no logo */
}