.client-notes { color:var(--heirlo-navy, #172033); }
.client-notes .cn-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.client-notes .cn-header h2 { margin:0 0 6px; font-size:21px !important; letter-spacing:-.3px; }
.client-notes .cn-header p { margin:0; color:var(--heirlo-muted, #5d6b82); font-size:14px; }
.client-notes button, .client-notes input, .client-notes select { width:auto; margin:0; min-height:38px; padding:8px 12px; border:1px solid #dce3ec; border-radius:8px; background:#fff; color:var(--heirlo-text-secondary, #475569); font:inherit; font-size:13px; box-shadow:none; }
.client-notes button { cursor:pointer; }
.client-notes button:hover { background:var(--heirlo-canvas, #f5f7fb); }
.client-notes .cn-primary { background:var(--heirlo-primary, #a41f35); color:white; border-color:var(--heirlo-primary, #a41f35); font-weight:600; white-space:nowrap; }
.client-notes .cn-primary:hover { background:#8e1933; }
.client-notes .cn-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--heirlo-border, #e2e7f0); }
.client-notes .cn-filters { display:flex; gap:4px; padding:4px; border-radius:10px; background:#f1f4f8; }
.client-notes .cn-filters button { border:0; background:transparent; color:var(--heirlo-muted, #5d6b82); }
.client-notes .cn-filters button[aria-pressed="true"] { color:var(--heirlo-primary, #a41f35); background:#fff; font-weight:600; box-shadow:0 1px 3px #18263b14; }
.client-notes .cn-search { display:flex; flex-wrap:wrap; gap:8px; }
.client-notes input { width:225px; }
.client-notes .cn-summary { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 0; color:var(--heirlo-muted, #5d6b82); font-size:12px; line-height:1.5; }
.client-notes .cn-status { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:14px; color:#9f243e; }
.client-notes .cn-status:not(:empty) { padding:12px 0; }
.client-notes .cn-list { display:grid; gap:12px; }
.client-notes .cn-entry { min-width:0; padding:18px 20px; border:1px solid var(--heirlo-border, #e2e7f0); border-radius:12px; background:white; }
.client-notes .cn-entry-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.client-notes .cn-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font-size:12px; color:var(--heirlo-muted, #5d6b82); }
.client-notes .cn-badge { padding:3px 8px; border-radius:5px; background:#f3f5f9; color:var(--heirlo-text-secondary, #475569); font-weight:500; }
.client-notes .cn-entry h3 { margin:12px 0 8px; font-size:15px !important; font-weight:600; overflow-wrap:anywhere; }
.client-notes .cn-entry p { margin:0; max-width:100ch; font-size:14px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--heirlo-text-secondary, #475569); }
.client-notes .cn-text-button { min-height:32px; padding:4px 0; background:none; border:0; color:var(--heirlo-primary, #a41f35); }
.client-notes .cn-details { margin-top:10px; }
.client-notes .cn-details summary { cursor:pointer; color:var(--heirlo-primary, #a41f35); font-size:13px; width:fit-content; padding:6px 0; }
.client-notes .cn-entry:has(.cn-details[open]) .cn-preview { display:none; }
.client-notes .cn-details p { margin-top:8px; }
.client-notes .cn-empty { margin:0; padding:44px 20px; border:1px dashed #dce3ec; border-radius:12px; color:var(--heirlo-muted, #5d6b82); text-align:center; font-size:14px; }
.client-notes footer { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.client-notes [hidden] { display:none !important; }
.client-notes :is(button,input,select,summary):focus-visible { outline:2px solid var(--heirlo-primary, #a41f35); outline-offset:3px; }
.client-notes button:disabled { opacity:.55; cursor:wait; }
#matterTabContent:has(.client-notes) .tab-view-body { padding:20px; }
@media(max-width:650px) {
 .client-notes .cn-header { align-items:flex-start; flex-wrap:wrap; }
 .client-notes .cn-search { width:100%; }
 .client-notes input { width:100%; }
 .client-notes .cn-filters { flex-wrap:wrap; }
 .client-notes .cn-entry { padding:14px; }
 .client-notes .cn-entry-head { align-items:flex-start; }
 #matterTabContent:has(.client-notes) .tab-view-body { padding:14px; }
}