/* ============================================================
 * Ilumne — Identidade visual (overlay sobre o tema Cuba)
 * Carregado por último no header.php, então prevalece sobre o tema.
 *
 * IMPORTANTE: overlay "theme-aware". NÃO forçamos cores de fundo nem
 * de texto da moldura — deixamos o tema cuidar do claro/escuro. Aqui
 * só injetamos a identidade Ilumne (acento, item ativo, cards, botões)
 * usando valores que funcionam nos dois modos (acento + translúcidos).
 * ============================================================ */

:root {
  /* acento do tema (cascateia p/ botões, tags, links, estados ativos) */
  --theme-default: #2a78d6;

  --ilm-accent: #2a78d6;      /* acento em superfícies claras */
  --ilm-accent-vivid: #3987e5;/* acento legível no claro E no escuro */
  --ilm-muted: #8b94a3;
  --ilm-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.06);
}

/* ---------- Sidebar: itens de navegação ---------- */
/* Só espaçamento/raio/estado — sem mexer no fundo nem na cor base do texto,
   pra não quebrar o modo escuro. */
.sidebar-wrapper .sidebar-main .sidebar-links li a.sidebar-link {
  margin: 2px 12px;
  padding: 9px 12px !important;
  border-radius: 9px;
  transition: background .12s, color .12s;
}
.sidebar-wrapper .sidebar-main .sidebar-links li a.sidebar-link:hover {
  background: rgba(42, 120, 214, 0.09) !important;
}
.sidebar-wrapper .sidebar-main .sidebar-links li a.sidebar-link.active {
  background: rgba(42, 120, 214, 0.16) !important;
  color: var(--ilm-accent-vivid) !important;
}
.sidebar-wrapper .sidebar-main .sidebar-links li a.sidebar-link.active svg,
.sidebar-wrapper .sidebar-main .sidebar-links li a.sidebar-link.active i {
  color: var(--ilm-accent-vivid) !important;
  fill: var(--ilm-accent-vivid) !important;
}
/* títulos de seção do menu: só o tratamento tipográfico */
.sidebar-wrapper .sidebar-main-title h6 {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}

/* ---------- Cards (todas as telas) ---------- */
.card {
  border-radius: 14px !important;
  box-shadow: var(--ilm-shadow) !important;
}
.card > .card-header {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.card > .card-header h5,
.card > .card-header h4 {
  font-weight: 650;
  letter-spacing: -.01em;
}

/* ---------- Acentos / botões ---------- */
.btn-primary {
  background-color: var(--ilm-accent) !important;
  border-color: var(--ilm-accent) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #1c5cab !important;
  border-color: #1c5cab !important;
}
.btn-outline-primary {
  color: var(--ilm-accent-vivid) !important;
  border-color: var(--ilm-accent-vivid) !important;
}
.btn-outline-primary:hover {
  background-color: var(--ilm-accent) !important;
  color: #fff !important;
}
.bg-primary,
.badge-primary,
.badge.bg-primary {
  background-color: var(--ilm-accent) !important;
}
.text-primary,
.txt-primary {
  color: var(--ilm-accent-vivid) !important;
}

/* ---------- Tabelas: cabeçalho ---------- */
.table thead th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ilm-muted);
}

/* ---------- Marca Ilumne (logo) ---------- */
.ilm-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.ilm-brandmark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #2a78d6, #1c5cab);
  box-shadow: 0 4px 12px -2px rgba(42, 120, 214, 0.45);
}
.ilm-brandmark svg {
  width: 19px;
  height: 19px;
}
.ilm-brandtext {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}
/* wordmark: claro na sidebar (fundo colorido/escuro em ambos os modos) */
.sidebar-wrapper .ilm-brandtext {
  color: #ffffff;
}
/* wordmark: escuro na topbar branca; claro quando a topbar entra no modo escuro */
.page-header .ilm-brandtext {
  color: #0e1420;
}
body.dark-only .page-header .ilm-brandtext {
  color: #f5f7fa;
}