/* Copyright (C) 2023 Raymond Sun - All Rights Reserved
 * You may not use, distribute and modify this code without the author's written permission.
 */

/**
 * Insights Dashboard Styles
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

#insights-dashboard {
  --insights-bg-primary: #f8fafc;
  --insights-bg-card: #ffffff;
  --insights-bg-hover: #f1f5f9;
  --insights-border: #e2e8f0;
  --insights-text-primary: #1e293b;
  --insights-text-muted: #64748b;
  --insights-text-dim: #94a3b8;
  --insights-control-bg: #ffffff;
  --insights-control-border: #cbd5e1;
  --insights-shadow: rgba(0, 0, 0, 0.1);
  --insights-accent: #3b82f6;
}

/* ============================================
   MAIN CONTAINER
   ============================================ */

#insights-box-content {
  display: none;
  min-height: 80vh;
  padding: 24px;
  border-radius: 8px;
}

#insights-dashboard {
  max-width: 1600px;
  margin: 0 auto;
  background: var(--insights-bg-primary);
  border-radius: 8px;
  padding: 24px;
}

/* ============================================
   HEADER
   ============================================ */

.insights-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--insights-border);
}

.insights-title {
  color: var(--insights-text-primary);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}

.insights-subtitle {
  color: var(--insights-text-muted);
  font-size: 14px;
  margin: 0 0 16px 0;
  text-align: left;
  line-height: 1.6;
}

.insights-subtitle b {
  color: var(--insights-text-primary);
}

.insights-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--insights-bg-card);
  border: 1px solid var(--insights-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--insights-text-muted);
  margin-top: 12px;
}

.insights-tip-icon {
  font-size: 14px;
}

/* ============================================
   CHART SECTION STYLING
   ============================================ */

#insights-dashboard #chart-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin: 0;
}

#insights-dashboard #chart-section > div {
  background: #ffffff;
  border: 1px solid var(--insights-border);
  border-radius: 8px;
  padding-top: 10px;
  min-height: 450px;
  margin-bottom: 40px;
}

#insights-dashboard #chart-section > div:hover {
  box-shadow: 0 4px 12px var(--insights-shadow);
}

#insights-dashboard #chart-section > hr {
  display: none;
}

/* ============================================
   CATEGORY SECTIONS
   ============================================ */

.insights-category {
  margin-bottom: 32px;
}

.insights-category-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--insights-text-primary);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--insights-accent);
}

.insights-category-icon {
  font-size: 18px;
}

/* ============================================
   GRID LAYOUT FOR CHARTS
   ============================================ */

.insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1200px) {
  .insights-grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   LOADING STATE
   ============================================ */

.insights-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  color: var(--insights-text-muted);
  font-size: 14px;
}

.insights-loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--insights-border);
  border-top-color: var(--insights-accent);
  border-radius: 50%;
  animation: insights-spin 1s linear infinite;
  margin-right: 12px;
}

@keyframes insights-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  #insights-dashboard {
    padding: 16px;
  }

  .insights-title {
    font-size: 18px;
    letter-spacing: 1px;
  }

  .insights-subtitle {
    font-size: 12px;
  }

  #chart-section > div {
    padding: 12px;
  }

  .insights-category-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .insights-tip {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Smooth fade-in for charts */
#chart-section > div {
  animation: fadeInChart 0.3s ease-out;
}

@keyframes fadeInChart {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation for chart items */
#chart-section > div:nth-child(1) { animation-delay: 0.05s; }
#chart-section > div:nth-child(2) { animation-delay: 0.1s; }
#chart-section > div:nth-child(3) { animation-delay: 0.15s; }
#chart-section > div:nth-child(4) { animation-delay: 0.2s; }
#chart-section > div:nth-child(5) { animation-delay: 0.25s; }
#chart-section > div:nth-child(6) { animation-delay: 0.3s; }
#chart-section > div:nth-child(7) { animation-delay: 0.35s; }
#chart-section > div:nth-child(8) { animation-delay: 0.4s; }
#chart-section > div:nth-child(9) { animation-delay: 0.45s; }
#chart-section > div:nth-child(10) { animation-delay: 0.5s; }

/* ============================================
   CITATION FOOTER
   ============================================ */

.insights-citation {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--insights-bg-card);
  border: 1px solid var(--insights-border);
  border-radius: 6px;
  margin-top: 24px;
  font-size: 12px;
  color: var(--insights-text-muted);
  font-style: italic;
}

.insights-citation-icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* ============================================
   PLOTLY CHART STYLING
   ============================================ */

#insights-dashboard .js-plotly-plot,
#insights-dashboard #chart-section .js-plotly-plot,
#insights-dashboard #chart-section .plotly {
  width: 100% !important;
}

.js-plotly-plot{
  min-height: 500px !important;
}