/* =============================================================================
   30 — Firm Notifications & Activity re-skin
   -----------------------------------------------------------------------------
   View partial: template-parts/firm/view-notifications.php
   Visual target: mockup "24 Firm Notifications and Activity.dc.html".

   Re-skins the existing capability-scoped activity feed in place: the shared
   feed helper (finlaw_get_activity_feed), the .activity-feed / .act-item /
   .is-unread / .act-ic / .act-main / .act-text / .act-time classes, the per-row
   $r->url deep links and the empty state are ALL untouched PHP — this file only
   restyles them, plus the progressive-enhancement chip row + "Mark all read"
   (which reuses the existing notifications/read-all REST route).

   Scope: every rule is nested under `.portal-shell.firm-shell
   .view-firm-notifications` so nothing bleeds to the client portal, the public
   site, or the other firm views. The topbar bell dropdown is a SHARED widget
   already re-skinned via 18-client-notifications.css (`.fl-bell-*` under
   `.portal-shell`) — deliberately not redefined here.

   Tokens reused: --blue-ink #15224d, --blue #26408d, --hair #e5e7eb,
   --grey-50 #f5f6fa, --grey-100 #eef0f6, --mid, --ink, --red-pale #fdeaea,
   --sh-1, --ease. The mockup accent red #d81f26 is hardcoded (no token), as in
   the sibling redesign partials.
   ============================================================================ */

/* ---------------------------------------------------------------- heading --- */
.portal-shell.firm-shell .view-firm-notifications .section-title{
	font-family:'Playfair Display',Georgia,serif;
	font-weight:700;
	font-size:28px;
	color:var(--blue-ink);
	margin:0 0 20px;
}

/* ------------------------------------------------------------------- card --- */
.portal-shell.firm-shell .view-firm-notifications .fn-card{
	max-width:800px;
	border:1px solid var(--hair);
	border-radius:16px;
	box-shadow:var(--sh-1);
	overflow:hidden;
	margin-bottom:0;
	padding:0;
}

/* Card header — count + Mark-all-read ghost button. */
.portal-shell.firm-shell .view-firm-notifications .fn-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px;
	padding:18px 22px;
	border-bottom:1px solid var(--hair);
	margin:0;
}
.portal-shell.firm-shell .view-firm-notifications .fn-head h3{
	font-family:'Playfair Display',Georgia,serif;
	font-size:17px;
	font-weight:700;
	color:var(--blue-ink);
	margin:0;
}
.portal-shell.firm-shell .view-firm-notifications .fn-count{color:var(--mid);font-weight:600}

.portal-shell.firm-shell .view-firm-notifications .fn-readall{
	background:transparent;
	border:1px solid var(--hair);
	border-radius:7px;
	padding:8px 14px;
	font-size:12.5px;
	font-weight:600;
	color:var(--blue);
	cursor:pointer;
	white-space:nowrap;
	transition:background .15s var(--ease),border-color .15s var(--ease);
}
.portal-shell.firm-shell .view-firm-notifications .fn-readall:hover:not([disabled]){
	border-color:var(--blue);
	background:var(--blue-pale);
}
.portal-shell.firm-shell .view-firm-notifications .fn-readall:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(38,64,141,.35);
}
.portal-shell.firm-shell .view-firm-notifications .fn-readall[disabled]{
	color:var(--mid);
	cursor:default;
}

/* -------------------------------------------------------------- chip row --- */
.portal-shell.firm-shell .view-firm-notifications .fn-chips{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	padding:14px 22px;
	border-bottom:1px solid var(--hair);
}
.portal-shell.firm-shell .view-firm-notifications .fn-chip{
	background:#fff;
	color:var(--ink);
	border:1px solid var(--hair);
	border-radius:999px;
	padding:7px 14px;
	font-size:12.5px;
	font-weight:600;
	cursor:pointer;
	transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.portal-shell.firm-shell .view-firm-notifications .fn-chip:hover{
	border-color:var(--blue);
	color:var(--blue-ink);
}
.portal-shell.firm-shell .view-firm-notifications .fn-chip.is-active{
	background:var(--blue-ink);
	color:#fff;
	border-color:var(--blue-ink);
}
.portal-shell.firm-shell .view-firm-notifications .fn-chip:focus-visible{
	outline:none;
	box-shadow:0 0 0 3px rgba(38,64,141,.35);
}

/* ------------------------------------------------------------- feed rows --- */
.portal-shell.firm-shell .view-firm-notifications .activity-feed{
	list-style:none;
	margin:0;
	padding:0;
}
.portal-shell.firm-shell .view-firm-notifications .act-item{
	display:flex;
	gap:14px;
	align-items:flex-start;
	padding:15px 22px;
	border-left:3px solid transparent;
	border-top:1px solid var(--grey-50);
	cursor:pointer;
	transition:background .15s var(--ease);
}
.portal-shell.firm-shell .view-firm-notifications .activity-feed .act-item:first-child{border-top:none}
.portal-shell.firm-shell .view-firm-notifications .act-item:hover{background:var(--grey-50)}

/* Unread: red-pale wash + red left bar + bold title (colour is not the only
   signal — the title weight and the SR-only ", unread" carry it too). */
.portal-shell.firm-shell .view-firm-notifications .act-item.is-unread{
	background:var(--red-pale);
	border-left-color:#d81f26;
}
.portal-shell.firm-shell .view-firm-notifications .act-item.is-unread:hover{background:#fbdede}

/* Typed icon circle — uniform grey per the mockup; the glyph differs by type. */
.portal-shell.firm-shell .view-firm-notifications .act-ic{
	flex-shrink:0;
	width:36px;
	height:36px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--grey-100);
	color:var(--mid);
}
.portal-shell.firm-shell .view-firm-notifications .act-ic svg{width:16px;height:16px}

.portal-shell.firm-shell .view-firm-notifications .act-main{flex:1;min-width:0}
.portal-shell.firm-shell .view-firm-notifications .act-text{
	font-size:14px;
	color:var(--ink);
	line-height:1.4;
}
.portal-shell.firm-shell .view-firm-notifications .act-text a{color:inherit}
.portal-shell.firm-shell .view-firm-notifications .act-text a:hover{color:#d81f26}
.portal-shell.firm-shell .view-firm-notifications .act-item.is-unread .act-text{font-weight:700}

.portal-shell.firm-shell .view-firm-notifications .act-time{
	display:block;
	font-size:12.5px;
	color:var(--mid);
	margin-top:2px;
}

/* SR-only ", unread" marker (self-contained; no dependency on a theme util). */
.portal-shell.firm-shell .view-firm-notifications .fn-sr{
	position:absolute;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;clip:rect(0,0,0,0);
	white-space:nowrap;border:0;
}

/* --------------------------------------------------- per-filter empty ------ */
.portal-shell.firm-shell .view-firm-notifications .fn-filter-empty{
	padding:56px 28px;
	text-align:center;
	font-size:14px;
	color:var(--mid);
}

/* --------------------------------------------------- reduced-motion guard --- */
@media(prefers-reduced-motion:reduce){
	.portal-shell.firm-shell .view-firm-notifications .act-item,
	.portal-shell.firm-shell .view-firm-notifications .fn-chip,
	.portal-shell.firm-shell .view-firm-notifications .fn-readall{transition:none}
}