/* We currently ship this CSS file with the package, so the font definitions need to live here at the moment.
The file fonts/material-symbols-outlined.woff2 is created using `hatch run download-static-files`.
Note the relative url works with both serve_locally=True and serve_locally=False through the CDN.
*/
@font-face {
  font-display: block;
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/material-symbols-outlined.woff2") format("woff2");
}

.material-symbols-outlined {
  direction: ltr;
  display: inline-block;
  font-family: "Material Symbols Outlined", sans-serif;
  font-feature-settings: "liga";
  font-size: 24px;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
}

.card-kpi .material-symbols-outlined {
  margin: auto 0;
}

/* This should be replaced, when the bootstrap theme is finalized. Currently our font tokens don't match with the
 bootstrap font tokens, leading to deviations which we need to overwrite.
 Title is intentionally de-emphasized (muted color, regular weight) so the KPI value remains the dominant element;
 without this override it would inherit Bootstrap's `h4 { color: var(--bs-primary) }`. */
.card-kpi-title {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}

.card-kpi .card-header,
.card-kpi .card-footer,
.card-kpi .card-body {
  align-items: center;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.card-kpi .card-header {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.5rem;
}

.card-kpi .card-body {
  align-items: baseline;
  color: var(--text-fg-primary);
  display: flex;
  flex-grow: 1;
  font-size: 40px;
  font-weight: 300;
  margin-top: 0.5rem;
}

.card-kpi .card-body .material-symbols-outlined {
  font-size: 1.25rem;
}

/* Sized in em so it scales automatically with the value's font-size across card-kpi-compact/-large. */
.card-kpi .card-kpi-units {
  color: var(--bs-secondary-color);
  font-size: 20px;
  font-weight: 400;
  margin-left: 0.25rem;
}

.card-kpi .card-footer {
  align-items: baseline;
  color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 400;
  gap: 0.175rem;
  width: fit-content;
}

/* The headline change (icon + delta) is the loud part of the footer — bold, colored, tinted. */
.card-kpi .card-kpi-delta-chip {
  align-items: baseline;
  color: var(--text-secondary);
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  gap: 0.25rem;
  padding: 0 0.375rem;
}

.card-kpi .card-kpi-delta-chip .material-symbols-outlined {
  font-size: 1.1rem;
}

.card-kpi .color-pos {
  color: var(--bs-success);
}

.card-kpi .color-neg {
  color: var(--bs-danger);
}

.card-kpi-large .card-kpi-delta-chip {
  font-size: 20px;
}

.card-kpi-compact .card-kpi-delta-chip {
  font-size: 14px;
}

.card-kpi-compact .card-kpi-units {
  font-size: 16px;
}

.card-kpi-large .card-kpi-units {
  font-size: 24px;
}

.card-kpi .color-pos.card-footer .card-kpi-delta-chip {
  color: var(--bg-trend-positive);
}

.card-kpi .color-neg.card-footer .card-kpi-delta-chip {
  color: var(--text-fg-trend-negative);
}

/* The supporting comparison text (e.g. "vs. reference (...)") stays muted, so it doesn't compete with the delta. */
.card-kpi .card-kpi-reference-text {
  color: var(--bs-secondary-color);
  font-weight: 400;
}

.card-kpi.card-kpi-sparkline {
  padding: 1rem;
}

/* `.card-kpi .card-footer` above sets `width: fit-content` for the delta-chip footer of kpi_card/
   kpi_card_reference. The sparkline footer instead hosts a graph that must fill the card's width. */
.card-kpi-sparkline .card-footer {
  width: 100%;
}

.card-kpi-sparkline-graph {
  height: 3rem;
}

.is-clickable > .card-kpi {
  cursor: pointer;
}

.is-clickable > .card-kpi:hover {
  border-bottom: 1px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
  border-top: 1px solid var(--bs-border-color);
}

.card-kpi-compact .card-kpi-title {
  font-size: 0.75rem;
}

.card-kpi-compact .card-body {
  font-size: 24px;
}

.card-kpi-compact .card-footer {
  font-size: 0.85rem;
}

.card-kpi-large .card-kpi-title {
  font-size: 1rem;
}

.card-kpi-large .card-body {
  font-size: 56px;
}

.card-kpi-large .card-footer {
  font-size: 1rem;
}

.card-kpi-large .card-footer .material-symbols-outlined {
  font-size: 32px;
}

.card-kpi-compact .card-footer .material-symbols-outlined {
  font-size: 16px;
}

.card-kpi-header {
  display: flex;
  justify-content: space-between;
}

.card-kpi-sparkline .card-body {
  align-items: center;
  font-size: 24px;
  gap: 8px;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.card-kpi-sparkline .card-kpi-units {
  font-size: 18px;
  margin-left: 0;
}