/* ==========================================================================
   SJP INFO - reskin visual (2026-08)
   Camada aditiva sobre o tema padrão (style.css / bs-overides.css) - carregada
   por cima via _init_admin_assets() em application/helpers/assets_helper.php,
   nenhum arquivo core foi substituído. Sitewide (todas as telas, todos os
   tenants, mesmo código-fonte compartilhado) + estilos específicos do novo
   dashboard (abas Meu dia / Comercial / Financeiro).
   ========================================================================== */

:root {
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --border: #dfe4ee;
  --text: #1b2333;
  --text-muted: #66738a;
  --text-faint: #94a1b8;
  --accent: #2b5aad;
  --accent-ink: #ffffff;
  --accent-soft: #eaf1ff;
  --success: #17a06a;
  --warning: #d98b0e;
  --danger: #d9433f;
  --info: #2b9bd9;
  --default: #8a97ad;
  --muted: #94a1b8;
  --track: #e7ebf3;
  --shadow: 0 1px 2px rgba(23, 32, 55, 0.05), 0 8px 20px -12px rgba(23, 32, 55, 0.14);
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-bg: #1c2c47;
  --sidebar-bg-active: #26395a;
  --sidebar-text: #b7c3da;
  --sidebar-text-active: #ffffff;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10151f;
    --surface: #161d29;
    --surface-2: #1b2330;
    --border: #29323f;
    --text: #e8ecf4;
    --text-muted: #93a0b8;
    --text-faint: #667088;
    --accent: #6f9bef;
    --accent-ink: #0c1524;
    --accent-soft: #1c2a42;
    --success: #35c489;
    --warning: #e3a13a;
    --danger: #e7635f;
    --info: #4db6e8;
    --default: #7c8aa0;
    --muted: #7c8aa0;
    --track: #232d3d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -16px rgba(0, 0, 0, 0.55);
    --sidebar-bg: #0c1320;
    --sidebar-bg-active: #182338;
    --sidebar-text: #8291ab;
    --sidebar-text-active: #f2f5fb;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #10151f;
  --surface: #161d29;
  --surface-2: #1b2330;
  --border: #29323f;
  --text: #e8ecf4;
  --text-muted: #93a0b8;
  --text-faint: #667088;
  --accent: #6f9bef;
  --accent-ink: #0c1524;
  --accent-soft: #1c2a42;
  --success: #35c489;
  --warning: #e3a13a;
  --danger: #e7635f;
  --info: #4db6e8;
  --default: #7c8aa0;
  --muted: #7c8aa0;
  --track: #232d3d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -16px rgba(0, 0, 0, 0.55);
  --sidebar-bg: #0c1320;
  --sidebar-bg-active: #182338;
  --sidebar-text: #8291ab;
  --sidebar-text-active: #f2f5fb;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f4f6fa;
  --border: #dfe4ee;
  --text: #1b2333;
  --text-muted: #66738a;
  --text-faint: #94a1b8;
  --accent: #2b5aad;
  --accent-ink: #ffffff;
  --accent-soft: #eaf1ff;
  --success: #17a06a;
  --warning: #d98b0e;
  --danger: #d9433f;
  --info: #2b9bd9;
  --default: #8a97ad;
  --muted: #94a1b8;
  --track: #e7ebf3;
  --shadow: 0 1px 2px rgba(23, 32, 55, 0.05), 0 8px 20px -12px rgba(23, 32, 55, 0.14);
  --sidebar-bg: #1c2c47;
  --sidebar-bg-active: #26395a;
  --sidebar-text: #b7c3da;
  --sidebar-text-active: #ffffff;
  color-scheme: light;
}

