/* Generated from products/design-system/shared/stat-card by Navorina/scripts/sync-ds-stat-card.mjs. Do not edit. */
/* Stat card › Trend (nv-o-stat--trend): the one source of the trend card look for the DS catalog and the
   product. Markup: shared/stat-card.js (trendCardMarkup). The product gets a byte-identical copy in
   css/components/nv-stat-card.css via Navorina/scripts/sync-ds-stat-card.mjs; edit this file only.

   Layout, one left edge for everything:
     head    icon 36 · label (callout, secondary) · delta pill pushed right
     value   numeric title, primary, 12 px under the head
     meta    footnote, tertiary, 4 px under the value: the comparison value ("€31,625 last month")
     trend   48 px sparkline across the content width, 16 px under the meta
   The pill and the line share one sentiment tone, five steps (deltaSentiment in stat-card.js):
     positive        strong good move (5 % and more)  success green
     mild-positive   small good move (1–5 %)          green at 55 %: dimmer on dark, paler on light
     neutral         under 1 %                        secondary text
     mild-negative   small bad move (1–5 %)           warning amber: worth a look, not an alarm
     negative        strong bad move (5 % and more)   error red The base card
   (surface, radius, padding, icon circle, loading bones) comes from the regular nv-o-stat rules. */
@layer components {
  .nv-o-stat--trend {
    --nv-stat-trend-tone: var(--nv-text-secondary, var(--dash-text-muted, #a1a1aa));
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .nv-o-stat--sentiment-positive { --nv-stat-trend-tone: var(--nv-feedback-success, var(--dash-green, #34c759)); }
  .nv-o-stat--sentiment-negative { --nv-stat-trend-tone: var(--nv-feedback-error, var(--dash-red, #ff453a)); }
  .nv-o-stat--sentiment-mild-positive {
    --nv-stat-trend-tone: color-mix(in srgb, var(--nv-feedback-success, var(--dash-green, #34c759)) 55%, transparent);
  }
  .nv-o-stat--sentiment-mild-negative { --nv-stat-trend-tone: var(--nv-feedback-warning, var(--dash-amber, #ff9f0a)); }

  .nv-o-stat--trend .nv-o-stat__head {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
  }

  .nv-o-stat--trend .nv-o-stat__label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--nv-text-secondary, var(--dash-text-muted));
    font-size: var(--nv-type-callout-size, 13px);
    font-weight: var(--nv-type-weight-medium, 500);
    line-height: var(--nv-type-callout-line, 18px);
    letter-spacing: var(--nv-type-callout-tracking, -0.005em);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Narrow card (four in a row): the pill leaves the head and sits on the value row, right edge,
     centred on the value line, so the label keeps its full width. The card is the nv-stat-card container. */
  @container nv-stat-card (max-width: 420px) {
    .nv-o-stat--trend .nv-o-stat__delta {
      position: absolute;
      top: calc(var(--nv-island-padding, 24px) + 36px + 12px + (clamp(22px, 7cqi, 30px) * 1.1 - 24px) / 2);
      right: var(--nv-island-padding, 24px);
    }
  }

  .nv-o-stat__delta {
    display: inline-flex;
    flex: none;
    height: 24px;
    align-items: center;
    gap: 4px;
    padding: 0 8px 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--nv-stat-trend-tone) 14%, transparent);
    color: var(--nv-stat-trend-tone);
    font-size: var(--nv-type-footnote-size, 12px);
    font-weight: var(--nv-type-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
  }

  .nv-o-stat__delta svg { flex: none; }

  .nv-o-stat--trend .nv-o-stat__value {
    margin: 12px 0 0;
    color: var(--nv-text-primary, var(--dash-text));
    font-size: clamp(22px, 7cqi, 30px);
    font-weight: var(--nv-type-numeric-title-weight, 600);
    font-variant-numeric: var(--nv-type-numeric-figures, tabular-nums);
    line-height: 1.1;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  .nv-o-stat--trend .nv-o-stat__meta {
    margin: 4px 0 0;
    color: var(--nv-text-tertiary, var(--dash-text-subtle));
    font-size: var(--nv-type-footnote-size, 12px);
    line-height: var(--nv-type-footnote-line, 16px);
    letter-spacing: var(--nv-type-footnote-tracking, 0);
  }

  .nv-o-stat__trend {
    margin-top: auto;
    padding-top: 16px;
  }

  .nv-o-stat__trend-plot {
    position: relative;
    height: 48px;
  }

  .nv-o-stat__trend-area,
  .nv-o-stat__trend-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .nv-o-stat__trend-area {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--nv-stat-trend-tone) 22%, transparent), transparent 92%);
  }

  .nv-o-stat__trend-line {
    overflow: visible;
  }

  .nv-o-stat__trend-line polyline {
    fill: none;
    stroke: var(--nv-stat-trend-tone);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .nv-o-stat__trend-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--nv-stat-trend-tone);
    box-shadow: 0 0 0 3px var(--nv-stat-surface, var(--nv-section-surface, var(--dash-card, #111)));
  }

  /* Hover: one column per point. The hovered column shows a guide line, a marker on the curve and a tooltip
     beside it (value, then period), on the side with more room so it never covers the copy above, matching the product chart tooltip. No script: plain :hover. */
  .nv-o-stat__trend-hit {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
  }

  .nv-o-stat__trend-hit::before,
  .nv-o-stat__trend-hit::after {
    content: "";
    position: absolute;
    left: var(--nv-trend-x);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
  }

  .nv-o-stat__trend-hit::before {
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--nv-text-primary, var(--dash-text, #eee)) 16%, transparent);
  }

  .nv-o-stat__trend-hit::after {
    top: var(--nv-trend-y);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--nv-stat-trend-tone);
    box-shadow: 0 0 0 3px var(--nv-stat-surface, var(--nv-section-surface, var(--dash-card, #111)));
  }

  .nv-o-stat__trend-tip {
    position: absolute;
    top: var(--nv-trend-y);
    left: var(--nv-trend-x);
    display: grid;
    gap: 2px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--dash-tooltip-bg, var(--nv-popover-bg, #1c1c1e));
    box-shadow: var(--dash-tooltip-shadow, var(--nv-popover-shadow, 0 8px 24px rgb(0 0 0 / .4)));
    opacity: 0;
    pointer-events: none;
    transform: translate(14px, -50%);
    transition: opacity 120ms ease;
    white-space: nowrap;
  }

  .nv-o-stat__trend-hit--left .nv-o-stat__trend-tip { transform: translate(calc(-100% - 14px), -50%); }

  .nv-o-stat__trend-tip-value {
    color: var(--nv-text-primary, var(--dash-text));
    font-size: var(--nv-type-callout-size, 13px);
    font-weight: var(--nv-type-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
    line-height: 16px;
  }

  .nv-o-stat__trend-tip-label {
    color: var(--nv-text-tertiary, var(--dash-text-subtle));
    font-size: var(--nv-type-caption-size, 11px);
    line-height: 14px;
  }

  .nv-o-stat__trend-hit:hover::before,
  .nv-o-stat__trend-hit:hover::after,
  .nv-o-stat__trend-hit:hover .nv-o-stat__trend-tip {
    opacity: 1;
  }


  /* The resting "latest" dot steps aside while another point is inspected. */
  .nv-o-stat__trend-plot:has(.nv-o-stat__trend-hit:hover) .nv-o-stat__trend-dot { opacity: 0; }

  @media (prefers-reduced-motion: reduce) {
    .nv-o-stat__trend-hit::before,
    .nv-o-stat__trend-hit::after,
    .nv-o-stat__trend-tip { transition: none; }
  }

  .nv-o-stat--trend.nv-o-stat--loading .nv-o-stat__trend-plot::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 6px;
    border-radius: 999px;
    background: var(--nv-table-well, var(--dash-surface-hover));
  }

  .nv-o-stat--trend.nv-o-stat--loading .nv-o-stat__delta {
    background: var(--nv-table-well, var(--dash-surface-hover));
    color: transparent;
  }
}