/* ============================================================================
   krypta-cards.css — CARDS DE KPI + CONTAINERS DE GRÁFICO
   ============================================================================
   ARQUIVO 6 DE 7. Depende de krypta-tokens.css.

   Existem TRÊS formatos de card no padrão KRYPTA. Cada um tem um lugar.

   A) .kpi-card              — PADRÃO. Card claro com barra colorida à
                               esquerda (4px). É o que você usa em 90% dos casos:
                               topo das abas Análise (Despesas, Receita,
                               Comissionamento) e de qualquer relatório.

   B) .kpi-card-dark         — Card PRETO sólido com barra colorida à esquerda.
                               Preto nos DOIS temas. Use quando os KPIs do topo
                               precisam "pesar" visualmente e se separar do
                               restante da tela.

   C) .kpi-card-top          — Card claro com faixa de gradiente em CIMA (3px).
                               Use na tela inicial / visualizador, onde os
                               números são o assunto principal.

   ANATOMIA (igual nos três):
     <div class="kpi-card primary">
        <div class="kpi-label">Total no período</div>
        <div class="kpi-valor">R$ 1.284.300,00</div>
        <div class="kpi-sub">312 contratos</div>
     </div>

   CORES SEMÂNTICAS DA BARRA — sempre as mesmas, em todo sistema:
     primary  ciano     valor neutro / total geral
     success  verde     realizado, pago, positivo
     warning  âmbar     previsto, pendente, atenção
     danger   vermelho  vencido, perda, negativo
     violet   violeta   projeção, meta, comparativo
   ============================================================================ */

/* ============================================================================
   A) KPI-CARD PADRÃO — barra colorida à esquerda
   ============================================================================ */
.kpi-card {
    border-radius: var(--krypta-radius-lg);
    padding: 16px 18px;
    background: var(--krypta-bg-card);
    border: 1px solid var(--krypta-border);
    border-left: 4px solid var(--krypta-cyan);
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Hover: sobe 2px e ganha sombra. Sinaliza "isto é clicável/explorável". */
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--krypta-shadow-medium);
}

.kpi-card .kpi-label {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--krypta-text-muted);
    letter-spacing: 0.4px;
    font-family: var(--krypta-font-mono);
    display: flex;
    align-items: center;
    gap: 6px;
}
.kpi-card .kpi-valor {
    font-size: 1.55rem;
    font-weight: 700;
    margin-top: 4px;
    color: var(--krypta-text-primary);
    font-family: var(--krypta-font-display);
    line-height: 1.15;
}
.kpi-card .kpi-sub,
.kpi-card small {
    color: var(--krypta-text-muted);
    font-size: 0.72rem;
}

/* Cor da barra + do número por semântica */
.kpi-card.primary { border-left-color: var(--krypta-cyan); }
.kpi-card.success { border-left-color: var(--krypta-success); }
.kpi-card.warning { border-left-color: var(--krypta-warning); }
.kpi-card.danger  { border-left-color: var(--krypta-danger); }
.kpi-card.violet  { border-left-color: var(--krypta-violet); }
.kpi-card.info    { border-left-color: var(--krypta-cyan); }

.kpi-card.success .kpi-valor { color: var(--krypta-success); }
.kpi-card.warning .kpi-valor { color: var(--krypta-warning); }
.kpi-card.danger  .kpi-valor { color: var(--krypta-danger); }
.kpi-card.violet  .kpi-valor { color: var(--krypta-violet); }

/* Variação percentual (delta) dentro do card */
.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--krypta-radius-pill);
    margin-top: 6px;
    font-family: var(--krypta-font-mono);
}
.kpi-delta.up   { color: var(--krypta-success); background: rgba(22,163,74,0.12); }
.kpi-delta.down { color: var(--krypta-danger);  background: rgba(220,38,38,0.12); }
.kpi-delta.flat { color: var(--krypta-text-muted); background: var(--krypta-bg-elevated); }

/* ============================================================================
   B) KPI-CARD DARK — preto sólido nos dois temas
   ============================================================================ */
