/* Dashboard — camada incremental de clareza (sem sobrescrever o tema existente) */

.dash-clarity-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

.dash-clarity-hero{
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.18);
}

.dash-clarity-question{
  font-weight:800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color:#e5e7eb;
}

.dash-clarity-answer{
  margin-top:10px;
  font-size: 1.35rem;
  font-weight:900;
}

.dash-clarity-answer.positive{ color: #22c55e; }
.dash-clarity-answer.negative{ color: #ef4444; }
.dash-clarity-answer.neutral{ color: #eab308; }

.dash-clarity-breakdown{
  margin-top:10px;
  display:none;
  flex-direction:column;
  gap:8px;
}

body.dash-clarity-show-breakdown .dash-clarity-breakdown{
  display:flex;
}

.dash-clarity-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size: 0.95rem;
  color:#cbd5e1;
}

.dash-clarity-line strong{
  color:#e5e7eb;
}

.dash-clarity-messages{
  padding:14px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.22);
  background: rgba(2,6,23,0.12);
}

.dash-clarity-messages-title{
  font-weight:800;
  color:#e5e7eb;
  margin-bottom:10px;
}

.dash-clarity-msg-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.dash-clarity-msg{
  border:1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.35);
  border-radius:12px;
  padding:10px 12px;
}

.dash-clarity-msg--critical{
  border-color: rgba(239,68,68,0.38);
  background: rgba(239,68,68,0.08);
}

.dash-clarity-msg--warn{
  border-color: rgba(234,179,8,0.42);
  background: rgba(234,179,8,0.08);
}

.dash-clarity-msg--info{
  border-color: rgba(34,197,94,0.32);
  background: rgba(34,197,94,0.06);
}

.dash-clarity-msg-title{
  font-weight:800;
  color:#e5e7eb;
  display:flex;
  gap:8px;
  align-items:center;
}

.dash-clarity-msg-body{
  margin-top:6px;
  color:#cbd5e1;
  font-size: 0.95rem;
}

.dash-clarity-msg-actions{
  margin-top:8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.dash-clarity-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.35);
  color:#e5e7eb;
  text-decoration:none;
  font-weight:700;
  font-size: 0.9rem;
}

.dash-clarity-link:hover{ filter: brightness(1.06); }

/* ============================================================
   Dashboard — Pergunta rápida (compacta)
   ============================================================ */

.dash-ai-panel--quick .dash-ai-form{
  gap: 8px;
}

.dash-ai-panel--quick .dash-ai-input{
  padding: 10px 12px;
  font-size: 0.95rem;
}

.dash-ai-panel--quick .dash-ai-btn{
  padding: 10px 12px;
  min-width: 56px;
}

.dash-ai-panel--quick .dash-ai-chips{
  gap: 8px;
}

.dash-ai-panel--quick .dash-ai-chip{
  padding: 6px 10px;
  font-size: 0.85rem;
}

.dash-ai-panel--quick .dash-ai-answer{
  max-height: 132px;
  overflow: auto;
}

/* Skeleton simples (premium) */
.dash-skeleton{
  position: relative;
  overflow:hidden;
  color: transparent !important;
}
.dash-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(148,163,184,0.10), rgba(148,163,184,0.22), rgba(148,163,184,0.10));
  transform: translateX(-60%);
  animation: dashShimmer 1.15s infinite;
}
@keyframes dashShimmer{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}

.dash-ai-quick-metrics{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.dash-ai-quick-metric{
  border:1px solid rgba(56,189,248,0.35);
  background: rgba(15,23,42,0.6);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  user-select:none;
  min-height: 70px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(56,189,248,0.18), 0 8px 18px rgba(15,23,42,0.45);
}

.dash-ai-quick-metric:hover{ filter: brightness(1.06); }

.dash-ai-quick-metric:focus-visible{
  outline: 2px solid rgba(56,189,248,0.7);
  outline-offset: 2px;
}

.dash-ai-quick-metric .label{
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color:#cbd5e1;
  text-transform: uppercase;
}

.dash-ai-quick-metric .value{
  margin-top: 4px;
  font-weight: 900;
  font-size: 1.0rem;
  color:#e5e7eb;
}

.dash-ai-quick-metric .sub{
  margin-top: 2px;
  font-size: 0.78rem;
  color:#94a3b8;
}

.dash-ai-quick-metric--critical{
  border-color: rgba(239,68,68,0.42);
  background: rgba(239,68,68,0.08);
}

.dash-ai-quick-metric--warn{
  border-color: rgba(234,179,8,0.42);
  background: rgba(234,179,8,0.08);
}

/* Ações da Pergunta rápida */
.dash-ai-actions{
  display:flex;
  gap: 10px;
  margin-top: 8px;
}

.dash-ai-action{
  appearance:none;
  border:1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.35);
  color:#e5e7eb;
  font-weight: 900;
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
  flex:1;
}

.dash-ai-action:hover{ filter: brightness(1.06); }

.dash-ai-action--primary{
  border-color: rgba(59,130,246,0.35);
  background: rgba(59,130,246,0.16);
}

/* KPIs recolhíveis (para empurrar os detalhes para os atalhos) */
body.dash-kpis-collapsed #kpis .kpi-grid{ display:none; }

.dash-kpis-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.35);
  color:#e5e7eb;
  font-weight: 800;
  font-size: 0.85rem;
}

.dash-kpis-toggle:hover{ filter: brightness(1.06); }

/* ============================================================
   Gráficos premium: toggle (mobile)
   ============================================================ */

.dash-chart-toggle{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.dash-chart-toggle .dash-chart-tab{
  appearance:none;
  border:1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.35);
  color:#e5e7eb;
  font-weight: 900;
  border-radius: 999px;
  padding: 7px 10px;
  cursor:pointer;
  font-size: 0.82rem;
}

.dash-chart-toggle .dash-chart-tab[aria-pressed="true"]{
  border-color: rgba(59,130,246,0.35);
  background: rgba(59,130,246,0.16);
}

.dash-chart-toggle .dash-chart-tab:hover{ filter: brightness(1.06); }

@media (max-width: 820px){
  #charts .dash-charts-grid--triple .dash-chart-card{ display:none; }
  #charts[data-chart-view="fluxo"] [data-chart="fluxo"]{ display:block; }
  #charts[data-chart-view="mensal"] [data-chart="mensal"]{ display:block; }
  #charts[data-chart-view="categorias"] [data-chart="categorias"]{ display:block; }
  #charts[data-chart-view="recebiveis"] [data-chart="recebiveis"]{ display:block; }
}

/* ============================================================
   Dashboard — KPIs (mais compactos e com alertas)
   ============================================================ */

#kpis .kpi-grid{
  gap: 12px;
}

#kpis .kpi-card{
  padding: 14px 14px;
}

#kpis .kpi-label{
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

#kpis .kpi-value{
  font-size: 1.2rem;
  margin-top: 6px;
}

#kpis .kpi-sub{
  font-size: 0.86rem;
  opacity: 0.92;
}

#kpis .kpi-card.kpi-card--warn{
  border: 1px solid rgba(234,179,8,0.38);
  background: rgba(234,179,8,0.07);
}

#kpis .kpi-card.kpi-card--critical{
  border: 1px solid rgba(239,68,68,0.42);
  background: rgba(239,68,68,0.08);
}

@media (max-width: 520px){
  #kpis .kpi-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
