/* Conversations › Contact Details › All fields (public/conversations-fields.js).
   Measured against GHL's legacy contact tabs (contacts-highrise 2867): the
   `sm` HighRise input, 34px tall with 8px corners and a gray-300 border that
   turns primary while focused or while its menu is open; 14px gray-600
   icons; a 247px dropdown of 28px rows; the xs blue-light filter tag; folder
   cards with a gray-100 head and 12px 16px bodies (`.block-padding`). */

.cp-fields { display: flex; flex-direction: column; gap: 16px; }

/* the search bar */
.cfs { position: relative; display: flex; flex-direction: column; }
.cfs-box {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 9px;
  background: #fff; border: 1px solid #d0d5dd; border-radius: 8px; color: #475467;
  transition: border-color .15s;
}
.cfs-box:hover { border-color: #98a2b3; }
.cfs-box:focus-within, .cfs-box.open { border-color: var(--brand); }
.cfs-ico { display: inline-flex; flex: none; color: #475467; }
.cfs-input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; padding: 0;
  font: inherit; font-size: 14px; color: #101828;
}
.cfs-input::placeholder { color: #667085; }
.cfs-clear {
  flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0;
  border-radius: 50%; background: #98a2b3; color: #fff; cursor: pointer;
}
.cfs-clear:hover { background: #667085; }
.cfs-clear[hidden] { display: none; }
.cfs-filter {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 6px; background: none; color: #475467; cursor: pointer;
}
.cfs-filter:hover, .cfs-box.open .cfs-filter { background: #f2f4f7; color: #344054; }
.cfs-filter:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* the filter menu: under the bar's right side, its caret at the icon */
.cfs-menu {
  position: absolute; top: calc(100% + 8px); right: 8px; z-index: 30;
  width: max-content; min-width: min(247px, calc(100% - 16px)); max-width: calc(100% - 16px); padding: 4px 0;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 6px;
  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);
}
.cfs-menu[hidden] { display: none; }
.cfs-caret {
  position: absolute; top: -6px; right: 9px; width: 10px; height: 10px; background: #fff;
  border-left: 1px solid #e4e7ec; border-top: 1px solid #e4e7ec; transform: rotate(45deg);
}
.cfs-opt {
  position: relative; display: block; width: 100%; min-height: 32px; padding: 6px 12px; border: 0; background: none;
  font: inherit; font-size: 14px; line-height: 20px; color: #344054; text-align: left; cursor: pointer;
}
.cfs-opt:hover, .cfs-opt:focus { background: #f2f4f7; outline: 0; }

/* the filter that is on */
.cfs-active { display: flex; align-items: center; margin-top: 4px; }
.cfs-active[hidden] { display: none; }
.cfs-tag {
  display: inline-flex; align-items: center; gap: 2px; height: 18px; max-width: 100%; padding: 0 2px 0 6px;
  border-radius: 4px; background: #f0f9ff; color: #026aa2; font-size: 11px; font-weight: 500; line-height: 18px;
}
.cfs-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfs-tag-x {
  flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; padding: 0; border: 0;
  border-radius: 3px; background: none; color: #475467; cursor: pointer;
}
.cfs-tag-x:hover { background: #e0f2fe; color: #026aa2; }

/* folders */
.cfs-list { display: flex; flex-direction: column; gap: 16px; }
.cfs-folder { background: #fff; border: 1px solid #e4e7ec; border-radius: 10px; overflow: hidden; }
.cfs-folder-head {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 16px;
  border: 0; background: #f2f4f7; font: inherit; color: #101828; text-align: left; cursor: pointer;
}
.cfs-folder-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cfs-folder-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.cfs-folder-head svg { flex: none; color: #344054; }
.cfs-folder.open .cfs-folder-head { border-bottom: 1px solid #e4e7ec; }
.cfs-folder-body { display: flex; flex-direction: column; gap: 16px; padding: 12px 16px; }
.cfs-folder-body[hidden] { display: none; }
.cfs-folder-empty { color: #667085; font-size: 14px; text-align: center; }

.cfs-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfs-label { display: flex; align-items: center; gap: 4px; min-height: 20px; font-size: 14px; color: #475467; }
.cfs-label > span { overflow-wrap: anywhere; }
.cfs-add {
  display: inline-grid; place-items: center; padding: 0; border: 0; background: none; color: var(--brand); cursor: pointer;
}
.cfs-value {
  display: block; width: calc(100% + 12px); margin: 0 -6px; padding: 3px 6px; min-height: 28px; border: 1px solid transparent;
  border-radius: 6px; background: none; font: inherit; font-size: 15px; line-height: 20px; color: #101828;
  text-align: left; overflow-wrap: anywhere; white-space: pre-wrap;
}
button.cfs-value { cursor: text; }
button.cfs-value:hover { background: #f2f4f7; }
button.cfs-value:focus-visible { outline: 2px solid var(--brand); outline-offset: -1px; }
.cfs-editor {
  width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--brand); border-radius: 6px;
  background: #fff; font: inherit; font-size: 15px; color: #101828; outline: 0;
}

/* GHL's "Search not found" and "No fields to show" */
.cfs-notfound { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px 8px; text-align: center; }
.cfs-notfound-ico { display: grid; place-items: center; padding: 8px; border-radius: 50%; background: #f2f4f7; color: #475467; }
.cfs-notfound-title { font-size: 18px; font-weight: 600; line-height: 28px; color: #101828; margin-bottom: -10px; }
.cfs-notfound-desc { font-size: 14px; line-height: 20px; color: #667085; overflow-wrap: anywhere; }
.cfs-notfound-btn { height: 28px; padding: 0 10px; font-size: 13px; background: #fff; }
.cfs-none { padding: 32px 16px; text-align: center; color: #667085; font-size: 13px; line-height: 20px; }
.cfs-none p { margin: 0; }
.cfs-none-btn { margin-top: 12px; padding: 0; border: 0; background: none; font: inherit; color: #155eef; cursor: pointer; }