chart-factory 0.1.2

package/src/table/table.css

@@ -0,0 +1,899 @@
+/**
+ * D3Table Component Styles
+ *
+ * Import with core and table tokens:
+ *
+ *   @import 'chart-factory/core/tokens.css';
+ *   @import 'chart-factory/core/base.css';
+ *   @import 'chart-factory/table/tokens.css';
+ *   @import 'chart-factory/table/table.css';
+ */
+
+/* ===========================
+   TABLE CONTAINER (extends .d3-container)
+   =========================== */
+
+.d3-table-container {
+  display: inline-block;
+  background: var(--color-bg-container);
+  padding: var(--space-8);
+  box-shadow: var(--shadow-container);
+  text-align: left;
+}
+
+/* Wrapper for table + footer ensures footer matches table width */
+.d3-table-wrapper {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+/* Fill layout: the wrapper must be block-level so the scroll container
+   is bounded by the page container, not shrink-wrapped to the table.
+   (The footer still matches the table — it's 100% width too.)
+   Applied by D3Table.prepareDom(). */
+.d3-table-wrapper--fill {
+  display: block;
+  width: 100%;
+}
+
+.d3-table-title {
+  font-family: var(--font-family);
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-bold);
+  margin: 0 0 var(--space-2) 0;
+  color: var(--color-black);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.d3-table-subtitle {
+  font-family: var(--font-family);
+  font-size: var(--font-size-subtitle);
+  color: var(--color-text-subtle);
+  margin: 0 0 var(--space-6) 0;
+  line-height: var(--line-height-normal);
+  font-weight: var(--font-weight-normal);
+}
+
+.d3-table-footer {
+  margin-top: 0;
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-border-footer);
+  font-family: var(--font-family);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-faint);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wider);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ===========================
+   TABLE BASE
+   =========================== */
+
+table {
+  width: auto;
+  border-collapse: collapse;
+  font-family: var(--font-family);
+  font-size: var(--table-font-size);
+  margin-top: var(--space-3);
+  margin-bottom: 0;
+}
+
+/* ===========================
+   FILL LAYOUT (default)
+   The table fills its container; headers and text cells wrap;
+   numeric cells never wrap. Below the JS-computed min-width
+   floor, .d3-table-scroll takes over with horizontal scroll.
+   =========================== */
+
+.d3-table-scroll {
+  overflow-x: auto;
+  max-width: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+
+table.d3-table--fill {
+  /* Fit content, up to the container, never below the computed floor:
+     columns take their natural widths and leftover card width stays
+     OUTSIDE the table as plain whitespace instead of pooling inside a
+     stretched column. Bar columns then grow floor -> cap from measured
+     container slack (adjustBarColumnFlex). */
+  width: fit-content;
+  max-width: 100%;
+}
+
+table.d3-table--fill th {
+  white-space: normal;
+}
+
+table.d3-table--fill td {
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+table.d3-table--fill td.align-right,
+table.d3-table--fill td.align-center,
+table.d3-table--fill td.numeric-cell,
+table.d3-table--fill td.secondary-cell,
+table.d3-table--fill td.rank-cell {
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+
+/* ===========================
+   HEADER
+   =========================== */
+
+thead {
+  border-bottom: var(--table-header-border);
+}
+
+th {
+  text-align: left;
+  padding: var(--table-header-padding-y) var(--table-cell-padding-x) var(--table-header-padding-bottom) var(--table-cell-padding-near);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--table-header-font-size);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  vertical-align: baseline;
+  box-sizing: border-box;
+}
+
+th:first-child {
+  padding-left: 0;
+}
+
+th:last-child {
+  padding-right: 0;
+}
+
+th.align-right {
+  text-align: right;
+  padding: var(--table-header-padding-y) var(--table-cell-padding-near) var(--table-header-padding-bottom) var(--table-cell-padding-x);
+}
+
+th.align-center {
+  text-align: center;
+}
+
+/* ===========================
+   BODY
+   =========================== */
+
+tbody tr {
+  border-bottom: var(--table-row-border);
+}
+
+tbody tr:last-child {
+  border-bottom: none;
+}
+
+tbody tr:hover {
+  background-color: var(--color-bg-hover);
+}
+
+td {
+  padding: var(--table-cell-padding-y) var(--table-cell-padding-x) var(--table-cell-padding-y) var(--table-cell-padding-near);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-normal);
+  height: var(--table-cell-height);
+  box-sizing: border-box;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+td:first-child {
+  padding-left: 0;
+}
+
+td:last-child {
+  padding-right: 0;
+}
+
+td.align-right {
+  text-align: right;
+  padding: var(--table-cell-padding-y) var(--table-cell-padding-near) var(--table-cell-padding-y) var(--table-cell-padding-x);
+}
+
+td.align-center {
+  text-align: center;
+}
+
+/* ===========================
+   CELL TYPES
+   =========================== */
+
+/*
+ * Primary cells - bold, larger font
+ * Use for: names, titles, key identifiers
+ * Generic: primary-cell | Legacy: team-cell
+ */
+td.primary-cell,
+td.team-cell {
+  font-family: var(--table-primary-font, inherit);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--table-primary-font-size, var(--table-team-font-size));
+  color: var(--color-black);
+  white-space: normal;
+}
+
+/*
+ * Secondary cells - subdued, smaller
+ * Use for: ranks, indices, row numbers
+ * Generic: secondary-cell | Legacy: rank-cell
+ */
+td.secondary-cell,
+td.rank-cell {
+  color: var(--color-text-disabled);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--table-secondary-font-size, var(--table-rank-font-size));
+}
+
+th.auto-width.secondary-cell,
+td.auto-width.secondary-cell,
+th.auto-width.rank-cell,
+td.auto-width.rank-cell {
+  /* Compact padding for narrow rank/index columns */
+  padding-left: 0;
+  padding-right: var(--space-2);
+  min-width: var(--col-secondary-min, var(--col-rank-min));
+  max-width: var(--col-secondary-max, var(--col-rank-max));
+  text-align: left;
+}
+
+
+/*
+ * Muted cells - de-emphasized text
+ * Use for: supplementary info, metadata
+ */
+td.muted-cell {
+  color: var(--color-text-disabled);
+  font-size: var(--table-font-size);
+}
+
+/*
+ * Numeric cells - right-aligned, tabular figures
+ * Use for: numbers, statistics, amounts
+ */
+td.numeric-cell {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ===========================
+   SUBTITLE CELLS
+   =========================== */
+
+td.has-subtitle {
+  height: auto;
+  padding-top: var(--space-2);
+  padding-bottom: var(--space-2);
+}
+
+.cell-with-subtitle {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.cell-main-text {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--table-primary-font-size);
+  color: var(--color-black);
+  line-height: 1.2;
+}
+
+.cell-subtitle-text {
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-md);
+  color: var(--color-text-disabled);
+  line-height: 1.2;
+}
+
+/* ===========================
+   STICKY HEADER / STICKY FIRST COLUMN
+   =========================== */
+
+/* Sticky header. border-collapse drops borders on stuck cells, so the
+   header's bottom rule is redrawn as an inset shadow (on the last
+   header row only — a group row above it carries no rule). */
+table.d3-table--sticky-header thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--table-sticky-bg, #fff);
+}
+
+table.d3-table--sticky-header thead tr:last-child th {
+  box-shadow: inset 0 -2px 0 var(--color-black, #000);
+}
+
+table.d3-table--sticky-header thead {
+  border-bottom: none;
+}
+
+/* In-wrapper vertical scrolling (config.maxHeight) */
+.d3-table-scroll--vertical {
+  overflow-y: auto;
+}
+
+/* Floating header: sticky emulation on horizontally-scrolling tables.
+   JS translates the thead with the page scroll (position: sticky can't
+   escape the horizontal scroll container). will-change lives ONLY on the
+   floating state: on the base thead it would create a z-index:auto
+   stacking context that traps the th's z-index, letting tbody bar fills
+   and heatmap chips paint over the page-stuck header. */
+table.d3-table--sticky-header thead.d3-table-thead--floating {
+  position: relative;
+  z-index: 2;
+  will-change: transform;
+}
+
+table.d3-table--sticky-header thead.d3-table-thead--floating th {
+  background: var(--table-sticky-bg, #fff);
+}
+
+/* Page-level sticky: overflow-x clip does not create a scroll container,
+   applied by JS only while the table fits its container horizontally */
+.d3-table-scroll--clip {
+  overflow-x: clip;
+}
+
+/* Sticky first column */
+table.d3-table--sticky-first-col th:first-child,
+table.d3-table--sticky-first-col td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--table-sticky-bg, #fff);
+}
+
+table.d3-table--sticky-first-col thead th:first-child {
+  z-index: 3;
+}
+
+table.d3-table--sticky-first-col tbody tr:hover td:first-child {
+  background-color: var(--color-bg-hover);
+}
+
+/* Edge shadow appears only once the container is actually scrolled */
+.d3-table-scroll.is-h-scrolled table.d3-table--sticky-first-col th:first-child,
+.d3-table-scroll.is-h-scrolled table.d3-table--sticky-first-col td:first-child {
+  box-shadow: var(--table-sticky-edge-shadow);
+}
+
+/* Both stickies on one table: the corner header cell needs both shadows */
+table.d3-table--sticky-header.d3-table--sticky-first-col thead tr:last-child th:first-child {
+  box-shadow: inset 0 -2px 0 var(--color-black, #000);
+}
+
+.d3-table-scroll.is-h-scrolled table.d3-table--sticky-header.d3-table--sticky-first-col thead tr:last-child th:first-child {
+  box-shadow: inset 0 -2px 0 var(--color-black, #000), var(--table-sticky-edge-shadow);
+}
+
+/* ===========================
+   COLUMN GROUP HEADERS
+   =========================== */
+
+.d3-table-group-row th {
+  padding-bottom: var(--space-1);
+  vertical-align: bottom;
+}
+
+.d3-table-group-row th.group-header {
+  text-align: center;
+  color: var(--color-text-muted);
+  /* The rule is a bottom-anchored background (not border-bottom) so it
+     can be inset from the cell edges — adjacent groups get a visible
+     gap that marks where one group ends and the next begins. */
+  background-image: linear-gradient(
+    var(--table-group-rule-color, var(--color-border-row, #e5e7eb)),
+    var(--table-group-rule-color, var(--color-border-row, #e5e7eb)));
+  background-repeat: no-repeat;
+  background-position: bottom center;
+  background-size: calc(100% - 2 * var(--table-group-rule-inset, 10px)) var(--table-group-rule-width, 1px);
+}
+
+/* ===========================
+   ROW CAP (maxRows + Show all)
+   =========================== */
+
+tr.row-capped {
+  display: none !important;
+}
+
+.d3-table-showmore {
+  display: block;
+  background: none;
+  border: 0;
+  padding: var(--space-2) 0;
+  margin-top: var(--space-1);
+  font-family: var(--font-family);
+  font-size: var(--table-header-font-size);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  text-align: left;
+}
+
+.d3-table-showmore:hover {
+  color: var(--color-text-primary, var(--color-black));
+}
+
+.d3-table-showmore:focus-visible {
+  outline: 2px solid var(--chart-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+/* ===========================
+   FOOTER / TOTAL ROW
+   =========================== */
+
+tfoot td {
+  font-weight: var(--font-weight-bold);
+}
+
+/* First summary row carries the heavy total rule; later rows (e.g. a
+   per-game average under the totals) separate with the normal border */
+tfoot tr:first-child td {
+  border-top: var(--table-total-border);
+}
+
+tfoot tr + tr td {
+  border-top: var(--table-row-border);
+}
+
+/* ===========================
+   EXPANDABLE SUB-ROWS
+   =========================== */
+
+/* Chevron toggle at the start of an expandable parent row's first cell.
+   Same drawn-border chevron as sort indicators: points right collapsed,
+   rotates to point down when expanded. */
+.row-toggle {
+  background: none;
+  border: 0;
+  padding: 0;
+  margin-right: var(--space-2);
+  width: var(--table-toggle-width, 14px);
+  cursor: pointer;
+  color: var(--color-text-muted);
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 0;
+}
+
+.row-toggle::after {
+  content: '';
+  display: inline-block;
+  width: var(--sort-chevron-size, 5px);
+  height: var(--sort-chevron-size, 5px);
+  border-right: var(--sort-chevron-stroke, 1.5px) solid currentColor;
+  border-bottom: var(--sort-chevron-stroke, 1.5px) solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform var(--sort-transition-duration) ease;
+}
+
+.row-toggle:hover {
+  color: var(--color-text-primary, var(--color-black));
+}
+
+.row-toggle:focus-visible {
+  outline: 2px solid var(--chart-primary, #3b82f6);
+  outline-offset: 2px;
+}
+
+tr.expandable-row.expanded .row-toggle::after {
+  transform: rotate(45deg);
+}
+
+tr.expandable-row td {
+  cursor: default;
+}
+
+/* Same-width spacer keeps childless parent rows aligned with toggled ones */
+.row-toggle-spacer {
+  display: inline-block;
+  width: var(--table-toggle-width, 14px);
+  margin-right: var(--space-2);
+}
+
+/* Sub-rows: indented under the parent, quieter type */
+tr.sub-row td:first-child {
+  padding-left: var(--table-subrow-indent, 22px);
+}
+
+tr.sub-row td.primary-cell,
+tr.sub-row td.team-cell {
+  font-size: var(--table-font-size);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ===========================
+   IMAGE CELLS (logos / flags / headshots)
+   =========================== */
+
+.cell-with-image {
+  display: flex;
+  align-items: center;
+  gap: var(--table-image-gap);
+}
+
+td.align-right .cell-with-image {
+  justify-content: flex-end;
+}
+
+td.align-center .cell-with-image {
+  justify-content: center;
+}
+
+.d3-table-img {
+  width: var(--table-image-size);
+  height: var(--table-image-size);
+  flex-shrink: 0;
+  display: block;
+}
+
+img.d3-table-img.img-fit-cover { object-fit: cover; }
+img.d3-table-img.img-fit-contain { object-fit: contain; }
+
+.d3-table-img.img-circle { border-radius: 50%; }
+.d3-table-img.img-rounded { border-radius: var(--table-image-radius); }
+.d3-table-img.img-square { border-radius: 0; }
+
+/* Rows without an image keep an invisible slot so text stays aligned */
+.d3-table-img-placeholder {
+  visibility: hidden;
+}
+
+/* ===========================
+   AUTO WIDTH UTILITY
+   =========================== */
+
+.auto-width {
+  white-space: nowrap;
+  /* width handled by JavaScript */
+}
+
+/* Opt-in wrapping for long text columns (column config `wrap: true`).
+   Beats the auto-width nowrap; pair with a column maxWidth (applied as an
+   inline style) to control where the wrap engages. Data cells only —
+   headers keep their single-line layout. */
+td.wrap-cell,
+td.auto-width.wrap-cell {
+  white-space: normal;
+  overflow-wrap: break-word;
+  line-height: var(--table-wrap-line-height, 1.35);
+}
+
+/* ===========================
+   BAR CHART CELLS
+   =========================== */
+
+td.bar-cell {
+  position: relative;
+  min-width: var(--bar-column-min-width);
+  overflow: visible;
+  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
+}
+
+th.bar-cell {
+  text-align: center;
+  padding: var(--table-header-padding-y) var(--table-cell-padding-x) var(--table-header-padding-bottom) var(--table-cell-padding-x);
+}
+
+.bar-background {
+  position: absolute;
+  top: var(--bar-margin-y);
+  left: var(--table-cell-padding-x);
+  bottom: var(--bar-margin-y);
+  height: auto;
+  opacity: var(--bar-opacity);
+  z-index: 0;
+  border-radius: var(--table-bar-border-radius, 2px);
+}
+
+/* Positioning context spanning the cell's padded interior: bar widths and
+   label positions are percentages OF THE TRACK, so they can never bleed
+   past the cell padding (the old cell-relative percentages overflowed
+   tight columns by the padding width). */
+.bar-track {
+  position: absolute;
+  top: var(--bar-margin-y);
+  bottom: var(--bar-margin-y);
+  left: var(--table-cell-padding-x);
+  right: var(--table-cell-padding-x);
+}
+
+.bar-track .bar-background {
+  top: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.bar-track .bar-value {
+  margin-left: 0;
+}
+
+/* Scoped to table cells: the ChartFactory bar builders also emit an SVG
+   <text class="bar-value"> for their end-of-bar labels, and an unscoped rule
+   here (position/top/transform) leaks onto those and floats them off their
+   bars. Table bar-values are always a <div> inside a <td>, so `td` scoping
+   fixes the collision without changing table appearance. */
+td .bar-value {
+  position: absolute;
+  z-index: 1;
+  font-weight: var(--font-weight-semibold);
+  text-align: right;
+  color: var(--color-black);
+  padding: 0 var(--bar-text-padding);
+  white-space: nowrap;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--table-cell-padding-x);
+}
+
+/* ===========================
+   HEATMAP CELLS
+   =========================== */
+
+.heatmap-cell-padded {
+  position: relative;
+}
+
+.heatmap-cell-padded.align-right {
+  text-align: right;
+}
+
+.heatmap-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--heatmap-box-padding);
+  border-radius: var(--heatmap-box-border-radius);
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+  min-width: var(--heatmap-box-min-width);
+  height: var(--heatmap-box-height);
+  box-sizing: border-box;
+}
+
+.heatmap-value {
+  position: relative;
+  z-index: 1;
+}
+
+/* Missing value in a heatmap column: quiet em dash, no fill */
+.heatmap-box-empty {
+  color: var(--color-text-faint);
+  font-weight: var(--font-weight-normal);
+}
+
+/* ===========================
+   HIGHLIGHTING
+   =========================== */
+
+.highlight-column {
+  background-color: var(--color-bg-highlight);
+}
+
+.highlight-column .bar-background {
+  left: var(--space-3);
+}
+
+.highlight-column .bar-value {
+  margin-left: var(--space-3);
+}
+
+.highlight-header {
+  background-color: var(--color-bg-highlight);
+}
+
+.highlight-row {
+  background-color: var(--color-bg-highlight);
+}
+
+.highlight-row:hover {
+  background-color: var(--color-bg-highlight);
+}
+
+/* ===========================
+   SORTING
+   =========================== */
+
+.sortable-header {
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+  transition: background-color var(--sort-transition-duration) ease;
+}
+
+/* Sortability is signaled ambiently: pointer cursor + hover/focus fill.
+   Idle sortable columns show no glyph. */
+.sortable-header:hover,
+.sortable-header:focus-within {
+  background-color: var(--sort-hover-bg);
+}
+
+/* The header's click/keyboard surface — a real button for aria-sort,
+   Tab focus, and Enter/Space activation. Styled to be invisible. */
+.sort-button {
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  cursor: pointer;
+  display: block;
+  width: 100%;
+}
+
+.sort-button:focus-visible {
+  outline: 2px solid var(--chart-primary, #3b82f6);
+  outline-offset: -2px;
+}
+
+/* Glue wrappers keep the indicator on the same line as the adjacent
+   word — the chevron can never wrap onto a line by itself. */
+.sort-glue,
+.sort-glue-lead {
+  white-space: nowrap;
+}
+
+.sort-indicator {
+  display: inline-block;
+  color: var(--sort-indicator-color);
+  opacity: var(--sort-indicator-opacity, 0.5);
+}
+
+.sort-indicator.inactive {
+  display: none;
+}
+
+.sort-glue .sort-indicator.active {
+  margin-left: var(--space-1);
+}
+
+.sort-glue-lead .sort-indicator.active {
+  margin-right: var(--space-1);
+}
+
+/* CSS-drawn chevron: the same bordered box for both directions, rotated
+   about its center — size, stroke, and baseline are exactly consistent.
+   The rotation leaves the visible strokes entirely on one side of the
+   box center (below it for ▾, above it for ▴), so each direction gets a
+   compensating translate of size × √2/4 that puts the glyph's visual
+   center exactly on the box center — up and down share one center point. */
+.sort-indicator.asc::after,
+.sort-indicator.desc::after {
+  content: '';
+  display: inline-block;
+  width: var(--sort-chevron-size, 5px);
+  height: var(--sort-chevron-size, 5px);
+  border-right: var(--sort-chevron-stroke, 1.5px) solid currentColor;
+  border-bottom: var(--sort-chevron-stroke, 1.5px) solid currentColor;
+  vertical-align: 1px;
+}
+
+.sort-indicator.desc::after {
+  transform: translateY(calc(var(--sort-chevron-size, 5px) * -0.354)) rotate(45deg);
+}
+
+.sort-indicator.asc::after {
+  transform: translateY(calc(var(--sort-chevron-size, 5px) * 0.354)) rotate(225deg);
+}
+
+/* Sorted column highlighting — quiet neutral wash over the full column,
+   header cell included, applied when the user sorts manually. */
+.sorted-column {
+  background-color: var(--table-sorted-column-bg, rgba(0, 0, 0, 0.03));
+}
+
+/* A first column is flush-left by default; when it carries a column
+   wash (sorted tint, permanent highlight) the text would hug the
+   shaded edge, so those cells get the small near-edge padding. Row-
+   level shading (hover, highlight-row) is deliberately excluded —
+   per-row padding would misalign first-column text across rows. */
+th:first-child.sorted-column,
+td:first-child.sorted-column,
+th:first-child.highlight-header,
+td:first-child.highlight-column {
+  padding-left: var(--table-cell-padding-near);
+}
+
+.sorted-column:hover {
+  background-color: var(--table-sorted-column-bg-hover, rgba(0, 0, 0, 0.05));
+}
+
+th.sorted-column {
+  color: var(--color-text-primary, var(--color-black));
+}
+
+/* ===========================
+   TABLE TOOLTIPS
+   =========================== */
+
+.d3-table-tooltip {
+  position: absolute;
+  background: var(--color-bg-container);
+  border: 1px solid var(--color-border-tooltip);
+  border-radius: var(--tooltip-border-radius);
+  padding: var(--tooltip-padding);
+  box-shadow: var(--shadow-tooltip);
+  z-index: 1000;
+  pointer-events: none;
+  font-family: var(--font-family);
+  font-size: var(--font-size-md);
+  min-width: var(--tooltip-min-width);
+  overflow: hidden;
+}
+
+.d3-table-tooltip-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--tooltip-bar-gap);
+  height: var(--tooltip-chart-height);
+  position: relative;
+  box-sizing: border-box;
+}
+
+.d3-table-tooltip-bar {
+  flex: 1;
+  background-color: var(--color-text-muted);
+  border-radius: var(--tooltip-bar-border-radius);
+  min-width: var(--tooltip-bar-min-width);
+  position: relative;
+  max-height: var(--tooltip-chart-height);
+}
+
+.d3-table-tooltip-bar-label {
+  position: absolute;
+  bottom: calc(-1 * var(--tooltip-label-offset-y));
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.d3-table-tooltip-bar-value {
+  position: absolute;
+  top: calc(-1 * var(--tooltip-value-offset-y));
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-black);
+  white-space: nowrap;
+}
+
+/* ===========================
+   RESPONSIVE
+   =========================== */
+
+@media (max-width: 768px) {
+  .d3-table-container {
+    padding: var(--container-padding-mobile);
+  }
+
+  .d3-table-title {
+    font-size: var(--title-font-size-mobile);
+  }
+
+  table {
+    font-size: var(--table-font-size-mobile);
+  }
+
+  th {
+    font-size: var(--table-header-font-size-mobile);
+  }
+}