/* ============================================================================
   Design 2 — camada visual nova, ativada por <html class="dv2">.
   Começa só na tela de Meta Ads (tela-modelo); as outras entram ao receber a
   classe. Carregar DEPOIS de harmo-clean.css.

   A cor de destaque segue a marca do domínio (assets/js/brand.js põe
   data-brand no <html>): Living = tinta (preto/branco), Harmo = dourado.
   Ela vale só para interface (botões, filtros, menu, destaques). Os gráficos
   continuam na paleta do harmo-palette.js, validada para daltonismo.
   ============================================================================ */

.dv2 {
  --ds-bg: #f5f5f6;
  --ds-surface: #ffffff;
  --ds-border: #e6e6ea;
  --ds-ink: #0b0b0c;
  --ds-muted: #6e6e78;
  --ds-accent: #111113;
  --ds-accent-ink: #ffffff;
  --ds-accent-soft: rgba(17, 17, 19, 0.06);
  --ds-radius: 14px;
  --ds-radius-sm: 10px;
}
.dv2[data-bs-theme="dark"] {
  --ds-bg: #09090a;
  --ds-surface: #131315;
  --ds-border: #24242a;
  --ds-ink: #f6f6f7;
  --ds-muted: #9b9ba5;
  --ds-accent: #f6f6f7;
  --ds-accent-ink: #0b0b0c;
  --ds-accent-soft: rgba(255, 255, 255, 0.08);
}
.dv2[data-brand="harmo"] {
  --ds-accent: #a87b1c;
  --ds-accent-ink: #ffffff;
  --ds-accent-soft: rgba(201, 158, 52, 0.14);
}
.dv2[data-brand="harmo"][data-bs-theme="dark"] {
  --ds-accent: #e0b452;
  --ds-accent-ink: #0b0b0c;
  --ds-accent-soft: rgba(224, 180, 82, 0.14);
}

/* O template pinta botão primário, menu ativo, foco e links com --pe-primary
   (harmo-clean.css o deixou azul). Aqui ele vira a cor da marca. Os
   seletores repetem o atributo de tema para vencer os de harmo-clean.css. */
.dv2[data-bs-theme="light"] {
  --pe-primary: #111113;
  --pe-primary-rgb: 17, 17, 19;
  --pe-primary-text-emphasis: #111113;
  --pe-primary-bg-subtle: rgba(17, 17, 19, 0.06);
  --pe-primary-border-subtle: #d4d4da;
  --pe-link-color: #111113;
  --pe-link-color-rgb: 17, 17, 19;
  --pe-link-hover-color: #3a3a40;
  --pe-link-hover-color-rgb: 58, 58, 64;
}
.dv2[data-bs-theme="dark"] {
  --pe-primary: #f6f6f7;
  --pe-primary-rgb: 246, 246, 247;
  --pe-primary-text-emphasis: #f6f6f7;
  --pe-primary-bg-subtle: rgba(255, 255, 255, 0.08);
  --pe-primary-border-subtle: rgba(255, 255, 255, 0.24);
  --pe-link-color: #f6f6f7;
  --pe-link-color-rgb: 246, 246, 247;
  --pe-link-hover-color: #d4d4da;
  --pe-link-hover-color-rgb: 212, 212, 218;
}
.dv2[data-brand="harmo"][data-bs-theme="light"] {
  --pe-primary: #a87b1c;              /* 4.6:1 sobre branco */
  --pe-primary-rgb: 168, 123, 28;
  --pe-primary-text-emphasis: #8a6414;
  --pe-primary-bg-subtle: rgba(201, 158, 52, 0.14);
  --pe-primary-border-subtle: #e6cf98;
  --pe-link-color: #8a6414;
  --pe-link-color-rgb: 138, 100, 20;
  --pe-link-hover-color: #6f500f;
  --pe-link-hover-color-rgb: 111, 80, 15;
}
.dv2[data-brand="harmo"][data-bs-theme="dark"] {
  --pe-primary: #e0b452;
  --pe-primary-rgb: 224, 180, 82;
  --pe-primary-text-emphasis: #ebc773;
  --pe-primary-bg-subtle: rgba(224, 180, 82, 0.14);
  --pe-primary-border-subtle: rgba(224, 180, 82, 0.35);
  --pe-link-color: #ebc773;
  --pe-link-color-rgb: 235, 199, 115;
  --pe-link-hover-color: #f2d595;
  --pe-link-hover-color-rgb: 242, 213, 149;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.dv2 body { background: var(--ds-bg); color: var(--ds-ink); }
.dv2 .text-primary { color: var(--ds-accent) !important; }

.dv2 .card.sm-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: none;
}
.dv2 .card.sm-card > .card-header { background: transparent; padding: 1.25rem 1.25rem 0; }
.dv2 .card.sm-card > .card-body { padding: 1.25rem; }
.dv2 .card-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.dv2 .sm-note { color: var(--ds-muted); }

