/*
 * Simulação Bora CRM — widgets do Painel.
 * Usa os tokens --bora-* definidos em bora-admin.css (carregado antes).
 * Tudo com prefixo bora-dash- para não colidir com classes do Perfex.
 */

.bora-dash {
  clear: both; /* o aviso do cron acima é um .col-md-12 com float */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 24px;
  color: var(--bora-text);
}

/* ---------- Cabeçalho ---------- */
.bora-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bora-dash-hello h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bora-text);
}

.bora-dash-hello p {
  margin: 2px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bora-text-muted);
}

.bora-dash-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bora-dash-periods {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bora-panel);
  border: 1px solid var(--bora-line);
  box-shadow: var(--bora-shadow-soft);
}

.bora-dash-period {
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bora-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.bora-dash-period:hover { color: var(--bora-text); }

.bora-dash-period.is-active {
  background: #eee8ff;
  color: var(--bora-violet-deep);
}

.bora-dash-period:focus-visible,
.bora-dash-cta:focus-visible,
.bora-dash-link:focus-visible,
.bora-dash-ghost:focus-visible,
.bora-dash-convs a:focus-visible {
  outline: none;
  box-shadow: var(--bora-focus);
}

.bora-dash-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--bora-cta);
  color: #fff !important;
  font-size: 0.79rem;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 10px 18px rgba(45, 13, 76, 0.18);
  transition: transform 0.2s ease;
}

.bora-dash-cta:hover { transform: translateY(-1px); }

/* ---------- Grid ---------- */
.bora-dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.bora-dash-span-4 { grid-column: span 4; }
.bora-dash-span-8 { grid-column: span 8; }

.bora-dash-kpis > * { grid-column: span 3; }

/* ---------- Card ---------- */
.bora-dash-card,
.bora-dash-kpi {
  min-width: 0;
  border: 1px solid var(--bora-line);
  border-radius: 20px;
  background: var(--bora-panel);
  box-shadow: var(--bora-shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.bora-dash-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

.bora-dash-card:hover,
.bora-dash-kpi:hover {
  transform: translateY(-1px);
  box-shadow: var(--bora-shadow);
  border-color: var(--bora-line-strong);
}

.bora-dash-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.bora-dash-card-head h3 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #3f4470;
}

.bora-dash-card-head p {
  margin: 2px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bora-text-muted);
}

.bora-dash-link {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bora-violet-deep) !important;
  text-decoration: none !important;
  border-radius: 8px;
}

.bora-dash-link i { font-size: 0.65rem; margin-left: 2px; }

.bora-dash-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: auto;
  border-radius: 12px;
  background: var(--bora-panel-soft);
  color: #6d7290 !important;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.bora-dash-ghost:hover { background: #eee8ff; color: var(--bora-violet-deep) !important; }

/* ---------- KPIs ---------- */
.bora-dash-kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  padding: 16px 18px 14px;
}

.bora-dash-kpi-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #989cb3;
}

.bora-dash-kpi-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #eee8ff;
  color: var(--bora-violet-deep);
  font-size: 0.72rem;
}

.bora-dash-kpi-value {
  margin-top: 10px;
  font-size: 1.38rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--bora-text);
}

.bora-dash-kpi-spark {
  grid-row: 2;
  grid-column: 2;
  align-self: end;
  width: 92px;
  height: 34px;
}

.bora-dash-kpi-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--bora-text-muted);
  white-space: nowrap;
}

.bora-dash-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
}

.bora-dash-delta.is-up { background: #e9fbf2; color: #2d7d5b; }
.bora-dash-delta.is-down { background: #fdecea; color: #c0453b; }

/* ---------- Gráfico de linhas ---------- */
.bora-dash-legend {
  display: flex;
  gap: 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bora-text-soft);
  white-space: nowrap;
}

.bora-dash-legend li { display: inline-flex; align-items: center; gap: 6px; }

.bora-dash-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--sw);
}

.bora-dash-chart {
  position: relative;
  height: 260px;
}

.bora-dash-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }

