/* ========================================
   SISGED / NETNÚCLEO - IDENTIDADE VISUAL
   Camada de estilo compartilhada entre páginas
======================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");

h1, h2, h3,
.login-card h1,
.cadastro-header h2,
.logo-link strong,
.sidebar-title {
    font-family: "Space Grotesk", Arial, sans-serif !important;
    letter-spacing: 0.01em;
}

/* ===== CABEÇALHO (TOPBAR) ===== */

.topbar {
    background: #003bd1 !important;
    border-bottom: none !important;
}

.topbar a,
.topbar .logo-link strong,
.top-menu a {
    color: #f5f6f8 !important;
}

.top-menu a.active {
    color: #f28c28 !important;
    border-bottom: 2px solid #f28c28;
}

.top-menu a:hover {
    color: #f28c28 !important;
}

.user-info strong {
    color: #f5f6f8 !important;
}

.user-info span {
    color: #f28c28 !important;
}

.logo-icon,
.user-icon {
    color: #f28c28 !important;
}

/* ===== MENU LATERAL (SIDEBAR) ===== */

.sidebar-menu button.ativo,
.sidebar-menu a.active,
.cad-menu.ativo {
    background: #003bd1 !important;
    color: #f5f6f8 !important;
    border-left: 3px solid #f28c28;
}

.sidebar-menu button.ativo span,
.sidebar-menu a.active span,
.cad-menu.ativo span {
    color: #f28c28 !important;
}

.logout {
    color: #a03d3d !important;
}

/* ===== CANTOS E BOTÕES ===== */

.btn-login,
.btn-salvar,
.form-group input,
.form-group select,
.login-card,
.cadastro-container,
table,
.cadastro-tabela {
    border-radius: 8px !important;
}

.btn-login,
.btn-salvar {
    background: #f28c28 !important;
    font-family: "Space Grotesk", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

.btn-login:hover,
.btn-salvar:hover {
    background: #a8752f !important;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #f28c28 !important;
}

/* ===== TABELAS ===== */

.cadastro-tabela thead,
table thead {
    background: #f5f6f8 !important;
}

.cadastro-tabela th,
table th {
    color: #003bd1 !important;
    font-family: "Space Grotesk", Arial, sans-serif !important;
}

.btn-excluir {
    border-radius: 6px !important;
}


/* ===== DASHBOARD (usa nomes diferentes: #net-...) ===== */

#net-header {
    background: #003bd1 !important;
    border-bottom: none !important;
}

#net-logo-text,
#net-menu a,
#net-user-text strong {
    color: #f5f6f8 !important;
}

#net-menu a:hover {
    color: #f28c28 !important;
}

#net-logo-icon,
#net-user-text span {
    color: #f28c28 !important;
}


/* ===== ESPAÇAMENTO GERAL DO CONTEÚDO ===== */

.main-content {
    padding: 32px 40px !important;
}

.page-header {
    margin-bottom: 28px !important;
}

.breadcrumb {
    display: block;
    color: #6B6F6D !important;
    font-size: 0.8rem !important;
    margin-bottom: 10px !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.page-header h1 {
    font-family: "Space Grotesk", Arial, sans-serif !important;
    font-size: 1.8rem !important;
    margin-bottom: 8px !important;
    color: #003bd1 !important;
}

.page-header p {
    color: #6B6F6D !important;
    font-size: 0.95rem !important;
}

/* ===== CABEÇALHOS DE SEÇÃO (Cadastro / Consulta) ===== */

.cadastro-header,
.consulta-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #dddddd;
}

.cadastro-header h2,
.consulta-header h2 {
    font-size: 1.3rem !important;
    color: #003bd1 !important;
    margin: 0 !important;
}

/* ===== FILTRO DE BUSCA ===== */

.consulta-filtro input,
.consulta-filtro select,
#filtroConsulta {
    padding: 10px 14px !important;
    border: 1px solid #dddddd !important;
    border-radius: 8px !important;
    min-width: 200px;
    font-size: 0.9rem !important;
}

.consulta-filtro input:focus,
.consulta-filtro select:focus,
#filtroConsulta:focus {
    outline: none;
    border-color: #f28c28 !important;
}

.consulta-filtro {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.btn-secundario {
    padding: 10px 16px !important;
    border: 1px solid #dddddd !important;
    border-radius: 8px !important;
    background: #f5f6f8 !important;
    cursor: pointer !important;
    font-size: 0.85rem !important;
}

.btn-secundario:hover {
    background: #e9eaee !important;
}

/* ===== TABELAS (espaçamento das células) ===== */

.consulta-tabela,
.cadastro-tabela,
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100%;
    margin-top: 8px;
}

.consulta-tabela th,
.cadastro-tabela th,
table th {
    text-align: left !important;
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.consulta-tabela td,
.cadastro-tabela td,
table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #dddddd !important;
    font-size: 0.9rem !important;
}

.consulta-tabela tbody tr:hover,
.cadastro-tabela tbody tr:hover,
table tbody tr:hover {
    background: #f5f6f8 !important;
}

/* ===== FORMULÁRIO DE CADASTRO ===== */

.cadastro-form {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px !important;
    margin-bottom: 28px !important;
    align-items: end;
}

.cadastro-form .form-group input {
    padding: 10px 14px !important;
}

.cadastro-form .btn-salvar {
    padding: 11px 20px !important;
    height: fit-content;
}


/* ===== IMAGEM DA TELA DE LOGIN ===== */

.login-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    overflow: hidden;
}

.login-image img {
    max-width: 100% !important;
    max-height: 70vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}
/* ========================================
   MODO ESCURO
   Ativado quando <html data-theme="dark">
======================================== */

[data-theme="dark"] body {
    background: #14161c !important;
    color: #e7e9ee !important;
}

[data-theme="dark"] .page-container,
[data-theme="dark"] .main-content {
    background: #14161c !important;
    color: #e7e9ee !important;
}

[data-theme="dark"] .sidebar {
    background: #1b1e26 !important;
    border-right: 1px solid #2a2e38 !important;
}

[data-theme="dark"] .sidebar-title,
[data-theme="dark"] .sidebar-menu button {
    color: #e7e9ee !important;
}

[data-theme="dark"] .consulta-tabela,
[data-theme="dark"] table {
    background: #1b1e26 !important;
    color: #e7e9ee !important;
}

[data-theme="dark"] .consulta-tabela th,
[data-theme="dark"] table th {
    background: #23262f !important;
    color: #f5f6f8 !important;
}

[data-theme="dark"] .consulta-tabela td,
[data-theme="dark"] table td {
    border-color: #2a2e38 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #1b1e26 !important;
    color: #e7e9ee !important;
    border-color: #2a2e38 !important;
}

[data-theme="dark"] .empty-state,
[data-theme="dark"] .consulta-container,
[data-theme="dark"] .cadastro-form {
    background: #1b1e26 !important;
    color: #e7e9ee !important;
}

/* Botão de alternância (sol/lua) na topbar */
.theme-toggle {
    background: transparent !important;
    border: 1px solid rgba(245, 246, 248, 0.4) !important;
    color: #f5f6f8 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    margin-left: 12px !important;
    transition: background 0.2s ease !important;
}

.theme-toggle:hover {
    background: rgba(245, 246, 248, 0.15) !important;
}


/* ===== LOGO PEQUENA NO CABEÇALHO (páginas internas) ===== */

.logo-image {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    overflow: hidden !important;
    max-width: 140px;
}

.logo-image .logo,
img.logo {
    max-height: 34px !important;
    width: auto !important;
    object-fit: contain !important;
}