/* Chip neutro (antes azul do template). */
.dv2 .sm-chip {
  background: var(--ds-accent-soft);
  color: var(--ds-ink);
  border: 0;
  font-weight: 500;
}

/* O traço colorido de 4px que o template põe antes de cada título de card. */
.dv2 .card-title::before { display: none !important; }

/* ── Botões na cor da marca ───────────────────────────────────────────────── */
.dv2 .btn-primary {
  background: var(--ds-accent) !important;
  border-color: var(--ds-accent) !important;
  color: var(--ds-accent-ink) !important;
  border-radius: var(--ds-radius-sm);
  font-weight: 500;
}
.dv2 .btn-primary:hover,
.dv2 .btn-primary:focus-visible { filter: brightness(1.15); }
.dv2 .btn-outline-primary,
.dv2 .ds-filter .btn-outline-secondary.dropdown-toggle {
  background: var(--ds-surface) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-ink) !important;
  border-radius: var(--ds-radius-sm);
}
.dv2 .btn-outline-primary:hover,
.dv2 .ds-filter .btn-outline-secondary.dropdown-toggle:hover { background: var(--ds-accent-soft) !important; }

/* Seletor de período: um "segmented control" em vez de botões soltos. */
.dv2 .ds-filter .btn-group {
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 3px;
  gap: 2px;
}
.dv2 .ds-filter .btn-group .btn {
  border: 0 !important;
  border-radius: 7px !important;
  color: var(--ds-muted);
  background: transparent;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
}
.dv2 .ds-filter .btn-group .btn:hover { color: var(--ds-ink); }
.dv2 .ds-filter .btn-group .btn.active {
  background: var(--ds-surface) !important;
  color: var(--ds-ink) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--ds-border);
}
.dv2[data-brand="harmo"] .ds-filter .btn-group .btn.active { color: var(--ds-accent) !important; }
.dv2 .ds-filter .form-control {
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
}

/* ── Seletor de período (assets/js/date-range.js) ─────────────────────────── */
.dv2 .ds-range { position: relative; }
.dv2 .ds-range-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 34px;
  padding: 0 0.75rem;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dv2 .ds-range-trigger:hover,
.dv2 .ds-range-trigger[aria-expanded="true"] { border-color: var(--ds-accent); }
.dv2 .ds-range-trigger i { color: var(--ds-muted); font-size: 1rem; }
.dv2 .ds-range-label { flex: 1 1 auto; text-align: left; }

.dv2 .ds-range-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1060;
  padding: 1rem;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}
.dv2 .ds-range-pop[hidden] { display: none; }
.dv2[data-bs-theme="dark"] .ds-range-pop { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); }