.kpi-card-dark {
    background: #0F172A;
    color: #FFFFFF;
    border: none;
    border-left: 4px solid var(--krypta-cyan);
    border-radius: var(--krypta-radius-xl);
    padding: 16px 18px;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html[data-theme="dark"] .kpi-card-dark { background: #030712; }
.kpi-card-dark:hover { transform: translateY(-2px); box-shadow: var(--krypta-shadow-medium); }

.kpi-card-dark .kpi-label {
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    font-family: var(--krypta-font-mono);
    color: #94A3B8;
}
.kpi-card-dark .kpi-valor {
    font-size: 1.55rem;
    font-weight: 700;
    margin-top: 4px;
    color: #FFFFFF;
    font-family: var(--krypta-font-display);
}
.kpi-card-dark .kpi-sub, .kpi-card-dark small { color: #94A3B8; opacity: 0.85; font-size: 0.72rem; }

.kpi-card-dark.primary { border-left-color: var(--krypta-cyan); }
.kpi-card-dark.success { border-left-color: var(--krypta-success); }
.kpi-card-dark.warning { border-left-color: var(--krypta-warning); }
.kpi-card-dark.danger  { border-left-color: var(--krypta-danger); }
.kpi-card-dark.violet  { border-left-color: var(--krypta-violet); }

/* Compat: os sistemas legados aplicam .card.bg-primary/.bg-success/etc nos
   KPIs de topo. Repintamos para o mesmo preto+barra, garantindo que uma tela
   antiga e uma nova fiquem idênticas. */
.card.bg-primary, .card.bg-success, .card.bg-warning,
.card.bg-danger,  .card.bg-info,    .card.bg-secondary, .card.bg-dark {
    background: #0F172A !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--krypta-radius-xl) !important;
    overflow: hidden !important;
    position: relative !important;
    border-left: 4px solid var(--krypta-cyan) !important;
}
html[data-theme="dark"] .card.bg-primary,
html[data-theme="dark"] .card.bg-success,
html[data-theme="dark"] .card.bg-warning,
html[data-theme="dark"] .card.bg-danger,
html[data-theme="dark"] .card.bg-info,
html[data-theme="dark"] .card.bg-secondary,
html[data-theme="dark"] .card.bg-dark { background: #030712 !important; }

.card.bg-success   { border-left-color: var(--krypta-success) !important; }
.card.bg-warning   { border-left-color: var(--krypta-warning) !important; }
.card.bg-danger    { border-left-color: var(--krypta-danger) !important; }
.card.bg-info      { border-left-color: var(--krypta-cyan) !important; }
.card.bg-secondary { border-left-color: var(--krypta-text-faded) !important; }
.card.bg-dark      { border-left-color: var(--krypta-violet) !important; }

.card.bg-primary *, .card.bg-success *, .card.bg-warning *,
.card.bg-danger *,  .card.bg-info *,   .card.bg-secondary *, .card.bg-dark * {
    color: #FFFFFF !important;
}
.card.bg-primary .text-muted, .card.bg-success .text-muted, .card.bg-warning .text-muted,
.card.bg-danger .text-muted,  .card.bg-info .text-muted,   .card.bg-secondary .text-muted,
.card.bg-dark .text-muted,
.card.bg-primary small, .card.bg-success small, .card.bg-warning small,
.card.bg-danger small,  .card.bg-info small,   .card.bg-secondary small, .card.bg-dark small {
    color: #94A3B8 !important;
    opacity: 0.85;
}

/* Card-header colorido -> preto com barra inferior colorida */
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-warning,
.card-header.bg-danger,  .card-header.bg-info,    .card-header.bg-secondary,
.card-header.bg-dark {
    background: #0F172A !important;
    color: #FFFFFF !important;
    border-bottom: 2px solid var(--krypta-cyan) !important;
}
html[data-theme="dark"] .card-header.bg-primary,
html[data-theme="dark"] .card-header.bg-success,
html[data-theme="dark"] .card-header.bg-warning,
html[data-theme="dark"] .card-header.bg-danger,
html[data-theme="dark"] .card-header.bg-info,
html[data-theme="dark"] .card-header.bg-secondary,
html[data-theme="dark"] .card-header.bg-dark { background: #030712 !important; }
.card-header.bg-success { border-bottom-color: var(--krypta-success) !important; }
.card-header.bg-warning { border-bottom-color: var(--krypta-warning) !important; }
.card-header.bg-danger  { border-bottom-color: var(--krypta-danger) !important; }

/* ============================================================================
   C) KPI-CARD-TOP — faixa de gradiente no topo
   ============================================================================
   Para a tela inicial: label em ciano/violeta alternado, número grande.
   ============================================================================ */
.kpi-card-top {
    background: var(--krypta-bg-card);
    border: 1px solid var(--krypta-border) !important;
    border-radius: var(--krypta-radius-xl);
    padding: 16px 12px;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
    position: relative;
    height: 100%;
}
.kpi-card-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--krypta-cyan);
}
.kpi-card-top.violet::before { background: var(--krypta-violet); }
.kpi-card-top.brand::before  { background: var(--krypta-gradient-brand); }
.kpi-card-top.warning::before{ background: var(--krypta-warning); }
.kpi-card-top.success::before{ background: var(--krypta-success); }
.kpi-card-top:hover { transform: translateY(-2px); box-shadow: var(--krypta-shadow-medium); }

.kpi-card-top .kpi-label {
    font-family: var(--krypta-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--krypta-cyan);
}
.kpi-card-top.violet .kpi-label { color: var(--krypta-violet); }
.kpi-card-top .kpi-valor {
    color: var(--krypta-text-primary);
    font-weight: 700;
    font-family: var(--krypta-font-display);
    font-size: 1.4rem;
    margin-top: 4px;
}

/* ============================================================================
   D) CONTAINERS DE GRÁFICO
   ============================================================================
   O <canvas> do Chart.js PRECISA de um wrapper com altura fixa e
   position:relative. Sem isso o gráfico cresce infinitamente ao
   redimensionar a janela (bug clássico do Chart.js com
   maintainAspectRatio:false).

   HTML:
     <div class="card">
       <div class="card-header"><h6 class="chart-titulo">Por centro de custo</h6></div>
       <div class="card-body">
          <div class="chart-wrap"><canvas id="chartX"></canvas></div>
       </div>
     </div>

   Alturas: .chart-wrap 300px | .tall 400px | .short 220px
   ============================================================================ */
/* v7.3 (ressalva 14/08 — "painel dos GRÁFICOS branco no dark") — o
   chart_card (krypta_ui.html) monta o container com o .card CRU do
   Bootstrap, cujo fundo é BRANCO fixo (--bs-card-bg) nos dois temas:
   no dark o painel inteiro aparecia branco. Tokeniza SÓ o container —
   o conteúdo do <canvas> é de outro lote. Os .card.bg-* (KPIs pretos,
   acima) usam !important e não são afetados por esta regra. */
.card {
    --bs-card-bg: var(--krypta-bg-card);
    --bs-card-color: var(--krypta-text-primary);
    --bs-card-border-color: var(--krypta-border);
    --bs-card-cap-bg: var(--krypta-bg-elevated);
    --bs-card-cap-color: var(--krypta-text-primary);
    color: var(--krypta-text-primary);
}
.chart-wrap {
    position: relative;
    height: 300px;
    width: 100%;
}
.chart-wrap.tall  { height: 400px; }
.chart-wrap.short { height: 220px; }

@media (max-width: 768px) {
    .chart-wrap       { height: 260px; }
    .chart-wrap.tall  { height: 320px; }
    .chart-wrap.short { height: 200px; }
}

/* Título de gráfico — SEMPRE em VIOLETA. Decisão de marca: o violeta
   identifica "isto é uma análise", diferenciando de títulos normais. */
.chart-titulo,
.card-header .chart-titulo {
    color: var(--krypta-violet) !important;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
    font-family: var(--krypta-font-display);
}
.chart-subtitulo {
    color: var(--krypta-text-muted);
    font-size: 0.72rem;
    margin: 2px 0 0;
    font-family: var(--krypta-font-body);
}

/* Estado vazio de gráfico (sem dados no período filtrado) */
.chart-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--krypta-text-faded);
    gap: 8px;
    text-align: center;
}
.chart-vazio i { font-size: 1.8rem; opacity: 0.4; }
.chart-vazio span { font-size: 0.8rem; }

/* Legenda customizada em HTML (quando a do Chart.js não basta) */
.chart-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--krypta-text-muted);
}
.chart-legenda .item { display: inline-flex; align-items: center; gap: 5px; }
.chart-legenda .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================================
   E) TABELA DE APOIO ABAIXO DE GRÁFICO (compacta)
   ============================================================================ */
.tabela-compacta { font-size: 0.78rem; }
.tabela-compacta th { white-space: nowrap; }
.tabela-compacta td { padding: 6px 8px !important; }
.tabela-compacta td.num,
.tabela-compacta th.num {
    text-align: right;
    font-family: var(--krypta-font-mono);
    white-space: nowrap;
}

/* Barra de proporção dentro de célula de tabela (mini "gráfico de barra") */
.cell-bar {
    position: relative;
    background: var(--krypta-bg-elevated);
    border-radius: var(--krypta-radius-pill);
    height: 6px;
    overflow: hidden;
    min-width: 60px;
}
.cell-bar > span {
    display: block;
    height: 100%;
    background: var(--krypta-gradient-brand);
    border-radius: var(--krypta-radius-pill);
}