/* shift-chart-engine--v18.css (23/10/2026). FROZEN: never edit once published. Identical to Index Chart Engine v17.css. */
/* ─────────────────────────────────────────────────────────────────────────
   Index Chart Engine — Bricks Builder port (CSS)

   Bricks equivalent of the shared SME Index chart engine CSS, built for
   the s26-018B - SME Index - BricksBuilder workstation. Combines two files
   that were previously pasted separately on the Oxygen build into one — no
   rules changed, this is a straight port for Bricks' Code element
   (cssCode field), which plays the same "paste once" role Oxygen's
   CSS-tab Code Block did.

   Ported from (source-of-truth stays in SHIFT/s26-018 - SME Index/-outputs/shared/):
   - chart-engine.css v7 (line/bar/pie/hbar chart styling, below)
   - heatmap-engine.css v2 (heatmap key + grid styling, appended below)
   Both files already shipped together on every live SME Index page — this
   just removes the need to paste them as two separate Bricks Code elements.

   Paste once into the Bricks template (Code element, cssCode field), before
   Index Chart Engine.js. Every chart on the page reuses these rules — do
   not duplicate per chart.
   ───────────────────────────────────────────────────────────────────────── */

.shift-chart {
  --sc-color-text:      rgb(37, 74, 91);
  --sc-color-dark-blue: #334D5E;
  --sc-color-grey:      #839298;
  --sc-color-gridline:  #e2ddd5;
  --sc-color-tooltip-border: #ddd;
  --sc-font: 'Poppins', 'Segoe UI', sans-serif;

  width: 100%;
  font-family: var(--sc-font);
  box-sizing: border-box;
}

.shift-chart *, .shift-chart *::before, .shift-chart *::after {
  box-sizing: border-box;
}

.shift-chart-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sc-color-text);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}

.shift-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-bottom: 14px;
}

/* legendPosition:'stacked' (v13) — same top position, vertical list instead
   of a wrapped horizontal row. */
.shift-chart-legend.legend-stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}


.shift-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sc-color-text);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
}

.shift-chart-legend-item.is-dimmed { opacity: 0.22; }
.shift-chart-legend-item.is-off { opacity: 0.22; text-decoration: line-through; }

.shift-chart-legend-swatch {
  flex-shrink: 0;
  display: inline-block;
  width: 20px;
}

.shift-chart-legend-swatch--block {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.shift-chart-bar { transition: opacity 0.15s; cursor: default; }

/* legendPosition:'right' — only active when the container carries the
   `.legend-right` class (set by chart-engine.js v9+ when the option is
   passed). Chart-container grows, legend sits as a fixed-width column
   beside it instead of a row above it. */
.shift-chart.legend-right .shift-chart-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.shift-chart.legend-right .shift-chart-container { flex: 1; min-width: 0; }
.shift-chart.legend-right .shift-chart-legend {
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 0;
  padding-top: 4px;
}
@media (max-width: 519px) {
  .shift-chart.legend-right .shift-chart-body { flex-direction: column; }
  .shift-chart.legend-right .shift-chart-legend {
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 0;
    margin-top: 14px;
  }
}

.shift-chart-container {
  width: 100%;
  position: relative;
}

.shift-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.shift-chart-line { transition: opacity 0.18s, stroke-width 0.18s; }

/* Floating tooltip — desktop only */
.shift-chart-tooltip {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--sc-color-tooltip-border);
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 12px;
  font-family: var(--sc-font);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.13);
  z-index: 10;
  min-width: 175px;
  color: var(--sc-color-text);
}

.shift-chart-tooltip.is-visible { opacity: 1; }

/* Driven by the container's own width (JS adds/removes .is-shift-mobile on
   the chart element every render), NOT a viewport media query. A viewport
   query only fires at the actual browser-window width, so a chart sitting
   in a narrower column than the viewport — or a desktop window resized to
   preview mobile — would never switch to the below-chart card. The engine
   already computes "isMobile" per container width for its own tick/label
   logic; this just lets the CSS follow the same measurement. */