.dv2 .ds-range-months { position: relative; }
.dv2 .ds-range-nav {
  position: absolute;
  inset: -2px 0 auto 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.dv2 .ds-range-arrow {
  pointer-events: auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-ink);
  font-size: 1.25rem;
  line-height: 1;
}
.dv2 .ds-range-arrow:hover:not(:disabled) { background: var(--ds-accent-soft); }
.dv2 .ds-range-arrow:disabled { opacity: 0.25; }
.dv2 .ds-range-cols { display: flex; gap: 1.5rem; }
.dv2 .ds-range-title {
  height: 26px;
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ds-ink);
}
.dv2 .ds-range-grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 2px; }
.dv2 .ds-range-dow {
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ds-muted);
}
.dv2 .ds-range-day {
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--ds-ink);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  position: relative;
}
.dv2 .ds-range-day:hover:not(:disabled) { background: var(--ds-accent-soft); }
.dv2 .ds-range-day:disabled { color: var(--ds-muted); opacity: 0.35; cursor: default; }
.dv2 .ds-range-day.is-today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Faixa contínua entre início e fim; as pontas ganham a cor cheia da marca. */
.dv2 .ds-range-day.in-range { background: var(--ds-accent-soft); border-radius: 0; }
.dv2 .ds-range-day.is-start,
.dv2 .ds-range-day.is-end {
  background: var(--ds-accent) !important;
  color: var(--ds-accent-ink);
  font-weight: 600;
}
.dv2 .ds-range-day.is-start { border-radius: 8px 0 0 8px; }
.dv2 .ds-range-day.is-end { border-radius: 0 8px 8px 0; }
.dv2 .ds-range-day.is-start.is-end { border-radius: 8px; }

.dv2 .ds-range-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ds-border);
}
.dv2 .ds-range-preview { font-size: 0.8125rem; color: var(--ds-muted); font-variant-numeric: tabular-nums; }
.dv2 .ds-range-actions { display: flex; gap: 0.5rem; }

@media (max-width: 639.98px) {
  /* Um mês, ocupando a largura do filtro. */
  .dv2 .ds-range-pop { left: 0; right: 0; padding: 0.75rem; }
  .dv2 .ds-range-grid { grid-template-columns: repeat(7, 1fr); }
  .dv2 .ds-range-foot { flex-wrap: wrap; }
  .dv2 .ds-range-actions { margin-left: auto; }
}

/* ── Menu lateral ─────────────────────────────────────────────────────────── */
.dv2 .pe-nav-link.active {
  background: var(--ds-accent-soft) !important;
  background-image: none !important;
  color: var(--ds-accent) !important;
  font-weight: 600;
}
.dv2 .pe-nav-link.active i { color: var(--ds-accent) !important; }
/* O template põe um "brilho" borrado (::after com blur) no item ativo. */
.dv2 .pe-nav-link.active::after { display: none !important; }
.dv2 .pe-nav-link { border-radius: var(--ds-radius-sm); }

/* Avatar só com iniciais: cor da marca, não um tom sorteado pelo nome. Com
   foto (<img> dentro), a imagem cobre o fundo e isto não aparece. */
.dv2 #headerUserAvatar { background: var(--ds-accent) !important; color: var(--ds-accent-ink) !important; }

