/* Dashboard-specific type scale tweaks (scoped to dashboard content only) */
.dashboard-content {
  font-size: 1.0625rem; /* ~17px base */
  line-height: 1.6;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}
.dashboard-content p { line-height: 1.65; }

/* Slightly larger utility classes within dashboard content (do not touch header/footer) */
.dashboard-content .text-xs { font-size: 0.84rem !important; line-height: 1.5; letter-spacing: 0.003em; }
.dashboard-content .text-sm { font-size: 0.98rem !important; line-height: 1.55; }
.dashboard-content .text-base { font-size: 1.0625rem !important; }
.dashboard-content .text-lg { font-size: 1.18rem !important; }
.dashboard-content .text-xl { font-size: 1.35rem !important; }
.dashboard-content .text-2xl { font-size: 1.6rem !important; }
.dashboard-content .text-3xl { font-size: 2.0rem !important; }

/* Readability improvements for small, muted text */
.dashboard-content .text-gray-600, 
.dashboard-content .text-gray-500 { color: #4b5563 !important; } /* gray-600 */
.dashboard-content .font-semibold { font-weight: 600; }

/* Tighter underline on dashboard links */
.dashboard-content .ink-link {
  text-underline-offset: 3px;
}

/* Sidebar icons */
.sidebar-icon { color: #444; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; transition: background-color .15s ease, color .15s ease; }
.sidebar-icon:hover { background-color: #f3f4f6; color: #111; }

/* Subtle elevated card for section boxes */
.card-elevated {
  /* soft ring + stronger base shadow */
  box-shadow:
    0 0 0 1px rgba(16, 24, 40, 0.05),
    0 2px 4px rgba(16, 24, 40, 0.06),
    0 8px 20px rgba(16, 24, 40, 0.08);
  border-color: #d1d5db !important; /* slightly darker than gray-200 */
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.card-elevated:hover {
  box-shadow:
    0 0 0 1px rgba(16, 24, 40, 0.06),
    0 4px 10px rgba(16, 24, 40, 0.10),
    0 14px 28px rgba(16, 24, 40, 0.12);
}

/* Subtle accent card (used for Add Metric) */
.card-accent {
  background: #fbfcff !important; /* faint blue tint */
  border-color: #e7ecff !important;
}

/* Metric display styling */
.dashboard-content .stat-number,
.dashboard-content .metric-number {
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* Fonts for dashboard only */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
/* Conversational Flow Funnel */
.dashboard-content .funnel-wrap { width: 100%; }
.dashboard-content .funnel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dashboard-content .funnel-seg { position: relative; height: 44px; max-width: 920px; background: linear-gradient(90deg, #c7d2fe 0%, #93c5fd 100%); border: 1px solid #d1d5db; box-shadow: 0 1px 0 rgba(17,24,39,0.05);
  --slant: 18px; clip-path: polygon(var(--slant) 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%);
}
.dashboard-content .funnel-seg__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #111827; text-align: center; padding: 0 44px; }
.dashboard-content .funnel-chip { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); font-size: 11px; padding: 2px 8px; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff; }

.dashboard-content .journey-funnel-host { height: auto; min-height: 0; aspect-ratio: 1000 / 220; }

/* Subtle rainbow edge for AI-enhanced buttons */
.dashboard-content .ai-edge {
  position: relative;
  display: inline-flex;
  padding: 4px; /* ring thickness (4px) */
  border-radius: 0.625rem; /* a touch rounder for the thicker ring */
  background: linear-gradient(135deg,
    rgba(167,139,250,0.55), /* violet-400 */
    rgba(96,165,250,0.52),  /* blue-400 */
    rgba(52,211,153,0.50),  /* emerald-400 */
    rgba(245,158,11,0.58),  /* amber-500 */
    rgba(244,114,182,0.54)  /* pink-400 */
  );
  background-size: 300% 300%;
  animation: aiEdgeIdle 14s linear infinite;
  box-shadow: 0 1px 1px rgba(17,24,39,0.04);
}
.dashboard-content .ai-edge:hover { filter: saturate(1.06); }
.dashboard-content .ai-edge:focus-within {
  box-shadow: 0 0 0 2px rgba(251,191,36,0.35), 0 1px 1px rgba(17,24,39,0.04);
}
.dashboard-content .ai-edge > .ai-btn {
  border-radius: 0.5rem; /* keep same rounding relative to outer */
  display: inline-flex;
  border: 0; /* let the gradient edge be visible */
}
@keyframes aiEdgeIdle {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* --- Mobile layout adjustments (dashboard only) --- */
@media (max-width: 767px) {
  /* Remove global body left padding from site styles on dashboard */
  body { padding-left: 0; padding-right: 6px; }
  /* Align header '=' with sidebar '=' */
  .dashboard-text { margin-top: 0 !important; }
  /* Tighter right gutter */
  .dashboard-shell { padding-right: 6px !important; }
  .dashboard-text { padding-right: 6px !important; }
  aside.fixed { padding-top: 0.9rem !important; }
  .sidebar-logo { transform: translateY(0) !important; }
  /* Bigger funnel + tighter card padding */
  /* Match padding with other cards (p-4 ~ 16px) */
  #conversationFlowCard { padding: 16px !important; }
  #conversationFlowCard p.text-sm { margin-bottom: 8px !important; }
  /* Match SVG aspect ratio to current mobile viewHeight (260) and bleed to card edges */
  .dashboard-content .journey-funnel-host { height: auto; min-height: 0; aspect-ratio: 1000 / 260; }
  /* Bleed the funnel to the card edges on mobile to maximize width */
  /* Increase mobile side padding by 2px on each side (total +4px) */
  #conversationFlowCard .journey-funnel-host { width: calc(100% + 26px); margin-left: -13px; margin-right: -13px; }
  /* Reduce vertical spacing around the funnel */
  #conversationFlowCard > .flex { margin-bottom: 2px !important; }
  #conversationFlowCard > p { margin-bottom: 6px !important; }
  #journeyFunnel { margin-top: 20px !important; margin-bottom: 20px !important; }
  #journeyFunnelInsight { margin-top: 8px !important; }
}