/* ==========================================================================
   Analytics Page Styles
   Loaded ONLY by analytics.html — do not reference these classes elsewhere.
   Chart canvases (#lineCanvas, #barCanvas, #pieCanvas) are drawn by
   analytics.js using the raw Canvas 2D API (no Chart.js). Re-drawn on
   window resize via a debounced listener.
   ========================================================================== */

/* Header + Controls */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.title h1 {
  font-size: 30px;
  font-weight: 750;
  letter-spacing: 0.2px;
}

.subtitle {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

/* Date-range selector + refresh button row */
.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.controls select {
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

/* ==========================================================================
   Stats Cards
   5-column stat card row matching the dashboard layout.
   At ≤1100px collapses to 2 columns; at ≤480px becomes a horizontal snap row.
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
  margin-top: 12px;
}

.stat-card {
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
}

.stat-card h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.86);
}

.stat-card h3 {
  font-size: 22px;
  font-weight: 850;
}

/* Colored variants match the status colors in base.css and components.css chips */
.stat-card.teal {
  background: linear-gradient(180deg, rgba(45, 189, 177, 0.55), rgba(45, 189, 177, 0.38));
}

.stat-card.green {
  background: linear-gradient(180deg, rgba(107, 196, 123, 0.55), rgba(107, 196, 123, 0.38));
}

.stat-card.red {
  background: linear-gradient(180deg, rgba(200, 95, 82, 0.55), rgba(200, 95, 82, 0.38));
}

.stat-card.blue {
  background: linear-gradient(180deg, rgba(60, 123, 216, 0.55), rgba(60, 123, 216, 0.38));
}

/* ==========================================================================
   Charts
   Two-column grid of chart cards. .chart-wide spans both columns (line chart).
   Each .chart-card contains a <canvas> drawn by analytics.js.
   DEPENDENCY: analytics.js targets canvases by ID (#lineCanvas, #barCanvas,
   #pieCanvas). Do not rename those IDs without updating the JS.
   ========================================================================== */

.charts {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Full-width chart (line chart spanning both columns) */
.chart-wide {
  grid-column: 1 / -1;
}

.chart-card {
  overflow: hidden;
}

/* Chart card header: title + range controls */
.chart-top {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chart-top h3 {
  font-size: 16px;
  font-weight: 850;
}

.chart-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-top .meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}

/* Segmented control for Week / Month / Year range selection on the line chart */
.range-btns {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 3px;
}

.range-btn {
  padding: 4px 11px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}

.range-btn:hover {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
}

/* Active range button — teal highlight */
.range-btn.active {
  background: rgba(45, 189, 177, 0.22);
  color: rgba(45, 189, 177, 1);
}

.chart-body {
  padding: 14px 16px 16px;
}

/* Canvas shared style — gradient background with subtle border.
   height: 260px is the default; overridden to 240px at ≤780px and 200px at ≤480px. */
canvas {
  width: 100%;
  height: 260px;
  border-radius: 14px;
  background: radial-gradient(900px 260px at 10% 110%, rgba(74, 118, 255, 0.18), transparent 60%),
    radial-gradient(700px 220px at 90% 0%, rgba(45, 189, 177, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Empty state shown when there is no data to render for a chart */
.empty {
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.45;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet: 2-col stat cards + single-column chart layout */
@media (max-width: 1100px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .charts {
    grid-template-columns: 1fr;
  }
}

/* Small tablet: stack page header; shorter canvas */
@media (max-width: 780px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  canvas {
    height: 240px;
  }
}

/* ==========================================================================
   Mobile (≤480px)
   ========================================================================== */

@media (max-width: 480px) {
  /* Stat cards: horizontal snap-scroll row (same pattern as dashboard) */
  .stats {
    grid-template-columns: repeat(5, 144px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .stats::-webkit-scrollbar {
    display: none;
  }

  .stat-card {
    scroll-snap-align: start;
  }

  /* Shorter canvas on mobile — leaves room for scrolling content */
  canvas {
    height: 200px;
  }

  /* Controls: left-align on mobile (no space to justify to right) */
  .controls {
    justify-content: flex-start;
  }

  /* Prevent iOS auto-zoom on selects */
  .controls select {
    font-size: 16px;
  }
}