homeschool/public/analytics.css

/* Analytics Dashboard Styles */

/* Main grid layout for analytics dashboard */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
  width: 100%;
}

/* Stat cards styling */
.stat-card {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.stat-card h5 {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0;
  color: var(--text-primary);
}

.stat-change {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-change.positive {
  color: var(--success);
}

.stat-change.negative {
  color: var(--error);
}

/* Chart containers */
.chart-container {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chart-container h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1.1rem;
}

.chart {
  width: 100%;
  height: 250px;
  position: relative;
}

/* Problem words list */
#problemWordsContainer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 220px;
  overflow-y: auto;
}

.problem-word-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  background: var(--bg-primary);
  border-left: 4px solid var(--primary);
}

.problem-word {
  font-weight: 600;
}

.problem-count {
  background: var(--bg-accent);
  color: var(--text-primary);
  font-weight: 600;
  border-radius: 99px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
}

/* Activity feed */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 220px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--bg-primary);
  border-left: 4px solid var(--accent);
}

.activity-user {
  font-weight: 600;
}

.activity-time {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* Data table */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th, .data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
}

.data-table th {
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.data-table tr:nth-child(even) {
  background: var(--bg-primary);
}

.data-table tr:hover {
  background: var(--bg-hover);
}

#studentBreakdownContainer {
  height: 220px;
  overflow-y: auto;
}

/* Mini sparkline charts */
.sparkline {
  display: inline-block;
  height: 24px;
  width: 80px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chart-container {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-container {
    grid-column: 1;
  }
}

/* Activity heatmap */
.heatmap {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.heatmap-day {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transition: all 0.2s ease;
}

.heatmap-day:hover {
  transform: scale(1.2);
}

/* Tooltip styles */
.chart-tooltip {
  position: absolute;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
  box-shadow: var(--shadow);
}