/* A compact client editor; only the form body scrolls. */
dialog:has(#client-form) {
 width:min(580px,calc(100% - 40px));
 max-height:calc(100dvh - 64px);
 border:0;
 border-radius:18px;
 overflow:hidden;
 box-shadow:0 24px 90px #172e5040;
}
dialog:has(#client-form)[open] {display:flex;flex-direction:column}
dialog:has(#client-form) .modal-head {padding:20px 24px;flex:none;border-bottom:1px solid #edf0f5}
dialog:has(#client-form) .modal-head h2 {font-size:22px;letter-spacing:-.6px;line-height:1.25;outline:none}
dialog:has(#client-form) .modal-head>button {display:grid;place-items:center;flex:none;width:40px;height:40px;min-width:40px;min-height:40px;padding:10px;border-radius:50%;background:#f2f5f9;color:#60738e}
dialog:has(#client-form) .modal-head>button:hover {background:#e8edf5}
dialog:has(#client-form) .modal-head>button svg {width:19px;height:19px}
#client-form {display:flex;flex-direction:column;min-height:0;overflow:hidden}
#client-form .client-form-body {padding:22px 24px 12px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding:18px}
.client-field-grid {display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.client-name-field {grid-column:1/-1}
#client-form .field {gap:7px;margin:0}
#client-form .field label {display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;color:#40536f}
#client-form .field label>span,.client-optional {font-size:10px;font-weight:400;color:#8491a4}
#client-form input:not([type=checkbox]),#client-form textarea {width:100%;border:1px solid #dce3ee;border-radius:9px;padding:11px 12px;background:#fff;color:#263d5a;box-shadow:0 1px 2px #182f5103;line-height:1.4}
#client-form input:not([type=checkbox]) {min-height:44px}
#client-form input::placeholder,#client-form textarea::placeholder {color:#a2adbc}
#client-form input:focus,#client-form textarea:focus {border-color:#7da2ee;outline:3px solid #235de810;outline-offset:0}
#client-form textarea {min-height:0;resize:vertical;max-height:180px}
.client-additional {margin:20px 0 0;border-top:1px solid #e9edf4}
.client-additional>summary {display:flex;align-items:center;gap:12px;min-height:54px;padding:14px 0;cursor:pointer;list-style:none;font-size:12px;font-weight:600;color:#48658a}
.client-additional>summary::-webkit-details-marker {display:none}
.client-additional>summary .client-optional {margin-left:auto}
.client-additional>summary svg {width:17px;height:17px;flex:none;transition:transform .15s}
.client-additional[open]>summary svg {transform:rotate(180deg)}
.client-additional-fields {display:grid;gap:18px;padding:1px 0 18px}
.client-field-help {font-size:10px;color:#8b98aa;line-height:1.4}
.client-archive {display:flex;align-items:flex-start;gap:10px;border-top:1px solid #e9edf4;padding:16px 0 6px;font-size:12px;color:#4f627d;cursor:pointer}
.client-archive input {width:17px;height:17px;margin:1px 0 0;accent-color:#235de8;flex:none}
.client-archive small {display:block;font-size:10px;color:#8b98aa;margin-top:4px;line-height:1.4}
.client-form-message {padding:8px 0 4px}
.client-form-message:empty {display:none}
#client-form .client-form-actions {flex:none;background:#fff;padding:16px 24px;gap:10px;border-top:1px solid #e9edf4}
.client-form-actions .btn {min-height:44px;border-radius:9px;padding:11px 20px;font-size:12px}
.client-form-actions .btn.secondary {background:#f4f6fa;border-color:transparent;color:#61728b}
@media(max-width:760px){
 dialog:has(#client-form) {position:fixed;inset:auto 0 var(--client-sheet-bottom,0px);width:100%;max-width:none;max-height:calc(var(--client-sheet-height,100dvh) - max(12px,env(safe-area-inset-top)));margin:0;border-radius:22px 22px 0 0}
 dialog:has(#client-form) .modal-head {position:relative;padding:27px 20px 17px}
 dialog:has(#client-form) .modal-head::before {content:"";position:absolute;top:9px;left:calc(50% - 18px);width:36px;height:4px;border-radius:4px;background:#d5dce6}
 dialog:has(#client-form) .modal-head h2 {font-size:23px}
 dialog:has(#client-form) .modal-head>button {width:44px;height:44px;min-width:44px;min-height:44px;padding:12px}
 #client-form .client-form-body {padding:20px 20px 8px}
 .client-field-grid {grid-template-columns:1fr;gap:17px}
 #client-form .field label {font-size:13px}
 #client-form .field label>span,.client-optional {font-size:11px}
 #client-form input:not([type=checkbox]),#client-form textarea {font-size:16px;padding:11px 12px}
 #client-form input:not([type=checkbox]) {min-height:47px}
 .client-additional {margin-top:20px}
 .client-additional>summary {min-height:52px;font-size:13px}
 .client-additional-fields {gap:17px;padding-bottom:16px}
 .client-field-help {font-size:11px}
 #client-form .client-form-actions {padding:14px 20px max(16px,env(safe-area-inset-bottom));gap:12px}
 .client-form-actions .btn {min-height:48px;font-size:14px}
 .client-form-actions .btn:not(.secondary) {flex:1}
 .client-form-actions .btn.secondary {min-width:96px}
 .mobile-keyboard #client-form .client-form-actions {padding-bottom:14px}
}
@media(prefers-reduced-motion:reduce){.client-additional>summary svg{transition:none}}

/* Client contact details use postal formatting, not the imported field layout. */
.client-detail .client-cell {min-width:0;gap:14px}
.client-detail .client-contact {min-width:0}
.client-detail h2 {font-size:17px;margin:0 0 5px;line-height:1.35}
.client-detail .client-email {display:inline-block;color:#526b8c;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.client-postal-address {margin:9px 0 0;white-space:pre-line;font-size:12px;font-style:normal;line-height:1.55;color:#748298}
@media(max-width:760px){
 .client-detail {padding:20px;margin-bottom:20px;gap:16px}
 .client-detail .client-cell {width:100%;gap:12px}
 .client-detail .avatar {width:38px;height:38px;font-size:12px;border-radius:10px}
 .client-detail .client-contact {flex:1}
 .client-detail .client-email {font-size:12px}
 .client-postal-address {font-size:12px;line-height:1.5;margin-top:8px}
 .client-detail .notes {width:100%;max-width:none;margin:0;border-top:1px solid var(--line);padding-top:14px}
 .client-invoices .panel-head {padding:18px 16px;flex-wrap:wrap;gap:6px 14px}
 .client-invoices .panel-head h2 {font-size:15px}
 .client-invoices .panel-head>span {font-size:10px}
}