/* =====================================================================
   PELE "BLING" DO GESTÃO (pedido do Maurício, 23/08/2026)
   Referência: bling.com.br (Meu Negócio, Contas a pagar, Contatos).
   Padrão: barra superior branca 48px, menu lateral branco com item ativo em
   pílula verde-clara, fundo #f8fafc, títulos #495769, verde #34ad61 nos
   botões (raio 8px), badges suaves, painel de ações, fonte Inter.
   Carregado DEPOIS de app.css e crm.css: só sobrescreve, não remove nada.
   ===================================================================== */

:root {
  --bling-verde: #34ad61;
  --bling-verde-escuro: #2a9453;
  --bling-verde-suave: #e6f4ea;
  --bling-titulo: #495769;
  --bling-texto: #111829;
  --bling-texto-suave: #97a4b8;
  --bling-linha: #e6eaf0;
  --bling-fundo: #f8fafc;
  --bling-branco: #ffffff;

  /* tokens do app passam a usar o verde e os cinzas do Bling */
  --azul-principal: var(--bling-verde);
  --azul-profundo: #1e7f45;
  --azul-claro: #5cc585;
  --azul-suave: var(--bling-verde-suave);
  --verde-principal: var(--bling-verde);
  --verde-suave: var(--bling-verde-suave);
  --hover-primario: var(--bling-verde-escuro);
  --texto-principal: var(--bling-texto);
  --texto-secundario: #5b6b7f;
  --texto-suave: var(--bling-texto-suave);
  --linha: var(--bling-linha);
  --fundo-app: var(--bling-fundo);
  --fundo-card: var(--bling-branco);
  --fundo-sutil: var(--bling-fundo);
  --fundo-input: var(--bling-branco);
  --badge-verde-texto: #1e7f45;
  --sidebar-grad: var(--bling-branco);
}
[data-theme="dark"] {
  --bling-verde: #4cc47a;
  --bling-verde-escuro: #3db069;
  --bling-verde-suave: #173a25;
  --bling-titulo: #d6dde6;
  --bling-texto: #e5e7eb;
  --bling-texto-suave: #8391a5;
  --bling-linha: #2a3650;
  --bling-fundo: #0e1526;
  --bling-branco: #161f33;
  --texto-secundario: #a3acb9;
  --fundo-sutil: #1b2540;
  --fundo-input: #111a2e;
  --badge-verde-texto: #b6ea92;
}

/* ---------- Tipografia ---------- */
body,
h1,
h2,
h3,
.titulo,
.kpi-valor,
.sidebar .marca .logo,
.topbar-titulo,
.card-unidade .titulo-unidade,
.card-unidade .valor-contrib {
  font-family:
    "Inter",
    Roboto,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  letter-spacing: 0;
}
body {
  font-size: 13.5px;
}

/* ---------- Shell: barra superior + menu lateral branco ---------- */
.app-shell {
  grid-template-rows: 48px 1fr;
}
.topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 45;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px 0 18px;
  background: var(--bling-branco);
  border-bottom: 1px solid var(--bling-linha);
  box-shadow: 0 1px 2px rgba(17, 24, 41, 0.04);
}
.topbar .topbar-marca {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--bling-verde);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  min-width: 210px;
}
.topbar .topbar-marca small {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--bling-texto-suave);
  letter-spacing: 0;
}
.topbar .topbar-modulos {
  display: flex;
  gap: 4px;
  flex: 1;
}
.topbar .topbar-modulos a {
  padding: 7px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--bling-titulo);
}
.topbar .topbar-modulos a:hover,
.topbar .topbar-modulos a.ativo {
  background: var(--bling-verde-suave);
  color: var(--bling-verde);
}
.topbar .topbar-direita {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.topbar .topbar-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--bling-titulo);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.topbar .topbar-icone:hover {
  background: var(--bling-verde-suave);
  color: var(--bling-verde);
}
.topbar .topbar-icone .contador {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar .topbar-usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: 8px;
  color: var(--bling-titulo);
  font-weight: 600;
  font-size: 13px;
}
.topbar .topbar-usuario .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bling-verde-suave);
  color: var(--bling-verde);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.topbar .topbar-usuario small {
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: var(--bling-texto-suave);
}

