/*
  Extensão visual localizada — lucro-mensal-grafico.html
  Apenas apresentação: não altera dimensões, DOM, dados, canvas ou interações.
*/
:root {
  --lm-surface: #ffffff;
  --lm-subtle: #f6f9fb;
  --lm-border: #d4e0ea;
  --lm-border-strong: #b7cad9;
  --lm-text: #123047;
  --lm-muted: #587087;
  --lm-primary: #0b5f8a;
  --lm-primary-hover: #084b70;
  --lm-primary-soft: #e7f2f8;
}

/* Filtros e opções da página. */
.linha-controles {
  border-color: var(--lm-border) !important;
  background: var(--lm-subtle) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
}
.linha-controles label,
.mini,
.kpi .t,
.kpi .s,
.legenda-detalhe .ld-muted {
  color: var(--lm-muted) !important;
}
.linha-controles select,
.btn-mini,
.legenda-item {
  border-color: var(--lm-border-strong) !important;
  background: var(--lm-surface) !important;
  color: var(--lm-text) !important;
}
.linha-controles select:hover,
.btn-mini:hover,
.legenda-item:hover {
  border-color: var(--lm-primary) !important;
  background: var(--lm-primary-soft) !important;
}
.btn-mini.ativo,
.legenda-item.ativo {
  border-color: var(--lm-primary) !important;
  background: var(--lm-primary) !important;
  color: #fff !important;
}
.legenda-item.ativo .legenda-swatch { border-top-color: #fff !important; }

/* KPIs: branco limpo, texto de maior contraste e destaque sem mudar grelha. */
.kpi {
  border-color: var(--lm-border) !important;
  background: var(--lm-surface) !important;
  box-shadow: 0 5px 14px rgb(18 48 71 / 6%);
}
.kpi .v { color: var(--lm-text) !important; }
.positivo { color: #08705d !important; }
.negativo { color: #b42338 !important; }

/* Legendas, detalhe e tooltip do canvas. */
.legenda-detalhe,
.debug-box {
  border-color: var(--lm-border) !important;
  background: var(--lm-surface) !important;
  color: var(--lm-text) !important;
}
.legenda-item .legenda-swatch,
.legenda-detalhe .ld-swatch { border-top-color: var(--lm-primary); }
.legenda-detalhe .ld-swatch { background: var(--lm-primary); }
.tooltip {
  background: #123047 !important;
  box-shadow: 0 8px 20px rgb(18 48 71 / 24%);
}

details summary { color: var(--lm-primary); }
#tabela-dados thead { background: #eaf2f7; }