/* ==========================================================================
   22 — Firm · Clients (directory list + create/invite)
   Re-skin of template-parts/firm/clients/list.php + create.php to match the
   Claude-Design mockup "16 Clients.dc.html". CSS only — every PHP/JS hook
   (#firmClientSearch, #firmClientsTable, data-search, data-href,
   #firmClientsNoMatch, the create-client admin-post form + nonce) is untouched.

   Scoped to .portal-shell.firm-shell and further to the two clients panels
   (.clients-list-panel / .clients-create-panel) so it never affects the other
   firm views (matters, invoices, documents …) that share .panel / .tb-search /
   .badge / .firm-form. Reuses the shared tokens from style.css.
   ========================================================================== */

/* ---- List panel ---------------------------------------------------------- */
.portal-shell.firm-shell .clients-list-panel{
	border-radius:16px;
}

/* Header search → rounded pill (mockup: 999px, grey fill, blue focus ring) */
.portal-shell.firm-shell .clients-list-panel .panel-head .tb-search{
	width:260px;max-width:100%;
	border-radius:999px;
	background:var(--grey-50);
	border-color:transparent;
	padding:9px 14px;
}
.portal-shell.firm-shell .clients-list-panel .panel-head .tb-search:focus-within{
	border-color:var(--blue);
	background:#fff;
	box-shadow:0 0 0 3px rgba(38,64,141,.35);
}
.portal-shell.firm-shell .clients-list-panel .panel-head .tb-search input{
	width:100%;
}

/* ---- Clients table ------------------------------------------------------- */
/* Header row: flat (no grey fill), hairline underline, lighter weight */
.portal-shell.firm-shell #firmClientsTable th{
	background:transparent;
	font-weight:600;
	letter-spacing:.06em;
	border-bottom:1px solid var(--hair);
	padding:12px 16px;
}
.portal-shell.firm-shell #firmClientsTable td{
	padding:14px 16px;
	font-size:13.5px;
	border-bottom:1px solid var(--grey-50);
}
.portal-shell.firm-shell #firmClientsTable tbody tr{
	cursor:pointer;
}
.portal-shell.firm-shell #firmClientsTable tbody tr:hover td{
	background:var(--grey-50);
}

/* Client cell: bold navy link, red on hover */
.portal-shell.firm-shell #firmClientsTable td a{
	color:var(--blue-ink);
	font-weight:600;
	font-size:14px;
}
.portal-shell.firm-shell #firmClientsTable td a:hover{
	color:var(--red);
}

/* Open Matters cell: bold navy open count, muted "/ total", tabular figures */
.portal-shell.firm-shell #firmClientsTable tbody td:nth-child(3){
	font-weight:700;
	color:var(--blue-ink);
	font-variant-numeric:tabular-nums;
}
.portal-shell.firm-shell #firmClientsTable tbody td:nth-child(3) .doc-meta{
	display:inline;
	margin:0;
	font-size:13.5px;
	font-weight:400;
	color:var(--mid);
}

/* Portal status badge: clean pill, no leading dot, sentence case (matches mockup) */
.portal-shell.firm-shell .clients-list-panel .badge{
	border-radius:999px;
	padding:3px 10px;
	text-transform:none;
	letter-spacing:normal;
}
.portal-shell.firm-shell .clients-list-panel .badge::before{
	display:none;
}

/* Mobile card padding parity for the badge cell */
@media(max-width:760px){
	.portal-shell.firm-shell #firmClientsTable td{padding:8px 16px;font-size:14px}
}

/* ---- Create / invite form ----------------------------------------------- */
.portal-shell.firm-shell .clients-create-panel{
	max-width:640px;
	border-radius:16px;
}

/* Labels in navy ink (mockup) */
.portal-shell.firm-shell .clients-create-panel .firm-field label{
	color:var(--blue-ink);
}

/* Inputs: 1px hairline, 6px radius, tighter pad (mockup) */
.portal-shell.firm-shell .clients-create-panel .firm-field input,
.portal-shell.firm-shell .clients-create-panel .firm-field select{
	border-width:1px;
	border-radius:6px;
	padding:11px 12px;
}

/* Focus rings: red for the client identity fields … */
.portal-shell.firm-shell .clients-create-panel .firm-field input:focus,
.portal-shell.firm-shell .clients-create-panel .firm-field select:focus{
	border-color:var(--red);
	box-shadow:0 0 0 3px rgba(216,31,38,.15);
}
/* … blue for the optional phone + initial-matter fields (mockup) */
.portal-shell.firm-shell .clients-create-panel #client_phone:focus,
.portal-shell.firm-shell .clients-create-panel #matter_title:focus,
.portal-shell.firm-shell .clients-create-panel #matter_lawyer:focus{
	border-color:var(--blue);
	box-shadow:0 0 0 3px rgba(38,64,141,.35);
}

/* Divider + optional-matter section heading (navy, sentence case) */
.portal-shell.firm-shell .clients-create-panel .form-divider{
	border-top-color:var(--hair);
	margin:22px 0;
}
.portal-shell.firm-shell .clients-create-panel .form-sec-label{
	color:var(--blue-ink);
	text-transform:none;
	letter-spacing:normal;
	font-size:13px;
	font-weight:700;
	margin:8px 0 14px;
}