.sidebar {
  background: var(--bling-branco);
  color: var(--bling-titulo);
  border-right: 1px solid var(--bling-linha);
  top: 48px;
  height: calc(100vh - 48px);
  padding: 14px 12px 16px;
  scrollbar-color: rgba(17, 24, 41, 0.15) transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 41, 0.15);
}
.sidebar .marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px 10px;
}
.sidebar .marca .logo,
.sidebar .marca .sub {
  display: none; /* a marca agora vive na barra superior */
}
.sidebar .marca .btn-recolher {
  color: var(--bling-texto-suave);
  margin-left: auto;
}
.menu .secao {
  color: var(--bling-texto-suave);
  opacity: 1;
  font-size: 10.5px;
  font-weight: 700;
  padding: 12px 12px 4px;
}
.menu a {
  color: var(--bling-titulo);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 12px;
}
.menu a svg {
  color: var(--bling-titulo);
  opacity: 0.85;
}
.menu a:hover {
  background: var(--bling-fundo);
  color: var(--bling-texto);
}
.menu a.ativo {
  background: var(--bling-verde-suave);
  color: var(--bling-verde);
}
.menu a.ativo svg {
  color: var(--bling-verde);
  opacity: 1;
}
.menu a.ativo::before {
  display: none;
}
.sidebar-rodape {
  border-top: 1px solid var(--bling-linha);
  opacity: 1;
  color: var(--bling-titulo);
}
.sidebar-rodape .rodape-nome {
  color: var(--bling-texto);
  font-weight: 600;
  font-size: 13px;
}
.sidebar-rodape .rodape-papel {
  color: var(--bling-texto-suave);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sidebar-rodape a,
.sidebar-rodape .btn-tema {
  color: var(--bling-titulo);
}
.sidebar-rodape a:hover,
.sidebar-rodape .btn-tema:hover {
  color: var(--bling-verde);
}
html.menu-recolhido .sidebar .marca .logo {
  display: none;
}

/* ---------- Página ---------- */
.main {
  padding: 20px 28px 64px;
}
.page-header {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 18px;
  align-items: center;
}
.page-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--bling-titulo);
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-header h1::before {
  content: "... \203A";
  color: var(--bling-verde);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.04em;
}
.page-header .sub {
  color: var(--bling-texto-suave);
  font-size: 12.5px;
}

/* ---------- Cards e KPIs ---------- */
.card {
  border-radius: 10px;
  border: 1px solid var(--bling-linha);
  box-shadow: 0 1px 2px rgba(17, 24, 41, 0.03);
  padding: 20px 22px;
}
.card .card-titulo {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}
.card h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--bling-titulo);
}
.kpi-valor {
  font-weight: 800;
  color: var(--bling-texto);
}
.kpi .kpi-rotulo {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
}
@media (min-width: 769px) {
  .sidebar-rodape {
    display: none; /* usuário, tema e sair vivem na barra superior */
  }
}

/* ---------- Tabelas (listas do Bling) ---------- */
.tabela {
  font-size: 13px;
}
.tabela th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--bling-titulo);
  padding: 10px 12px;
  border-bottom: 1px solid var(--bling-linha);
}
.tabela td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--bling-linha);
  color: var(--bling-texto);
}
.tabela tbody tr:hover {
  background: var(--bling-fundo);
}

/* ---------- Botões ---------- */
.btn {
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
}
.btn-primario {
  background: var(--bling-verde);
  color: #fff;
}
.btn-primario:hover {
  background: var(--bling-verde-escuro);
}
.btn-secundario {
  background: var(--bling-branco);
  color: var(--bling-verde);
  border-color: var(--bling-verde);
}
.btn-secundario:hover {
  background: var(--bling-verde-suave);
}
.btn-ghost {
  color: var(--bling-titulo);
}
.btn-ghost:hover {
  background: var(--bling-verde-suave);
  color: var(--bling-verde);
}

/* ---------- Formulários ---------- */
.input,
select.input,
textarea.input {
  border-radius: 8px;
  border-color: #d6dde6;
  padding: 10px 12px;
  font-size: 13.5px;
}
[data-theme="dark"] .input,
[data-theme="dark"] select.input,
[data-theme="dark"] textarea.input {
  border-color: var(--bling-linha);
}
.input:focus {
  outline: none;
  border-color: var(--bling-verde);
  box-shadow: 0 0 0 3px rgba(52, 173, 97, 0.18);
}
label.campo .rotulo {
  color: var(--bling-titulo);
  font-weight: 600;
}

/* ---------- Badges de situação ---------- */
.badge {
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  padding: 3px 9px;
}
.badge.vermelho {
  background: #fbe0e6;
  color: #8a1c2b;
}
.badge.ambar,
.badge.laranja {
  background: #fff3c4;
  color: #7a5a00;
}
.badge.verde {
  background: #e3f5e9;
  color: #1e7f45;
}
.badge.azul {
  background: #e3effb;
  color: #1e4f8a;
}
[data-theme="dark"] .badge.vermelho {
  background: #3d1a1a;
  color: #fca5a5;
}
[data-theme="dark"] .badge.ambar,
[data-theme="dark"] .badge.laranja {
  background: #3a2c0c;
  color: #fcd380;
}
[data-theme="dark"] .badge.verde {
  background: #17351f;
  color: #b6ea92;
}
[data-theme="dark"] .badge.azul {
  background: #1a2a44;
  color: #bcd3f7;
}

/* ---------- Mobile: barra do topo branca como o resto ---------- */
@media (max-width: 768px) {
  .app-shell {
    grid-template-rows: auto 1fr;
  }
  .topbar {
    display: none;
  }
  .topbar-mobile {
    background: var(--bling-branco);
    color: var(--bling-titulo);
    border-bottom: 1px solid var(--bling-linha);
  }
  .menu-toggle {
    color: var(--bling-titulo);
  }
  .topbar-titulo {
    color: var(--bling-verde);
    font-weight: 800;
  }
  .sidebar {
    top: 0;
    height: 100vh;
  }
}
@media (max-width: 900px) {
  .topbar .topbar-modulos {
    display: none;
  }
}