.bora-dash-chart .grid line { stroke: var(--bora-line); stroke-width: 1; }
.bora-dash-chart .axis text { fill: var(--bora-text-muted); font-size: 10.5px; font-weight: 600; }
.bora-dash-chart .crosshair { stroke: var(--bora-line-strong); stroke-width: 1; }
.bora-dash-chart .end-label { font-size: 11px; font-weight: 700; fill: var(--bora-text-soft); }

/* ---------- Funil ---------- */
.bora-dash-funnel,
.bora-dash-bars,
.bora-dash-temp-list,
.bora-dash-convs,
.bora-dash-rank {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* listas ocupam a altura do card (a linha acompanha o gráfico ao lado) */
.bora-dash-funnel,
.bora-dash-bars,
.bora-dash-temp-list {
  flex: 1;
  justify-content: space-around;
}

.bora-dash-funnel { display: flex; flex-direction: column; gap: 9px; }

.bora-dash-funnel li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--bora-text-soft);
}

.bora-dash-funnel b { text-align: right; color: var(--bora-text); font-weight: 700; }

.bora-dash-track {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: var(--bora-panel-soft);
}

.bora-dash-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  min-width: 4px;
  border-radius: 4px;
  background: var(--c, #6a5df0);
  transition: width 0.4s ease;
}

.bora-dash-funnel .is-won { color: #2d7d5b; }

/* ---------- Barras (fontes) ---------- */
.bora-dash-bars { display: flex; flex-direction: column; gap: 14px; }

.bora-dash-bars li { display: flex; flex-direction: column; gap: 6px; }

.bora-dash-bar-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--bora-text-soft);
}

.bora-dash-bar-top b { color: var(--bora-text); font-weight: 700; }
.bora-dash-bar-top small { color: var(--bora-text-muted); font-weight: 600; margin-left: 4px; }

.bora-dash-bars .bora-dash-track { height: 8px; }

/* ---------- Temperatura ---------- */
.bora-dash-temp-total { font-size: 0.76rem; font-weight: 600; color: var(--bora-text-soft); }
.bora-dash-temp-total strong { font-size: 1.38rem; font-weight: 800; letter-spacing: -0.04em; color: var(--bora-text); margin-right: 4px; }

.bora-dash-stack {
  display: flex;
  gap: 2px;
  height: 14px;
}

.bora-dash-stack span {
  width: var(--w);
  background: var(--c);
  border-radius: 4px;
  cursor: default;
}

.bora-dash-temp-list { display: flex; flex-direction: column; gap: 4px; }

.bora-dash-temp-list li {
  display: grid;
  grid-template-columns: 22px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bora-text-soft);
}

.bora-dash-temp-list li:hover { background: var(--bora-panel-soft); }
.bora-dash-temp-list img { width: 20px; height: 20px; object-fit: contain; }
.bora-dash-temp-name { font-weight: 700; color: #3f4470; }
.bora-dash-temp-hint { font-size: 0.68rem; color: var(--bora-text-muted); }
.bora-dash-temp-list strong { font-weight: 800; color: var(--bora-text); }

/* ---------- WhatsApp ---------- */
.bora-dash-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef9c8;
  color: #4d7a14;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.bora-dash-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
}

.bora-dash-wa-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bora-dash-wa-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bora-panel-soft);
}

.bora-dash-wa-stats span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #989cb3; white-space: nowrap; }
.bora-dash-wa-stats strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; color: var(--bora-text); }

.bora-dash-convs { display: flex; flex-direction: column; gap: 2px; }

.bora-dash-convs a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 14px;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.bora-dash-convs a:hover { background: var(--bora-panel-soft); }

.bora-dash-av {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

img.bora-dash-av { object-fit: cover; }

.bora-dash-conv-body { display: flex; flex-direction: column; min-width: 0; }

.bora-dash-conv-name,
.bora-dash-conv-preview {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bora-dash-conv-name { font-size: 0.8rem; font-weight: 700; color: #3f4470; }
.bora-dash-conv-preview { font-size: 0.72rem; font-weight: 600; color: var(--bora-text-muted); }

.bora-dash-unread {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
}

/* ---------- Tabela ---------- */
.bora-dash-table-wrap { overflow-x: auto; margin: 0 -6px; }

.bora-dash-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
}

.bora-dash-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--bora-line);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #989cb3;
  text-align: left;
}

