/* ============================================================
   pivot-grid.css — cross-tab pivot table, heat-map cells, and the
   two-level treemap. Scoped stylesheet for js/components/pivot-grid.js
   and js/components/treemap.js (same split precedent as geo-map.css /
   filter-panel.css — feature-scoped CSS loaded after pages.css).
   ============================================================ */

/* ---------- Toolbar ---------- */
.pivot-grid__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.pivot-grid__toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.pivot-grid__toolbar-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  white-space: nowrap;
}

.pivot-grid__search {
  width: min(220px, 100%);
}

/* ---------- Sticky grid ---------- */
.pivot-grid__scroll {
  overflow: auto;
  max-height: 560px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.pivot-grid__table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

.pivot-grid__table th,
.pivot-grid__table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  text-align: right;
  white-space: nowrap;
  background: var(--bg-surface-solid);
}

.pivot-grid__table th {
  text-align: left;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: var(--bg-surface-raised);
}

.pivot-grid__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.pivot-grid__corner {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 3;
}

.pivot-grid__row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pivot-grid__total-col {
  font-weight: var(--weight-semibold);
  background: var(--bg-surface-raised);
}

.pivot-grid__foot th,
.pivot-grid__foot td {
  font-weight: var(--weight-semibold);
  background: var(--bg-surface-raised);
  position: sticky;
  bottom: 0;
}

/* ---------- Heat-map cells ----------
   --heat is a 0–100 custom property set inline per cell; color-mix() does
   the blending so theme changes (--blue-500/--positive/--negative swap
   between dark/light in tokens.css) need no JS re-render. */
.pivot-cell {
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.pivot-cell:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: -2px;
}

.pivot-grid__table:not(.is-plain) .pivot-cell[data-color="sequential"] {
  background: color-mix(in srgb, var(--blue-500) calc(var(--heat, 0) * 1%), var(--bg-surface-solid));
}

.pivot-grid__table:not(.is-plain) .pivot-cell[data-color="diverging-pos"] {
  background: color-mix(in srgb, var(--positive) calc(var(--heat, 0) * 1%), var(--bg-surface-solid));
}

.pivot-grid__table:not(.is-plain) .pivot-cell[data-color="diverging-neg"] {
  background: color-mix(in srgb, var(--negative) calc(var(--heat, 0) * 1%), var(--bg-surface-solid));
}

.pivot-grid__table:not(.is-plain) .pivot-cell[data-color="neutral"] {
  background: color-mix(in srgb, var(--text-muted) calc(var(--heat, 0) * 1%), var(--bg-surface-solid));
}

.pivot-grid__table.is-plain .pivot-cell {
  background: var(--bg-surface-solid);
}

/* ---------- Treemap ---------- */
.treemap {
  position: relative;
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.treemap__row {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 2px solid var(--bg-app);
  background: var(--bg-surface-raised);
  cursor: pointer;
  overflow: hidden;
}

.treemap__row-label {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.treemap__row-name {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.treemap__cells {
  position: relative;
  height: calc(100% - 22px);
}

.treemap__cell {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 2px solid var(--bg-app);
  display: flex;
  align-items: flex-end;
  padding: var(--space-1);
  cursor: pointer;
  background: color-mix(in srgb, var(--text-muted) calc(var(--heat, 40) * 1%), var(--bg-surface-solid));
  transition: filter var(--dur-fast) var(--ease-out);
}

.treemap__cell[data-color="diverging-pos"] {
  background: color-mix(in srgb, var(--positive) calc(var(--heat, 0) * 1%), var(--bg-surface-solid));
}

.treemap__cell[data-color="diverging-neg"] {
  background: color-mix(in srgb, var(--negative) calc(var(--heat, 0) * 1%), var(--bg-surface-solid));
}

.treemap__cell:hover {
  filter: brightness(1.1);
}

.treemap__cell-name {
  font-size: var(--text-xs);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}