/* Shared CRM attribute editor styles (tags / status / typed fields).
   Loaded by Customers, Pipeline, and Find-Customers so the editor renders the
   same everywhere. Selectors match js/crm-attributes.js output. */
.crm-attr-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.crm-attr-label { flex: 0 0 96px; font-size: 12.5px; font-weight: 600; color: #6A7282; }
.crm-status-select,
.crm-field-input,
.crm-tag-input {
    flex: 1; padding: 8px 11px; border: 1.5px solid #E5E7EB; border-radius: 9px;
    font-size: 14px; font-family: inherit; background: #fff; color: #101828;
}
.crm-status-select:focus, .crm-field-input:focus, .crm-tag-input:focus { outline: none; border-color: #7C3AED; }
.crm-field-input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; }
/* System-computed native fields — shown, never edited (read_only from the API). */
.crm-field-readonly { flex: 1; padding: 8px 0; font-size: 14px; color: #101828; }
.crm-field-readonly--upper { text-transform: uppercase; font-weight: 600; letter-spacing: .06em; color: #5B21B6; }
.crm-tags { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.crm-tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(124, 58, 237, .1); color: #5B21B6; border-radius: 999px;
    padding: 3px 6px 3px 11px; font-size: 12.5px; font-weight: 600;
}
.crm-tag-remove { background: none; border: 0; color: #7C3AED; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.crm-tag-remove:hover { color: #B91C1C; }
.crm-fields { margin-top: 4px; }
.crm-addfield-btn {
    background: none; border: 1px dashed #CBD5E1; color: #6A7282; border-radius: 9px;
    padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 6px;
}
.crm-addfield-btn:hover { border-color: #7C3AED; color: #5B21B6; }
.crm-addfield { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; background: #F9FAFB; border-radius: 10px; }
.crm-addfield-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* "Also add to" fan-out checkboxes. Styled here (not on the host page) because
   this module renders into customers, pipeline and find-customers alike. */
.crm-addfield-applies { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.crm-addfield-applies-label { font-size: 12px; font-weight: 600; color: #6A7282; }
.crm-addfield-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #101828; cursor: pointer; }
.crm-addfield-check-input { width: 14px; height: 14px; margin: 0; accent-color: #7C3AED; cursor: pointer; }
/* The action buttons reuse customers.css class names, but Pipeline and
   Find-Customers don't load customers.css — define them here, scoped to the
   editor, so the component never falls back to native browser buttons. */
.crm-addfield-actions .customers-btn-secondary,
.crm-addfield-actions .customers-btn-primary {
    padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 9px;
    cursor: pointer; font-family: inherit;
}
.crm-addfield-actions .customers-btn-secondary { background: #fff; border: 1.5px solid #E5E7EB; color: #374151; }
.crm-addfield-actions .customers-btn-secondary:hover { border-color: #CBD5E1; background: #F9FAFB; }
.crm-addfield-actions .customers-btn-primary { background: #7C3AED; border: none; color: #fff; }
.crm-addfield-actions .customers-btn-primary:hover { background: #6D28D9; }