.shift-chart.is-shift-mobile .shift-chart-tooltip { display: none !important; }

.shift-chart-tooltip-date {
  font-weight: 700;
  font-size: 12.5px;
  margin-bottom: 6px;
  color: var(--sc-color-dark-blue);
}

.shift-chart-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
}

.shift-chart-tooltip-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.shift-chart-tooltip-swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.shift-chart-tooltip-label {
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
}

.shift-chart-tooltip-value {
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  font-size: 11.5px;
}

/* Static tooltip — mobile only, sits below the chart as a tappable card
   (values appear here on touch, same data as the desktop hover tooltip,
   just laid out bigger/roomier for a finger instead of a cursor). */
.shift-chart-static-tooltip {
  display: none;
  margin-top: 16px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid var(--sc-color-gridline);
  border-radius: 8px;
  min-height: 88px;
  font-family: var(--sc-font);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.shift-chart-static-hint { color: var(--sc-color-grey); font-size: 13px; }

.shift-chart-static-tooltip .shift-chart-tooltip-date {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--sc-color-text);
}

.shift-chart-static-tooltip .shift-chart-tooltip-row { margin-bottom: 10px; align-items: flex-start; }
.shift-chart-static-tooltip .shift-chart-tooltip-row:last-child { margin-bottom: 0; }
.shift-chart-static-tooltip .shift-chart-tooltip-left { align-items: flex-start; }
/* Top-aligned, not centred — a two-line wrapped label (e.g. "Accommodation
   and Food Services") used to leave the dot floating mid-way down the text
   under align-items:center. margin-top nudges it to sit level with the
   label's first line instead of the row's top edge exactly. */
.shift-chart-static-tooltip .shift-chart-tooltip-swatch { width: 11px; height: 11px; margin-top: 4px; }
.shift-chart-static-tooltip .shift-chart-tooltip-label { font-size: 15px; color: var(--sc-color-text); overflow: visible; white-space: normal; }
.shift-chart-static-tooltip .shift-chart-tooltip-value { font-size: 17px; }

.shift-chart.is-shift-mobile .shift-chart-static-tooltip { display: block; }

.shift-chart-source {
  margin-top: 12px;
  font-size: 10.5px;
  color: var(--sc-color-grey);
}

/* ── Horizontal bar list (v4) ──────────────────────────────────────────── */
.shift-hbar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shift-hbar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 3px 0;
  transition: opacity 0.15s;
}

/* min-width:0 is load-bearing — a flex item's default min-width is "auto",
   which lets its content's intrinsic width win over flex-basis/flex-shrink
   for long unbroken words. Without it, a long category name pushes the
   track/value columns out of alignment on narrow (mobile) widths instead
   of wrapping inside its own 230px/110px column. */
.shift-hbar-label {
  flex: 0 0 230px;
  min-width: 0;
  font-size: 13px;
  color: var(--sc-color-text);
  line-height: 1.3;
  overflow-wrap: break-word;
}

.shift-hbar-track {
  flex: 1;
  min-width: 0;
  height: 22px;
}

.shift-hbar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}

.shift-hbar-value {
  flex: 0 0 auto;
  min-width: 56px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sc-color-text);
}

@media (max-width: 519px) {
  .shift-hbar-label { flex-basis: 110px; font-size: 11.5px; }
  .shift-hbar-value { min-width: 44px; font-size: 12px; }
  .shift-hbar-row { gap: 8px; }
}

