:root {
  color-scheme: light;
  --earn-bg: #f6f8fb;
  --earn-surface: #ffffff;
  --earn-surface-alt: #f3f6fa;
  --earn-border: #e7eaf1;
  --earn-border-strong: #d3d9e3;
  --earn-text: #1b2435;
  --earn-text-soft: #51607a;
  --earn-muted: #7a879c;
  --earn-blue: #2563eb;
  --earn-green: #168548;
  --earn-amber: #b45309;
  --earn-amber-soft: #fff7e6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--earn-bg); color: var(--earn-text); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }

.earnings-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }

/* ---------- Top bar ---------- */
.earnings-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  min-height: 66px; padding: 12px 20px;
  background: var(--earn-surface); border-bottom: 1px solid var(--earn-border);
}
.earnings-identity { display: grid; gap: 1px; min-width: 0; }
.earnings-back { font-size: 12px; color: var(--earn-muted); text-decoration: none; }
.earnings-back:hover { color: var(--earn-blue); }
.earnings-title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--earn-muted); }
.earnings-viewer { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.earnings-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.earnings-month { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--earn-text-soft); }
.earnings-month input { min-height: 34px; padding: 0 10px; border: 1px solid var(--earn-border-strong); border-radius: 8px; background: var(--earn-surface); color: var(--earn-text); }
.earnings-pivot { display: inline-flex; border: 1px solid var(--earn-border-strong); border-radius: 8px; overflow: hidden; }
.earnings-pivot button { min-height: 34px; padding: 0 14px; border: 0; background: var(--earn-surface); color: var(--earn-text-soft); cursor: pointer; }
.earnings-pivot button + button { border-left: 1px solid var(--earn-border-strong); }
.earnings-pivot button.is-active { background: var(--earn-text); color: #fff; }
.earnings-payer { min-height: 34px; max-width: 260px; padding: 0 10px; border: 1px solid var(--earn-border-strong); border-radius: 8px; background: var(--earn-surface); color: var(--earn-text); }
.earnings-payer[hidden] { display: none; }
.earnings-print { min-height: 34px; padding: 0 14px; border: 1px solid var(--earn-blue); border-radius: 8px; background: var(--earn-blue); color: #fff; cursor: pointer; }
.earnings-print:hover { filter: brightness(1.05); }
.earnings-exports { display: flex; gap: 6px; flex-wrap: wrap; }
.earnings-download { min-height: 34px; padding: 0 12px; border: 1px solid var(--earn-border-strong); border-radius: 8px; background: #fff; color: var(--earn-text); cursor: pointer; }
.earnings-download:hover { background: var(--earn-surface-alt); }
.earnings-exports button:disabled { opacity: .5; cursor: default; }
.earnings-exports button:focus-visible { outline: 2px solid var(--earn-blue); outline-offset: 2px; }
.earnings-export-status { font-size: 12px; color: var(--earn-text-soft); }

/* ---------- Statement ---------- */
.earnings-main { padding: 24px 20px 60px; }
.earnings-status { max-width: 980px; margin: 0 auto; color: var(--earn-text-soft); }
.earnings-status.is-error { color: #b91c1c; }
.earnings-status a { color: var(--earn-blue); }
.statement { max-width: 980px; margin: 0 auto; background: var(--earn-surface); border: 1px solid var(--earn-border); border-radius: 14px; padding: 28px 32px; }
.statement-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--earn-text); padding-bottom: 14px; margin-bottom: 18px; }
.statement-head h2 { margin: 0 0 4px; font-size: 20px; overflow-wrap: anywhere; }
.statement-head > div { min-width: 0; }
.statement-head p { margin: 0; color: var(--earn-text-soft); font-size: 13px; }
.statement-total { text-align: right; }
.statement-total strong { display: block; font-size: 24px; }
.statement-total span { font-size: 12px; color: var(--earn-muted); }
.statement-group { margin: 0 0 22px; }
.statement-group h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.statement-group h3 .group-total { font-variant-numeric: tabular-nums; }
.statement-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.statement table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
/* Same column widths in every group so the statement reads as one table. */
.statement col.c-created { width: 10%; }
.statement col.c-assignment { width: 27%; }
.statement col.c-loan { width: 12%; }
.statement col.c-type { width: 16%; }
.statement-group col.c-type { width: 14%; }
.statement col.c-client { width: 18%; }
.statement col.c-role { width: 9%; }
.statement col.c-amount { width: 10%; }
.statement td { overflow-wrap: anywhere; }
.statement th { text-align: left; font-weight: 600; color: var(--earn-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 8px; border-bottom: 1px solid var(--earn-border); }
.statement td { padding: 7px 8px; border-bottom: 1px solid var(--earn-border); vertical-align: top; }
.statement td.amount, .statement th.amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.statement td.role { color: var(--earn-text-soft); overflow-wrap: normal; }
.statement td.created, .statement th.created { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--earn-text-soft); }
.statement td.form-type { overflow-wrap: normal; }
.statement td.client { color: var(--earn-text-soft); }
.statement tfoot td { font-weight: 700; border-bottom: 0; }
.statement-grand { display: flex; justify-content: space-between; border-top: 2px solid var(--earn-text); padding-top: 12px; margin-top: 8px; font-size: 16px; font-weight: 700; }
/* Secondary accounting details follow the team payment statement. */
.statement-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--earn-border); color: var(--earn-text-soft); break-inside: avoid; }
.statement-summary > div { display: grid; gap: 2px; min-width: 0; }
.statement-summary span { font-size: 11px; color: var(--earn-text-soft); }
.statement-summary strong { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.statement-summary em { font-style: normal; font-size: 11px; color: var(--earn-text-soft); }
/* End-of-statement list of files to fix before the month is final. */
.statement-attention { margin: 24px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--earn-amber-soft); }
.statement-attention h3 { margin: 0 0 4px; font-size: 14px; color: var(--earn-amber); display: flex; justify-content: space-between; gap: 12px; }
.statement-attention h3 span { font-weight: 600; font-size: 12px; }
.statement-attention p { margin: 0 0 8px; font-size: 12px; color: var(--earn-amber); }
.statement-attention table th, .statement-attention table td { border-bottom-color: rgba(180, 83, 9, 0.18); }
.statement-attention td.issues { color: var(--earn-amber); }
.statement col.c-att-assignment { width: 24%; }
.statement col.c-issues { width: 38%; }
.statement-empty { color: var(--earn-text-soft); padding: 24px 0; }
.statement-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--earn-amber-soft); color: var(--earn-amber); font-size: 13px; }
.statement-note ul { margin: 6px 0 0; padding-left: 18px; }
.statement-note a { color: inherit; }
.statement-foot { margin-top: 20px; font-size: 11px; color: var(--earn-muted); }

