/* =====================================================================
   dashboard.css — Módulo 05 (Dashboard completo): métricas, gráficos,
   ranking e feed de atividades. Reaproveita os tokens de landing.css.
   ===================================================================== */

.dash-shell{
  min-height: 100vh;
  display:flex; flex-direction:column;
}

.dash-topbar{
  height: 64px; display:flex; align-items:center; justify-content:space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}

.dash-topbar-left{ display:flex; align-items:center; gap:14px; }

.dash-sidebar-toggle{
  background:none; border:1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size:16px; line-height:1; padding:6px 10px;
  cursor:pointer; transition: border-color .15s ease, color .15s ease;
}
.dash-sidebar-toggle:hover{ border-color: var(--accent); color: var(--text-primary); }

/* ---------- barra lateral (franqueado/admin) ----------
   Só existe .dash-sidebar quando há usuário logado (ver topbar.php);
   :has() liga o grid só nesse caso — páginas públicas (visitante) ficam
   no flex-column de cima, sem sidebar, sem precisar de outra classe. */
.dash-shell:has(.dash-sidebar){
  display:grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 64px auto 1fr;
  grid-template-areas: "topbar topbar" "aviso aviso" "sidebar main";
}
.dash-shell:has(.dash-sidebar) .dash-topbar{ grid-area: topbar; }
.dash-shell.sidebar-collapsed:has(.dash-sidebar){ grid-template-columns: 0 1fr; }

/* ---------- aviso "visualizando como franqueado" (CEO/CCO) ----------
   Linha "auto" no grid: some (altura zero) quando o aviso não existe,
   sem precisar de outra classe no .dash-shell. */
.dash-visualizacao-aviso{
  grid-area: aviso;
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; padding: 8px 24px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--accent-text);
}
.dash-visualizacao-aviso form{ display:inline; }
.dash-visualizacao-aviso button{
  font-family: var(--font-display); font-size: 11px; font-weight:600;
  background:none; border: 1px solid currentColor; color: inherit;
  border-radius: var(--radius-sm); padding: 3px 10px; cursor:pointer;
}
.dash-visualizacao-aviso button:hover{ background: color-mix(in srgb, var(--accent) 20%, transparent); }

.dash-sidebar{
  grid-area: sidebar;
  background: var(--surface-1); border-right: 1px solid var(--border);
  padding: 20px 14px; overflow: hidden;
  transition: padding .2s ease;
}
.dash-shell.sidebar-collapsed .dash-sidebar{ padding: 20px 0; }

.dash-sidebar-nav{ display:flex; flex-direction:column; gap:2px; white-space:nowrap; }
.dash-sidebar-nav a{
  font-family: var(--font-display); font-size: 13px; color: var(--text-secondary);
  padding: 9px 12px; border-radius: var(--radius-sm);
}
.dash-sidebar-nav a:hover{ color: var(--text-primary); background: var(--surface-2); }
.dash-sidebar-nav a.active{ color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.dash-sidebar-divider{ height:1px; background: var(--border); margin: 10px 4px; }

.dash-shell:has(.dash-sidebar) .crm-main,
.dash-shell:has(.dash-sidebar) .dash-content{ grid-area: main; min-width: 0; }

@media (max-width: 860px){
  .dash-shell:has(.dash-sidebar){ grid-template-columns: 1fr; grid-template-areas: "topbar" "aviso" "main"; }
  .dash-sidebar{
    position: fixed; top: 64px; left: 0; bottom: 0; width: 220px; z-index: 40;
    transform: translateX(0); transition: transform .2s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,.35);
  }
  .dash-shell.sidebar-collapsed .dash-sidebar{ transform: translateX(-100%); padding: 20px 14px; }
}

.dash-user{
  display:flex; align-items:center; gap:10px;
  font-size: 13px; color: var(--text-secondary);
}
.dash-user strong{ color: var(--text-primary); }
.dash-user-link{ color: var(--text-secondary); }
.dash-user-link:hover{ color: var(--accent-text); }

/* ---------- Meu Perfil ---------- */
.perfil-logo-row{ display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.perfil-logo-preview{
  width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-md);
  border: 1px solid var(--border-strong); background: var(--surface-2); flex-shrink:0;
}
.perfil-logo-row form{ flex:1; min-width: 240px; }

.perfil-link-row{ display:flex; gap:10px; flex-wrap:wrap; }
.perfil-link-row .field-input{ flex:1; min-width:240px; }

.dash-logout-form{ display:inline; }
.dash-logout-btn{
  font-family: var(--font-display); font-size: 12px; font-weight:600;
  background: var(--surface-1); color: var(--text-secondary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 8px 14px; cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.dash-logout-btn:hover{ border-color: var(--accent); color: var(--text-primary); }

.dash-content{
  flex:1; padding: 24px 28px 60px;
  max-width: 1400px; width:100%; margin: 0 auto;
}

/* ---------- cards de métrica ---------- */
.dash-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.stat-card{
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 20px;
  display:flex; flex-direction:column; gap: 8px;
}
.stat-label{
  font-family: var(--font-display); font-size: 11px; text-transform:uppercase;
  letter-spacing:.04em; color: var(--text-muted);
}
.stat-value{ font-size: 24px; font-weight:600; color: var(--text-primary); }

/* ---------- painéis (gráficos, ranking, atividades) ---------- */
.dash-charts-row{
  display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 860px){
  .dash-charts-row{ grid-template-columns: 1fr; }
}
.dash-panel{
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px;
}
.dash-panel-title{
  font-size: 15px; color: var(--text-primary); margin: 0 0 16px;
}
.dash-panel-sub{ font-size: 12px; color: var(--text-muted); font-weight:400; }
.dash-empty{ color: var(--text-muted); font-size: 13px; }

/* Chart.js precisa de um container com altura FIXA em CSS — o atributo
   HTML height="" do <canvas> sozinho não é suficiente e causa o gráfico
   crescer sem limite (bug clássico do Chart.js responsive). */
.chart-wrap{ position: relative; height: 260px; }
.chart-wrap canvas{ max-width: 100%; }

/* ---------- ranking ---------- */
.dash-ranking-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.dash-ranking-list li{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm);
}
.ranking-nome{ font-size: 13px; color: var(--text-primary); }
.ranking-valor{ font-family: var(--font-display); font-size: 12px; color: var(--accent-text); }

/* ---------- feed de atividades ---------- */
.dash-activity-feed{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.activity-item{ border-left: 2px solid var(--border-strong); padding-left: 12px; }
.activity-tipo{
  font-family: var(--font-display); font-size: 11px; color: var(--accent-text);
  display:block; margin-bottom: 2px;
}
.activity-desc{ font-size: 13px; color: var(--text-primary); display:block; }
.activity-meta{ font-size: 11px; color: var(--text-muted); }