/* One typography layer for every dashboard theme and exported HTML.
 * Keep chart geometry, numeric alignment and third-party icon fonts intact.
 * Scoped !important rules intentionally override legacy theme/platform weights.
 */
:root {
  --dashboard-font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --dashboard-weight-regular: 400;
  --dashboard-weight-secondary: 500;
  --dashboard-weight-medium: 600;
  --dashboard-weight-strong: 700;
  --dashboard-table-name-size: 13px;
  --dashboard-column-title-size: 11px;
}

body.modern-ui,
body.modern-ui :is(h1, h2, h3, h4, h5, h6),
body.modern-ui :is(button, input, select, textarea, option, summary),
body.modern-ui svg :is(text, tspan) {
  font-family: var(--dashboard-font-family) !important;
}

body.modern-ui {
  font-weight: var(--dashboard-weight-regular);
  font-variant-numeric: tabular-nums;
}

body.modern-ui :is(h1, h2, h3, h4, h5, h6, strong, b) {
  font-weight: var(--dashboard-weight-strong) !important;
}

body.modern-ui :is(button, input, select, textarea, summary, label),
body.modern-ui :is(.structure-name, .pf-row-toggle, .pf-row-name, .pf-corpus-name, .pf-corpus-name a, .chart-label) {
  font-weight: var(--dashboard-weight-medium) !important;
}

/* The same entity names used to be 11px in PF and 13px in Sales. */
body.modern-ui :is(.structure-name, .pf-row-toggle, .pf-row-name, .pf-corpus-name, .pf-corpus-name a) {
  font-size: var(--dashboard-table-name-size) !important;
}

body.modern-ui :is(.pf-money, .structure-area, .structure-units, .structure-revenue, .structure-price, .structure-sellout, .structure-readiness) {
  font-weight: var(--dashboard-weight-strong) !important;
}

body.modern-ui :is(small, .pf-bank, .pf-maturity, .axis-label, .comparison-kpi) {
  font-weight: var(--dashboard-weight-secondary) !important;
}

/* Column headers only: tbody row names stay left; amounts keep their alignment. */
body.modern-ui thead th,
body.modern-ui .structure-head > span {
  font-family: var(--dashboard-font-family) !important;
  font-size: var(--dashboard-column-title-size) !important;
  font-weight: var(--dashboard-weight-strong) !important;
  text-align: center !important;
}

body.modern-ui .structure-head > span {
  justify-self: center !important;
}

body.modern-ui thead th :is(button, small, span) {
  text-align: center !important;
}

body.modern-ui thead th small {
  font-size: var(--dashboard-column-title-size) !important;
}