/* ════════════════════════════════════════════════════════════════
   My Desk — the cross-client operational view.

   my-desk.js was written against these class names but the stylesheet
   was never authored, so the page rendered as unstyled text and was
   never wired into the nav. This file closes that gap. Every colour
   comes from a design-system token so a palette change carries here
   without edits.

   Naming mirrors the markup in src/js/my-desk.js. Rename there,
   rename here.
   ════════════════════════════════════════════════════════════════ */

.md-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
}

/* ── headline stat tiles ───────────────────────────────────── */

.md-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.md-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.md-stat--alert   { border-left-color: var(--negative); }
.md-stat--warn    { border-left-color: var(--warning); }
.md-stat--good    { border-left-color: var(--positive); }
.md-stat--neutral { border-left-color: var(--border-light); }

.md-stat-v {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-1);
  letter-spacing: -0.02em;
}

.md-stat-l {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.md-stat-s {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
}

/* ── sections ──────────────────────────────────────────────── */

.md-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px 24px;
  box-shadow: var(--shadow-sm);
}

.md-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.md-h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
}

.md-h3 {
  margin: 22px 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.md-h3:first-of-type { margin-top: 12px; }

.md-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--negative);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.md-note {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}

.md-note--warn {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--negative-bg);
  border: 1px solid var(--negative);
  color: var(--text-2);
}

.md-dim { color: var(--text-3); }

/* ── "needs you now" rows ──────────────────────────────────── */

.md-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.md-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

/* P5.5. A client is waiting on a reply. Ranked and coloured above
   money, because money waits quietly and a person does not. */
.md-action--client   { border-left-color: var(--brand-gold); background: rgba(232,200,37,0.06); }
.md-action--client .md-action-tag { background: rgba(232,200,37,0.16); border-color: rgba(232,200,37,0.45); color: var(--brand-gold); }
.md-action--money    { border-left-color: var(--negative); }
.md-action--donation { border-left-color: var(--brand-gold); }
.md-action--email    { border-left-color: var(--warning); }

.md-action-tag {
  flex: 0 0 auto;
  min-width: 68px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--navy-muted);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--text-2);
}

.md-action-body { flex: 1 1 auto; min-width: 0; }

.md-action-t {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

.md-action-d {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.45;
}

.md-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--positive-bg);
  border: 1px solid var(--positive);
  font-size: 13px;
  color: var(--text-1);
}

.md-empty i { font-size: 20px; color: var(--positive); }

/* ── tables ────────────────────────────────────────────────── */

.md-scroll { overflow-x: auto; }

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.md-table thead tr { background: var(--brand-navy); }

.md-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  white-space: nowrap;
}

.md-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  color: var(--text-1);
  vertical-align: top;
}

.md-table tbody tr:hover { background: var(--surface-2); }

.md-num   { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-right { text-align: right; white-space: nowrap; }

.md-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
}

.md-table--grid th.md-cell,
.md-table--grid td.md-cell {
  text-align: center;
  width: 78px;
}

/* ── pills and flags ───────────────────────────────────────── */

.md-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.md-pill--paid { background: var(--positive-bg); color: var(--positive); border-color: var(--positive); }
.md-pill--sent { background: var(--gold-muted);  color: var(--brand-gold); border-color: var(--brand-gold); }
.md-pill--warn { background: rgba(252,202,70,0.12); color: var(--warning); border-color: var(--warning); }
.md-pill--due  { background: var(--negative-bg); color: var(--negative); border-color: var(--negative); }
.md-pill--none { background: var(--surface-3);   color: var(--text-3);   border-color: var(--border); }

.md-flag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--text-3);
}

/* ── email status dots ─────────────────────────────────────── */

.md-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
}

.md-dot--done { background: var(--positive); border-color: var(--positive); }
.md-dot--part { background: var(--warning);  border-color: var(--warning); }
.md-dot--none { background: var(--negative); border-color: var(--negative); }
.md-dot--na   { background: transparent;     border-color: var(--text-3); }

.md-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-size: 11px;
  color: var(--text-3);
}

/* Screen-reader text: the dots carry meaning by colour alone otherwise. */
.md-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Destiny Rescue impact ─────────────────────────────────── */

.md-impact {
  text-align: center;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--gold-muted);
  border: 1px solid var(--brand-gold);
}

.md-impact-n {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-gold);
}

.md-impact-l {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.md-impact-s {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
}

.md-fys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.md-fy {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.md-fy-y {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.md-fy-t {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
}

.md-fy-c {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
}

/* ── narrow screens ────────────────────────────────────────── */

@media (max-width: 768px) {
  .md-section { padding: 16px 14px 20px; }

  .md-action {
    flex-wrap: wrap;
    gap: 8px;
  }

  .md-action-body { flex: 1 1 100%; order: 3; }

  .md-stat-v { font-size: 22px; }
}

/* ── historical closure ─────────────────────────────────────
   The offer to sweep deals whose post-settlement admin was done
   outside Cornerstone, and the standing count of ones already
   closed. The count is deliberately always visible: a page that
   simply went quiet would look identical to one where the work
   got done.                                                     */

.md-hist-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.md-hist-bar-text {
  flex: 1 1 260px;
  font-size: 13px;
  color: var(--text-2);
}

.md-hist-bar-closed {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.md-hist-box {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--brand-gold);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.md-hist-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}

.md-hist-warn {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-left: 3px solid var(--brand-gold);
  border-radius: var(--radius-sm);
  background: var(--gold-muted);
  font-size: 13px;
  line-height: 1.5;
}

.md-hist-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.md-hist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.md-hist-row:last-child { border-bottom: none; }

.md-hist-who { font-weight: 600; flex: 0 0 auto; }

.md-hist-addr {
  flex: 1 1 180px;
  color: var(--text-2);
}

.md-hist-age,
.md-hist-items {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}

.md-hist-fee {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* "No invoice on file" is a statement of what Cornerstone knows,
   not a judgement that the fee went unbilled, so it is neutral
   rather than red. A default must never read as a recorded fact
   (B-042), in either direction. */
.md-hist-fee--ok {
  background: var(--positive-bg);
  color: var(--positive);
}

.md-hist-fee--none {
  background: var(--surface-3, var(--surface-2));
  color: var(--text-3);
  border: 1px solid var(--border);
}

.md-hist-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.md-hist-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-3);
}

@media (max-width: 768px) {
  .md-hist-row { gap: 6px; }
  .md-hist-addr { flex: 1 1 100%; }
}