/* ==========================================================================
   earnings.css — "Earnings & Bookings" module view (the 4th work-surface card).
   Ported from Helix-Integration-prototype/earnings-and-bookings.html, scoped
   under #earningsView with en- class names. Brand/surface/ink/line map to the
   app's --cw-* tokens; semantic green/amber stay local. Loaded BEFORE
   module-shell.css so the shell's responsive rules win.
   ========================================================================== */
#earningsView {
  --en-surface: var(--cw-surface, #fff);
  --en-ink: var(--cw-text, #1b1b1f);
  --en-ink-2: var(--cw-text, #3c3c43);
  --en-muted: var(--cw-text-muted, #6b6b76);
  --en-faint: var(--cw-text-subtle, #9a9aa3);
  --en-line: var(--cw-border, #e8e8ec);
  --en-line-2: var(--cw-surface-muted, #f0f0f3);
  --en-brand: var(--cw-accent, #4f46e5);
  --en-brand-2: color-mix(in srgb, var(--cw-accent, #4f46e5) 78%, #ffffff);
  --en-brand-weak: var(--cw-accent-tint, #eef0fe);
  --en-brand-ink: var(--cw-accent-text, #3a32c4);
  --en-green: #1da955; --en-green-weak: #e7f6ee; --en-green-ink: #147a3d;
  --en-amber: #f0a823; --en-amber-weak: #fdf3e0; --en-amber-ink: #9a6b09;
  --en-radius: 16px; --en-radius-sm: 10px;
  --en-shadow: 0 1px 2px rgba(20,20,30,.05), 0 6px 20px rgba(20,20,30,.05);
}
#earningsView .en-num { font-variant-numeric: tabular-nums; }

/* header + mode toggle */
#earningsView .en-head { margin-bottom:16px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
#earningsView .en-eyebrow { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--en-faint); margin:0 0 6px; }
#earningsView .en-h1 { font-size:26px; font-weight:700; letter-spacing:-.01em; margin:0; line-height:1.15; color:var(--en-ink); }
#earningsView .en-sub { margin:6px 0 0; color:var(--en-muted); font-size:14px; max-width:52ch; }
#earningsView .en-toggle { display:inline-flex; background:var(--en-line-2); border-radius:999px; padding:3px; gap:2px; }
#earningsView .en-toggle button { appearance:none; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--en-muted); background:transparent; border:0; border-radius:999px; padding:7px 13px; }
#earningsView .en-toggle button[aria-pressed="true"] { background:var(--en-surface); color:var(--en-ink); box-shadow:var(--en-shadow); }
#earningsView .en-toggle button:focus-visible { outline:2px solid var(--en-brand); outline-offset:2px; }

#earningsView .en-banner { display:flex; gap:9px; align-items:center; background:var(--en-amber-weak); color:var(--en-amber-ink); border-radius:var(--en-radius-sm); padding:10px 13px; font-size:13px; margin-bottom:16px; }
#earningsView .en-banner b { font-weight:700; }

/* top band */
#earningsView .en-band { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px; }
#earningsView .en-earn { background:var(--en-surface); border:1px solid var(--en-line); border-radius:20px; box-shadow:var(--en-shadow); padding:22px; position:relative; overflow:hidden; }
#earningsView .en-earn::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(var(--en-brand-2),var(--en-brand)); }
#earningsView .en-earn-label { font-size:12.5px; font-weight:600; color:var(--en-muted); letter-spacing:.02em; margin:0; }
#earningsView .en-earn-big { font-size:40px; font-weight:800; letter-spacing:-.02em; line-height:1; margin:8px 0 4px; color:var(--en-ink); }
#earningsView .en-earn-from { font-size:13px; color:var(--en-muted); margin:0 0 18px; }
#earningsView .en-earn-from b { color:var(--en-ink-2); font-weight:600; }
#earningsView .en-split-bar { height:10px; border-radius:999px; background:var(--en-amber-weak); overflow:hidden; display:flex; }
#earningsView .en-split-paid { height:100%; background:var(--en-green); }
#earningsView .en-split-legend { display:flex; gap:18px; margin-top:12px; flex-wrap:wrap; }
#earningsView .en-leg { display:flex; align-items:baseline; gap:8px; }
#earningsView .en-leg .en-swatch { width:9px; height:9px; border-radius:3px; align-self:center; }
#earningsView .en-leg .en-swatch.paid { background:var(--en-green); } #earningsView .en-leg .en-swatch.pend { background:var(--en-amber); }
#earningsView .en-leg .en-v { font-size:16px; font-weight:700; color:var(--en-ink); }
#earningsView .en-leg .en-k { font-size:12px; color:var(--en-muted); }

#earningsView .en-stats { display:grid; grid-template-rows:repeat(3,1fr); gap:16px; }
#earningsView .en-stat { background:var(--en-surface); border:1px solid var(--en-line); border-radius:var(--en-radius); box-shadow:var(--en-shadow); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
#earningsView .en-stat .en-k { font-size:12.5px; font-weight:600; color:var(--en-muted); }
#earningsView .en-stat .en-big { font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--en-ink); }
#earningsView .en-stat .en-amt { font-size:12.5px; color:var(--en-muted); margin-top:2px; }
#earningsView .en-stat .en-ic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--en-brand-weak); color:var(--en-brand); }

/* weekly bars */
#earningsView .en-weekly { background:var(--en-surface); border:1px solid var(--en-line); border-radius:var(--en-radius); box-shadow:var(--en-shadow); padding:16px 18px 14px; margin-bottom:24px; }
#earningsView .en-weekly-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
#earningsView .en-weekly-head h3 { margin:0; font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--en-muted); }
#earningsView .en-weekly-head span { font-size:12px; color:var(--en-faint); }
#earningsView .en-bars { display:flex; align-items:flex-end; gap:10px; height:84px; }
#earningsView .en-bcol { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
#earningsView .en-bcol .en-bar { width:100%; max-width:38px; border-radius:7px 7px 3px 3px; background:linear-gradient(var(--en-brand-2),var(--en-brand)); min-height:4px; transition:height .3s; }
#earningsView .en-bcol .en-bar.zero { background:var(--en-line); }
#earningsView .en-bcol .en-bn { font-size:11px; font-weight:700; color:var(--en-ink-2); }
#earningsView .en-bcol .en-bl { font-size:10.5px; color:var(--en-faint); }

/* ledger */
#earningsView .en-sec { margin:0 0 12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
#earningsView .en-sec h2 { font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--en-muted); margin:0; }
#earningsView .en-sec .en-rule { flex:1; height:1px; background:var(--en-line); min-width:20px; }
#earningsView .en-chips { display:flex; gap:7px; flex-wrap:wrap; }
#earningsView .en-chip { appearance:none; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--en-ink-2); background:var(--en-surface); border:1px solid var(--en-line); border-radius:999px; padding:6px 12px; display:inline-flex; align-items:center; gap:6px; transition:background .15s,border-color .15s,color .15s; }
#earningsView .en-chip:hover { border-color:#d9d9e0; }
#earningsView .en-chip .en-c-num { font-weight:700; color:var(--en-faint); }
#earningsView .en-chip[aria-pressed="true"] { background:var(--en-brand); border-color:var(--en-brand); color:#fff; }
#earningsView .en-chip[aria-pressed="true"] .en-c-num { color:rgba(255,255,255,.75); }
#earningsView .en-chip:focus-visible { outline:2px solid var(--en-brand); outline-offset:2px; }

#earningsView .en-ledger { background:var(--en-surface); border:1px solid var(--en-line); border-radius:var(--en-radius); box-shadow:var(--en-shadow); overflow:hidden; }
#earningsView .en-lrow { display:grid; grid-template-columns:1.6fr 1.2fr auto auto auto; gap:14px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--en-line-2); }
#earningsView .en-lrow:last-child { border-bottom:none; }
#earningsView .en-lrow:hover { background:#fafafb; }
#earningsView .en-cust { display:flex; align-items:center; gap:11px; min-width:0; }
#earningsView .en-avatar { flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; }
#earningsView .en-cust .en-nm { font-size:14.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--en-ink); }
#earningsView .en-cust .en-sub2 { font-size:12px; color:var(--en-muted); margin-top:1px; }
#earningsView .en-unit { font-size:13px; color:var(--en-ink-2); }
#earningsView .en-unit .en-u { font-weight:600; }
#earningsView .en-unit .en-cfg { color:var(--en-muted); }
#earningsView .en-when { font-size:12.5px; color:var(--en-muted); white-space:nowrap; text-align:right; }
#earningsView .en-money { text-align:right; white-space:nowrap; }
#earningsView .en-money .en-amt { font-size:14.5px; font-weight:700; color:var(--en-ink); }
#earningsView .en-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; border-radius:999px; padding:3px 9px; margin-top:3px; }
#earningsView .en-badge.paid { background:var(--en-green-weak); color:var(--en-green-ink); }
#earningsView .en-badge.pend { background:var(--en-amber-weak); color:var(--en-amber-ink); }
#earningsView .en-mark { appearance:none; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; border-radius:8px; padding:7px 11px; border:1px solid var(--en-line); background:var(--en-surface); color:var(--en-ink-2); white-space:nowrap; }
#earningsView .en-mark:hover { border-color:var(--en-green); color:var(--en-green-ink); }
#earningsView .en-mark.undo:hover { border-color:#d9d9e0; color:var(--en-ink-2); }
#earningsView .en-mark:focus-visible { outline:2px solid var(--en-brand); outline-offset:2px; }

#earningsView .en-empty { text-align:center; padding:34px 20px; color:var(--en-muted); }
#earningsView .en-empty p { margin:0; font-size:14px; }
#earningsView .en-ledger-foot { padding:12px 18px; background:#fafafb; border-top:1px solid var(--en-line-2); display:flex; justify-content:space-between; font-size:13px; }
#earningsView .en-ledger-foot .en-k { color:var(--en-muted); } #earningsView .en-ledger-foot .en-v { font-weight:700; color:var(--en-ink); }

@media (max-width:760px) {
  #earningsView .en-band { grid-template-columns:1fr; }
  #earningsView .en-stats { grid-template-rows:none; grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px) {
  #earningsView .en-h1 { font-size:22px; }
  #earningsView .en-earn-big { font-size:32px; }
  #earningsView .en-stats { grid-template-columns:1fr; }
  #earningsView .en-stat { justify-content:flex-start; }
  #earningsView .en-lrow { grid-template-columns:1fr auto; row-gap:8px; }
  #earningsView .en-unit { grid-column:1/-1; order:3; }
  #earningsView .en-when { display:none; }
}