/* ==========================================================================
   Portal do cliente (body.customers) - tema próprio, sempre claro (2026-08-05,
   pedido do usuário: "esse tema é separado do restante do CRM, prefiro
   refazer seguindo o CSS que fizemos pros logins"). O portal do cliente não
   tem o botão de alternar tema (esse botão só é injetado dentro de #header,
   elemento exclusivo do admin - DashboardThemeHook.php) - então antes disso
   ele só seguia o prefers-color-scheme do sistema, sem opção de ficar sempre
   claro. Sobrescrevendo as MESMAS variáveis CSS que o resto do arquivo já usa
   (--bg, --surface, --accent etc.) direto em body.customers: como são
   custom properties, uma regra que mira o elemento diretamente (aqui) sempre
   vence um valor herdado do :root (inclusive o do modo escuro do sistema),
   então isso já re-tema sozinho quase tudo que usa var(--...) - painéis,
   tabelas, botões, abas, badges, dashboard etc. Mesma paleta exata da tela de
   login do cliente/admin (que por sua vez veio do Painel do Contador). */
body.customers {
  --bg: #f6f9fc;
  --surface: #ffffff;
  --surface-2: #f1f5f7;
  --border: #dfe6ee;
  --text: #1f2933;
  --text-muted: #5b6b7c;
  --text-faint: #94a1b8;
  --accent: #1b4f8a;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0f9;
  --success: #1a7f4b;
  --warning: #8a5b00;
  --danger: #a32020;
  --info: #1b4f8a;
  --default: #727b86;
  --muted: #94a1b8;
  --track: #e3e8ee;
  --shadow: 0 1px 2px rgba(23, 32, 55, 0.05), 0 8px 20px -12px rgba(23, 32, 55, 0.14);
  --sidebar-bg: #1b4f8a;
  --sidebar-bg-active: #123761;
  --sidebar-text: #dce9f7;
  --sidebar-text-active: #ffffff;
  color-scheme: light;
  accent-color: #1b4f8a;
}

/* footer.footer (application/views/themes/perfex/footer.php) sempre teve cor crua
   do tema original, nunca coberto pelo reskin (achado 2026-08-05 na tela de login,
   escondido lá por não fazer sentido numa tela só de formulário - aqui no portal
   normal ele tem conteúdo de verdade, o copyright, então em vez de esconder eu
   cubro com os tokens novos). */
body.customers footer.footer {
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border) !important;
}

body.customers footer.footer a {
  color: var(--accent) !important;
}

/* pedido 2026-08-05: contorno dos cards/painéis do portal (Resumo dos
   projetos, Faturas etc.) com azul mais escuro, sempre visível - não só no
   foco. Diferente do var(--border) cinza-claro usado no resto (divisórias de
   tabela, inputs), que continua discreto de propósito - aqui é var(--accent)
   mesmo, reaproveitando o azul que já é a cor de marca em vez de inventar um
   tom novo. .panel_s não tinha nenhuma border própria (só box-shadow) -
   adicionando aqui. */
body.customers .panel_s {
  border: 1px solid var(--accent) !important;
}

body.customers .card,
body.customers .kpi {
  border-color: var(--accent) !important;
}

/* achado 2026-08-05: ".panel_s .panel-body" do CSS original já vinha com
   border própria (1px solid, cor antiga do tema) - com a borda nova do
   .panel_s por fora (acima) mais essa borda interna, sobravam duas bordas de
   1px bem próximas uma da outra, e como a interna tem cantos retos (raio
   zerado de propósito, ver achado mais antigo logo abaixo) contra o raio
   arredondado + overflow:hidden do .panel_s por fora, dava aquele risco/
   linha feia exatamente no canto arredondado. Solução: zerar a borda interna
   só quando está dentro de .panel_s (a única borda visível passa a ser a de
   fora) - o caso "cru" (panel-heading/body/footer sem .panel_s ao redor, ver
   achado mais antigo) continua com a própria borda em accent normalmente. */
body.customers .panel_s .panel-heading,
body.customers .panel_s .panel-body,
body.customers .panel_s .panel-footer {
  border: none !important;
}

body.customers .panel-heading,
body.customers .panel-body,
body.customers .panel-footer {
  border-color: var(--accent) !important;
}

/* ---- base ---------------------------------------------------------- */

body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent); }
hr { border-color: var(--border); }
.text-dark { color: var(--text) !important; }
.text-muted { color: var(--text-muted) !important; }

/* ---- topbar + sidebar chrome ---------------------------------------- */

#header {
  background: var(--sidebar-bg) !important;
  filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#menu, #side-menu {
  background: var(--sidebar-bg) !important;
}

