/* ============================================================================
   harmo-clean.css — camada de design do Living Online
   Carregada DEPOIS do tema (app.min.css) para sobrepor os tokens dele.

   Duas coisas acontecem aqui:

   1. ZERO VERMELHO. O tema trazia danger = #f55b5b. Redefinindo os tokens
      --pe-danger-* para laranja, todo `text-danger` / `bg-danger` /
      `btn-danger` do app vira laranja de uma vez — sem caçar classe por
      classe nas telas.

   2. VISUAL MINIMALISTA (Linear / Vercel). Superfície plana: sem sombra,
      contorno de 1px, raio pequeno, cinzas neutros e grade discreta. A cor
      fica reservada para o dado — a interface em si é quase monocromática.

   As cores de série dos gráficos estão em assets/js/harmo-palette.js, para
   CSS e JS lerem a mesma paleta.
   ========================================================================= */

:root {
  /* ── Status ───────────────────────────────────────────────────────────────
     Sem vermelho: o pior estado é laranja. Os tons de TEXTO são mais escuros
     que os de marca porque texto precisa de ~4.5:1 de contraste, enquanto uma
     barra/linha precisa de ~3:1. Medidos sobre a superfície de cada modo. */
  --hs-negative:        #c2410c; /* texto sobre claro — 5.18:1 */
  --hs-negative-mark:   #ea580c; /* preenchimento de gráfico */
  --hs-negative-rgb:    194, 65, 12;

  --hs-positive:        #15803d; /* texto sobre claro — 5.02:1 */
  --hs-positive-mark:   #16a34a;
  --hs-positive-rgb:    21, 128, 61;

  --hs-warning:         #b45309; /* texto sobre claro — 5.02:1 */
  --hs-warning-mark:    #eda100;

  /* ── Superfícies e traço (modo claro) ───────────────────────────────────── */
  --hs-page:      #fafafa;
  --hs-surface:   #ffffff;
  --hs-border:    rgba(9, 9, 11, 0.08);
  --hs-border-strong: rgba(9, 9, 11, 0.14);
  --hs-ink:       #09090b;
  --hs-ink-muted: #71717a;
  --hs-radius:    8px;

  /* Bootstrap: danger deixa de ser vermelho em todo o app. */
  --pe-danger:               #ea580c;
  --pe-danger-rgb:           234, 88, 12;
  --pe-danger-text-emphasis: #c2410c;
  --pe-danger-bg-subtle:     rgba(234, 88, 12, 0.10);
  --pe-danger-border-subtle: rgba(234, 88, 12, 0.30);
}

[data-bs-theme="dark"] {
  --hs-negative:      #fb923c; /* 8.34:1 sobre #111 */
  --hs-negative-mark: #f97316;
  --hs-negative-rgb:  251, 146, 60;

  --hs-positive:      #4ade80;
  --hs-positive-mark: #22c55e;
  --hs-positive-rgb:  74, 222, 128;

  --hs-warning:       #fbbf24;
  --hs-warning-mark:  #d97706;

  --hs-page:      #0a0a0a;
  --hs-surface:   #111111;
  --hs-border:    rgba(255, 255, 255, 0.09);
  --hs-border-strong: rgba(255, 255, 255, 0.16);
  --hs-ink:       #fafafa;
  --hs-ink-muted: #a1a1aa;

  --pe-danger:               #f97316;
  --pe-danger-rgb:           249, 115, 22;
  --pe-danger-text-emphasis: #fb923c;
  --pe-danger-bg-subtle:     rgba(249, 115, 22, 0.16);
  --pe-danger-border-subtle: rgba(249, 115, 22, 0.32);
}

/* Alguns utilitários do tema trazem o vermelho cravado no seletor, então não
   basta trocar o token — precisam ser reapontados explicitamente. */
.text-danger,
.link-danger,
.text-danger-emphasis {
  color: var(--hs-negative) !important;
}

.bg-danger,
.badge.bg-danger,
.text-bg-danger {
  background-color: var(--pe-danger) !important;
  color: #fff !important;
}

.bg-danger-subtle  { background-color: var(--pe-danger-bg-subtle) !important; }
.border-danger     { border-color: var(--pe-danger-border-subtle) !important; }

.btn-danger {
  --pe-btn-bg: var(--pe-danger);
  --pe-btn-border-color: var(--pe-danger);
  --pe-btn-hover-bg: var(--hs-negative);
  --pe-btn-hover-border-color: var(--hs-negative);
  --pe-btn-active-bg: var(--hs-negative);
  --pe-btn-active-border-color: var(--hs-negative);
}