/* ── Heatmap / coloured matrix (v4) ────────────────────────────────────── */
.shift-heatmap-body {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.shift-heatmap-legend {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

/* Fixed square size, not derived from the flex parent — a bucket swatch
   reads as a colour key, not a data value, so it holds its shape (and
   stays legible) regardless of how wide or narrow the legend container is,
   unlike the grid's data cells, which size off the available column width. */
.shift-heatmap-legend-item {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  padding: 6px;
  text-align: center;
}

.shift-heatmap-grid {
  flex: 1;
  display: grid;
  gap: 2px;
}

.shift-heatmap-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 6px;
  font-weight: 700;
  font-size: 14px;
  min-height: 50px;
  text-align: center;
}

/* Always square, whatever the column's own width ends up being — height
   follows width via aspect-ratio rather than a fixed min-height, so the
   cell stays a true square across any container size. */
.shift-heatmap-cell--data {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.shift-heatmap-cell--corner { background: transparent; }

.shift-heatmap-cell--colhead,
.shift-heatmap-cell--rowhead {
  font-weight: 600;
  font-size: 10.5px;
  color: var(--sc-color-grey);
  background: transparent;
  text-transform: uppercase;
}

@media (max-width: 519px) {
  .shift-heatmap-body { flex-direction: column; }
  .shift-heatmap-legend { flex-direction: row; flex-basis: auto; }
  .shift-heatmap-cell { font-size: 11px; padding: 8px 4px; min-height: 38px; }
}

/* ── Heatmap key + grid (ported from heatmap-engine.css v2) ────────────── */

.shift-heatmap-legend,
.shift-heatmap-grid {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  box-sizing: border-box;
}
.shift-heatmap-legend *,
.shift-heatmap-grid * {
  box-sizing: border-box;
}

.shift-heatmap-legend {
  display: flex;
  gap: 3px;
}

.shift-heatmap-legend-item {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  padding: 6px;
  text-align: center;
  border-radius: 2px;
}

.shift-heatmap-grid {
  display: grid;
  gap: 3px;
}

.shift-heatmap-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 6px;
  font-weight: 700;
  font-size: 14px;
  min-height: 50px;
  text-align: center;
  border-radius: 2px;
}

.shift-heatmap-cell--data { aspect-ratio: 1 / 1; min-height: 0; }

/* Used whenever a grid sets an explicit fixed row height (config.rowHeightPx
   — for grids with long row labels, e.g. Industry). aspect-ratio would
   otherwise force a taller intrinsic height than the fixed track, and
   height:100% needs border-box (set above) or the cell's own padding adds
   on top of that and overflows into the row below. */
.shift-heatmap-cell--data.is-fixed-height { aspect-ratio: auto; height: 100%; }

/* Empty placeholder cell (top-left, or bottom-left when column labels sit
   below the grid). Reset to zero — it still shares the base class's
   min-height/padding, which would otherwise drag an 'auto'-sized label row
   far taller than the label text actually needs. */
.shift-heatmap-cell--corner { background: transparent; min-height: 0; padding: 0; }

.shift-heatmap-cell--colhead,
.shift-heatmap-cell--rowhead {
  font-weight: 600;
  font-size: 10.5px;
  color: #839298;
  background: transparent;
}

.shift-heatmap-cell--colhead {
  text-transform: uppercase;
  min-height: 0;
  padding: 0 4px 6px;
  align-items: flex-end;
  line-height: 1.25;
}
/* Sentence-case variant — e.g. "R up / L up" rather than "R UP / L UP". */
.shift-heatmap-cell--colhead.is-sentence-case { text-transform: none; }
.shift-heatmap-cell--colhead.is-lower-case { text-transform: lowercase; }

.shift-heatmap-cell--rowhead {
  text-transform: uppercase;
  justify-content: flex-end;
  text-align: right;
  padding-right: 10px;
}
.shift-heatmap-cell--rowhead.is-sentence-case { text-transform: none; }
.shift-heatmap-cell--rowhead.is-lower-case { text-transform: lowercase; }

@media (max-width: 519px) {
  .shift-heatmap-legend { flex-wrap: wrap; }
  .shift-heatmap-cell { font-size: 11px; padding: 8px 4px; min-height: 38px; }
}