/* dash-moneyflow.css — animated money-flow ledger dashboard.
 *
 * Aesthetic flavor: CENTRAL-BANK LEDGER.
 *
 * Distinct from all 13+ existing flavors:
 *   - cyberpunk Scandinavian        (index)
 *   - utilitarian dashboard         (panel)
 *   - Swedish-newspaper Q&A         (aedln0d chat)
 *   - engineering schematic         (aedln0d kg, dash-retrieval)
 *   - terminal sparklines           (healthlog)
 *   - warm-paper editorial          (docs)
 *   - green-CRT                     (dash-agents)
 *   - bioluminescent forest         (dash-aedlnet)
 *   - procurement-ledger            (dash-bidpipeline)   — navy on cream
 *   - operations-cockpit            (dash-signerqueue)
 *   - mission-control radar         (dash)
 *   - financial-terminal            (dash-cost-burn)     — amber on slate
 *   - terminal-octagonal            (aiaas)
 *   - stargate-orbit                (dash-fitness-router)
 *
 * "Central-bank ledger" is the Federal Reserve / Bank of England /
 * Riksbank annual-report school: ivory-paper background (#f6f1e4),
 * deep-green ledger ink (#0e3b2c) — the color used by central banks
 * for bond-coupons since the 19th century — burgundy accents for
 * outflow stamps, gold leaf rule for headlines. Heavy serif headline
 * weight via Familjen Grotesk bold, IBM Plex Mono for every number,
 * subtle warm-green shadow gradients on the timeline bars.
 *
 * Counter to the procurement-ledger (which is brutalist clerk's desk
 * with navy ink), this is the *bank vault's* ledger: warmer paper,
 * deeper greens, gold-leaf detail. No drop-shadows except the bars
 * themselves. Hairline rules in deep green only.
 */

.mf-page {
  --mf-paper:        #f6f1e4;    /* ivory ledger paper */
  --mf-paper-soft:   #efe9d8;    /* alt-row banding */
  --mf-paper-deep:   #e6dec6;    /* deeper bands */
  --mf-paper-mute:   #d9d0b5;

  --mf-ink:          #0e3b2c;    /* deep central-bank green */
  --mf-ink-soft:     #2b5a4a;
  --mf-ink-faint:    #6b8579;
  --mf-ink-mute:     #97a89c;

  --mf-gold:         #a87f2e;    /* gold-leaf rule */
  --mf-gold-soft:    #c9a458;
  --mf-burgundy:     #7a1f24;    /* outflow stamp */
  --mf-burgundy-soft:#a14248;

  --mf-green:        #1f6a4c;    /* inflow stamp */
  --mf-green-soft:   #4a9176;

  /* Surface palette — used for stacked bars + sankey edges.
   * Each is a desaturated jewel-tone fitting on ivory paper. */
  --mf-s-aedlnet:        #2a5a78;   /* steel blue */
  --mf-s-aiaas-virdev:   #6e3a8f;   /* aubergine */
  --mf-s-aiaas-virstaff: #a86b1f;   /* bronze */
  --mf-s-treasury:       #0e3b2c;   /* same as ink */
  --mf-s-ops:            #6b5a23;   /* olive */
  --mf-s-demo:           #97a89c;   /* mute */

  --mf-line:         #cabd96;
  --mf-line-soft:    #ddd0a5;
  --mf-line-strong:  #0e3b2c;

  background: var(--mf-paper);
  color: var(--mf-ink);
  font-family: "Familjen Grotesk", -apple-system, sans-serif;
  min-height: 100vh;
}

/* ── HUD overrides ──────────────────────────────────────────── */

.mf-hud {
  background: var(--mf-paper);
  color: var(--mf-ink);
  border-bottom: 1.5px solid var(--mf-ink);
  box-shadow: 0 1px 0 0 var(--mf-gold);
}
.mf-hud .callsign,
.mf-hud .hud-mode {
  color: var(--mf-ink);
  font-family: "Chakra Petch", monospace;
  letter-spacing: 0.05em;
}
.mf-hud .hud-sep,
.mf-hud .hud-sub {
  color: var(--mf-ink-soft);
}
.mf-hud .hud-pill {
  background: var(--mf-paper-soft);
  color: var(--mf-ink);
  border: 1px solid var(--mf-ink);
  border-radius: 0;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.mf-hud .hud-pill.hud-link {
  background: var(--mf-ink);
  color: var(--mf-paper);
}
.mf-hud .mf-state-pill[data-state="offline-demo"] {
  background: var(--mf-burgundy);
  color: var(--mf-paper);
  border-color: var(--mf-burgundy);
}
.mf-hud .mf-state-pill[data-state="live"] {
  background: var(--mf-green);
  color: var(--mf-paper);
  border-color: var(--mf-green);
}
.mf-hud .mf-state-pill[data-state="live-empty"] {
  background: var(--mf-gold);
  color: var(--mf-paper);
  border-color: var(--mf-gold);
}

/* ── Stage / panel grid ────────────────────────────────────── */

.mf-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 18px;
  padding: 20px;
  max-width: 1500px;
  margin: 0 auto;
}
.mf-headline-panel { grid-column: 1 / -1; }
.mf-timeline-panel { grid-column: 1 / -1; }
.mf-sankey-panel   { grid-column: 1 / 2; }
.mf-tail-panel     { grid-column: 2 / 3; }

