/* =========================================================================
   QUOTA LOAD DEMO (#quotaLoadDemo).
   See src/components/QuotaLoadDemo.astro for the storyboard.
   Timeline: public/js/quota-load-demo.js toggles `is-*` classes and
   positions `.qld__cursor` at runtime.

   A single steady scene (no crossfade — same pattern as BudgetOwnerDemo):
   the load calculation as a card-style table, one editable assumption
   column, everything downstream of it recalculating.

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

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

/* 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 pattern has hit before). */
.qld__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--qld-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.qld.is-out .qld__stage { opacity: 0; }

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

.qld__pane {
  flex: 1; min-height: 0; min-width: 0; padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: center;
}

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

/* ---------- the calculation table — same card-style grid as every other
   table demo on the site. ---------- */
.qldGrid {
  display: grid; grid-template-columns: 1fr 62px 58px 74px;
  background: var(--qld-card); border: 1px solid var(--qld-border); border-radius: 8px;
  overflow: hidden; max-width: 100%;
}
.qldCell {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 7px 8px; font-size: 9.5px; color: var(--qld-ink2);
  border-bottom: 1px solid var(--qld-line); border-right: 1px solid var(--qld-line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .3s ease, outline-color .3s ease, color .3s ease;
}
.qldGrid .qldCell:nth-child(4n) { border-right: none; }
.qldGrid > .qldCell:nth-last-child(-n+4) { border-bottom: none; }
.qldCell--head { background: var(--qld-head); font-weight: 500; border-bottom: 1px solid var(--qld-border); }
.qldCell--label { justify-content: flex-start; font-weight: 600; color: var(--qld-ink); gap: 5px; }
.qldCell--val { font-variant-numeric: tabular-nums; }
.qldCell--out { font-weight: 700; color: var(--qld-ink); }
.qldCell--total { background: var(--qld-head); font-weight: 700; color: var(--qld-ink); border-top: 1px solid var(--qld-border); }

/* the rep type, riding alongside the segment name. */
.qldCell__type {
  flex: none; font-size: 7.5px; font-weight: 600; color: var(--qld-ink2);
  background: var(--qld-head); border: 1px solid var(--qld-line); border-radius: 3px;
  padding: 1px 4px; letter-spacing: .03em;
}

/* the editable assumption column reads as an input, not a result. */
.qldCell--input { color: var(--qld-ink); background: #FCFCFE; box-shadow: inset 0 0 0 1px rgba(106, 91, 198, .07); }
.qldCell--input.is-editing {
  outline: 1.5px solid var(--qld-accent); outline-offset: -1.5px;
  background: var(--qld-accent-soft); color: var(--qld-accent); font-weight: 700;
  animation: qldCellPulse .8s ease-out;
}
@keyframes qldCellPulse {
  0% { box-shadow: 0 0 0 0 rgba(106, 91, 198, .45); }
  70% { box-shadow: 0 0 0 7px rgba(106, 91, 198, 0); }
  100% { box-shadow: 0 0 0 0 rgba(106, 91, 198, 0); }
}
/* a result cell the moment it recalculates. */
.qldCell--out.is-flash {
  outline: 1.5px solid var(--qld-accent); outline-offset: -1.5px;
  background: var(--qld-accent-soft); color: var(--qld-accent);
}

/* ---------- coverage chip — the assigned total expressed against the
   approved number, so the load is never just an absolute figure. ---------- */
.qldFoot { display: flex; justify-content: flex-end; margin-top: 9px; }
.qldCoverage {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9.5px; color: var(--qld-ink2);
  background: var(--qld-accent-soft); border: 1px solid #CFC7EF; border-radius: 999px;
  padding: 4px 10px;
  transition: transform .3s ease;
}
.qldCoverage b { font-size: 10.5px; font-weight: 700; color: var(--qld-accent); font-variant-numeric: tabular-nums; }
.qld.is-coverage-flash .qldCoverage { transform: scale(1.06); }

/* ---------- audit line — the change, who made it, and the way back. */
.qldAudit {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 7px 9px; background: var(--qld-card);
  border: 1px solid var(--qld-border); border-radius: 8px;
  font-size: 9px; color: var(--qld-ink2);
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}
.qld.is-logged .qldAudit { opacity: 1; transform: none; }
.qldAudit i {
  width: 15px; height: 15px; border-radius: 50%; flex: none; font-style: normal;
  font-size: 6px; font-weight: 700; color: #fff; background: var(--c);
  display: inline-flex; align-items: center; justify-content: center;
}
.qldAudit b { color: var(--qld-ink); font-weight: 600; }
.qldAudit > span:not(.qldAudit__revert) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qldAudit__revert {
  margin-left: auto; flex: none; font-weight: 600; color: var(--qld-accent);
  border-bottom: 1px solid rgba(106, 91, 198, .35);
}

/* ---------- cursor — positioned at runtime (JS sets left/top in px via
   getBoundingClientRect against .qld__stage). ---------- */
.qld__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;
}
.qld.is-cursor-visible .qld__cursor { opacity: 1; }

/* ---------- responsive — the table keeps its shape, the stage just grows
   taller so nothing has to be cut. ---------- */
@media (max-width: 460px) {
  .qld__stage { aspect-ratio: auto; min-height: 430px; }
  .qldGrid { grid-template-columns: 1fr 52px 50px 64px; }
  .qldCell { padding: 6px 6px; font-size: 9px; }
}