/* Estilos globais do PainelXML. Regras específicas de página ficam em css/pages/. */
:root {
  color-scheme: light dark;
}

body {
  min-height: 100vh;
}

/* Fundo das páginas: textura tileável (8×8) servida localmente (CSP: img-src 'self'). */
html,
body {
  background-image: url('/images/body/bg01.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}

code {
  font-size: 0.85em;
}

/* Sidebar: largura fixa em telas grandes; vira offcanvas (data-bs) em telas menores. */
.sidebar {
  --bs-offcanvas-width: 260px;

  /* Paleta ESCURA fixa (independente do tema claro/escuro da página). Paleta ConnTech:
     carvão (o círculo da logo) + verde (as letras/nós). Ajuste aqui. */
  --sb-bg: #2b2f36; /* fundo do menu (carvão, como o círculo da logo) */
  --sb-text: #c3ccd9; /* texto dos itens */
  --sb-text-hover: #ffffff;
  --sb-heading: #6c7686; /* título das seções */
  --sb-active-bg: #43a047; /* item ativo (verde ConnTech) */
  --sb-hover-bg: rgba(255, 255, 255, 0.06);
  --sb-border: rgba(255, 255, 255, 0.08);

  /* Garante o mesmo fundo no modo offcanvas (mobile). */
  --bs-offcanvas-bg: var(--sb-bg);
  --bs-offcanvas-color: var(--sb-text);

  /* !important porque o Bootstrap força `background-color: transparent !important` no
     .offcanvas-lg em telas grandes — sem isto o menu fica com o fundo branco da página. */
  background-color: var(--sb-bg) !important;
  color: var(--sb-text);

  /* Imagem de fundo do menu (tile). A cor carvão acima permanece como base/fallback. */
  background-image: url('/images/body/bg02.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}

@media (min-width: 992px) {
  .sidebar {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid var(--sb-border);
    background-color: var(--sb-bg) !important;
  }

  /* O Bootstrap ESCONDE o .offcanvas-header quando o offcanvas vira fixo (≥lg). Reexibimos,
     senão a marca "Portal Fiscal" (que mora nele) some no desktop. */
  .sidebar .offcanvas-header {
    display: flex;
  }
}

/* Nome do usuário logado, logo abaixo da marca — discreto e menor. */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem 0.7rem;
  font-size: 0.78rem;
  color: var(--sb-text);
  text-decoration: none;
  border-bottom: 1px solid var(--sb-border);
}

.sidebar-user:hover {
  color: var(--sb-text-hover);
}

/* Divisórias sutis sobre o fundo escuro. */
.sidebar .border-top,
.sidebar .border-bottom {
  border-color: var(--sb-border) !important;
}

.sidebar .navbar-brand {
  color: #f5f7fa;
}

/* Marca no topo do menu — mais destacada e elegante. */
.sidebar-brand-wrap {
  padding: 1rem 1rem 0.9rem;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Logo ConnTech no topo do menu. Largura limitada à barra; altura automática. */
.sidebar-logo {
  max-width: 100%;
  width: 175px;
  height: auto;
  display: block;
}

/* Itens do menu: tom claro, ícones alinhados, hover levemente destacado. */
.sidebar .nav-link {
  display: flex;
  align-items: center;
  color: var(--sb-text);
}

.sidebar .nav-link i {
  width: 1.25rem;
  text-align: center;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
  color: var(--sb-text-hover);
  background-color: var(--sb-hover-bg);
}

/* Item ativo: fundo azul do print. Regra explícita (0,3,0) para vencer o brand-primary
   que o tema aplica ao .nav-pills — o menu tem cor própria, fixa. */
.sidebar .nav-link.active {
  color: #ffffff;
  background-color: var(--sb-active-bg);
}

/* Título de seção do menu: separa grupos de itens. Discreto, em maiúsculas. */
.sidebar-heading {
  padding: 0.75rem 0.75rem 0.25rem;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sb-heading);
  list-style: none;
}

/* Primeiro título não empurra demais o topo. */
.sidebar-heading:first-of-type {
  margin-top: 0;
}

/* Larguras de barra de progresso em passos de 5% (evita style inline — CSP estrita).
   Globais: usadas no Consumo e no Painel. */
.u-w-0 { width: 0%; }
.u-w-5 { width: 5%; }
.u-w-10 { width: 10%; }
.u-w-15 { width: 15%; }
.u-w-20 { width: 20%; }
.u-w-25 { width: 25%; }
.u-w-30 { width: 30%; }
.u-w-35 { width: 35%; }
.u-w-40 { width: 40%; }
.u-w-45 { width: 45%; }
.u-w-50 { width: 50%; }
.u-w-55 { width: 55%; }
.u-w-60 { width: 60%; }
.u-w-65 { width: 65%; }
.u-w-70 { width: 70%; }
.u-w-75 { width: 75%; }
.u-w-80 { width: 80%; }
.u-w-85 { width: 85%; }
.u-w-90 { width: 90%; }
.u-w-95 { width: 95%; }
.u-w-100 { width: 100%; }

/* Botão de submit em andamento: bloqueia novo clique sem usar `disabled` (que removeria o
   name/value do botão do envio). O spinner é injetado pelo app.js. */
[data-loading='1'] {
  pointer-events: none;
  opacity: 0.85;
  cursor: progress;
}

/* Botão circular de "ver detalhes" (info) ao lado de status — mensagens longas vão para o
   pop-up em vez de poluir a tabela. */
.info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
  flex-shrink: 0;
}
.info-dot i { font-size: 0.85rem; }

/* KPI do painel: número grande e ícone em "chip". */
.kpi-value { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.kpi-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 0.6rem; flex-shrink: 0;
}

/* Polimento geral (§5): sombra suave nos cards e um respiro maior nas tabelas.
   Tema-aware — no escuro a sombra some e a borda fica sutil. */
.card {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

[data-bs-theme='dark'] .card {
  box-shadow: none;
}

.table > :not(caption) > * > * {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}