/*
 * Shared VirgilTrack component rules, on the tokens in vt-tokens.css (B-01).
 * Loaded after vt-bootstrap.css and before app.css. Page-specific rules stay with their page; rules that two or more
 * screens share move here as the screens are migrated (B-06).
 */

/* ── Type utilities (B-03): use these instead of inline font sizes ── */
.vt-text-xs  { font-size: var(--vt-text-xs) !important; }   /* 12 px: captions, table meta. The minimum. */
.vt-text-sm  { font-size: var(--vt-text-sm) !important; }   /* 13 px: secondary text, table cells, badges */
.vt-text-md  { font-size: var(--vt-text-md) !important; }   /* 14 px: body, inputs, buttons */
.vt-text-lg  { font-size: var(--vt-text-lg) !important; }   /* 16 px: card titles */
.vt-text-xl  { font-size: var(--vt-text-xl) !important; }   /* 20 px: section and dialog titles */
.vt-text-2xl { font-size: var(--vt-text-2xl) !important; }  /* 24 px: page titles */
.vt-text-3xl { font-size: var(--vt-text-3xl) !important; }  /* 32 px: KPI values */
.vt-display  { font-family: var(--vt-font-display); }
/* The only text allowed below 12 px: short uppercase labels above a value or a group */
.vt-overline {
  font-size: 11px;
  font-weight: 600;
  line-height: var(--vt-leading-tight);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vt-text-muted);
}
.vt-text-muted  { color: var(--vt-text-muted) !important; }
.vt-text-subtle { color: var(--vt-text-subtle) !important; }

/* ── Numbers (B-25): amounts and figures never wrap and line up in columns. Fmt.Money already puts a no-break
   space after "N$"; these keep the whole figure on one line and use tabular digits. ── */
.vt-num, .vt-money {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Appearance in the user menu (B-07) ── */
.vt-theme-option {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: start;
}
.vt-theme-option .vt-theme-check {
  margin-inline-start: auto;
  visibility: hidden;
  color: var(--vt-primary);
}
/* The chosen mode, from data-vt-theme on <html> (App.razor and vt-theme.js keep it current) */
html[data-vt-theme=light] [data-vt-theme-value=light],
html[data-vt-theme=dark] [data-vt-theme-value=dark],
html[data-vt-theme=system] [data-vt-theme-value=system] {
  color: var(--vt-primary);
  font-weight: 600;
}
html[data-vt-theme=light] [data-vt-theme-value=light] .vt-theme-check,
html[data-vt-theme=dark] [data-vt-theme-value=dark] .vt-theme-check,
html[data-vt-theme=system] [data-vt-theme-value=system] .vt-theme-check {
  visibility: visible;
}