/* =============================================================================
   FIN & LAW — FIRM MATTERS re-skin (list + filters + create/edit form)
   Target templates: template-parts/firm/view-matters.php · matters/list.php ·
                      matters/edit.php
   Mockup: project/18 Matters.dc.html

   Auto-loaded partial (assets/css/redesign/*.css) — loads AFTER the base
   portal-redesign.css / style.css, so it only *refines* the shared firm
   components (.firm-head, .firm-filterbar, .firm-filter, .data-table, .badge*,
   .firm-form, .firm-grid, .firm-field, .firm-team, .firm-check) that the base
   already styles. No shared component is redefined wholesale.

   ALL rules scoped under .portal-shell.firm-shell so nothing leaks to the
   marketing site or the client portal. Colour comes only from the theme tokens
   in style.css :root — no new hex. Sample data from the mockup is NEVER
   hardcoded here (the table + selects are built server-side from real matters).

   ⚠️ REGRESSION GUARD: a prior CSS collision once hid the firm "New Matter"
   form by giving `.panel` position:absolute / opacity:0 / visibility:hidden.
   Nothing in this file sets position:absolute, opacity:0, visibility:hidden,
   height:0, or display:none on `.panel` or any ancestor of the form — the
   create/edit panel MUST compute fully visible and stay in normal flow.
   ============================================================================= */

/* -------------------------------------------------------------------------
   1. FILTER BAR — search pill flexes to fill; selects sit after it
   The base firm topbar rule pins .tb-search to 240px; inside the matters
   filter bar the search should flex so it fills the row (mockup 18 Matters).
   ------------------------------------------------------------------------- */
.portal-shell.firm-shell .firm-filterbar .tb-search{
	flex:1;
	width:auto;
	min-width:200px;
}
.portal-shell.firm-shell .firm-filterbar .firm-filter{
	flex:0 0 auto;
}

/* -------------------------------------------------------------------------
   2. MATTERS TABLE (#firmMattersTable) — horizontal-scroll + cell polish
   Scoped to the matters table by id so the dashboard / clients / invoices
   data-tables are untouched. The <table> lives in an overflow-x:auto wrapper.
   ------------------------------------------------------------------------- */
.portal-shell.firm-shell #firmMattersTable{
	min-width:900px;
}
/* Clickable rows deep-link via data-href (firm-matters.js). */
.portal-shell.firm-shell #firmMattersTable tbody tr{
	cursor:pointer;
}
/* Reference cell — muted, tabular figures (mockup). */
.portal-shell.firm-shell #firmMattersTable tbody td:first-child{
	color:var(--mid);
	font-size:13px;
	font-variant-numeric:tabular-nums;
}
/* Matter cell — bold navy link, brand-red on hover. */
.portal-shell.firm-shell #firmMattersTable tbody td:nth-child(2) a{
	color:var(--blue-ink);
	font-weight:600;
}
.portal-shell.firm-shell #firmMattersTable tbody td:nth-child(2) a:hover,
.portal-shell.firm-shell #firmMattersTable tbody td:nth-child(2) a:hover b{
	color:var(--red);
}
/* Updated column — right-aligned, muted, no wrap. */
.portal-shell.firm-shell #firmMattersTable th:last-child,
.portal-shell.firm-shell #firmMattersTable td:last-child{
	text-align:right;
	color:var(--mid);
	font-size:12.5px;
	white-space:nowrap;
}

/* -------------------------------------------------------------------------
   3. CREATE / EDIT FORM — panel width + summary textarea + required marks
   The base already styles .firm-form / .firm-grid / .firm-field inputs; these
   rules add only what the mockup needs that the base doesn't cover.
   ------------------------------------------------------------------------- */
/* Constrain the form card to the mockup width (~760px). :has targets ONLY the
   panel that wraps the matter form — the list panel is unaffected. Safe layout
   property only (no hiding) — see regression guard above. */
.portal-shell.firm-shell .panel:has(> .firm-form){
	max-width:760px;
}
/* Required-field asterisk on labels (Matter title, Client on create). */
.portal-shell.firm-shell .firm-field label .req{
	color:var(--red);
	margin-left:1px;
}
/* Summary textarea — base styles firm-field input+select but not textarea. */
.portal-shell.firm-shell .firm-field textarea{
	width:100%;
	padding:11px 13px;
	border:1.5px solid var(--hair);
	border-radius:9px;
	font-family:inherit;
	font-size:14px;
	line-height:1.5;
	color:var(--ink);
	background:#fff;
	resize:vertical;
	transition:border-color .2s,box-shadow .2s;
}
.portal-shell.firm-shell .firm-field textarea:focus{
	outline:none;
	border-color:var(--red);
	box-shadow:0 0 0 3px rgba(237,28,36,.08);
}

/* Team collaborators fieldset/legend (semantic group for the matter_team[]
   checkboxes). Reset the browser fieldset chrome; the <hr class="form-divider">
   above it provides the visual separation. */
.portal-shell.firm-shell .firm-fieldset{
	border:none;
	padding:0;
	margin:0;
	min-width:0;
}
.portal-shell.firm-shell .firm-legend{
	padding:0;
	margin-bottom:14px;
	font-size:13px;
	font-weight:700;
	color:var(--blue-ink);
}

/* -------------------------------------------------------------------------
   4. RESPONSIVE — undo the fixed table width where the base stacks rows
   Below 760px the base data-table collapses to stacked blocks; drop the
   min-width so nothing overflows, and left-align the Updated value.
   ------------------------------------------------------------------------- */
@media(max-width:760px){
	.portal-shell.firm-shell #firmMattersTable{
		min-width:0;
	}
	.portal-shell.firm-shell #firmMattersTable td:last-child{
		text-align:left;
	}
}