.btn-outline-danger {
  --pe-btn-color: var(--hs-negative);
  --pe-btn-border-color: var(--pe-danger-border-subtle);
  --pe-btn-hover-bg: var(--pe-danger);
  --pe-btn-hover-border-color: var(--pe-danger);
  --pe-btn-hover-color: #fff;
}

/* Verde de alta idem: o par sobe/desce precisa ter o mesmo peso visual. */
.text-success,
.link-success,
.text-success-emphasis {
  color: var(--hs-positive) !important;
}

/* ============================================================================
   Superfície minimalista
   ========================================================================= */

body {
  background-color: var(--hs-page);
}

/* Cartão plano: contorno no lugar da sombra. É o que mais muda a percepção
   de "limpo" — sombra empilhada em tela cheia de KPI vira ruído. */
.card,
.sm-card,
.sm-surface,
.sm-metric-card {
  --sm-card-box-shadow: none;
  --sm-card-border-color: var(--hs-border);
  --sm-card-bg: var(--hs-surface);
  background-color: var(--hs-surface);
  background-image: none;
  border: 1px solid var(--hs-border);
  border-radius: var(--hs-radius);
  box-shadow: none;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .sm-card,
[data-bs-theme="dark"] .sm-surface,
[data-bs-theme="dark"] .sm-metric-card {
  --sm-card-bg: var(--hs-surface);
  background: var(--hs-surface);
  background-image: none;
  border-color: var(--hs-border);
  box-shadow: none;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--hs-border);
  padding-block: 0.875rem;
}

/* Título de cartão: menor e mais sóbrio — o número é o herói, não o rótulo. */
.card-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

/* Números grandes com aperto ótico; tabular só onde alinha em coluna. */
.sm-hero-text,
.card .fs-1, .card .fs-2, .card .fs-3 {
  letter-spacing: -0.02em;
  font-weight: 650;
}

table tbody td,
.table tbody td {
  font-variant-numeric: tabular-nums;
}

/* Cabeçalho e barra lateral acompanham a superfície, sem sombra. */
.app-header,
.pe-app-sidebar {
  background-color: var(--hs-surface);
  border-color: var(--hs-border);
  box-shadow: none;
}

/* Item de menu ativo: marcado por peso e um traço, não por bloco de cor. */
.pe-nav-link.active {
  font-weight: 600;
  color: var(--pe-primary);
}

/* Divisórias e bordas soltas do tema, uniformizadas. */
hr,
.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
.dropdown-menu,
.modal-content,
.list-group-item {
  border-color: var(--hs-border) !important;
}

.dropdown-menu,
.modal-content {
  border-radius: var(--hs-radius);
  box-shadow: 0 4px 16px rgba(9, 9, 11, 0.08);
}

[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Campos de formulário discretos: contorno fino, foco sem halo pesado. */
.form-control,
.form-select {
  border-color: var(--hs-border-strong);
  border-radius: var(--hs-radius);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--pe-primary);
  box-shadow: 0 0 0 3px rgba(var(--pe-primary-rgb), 0.14);
}

/* Badge de status: fundo lavado + texto forte, em vez de bloco saturado. */
.badge.bg-success-subtle { color: var(--hs-positive) !important; }
.badge.bg-danger-subtle  { color: var(--hs-negative) !important; }

/* Texto auxiliar um tom acima do cinza do tema, para não sumir no branco. */
.text-muted {
  color: var(--hs-ink-muted) !important;
}

/* ============================================================================
   Acento
   O tema vinha com --pe-primary: #e36666 (vermelho-salmão) — era ele que
   pintava botão primário, menu ativo, foco, links e o "Aplicar" dos filtros.
   Trocado pelo azul que já é a cor 1 dos gráficos, então interface e dado
   passam a usar a mesma referência em vez de dois azuis diferentes.
   ========================================================================= */

:root,
[data-bs-theme="light"] {
  --pe-primary:               #2a78d6;
  --pe-primary-rgb:           42, 120, 214;
  --pe-primary-text-emphasis: #256abc;
  --pe-primary-bg-subtle:     rgba(42, 120, 214, 0.10);
  --pe-primary-border-subtle: #aac9ef;

  --pe-link-color:            #256abc;
  --pe-link-color-rgb:        37, 106, 188;
  --pe-link-hover-color:      #2260ab;
  --pe-link-hover-color-rgb:  34, 96, 171;
}

