/* ==========================================================================
   Dashboard do JamSac-Web  (files\dash\dash.css)

   Reveste os componentes NATIVOS do frmDashBoard. Nenhum componente foi
   trocado -- os graficos continuam sendo TUniSFChart. As classes sao aplicadas
   em tempo de execucao por TfrmDashBoard.AplicarEstilo (uDashBoard.pas), que
   percorre os componentes e distribui .jsd-* conforme o nome de cada um.

   Trocar este arquivo muda o visual do dashboard sem recompilar (SaaS).
   ========================================================================== */

:root{
  --jsd-accent:   #79b332;
  --jsd-accent-2: #8cc63f;
  --jsd-txt:      #1e293b;
  --jsd-muted:    #64748b;
  --jsd-linha:    #e2e8f0;
  --jsd-fundo:    #eef2f7;
  --jsd-card:     #ffffff;
  --jsd-raio:     16px;
  --jsd-sombra:   0 1px 3px rgba(15,23,42,.07), 0 8px 24px rgba(15,23,42,.05);
}

/* ----------------------------------------------------------- fundo geral -- */
.jsd-form,
.jsd-form .x-panel-body{
  background:
    radial-gradient(900px 420px at 100% -8%, rgba(140,198,63,.06), transparent 60%),
    linear-gradient(170deg, #eef2f7 0%, #e3e9f1 100%) !important;
}

/* --------------------------------------------------------------- cartoes --
   Cartoes de KPI na COR PADRAO DO SISTEMA (degrade vermelho da marca), com os
   valores em branco puro por cima. As cores solidas individuais que vinham do
   DFM sao cobertas aqui pelo CSS -- para voltar a diferencia-los por cor, e so
   remover o background abaixo.                                              */
.jsd-card{
  background:linear-gradient(135deg, #38591b 0%, #79b332 48%, #8cc63f 100%) !important;
  border-radius:var(--jsd-raio) !important;
  border:1px solid rgba(0,0,0,.14) !important;
  box-shadow:0 4px 14px rgba(56,89,27,.28), 0 1px 3px rgba(15,23,42,.10) !important;
  overflow:hidden !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.jsd-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(56,89,27,.40) !important;
}
/* mata as cores solidas dos paineis internos do DFM */
.jsd-card .x-panel,
.jsd-card .x-panel-body,
.jsd-card .x-container{ background:transparent !important; }

/* brilho no topo + sombra na base: e o que da leitura ao branco dos valores */
.jsd-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.20) 100%);
}
/* circulo decorativo no canto */
.jsd-card::after{
  content:'';position:absolute;pointer-events:none;
  width:130px;height:130px;border-radius:50%;
  right:-46px;top:-56px;
  background:rgba(255,255,255,.09);
}

/* textos do cartao: branco firme, com sombra para descolar do fundo */
.jsd-card .x-form-display-field,
.jsd-card label,
.jsd-card span{
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.38);
  font-family:'Segoe UI', Tahoma, Arial, sans-serif !important;
}
/* titulos/legendas (fonte menor que o valor): levemente translucidos,
   caixa alta discreta -- cria a hierarquia titulo x valor */
.jsd-card .x-form-display-field[style*="font-size: 1"][style*="px"]{
  letter-spacing:.4px;
}
/* ------------------------------------------------------- painel de grafico -- */
.jsd-chart{
  background:var(--jsd-card) !important;
  border:1px solid #d3dce6 !important;
  border-radius:var(--jsd-raio) !important;
  box-shadow:var(--jsd-sombra) !important;
  overflow:hidden !important;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.jsd-chart:hover{
  border-color:#cfd8e3 !important;
  box-shadow:0 6px 22px rgba(15,23,42,.10) !important;
}
.jsd-chart .x-panel-body{ background:var(--jsd-card) !important; }
/* fio de acento no topo do painel do grafico */
.jsd-chart::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg, #79b332, #8cc63f 55%, transparent);
  opacity:.75;z-index:2;
}

