/* Graphite Note Premium Pass 2: analytics polish + chart hardening
   Loaded after enterprise design system and interaction pass. */

:root {
  --gna-chart-h: 360px;
  --gna-chart-h-compact: 320px;
  --gna-grid: #edf2f7;
  --gna-axis: #cfd9e7;
  --gna-muted: #64748b;
  --gna-ink: #07162c;
  --gna-negative: #c93434;
  --gna-negative-bg: #fff5f5;
  --gna-positive: #087a55;
}

/* Keep analytical content dense but give the actual plot a deterministic box.
   CanvasJS renders into absolutely positioned canvases, so a measurable host is
   required; relying on the generated canvas height is fragile inside cards/tabs. */
.gn-app-shell .gn-compact-chart {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: var(--gna-chart-h) !important;
  min-height: var(--gna-chart-h) !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.gn-app-shell .gn-compact-chart > .canvasjs-chart-container,
.gn-app-shell .gn-compact-chart .canvasjs-chart-container {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}

/* Do not let a chart card clip the chart host because CanvasJS owns positioned
   descendants internally. The stage remains clipped instead. */
.gn-app-shell .gn-chart-card {
  overflow: visible !important;
}

.gn-app-shell .gn-chart-card .gn-analytics-chart-stage,
.gn-app-shell .gn-analytics-chart-stage {
  position: relative;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}

/* CanvasJS toolbar: functional, compact, visually subordinate to the data. */
.gn-app-shell .canvasjs-chart-toolbar {
  right: 8px !important;
  top: 8px !important;
  font-family: Inter, Arial, sans-serif !important;
  opacity: .72;
  transition: opacity 140ms ease;
}
.gn-app-shell .gn-compact-chart:hover .canvasjs-chart-toolbar,
.gn-app-shell .canvasjs-chart-toolbar:focus-within { opacity: 1; }
.gn-app-shell .canvasjs-chart-toolbar button,
.gn-app-shell .canvasjs-chart-toolbar div[role="button"] {
  border-radius: 4px !important;
}

/* Model-fit layout: selector is context; metrics are evidence. */
.gn-app-shell .bayesian-fit-summary {
  display: grid !important;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  margin: 8px 0 12px !important;
}
.gn-app-shell .bayesian-fit-selector {
  min-width: 0;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gna-ink) !important;
}

.gn-app-shell .bayesian-fit-validation {
  min-width: 0;
  margin: 0 !important;
}
.gn-app-shell .bayesian-fit-validation-label {
  margin-bottom: 6px !important;
  color: var(--gna-muted) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.gn-app-shell .bayesian-fit-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px !important;
  margin: 0 !important;
}
.gn-app-shell .bayesian-fit-metric {
  min-width: 0;
  min-height: 58px;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid #dce5f0 !important;
  border-radius: 5px !important;
  background: #fbfcfe !important;
  box-shadow: none !important;
}
.gn-app-shell .bayesian-fit-metric dt {
  margin: 0 0 5px !important;
  color: var(--gna-muted) !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
}
.gn-app-shell .bayesian-fit-metric dd {
  margin: 0 !important;
  color: #0d55d9 !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  font-variant-numeric: tabular-nums;
}
.gn-app-shell .bayesian-fit-metric.is-negative {
  border-color: #f0c8c8 !important;
  background: var(--gna-negative-bg) !important;
}
.gn-app-shell .bayesian-fit-metric.is-negative dd { color: var(--gna-negative) !important; }

/* Generic analytical values use tabular numerals so columns and cards scan cleanly. */
.gn-app-shell .custom_dx_tile_summary, .gn-app-shell .gn-metric-card, .gn-app-shell .gn-kpi-card, .gn-app-shell .bayesian-fit-metric{
  font-variant-numeric: tabular-nums;
}

/* KPI cards should read as one compact evidence strip, not four mini dashboards. */
.gn-app-shell .custom_dx_tile_summary {
  min-height: 68px !important;
  padding: 10px 12px !important;
  border-color: #dce5f0 !important;
  border-radius: 5px !important;
  background: #fff !important;
  box-shadow: inset 0 2px 0 #54c6e8 !important;
}
.gn-app-shell .custom_dx_tile_summary .tileValue,
.gn-app-shell .custom_dx_tile_summary h4,
.gn-app-shell .custom_dx_tile_summary h5,
.gn-app-shell .custom_dx_tile_summary strong {
  font-variant-numeric: tabular-nums;
}

/* Narrative/help panels are secondary to the chart. */
.gn-app-shell .modelScenario.wrapper q-notifications .qNotificationTip,
.gn-app-shell .gn-chart-card q-notifications .qNotificationTip {
  border-color: #dce5f0 !important;
  background: #f8fbff !important;
  color: #334155 !important;
}

/* Premium analytical grids: header is quiet, numeric scan is stable. */



/* Chart cards need less dead space than content cards. */
.gn-app-shell .gn-chart-card {
  padding: 16px 16px 12px !important;
}
.gn-app-shell .gn-chart-card__header {
  margin-bottom: 10px !important;
}
.gn-app-shell .gn-chart-card__subtitle {
  margin-top: 2px !important;
  color: var(--gna-muted) !important;
}

@media (max-height: 820px) and (min-width: 992px) {
  :root { --gna-chart-h: 320px; }
}

@media (max-width: 991.98px) {
  :root { --gna-chart-h: 320px; }
  .gn-app-shell .bayesian-fit-summary {
    grid-template-columns: 1fr !important;
    align-items: stretch;
  }
  .gn-app-shell .bayesian-fit-selector { max-width: 320px; }
}

@media (max-width: 640px) {
  :root { --gna-chart-h: 300px; }
  .gn-app-shell .bayesian-fit-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}