#side-menu li a {
  color: var(--sidebar-text) !important;
}

#side-menu li.active > a,
#side-menu.nav > li > a:hover,
#side-menu.nav > li > a:focus {
  background: var(--sidebar-bg-active) !important;
  color: var(--sidebar-text-active) !important;
}

#side-menu li.active,
li .nav-second-level li {
  background: var(--sidebar-bg) !important;
}

.header-theme-toggle a i { color: #fff; }

/* achado 2026-08-05: topbar do PORTAL DO CLIENTE (nav.navbar-default.header, em
   application/views/themes/perfex/template_parts/navigation.php) é um componente
   separado do #header do admin - o reskin nunca tinha coberto ele, então ficava com o
   gradiente cinza-azulado original do tema (#415165->#4f5d7a), destoando do resto já
   escurecido. Mesmos tokens do sidebar admin, pra manter as duas áreas consistentes. */
.navbar-default {
  background: var(--sidebar-bg) !important;
  background-image: none !important;
  filter: none !important;
}

.navbar-default .navbar-nav > li > a {
  color: var(--sidebar-text) !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  background: var(--sidebar-bg-active) !important;
  color: var(--sidebar-text-active) !important;
}

/* ---- cards / panels -------------------------------------------------- */

.panel_s {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow);
  overflow: hidden !important;
}

.panel_s .panel-body,
.panel_s > .panel-heading,
.panel_s > .panel-footer {
  background: var(--surface) !important;
  color: var(--text);
}

.panel_s > .panel-heading {
  border-bottom: 1px solid var(--border);
}

.panel_s > .panel-footer {
  border-top: 1px solid var(--border);
}

/* achado 2026-08-05: telas do PORTAL DO CLIENTE (visão de projeto, descrição, membros -
   codebase/application/views/themes/perfex/template_parts/projects/project_overview.php) usam
   .panel-heading/.panel-body "crus", sem o wrapper .panel_s que o resto do reskin depende -
   então nada acima se aplicava e a caixa ficava branca/quadrada (cor + borda do tema original).
   Cobrindo aqui incondicionalmente, sitewide, com !important pra vencer:
   - .project-info-bg (cabeçalho dessas caixas) tinha #fbfbfb/#333 com !important no CSS
     original - preciso de !important também pra vencer.
   - .panel-body/.panel-heading tinham border-radius próprio (4px, às vezes só nos cantos de
     baixo) BRIGANDO com o overflow:hidden + border-radius do .panel_s de fora - resultado
     ficava com um raio pequeno "preso" por dentro do clip maior de fora, lendo como quase reto.
     Confirmado no DevTools em 2026-08-05 (regra .panel_s .panel-body do style.min.css, mais
     específica que a minha original de linha 169, vencia o border-radius por eu não ter
     coberto essa propriedade ali). Zero tudo aqui com !important e deixo só a caixa de fora
     (.panel_s) arredondar via overflow:hidden - sem .panel_s por perto, fica reto mesmo
     (correto pro tema escuro, que é o problema relatado, não uma exigência de design). */
