/*
 * What's New · "arrears" card-viz variant (.cv-pc-*) — the Payroll Admin
 * Console "October run" demo for the "Payroll now catches the arrears you
 * used to chase" card.
 *
 * Ported from the approved standalone design (DesignSync). Builds on the
 * `.cv-pc` sidebar/main/head chrome already ported in whats-new-cv-g2n.css
 * and the `.cv-pc-th`/`.cv-pc-tr` table base already ported in
 * whats-new-cv-viewer.css (same payroll-console shell CVG2N introduced) —
 * only the event-card, amount-table and gross-pay-summary pieces this
 * variant adds are declared here. `.cv-morph` (the amount before→after
 * swap) already exists in whats-new-cv-g2n.css. `--cm`/`--cs` are the same
 * easing custom properties `.cv-es2` already defines.
 */

@keyframes cvW5in { 0% { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cvW5spin { to { transform: rotate(360deg); } }

/* ── Event card ──────────────────────────────────────────────────────── */
.cv-w5-evt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #e3e6ec; border-radius: 12px; opacity: 0; transform: translateY(-10px); transition: opacity 0.5s var(--cm), transform 0.8s var(--cm); }
.cv-w5-evt.on { opacity: 1; transform: none; }
.cv-w5-evt .ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: #fff1ea; color: #cc4c19; }
.cv-w5-evt .ic svg { width: 17px; height: 17px; }
.cv-w5-evt .tx { display: flex; flex-direction: column; flex: 1; gap: 5px; min-width: 0; }
.cv-w5-evt b { font: 700 13px/1.1 var(--font-body); color: #001738; white-space: nowrap; }
.cv-w5-evt small { font: 500 11.5px/1.1 var(--font-body); color: #3f587f; white-space: nowrap; }

/* ── Status chip (shared by the event card and table rows) ─────────────── */
.cv-w5-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; font: 700 11.5px/1 var(--font-body); white-space: nowrap; transition: background-color 0.5s, color 0.5s; }
.cv-w5-chip svg { flex: none; width: 12px; height: 12px; }
.cv-w5-chip.ok { color: #0a4e20; background: #dcf1e4; }
.cv-w5-chip.warn { color: #7a4e00; background: #fff1d6; }
.cv-w5-chip.info { color: #0a4660; background: #dceefa; }
.cv-w5-chip.brand { color: #a63d12; background: #ffe9de; }
.cv-w5-chip .cv-w5-in { display: inline-flex; align-items: center; gap: 6px; animation: cvW5in 0.5s var(--cm) both; }
.cv-w5-chip .cv-w5-in > span { display: inline-flex; align-items: center; gap: 6px; }
.cv-w5-chip .cv-w5-in > span[hidden] { display: none !important; }
.cv-w5-spin { flex: none; width: 11px; height: 11px; border: 2px solid; border-right-color: transparent; border-radius: 50%; animation: cvW5spin 0.8s linear infinite; }

/* ── Amount table (.cv-pc-th.ar / .cv-pc-tr.ar) ─────────────────────────── */
.cv-pc-th.ar, .cv-pc-tr.ar { grid-template-columns: minmax(0, 1fr) 70px 76px 124px; }
.cv-pc-th.ar > span:last-child, .cv-pc-tr.ar .ac { justify-self: end; }
.cv-pc-tr .am { font: 700 13px/1 var(--font-body); color: #001738; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-pc-tr .am.pos { color: #0a6b22; }
.cv-pc-tr.hl { background: #fff9f6; }
.cv-w5-fill { display: flex; flex-direction: column; flex: 1; }
.cv-w5-fill > .cv-pc-tr { flex: 1; }
.cv-pc-tr.add { opacity: 0; transform: translateX(-18px); transition: opacity 0.5s var(--cm), transform 0.8s var(--cm), background-color 0.5s; }
.cv-pc-tr.add.on { opacity: 1; transform: none; background: #f4fff7; }

/* ── Gross-pay summary bar ───────────────────────────────────────────── */
.cv-w5-sum { display: flex; flex: none; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: #001738; border-radius: 12px; }
.cv-w5-sum > span:first-child { display: flex; flex-direction: column; gap: 6px; }
.cv-w5-sum small { font: 600 11.5px/1 var(--font-body); color: rgba(255, 255, 255, 0.75); }
.cv-w5-sum b { font: 700 20px/1 var(--font-body); color: #fff; font-variant-numeric: tabular-nums; }
.cv-w5-sumk { display: inline-flex; align-items: center; gap: 6px; opacity: 0; transform: translateX(10px); color: #8fe0a8; font: 700 12px/1 var(--font-body); transition: opacity 0.5s var(--cm), transform 0.7s var(--cm); }
.cv-w5-sumk svg { width: 13px; height: 13px; }
.cv-w5-sumk.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.cv-w5-spin, .cv-w5-in { animation: none !important; }
}