.contacts-page .clients-filter-bar{align-items:end;flex-wrap:wrap;gap:12px}
.contacts-table{width:100%;min-width:960px;table-layout:fixed;border-collapse:collapse;font-family:var(--margi-font-ui),sans-serif;color:var(--margi-text)}
.contacts-table th,.contacts-table td{border:0;text-align:left;vertical-align:middle;overflow-wrap:anywhere}.contacts-table th{font-size:10px;letter-spacing:.045em;text-transform:uppercase;background:transparent}.contacts-table th:first-child{width:20%}.contacts-table th:nth-child(3){width:21%}.contacts-table th:last-child{width:130px}.contacts-table td small{display:block;color:var(--margi-muted);font-size:11px;margin-top:5px}
.contact-name{padding:0;border:0;background:transparent;color:var(--margi-text);font:var(--margi-font-ui-weight) 15px var(--margi-font-ui),sans-serif;text-align:left;min-height:32px}.contact-name:hover{color:var(--margi-accent)}
.contact-tags{display:flex;gap:6px;flex-wrap:wrap}.contact-label-chip{display:inline-block;border:0;border-radius:var(--margi-radius);padding:5px 8px;background:var(--contact-label-color);color:#252424;font:500 11px/1.3 var(--margi-font-ui),sans-serif;overflow-wrap:anywhere}.contacts-status{padding:32px}.contacts-dialog{position:fixed;inset:0 0 0 auto;box-sizing:border-box;width:min(690px,100vw);height:100dvh;max-height:100dvh;max-width:100vw;margin:0;padding:0;border:0;border-left:1px solid var(--margi-control-line);border-radius:var(--margi-radius) 0 0 var(--margi-radius);background:var(--margi-surface);color:var(--margi-text);font-family:var(--margi-font-ui),sans-serif;overflow:hidden}.contacts-dialog::backdrop{background:rgb(37 36 36 / .3);backdrop-filter:blur(4px)}.contacts-dialog>form{height:100%;display:flex;flex-direction:column}.contacts-dialog .modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;padding:20px 24px;border:0;background:var(--margi-surface)}.contacts-dialog .modal-head h2{font-size:30px}.contacts-dialog .utility-dialog-close{min-width:44px;height:44px;color:var(--margi-text);background:transparent;border:1px solid var(--margi-control-line);border-radius:var(--margi-radius);font-size:28px}.contact-dialog-body{flex:1;min-height:0;overflow:auto;padding:12px 24px 28px}.contacts-dialog .modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;flex-shrink:0;background:var(--margi-surface);border:0}.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-fields>[data-contact-select]{grid-column:1/-1}.contact-field{display:grid;gap:6px;min-width:0}.contact-field>span{font-size:12px;font-weight:600}.contact-field input,.contact-field textarea{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:9px 12px;background:var(--margi-surface);color:var(--margi-text)!important;border:1px solid var(--margi-control-line);border-radius:var(--margi-radius);font:inherit}.contact-field textarea{min-height:110px;resize:vertical}.contacts-dialog input:focus-visible,.contacts-dialog textarea:focus-visible,.contacts-dialog button:focus-visible,.contacts-dialog summary:focus-visible,.contacts-page button:focus-visible{outline:3px solid var(--margi-accent);outline-offset:2px;box-shadow:none}.contacts-dialog [aria-invalid=true]{border-color:#FC5532}.contact-error{color:#FC5532;padding:12px 0;white-space:pre-line}.contact-hint{font-size:12px;color:var(--margi-muted);margin:24px 0}.contact-group{margin:20px 0;padding:0 0 18px;border:0;border-bottom:1px solid var(--margi-control-line)}.contact-group summary,.contact-group h3{font:600 16px var(--margi-font-ui),sans-serif;padding:10px 0;cursor:pointer}.contact-repeat-row{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px 38px 16px 0}.contact-repeat-row>button{position:absolute;top:34px;right:0;min-width:32px;height:44px;border:0;background:transparent;color:var(--margi-text);font-size:22px}.contact-repeat-row[data-key=addresses]{grid-template-columns:1fr 1fr}.contact-repeat-row[data-key=phones]{grid-template-columns:90px minmax(0,1fr) minmax(0,1fr)}.contact-date{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:12px;padding:16px 0}.contact-label-choices{display:flex;flex-wrap:wrap;gap:10px}.contact-label-choice{display:flex;align-items:center;gap:5px;min-height:44px}.contact-label-choice input{width:18px;height:18px;accent-color:var(--margi-accent)}.contact-preview{font:400 15px/1.8 var(--margi-font-ui),sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:24px}.contact-label-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0}.contact-colors{display:flex;gap:12px;flex-wrap:wrap;border:0;padding:16px 0}.contact-colors label{display:flex;gap:5px;align-items:center}.contact-colors input{width:18px;height:18px}.contact-colors span{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--margi-radius);color:#252424}.contact-notes{margin-top:20px}
@media(max-width:760px){.contacts-dialog{width:100vw;border:0;border-radius:0}.contacts-dialog .modal-head{padding:16px}.contacts-dialog .modal-head h2{font-size:25px}.contact-dialog-body{padding:8px 16px 24px}.contacts-dialog .modal-actions{padding:12px 16px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}.contacts-dialog .modal-actions button{flex:1}.contact-fields{grid-template-columns:1fr}.contact-repeat-row,.contact-repeat-row[data-key=addresses],.contact-repeat-row[data-key=phones]{grid-template-columns:1fr}.contact-date{gap:8px}.contacts-page .billing-plan-header{flex-wrap:wrap;gap:12px}.contacts-page .billing-plan-tools{max-width:100%}.contacts-page .clients-filter-bar>.billing-dropdown{flex:1;min-width:130px}}

/* Reuse approved DS 14.3 for the client association inside the contact editor. */
.contacts-dialog .margi-select{position:relative;display:grid;gap:4px;min-width:150px}
.contacts-dialog .margi-select label{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.contacts-dialog .margi-select>button{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:9px 12px;border:1px solid var(--margi-border);border-radius:9px;background:var(--margi-surface);color:var(--margi-text);text-align:left}
.contacts-dialog .margi-select>button i{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform 180ms}
.contacts-dialog .margi-select>button[aria-expanded=true] i{transform:rotate(225deg)}
.contacts-dialog .margi-select>[role=listbox]{position:absolute;z-index:10;top:calc(100% + 5px);left:0;display:none;width:100%;max-height:230px;padding:6px;overflow:auto;border:1px solid var(--margi-border);border-radius:9px;background:var(--margi-surface);box-shadow:0 12px 30px color-mix(in srgb,var(--margi-ink) 14%,transparent)}
.contacts-dialog .margi-select>[role=listbox].open,.contacts-dialog .margi-select>button[aria-expanded=true]+[role=listbox]{display:grid}
.contacts-dialog .margi-select>[role=listbox]>button{min-height:44px;padding:9px;border:0;border-radius:7px;outline:0;background:transparent;color:var(--margi-text);text-align:left;box-shadow:none}
.contacts-dialog .margi-select>[role=listbox]>button:hover,.contacts-dialog .margi-select>[role=listbox]>button.hover{background:var(--margi-white);color:var(--margi-accent);outline:1px solid var(--margi-accent);outline-offset:-1px;box-shadow:none}
.contacts-dialog .margi-select>[role=listbox]>button:focus-visible{background:transparent;color:var(--margi-accent);outline:3px solid var(--margi-accent);outline-offset:1px;box-shadow:none}
.contacts-dialog .margi-select>[role=listbox]>button[aria-selected=true]{border:0;outline:0;background:var(--margi-accent);color:var(--margi-ink);font-weight:750;box-shadow:none}
.contacts-dialog .margi-select>[role=listbox]>button[aria-selected=true]:hover{outline:1px solid var(--margi-accent);outline-offset:2px}
.contacts-dialog .margi-select>[role=listbox]>button[aria-selected=true]:focus-visible{outline:3px solid var(--margi-accent);outline-offset:2px}
.contacts-dialog .margi-select>[role=listbox]>input{margin:4px;padding:9px;border:1px solid var(--margi-border);border-radius:7px;background:var(--margi-bg);color:var(--margi-text)}
.contacts-dialog .margi-select.disabled{opacity:.45}
.contacts-dialog .margi-select.error>button{border-color:var(--semantic-no)}
.contacts-dialog .margi-select>small{color:var(--semantic-no);font-size:10px}
.contacts-dialog [data-contact-select] [hidden]{display:none!important}
.contacts-dialog [data-contact-select]>[role=listbox]{position:relative;top:4px;box-sizing:border-box;max-height:230px}

/* Shared Clientes copy controls and Faturação edit action. */
.contacts-table .billing-row-actions{min-width:0;justify-content:flex-end}
.contacts-table th:last-child{text-align:right}
.contact-preview-field{margin:0 0 14px}
.contact-preview-label{display:block;color:var(--margi-muted);font-size:12px;line-height:1.4}
.contact-preview .client-primary-email{align-items:center;gap:8px;min-width:0}
.contact-preview .client-primary-email>:first-child{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
.contact-preview .client-primary-email>a{text-decoration:underline;text-underline-offset:3px}
.contact-preview .client-primary-email>button{flex:0 0 44px}

/* Contact drawers reuse the CRM record-editor structure without changing the global editor. */
.contacts-dialog.record-editor{width:min(620px,calc(100vw - 72px))!important;border:0}
.contacts-dialog.record-editor .modal-head h2.margi-window-title{font-family:var(--margi-font-ui),sans-serif!important;font-size:27px!important;font-weight:var(--margi-font-ui-weight)!important;font-style:normal!important;line-height:1.12!important}
.contacts-dialog.record-editor .contact-dialog-body{display:block;padding:8px 22px 30px;overscroll-behavior:contain;overflow-x:hidden}
.contacts-dialog .contact-fields{display:block;margin-bottom:28px}
.contacts-dialog .crm-editor-group>h3,.contacts-dialog .contact-group>h3,.contacts-dialog .contact-group>summary{margin:0 0 14px;padding:0;font-family:var(--margi-font-ui),sans-serif;font-size:18px;font-weight:var(--margi-font-ui-weight)}
.contacts-dialog .contact-group{margin:28px 0;padding:0;border:0}
.contacts-dialog .billing-editor-properties{gap:0}
.contacts-dialog .billing-editor-property{grid-template-columns:26px minmax(128px,.72fr) minmax(0,1.4fr);align-items:center;gap:12px;min-height:66px;padding:9px 0;border:0}
.contacts-dialog .billing-editor-property>i{color:var(--margi-accent)!important}
.contacts-dialog .billing-editor-property>label{font:var(--margi-font-ui-weight) 12px/1.25 var(--margi-font-ui),sans-serif}
.contacts-dialog .billing-editor-property input,.contacts-dialog .billing-editor-property textarea{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:8px 10px;border:1px solid var(--margi-control-line);border-radius:var(--margi-radius);background:var(--margi-surface);color:var(--margi-text);font:inherit}
.contacts-dialog .billing-editor-property textarea{min-height:92px;resize:vertical}
.contacts-dialog .contact-repeat-row,.contacts-dialog .contact-repeat-row[data-key=phones],.contacts-dialog .contact-repeat-row[data-key=addresses]{display:block;padding:0 0 20px;margin-bottom:14px;border-bottom:1px solid var(--margi-control-line)}
.contacts-dialog .contact-repeat-row>button{position:static;display:block;margin-left:auto;font-size:14px;min-width:44px}
.contacts-dialog .contact-date{display:block;padding:0}
.contacts-dialog .margi-select{min-width:0;gap:0}
.contacts-dialog .margi-select>button{width:100%;border:1px solid var(--margi-ink);border-radius:var(--margi-radius);min-height:44px}
.contacts-dialog .margi-select>[role=listbox]{border:1px solid var(--margi-ink);border-radius:var(--margi-radius)}
.contacts-dialog .contact-label-choice input{width:18px;min-height:18px}
.contacts-dialog.record-editor .modal-actions{flex-shrink:0}
@media(max-width:760px){.contacts-dialog.record-editor{width:100vw!important}.contacts-dialog.record-editor .modal-head h2.margi-window-title{font-size:25px!important}.contacts-dialog.record-editor .contact-dialog-body{padding:8px 16px 24px}.contacts-dialog .billing-editor-property{grid-template-columns:24px minmax(0,1fr);align-items:start;gap:7px 10px;padding:12px 0}.contacts-dialog .billing-editor-property>div{grid-column:2}.contacts-dialog .billing-editor-property>label{grid-column:2}.contacts-dialog .billing-editor-property>i{grid-column:1;grid-row:1}.contacts-dialog .contact-repeat-row{padding-bottom:16px}.contacts-dialog .modal-actions{display:flex!important}}

.contacts-dialog .margi-select>button>.directional-arrow{flex:0 0 auto}
.contacts-dialog .margi-select>button[aria-expanded=true]>.directional-arrow{transform:rotate(-90deg)}

/* Personal accent and the same DS listbox for multiple contact labels. */
.contacts-dialog .contact-group>summary::marker{color:var(--margi-accent)}
.contacts-dialog .contact-group>summary::-webkit-details-marker{color:var(--margi-accent)}
.contacts-dialog [data-contact-multi] [role=option]{display:flex;align-items:center;justify-content:space-between;gap:12px}
.contacts-dialog .contact-label-empty{padding:8px;font-size:13px}

.contacts-dialog .contact-label-choices>[data-contact-multi]{width:100%}
.contacts-dialog .billing-editor-property:has([data-contact-multi]){align-items:start}
.contacts-dialog .billing-editor-property:has([data-contact-multi])>i,.contacts-dialog .billing-editor-property:has([data-contact-multi])>label{padding-top:13px}
@media(max-width:760px){.contacts-dialog .billing-editor-property:has([data-contact-multi])>i,.contacts-dialog .billing-editor-property:has([data-contact-multi])>label{padding-top:0}}

.contacts-dialog .margi-select>[role=listbox]>[data-contact-option-search]{box-sizing:border-box;width:calc(100% - 8px);min-height:44px;margin:4px;padding:9px;border:1px solid var(--margi-control-line);font:inherit}
.contacts-dialog .contact-option-empty{padding:8px;margin:0;font-size:13px}

/* Use Clients table spacing, row interaction and neutral hover. */
.contacts-table th:nth-child(2),.contacts-table th:nth-child(4),.contacts-table th:nth-child(5){width:auto}
.contacts-table th:nth-child(6){width:130px}
@media(max-width:760px){.contacts-table td:last-child{grid-column:1/-1}}
.contacts-dialog [data-contact-action=label-new][hidden]{display:none!important}
@media(max-width:760px){.contacts-table{min-width:0}}