@media (max-width: 980px) {
  .mf-stage {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 14px;
  }
  .mf-sankey-panel,
  .mf-tail-panel {
    grid-column: 1 / -1;
  }
}

.mf-panel {
  background: var(--mf-paper-soft);
  border: 1px solid var(--mf-ink);
  border-top: 3px double var(--mf-ink);
  padding: 14px 16px 16px 16px;
  position: relative;
}
.mf-panel::before {
  /* Subtle gold-leaf rule under the panel head */
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 38px;
  height: 1px;
  background: var(--mf-gold);
  opacity: 0.55;
}
.mf-panel-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.mf-panel-tag {
  font-family: "IBM Plex Mono", monospace;
  color: var(--mf-gold);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}
.mf-panel-title {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  color: var(--mf-ink);
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mf-panel-sub {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  color: var(--mf-ink-soft);
  margin-left: auto;
  letter-spacing: 0.05em;
}
.mf-loading {
  font-family: "IBM Plex Mono", monospace;
  color: var(--mf-ink-faint);
  font-style: italic;
  font-size: 0.85rem;
  margin: 8px 0;
}

/* ── Panel 1: headline ─────────────────────────────────────── */

.mf-headline-region {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) {
  .mf-headline-region { grid-template-columns: 1fr; }
}

.mf-net-block {
  border: 1px solid var(--mf-line);
  padding: 12px 14px;
  background: var(--mf-paper);
}
.mf-net-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: var(--mf-ink-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mf-net-value {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 2.4rem;
  font-weight: 600;
  margin-top: 4px;
  color: var(--mf-ink);
  letter-spacing: -0.01em;
}
.mf-net-value.mf-pos { color: var(--mf-green); }
.mf-net-value.mf-neg { color: var(--mf-burgundy); }
.mf-net-bar {
  margin-top: 10px;
  height: 14px;
  background: var(--mf-paper-deep);
  border: 1px solid var(--mf-ink-soft);
  display: flex;
  overflow: hidden;
}
.mf-net-bar-in  { background: var(--mf-green); }
.mf-net-bar-out { background: var(--mf-burgundy); }
.mf-net-breakdown {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  color: var(--mf-ink-soft);
}
.mf-net-breakdown .mf-in   { color: var(--mf-green); font-weight: 600; }
.mf-net-breakdown .mf-out  { color: var(--mf-burgundy); font-weight: 600; }

.mf-queue-block {
  border: 1px solid var(--mf-line);
  padding: 12px 14px;
  background: var(--mf-paper);
}
.mf-queue-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dotted var(--mf-line);
}
.mf-queue-row:last-child { border-bottom: none; }
.mf-queue-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  color: var(--mf-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mf-queue-num {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--mf-ink);
}
.mf-queue-num.mf-pending { color: var(--mf-gold); }
.mf-queue-num.mf-failed  { color: var(--mf-burgundy); }
.mf-queue-num.mf-settled { color: var(--mf-green); }

/* ── Panel 2: timeline ─────────────────────────────────────── */

.mf-timeline-region {
  position: relative;
  padding: 6px 4px 4px 4px;
}
.mf-timeline-svg {
  display: block;
  width: 100%;
  height: 240px;
  background: var(--mf-paper);
  border: 1px solid var(--mf-line);
}
.mf-bar-stack rect {
  shape-rendering: crispEdges;
  filter: drop-shadow(0 0 0.5px rgba(14, 59, 44, 0.4));
}
.mf-bar-stack rect:hover {
  filter: drop-shadow(0 0 2px rgba(14, 59, 44, 0.6));
  outline: 1px solid var(--mf-ink);
}
.mf-axis-tick {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  fill: var(--mf-ink-soft);
}
.mf-axis-line {
  stroke: var(--mf-ink-soft);
  stroke-width: 0.8;
}
.mf-axis-grid {
  stroke: var(--mf-line);
  stroke-width: 0.5;
  stroke-dasharray: 2 3;
}
.mf-cursor {
  stroke: var(--mf-burgundy);
  stroke-width: 1.5;
  pointer-events: none;
}
.mf-cursor-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  fill: var(--mf-burgundy);
  font-weight: 600;
}

.mf-timeline-ctl {
  display: flex;
  gap: 6px;
  margin-left: 12px;
}
.mf-btn {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  border: 1px solid var(--mf-ink);
  background: var(--mf-paper);
  color: var(--mf-ink);
  padding: 3px 10px;
  cursor: pointer;
  letter-spacing: 0.04em;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}