/* ── Cabeçalho da página ──────────────────────────────────────────────────── */
.dv2 .main-breadcrumb .breadcrumb-title {
  font-size: 1.5rem !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.dv2 .main-breadcrumb .breadcrumb { font-size: 0.8125rem; }

/* ── KPI: rótulo, número e variação, sem o ícone grande ───────────────────── */
.dv2 .card.sm-card.ds-kpi { margin-bottom: 0; } /* o espaço entre linhas vem do gutter da grade */
.dv2 .card.sm-card.ds-kpi > .card-body { padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dv2 .ds-kpi-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ds-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}
.dv2 .ds-kpi-label i { font-size: 1rem; opacity: 0.8; }
.dv2 .ds-kpi-value {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv2 .ds-kpi-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  color: var(--ds-muted);
  font-size: 0.75rem;
  min-height: 1.25rem;
}
.dv2 .ds-kpi-foot .badge { font-weight: 600; margin: 0 !important; }

/* ── Tabela de campanhas ──────────────────────────────────────────────────── */
.dv2 .sm-table thead th {
  background: transparent !important;
  color: var(--ds-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: none;
  border-bottom: 1px solid var(--ds-border);
  white-space: nowrap;
}
.dv2 .sm-table tbody td { border-color: var(--ds-border); font-variant-numeric: tabular-nums; }
.dv2 .sm-table tbody tr:hover td { background: var(--ds-accent-soft); }
.dv2 .form-switch .form-check-input:checked { background-color: var(--ds-accent); border-color: var(--ds-accent); }

/* ── Celular ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .dv2 .app-wrapper .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
  .dv2 .main-breadcrumb { margin: 1rem 0 !important; gap: 0.5rem !important; }
  .dv2 .main-breadcrumb .breadcrumb-title { font-size: 1.25rem !important; }
  .dv2 .main-breadcrumb nav { display: none; } /* a seta de voltar já leva de volta */

  /* Período: os presets rolam na horizontal em vez de quebrar em linhas. */
  .dv2 .ds-filter .card-body { padding: 0.75rem !important; }
  .dv2 .ds-filter .btn-group { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .dv2 .ds-filter .btn-group::-webkit-scrollbar { display: none; }
  .dv2 .ds-filter .btn-group .btn { flex: 1 0 auto; }
  .dv2 .ds-filter .ds-range { flex: 1 1 100%; }
  .dv2 .ds-filter .ds-range-trigger { width: 100%; }
  .dv2 .ds-filter #metaMetricPicker { margin-left: 0 !important; width: 100%; }
  .dv2 .ds-filter #metaMetricPicker .btn { width: 100%; }

  /* KPIs em duas colunas. */
  .dv2 #metaMetricCards { --bs-gutter-x: 0.625rem; --bs-gutter-y: 0.625rem; }
  .dv2 .card.sm-card.ds-kpi > .card-body { padding: 0.75rem 0.875rem; gap: 0.25rem; }
  .dv2 .ds-kpi-value { font-size: 1.25rem; }
  .dv2 .ds-kpi-label { font-size: 0.75rem; }
  .dv2 .ds-kpi-foot > span:not(.badge) { display: none; } /* a nota não cabe; a variação sim */

  .dv2 .card.sm-card > .card-header { padding: 1rem 1rem 0; }
  .dv2 .card.sm-card > .card-body { padding: 1rem; }
  .dv2 .sm-section-title { flex-wrap: wrap; gap: 0.5rem; }
}

/* ── Gráficos que rolam no celular (assets/js/chart-scroll.js) ──────────── */
.dv2 .ds-chart-scroll.is-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.dv2 .ds-chart-hint { margin-top: 0.25rem; font-size: 0.75rem; color: var(--ds-muted); text-align: center; }
.dv2 .ds-chart-hint[hidden] { display: none; }

/* ── Tabela de campanhas vira cards no celular ──────────────────────────── */
@media (max-width: 767.98px) {
  .dv2 .sm-table .table-responsive { overflow: visible; }
  .dv2 .sm-table table, .dv2 .sm-table tbody { display: block; }
  .dv2 .sm-table thead { display: none; }
  .dv2 .sm-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    padding: 0.875rem;
    margin-bottom: 0.625rem;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
  }
  .dv2 .sm-table tbody tr.is-paused { opacity: 0.7; }
  .dv2 .sm-table tbody td { display: block; padding: 0 !important; border: 0; background: transparent !important; color: var(--ds-ink); }
  .dv2 .sm-table td[data-cell="nome"] { grid-column: 1 / -1; font-size: 0.9375rem; line-height: 1.3; }
  .dv2 .sm-table td[data-cell="objetivo"] { grid-column: 1 / -1; margin-top: -0.25rem; color: var(--ds-muted); font-size: 0.8125rem; }
  /* Cada número com o rótulo em cima, em duas colunas. */
  .dv2 .sm-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--ds-muted);
    font-size: 0.6875rem;
    font-weight: 500;
  }
  .dv2 .sm-table td[data-label] { font-weight: 600; font-size: 0.9375rem; }
  /* Status e botão Ativar na última linha do card. */
  .dv2 .sm-table td[data-cell="status"] { padding-top: 0.5rem !important; border-top: 1px solid var(--ds-border); }
  .dv2 .sm-table td[data-cell="ativar"] { padding-top: 0.5rem !important; border-top: 1px solid var(--ds-border); display: flex; justify-content: flex-end; }
  .dv2 .sm-table tbody tr:hover td { background: transparent; }
}