.bora-dash-table th:first-child { width: 34%; }

.bora-dash-table td {
  padding: 10px;
  border-bottom: 1px solid var(--bora-line);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--bora-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bora-dash-table tbody tr:last-child td { border-bottom: 0; }
.bora-dash-table tbody tr:hover td { background: var(--bora-panel-soft); }
.bora-dash-table td b { color: var(--bora-text); font-weight: 700; }
.bora-dash-table .text-right { text-align: right; }

.bora-dash-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bora-dash-person > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.bora-dash-person b { font-size: 0.84rem; letter-spacing: -0.02em; color: #3f4470 !important; overflow: hidden; text-overflow: ellipsis; }
.bora-dash-person small { font-size: 0.7rem; font-weight: 600; color: var(--bora-text-muted); overflow: hidden; text-overflow: ellipsis; }

.bora-dash-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}

.bora-dash-chip.is-violet { background: #eee8ff; color: #6258c9; }
.bora-dash-chip.is-amber { background: #fff1dc; color: #b56a1a; }
.bora-dash-chip.is-blue { background: #e7f0ff; color: #3f6fd1; }
.bora-dash-chip.is-lime { background: #eef9c8; color: #4d7a14; }
.bora-dash-chip.is-grey { background: #f0eef6; color: #6f6893; }

/* ---------- Ranking ---------- */
.bora-dash-rank { display: flex; flex-direction: column; gap: 8px; }

.bora-dash-rank li {
  display: grid;
  grid-template-columns: 24px 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--bora-panel-soft);
}

.bora-dash-pos {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: #eee8ff;
  color: var(--bora-violet-deep);
  font-size: 0.7rem;
  font-weight: 800;
}

.bora-dash-pos.is-first { background: var(--bora-lime); color: #2d3a05; }

.bora-dash-rank-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.bora-dash-rank-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: #3f4470;
}

.bora-dash-rank-top b:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bora-dash-rank-top b:last-child { color: var(--bora-text); flex-shrink: 0; }
.bora-dash-rank small { font-size: 0.68rem; font-weight: 600; color: var(--bora-text-muted); }

.bora-dash-progress {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: #e6e2f3;
}

.bora-dash-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p);
  border-radius: 999px;
  background: #6a5df0;
}

/* ---------- Tooltip ---------- */
.bora-dash-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  min-width: 120px;
  padding: 8px 11px;
  border-radius: 12px;
  background: #241338;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: 0 12px 24px rgba(36, 19, 56, 0.25);
}

.bora-dash-tip b { display: block; margin-bottom: 4px; font-size: 0.68rem; font-weight: 700; color: #c9c3ff; }
.bora-dash-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bora-dash-tip-row + .bora-dash-tip-row { margin-top: 2px; }
.bora-dash-tip-row i { width: 8px; height: 8px; border-radius: 2px; background: var(--sw); }
.bora-dash-tip-row strong { margin-left: auto; padding-left: 12px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1280px) {
  .bora-dash-kpis > * { grid-column: span 6; }
  .bora-dash-span-8 { grid-column: span 12; }
  .bora-dash-span-4 { grid-column: span 6; }
  /* sem buraco à direita: o 4 que sobra sozinho na linha ocupa a linha toda */
  .bora-dash-grid > .bora-dash-span-4:last-child:nth-child(odd),
  .bora-dash-span-8 + .bora-dash-span-4 { grid-column: span 12; }
}

@media (max-width: 768px) {
  .bora-dash-kpis > *,
  .bora-dash-span-4 { grid-column: span 12; }
  .bora-dash-head-actions { width: 100%; }
  .bora-dash-periods { overflow-x: auto; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bora-dash-card,
  .bora-dash-kpi,
  .bora-dash-cta,
  .bora-dash-track i { transition: none; }
  .bora-dash-card:hover,
  .bora-dash-kpi:hover,
  .bora-dash-cta:hover { transform: none; }
}