/* ─────────────────────────────────────────────────────────────
Elysian Works Dashboard — Enhancements IV
- Hide .stats-grid cards now covered by the pipeline funnel
(Rendering / Completed / Queued / Failed)
- Upgrade #today-strip cards with sparkline + delta
Load AFTER enhancements-3.css:
← this file
───────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
A. HIDE REDUNDANT STATS-GRID CARDS
The pipeline funnel (enhancements-3) already shows Queued /
Rendering / Completing / Completed / Failed counts with a
directional layout. Remove the duplicates from .stats-grid;
Total Jobs / Paused / Priority Done / Compressing / admin
₹ & CPU-hrs cards remain as the detailed breakdown.
═══════════════════════════════════════════════════════════ */
#tab-jobs .stats-grid:has(+ #pipeline-row, ~ #pipeline-row) .stat-card:has(#js-rendering),
#tab-jobs .stats-grid:has(+ #pipeline-row, ~ #pipeline-row) .stat-card:has(#js-completed),
#tab-jobs .stats-grid:has(+ #pipeline-row, ~ #pipeline-row) .stat-card:has(#js-queued),
#tab-jobs .stats-grid:has(+ #pipeline-row, ~ #pipeline-row) .stat-card:has(#js-failed){
display:none;
}
/* ═══════════════════════════════════════════════════════════
B. WARNICK_RENDER — remove "Cost so far" row entirely
enhancements-4.js adds .ew-no-billing to for this account.
The row (not just its value) is hidden so the job detail drawer
doesn't show an empty/zero "Cost so far" line.
═══════════════════════════════════════════════════════════ */
body.ew-no-billing .jd-row:has(#jd-cost){
display:none;
}
body.ew-no-billing .jcard-cost{
display:none;
}
/* ═══════════════════════════════════════════════════════════
C. TODAY-STRIP — sparkline + delta upgrade
#today-strip cards keep their existing pill layout; we add a
thin sparkline along the bottom edge and a small delta line
beneath the label, sourced from /api/billing/history.
═══════════════════════════════════════════════════════════ */
#today-strip > div{
position:relative;
flex-direction:column;
align-items:flex-start !important;
gap:2px !important;
padding-bottom:14px !important;
overflow:hidden;
min-width:140px;
}
#today-strip > div > div:first-child{
display:flex;
align-items:center;
gap:10px;
width:100%;
}
.ts-spark{
position:absolute;
bottom:0; left:0; right:0;
height:22px;
opacity:.45;
pointer-events:none;
}
.ts-spark polyline{ fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.ts-spark .fill{ stroke:none; opacity:.12; }
#today-strip .ts-delta{
font-family:var(--mono);
font-size:9.5px;
letter-spacing:.04em;
color:var(--text-dim);
display:flex;
align-items:center;
gap:4px;
margin-top:1px;
}
#today-strip .ts-delta.up{ color:var(--green); }
#today-strip .ts-delta.down{ color:var(--red); }
#today-strip .ts-delta svg{
width:10px; height:10px;
stroke:currentColor; fill:none;
stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
/* ═══════════════════════════════════════════════════════════
D. REDUCED MOTION
═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
.ts-spark{ display:none; }
}