/* shadcn layer (2026-10-06) — the component anatomy and conventions of shadcn/ui, mapped onto OUR tokens.
   Source read: registry/new-york-v4 ui/card.tsx, ui/badge.tsx, ui/separator.tsx, ui/skeleton.tsx, blocks/dashboard-01 section-cards.tsx, docs/components/chart.
   Taken: card anatomy (header = title + description + action slot, content, footer), outline badge for deltas, separator, skeleton, chart conventions
   (horizontal grid only, no axis lines, tooltip with a colour indicator, legend under the plot). Not taken: shadcn's colours, radius, shadows, fonts, dark theme. */

:root {
  /* shadcn semantic names → DGA / portal tokens */
  --sc-background: var(--background-neutral-50);
  --sc-foreground: var(--text-default);
  --sc-card: var(--background-white);
  --sc-card-foreground: var(--text-display);
  --sc-muted: var(--background-neutral-100);
  --sc-muted-foreground: var(--text-secondary);
  --sc-accent: var(--background-neutral-50);
  --sc-border: var(--border-neutral-secondary);
  --sc-input: var(--border-neutral-primary);
  --sc-ring: var(--border-primary);
  --sc-primary: var(--button-bg-black-default);
  --sc-primary-foreground: var(--text-oncolor-primary);
  --sc-destructive: var(--tag-bg-error);
  --sc-success: var(--background-success);
  --sc-radius: var(--radius-md);           /* 8px, the portal panel radius */
  --sc-card-spacing: 20px;                 /* shadcn py-6/px-6 = 24; the portal panel is 20 */
}

/* ---- Card: flex column, gap, header grid with an action slot ---- */
.sc-card { display: flex; flex-direction: column; gap: 16px; padding: var(--sc-card-spacing) 0; background: var(--sc-card); color: var(--sc-card-foreground); border-radius: var(--sc-radius); }
.sc-card-header { display: grid; grid-template-rows: auto auto; grid-auto-rows: min-content; align-items: start; gap: 4px; padding: 0 var(--sc-card-spacing); }
.sc-card-header:has(.sc-card-action) { grid-template-columns: minmax(0, 1fr) auto; }
.sc-card-title { font: 600 16px/24px var(--font-family-text); color: var(--sc-card-foreground); }
.sc-card-title.is-lg { font: 700 20px/30px var(--font-family-text); }
.sc-card-description { font: 400 14px/20px var(--font-family-text); color: var(--sc-muted-foreground); }
.sc-card-action { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; }
.sc-card-content { padding: 0 var(--sc-card-spacing); }
.sc-card-footer { display: flex; align-items: center; gap: 8px; padding: 0 var(--sc-card-spacing); }
.sc-card-footer.is-col { flex-direction: column; align-items: flex-start; gap: 6px; }
.sc-card-footer.has-rule { padding-top: 16px; border-top: 1px solid var(--border-neutral-tertiary); }

/* ---- Badge: rounded-full, px-2 py-0.5, text-xs medium, svg 12px ---- */
.sc-badge { display: inline-flex; width: fit-content; flex: none; align-items: center; justify-content: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; border: 1px solid transparent; font: 500 12px/16px var(--font-family-text); white-space: nowrap; }
.sc-badge .ic { width: 12px; height: 12px; }
.sc-badge--default { background: var(--sc-primary); color: var(--sc-primary-foreground); }
.sc-badge--secondary { background: var(--sc-muted); color: var(--text-primary-paragraph); }
.sc-badge--destructive { background: var(--sc-destructive); color: #fff; }
.sc-badge--outline { border-color: var(--sc-border); color: var(--sc-foreground); background: transparent; }
.sc-badge--ghost { background: transparent; color: var(--sc-foreground); }
.sc-badge--outline.is-up .ic { color: var(--tag-text-success); } .sc-badge--outline.is-down .ic { color: var(--tag-bg-error); }
.sc-badge--outline.is-up.is-bad .ic { color: var(--tag-bg-error); } .sc-badge--outline.is-down.is-good .ic { color: var(--tag-text-success); }

/* ---- Separator, Skeleton ---- */
.sc-separator { flex: none; background: var(--sc-border); height: 1px; width: 100%; }
.sc-separator--vertical { width: 1px; height: 100%; }
.sc-skeleton { border-radius: var(--radius-sm); background: var(--sc-accent); animation: sc-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes sc-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .sc-skeleton { animation: none; } }

/* ---- Chart tooltip (ChartTooltipContent): small panel, indicator dot, label/value rows ---- */
.sc-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 128px; padding: 6px 10px; border-radius: 6px; background: var(--background-white); border: 1px solid var(--border-neutral-secondary); box-shadow: 0 4px 12px rgba(16, 24, 40, .08); font: 400 12px/18px var(--font-family-text); color: var(--text-display); }
.sc-tip-label { font-weight: 500; margin-bottom: 4px; }
.sc-tip-row { display: flex; align-items: center; gap: 6px; }
.sc-tip-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.sc-tip-row b { margin-inline-start: auto; font-weight: 500; font-variant-numeric: tabular-nums; }