/* =========================================================================
   BUDGET VARIANCE DEMO (#budgetVarianceDemo).
   See src/components/BudgetVarianceDemo.astro for the storyboard.
   Timeline: public/js/budget-variance-demo.js toggles `is-*` classes and
   positions `.bvd__cursor` at runtime.

   Four full-width scenes crossfade (finalized budget → actuals feed →
   variance overview → drill-down) — same single-scene-at-a-time pattern
   every demo on this page uses, since it's the only one that scales to
   any width without a per-breakpoint layout rework.

   The --bvd-* palette mirrors the PRODUCT (webapp_v3 src/styles/_theme.scss),
   same likeness rules and exact values as every other demo on this page.
   ========================================================================= */

.bvd {
  --bvd-canvas: #FAF9F5;
  --bvd-card: #FFFFFF;
  --bvd-border: #DBDBDE;
  --bvd-line: #EAEAEA;
  --bvd-head: #F6F6F7;
  --bvd-ink: #2B2B2B;
  --bvd-ink2: #777777;
  --bvd-accent: #6A5BC6;
  --bvd-accent-soft: #ECECFF;
  --bvd-neutral: #706F6A;
  --bvd-neutral-soft: #E6E5E0;
}

/* standard product-demo dimensions (matches every other demo's stage —
   width:100% keeps aspect-ratio from computing width off the min-height
   floor in a narrow container, the bug this page has hit before). */
.bvd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--bvd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.bvd.is-out .bvd__stage { opacity: 0; }

.bvd__topBar {
  flex: none; font-size: 11px; font-weight: 600; color: var(--bvd-ink);
  padding: 12px 14px 9px; border-bottom: 1px solid var(--bvd-line);
  white-space: nowrap;
}

.bvd__scene { position: relative; flex: 1; min-height: 0; }
.bvd__sceneStack { position: absolute; inset: 0; }

/* each scene fills the whole stage and crossfades in/out — only one is
   opaque at a time, driven by is-scene-2/3/4 on the root (scene 1 is the
   default, unmarked state). */
.bvd__scenePanel {
  position: absolute; inset: 0; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .5s ease;
}
.bvd__scenePanel--s1 { opacity: 1; }
.bvd.is-scene-2 .bvd__scenePanel--s1,
.bvd.is-scene-3 .bvd__scenePanel--s1,
.bvd.is-scene-4 .bvd__scenePanel--s1 { opacity: 0; }
.bvd.is-scene-2 .bvd__scenePanel--s2 { opacity: 1; }
.bvd.is-scene-3 .bvd__scenePanel--s3 { opacity: 1; }
.bvd.is-scene-4 .bvd__scenePanel--s4 { opacity: 1; }

.bvd__pane { flex: 1; min-height: 0; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; }

/* ---------- panel header ---------- */
.bvdHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bvdHead__title2 { font-size: 12px; font-weight: 600; color: var(--bvd-ink); }
.bvdHead__sub { font-size: 9.5px; color: var(--bvd-ink2); }

/* ---------- card grid — same card-style table as the rest of the page ---------- */
.bvdGrid {
  display: grid; grid-template-columns: 1fr 90px;
  background: var(--bvd-card); border: 1px solid var(--bvd-border); border-radius: 8px;
  overflow: hidden; max-width: 100%;
}
.bvdGrid--3col { grid-template-columns: 1fr 70px 70px 70px; }
.bvdCell {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 6px 8px; font-size: 9.5px; color: var(--bvd-ink2);
  border-bottom: 1px solid var(--bvd-line); border-right: 1px solid var(--bvd-line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .3s ease, outline-color .3s ease;
}
.bvdGrid .bvdCell:nth-child(2n) { border-right: none; }
.bvdGrid--3col .bvdCell:nth-child(4n) { border-right: none; }
.bvdCell--head { background: var(--bvd-head); font-weight: 500; border-bottom: 1px solid var(--bvd-border); }
.bvdCell--label { justify-content: flex-start; font-weight: 600; color: var(--bvd-ink); }
.bvdCell--val { font-variant-numeric: tabular-nums; }
.bvdCell--flag { font-weight: 700; color: var(--bvd-accent); position: relative; }
.bvd.is-cell-active .bvdCell--flag {
  outline: 1.5px solid var(--bvd-accent); outline-offset: -1.5px;
  background: var(--bvd-accent-soft);
}

/* ---------- action pill — cursor-clickable, matches the composer send
   button's visual weight elsewhere on this page. ---------- */
.bvdAction {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  margin-top: 10px; font-size: 9.5px; font-weight: 600; color: var(--bvd-accent);
  background: var(--bvd-accent-soft); border: 1px solid #CFC7EF; border-radius: 999px;
  padding: 6px 11px;
  transition: transform .15s ease;
}
.bvd.is-press-roll .bvdAction, .bvd.is-press-tag .bvdAction { transform: scale(.94); }
.bvd__arrow { font-style: normal; }

/* ---------- scene 2: transaction feed ---------- */
.bvdFeed { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bvdFeedRow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bvd-card); border: 1px solid var(--bvd-border); border-radius: 6px;
  padding: 7px 10px; font-size: 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.bvdFeedRow.is-shown { opacity: 1; transform: none; }
.bvdFeedRow__vendor { color: var(--bvd-ink); font-weight: 500; }
.bvdFeedRow__amt { color: var(--bvd-ink2); font-variant-numeric: tabular-nums; }
.bvdFeedTotal {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bvd-border);
  font-size: 10.5px; font-weight: 700; color: var(--bvd-ink);
}
.bvdFeedTotal span:last-child { font-variant-numeric: tabular-nums; }

