/* ============================================================================= 23 — FIRM · CLIENT 360 (template-parts/firm/clients/single-360.php re-skin) Source mockup: project/17 Client 360.dc.html ----------------------------------------------------------------------------- Loads AFTER portal-redesign.css + style.css + finlaw-portal-depth.css. ONLY view-specific refinements, scoped under .portal-shell.firm-shell and the page wrapper .firm-c360 so nothing leaks to other firm views. The shared components (.panel / .panel-head / .data-table / .badge-* / .doc-* / .appt-* / .c360-* / .firm-inline-form / .firm-field) are defined in style.css and are REUSED here, not redefined. Preserved untouched (markup contracts): the finlaw_firm_can_access_client guard, the 360 aggregation, the edit-client
disclosure + its admin-post form (finlaw_firm_edit_client / finlaw_firm_edit_nonce / all field names), and the link-matter form (finlaw_firm_link_matter + nonce). This file styles only. ============================================================================= */ /* ---- Content measure: mockup constrains the main column to 1100px ---------- */ .portal-shell.firm-shell .firm-c360{max-width:1100px} /* ---- Head: tighten the h1↔panel rhythm to the mockup (22px) --------------- */ .portal-shell.firm-shell .firm-c360 .firm-head{margin-bottom:22px} /* ============================================================================= PROFILE PANEL — avatar / identity / status pill / edit-client disclosure ============================================================================= */ .portal-shell.firm-shell .firm-c360 .c360-head{ padding:24px; align-items:center; gap:18px; } /* Status pill sits before the edit toggle; both hug the right after the flex:1 identity block. */ .portal-shell.firm-shell .firm-c360 .c360-status{margin-left:auto} /* --- Edit-client disclosure ------------------------------------------------- Live mechanism is a native
(kept — no JS, keyboard + SR friendly). Collapsed: the is an outline button inline in the header row. Open: the whole
wraps to a full-width block below the header, revealing the field grid (mockup's border-top divider). */ .portal-shell.firm-shell .firm-c360 .finlaw-edit-client{margin:0} .portal-shell.firm-shell .firm-c360 .finlaw-edit-client[open]{ flex:1 0 100%; margin-top:20px; padding-top:20px; border-top:1px solid var(--hair); } /* Summary → neutral outline button (mockup: grey border, navy text). */ .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-toggle{ display:inline-flex; align-items:center; list-style:none; padding:9px 16px; font-size:13px; font-weight:600; border:1px solid var(--hair); border-radius:var(--r-btn); background:transparent; color:var(--blue-ink); cursor:pointer; white-space:nowrap; transition:background .18s var(--ease),border-color .18s var(--ease); } .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-toggle::-webkit-details-marker{display:none} .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-toggle::marker{content:""} .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-toggle:hover{ background:var(--blue-pale); border-color:var(--hair); transform:none; box-shadow:none; color:var(--blue-ink); } .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(38,64,141,.35); } /* Reveal panel: drop the depth.css inset (border-top/padding already on the [open] details above) so we don't double the divider. */ .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-form{ padding:0; border-top:none; } .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:16px; } @media(max-width:640px){ .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-grid{grid-template-columns:1fr} } .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-grid .firm-field label{ font-size:13px; font-weight:600; color:var(--blue-ink); margin-bottom:6px; } .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-grid .firm-field input{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--hair); border-radius:var(--r-sm); font-size:14px; color:var(--ink); background:#fff; transition:border-color .18s var(--ease),box-shadow .18s var(--ease); } .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-grid .firm-field input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(38,64,141,.35); } .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-actions{margin-top:0} /* Save changes = red primary (mockup). .btn-primary has no shared definition. */ .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-actions .btn{ background:var(--red); border-color:var(--red); color:#fff; padding:11px 20px; font-size:13.5px; border-radius:var(--r-btn); } .portal-shell.firm-shell .firm-c360 .finlaw-edit-client-actions .btn:hover{ background:var(--red-dark); border-color:var(--red-dark); color:#fff; transform:none; box-shadow:0 6px 16px rgba(237,28,36,.22); } /* ============================================================================= LINK-MATTER inline form — mockup styles it as a row of selects + red button. (Real action/nonce/names untouched; labels kept for a11y.) ============================================================================= */ .portal-shell.firm-shell .firm-c360 .firm-inline-form .btn{ background:var(--red); border-color:var(--red); color:#fff; padding:11px 18px; font-size:13px; border-radius:var(--r-btn); } .portal-shell.firm-shell .firm-c360 .firm-inline-form .btn:hover{ background:var(--red-dark); border-color:var(--red-dark); color:#fff; transform:none; box-shadow:0 6px 16px rgba(237,28,36,.22); } /* ============================================================================= TWO-COLUMN BAND — Documents (1.3fr) | Messages + Appointments stack (1fr). Overrides the shared .dash-grid (1fr 340px) for this page only, with its own collapse breakpoint so the band still stacks on narrow screens. ============================================================================= */ .portal-shell.firm-shell .firm-c360 .dash-grid{ grid-template-columns:1.3fr 1fr; gap:18px; align-items:start; } .portal-shell.firm-shell .firm-c360 .dash-grid > div{ display:flex; flex-direction:column; gap:18px; } .portal-shell.firm-shell .firm-c360 .dash-grid > .panel{margin-bottom:0} .portal-shell.firm-shell .firm-c360 .dash-grid > div > .panel{margin-bottom:0} @media(max-width:900px){ .portal-shell.firm-shell .firm-c360 .dash-grid{grid-template-columns:1fr} } /* --- Documents rows: mockup uses a round download button -------------------- */ .portal-shell.firm-shell .firm-c360 .doc-dl{ width:30px; height:30px; border-radius:50%; } /* ============================================================================= MESSAGES STAT — mockup stacks each figure over its label; unread is red. Markup: .c360-stat > div > (.c360-stat-num + trailing label text node). ============================================================================= */ .portal-shell.firm-shell .firm-c360 .c360-stat{ gap:28px; align-items:flex-start; } .portal-shell.firm-shell .firm-c360 .c360-stat > div{ display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--mid); } .portal-shell.firm-shell .firm-c360 .c360-stat-num{ display:block; margin:0; font-size:26px; font-weight:800; line-height:1; } .portal-shell.firm-shell .firm-c360 .c360-stat > div:nth-child(2) .c360-stat-num{ color:var(--red); }