/* Imports (public/contacts-import.js): GHL's Start, Upload, Map, Verify
   wizard. Above Import data (.cg-import-ov, z-index 900), in its palette. */

.ci-ov { position: fixed; inset: 0; z-index: 950; display: flex; background: rgba(16, 24, 40, .45); }
.ci { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #f2f4f7; }
.ci-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 28px 6px; }
.ci-title { font-size: 28px; font-weight: 500; color: #101828; line-height: 1.2; }
.ci-sub { font-size: 15px; color: #475467; margin-top: 4px; }

/* Stepper: number, label and a line on top, the step's description below. */
.ci-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 22px 28px 18px; }
.ci-step { min-width: 0; padding-right: 14px; }
.ci-step-top { display: flex; align-items: center; gap: 10px; }
.ci-step-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 15px; font-weight: 500; border: 1.5px solid #d0d5dd; background: transparent; color: #98a2b3;
}
.ci-step-label { font-size: 17px; font-weight: 500; color: #98a2b3; white-space: nowrap; }
.ci-step-line { flex: 1; height: 1.5px; background: #d0d5dd; min-width: 16px; }
.ci-step-sub { font-size: 14px; color: #98a2b3; margin: 8px 0 0 40px; }
.ci-step.on .ci-step-dot { background: #155eef; border-color: #155eef; color: #fff; }
.ci-step.on .ci-step-label, .ci-step.on .ci-step-sub { color: #101828; }
.ci-step.done .ci-step-dot { background: #155eef; border-color: #155eef; color: #fff; }
.ci-step.done .ci-step-label { color: #344054; }
.ci-step.done .ci-step-sub { color: #667085; }
.ci-step.done .ci-step-line { background: #155eef; }

.ci-body { flex: 1; overflow-y: auto; padding: 0 28px 20px; display: flex; flex-direction: column; gap: 20px; }
.ci-card { background: var(--surface); border-radius: 8px; border: 1px solid #eaecf0; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.ci-card-head { padding: 18px 24px; border-bottom: 1px solid #eaecf0; }
.ci-card-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.ci-card:not(:has(.ci-card-head)) { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.ci-center { align-items: center; text-align: center; padding: 56px 24px !important; }
.ci-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 28px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.ci-foot-right { display: flex; gap: 12px; align-items: center; }
.ci-foot .btn { font-size: 15px; padding: 9px 18px; }
.ci-cancel { border: 0 !important; background: none !important; }

.ci-h { font-size: 18px; font-weight: 500; color: #101828; }
.ci-gap { margin-top: 8px; }
.ci-muted { font-size: 13px; color: #667085; line-height: 1.5; }
.ci-text { font-size: 15px; color: #101828; }
.ci-note { font-size: 13px; color: #344054; background: #f5f8ff; border: 1px solid #d1e0ff; border-radius: 8px; padding: 9px 12px; }
.ci-label { font-size: 14px; font-weight: 600; color: #344054; }
.ci-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ci-pill { font-size: 13px; font-weight: 500; color: #155eef; background: #eff4ff; border-radius: 16px; padding: 4px 12px; white-space: nowrap; }
.ci-link { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; color: #155eef; cursor: pointer; align-self: flex-start; }
.ci-link:hover { text-decoration: underline; }

/* 1. Start */
.ci-objects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ci-object {
  display: flex; align-items: center; gap: 14px; border: 1px solid #d0d5dd; border-radius: 10px; padding: 22px 20px;
  cursor: pointer; background: var(--surface);
}
.ci-object:hover { border-color: #84adff; }
.ci-object.on { border-color: #155eef; box-shadow: 0 0 0 1px #155eef; }
.ci-object-icon { color: #155eef; flex: none; display: grid; place-items: center; padding-right: 14px; border-right: 1px solid #eaecf0; align-self: stretch; }
.ci-object-text { flex: 1; min-width: 0; }
.ci-object-title { font-size: 18px; font-weight: 500; color: #101828; }
.ci-object-desc { font-size: 14px; color: #475467; line-height: 1.5; margin-top: 4px; }
.ci-object.on .ci-object-desc { color: #155eef; }
.ci-object-cb { width: 20px; height: 20px; flex: none; accent-color: #155eef; cursor: pointer; }
/* Not combinable with what is chosen: GHL greys the card out. */
.ci-object.off { cursor: not-allowed; border-color: #eaecf0; }
.ci-object.off:hover { border-color: #eaecf0; }
.ci-object.off .ci-object-title, .ci-object.off .ci-object-desc { color: #98a2b3; }
.ci-object.off .ci-object-icon { color: #84adff; }
.ci-object.off .ci-object-cb { cursor: not-allowed; opacity: .5; }

/* 2. Upload: GHL's one centred card, the file, then "Choose how to import". */
.ci-upload { width: 100%; max-width: 1050px; margin: 0 auto; }
.ci-upload .ci-card-head { padding: 22px 128px 18px; display: flex; flex-direction: column; gap: 4px; }
.ci-upload .ci-card-body { padding: 24px 128px 32px; gap: 22px; }
.ci-inline-link { display: inline; font-size: 13px; }
.ci-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 28px 16px 26px;
  border: 1px solid #eaecf0; border-radius: 12px; background: var(--surface); font: inherit; color: #475467; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.ci-drop:hover, .ci-drop.over { background: #f9fafb; border-color: #84adff; }
.ci-drop-icon { width: 46px; height: 46px; border-radius: 50%; background: #f2f4f7; border: 6px solid #f9fafb; color: #475467; display: grid; place-items: center; margin-bottom: 10px; box-sizing: content-box; }
.ci-drop-line { font-size: 14px; color: #475467; }
.ci-choice { display: flex; flex-direction: column; gap: 6px; }
.ci-choice-label { font-size: 14px; font-weight: 500; color: #344054; }
.ci-choice .ci-select { width: 100%; padding: 10px 12px; font-size: 15px; }
.ci-file { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ci-file-icon { width: 40px; height: 40px; border-radius: 8px; background: #ecfdf3; color: #039855; display: grid; place-items: center; flex: none; }
.ci-file-meta { flex: 1; min-width: 0; }
.ci-file-name { font-weight: 600; color: #101828; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-error { font-size: 13px; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 8px; padding: 9px 12px; }
.ci-warn { font-size: 13px; color: #b54708; background: #fffaeb; border: 1px solid #fedf89; border-radius: 8px; padding: 9px 12px; }
.ci-tips { font-size: 13px; color: #475467; display: flex; flex-direction: column; gap: 6px; }
.ci-tips ul { margin: 0; padding-left: 18px; line-height: 1.7; }
.ci-setting { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; padding-top: 16px; border-top: 1px solid #eaecf0; }
.ci-setting:first-child { border-top: 0; padding-top: 0; }
.ci-setting-label { display: flex; flex-direction: column; gap: 4px; }
.ci-setting-control { min-width: 0; }
.ci-setting-control > .ci-input, .ci-setting-control > .ci-select { width: 100%; max-width: 420px; }

/* 3. Map */
.ci-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.ci-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ci-table th { text-align: left; font-weight: 600; color: #475467; background: #f9fafb; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ci-table td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: #344054; vertical-align: top; }
.ci-table tr:last-child td { border-bottom: 0; }
.ci-table tr.skip .ci-colname, .ci-table tr.skip .ci-preview { color: #98a2b3; }
.ci-colname { font-weight: 600; color: #101828; white-space: nowrap; }
.ci-preview { font-size: 13px; line-height: 1.6; max-width: 280px; overflow: hidden; }
.ci-select, .ci-input {
  border: 1px solid #d0d5dd; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; color: #101828;
  background: var(--surface); min-width: 220px;
}
.ci-select:focus, .ci-input:focus { outline: none; border-color: #84adff; box-shadow: 0 0 0 4px #eff4ff; }
.ci-state { color: #039855; white-space: nowrap; }
.ci-obj-tag { font-size: 12.5px; font-weight: 500; border-radius: 12px; padding: 2px 10px; background: #eff4ff; color: #155eef; white-space: nowrap; }
.ci-obj-tag.opp { background: #f4f3ff; color: #5925dc; }
.ci-errors { max-height: 280px; overflow-y: auto; }

/* 4. Verify */
.ci-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ci-stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ci-stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.ci-stat.bad { border-color: #fecdca; background: #fffbfa; }
.ci-stat-num { font-size: 22px; font-weight: 600; color: #101828; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ci-stat-hint { font-size: 12px; color: #667085; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-mapsum { display: flex; flex-direction: column; gap: 10px; }
.ci-mapsum-row { display: flex; flex-direction: column; gap: 2px; }
.ci-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ci-radio, .ci-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ci-radio { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ci-radio.on { border-color: #155eef; box-shadow: 0 0 0 1px #155eef; background: #f5f8ff; }
.ci-radio input, .ci-check input { margin-top: 3px; accent-color: #155eef; }
.ci-radio-title { font-weight: 600; font-size: 14px; color: #101828; }
.ci-check { border-top: 1px solid #eaecf0; padding-top: 16px; }
.ci-inline { display: flex; align-items: center; gap: 6px; }
.ci-cc { min-width: 0; width: 90px; }
.ci-plus { font-weight: 600; color: #344054; }
.ci-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ci-chips .ci-input { flex: 1; min-width: 220px; max-width: 360px; }
.ci-chip { display: inline-flex; align-items: center; gap: 4px; background: #eff4ff; color: #1d4ed8; border-radius: 16px; padding: 3px 4px 3px 10px; font-size: 13px; }
.ci-chip .icon-btn { width: 20px; height: 20px; color: #1d4ed8; }

/* Running and done */
.ci-bar { width: min(100%, 420px); height: 8px; border-radius: 4px; background: #eaecf0; overflow: hidden; margin-top: 8px; position: relative; }
.ci-bar > span { position: absolute; inset: 0 auto 0 0; width: 35%; background: #155eef; border-radius: 4px; animation: ci-slide 1.2s ease-in-out infinite; }
@keyframes ci-slide { from { left: -35%; } to { left: 100%; } }
.ci-done-top { display: flex; align-items: center; gap: 14px; }
.ci-done-icon { width: 48px; height: 48px; border-radius: 50%; background: #ecfdf3; color: #039855; display: grid; place-items: center; flex: none; }
.ci-done-icon.warn { background: #fffaeb; color: #dc6803; }

@media (max-width: 900px) {
  .ci-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .ci-setting { grid-template-columns: 1fr; gap: 8px; }
  .ci-objects { grid-template-columns: 1fr; }
  .ci-upload .ci-card-head, .ci-upload .ci-card-body { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 720px) {
  .ci-head, .ci-stepper, .ci-foot { padding-left: 16px; padding-right: 16px; }
  .ci-body { padding: 0 16px 16px; }
  .ci-step-sub { display: none; }
  .ci-stats.four, .ci-radios { grid-template-columns: 1fr; }
  .ci-card-body { padding: 16px; }
  .ci-upload .ci-card-head, .ci-upload .ci-card-body { padding-left: 16px; padding-right: 16px; }
  .ci-select { min-width: 160px; }
}