/* ---------- scene 3: dashboard stats + variance chart ---------- */
.bvdStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.bvdStat {
  background: var(--bvd-card); border: 1px solid var(--bvd-border); border-radius: 8px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 3px;
}
.bvdStat__label { font-size: 8.5px; color: var(--bvd-ink2); }
.bvdStat__val { font-size: 11px; font-weight: 700; color: var(--bvd-ink); }
.bvdStat__val--good { color: var(--bvd-neutral); }
.bvdStat__val--bad { color: var(--bvd-accent); }

.bvdChart {
  margin-top: 12px; display: flex; flex-direction: column; gap: 7px;
  background: var(--bvd-card); border: 1px solid var(--bvd-border); border-radius: 8px; padding: 10px;
}
.bvdBarRow { display: grid; grid-template-columns: 88px 1fr 44px; align-items: center; gap: 8px; }
.bvdBarRow__label { font-size: 9px; color: var(--bvd-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bvdBarRow__track { position: relative; height: 8px; background: var(--bvd-head); border-radius: 3px; overflow: hidden; }
.bvdBarRow__bar {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 3px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.bvd.is-chart-grown .bvdBarRow__bar { width: var(--w); }
.bvdBarRow__bar.is-over { background: var(--bvd-accent); }
.bvdBarRow__bar.is-under { background: var(--bvd-neutral); }
.bvdBarRow__val { font-size: 9px; font-variant-numeric: tabular-nums; text-align: right; color: var(--bvd-ink2); }
.bvdBarRow[data-dept="cs"] .bvdBarRow__val { color: var(--bvd-accent); font-weight: 700; }
.bvd.is-flag-pulse .bvdBarRow[data-dept="cs"] .bvdBarRow__track {
  outline: 1.5px solid var(--bvd-accent); outline-offset: 1.5px; border-radius: 4px;
}

/* ---------- scene 4: tag row ---------- */
.bvdTagRow {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 8px 10px; background: var(--bvd-accent-soft); border: 1px solid #CFC7EF; border-radius: 8px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease;
}
.bvd.is-tagged .bvdTagRow { opacity: 1; transform: none; }
.bvd.is-tagged .bvdAction[data-el="tagBtn"] { display: none; }
.bvdTagRow__owner {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: 9.5px; font-weight: 600; color: var(--bvd-ink);
}
.bvdTagRow__owner i {
  width: 16px; height: 16px; border-radius: 50%; font-style: normal;
  font-size: 6.5px; font-weight: 700; color: #fff; background: var(--c);
  display: inline-flex; align-items: center; justify-content: center;
}
.bvdTagRow__q { font-size: 9.5px; color: var(--bvd-ink); }

/* ---------- cursor — positioned at runtime (JS sets left/top in px via
   getBoundingClientRect against .bvd__sceneStack). ---------- */
.bvd__cursor {
  position: absolute; opacity: 0; pointer-events: none; z-index: 9;
  transition: left .6s cubic-bezier(.5, .05, .3, 1), top .6s cubic-bezier(.5, .05, .3, 1), opacity .3s ease;
}
.bvd.is-cursor-visible .bvd__cursor { opacity: 1; }