:root {
  --navy: #1E2A5E;
  --orange: #E65F3C;
  --bg: #f4f5f7;
  --card: #ffffff;
  --border: #e5e7eb;
  --text: #1f2937;
  --muted: #6b7280;

  /* Tokens shared with the platform design language (services/emonics-enrollment
     static/app.css and org-hierarchy). Added for the Revenue Dashboard design
     pass so this console's money surface reads as the same product family as
     the M2 board, rather than a differently-styled cousin. */
  --navy-tint: rgba(30, 42, 94, 0.06);
  --navy-tint-2: rgba(30, 42, 94, 0.11);
  --orange-tint: rgba(230, 95, 60, 0.12);
  --icon-bg: #FDF0EC;
  --ink: #1a1f36;
  --ink-soft: #3d4560;
  --muted-light: #98a0b0;
  --border-soft: #EEF0F6;
  --teal: #0e7490;
  --teal-tint: rgba(14, 116, 144, 0.10);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 14px rgba(16, 24, 40, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--navy);
  color: #fff;
  padding: 12px 24px;
  flex-wrap: wrap;
}

/* Canonical Emonics lockup (byte-identical copy of
   services/eos-portal/static/, never re-encoded or resized on disk).
   ONE dimension constrained — height only, width auto — so the intrinsic
   376x123 aspect ratio can never be altered.

   Height is 36px, not org-hierarchy's 26px: this lockup is a 3:1 TWO-LINE
   composition (mark + EMONICS(R) + "Connecting Talent" tagline), and at 26px
   the tagline and the mark's linework resolve to unreadable mush — measured
   and screenshotted, see docs/build-report-v1.md Part 6. Geometry at 26px
   was already provably correct (rendered ratio 3.057 == intrinsic 3.057 at
   every viewport width), so the visible defect was resolution, not stretch.

   flex:none on both: .brand is display:flex here (org-hierarchy's is a plain
   div), which makes the img a flex item with default flex-shrink:1 — it could
   be squeezed narrower while height stayed pinned, i.e. exactly the
   fixed-height + shrunk-width distortion this rule exists to prevent. Not
   currently triggering at any tested width, fixed as belt-and-braces. */
.brand { display: flex; align-items: center; flex: none; }
.brand img { display: block; height: 36px; width: auto; flex: none; }

