/* =============================================================================
   21 — Firm Dashboard re-skin  (view partial: template-parts/firm/view-dashboard.php)
   -----------------------------------------------------------------------------
   Visual target: mockup "15 Firm Dashboard.dc.html". This file only carries the
   DELTAS between the base portal look (style.css / portal-redesign.css) and the
   mockup — it does NOT redefine the shared .rd-* components, and it re-styles the
   existing firm classes in place (.stat-card / .panel / .data-table / .badge /
   .activity-feed) so every JS/PHP hook (data-firm-kpi, data-accent, data-label,
   deep links, admin-vs-assigned scoping) is preserved untouched.

   Scope: every rule is nested under `.portal-shell.firm-shell .view-firm-dashboard`
   so nothing bleeds to the client portal, the public site, or the other firm
   views (matters / documents / invoices lists reuse .data-table + .panel and are
   re-skinned by their own partials).
   ============================================================================ */

/* --------------------------------------------------------------- KPI grid --- */
.portal-shell.firm-shell .view-firm-dashboard .stat-grid{
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:18px;
	margin-bottom:24px;
}

/* KPI card: tighter icon chip + smaller Playfair number to match the mockup.
   The accent top-bar (::after), per-accent icon tints and the data-accent /
   data-firm-kpi hooks all come from the base rules — kept as-is. */
.portal-shell.firm-shell .view-firm-dashboard .stat-card{
	transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.portal-shell.firm-shell .view-firm-dashboard .stat-card:focus-visible{
	outline:none;
	box-shadow:var(--sh-1),0 0 0 3px rgba(38,64,141,.35);
}
.portal-shell.firm-shell .view-firm-dashboard .stat-icon{
	width:32px;height:32px;
	border-radius:9px;
	margin-bottom:14px;
}
.portal-shell.firm-shell .view-firm-dashboard .stat-icon svg{
	width:16px;height:16px;
}
.portal-shell.firm-shell .view-firm-dashboard .stat-num{
	font-size:32px;
	margin-bottom:0;
	font-variant-numeric:tabular-nums;
}
.portal-shell.firm-shell .view-firm-dashboard .stat-label{
	color:var(--ink);
	font-weight:600;
	margin-top:4px;
}
.portal-shell.firm-shell .view-firm-dashboard .stat-sub{
	font-size:12.5px;
	color:var(--mid);
	margin-top:2px;
}

/* -------------------------------------------------------------- Dash grid --- */
.portal-shell.firm-shell .view-firm-dashboard .dash-grid{
	grid-template-columns:1.6fr 1fr;
	gap:18px;
	align-items:start;
}
@media(max-width:900px){
	.portal-shell.firm-shell .view-firm-dashboard .dash-grid{
		grid-template-columns:1fr;
	}
}

/* Panels sit as grid items here — drop the stacked bottom margin, 16px radius. */
.portal-shell.firm-shell .view-firm-dashboard .dash-grid .panel{
	margin-bottom:0;
	border-radius:16px;
}

/* ---------------------------------------------------- Recent Matters table --- */
/* Mockup header row is white with a hairline underline (not the grey fill). */
.portal-shell.firm-shell .view-firm-dashboard .data-table th{
	background:#fff;
	font-weight:600;
	letter-spacing:.06em;
	padding:12px 16px;
	color:var(--mid);
	border-bottom:1px solid var(--hair);
}
.portal-shell.firm-shell .view-firm-dashboard .data-table td{
	padding:14px 16px;
	border-bottom:1px solid var(--grey-50);
}
.portal-shell.firm-shell .view-firm-dashboard .data-table tbody tr{cursor:default}
/* Matter title (rendered as <b> in the cell) — bold navy per mockup. */
.portal-shell.firm-shell .view-firm-dashboard .data-table td b{
	color:var(--blue-ink);
	font-weight:600;
	font-size:14px;
}

/* Status badges: dot-less pills, mockup padding. Colours stay on the shared
   .badge-* classes so other views keep the same palette. */
.portal-shell.firm-shell .view-firm-dashboard .badge{
	padding:3px 10px;
	font-size:12px;
	font-weight:600;
	text-transform:none;
}
.portal-shell.firm-shell .view-firm-dashboard .badge::before{display:none}

/* ------------------------------------------------------- Recent Activity --- */
.portal-shell.firm-shell .view-firm-dashboard .activity-feed{padding:8px 0}
.portal-shell.firm-shell .view-firm-dashboard .act-item{
	gap:12px;
	padding:12px 22px;
	border-bottom:none;
	align-items:flex-start;
	cursor:pointer;
	transition:background .15s var(--ease);
}
.portal-shell.firm-shell .view-firm-dashboard .act-item:hover{background:var(--grey-50)}
.portal-shell.firm-shell .view-firm-dashboard .act-ic{
	width:32px;height:32px;
	background:var(--grey-100);
	color:var(--mid);
}
.portal-shell.firm-shell .view-firm-dashboard .act-ic svg{width:15px;height:15px}
.portal-shell.firm-shell .view-firm-dashboard .act-text{font-size:13.5px}
/* Target (document / matter name) shown as an italic aside, mockup-style. */
.portal-shell.firm-shell .view-firm-dashboard .act-target{
	color:inherit;
	font-weight:400;
	font-style:italic;
}
.portal-shell.firm-shell .view-firm-dashboard .act-target::before{content:"— "}
.portal-shell.firm-shell .view-firm-dashboard .act-text a:hover .act-target{color:inherit}
.portal-shell.firm-shell .view-firm-dashboard .act-time{
	font-size:12px;
	color:var(--mid);
	margin-top:2px;
}

/* --------------------------------------------------- reduced-motion guard --- */
@media(prefers-reduced-motion:reduce){
	.portal-shell.firm-shell .view-firm-dashboard .stat-card{transition:none}
	.portal-shell.firm-shell .view-firm-dashboard .stat-card:hover{transform:none}
	.portal-shell.firm-shell .view-firm-dashboard .act-item{transition:none}
}