.analytics-builder-button {
  border: 0; border-radius: 9px; padding: 10px 14px; cursor: pointer;
  color: #fff; background: linear-gradient(135deg,var(--sc-navy-900,#0d1c2b),var(--sc-teal,#19b978));
  font-size: 13px; font-weight: 800; box-shadow: 0 2px 8px rgba(8,145,178,.22);
}
.analytics-builder-button-secondary { color:#334155; background:#e2e8f0; box-shadow:none; }
.analytics-builder-overlay { position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(2,6,23,.62); }
.analytics-builder-modal { width:min(560px,100%); max-height:min(720px,90vh); overflow:hidden; display:flex; flex-direction:column; background:#fff; color:#0f172a; border-radius:16px; box-shadow:0 24px 80px rgba(2,6,23,.38); }
.analytics-builder-header,.analytics-builder-footer { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #e2e8f0; }
.analytics-builder-footer { border-top:1px solid #e2e8f0; border-bottom:0; justify-content:flex-end; }
.analytics-builder-list { padding:10px 14px; overflow:auto; }
.analytics-builder-item { display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:12px 8px; border:1px solid #e2e8f0; border-radius:10px; margin:7px 0; background:#f8fafc; }
.analytics-builder-item.is-hidden { opacity:.55; }
.analytics-builder-grip { color:#64748b; font-size:18px; cursor:grab; text-align:center; }
.analytics-builder-label { font-weight:800; font-size:14px; }
.analytics-builder-description { color:#64748b; font-size:12px; margin-top:3px; }
.analytics-builder-size { border:1px solid #cbd5e1; border-radius:7px; padding:6px; background:#fff; color:#334155; }
.analytics-builder-close { border:0; background:transparent; color:#64748b; font-size:24px; cursor:pointer; }
.analytics-widget-half { grid-column:span 1; }
@media (max-width:700px) { .analytics-builder-item { grid-template-columns:26px 1fr; } .analytics-builder-size { grid-column:2; width:100%; } }
@media print { .analytics-builder-button { display:none !important; } }

/* Compact analytics canvas. The legacy inline styles were designed for a
   narrow stacked view; these overrides keep the existing chart hooks intact
   while using the available desktop width efficiently. */
#analyticsVisualAnalytics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin-bottom: 14px !important;
}
#analyticsVisualAnalytics > div:first-child {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(86px, auto) !important;
  gap: 10px !important;
  flex-direction: row !important;
}
#analyticsVisualAnalytics > div:first-child > div {
  min-height: 86px;
  padding: 12px !important;
}
#analyticsVisualAnalytics > div:nth-child(2),
#analyticsVisualAnalytics > div:nth-child(3) {
  grid-column: span 2;
  min-width: 0;
  min-height: 250px;
}
#analyticsVisualAnalytics > div {
  grid-column: span 2;
  min-width: 0;
  min-height: 250px;
}
#analyticsVisualAnalytics canvas {
  max-width: 190px !important;
  max-height: 190px !important;
}
@media (max-width: 860px) {
  #analyticsVisualAnalytics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #analyticsVisualAnalytics > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #analyticsVisualAnalytics > div:nth-child(2),
  #analyticsVisualAnalytics > div:nth-child(3) { grid-column: 1 / -1; }
  #analyticsVisualAnalytics > div { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  #analyticsVisualAnalytics { grid-template-columns: 1fr !important; }
  #analyticsVisualAnalytics > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #analyticsVisualAnalytics > div:first-child > div { min-height: 78px; }
  #analyticsVisualAnalytics > div:nth-child(2),
  #analyticsVisualAnalytics > div:nth-child(3) { min-height: 220px; }
}

/* Executive view: put the signals and compact summaries in the first
   viewport, then pair rep performance with the headline KPI tiles. */
.analytics-priority-row { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.analytics-priority-row #visitVerificationAnalytics,
.analytics-priority-row #conquestAnalyticsPanel { margin-bottom:0 !important; }
.analytics-priority-row #visitVerificationAnalytics { padding:10px 14px !important; }
.analytics-priority-row #conquestAnalyticsPanel { padding:8px 14px !important; }
.analytics-priority-row #analyticsSalesDashRow { width:100%; margin-bottom:0 !important; }
.analytics-priority-row .sp-panel,
.analytics-priority-row .dp-panel { padding:10px 12px !important; gap:7px !important; min-height:190px; }
.analytics-priority-row .sp-stats,
.analytics-priority-row .dp-kpis { gap:5px !important; }
.analytics-priority-row .sp-stat { padding:6px 3px !important; }
.analytics-priority-row .sp-stat-num { font-size:20px !important; }
.analytics-priority-row .dp-kpi { padding:6px 3px !important; }
.analytics-priority-row .dp-table-wrap { max-height:112px; }
.analytics-management-row { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:10px; align-items:stretch; margin-bottom:12px; }
.analytics-management-row #analyticsRepSection { margin-bottom:0 !important; min-width:0; }
.analytics-executive-kpis { min-width:0; }
.analytics-executive-kpis > div { height:100%; }
.analytics-executive-kpis > div:first-child { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-template-rows:repeat(2,minmax(72px,1fr)) !important; gap:8px !important; }
.analytics-executive-kpis > div:first-child > div { min-height:0; padding:10px !important; }
.analytics-executive-kpis > div:first-child > div > div:last-child { font-size:22px !important; }
@media (max-width:860px) { .analytics-management-row { grid-template-columns:1fr; } }