/* =============================================================================
   FIN & LAW — CLIENT DASHBOARD (view-dashboard.php) — page-scoped re-skin deltas
   Source of truth: project/05 Client Dashboard.dc.html (inline CSS only).

   Loaded by finlaw_enqueue_redesign_partials() AFTER portal-redesign.css, which
   is AFTER style.css (finlaw-main). Everything here is scoped under
   .portal-shell .view-dashboard so it can NEVER leak to the other four client
   views that share #portal-content, nor to the firm dashboard.

   This is a RE-SKIN: the view already renders real, user-scoped data via the
   existing style.css component classes (.stat-card/.panel/.data-table/.badge/
   .appt-*/.msg-*/.portal-empty). We only close the small visual gaps the mockup
   asks for — the shared components themselves are NOT redefined here.
   ============================================================================= */

/* ---------- Stat cards: mockup = Playfair-800 32px tabular number, 32px icon
   chip, ink label, 12.5px sub (red on the outstanding-invoices card). ---------- */
.portal-shell .view-dashboard .stat-num{
	font-family:'Playfair Display',Georgia,serif;font-weight:800;font-size:32px;
	line-height:1;color:var(--blue-ink);font-variant-numeric:tabular-nums;margin:0;
}
.portal-shell .view-dashboard .stat-icon{
	width:32px;height:32px;border-radius:9px;margin-bottom:14px;
}
.portal-shell .view-dashboard .stat-icon svg{width:16px;height:16px}
.portal-shell .view-dashboard .stat-label{color:var(--ink);margin-top:4px}
.portal-shell .view-dashboard .stat-sub{font-size:12.5px;margin-top:2px}
/* Outstanding-invoices amount reads in red, per the mockup. */
.portal-shell .view-dashboard .stat-card[data-accent="red"] .stat-sub{
	color:var(--red);font-weight:600;
}

/* ---------- Two-column band: mockup ratio 1.6fr / 1fr (shell default is
   1fr 340px). Collapses to a single column at ≤960px like the shell. ---------- */
.portal-shell .view-dashboard .dash-grid{grid-template-columns:1.6fr 1fr}
@media(max-width:960px){
	.portal-shell .view-dashboard .dash-grid{grid-template-columns:1fr}
}

/* ---------- Recent Matters table: two-line matter cell (title + reference) and
   a right-aligned "Updated" column. Scoped to the dashboard so the shared
   .data-table used by the matters-list / invoices views is untouched. ---------- */
.portal-shell .view-dashboard .dt-title{
	font-weight:600;color:var(--blue-ink);font-size:14px;
}
.portal-shell .view-dashboard .dt-ref{
	font-size:12px;color:var(--mid);margin-top:2px;
}
.portal-shell .view-dashboard .data-table th:last-child,
.portal-shell .view-dashboard .data-table td:last-child{text-align:right}

/* ---------- Recent Messages: unread row gets the pale-red tint from the mockup
   (the shell already bolds the unread name + shows the red dot). ---------- */
.portal-shell .view-dashboard .msg-item.unread,
.portal-shell .view-dashboard .msg-item.unread:hover{background:var(--red-pale)}