.panel-heading,
.panel-body,
.panel-footer {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   Telas de login (admin + portal do cliente) - sincronizadas com o visual do
   Painel do Contador (2026-08-05, pedido do usuário: "gostei desse estilo,
   sincroniza as 3 telas"). Paleta própria, fixa (não usa os tokens --accent/
   --bg do resto do reskin nem participa do modo claro/escuro) - igual ao
   painel do contador, que também é sempre claro, sem toggle. Card branco,
   azul sólido, cantos arredondados, sem sombra pesada.

   Login do admin (/admin/authentication) é um template próprio, fora do
   layout normal (sem #wrapper/#header/.panel_s) - tem seu <style> inline
   (application/views/authentication/includes/head.php, core do tema, não
   editado) com fundo escuro e uploads/company/logo.png . Aqui sobrescrevo via
   custom.css, sitewide, escopado a body.login_admin pra não vazar pras outras
   telas de auth (esqueci senha, 2FA etc, que continuam com o visual antigo).

   Login do cliente (application/views/themes/perfex/views/login.php) já usa
   .panel_s dentro do layout normal do portal (topbar/#wrapper compartilhados
   com o resto do portal - não mexo neles, só no card de login em si).
   Controller passa bodyclass=customers_login só nesta tela
   (Authentication.php:69) - uso isso pra escopar sem afetar mais nada do
   portal. .login-form é a classe do <form> desta tela especificamente. Nada
   mais nessa página usa .panel_s/.panel-body, então dá pra mirar direto por
   descendência de body.customers_login, sem precisar de :has() (tentei
   :has() primeiro pra não depender do body class, mas não pegou no
   navegador testado - descendente comum é mais seguro). */

/* achado 2026-08-05: com o SO/navegador em modo escuro, o :root geral do reskin
   troca color-scheme pra "dark" (ver bloco @media prefers-color-scheme lá em
   cima) - isso faz o navegador desenhar controles NATIVOS (checkbox, etc.)
   com o UI escuro dele mesmo quando a página ao redor está clara (essas 3
   telas de login são sempre claras, sem toggle). Resultado: checkbox
   "não branco" contra o card branco nessas telas. Forçando color-scheme:light
   aqui pra os controles nativos baterem com o card. */
body.login_admin,
body.customers_login,
body.customers_login #wrapper,
body.customers_login .content {
  background: #f6f9fc !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  color-scheme: light;
  accent-color: #1b4f8a;
}

body.login_admin,
body.customers_login {
  padding-bottom: 45px !important;
}

/* topbar da tela de login do admin (2026-08-05, pedido: "mesmo padrão das
   demais, com topo/logo/rodapé") - antes essa tela não tinha topbar nenhuma,
   só a logo grande centralizada acima do card. Logo aqui é a do TENANT
   (get_company_logo(), lê da tabela de opções do banco daquele tenant
   específico - cada empresa cliente vê a própria logo; a SJPINFO, sendo o
   próprio "tenant" da conta master, vê a própria logo dela do mesmo jeito,
   sem caso especial). Mesmo visual do topo do painel do contador (pastilha
   branca com a logo, sobre a barra azul). */
body.login_admin .login-topbar {
  background: #1b4f8a;
  padding: 12px 20px;
}

body.login_admin .login-topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
}

body.login_admin .login-topbar-brand {
  display: inline-flex;
  align-items: center;
}

body.login_admin .login-topbar-brand img {
  height: 32px;
  width: auto;
  display: block;
}

body.login_admin .authentication-form-wrapper {
  margin-top: 40px !important;
}

/* rodapé das 3 telas de login (2026-08-05) - fixo na parte de baixo da
   viewport (não no fluxo normal - senão sobrava espaço vazio embaixo em
   telas curtas, achado 2026-08-05 quando o usuário viu a linha "alta
   demais"): linha fina (1px, cor do topo) + logo/crédito clicável abaixo
   dela, ocupando ~45px no total. Ícone fixo da SJPINFO
   (assets/images/sjpinfo-mark.png, fora da pasta uploads/company/ que é
   por-tenant) + "Desenvolvido e mantido por SJPINFO", linkando pro site
   institucional. No lugar do footer.footer escondido (achado 2026-08-05:
   fundo/texto quebrados ali, sem contexto). Sempre a marca da SJPINFO aqui,
   mesmo em telas que mostram a logo do tenant no topo - o rodapé é sobre quem
   mantém a plataforma, não sobre o tenant. body.login_admin/customers_login
   ganharam padding-bottom:45px (acima) pra sobrar espaço e o rodapé fixo
   nunca cobrir o fim do formulário em telas curtas. */
.login-footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 44px;
  height: 1px;
  background: #1b4f8a;
}

.login-credit {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: #f6f9fc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #5b6b7c !important;
  font-size: 12px;
  text-decoration: none !important;
}

.login-credit:hover,
.login-credit:focus {
  color: #1b4f8a !important;
}

.login-credit img {
  height: 16px;
  width: auto;
  display: block;
}