/* ------------------------------------------------------------- barra topo -- */
.jsd-topo{
  background:var(--jsd-card) !important;
  border:1px solid var(--jsd-linha) !important;
  border-radius:var(--jsd-raio) !important;
  box-shadow:var(--jsd-sombra) !important;
}
.jsd-topo .x-panel-body{ background:transparent !important; }

/* ------------------------------------------------------------------ abas -- */
.jsd-tabs .x-tab-bar{
  background:transparent !important;
  border:0 !important;
  padding:2px 0 6px !important;
}
.jsd-tabs .x-tab{
  background:rgba(255,255,255,.65) !important;
  border:1px solid var(--jsd-linha) !important;
  border-radius:999px !important;
  margin-right:8px !important;
  transition:background .18s, border-color .18s, box-shadow .18s;
}
.jsd-tabs .x-tab .x-tab-inner{
  color:var(--jsd-muted) !important;
  font-weight:600 !important;
  letter-spacing:.2px;
}
.jsd-tabs .x-tab-over{
  background:#fff !important;
  border-color:#cfd8e3 !important;
}
.jsd-tabs .x-tab-active{
  background:linear-gradient(135deg, #79b332, #8cc63f) !important;
  border-color:transparent !important;
  box-shadow:0 6px 16px rgba(140,198,63,.28) !important;
}
.jsd-tabs .x-tab-active .x-tab-inner{ color:#fff !important; }
.jsd-tabs .x-tab-bar-strip{ display:none !important; }

/* ----------------------------------------------------------------- grades -- */
.jsd-grid{
  border:1px solid var(--jsd-linha) !important;
  border-radius:var(--jsd-raio) !important;
  overflow:hidden !important;
  box-shadow:var(--jsd-sombra) !important;
}
.jsd-grid .x-column-header{
  background:#f8fafc !important;
  border-color:var(--jsd-linha) !important;
}
.jsd-grid .x-column-header-text{
  color:#475569 !important;
  font-weight:700 !important;
  font-size:11px !important;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.jsd-grid .x-grid-item-alt{ background:#fbfcfe !important; }
.jsd-grid .x-grid-item-over{ background:#f4f9ec !important; }
.jsd-grid .x-grid-item-selected{ background:rgba(140,198,63,.10) !important; }

/* ------------------------------------------------------------ barra progr. -- */
.jsd-prog .x-progress-bar{
  background:linear-gradient(90deg, #79b332, #8cc63f) !important;
  border-radius:999px !important;
}
.jsd-prog{
  background:#e9eef5 !important;
  border-radius:999px !important;
  border:0 !important;
  overflow:hidden !important;
}

/* --------------------------------------------------------------- botoes --- */
.jsd-btn{
  border-radius:10px !important;
  box-shadow:0 2px 8px rgba(15,23,42,.10) !important;
  transition:transform .15s, box-shadow .15s;
}
.jsd-btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(140,198,63,.22) !important; }

/* entrada suave dos blocos ao abrir a tela */
@keyframes jsdEntra{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.jsd-card, .jsd-chart, .jsd-grid{ animation:jsdEntra .32s ease both; }

@media (prefers-reduced-motion: reduce){
  .jsd-card, .jsd-chart, .jsd-grid{ animation:none; }
  .jsd-card:hover, .jsd-btn:hover{ transform:none; }
}

/* ==================================================== barra de navegacao ==
   UniContainerPanel2: links "Resumo Vendas / Contas a Pagar / ..." + filtros
   de Mes/Ano. Os rotulos tem LARGURA FIXA calculada pelo servidor: nunca usar
   padding/borda neles (o texto corta). O visual e todo por tipografia e por um
   sublinhado desenhado com ::after, que nao mexe na caixa do texto.
   O link ATIVO e detectado pelo negrito que o proprio codigo Delphi aplica
   (Font.Style = fsBold no clicado) -> [style*="bold"].
   ======================================================================== */
.jsd-nav{
  background:var(--jsd-card) !important;
  border:1px solid var(--jsd-linha) !important;
  border-radius:14px !important;
  box-shadow:var(--jsd-sombra) !important;
}
.jsd-nav .x-panel-body,
.jsd-nav .x-container{ background:transparent !important; }

/* rotulo "Filtrar por:" -> etiqueta discreta em caixa alta */
.jsd-nav .link{
  font-family:'Segoe UI', Tahoma, Arial, sans-serif !important;
  text-decoration:none !important;
  cursor:pointer;
}
.jsd-nav .link .x-form-display-field{ text-decoration:none !important; }

/* primeiro .link e o "Filtrar por:" (nao clicavel): vira legenda apagada */
.jsd-nav .link:not([style*="cursor"]){ cursor:default; }

/* links de navegacao: tipografia limpa + sublinhado animado */
.jsd-nav .link{
  position:relative;
  font-size:13.5px !important;
  font-weight:700 !important;
  color:#3b4553 !important;
  letter-spacing:.2px;
  transition:color .16s;
}
.jsd-nav .link::after{
  content:'';
  position:absolute; left:0; right:14px; bottom:-6px;
  height:3px; border-radius:3px;
  background:linear-gradient(90deg, #79b332, #8cc63f);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .22s ease;
}
.jsd-nav .link:hover{ color:var(--jsd-txt) !important; }
.jsd-nav .link:hover::after{ transform:scaleX(.55); opacity:.45; }

/* ATIVO: o Delphi poe negrito no link clicado */
.jsd-nav .link[style*="bold"]{
  color:#79b332 !important;
  font-weight:700 !important;
}
.jsd-nav .link[style*="bold"]::after{ transform:scaleX(1); opacity:1; }

/* neutraliza o sublinhado do fsUnderline vindo do Delphi */
.jsd-nav .link, .jsd-nav .link *{ text-decoration:none !important; }

/* rotulos "Mes:" / "Ano:" */
.jsd-nav .x-form-display-field,
.jsd-nav label{
  font-family:'Segoe UI', Tahoma, Arial, sans-serif !important;
  color:#334155 !important;
  font-weight:600 !important;
}

/* combos de Mes/Ano */
.jsd-nav .x-form-text{
  border-radius:9px !important;
  border:1.5px solid #c6d0dc !important;
  background:#fff !important;
  font-family:'Segoe UI', Tahoma, Arial, sans-serif !important;
  font-size:12.5px !important;
  color:var(--jsd-txt) !important;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.jsd-nav .x-form-trigger{
  border-radius:0 9px 9px 0 !important;
  background:#f8fafc !important;
  border-color:var(--jsd-linha) !important;
}
.jsd-nav .x-form-text:hover{ background:#fff !important; }
.jsd-nav .x-form-focus .x-form-text,
.jsd-nav .x-form-text:focus{
  border-color:#79b332 !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(140,198,63,.10) !important;
}

/* ============================================================== rodapes ==
   pnlAtualizarDash (datas + Atualizar) e pnlBotoesRodape (Fechar): mesmas
   faixas-cartao da barra de cima, com os campos de data tratados.
   ======================================================================== */
.jsd-topo .x-form-text{
  border-radius:9px !important;
  border:1.5px solid #c6d0dc !important;
  background:#fff !important;
  font-family:'Segoe UI', Tahoma, Arial, sans-serif !important;
  font-size:12.5px !important;
}
.jsd-topo .x-form-trigger{
  border-radius:0 9px 9px 0 !important;
  background:#f8fafc !important;
  border-color:var(--jsd-linha) !important;
}
.jsd-topo .x-form-focus .x-form-text{
  border-color:#79b332 !important;
  box-shadow:0 0 0 3px rgba(140,198,63,.10) !important;
}
.jsd-topo .x-form-display-field,
.jsd-topo label{ font-family:'Segoe UI', Tahoma, Arial, sans-serif !important; }

/* botoes SF (Atualizar/Gerar/Fechar): gradiente da marca + icone branco */
.jsd-btn.x-btn,
.jsd-btn{
  background:linear-gradient(135deg, #79b332 0%, #8cc63f 100%) !important;
  border:0 !important;
}
.jsd-btn .x-btn-inner{ color:#fff !important; font-weight:600 !important; }
.jsd-btn:hover{ filter:brightness(1.08); }
.jsd-btn:active{ filter:brightness(.94); transform:translateY(0); }
/* barra de progresso DENTRO de um cartao vermelho: trilha translucida e
   preenchimento branco (vermelho sobre vermelho sumia) */
.jsd-card .jsd-prog{ background:rgba(255,255,255,.22) !important; }
.jsd-card .jsd-prog .x-progress-bar{ background:#ffffff !important; }
.jsd-card .jsd-prog .x-progress-text{ color:#4a7420 !important; text-shadow:none; font-weight:700; }

/* ==========================================================================
   TEMA ESCURO do dashboard (body[data-jstema="escuro"], setado por home.js).
   O dashboard e um form nativo renderizado na MESMA pagina da home, entao ele
   acompanha o toggle do menu do usuario sem recarregar nada.
   Os graficos sao HighCharts (SVG): fill/stroke via CSS com !important vencem
   os estilos inline que o componente aplica.
   ========================================================================== */

/* fundo geral */
body[data-jstema="escuro"] .jsd-form,
body[data-jstema="escuro"] .jsd-form .x-panel-body{
  background:
    radial-gradient(900px 420px at 100% -8%, rgba(140,198,63,.14), transparent 60%),
    linear-gradient(170deg, #14161c 0%, #0e1116 100%) !important;
}

/* paineis de grafico */
body[data-jstema="escuro"] .jsd-chart{
  background:#171b23 !important;
  border-color:#262c38 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.30) !important;
}
body[data-jstema="escuro"] .jsd-chart .x-panel-body{ background:#171b23 !important; }

/* HighCharts no escuro */
body[data-jstema="escuro"] .jsd-chart .highcharts-background{ fill:#171b23 !important; }
body[data-jstema="escuro"] .jsd-chart .highcharts-plot-background{ fill:transparent !important; }
body[data-jstema="escuro"] .jsd-chart .highcharts-title,
body[data-jstema="escuro"] .jsd-chart .highcharts-subtitle,
body[data-jstema="escuro"] .jsd-chart .highcharts-axis-title,
body[data-jstema="escuro"] .jsd-chart .highcharts-axis-labels text,
body[data-jstema="escuro"] .jsd-chart .highcharts-legend-item text,
body[data-jstema="escuro"] .jsd-chart .highcharts-data-labels text,
body[data-jstema="escuro"] .jsd-chart .highcharts-label text{
  fill:#dbe2ec !important; color:#dbe2ec !important;
}
body[data-jstema="escuro"] .jsd-chart .highcharts-grid-line{ stroke:#242b37 !important; }
body[data-jstema="escuro"] .jsd-chart .highcharts-axis-line,
body[data-jstema="escuro"] .jsd-chart .highcharts-tick{ stroke:#3a4352 !important; }
body[data-jstema="escuro"] .jsd-chart .highcharts-tooltip-box{ fill:#1b2029 !important; stroke:#3a4352 !important; }
body[data-jstema="escuro"] .jsd-chart .highcharts-tooltip text{ fill:#e8ecf3 !important; }

/* barra de navegacao */
body[data-jstema="escuro"] .jsd-nav{
  background:#171b23 !important;
  border-color:#262c38 !important;
}
body[data-jstema="escuro"] .jsd-nav .link{ color:#aeb7c6 !important; }
body[data-jstema="escuro"] .jsd-nav .link:hover{ color:#e8ecf3 !important; }
body[data-jstema="escuro"] .jsd-nav .link[style*="bold"]{ color:#ff9d73 !important; }
body[data-jstema="escuro"] .jsd-nav .x-form-display-field,
body[data-jstema="escuro"] .jsd-nav label{ color:#c3cad6 !important; }
body[data-jstema="escuro"] .jsd-nav .x-form-text{
  background:#10141a !important; color:#e8ecf3 !important; border-color:#333b49 !important;
}
body[data-jstema="escuro"] .jsd-nav .x-form-trigger{ background:#10141a !important; border-color:#333b49 !important; }

/* rodapes (datas/botoes) */
body[data-jstema="escuro"] .jsd-topo{
  background:#171b23 !important; border-color:#262c38 !important;
}
body[data-jstema="escuro"] .jsd-topo .x-form-display-field,
body[data-jstema="escuro"] .jsd-topo label{ color:#c3cad6 !important; }
body[data-jstema="escuro"] .jsd-topo .x-form-text{
  background:#10141a !important; color:#e8ecf3 !important; border-color:#333b49 !important;
}
body[data-jstema="escuro"] .jsd-topo .x-form-trigger{ background:#10141a !important; border-color:#333b49 !important; }

/* abas */
body[data-jstema="escuro"] .jsd-tabs .x-tab{
  background:rgba(23,27,35,.85) !important; border-color:#262c38 !important;
}
body[data-jstema="escuro"] .jsd-tabs .x-tab .x-tab-inner{ color:#aeb7c6 !important; }
body[data-jstema="escuro"] .jsd-tabs .x-tab-over{ background:#1c212b !important; }
body[data-jstema="escuro"] .jsd-tabs .x-tab-active .x-tab-inner{ color:#fff !important; }

/* grades */
body[data-jstema="escuro"] .jsd-grid{ border-color:#262c38 !important; }
body[data-jstema="escuro"] .jsd-grid .x-grid-item{ background:#171b23 !important; color:#cfd6e2 !important; }
body[data-jstema="escuro"] .jsd-grid .x-grid-item-alt{ background:#141821 !important; }
body[data-jstema="escuro"] .jsd-grid .x-grid-cell{ border-color:#232936 !important; }
body[data-jstema="escuro"] .jsd-grid .x-column-header{ background:#10141a !important; border-color:#262c38 !important; }
body[data-jstema="escuro"] .jsd-grid .x-column-header-text{ color:#8b95a6 !important; }
body[data-jstema="escuro"] .jsd-grid .x-grid-item-over{ background:#141d33 !important; }
body[data-jstema="escuro"] .jsd-grid .x-grid-item-selected{ background:rgba(140,198,63,.28) !important; }

/* cartoes de KPI ja sao vermelhos da marca: funcionam nos dois temas */

/* nitidez do texto claro sobre fundo escuro (evita o aspecto "turvo") */
body[data-jstema="escuro"] .jsd-chart,
body[data-jstema="escuro"] .jsd-nav,
body[data-jstema="escuro"] .jsd-topo,
body[data-jstema="escuro"] .jsd-grid,
.jsd-card{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* contains internos do painel do grafico sempre transparentes
   (algum container do ExtJS trazia fundo branco proprio) */
.jsd-chart .x-container,
.jsd-chart .x-panel,
.jsd-chart .highcharts-container{ background:transparent !important; }
body[data-jstema="escuro"] .jsd-chart .x-container,
body[data-jstema="escuro"] .jsd-chart .x-panel{ background:transparent !important; }
/* ------------------------------------------------------------------------
   TEMA ESCURO: paineis intermediarios (containers de layout entre os cards
   e os graficos) tem fundo/borda proprios do ExtJS que apareciam como faixas
   BRANCAS entre um painel e outro. Aqui tudo que nao e cartao nem moldura de
   grafico fica transparente e sem borda; na sequencia o fundo escuro dos
   .jsd-chart e reafirmado (a ordem importa: esta regra vem antes).
   ------------------------------------------------------------------------ */
body[data-jstema="escuro"] .jsd-form .x-panel,
body[data-jstema="escuro"] .jsd-form .x-panel-body,
body[data-jstema="escuro"] .jsd-form .x-container,
body[data-jstema="escuro"] .jsd-form .x-autocontainer-outerCt,
body[data-jstema="escuro"] .jsd-form .x-scroller,
body[data-jstema="escuro"] .jsd-form .x-tabpanel-child{
  background:transparent !important;
  border-color:transparent !important;
}

/* reafirma as superficies que DEVEM ser pintadas no escuro */
body[data-jstema="escuro"] .jsd-form .jsd-chart,
body[data-jstema="escuro"] .jsd-form .jsd-chart .x-panel-body{
  background:#171b23 !important;
}
body[data-jstema="escuro"] .jsd-form .jsd-chart{ border-color:#262c38 !important; }
body[data-jstema="escuro"] .jsd-form .jsd-nav,
body[data-jstema="escuro"] .jsd-form .jsd-topo{
  background:#171b23 !important; border-color:#262c38 !important;
}
body[data-jstema="escuro"] .jsd-form .jsd-grid .x-grid-item{ background:#171b23 !important; }
body[data-jstema="escuro"] .jsd-form .jsd-grid .x-grid-item-alt{ background:#141821 !important; }
body[data-jstema="escuro"] .jsd-form .jsd-grid{ border-color:#262c38 !important; }
body[data-jstema="escuro"] .jsd-form .jsd-grid .x-column-header{ background:#10141a !important; border-color:#262c38 !important; }

/* os cartoes de KPI continuam no degrade da marca tambem no escuro
   (a regra generica acima os tornaria transparentes) */
body[data-jstema="escuro"] .jsd-form .jsd-card{
  background:linear-gradient(135deg, #38591b 0%, #79b332 48%, #8cc63f 100%) !important;
  border-color:rgba(0,0,0,.30) !important;
}
body[data-jstema="escuro"] .jsd-form .jsd-card .x-panel,
body[data-jstema="escuro"] .jsd-form .jsd-card .x-panel-body,
body[data-jstema="escuro"] .jsd-form .jsd-card .x-container{
  background:transparent !important;
}

/* ------------------------------------------------------------------------
   TEMA ESCURO, acabamento (a partir do screenshot):
   1. o tema crisp desenha borda clara nos paineis mesmo com border-color
      transparente -> aqui a borda e REMOVIDA (border:0) e depois devolvida
      explicitamente so a quem deve ter;
   2. as etiquetas de valor dos graficos (HighCharts dataLabels) vinham como
      pilulas BRANCAS com texto preto;
   3. as barras/fatias tinham contorno branco.
   ------------------------------------------------------------------------ */
body[data-jstema="escuro"] .jsd-form .x-panel,
body[data-jstema="escuro"] .jsd-form .x-panel-body,
body[data-jstema="escuro"] .jsd-form .x-container,
body[data-jstema="escuro"] .jsd-form .x-tabpanel-child{
  border:0 !important;
}
body[data-jstema="escuro"] .jsd-form .jsd-chart{ border:1px solid #262c38 !important; }
body[data-jstema="escuro"] .jsd-form .jsd-nav,
body[data-jstema="escuro"] .jsd-form .jsd-topo{ border:1px solid #262c38 !important; }
body[data-jstema="escuro"] .jsd-form .jsd-grid{ border:1px solid #262c38 !important; }
body[data-jstema="escuro"] .jsd-form .jsd-card{ border:1px solid rgba(0,0,0,.35) !important; }

/* etiquetas de valor: caixa escura, texto claro (svg e html) */
body[data-jstema="escuro"] .jsd-chart .highcharts-data-labels rect,
body[data-jstema="escuro"] .jsd-chart .highcharts-label-box{
  fill:#232a35 !important; stroke:#3a4352 !important;
}
body[data-jstema="escuro"] .jsd-chart .highcharts-data-labels text,
body[data-jstema="escuro"] .jsd-chart .highcharts-data-labels tspan{
  fill:#e8ecf3 !important;
}
body[data-jstema="escuro"] .jsd-chart .highcharts-data-labels span,
body[data-jstema="escuro"] .jsd-chart .highcharts-data-labels span *{
  color:#e8ecf3 !important; text-shadow:none !important;
}

/* contorno das barras/fatias: escuro em vez de branco */
body[data-jstema="escuro"] .jsd-chart .highcharts-point{ stroke:#171b23 !important; }

/* linhas de ligacao dos rotulos da pizza */
body[data-jstema="escuro"] .jsd-chart .highcharts-data-labels path{ stroke:#5a6475 !important; }