/* Below desktop the table keeps readable columns and scrolls inside its card. */
@media (max-width: 1000px) {
  .statement table { min-width: 840px; }
  .statement table.attention-table { min-width: 600px; }
}

@media (max-width: 640px) {
  .earnings-topbar { padding: 10px 12px; }
  .earnings-controls { width: 100%; }
  .earnings-month { flex: 1 1 100%; }
  .earnings-month input { flex: 1; min-width: 0; }
  .earnings-pivot { flex: 1 1 auto; }
  .earnings-pivot button { flex: 1; }
  .earnings-payer { flex: 1 1 100%; max-width: 100%; min-width: 0; }
  .earnings-print { flex: 1 1 auto; }
  .statement-head h2 { font-size: 17px; }
  .earnings-main { padding: 12px 8px 40px; }
  .statement { padding: 18px 14px; border-radius: 10px; }
  .statement td.role, .statement td.form-type { white-space: normal; }
  .statement table { font-size: 12px; min-width: 760px; }
  .statement-group h3 { font-size: 13px; }
  .statement-head { flex-direction: column; }
  .statement-summary { grid-template-columns: 1fr; gap: 8px; }
  .statement table.attention-table { min-width: 560px; }
  .statement-total { text-align: left; }
  .statement td, .statement th { padding: 6px 4px; }
}

/* ---------- Print ---------- */
@media print {
  @page { margin: 0.6in; }
  body { background: #fff; }
  .earnings-topbar, .earnings-back { display: none; }
  .earnings-main { padding: 0; }
  .statement { max-width: none; border: 0; border-radius: 0; padding: 0; }
  .statement-group { break-inside: avoid; }
  .statement tr { break-inside: avoid; }
  .statement-table { overflow: visible; }
  .statement table { font-size: 11px; }
  .statement-note { border: 1px solid #ddd; background: #fff; color: #444; }
  .statement-attention { border: 1px solid #ddd; background: #fff; break-inside: auto; }
  .statement-attention h3, .statement-attention p, .statement-attention td.issues { color: #333; }
  .statement table, .statement table.attention-table { min-width: 0 !important; }
}