/*
  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.
*/

.date-range {
  position: absolute;
  top: calc(50% - 8px);
  left: 17.22px;
  font-weight: 500;
}

.date-range-control {
  position: relative;
  width: 136.4px;
  height: 16px;
  font-size: 12px;
}

/* NEW: Flex-based header controls */
/* The layout lives in graphing-engine.css (space-between, gap 4px). This file
   used to re-declare it as space-evenly with a 36px gap, which loads later and
   won — insetting the title from the card edge. Only the bits that rule does
   not cover are kept. */
.chart-header-controls {
  width: 100%;
  position: relative;
  z-index: 2;
}

/* Title */
.widget-title-performance-histo2 {
  position: relative;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  margin: 0;
}

/* Dropdown */
.performance-filter-picklist {
  position: relative;
  border-radius: 5px;
  background-color: #1c1c24;
  border: 1px solid #454756;
  box-sizing: border-box;
  width: 160px;
  height: 32px;
  font-family: var(--font-work-sans);
  font-size: 14px;
  color: var(--color-white);
  padding-left: 8px;
  appearance: none;
  outline: none;
  box-shadow: none;
}

.performance-filter-picklist:focus {
  outline: none;
  box-shadow: none;
}

/* Time period buttons */
.time-period-control {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
}

.time-period-control button {
  cursor: pointer;
  border: none;
  padding: 5px 10px;
  background: transparent;
  color: var(--color-gray-700);
  font-size: 12px;
  font-family: var(--font-work-sans);
  transition: color 0.2s, background 0.2s;
  text-align: center;
}

/* Button order */
.w {
  order: 1;
}

.w1 {
  order: 2;
}

.m {
  order: 3;
}

.m3 {
  order: 4;
}

.m1 {
  order: 5;
}

.y1 {
  order: 6;
}

.y5 {
  order: 7;
}

.lt {
  order: 8;
}

.y {
  order: 7;
}

.lifetime {
  order: 8;
}

.time-period-control button.selected {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 5px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  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;
}

/* Fixed-height canvas wrapper */
.chart-body {
  width: 100%;
  flex: 1 1 auto;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* Tooltip base */
.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);
}

.icon-chevron34 {
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
  position: absolute;
  height: calc(100% - 9.2px);
  top: 4.93px;
  right: -7.6px;
  width: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
}

.icon-chevron34 img {
  width: 5px;
  height: 9px;
}

.icon-chevron35 {
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
  /* Remove white box */
  position: absolute;
  height: calc(100% - 9.2px);
  left: 0;
  bottom: 4.27px;
  left: -2.38px;
  width: 11.5px;
  transform: rotate(-180deg);
  /* Rotate so it points right */
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
}

.icon-chevron35 img {
  width: 5px;
  height: 9px;
}

/* Responsive stacking */

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


@media (max-width: 720px) {
  .chart-header-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 8px;
  }

  .performance-filter-picklist,
  .widget-title-performance-histo2,
  .time-period-control {
    width: 100%;
  }
}