/* MRD × Exergio — Commercial section: Contacts (#/contacts, #/contact/:id) and the contact dialogs.
 * Prefix: .xk- (contacts). One scrolling column on the contact page; tables scroll inside .tw. */

/* ---------------------------------------------------------------- the list */
.xk-name{font-weight:500;color:#0E1726;overflow-wrap:anywhere}
.xk-name:hover{color:#0B7A6B}
.xk-list .tbl td{vertical-align:middle}
.xk-pf{flex:0 1 260px;min-width:0;max-width:100%}
.xk-job{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.xk-pls{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:320px;min-width:140px}
.xk-pl{font-size:12px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xk-m{display:none}

/* ---------------------------------------------------------------- one contact */
.xk-page{max-width:920px}
.xk-details .dl{margin:0}
.xk-dl .xk-wide{grid-column:1/-1}
.xk-dl .xl{word-break:break-all}
.xk-added{margin:16px 0 0}
.xk-edit .actions-row{justify-content:flex-end}
.xk-prj{list-style:none;margin:0;padding:0}
.xk-prj>li{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;border-top:1px solid #EEF1F4}
.xk-prj-b{min-width:0;flex:1 1 auto}
.xk-prj-h{display:flex;align-items:center;gap:8px 8px;flex-wrap:wrap;min-width:0}
.xk-prj-n{font-weight:500;color:#0E1726;overflow-wrap:anywhere}
.xk-prj-n:hover{color:#0B7A6B}
.xk-prj-s{display:flex;align-items:center;gap:8px;margin-top:4px;overflow-wrap:anywhere}
.xk-prj-s svg{flex:0 0 14px}
.xk-notes{margin:0;font-size:13px;line-height:1.55;color:#3B4758;white-space:pre-wrap;overflow-wrap:anywhere}
.xk-notes-f{display:flex;flex-direction:column;gap:8px}

/* ---------------------------------------------------------------- the projects picker (Add / Edit contact) */
.xk-pick .search-inp{flex:none;min-width:0}
.xk-plist{max-height:236px;overflow:auto;border:1px solid #E3E7EC;border-radius:8px;padding:4px 0;background:#fff}
.xk-po{align-items:flex-start;gap:8px;padding:8px 12px;margin:0;border-radius:0}
.xk-po:hover{background:#F6F8FA}
.xk-po input{margin-top:2px;flex:0 0 16px}
.xk-po-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.xk-po-n{font-weight:500;color:#0E1726;overflow-wrap:anywhere}
.xk-pnone{margin:0;padding:8px 12px}

@media (max-width:640px){
  .xk-m{display:block;margin-top:4px;font-size:12px}
  .xk-prj>li{flex-wrap:wrap;padding:12px 16px}
  .xk-pf{flex:1 1 100%}
}