/* =============================================================================
   FIN & LAW — CLIENT MATTERS re-skin (list + single-matter detail)
   Target template: template-parts/portal/view-matters.php
   Mockups: project/06 My Matters List.dc.html · 07 Matter Detail.dc.html

   Auto-loaded partial (assets/css/redesign/*.css) — loads AFTER the base
   portal-redesign.css and finlaw-portal-depth.css so it refines the shared
   .panel / .data-table / .badge / .doc-list / .finlaw-timeline components.
   ALL rules scoped under .portal-shell so nothing leaks to the marketing site.
   Colour is expressed only through the theme tokens defined in style.css :root
   (no new hex). Sample data from the mockups is NEVER hardcoded here.
   ============================================================================= */

/* -------------------------------------------------------------------------
   1. MATTERS LIST — panel head count + matter cell
   ------------------------------------------------------------------------- */
/* "N matters" count label in the "All Matters" panel head (real page total). */
.portal-shell .matters-count{
	font-size:13px;
	color:var(--mid);
	font-weight:500;
	white-space:nowrap;
}

/* Matter title link (bold, brand-ink) with the reference sub-line beneath it,
   mirroring the mockup's two-line Matter cell. */
.portal-shell .matter-title{
	display:block;
	font-size:14px;
	font-weight:600;
	color:var(--blue-ink);
	line-height:1.3;
}
.portal-shell .matter-title:hover{color:var(--red)}
.portal-shell .matter-ref{
	display:block;
	margin-top:2px;
	font-size:12px;
	color:var(--mid);
	font-variant-numeric:tabular-nums;
}

/* Lawyer cell — keep the real photo thumbnail (26px round); style the name. */
.portal-shell .matter-lawyer{align-items:center}
.portal-shell .matter-lawyer img{
	width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.portal-shell .matter-lawyer-name{font-size:13.5px;color:var(--ink)}

/* Right-align the Last Update column (scoped to the matters list only so the
   dashboard / invoices data-tables are untouched). */
.portal-shell .matters-table th:last-child,
.portal-shell .matters-table td:last-child{text-align:right}
@media(max-width:760px){
	/* stacked mobile rows use space-between; keep values readable */
	.portal-shell .matters-table td:last-child{text-align:left}
}

/* -------------------------------------------------------------------------
   2. MATTER DETAIL — tied documents status badge
   ------------------------------------------------------------------------- */
/* Real per-document status pill (finlaw_doc_status), sitting between the
   file info and the round download button, matching the mockup document rows. */
.portal-shell .doc-item .doc-status{flex-shrink:0}

/* -------------------------------------------------------------------------
   3. MATTER DETAIL — status timeline refinement
   Refines the plugin-emitted .finlaw-timeline* classes (finlaw-portal-depth.css
   provides the base) to match 07 Matter Detail.dc.html: a vertical connector,
   round nodes, and per-type node colour with a gold "current" (newest) node.
   The plugin PHP is NOT edited; only these output classes are styled.
   ------------------------------------------------------------------------- */
.portal-shell .finlaw-timeline{
	padding:20px 26px;
}
.portal-shell .finlaw-timeline-item{
	padding:0 0 26px 2px;
}
.portal-shell .finlaw-timeline-item:last-child{padding-bottom:2px}
.portal-shell .finlaw-timeline-item::before{
	left:13px;
	top:28px;
	bottom:0;
	width:2px;
	background:var(--grey-100);
}
.portal-shell .finlaw-timeline-dot{
	width:28px;height:28px;
	background:var(--grey-100);
	color:var(--blue-ink);
}
.portal-shell .finlaw-timeline-dot svg{width:13px;height:13px}

/* Per-type node colour (matches the mockup mapping). */
.portal-shell .finlaw-timeline-opened .finlaw-timeline-dot{
	background:var(--grey-100);color:var(--blue-ink);
}
.portal-shell .finlaw-timeline-document .finlaw-timeline-dot,
.portal-shell .finlaw-timeline-invoice .finlaw-timeline-dot{
	background:var(--grey-100);color:var(--mid);
}
.portal-shell .finlaw-timeline-status .finlaw-timeline-dot{
	background:var(--blue-ink);color:#fff;
}
/* Newest event sits first (plugin renders newest-first) → gold "current" node,
   echoing the mockup's "· now" state. Highest specificity so it wins per-type. */
.portal-shell .finlaw-timeline-item:first-child .finlaw-timeline-dot{
	background:var(--gold);color:#fff;
}

.portal-shell .finlaw-timeline-label{
	font-size:14px;font-weight:600;color:var(--ink);
}
.portal-shell .finlaw-timeline-when{
	font-size:12px;color:var(--mid);margin-top:2px;
}

/* ---- My Matters filter toolbar (status chips + practice-area select + count) ----
   Built to match 06 My Matters List.dc.html. Client-side filter over rendered rows. */
.portal-shell .matters-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.portal-shell .mt-chips{display:flex;gap:8px;flex-wrap:wrap}
.portal-shell .mt-chip{background:#fff;color:var(--mid);border:1px solid var(--hair);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s;line-height:1}
.portal-shell .mt-chip:hover{border-color:var(--blue-ink);color:var(--blue-ink)}
.portal-shell .mt-chip.is-active{background:var(--blue-ink);color:#fff;border-color:var(--blue-ink)}
.portal-shell .mt-right{display:flex;align-items:center;gap:12px}
.portal-shell .mt-practice{background:#fff;border:1px solid var(--hair);border-radius:6px;padding:9px 12px;font-size:13.5px;color:var(--ink);cursor:pointer}
.portal-shell .mt-count{font-size:13px;color:var(--mid);white-space:nowrap}