/* Million-Dollar Writer Tracker -- js/views/mdwriter.js.
   People & Pay view: YTD net written by sales associate, ranked, against a
   $1,000,000 calendar-year goal, with a seasonal year-end projection status and
   the AGR (Louisiana + Mississippi) pre-go-live fold-in (dagger). Implements the
   approved prototype
   (_outbox/Million-Dollar Writer Tracker (PROTOTYPE 2026-09-08 v4 AGR real fold-in).html)
   adapted to the Hub house style (tokens.css palette, dropdown filters, dense grid).
   PAYOUT-GRADE COMPENSATION PII: nav item + dataset gated admin/executive/hr in
   view-policy.js ('mdwriter') and api data.js ('million_dollar_writer') -- change
   the two together. All rules are scoped under .mdw so they cannot collide. */

.mdw {
  --mdw-navy: #003B4A; --mdw-blue: #3F738D; --mdw-slate: #5b6b73;
  --mdw-graphite: #2b3a40; --mdw-mist: #e4ebee; --mdw-line: #d7e0e4;
  --mdw-hit: #0f7a3d; --mdw-hit-bg: #e2f4e9;
  --mdw-pace: #1d6fc0; --mdw-pace-bg: #e5f0fb;
  --mdw-behind: #9a6212; --mdw-behind-bg: #fbf1e0;
  --mdw-pending: #6b7580; --mdw-pending-bg: #eef1f5;
  color: var(--mdw-graphite);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.mdw * { box-sizing: border-box; }
.mdw-empty { padding: 40px 20px; color: var(--mdw-slate); font-size: 14px; }

/* compact "as of" line + dagger marker */
.mdw-sub { color: var(--mdw-slate); font-size: 13px; margin: 0 0 14px; }
.mdw-dag { color: var(--mdw-behind); font-weight: 700; cursor: help; }

/* summary cards */
.mdw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 18px; }
.mdw-card { background: #fff; border: 1px solid var(--mdw-line); border-radius: 10px; padding: 14px 16px; }
.mdw-card .mdw-big { font-size: 26px; font-weight: 700; color: var(--mdw-graphite); }
.mdw-card .mdw-lbl { font-size: 11px; color: var(--mdw-slate); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-top: 2px; }
.mdw-card.hit .mdw-big { color: var(--mdw-hit); }
.mdw-card.onpace .mdw-big { color: var(--mdw-pace); }
.mdw-card.behind .mdw-big { color: var(--mdw-behind); }

/* controls -- one row at desktop, plain dropdown filters + search */
.mdw-controls {
  display: flex; flex-wrap: nowrap; gap: 8px 10px; align-items: flex-end;
  background: #fff; border: 1px solid var(--mdw-line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px;
}
.mdw-ctl { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 0; }
.mdw-ctl.mdw-ctl-search { flex: 1.6 1 0; }
.mdw-ctl label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mdw-slate); font-weight: 700; white-space: nowrap; }
.mdw-ctl select, .mdw-ctl input {
  border: 1px solid var(--mdw-line); border-radius: 7px; padding: 7px 8px; font-size: 13px;
  background: #fff; color: var(--mdw-graphite); width: 100%; min-width: 0;
}

/* table toolbar */
.mdw-tbl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 2px 8px; }
.mdw-count { font-size: 12px; color: var(--mdw-slate); margin: 0; }
.mdw-tbl-actions { display: flex; align-items: center; gap: 16px; }

/* table */
.mdw-tbl-wrap { background: #fff; border: 1px solid var(--mdw-line); border-radius: 10px; overflow: hidden; }
.mdw table { border-collapse: collapse; width: 100%; font-size: 13px; }
.mdw th, .mdw td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--mdw-mist); white-space: nowrap; }
.mdw th {
  background: #eef3f5; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mdw-slate); font-weight: 700; cursor: pointer; position: sticky; top: 0;
}
.mdw th.num, .mdw td.num { text-align: right; }
.mdw td.num { font-variant-numeric: tabular-nums; }
.mdw tbody tr:hover { background: #f6fafb; }
.mdw td.mdw-rank { color: #98a1ad; width: 40px; font-variant-numeric: tabular-nums; }
.mdw td.mdw-name { font-weight: 600; }
.mdw tr.hit td.mdw-name { color: var(--mdw-hit); }

/* progress bar */
.mdw-progress { width: 190px; }
.mdw-track { display: inline-block; width: 110px; height: 8px; background: #e7ebf1; border-radius: 5px; overflow: hidden; vertical-align: middle; }
.mdw-fill { height: 100%; background: var(--mdw-pace); }
.mdw-fill.over { background: var(--mdw-hit); }
.mdw-pct { font-size: 12px; color: var(--mdw-slate); margin-left: 8px; vertical-align: middle; }

/* projected finish */
.mdw-proj.hit { color: var(--mdw-hit); font-weight: 600; }
.mdw-proj.behind { color: var(--mdw-behind); }
.mdw-proj.na { color: #98a1ad; }

/* status pills */
.mdw-pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.mdw-pill.hit { background: var(--mdw-hit-bg); color: var(--mdw-hit); }
.mdw-pill.onpace { background: var(--mdw-pace-bg); color: var(--mdw-pace); }
.mdw-pill.behind { background: var(--mdw-behind-bg); color: var(--mdw-behind); }
.mdw-pill.pending { background: var(--mdw-pending-bg); color: var(--mdw-pending); }

@media (max-width: 900px) {
  .mdw-cards { grid-template-columns: repeat(2, 1fr); }
  .mdw-controls { flex-wrap: wrap; }
  .mdw-ctl { flex: 1 1 45%; }
  .mdw-ctl.mdw-ctl-search { flex: 1 1 100%; }
}