/* =========================================================================
   MANAGER REQUEST DEMO (#managerRequestDemo).
   See src/components/ManagerRequestDemo.astro for the storyboard.
   Timeline: public/js/manager-request-demo.js toggles `is-*` classes.

   A single steady scene, no crossfade — two panels side by side (same
   split layout as MarginBridgeDemo's chat/model panes), so the manager's
   filtered view and Finance's consolidated one are both visible the
   whole time. Same --xxx-canvas/card/border/accent palette (product
   likeness) as every other demo on the site.
   ========================================================================= */

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

.mrq__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--mrq-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.mrq.is-out .mrq__stage { opacity: 0; }

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

.mrq__layout { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 12px 14px; }

.mrqPanel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mrqPanel--mgr { padding-right: 10px; border-right: 1px solid var(--mrq-line); }

.mrqHead { margin: 0 0 7px; font-size: 10px; font-weight: 600; color: var(--mrq-ink); }

/* ---------- manager panel — a short flex-row list. ---------- */
.mrqList { background: var(--mrq-card); border: 1px solid var(--mrq-border); border-radius: 8px; overflow: hidden; }
.mrqRow {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 8px; font-size: 8.5px; color: var(--mrq-ink2);
  border-bottom: 1px solid var(--mrq-line);
  transition: background .3s ease;
}
.mrqList > .mrqRow:last-child { border-bottom: none; }
.mrqRow__role { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-weight: 600; color: var(--mrq-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrqRow__name { font-size: 7.5px; font-weight: 500; color: var(--mrq-ink2); }
.mrqRow__status { flex: none; font-size: 7.5px; font-weight: 600; color: var(--mrq-ink2); }
.mrqRow__status--new { color: var(--mrq-accent); }

/* the draft row — empty until the JS types into it. */
.mrqRow--draft { opacity: .35; }
.mrq.is-drafting .mrqRow--draft { opacity: 1; background: var(--mrq-accent-soft); }
.mrq.is-submitted .mrqRow--draft { opacity: 1; background: var(--mrq-green-soft); }
.mrq.is-submitted .mrqRow--draft .mrqRow__status--new { color: var(--mrq-green); }

.mrqCaret {
  display: inline-block; width: 1px; height: 9px; margin-left: 1px;
  background: var(--mrq-accent); vertical-align: middle;
  animation: mrqBlink 1s step-end infinite;
}
.mrq.is-submitted .mrqCaret, .mrq:not(.is-drafting) .mrqCaret { opacity: 0; }
@keyframes mrqBlink { 50% { opacity: 0; } }

.mrqAction {
  align-self: flex-start; margin-top: 9px;
  font-size: 9px; font-weight: 600; color: var(--mrq-accent);
  background: var(--mrq-accent-soft); border: 1px solid #CFC7EF; border-radius: 999px;
  padding: 5px 10px;
  transition: transform .15s ease, opacity .3s ease;
}
.mrq.is-press-submit .mrqAction { transform: scale(.94); }
.mrq.is-submitted .mrqAction { opacity: 0; pointer-events: none; }

/* ---------- finance panel — department-level open-req counts. ---------- */
.mrqDeptList { background: var(--mrq-card); border: 1px solid var(--mrq-border); border-radius: 8px; overflow: hidden; }
.mrqDeptRow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 9px; font-size: 9px; color: var(--mrq-ink2);
  border-bottom: 1px solid var(--mrq-line);
  transition: background .3s ease, color .3s ease;
}
.mrqDeptList > .mrqDeptRow:last-child { border-bottom: none; }
.mrqDeptRow span:last-child { font-weight: 700; color: var(--mrq-ink); font-variant-numeric: tabular-nums; }
.mrqDeptRow.is-flash { background: var(--mrq-accent-soft); }
.mrqDeptRow.is-flash span:last-child { color: var(--mrq-accent); }

.mrqTotal {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; padding: 7px 9px;
  background: var(--mrq-head); border: 1px solid var(--mrq-border); border-radius: 8px;
  font-size: 9px; font-weight: 600; color: var(--mrq-ink2);
  transition: background .3s ease, border-color .3s ease;
}
.mrqTotal span:last-child { font-size: 11px; font-weight: 700; color: var(--mrq-ink); font-variant-numeric: tabular-nums; }
.mrq.is-total-flash .mrqTotal { background: var(--mrq-accent-soft); border-color: #CFC7EF; }
.mrq.is-total-flash .mrqTotal span:last-child { color: var(--mrq-accent); }

@media (max-width: 460px) {
  .mrq__stage { aspect-ratio: auto; min-height: 460px; }
  .mrq__layout { flex-direction: column; gap: 12px; }
  .mrqPanel--mgr { padding-right: 0; padding-bottom: 10px; border-right: 0; border-bottom: 1px solid var(--mrq-line); }
}