/* ---------- Full-screen chart viewer (js/chart-fullscreen.js) ---------- */

/* Wraps a chart's own output (the .chart-html-wrap / .cal-grid / radar svg
   a section already builds) — nothing else in the panel, so clicking the
   currency select or calendar nav buttons never opens this. */
.chart-fs-target {
  position: relative;
  cursor: pointer;
}

.chart-fs-expand-icon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  pointer-events: none;
}

.chart-fs-target:hover .chart-fs-expand-icon {
  color: var(--text);
  border-color: var(--chart-label);
}

.chart-fs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  padding: var(--space-5);
  z-index: 1000;
}

.chart-fs-overlay.is-open {
  display: flex;
}

.chart-fs-panel {
  margin: auto;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}

.chart-fs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex: none;
}

.chart-fs-title {
  font-size: 1rem;
}

.chart-fs-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  flex: none;
}

.chart-fs-close:hover {
  color: var(--text);
  border-color: var(--chart-label);
}

.chart-fs-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* SVG-based charts (line/bar/categorical/grouped) get an explicit inline
   height from js/chart-fullscreen.js's rebuild call, matching this body's
   own measured height exactly (see charts.js's chartHtmlWrap heightPx) —
   the fixed per-type heights from charts.css (200/260/300px, etc.) only
   apply to the small dashboard-card rendering, and are overridden inline
   once open. The calendar grid has no such inline size, so it gets an
   explicit fill rule instead; the radar sizes its own square wrapper
   directly (see edgeScoreSection's rebuild in dashboard.js). */
.chart-fs-body .cal-grid {
  flex: 1;
}

/* Wide-chart scroll mode (js/chart-fullscreen.js's buildScrollable) — a
   chart with more categories/points than fit at a readable minimum width
   renders wider than the body and scrolls horizontally inside here, with
   the y-axis tick labels pinned in their own gutter on top. */
.chart-fs-scrollwrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.chart-fs-scrollarea {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* Reserves room for .chart-fs-axis-pin so the first bar/point clears the
     pinned gutter instead of starting underneath it — see PIN_WIDTH in
     chart-fullscreen.js, which this must match. */
  padding-left: 80px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

.chart-fs-axis-pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  background: var(--surface);
  z-index: 2;
  pointer-events: none;
}

.chart-fs-edge-fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.chart-fs-scrollwrap.is-scrollable .chart-fs-edge-fade {
  opacity: 1;
}

@media (max-width: 599px) {
  .chart-fs-overlay {
    padding: var(--space-2);
  }

  .chart-fs-panel {
    padding: var(--space-3);
  }
}