/* responsivo mobile (2026-08-05) - as 3 telas de login precisam funcionar bem
   em celular. Bootstrap já empilha as colunas (col-md-4/col-sm-8) em telas
   pequenas por padrão, e o .container do Bootstrap já tem padding lateral
   próprio - isso aqui é só o ajuste fino específico do reskin (topbar,
   tamanho de fonte do título, credit fixo) que não vem de graça. */
@media (max-width: 600px) {
  body.login_admin .login-topbar,
  body.customers_login .navbar-default {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body.login_admin .authentication-form-wrapper {
    margin-top: 24px !important;
  }

  body.customers_login .mtop40 {
    margin-top: 24px;
  }

  body.login_admin .authentication-form,
  body.customers_login .panel_s {
    padding: 16px !important;
  }

  body.login_admin .authentication-form h1,
  body.customers_login .login-heading {
    font-size: 20px !important;
  }

  .login-credit {
    font-size: 11px;
    gap: 6px;
    padding: 0 10px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  body.login_admin .authentication-form-wrapper,
  body.customers_login .mtop40 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

body.login_admin .authentication-form,
body.customers_login .panel_s {
  background: #ffffff !important;
  border: 1px solid #dfe6ee !important;
  border-color: #dfe6ee !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

body.customers_login .panel_s .panel-body {
  background: #ffffff !important;
  border-radius: 9px !important;
}

body.login_admin .authentication-form h1,
body.customers_login .login-heading {
  color: #1f2933 !important;
  font-weight: 700 !important;
  font-size: 23px !important;
  text-align: left !important;
  text-transform: none !important;
  margin: 0 0 4px !important;
}

body.login_admin .authentication-form label,
body.customers_login .login-form label {
  color: #1f2933 !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  margin-bottom: 5px;
}

body.login_admin .authentication-form .form-control,
body.customers_login .login-form .form-control {
  background: #ffffff !important;
  color: #1f2933 !important;
  border: 1px solid #dfe6ee !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  height: auto;
  padding: 10px 12px !important;
}

body.login_admin .authentication-form .form-control:focus,
body.customers_login .login-form .form-control:focus {
  border-color: #1b4f8a !important;
  box-shadow: 0 0 0 3px #e8f0f9 !important;
  outline: 0;
}

body.login_admin .authentication-form .btn-info,
body.customers_login .login-form .btn-info {
  background: #1b4f8a !important;
  border-color: #1b4f8a !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  font-weight: 600;
  text-transform: none;
}

body.login_admin .authentication-form .btn-info:hover,
body.login_admin .authentication-form .btn-info:focus,
body.customers_login .login-form .btn-info:hover,
body.customers_login .login-form .btn-info:focus {
  background: #123761 !important;
  border-color: #123761 !important;
}

/* topbar da tela de login do cliente usava var(--header-bg) (o gradiente/navy do resto
   do portal) - destoava do azul do painel do contador que essas 3 telas estão seguindo
   agora. Rodapé fixo (footer.footer, application/views/themes/perfex/footer.php) também
   ficava com combinação de cor quebrada aqui (herda estilo do tema original, que não
   fazia sentido em cima do fundo novo) - sem utilidade numa tela de login, escondido. */
body.customers_login .navbar-default {
  background: #1b4f8a !important;
}

body.customers_login footer.footer {
  display: none !important;
}

body.login_admin .authentication-form a,
body.customers_login .panel_s a {
  color: #1b4f8a !important;
}

/* project-info-bg é só o cabeçalho neutro de seção (cinza bem claro no original, #fbfbfb) -
   mapeia pra --surface-2 (superfície secundária), não pra --info (isso é outra classe,
   #03a9f4, usada em banners de alerta de verdade - essas duas nunca deveriam ter o mesmo
   tratamento visual apesar do nome parecido). */
.project-info-bg {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.info-bg {
  background: var(--info) !important;
  color: #fff !important;
  border-color: var(--info) !important;
}

.table-borded > tbody > tr > td,
.table-borded > tbody > tr > th {
  border-color: var(--border) !important;
}

/* ---- buttons ---------------------------------------------------------- */

.btn {
  border-radius: var(--radius-sm);
}

.btn-primary,
.btn-info {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}

.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus {
  filter: brightness(1.08);
}

.btn-default {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.btn-success { background: var(--success) !important; border-color: var(--success) !important; }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; }
.btn-danger  { background: var(--danger) !important;  border-color: var(--danger) !important; }

/* ---- forms -------------------------------------------------------------- */

.form-control,
.bootstrap-select .btn-default,
.selectpicker + .dropdown-toggle {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* ---- tabs ---------------------------------------------------------------- */

.nav-tabs {
  border-bottom: 1px solid var(--border);
}

.nav-tabs > li > a {
  border-radius: 0;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--accent) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--accent) !important;
  box-shadow: none;
}

/* ---- badges / labels ------------------------------------------------------ */

.label {
  border-radius: 999px;
  font-weight: 600;
  padding: 3px 9px;
}

/* achado 2026-08-04: o tema original faz .label-* como "outline" (bg transparente +
   borda/texto coloridos) - eu só sobrescrevia o background, então a borda/texto
   coloridos originais continuavam aparecendo por cima, resultando num selo lavado/
   sem contraste. Preciso sobrescrever background+color+border juntos, sempre. */
.label-default, .badge {
  background: var(--default) !important;
  color: #fff !important;
  border: none !important;
}
.label-success { background: var(--success) !important; color: #fff !important; border: none !important; }
.label-warning { background: var(--warning) !important; color: #fff !important; border: none !important; }
.label-danger  { background: var(--danger)  !important; color: #fff !important; border: none !important; }
.label-info    { background: var(--info)    !important; color: #fff !important; border: none !important; }
.label-primary { background: var(--accent)  !important; color: var(--accent-ink) !important; border: none !important; }

/* ---- alerts ---------------------------------------------------------------- */

.alert {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

/* ---- progress bars ---------------------------------------------------------- */

.progress {
  background: var(--track);
  border-radius: 999px;
  box-shadow: none;
}

.progress-bar {
  border-radius: 999px;
}

.progress-bar-success { background: var(--success); }
.progress-bar-warning { background: var(--warning); }
.progress-bar-danger  { background: var(--danger); }
.progress-bar-info     { background: var(--info); }
.progress-bar-default  { background: var(--default); }

/* ---- tables / datatables ------------------------------------------------------ */

table.dataTable,
.table {
  color: var(--text);
}

table.dataTable thead th,
.table > thead > tr > th {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.table > tbody > tr > td,
table.dataTable tbody td {
  border-top: 1px solid var(--border) !important;
}

.table-hover > tbody > tr:hover,
table.dataTable tbody tr:hover,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
table.dataTable tbody tr:hover > td,
table.dataTable tbody tr:hover > th {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* ---- dropdowns / modals ------------------------------------------------------- */

.dropdown-menu {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.dropdown-menu > li > a {
  color: var(--text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--surface-2);
  color: var(--text);
}

.modal-content {
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--text);
}

.modal-header, .modal-footer {
  border-color: var(--border);
}

/* ---- scrollbar (light touch, modern) -------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }


/* ==========================================================================
   Dashboard (Meu dia / Comercial / Financeiro) - componentes específicos
   ========================================================================== */

.dashboard-section-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--border);
  margin: 6px 0 20px;
}

.dashboard-section-tab {
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  padding: 6px 2px 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.dashboard-section-tab i { margin-right: 6px; }

.dashboard-section-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.dashboard-section-panel { display: none; }
.dashboard-section-panel.active { display: block; }
.dashboard-section-panel::after { content: ""; display: table; clear: both; }

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-kpis-1 { grid-template-columns: minmax(220px, 340px); }

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
}

.kpi-ring { flex: none; position: relative; width: 52px; height: 52px; }
.kpi-ring svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.kpi-ring circle { fill: none; stroke-width: 5; }
.kpi-ring .track { stroke: var(--track); }
.kpi-ring .val { stroke-linecap: round; transition: stroke-dashoffset 0.6s ease; }
.kpi-ring .pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text);
}

.kpi-body { min-width: 0; }
.kpi-label {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-value { font-size: 20px; font-weight: 700; margin-top: 3px; color: var(--text); }
.kpi-value small { font-size: 13px; font-weight: 500; color: var(--text-faint); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.card-link { font-size: 12.5px; color: var(--accent); font-weight: 600; }

.tabs {
  display: inline-flex; gap: 4px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 18px;
}
.tab {
  border: none; background: transparent; font-weight: 600; font-size: 12.5px;
  color: var(--text-muted); padding: 6px 14px; border-radius: 7px; cursor: pointer;
}
.tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.stackbar {
  display: flex; width: 100%; height: 10px; border-radius: 6px; overflow: hidden;
  background: var(--track); margin-bottom: 16px;
}
.stackbar span { height: 100%; }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.legend-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
}
.legend-row:nth-last-child(-n+2) { border-bottom: none; }
.legend-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.legend-row .legend-label { font-size: 12.5px; color: var(--text-muted); flex: 1; }
.legend-row .legend-count { font-size: 13px; font-weight: 700; color: var(--text); }
.legend-row .legend-pct { font-size: 11.5px; color: var(--text-faint); width: 34px; text-align: right; }

.invoices-total-inline .panel_s { box-shadow: none; border: 1px solid var(--border); }

@media (max-width: 992px) {
  .dashboard-kpis { grid-template-columns: repeat(2, 1fr); }
  .legend { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Fundo geral coerente + hover mais suave (achado 2026-08-04 revisando o
   painel: fundo da página e do calendário destoavam do resto, e os estados
   de hover/seleção estavam claros demais dentro do tema escuro)
   ========================================================================== */

#wrapper, .content {
  background: var(--bg) !important;
}

/* ---- FullCalendar (widget "Meu dia") ------------------------------------- */

.fc-widget-header,
.fc-widget-content {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.fc-day-number, .fc-day-header, .fc th, .fc td {
  color: var(--text-muted) !important;
}

.fc-state-highlight,
.fc-day.fc-today {
  background: var(--accent-soft) !important;
}

.fc-state-hover,
.fc-day-grid-event:hover {
  background: var(--surface-2) !important;
}

.fc-button {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.fc-button.fc-state-active,
.fc-button:hover {
  background: var(--track) !important;
}

.fc-toolbar h2 { color: var(--text); }
.fc-divider, .fc-list-heading td, .fc-row { border-color: var(--border) !important; }
.fc-unthemed .fc-divider, .fc-unthemed .fc-popover, .fc-unthemed .fc-list-heading td { background: var(--surface); }

/* ---- hover / seleção mais suave, sitewide ---------------------------------- */

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.list-group-item:hover,
.list-group-item:focus,
.pagination > li > a:hover,
.pagination > li > a:focus,
table.dataTable tbody tr:hover td,
.table-hover > tbody > tr:hover > td,
.horizontal-tabs ul.nav-tabs-horizontal > li > a:hover {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
}

.nav-tabs > li > a:hover {
  background: var(--surface-2) !important;
  border: none !important;
  color: var(--text) !important;
}

#side-menu li a:hover,
#side-menu li a:focus {
  background: var(--sidebar-bg-active) !important;
  color: var(--sidebar-text-active) !important;
}

.btn-default:hover, .btn-default:focus {
  background: var(--track) !important;
}

a:hover, a:focus { text-decoration: none; }

/* ---- drag-and-drop de widgets desativado (2026-08) --------------------------- */
.widget-dragger { display: none !important; }

/* ---- sidebar recolhida vira trilho de ícones em vez de sumir totalmente ------ */
@media (min-width: 769px) {
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #menu {
    margin-left: 0 !important;
    width: 60px;
  }
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #wrapper {
    margin-left: 60px !important;
  }
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu .menu-text,
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu .arrow,
  body.hide-sidebar:not(.show-sidebar):not(.page-small) .dashboard_user {
    display: none !important;
  }
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu > li > a {
    text-align: center;
    padding: 13px 0;
  }
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu .menu-icon {
    float: none;
    margin-right: 0;
    font-size: 18px;
  }
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu > li {
    position: relative;
  }
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu .nav-second-level {
    display: none;
  }
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu > li:hover > .nav-second-level {
    display: block !important;
    position: absolute;
    left: 60px;
    top: 0;
    width: 210px;
    z-index: 200;
    background: var(--sidebar-bg);
    box-shadow: var(--shadow);
    border-radius: 0 8px 8px 0;
  }
  body.hide-sidebar:not(.show-sidebar):not(.page-small) #side-menu > li:hover > .nav-second-level .sub-menu-text {
    display: inline;
  }
}

/* ---- layout robusto das colunas do dashboard (grid, sem bug de float/drag) --- */
.dashboard-columns {
  display: grid;
  gap: 20px;
  align-items: start;
  margin-bottom: 4px;
}
.dashboard-columns > [data-container] { min-width: 0; }
.dashboard-columns-8-4 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

@media (max-width: 992px) {
  .dashboard-columns-8-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Achado 2026-08-04: DataTables (barra de ferramentas, cabeçalho, botões) e a
   aba horizontal do widget "Minhas Tarefas/Meus Projetos/..." tinham fundo
   branco/texto escuro fixados com !important no CSS original - carga extra
   de especificidade + !important pra vencer, cobrindo essa combinação em
   qualquer tabela do sistema (é o mesmo componente usado em quase toda tela).
   ========================================================================== */

.user-data .home-activity .nav.nav-tabs {
  background: var(--surface) !important;
}
.user-data .home-activity .nav.nav-tabs > li > a {
  color: var(--text-muted) !important;
}
.user-data .home-activity .nav-tabs > li.active > a,
.user-data .home-activity .nav-tabs > li.active > a:focus,
.user-data .home-activity .nav-tabs > li.active > a:hover,
.user-data .home-activity .nav-tabs > li > a:focus,
.user-data .home-activity .nav-tabs > li > a:hover {
  color: var(--accent) !important;
}

.dataTables_length select,
.dataTables_filter input,
.dataTables_length select,
select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"] {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.input-group-addon {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_length label,
.dataTables_empty,
.dataTables_filter label {
  color: var(--text-muted) !important;
}

.btn.btn-default-dt-options,
.dt-buttons.btn-group .btn {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.dt-buttons.btn-group .btn:hover,
.dt-buttons.btn-group .btn:focus,
.dt-buttons.btn-group .btn:active {
  background: var(--track) !important;
  border-color: var(--accent) !important;
}

table.dataTable thead th,
table.dataTable thead td,
.table > thead > tr > th {
  background: var(--surface-2) !important;
}

.pagination > li > a,
.pagination > li > span {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  color: var(--text-faint) !important;
  background-color: var(--surface) !important;
}

/* ==========================================================================
   Achado 2026-08-05: caixas de filtro de status no portal do cliente
   (Suporte > Resumo dos Solicitações - .list-status a, em
   themes/perfex/views/tickets.php) vinham cruas do tema original: sem
   background (branco por padrão do navegador/tema claro) no estado normal, e
   fundo quase-branco (#f9fafb) no estado .active - as duas leituras erradas
   dentro do tema escuro. Estado normal passa a usar a superfície secundária
   (mesmo tom dos outros cards neutros); estado ativo usa --accent-soft (um
   azul um pouco mais claro que o fundo, só o suficiente pra evidenciar qual
   está selecionado) em vez de virar branco.
   ========================================================================== */
.list-status a {
  background: var(--surface-2) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  transition: background-color .15s ease, border-color .15s ease;
}

/* pedido 2026-08-05 (portal do cliente): esses "cards menores" (tiles de
   status de projeto/chamado) precisavam do mesmo contorno azul dos cards
   grandes que os envolvem, pra fazer sentido visual - antes a borda existia
   só de cor (var(--border), cinza-clara) sem largura/estilo própria, então
   ficava invisível contra o fundo bem parecido. Hover com um cinza bem sutil
   azulado (diferente do --surface-2 usado no resto) pra indicar interação, e
   o estado ativo/clicado continua o mais forte dos três (fundo accent-soft +
   borda accent, igual já era). */
.list-status a:hover {
  background: #e4ecf5 !important;
}

.list-status a.active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  font-weight: 600;
}