/*
  Copied from the marketing site's css/charting-engine.css.

  The original opens with a page-scaffolding `body` rule left over from when the
  chart was built as a standalone page:

      body { background:#121212; color:#fff; font-family: Arial, sans-serif;
             display:flex; justify-content:center; align-items:center; height:100% }

  It is removed here. This file loads after analytics.css, so that rule would
  override the realm's Work Sans + page background, and turning <body> into a
  centred flex container would collapse the widget grid. Nothing in the chart
  depends on it — every chart rule below is class-scoped.

  The tooltip rules that used to live here are gone too: graphing-engine.css
  carries the app's versions, and these older copies were overriding them —
  including an #chartjs-tooltip ID rule that outranked every class.
*/

/*
  Demo change: the original .chart-tile paints its own card (95% width, #111214
  background, its own border + shadow). Inside the realm's widget grid that read
  as a second, darker box floating in the widget. It is now transparent and
  full-width, so .widget-performance-history supplies the single widget surface.
  Original values kept in the comment above each changed line.
*/
.chart-tile {
  width: 100%;            /* was 95% */
  background-color: transparent;  /* was #111214 */
  border-radius: 9px;     /* was 10px — matches the widget radius */
  box-shadow: none;       /* was 0px 4px 10px rgba(0,0,0,.1) */
  display: flex;
  flex-direction: column;
  /* was center — that shrink-wrapped the header controls, so the title/filter,
     date range and period buttons bunched up in the middle instead of spreading
     across the card. .chart-body sets its own width:100%, so it is unaffected. */
  align-items: stretch;
  position: relative;
  overflow: visible;
  border: 0;              /* was #454756 1px solid */
  box-sizing: border-box;

  /* fill the widget, so .chart-body below can claim whatever the header leaves */
  flex: 1 1 auto;
  min-height: 0;
}

/*
  Canvas wrapper. Was a fixed 330px, which overflowed the widget as soon as the
  header controls wrapped to two rows on a narrow screen — and since
  .widget-performance-history is overflow:hidden at a pinned 400px, the x-axis
  labels were simply cut off. It now takes the space the header leaves, and
  Chart.js (responsive, maintainAspectRatio:false) resizes the canvas to match.
*/
.chart-body {
  width: 100%;
  flex: 1 1 auto;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-controls {
  margin-bottom: 5px;
}

.widget-performance-history3 {
  position: absolute;
  width: 100%;
  top: 667px;
  right: 0;
  border-radius: var(--br-4xs);
  background-color: var(--color-gray-200);
  border: 1px solid var(--color-darkslategray-100);
  box-sizing: border-box;
  height: 400px;
  text-align: center;
  font-size: var(--font-size-3xs);
}

/* Responsive stacking */

@media (max-width: 800px) {
  .chart-tile {
    width: 100%;  /* was 90% — see .chart-tile note above */
  }
}

/*
  The 720px block that used to sit here stacked the header controls, but it only
  targeted the pre-app markup (.chart-header-controls, .performance-filter-picklist,
  .widget-title-performance-histo2). graphing-engine.css now owns that header and
  wraps it with flex-wrap, so the override is gone rather than rewritten.
*/