[data-bs-theme="dark"] {
  --pe-primary:               #5b9bec; /* 6.60:1 sobre #111 */
  --pe-primary-rgb:           91, 155, 236;
  --pe-primary-text-emphasis: #7caff0;
  --pe-primary-bg-subtle:     rgba(91, 155, 236, 0.16);
  --pe-primary-border-subtle: rgba(91, 155, 236, 0.35);

  --pe-link-color:            #7caff0;
  --pe-link-color-rgb:        124, 175, 240;
  --pe-link-hover-color:      #a3c6f5;
  --pe-link-hover-color-rgb:  163, 198, 245;
}

/* O seletor de temas tinha uma opção "pink" (#e15f81) que também é
   avermelhada. Remapeada para violeta, para nenhuma escolha do usuário
   trazer o vermelho de volta. */
:root[data-theme-colors="pink"],
[data-bs-theme="light"][data-theme-colors="pink"],
[data-bs-theme="dark"][data-theme-colors="pink"] {
  --pe-primary:               #7c3aed;
  --pe-primary-rgb:           124, 58, 237;
  --pe-primary-text-emphasis: #6d28d9;
  --pe-primary-bg-subtle:     rgba(124, 58, 237, 0.10);
  --pe-primary-border-subtle: rgba(124, 58, 237, 0.35);
}

/* Botão primário: texto branco pede um passo mais escuro no hover. */
.btn-primary {
  --pe-btn-hover-bg: #256abc;
  --pe-btn-hover-border-color: #256abc;
  --pe-btn-active-bg: #2260ab;
  --pe-btn-active-border-color: #2260ab;
}

/* ============================================================================
   Filtros de data
   Os presets eram btn-outline-secondary: cinza, todos iguais, sem marcar qual
   estava valendo — dava para olhar a tela e não saber o período exibido.
   ========================================================================= */

.sm-card .btn-group .btn,
.card .btn-group .btn {
  border-color: var(--hs-border-strong);
  color: var(--hs-ink-muted);
  font-weight: 500;
  background-color: transparent;
}

.sm-card .btn-group .btn:hover,
.card .btn-group .btn:hover {
  background-color: var(--pe-primary-bg-subtle);
  border-color: var(--pe-primary-border-subtle);
  color: var(--pe-primary-text-emphasis);
}

/* Período em uso: fundo lavado no acento + texto forte. Marca sem gritar. */
.sm-card .btn-group .btn.active,
.card .btn-group .btn.active,
.sm-card .btn-group .btn[aria-pressed="true"],
.card .btn-group .btn[aria-pressed="true"] {
  background-color: var(--pe-primary-bg-subtle) !important;
  border-color: var(--pe-primary) !important;
  color: var(--pe-primary-text-emphasis) !important;
  font-weight: 600;
  z-index: 1;
}

/* Campos de data no mesmo traço dos botões, sem o azulão nativo do Chrome. */
input[type="date"].form-control {
  border-color: var(--hs-border-strong);
  color: var(--hs-ink);
  background-color: var(--hs-surface);
}

input[type="date"].form-control:focus {
  border-color: var(--pe-primary);
  box-shadow: 0 0 0 3px rgba(var(--pe-primary-rgb), 0.14);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 0.85;
}

[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
}

/* ============================================================================
   Marca
   O arquivo da logo é branco com transparência. Sobre a barra lateral clara
   (padrão do tema) ela sumiria, então `brightness(0)` a converte em tinta
   preserva o alfa. No modo escuro ela volta ao branco original.

   Antes daqui a marca era um <h3 class="text-white"> — branco sobre barra
   lateral branca, ou seja, invisível.
   ========================================================================= */

.brand-logo {
  height: 26px;
  width: auto;
  display: block;
  filter: brightness(0);
  opacity: 0.88;
}

[data-bs-theme="dark"] .brand-logo,
[data-sidebar-color="dark"] .pe-app-sidebar .brand-logo,
[data-sidebar-color="indigo"] .pe-app-sidebar .brand-logo,
[data-sidebar-color="rosewood"] .pe-app-sidebar .brand-logo {
  filter: none;
  opacity: 1;
}

/* O cabeçalho também é claro nesta camada, então a logo segue em tinta lá.
   (A marca do header vem com d-none no tema; a regra existe para quando o
   layout a exibe.) */
.app-header .brand-logo {
  height: 24px;
}

/* Barra lateral recolhida: sobra pouca largura, então a logo encolhe em vez
   de vazar para fora do painel. */
[data-sidebar="icon"] .pe-app-sidebar-logo .brand-logo,
.pe-app-sidebar-logo .brand-logo { max-width: 100%; }