nav { display: flex; gap: 14px; flex-wrap: wrap; flex: 1; }
nav a { color: #fff; text-decoration: none; font-size: 13px; opacity: 0.9; }
nav a:hover { opacity: 1; text-decoration: underline; }

.logout-form { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.who { font-size: 12px; opacity: 0.85; }
.logout-form button {
  background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff;
  border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer;
}

main { max-width: 1200px; margin: 0 auto; padding: 24px; }

h1 { font-size: 20px; color: var(--navy); margin-bottom: 4px; }
h2 { font-size: 16px; color: var(--navy); margin-top: 28px; }
.subtitle { color: var(--muted); font-size: 13px; margin-bottom: 20px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.card h3 { margin: 0 0 8px 0; color: var(--navy); font-size: 14px; }
.card .big { font-size: 26px; font-weight: 700; color: var(--orange); }
.card .meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
th { background: #fafbfc; color: var(--navy); font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
tr:hover td { background: #fafbfc; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-new { background: #e0f2e9; color: #1b7a43; }
.badge-legacy { background: #fdecea; color: #b3261e; }
.badge-unknown { background: #f1f1f1; color: #666; }
.badge-warn { background: #fff4e5; color: #b25a00; }

.data-quality-banner {
  background: #fff4e5; border: 1px solid #f0c36d; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; margin-bottom: 18px; color: #7a4b00;
}

.disclaimer { text-align: center; padding: 16px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); margin-top: 40px; }

.login-wrap { max-width: 380px; margin: 80px auto; }
.login-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); text-align: center;
}
/* Login card: height 40px matches eos-portal's own login pattern exactly
   (portal.css .login-card .logo) — legible at that size, height-only
   constraint, light-background lockup variant. Left unchanged. */
.login-card .logo { display: block; height: 40px; width: auto; margin: 0 auto 20px; }
.login-card h1 { margin-top: 0; text-align: center; }
.login-card input {
  width: 100%; padding: 10px 12px; margin: 8px 0; border: 1px solid var(--border);
  border-radius: 6px; font-size: 14px;
}
.login-card button {
  width: 100%; padding: 10px; margin-top: 8px; background: var(--navy); color: #fff;
  border: none; border-radius: 6px; font-size: 14px; cursor: pointer;
}
.login-card button:hover { background: #16204a; }
.login-msg { font-size: 12px; color: var(--muted); margin-top: 10px; min-height: 16px; }

/* A field prefilled from a row and deliberately not editable (e.g. the
   consultant on a row-originated Record-payment form) — reads as a value,
   not as an input the operator is expected to fill. */
.locked-field {
  display: inline-block; padding: 8px 12px; background: #f4f5f7;
  border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
  font-weight: 600; color: var(--navy); min-width: 260px;
}

.search-form input[type="text"] { padding: 8px 12px; font-size: 14px; width: 320px; border: 1px solid var(--border); border-radius: 6px; }
.search-form button { padding: 8px 16px; background: var(--navy); color: #fff; border: none; border-radius: 6px; cursor: pointer; }

.month-nav { margin-bottom: 12px; font-size: 13px; }
.month-nav a { color: var(--navy); text-decoration: none; margin-right: 12px; }

.section-label { font-weight: 700; color: var(--navy); margin-top: 20px; }
.right { text-align: right; }

/* ==================================================================
   Revenue Dashboard — design pass (Art's verdict: "it must POP")
   ==================================================================
   Same design language as the M2 enrollment board that just shipped:
   a phase-rail accent on the top edge of every panel, elevated cards,
   segmented controls, and big numerals carrying the meaning. Art's
   brief for this page: THE NUMBERS ARE THE DESIGN — typography does
   the work, so the hero figure is set at 56px and everything else is
   deliberately quieter than it.

   This is a PRESENTATION-ONLY pass. No figure, query, or bucketing
   rule changed; the template binds to exactly the same context keys
   it did before (verified by re-running the June source query after).
   ------------------------------------------------------------------ */

/* The money slide is composed for a 1440px exec screen — three cards
   across, filling the width, rather than the 1200px reading measure
   the table views use. */
main.rev-main { max-width: 1400px; }

.rev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 22px; }
.rev-head-text { min-width: 0; }
.rev-head h1 { font-size: 24px; letter-spacing: -0.015em; margin: 0 0 6px; }
.rev-head .subtitle { margin: 0; max-width: 76ch; line-height: 1.55; }

/* ---- month selector: a proper segmented navigation control ----
   Prev / current / next as one instrument. The native month input is
   kept (it is the actual selector) but stripped of its chrome and set
   in the active white pill, so the control reads as designed rather
   than as a bare form field. */
.month-control { display: inline-flex; align-items: center; background: #e9ecf3; border-radius: 11px; padding: 3px; gap: 2px; }
.month-step {
  border: none; background: none; color: var(--muted);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background .14s ease, color .14s ease;
}
.month-step:hover { background: rgba(255,255,255,0.75); color: var(--navy); }
.month-current {
  background: #fff; border-radius: 8px; box-shadow: var(--shadow-sm);
  padding: 0 6px; height: 32px; display: inline-flex; align-items: center;
}
.month-current input[type="month"] {
  border: none; background: transparent; outline: none; padding: 0 2px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.month-flags { display: flex; align-items: center; gap: 8px; margin-top: 10px; justify-content: flex-end; }
/* "current month — in progress" as a deliberate chip, not a loose badge. */
.chip-live {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--orange-tint); color: #a8412a;
  border-radius: 999px; padding: 4px 11px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.chip-live .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--orange); flex: none; }

/* ---- the three division instruments ---- */
.rev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; margin-bottom: 26px; }
@media (max-width: 1150px) { .rev-cards { grid-template-columns: 1fr; } }

.rev-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent, var(--navy));
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 22px 24px 20px;
  display: flex; flex-direction: column; min-width: 0;
  transition: box-shadow .16s ease;
}
.rev-card:hover { box-shadow: var(--shadow); }
/* FT is the money card and carries the coral accent; the two pending
   divisions are structural navy and teal so the eye lands on FT first. */
.rev-card--ft { --accent: var(--orange); --accent-tint: var(--orange-tint); }
.rev-card--c2c { --accent: var(--navy); --accent-tint: var(--navy-tint); }
.rev-card--hc { --accent: var(--teal); --accent-tint: var(--teal-tint); }

.rev-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.rev-mark {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-tint); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
}
.rev-card-titles { min-width: 0; }
.rev-division { display: block; font-size: 12.5px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.3; }
.rev-scope { display: block; font-size: 10.5px; font-weight: 600; color: var(--muted-light); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }

/* ---- hero figure: the star of the card ---- */
.rev-hero-label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.rev-hero-value {
  font-size: 56px; font-weight: 700; line-height: 1.02;
  letter-spacing: -0.03em; color: var(--navy);
  font-variant-numeric: tabular-nums; margin-top: 5px;
}
.rev-card--ft .rev-hero-value { color: var(--orange); }
.rev-hero-unit { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-top: 5px; }
/* The gross/not-netted annotation: intentional footnote, structured and
   readable, never an afterthought line. */
.rev-hero-note { font-size: 11px; color: var(--muted); margin-top: 7px; letter-spacing: 0.01em; }

/* ---- secondary figures: strong, not table rows ---- */
.rev-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; border-top: 1px solid var(--border-soft); }
.rev-stat { padding-top: 15px; min-width: 0; }
.rev-stat + .rev-stat { border-left: 1px solid var(--border-soft); padding-left: 20px; }
.rev-stat-label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.rev-stat-value { font-size: 25px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -0.018em; margin-top: 4px; line-height: 1.1; }
/* Unavailable state, designed: a clean em-dash placeholder plus the reason
   underneath. Not italic, not an apology, and never a fabricated $0.00. */
.rev-stat-value.is-na { color: var(--muted-light); font-size: 25px; letter-spacing: 0; }
.rev-stat-note { font-size: 10.5px; color: var(--muted-light); margin-top: 4px; line-height: 1.45; }

/* ---- a single ruled line (chargebacks / refunds) ---- */
.rev-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border-soft); }
.rev-line-label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.rev-line-value { font-size: 17px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rev-line.is-zero .rev-line-value { color: var(--muted-light); }
.rev-line-note { font-size: 10.5px; color: var(--muted-light); margin-top: 6px; line-height: 1.45; }

/* ---- rate-completeness meter: real data, shown proudly ---- */
.rev-meter { height: 6px; border-radius: 999px; background: var(--navy-tint); overflow: hidden; margin-top: 10px; }
.rev-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* ---- pending-cutover: DESIGNED pending, not broken ----
   A soft accented well (same device as the M2 board's empty stage) with
   an icon tile, a plain-language reason, and the three blocked lines as
   chips. It reads as a state the product knows about. */
.rev-pending {
  margin-top: 22px; padding: 16px 17px;
  border: 1px dashed var(--border); border-radius: 12px;
  background: linear-gradient(180deg, var(--accent-tint) 0%, rgba(255,255,255,0) 80%);
}
.rev-pending-head { display: flex; align-items: center; gap: 11px; }
.rev-pending-icon {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: #fff; border: 1px solid var(--border); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.rev-pending-title { font-size: 12.5px; font-weight: 700; color: var(--navy); letter-spacing: 0.01em; }
.rev-pending-sub { font-size: 11.5px; color: var(--muted); margin-top: 9px; line-height: 1.55; }
.rev-pending-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rev-pending-lines span {
  font-size: 10.5px; font-weight: 700; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; text-transform: uppercase; letter-spacing: 0.05em;
}

/* ---- card footnote: structured, intentional ---- */
.rev-foot {
  margin-top: auto; padding-top: 15px; border-top: 1px solid var(--border-soft);
  display: flex; gap: 9px; font-size: 11px; color: var(--muted); line-height: 1.55;
}
.rev-foot-mark {
  flex: none; width: 17px; height: 17px; border-radius: 5px; margin-top: 1px;
  background: var(--navy-tint); color: var(--navy);
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}

/* ---- drill-down as chips, not a bare link row ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.chip-row-label { font-size: 10.5px; font-weight: 700; color: var(--muted-light); text-transform: uppercase; letter-spacing: 0.07em; margin-right: 3px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--navy);
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.chip:hover { border-color: var(--navy); box-shadow: var(--shadow); transform: translateY(-1px); }

/* ---- Other Lines: behind a disclosure, so it can't steal the cards' focus ---- */
.rev-disclosure { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); margin-bottom: 26px; }
.rev-disclosure > summary {
  cursor: pointer; list-style: none; padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--navy);
}
.rev-disclosure > summary::-webkit-details-marker { display: none; }
.rev-disclosure > summary::after { content: "\25be"; margin-left: auto; color: var(--muted); font-size: 11px; }
.rev-disclosure[open] > summary::after { content: "\25b4"; }
.rev-disclosure > summary .sum-count {
  min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: var(--navy-tint-2); color: var(--navy);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
}
.rev-disclosure > summary .sum-note { font-size: 11.5px; font-weight: 500; color: var(--muted-light); }
.rev-disclosure-body { padding: 0 20px 18px; }
.rev-disclosure-body .subtitle { font-size: 12px; margin: 0 0 14px; }
/* Tightened to the platform table style. */
.rev-table { font-size: 12.5px; background: transparent; }
.rev-table th { background: transparent; border-bottom: 1px solid var(--border); font-size: 10.5px; letter-spacing: 0.06em; padding: 8px 10px; }
.rev-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); }
.rev-table tr:last-child td { border-bottom: none; }
.rev-table .cell-div { font-weight: 700; color: var(--navy); }
.rev-table .cell-muted { color: var(--muted); }
.pill-status {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--navy-tint); color: var(--navy);
  border-radius: 999px; padding: 3px 9px;
}