.mf-btn:hover {
  background: var(--mf-ink);
  color: var(--mf-paper);
}
.mf-btn[aria-pressed="true"] {
  background: var(--mf-burgundy);
  color: var(--mf-paper);
  border-color: var(--mf-burgundy);
}

.mf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  color: var(--mf-ink-soft);
}
.mf-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mf-legend-swatch {
  width: 10px;
  height: 10px;
  border: 1px solid var(--mf-ink);
  display: inline-block;
}

.mf-tooltip {
  position: absolute;
  background: var(--mf-paper);
  border: 1.5px solid var(--mf-ink);
  padding: 8px 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: var(--mf-ink);
  pointer-events: none;
  z-index: 10;
  min-width: 180px;
  box-shadow: 2px 2px 0 var(--mf-gold);
}
.mf-tooltip .mf-tt-date {
  font-weight: 600;
  border-bottom: 1px solid var(--mf-line);
  padding-bottom: 4px;
  margin-bottom: 4px;
  display: block;
}
.mf-tooltip .mf-tt-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.mf-tooltip .mf-tt-row .mf-tt-swatch {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  border: 1px solid var(--mf-ink);
}

/* ── Panel 3: sankey ────────────────────────────────────────── */

.mf-sankey-region {
  padding: 6px 4px;
}
.mf-sankey-svg {
  display: block;
  width: 100%;
  height: 360px;
  background: var(--mf-paper);
  border: 1px solid var(--mf-line);
}
.mf-sankey-node rect {
  fill: var(--mf-paper-deep);
  stroke: var(--mf-ink);
  stroke-width: 1;
}
.mf-sankey-node text {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  fill: var(--mf-ink);
}
.mf-sankey-link {
  fill-opacity: 0.55;
  transition: fill-opacity 0.15s;
}
.mf-sankey-link:hover {
  fill-opacity: 0.85;
}

/* ── Panel 4: live tail ─────────────────────────────────────── */

.mf-tail-region {
  overflow-x: auto;
  border: 1px solid var(--mf-line);
  background: var(--mf-paper);
  max-height: 380px;
  overflow-y: auto;
}
.mf-tail-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: var(--mf-ink);
}
.mf-tail-table thead th {
  background: var(--mf-paper-deep);
  color: var(--mf-ink);
  font-weight: 600;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--mf-ink);
  position: sticky;
  top: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.mf-tail-table tbody tr {
  border-bottom: 1px dotted var(--mf-line);
}
.mf-tail-table tbody tr:nth-child(even) {
  background: var(--mf-paper-soft);
}
.mf-tail-table tbody td {
  padding: 5px 8px;
  vertical-align: top;
  white-space: nowrap;
}
.mf-tail-table .mf-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mf-tail-table .mf-num.mf-pos { color: var(--mf-green); }
.mf-tail-table .mf-num.mf-neg { color: var(--mf-burgundy); }
.mf-tail-status {
  font-size: 0.7rem;
  padding: 1px 6px;
  border: 1px solid var(--mf-ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mf-tail-status[data-s="settled"]  { background: var(--mf-green); color: var(--mf-paper); border-color: var(--mf-green); }
.mf-tail-status[data-s="pending"]  { background: var(--mf-gold); color: var(--mf-paper); border-color: var(--mf-gold); }
.mf-tail-status[data-s="failed"]   { background: var(--mf-burgundy); color: var(--mf-paper); border-color: var(--mf-burgundy); }
.mf-tail-status[data-s="refunded"] { background: var(--mf-paper-mute); color: var(--mf-ink); }
.mf-tail-surf-chip {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 5px;
  border: 1px solid var(--mf-ink);
  vertical-align: baseline;
}

/* ── Footer ─────────────────────────────────────────────────── */

.mf-foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--mf-ink);
  padding-top: 10px;
  margin-top: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: var(--mf-ink-soft);
  letter-spacing: 0.03em;
}
.mf-foot code {
  background: var(--mf-paper-deep);
  color: var(--mf-ink);
  padding: 1px 5px;
}
.mf-foot-stamp {
  font-family: "Familjen Grotesk", sans-serif;
  font-style: italic;
  color: var(--mf-gold);
  margin-top: 4px;
}

/* ── Offline notice banner ──────────────────────────────────── */

.mf-offline-banner {
  grid-column: 1 / -1;
  background: var(--mf-paper-deep);
  border: 1.5px dashed var(--mf-burgundy);
  padding: 10px 14px;
  color: var(--mf-burgundy);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.mf-offline-banner strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Mobile responsive sub-720 ──────────────────────────────── */

@media (max-width: 720px) {
  .mf-net-value { font-size: 1.7rem; }
  .mf-queue-num { font-size: 1.1rem; }
  .mf-panel-title { font-size: 0.95rem; }
  .mf-timeline-svg { height: 180px; }
  .mf-sankey-svg { height: 260px; }
  .mf-tail-table { font-size: 0.72rem; }
  .mf-tail-table thead th { font-size: 0.66rem; padding: 5px 6px; }
  .mf-tail-table tbody td { padding: 4px 6px; }
}