/* ============================================================================
   contact-editor-redesign.css

   Dedicated stylesheet for the Add / Edit Contact redesign (CSContactDetail +
   ContactCardPreview). EVERY rule is scoped under `.contact-editor` (the root
   class on the CSContactDetail widget) or `.contact-editor-modal` (the marker
   class each host adds to its dialog), so nothing leaks into the rest of the
   portal's shared DataField / Toggle / Selector markup.

   Consumes the global tokens + .avatar palette already defined in
   contact-stylesheet.css (registered earlier in AvidBitPortalApplication.cpp).
   Do not add contact-editor rules to any other stylesheet.
   ============================================================================ */

/* ─── Tokens ──────────────────────────────────────────────────────────────────
   Production contact-stylesheet.css does NOT expose CSS custom properties, so
   the redesign defines its own under the root scope class (cascades to the
   preview + form descendants). Values are the redesign palette. */
.contact-editor {
  --brand-50:#f0f9eb; --brand-100:#dcefd0; --brand-200:#bce0a4; --brand-300:#94cf73;
  --brand-400:#74bf4f; --brand-500:#5fb73f; --brand-600:#4a9230; --brand-700:#3a7325;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
  --gray-800:#1f2937; --gray-900:#111827;
  --amber-50:#fffbeb; --amber-300:#fcd34d; --amber-800:#92400e;
}

/* ─── Preview avatar palette ──────────────────────────────────────────────────
   Mirrors the card/drawer colors in contact-stylesheet.css, keyed by the same
   f_contact_avatar_av_N class fed from CompactContactCard::avatarColorClassFor,
   so the same contact gets the same color in the editor and the list. */
.contact-editor .ce-pv-avatar.f_contact_avatar_av_0 { background:#fde2e4; color:#9b1c2e; }
.contact-editor .ce-pv-avatar.f_contact_avatar_av_1 { background:#e2eafc; color:#1e3a8a; }
.contact-editor .ce-pv-avatar.f_contact_avatar_av_2 { background:#dcfce7; color:#166534; }
.contact-editor .ce-pv-avatar.f_contact_avatar_av_3 { background:#fef3c7; color:#92400e; }
.contact-editor .ce-pv-avatar.f_contact_avatar_av_4 { background:#ede9fe; color:#5b21b6; }
.contact-editor .ce-pv-avatar.f_contact_avatar_av_5 { background:#fce7f3; color:#9d174d; }
.contact-editor .ce-pv-avatar.f_contact_avatar_av_6 { background:#cffafe; color:#155e75; }
.contact-editor .ce-pv-avatar.f_contact_avatar_av_7 { background:#f5d0fe; color:#6b21a8; }

/* ─── Modal sizing (two-pane needs room) ──────────────────────────────────────
   The .contact-editor-modal marker class (added by both hosts) is the explicit,
   :has()-independent path. The :has(.ce-has-preview) selector is a fallback and
   gates widening on the preview actually being present, so showPreview=false
   does NOT widen the modal. */
.contact-editor-modal .modal-dialog,
.modal-dialog:has(.ce-has-preview) {
  max-width: 1080px !important;
  width: 100% !important;
}
@media (max-width: 820px) {
  .contact-editor-modal .modal-dialog,
  .modal-dialog:has(.ce-has-preview) {
    max-width: 96vw !important;
  }
}

/* ─── Two-pane layout (prototype .split-cols) ──────────────────────────────────
   With a preview, the editor + preview are edge-to-edge grid columns split by a
   divider (no gap) — the prototype's 1.15fr / .85fr split. The form pane scrolls
   independently; the preview pane is tinted with a gradient + left border.
   Neutralise the host DataWidget body padding so the columns reach the edges. */
.contact-editor .ce-twopane {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.contact-editor .ce-form {
  flex: 1 1 0;
  min-width: 0;
}
.contact-editor .ce-twopane.ce-has-preview {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0;
  align-items: stretch;
}
.contact-editor-modal .modal-body:has(.ce-has-preview),
.contact-editor .ce-twopane.ce-has-preview {
  padding: 0;
}
.contact-editor .ce-twopane.ce-has-preview .ce-form {
  flex: none;
  min-width: 0;
  padding: 22px 24px;
  overflow: auto;
  max-height: calc(100vh - 230px);
}
.contact-editor .ce-twopane.ce-has-preview .ce-preview {
  background: linear-gradient(180deg, var(--gray-50), #fff 40%);
  border-left: 1px solid var(--gray-200);
  padding: 28px 26px;
  overflow: auto;
}
@media (max-width: 920px) {
  .contact-editor .ce-twopane.ce-has-preview {
    grid-template-columns: 1fr;
  }
  /* Preview is a desktop affordance — drop it, leaving a clean single column. */
  .contact-editor .ce-preview {
    display: none;
  }
}

/* ─── Form sections ───────────────────────────────────────────────────────── */
.contact-editor .ce-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-100);
}
.contact-editor .ce-section:last-child {
  border-bottom: none;
}
.contact-editor .ce-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 14px;
}
.contact-editor .ce-row {
  margin-bottom: 4px;
}
.contact-editor .ce-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ─── Field restyle (target element types — resilient to control classes) ──── */
.contact-editor .ce-form .form-group {
  margin-bottom: 14px;
}
.contact-editor .ce-form .form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.contact-editor .ce-form input[type="text"],
.contact-editor .ce-form input[type="email"],
.contact-editor .ce-form input[type="url"],
.contact-editor .ce-form input[type="tel"],
.contact-editor .ce-form input[type="number"],
.contact-editor .ce-form input:not([type]),
.contact-editor .ce-form textarea,
.contact-editor .ce-form select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--gray-900);
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.contact-editor .ce-form textarea {
  min-height: 80px;
  line-height: 1.5;
  resize: vertical;
}
.contact-editor .ce-form input:focus,
.contact-editor .ce-form textarea:focus,
.contact-editor .ce-form select:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(95, 183, 63, 0.18);
}
.contact-editor .ce-form input::placeholder,
.contact-editor .ce-form textarea::placeholder {
  color: var(--gray-400);
}

/* Dropdowns (the number-type select) — drop the OS arrow for a custom chevron
   and a cleaner control matching the inputs. */
.contact-editor .ce-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  cursor: pointer;
  font-weight: 500;
  color: var(--gray-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.contact-editor .ce-form select:hover {
  border-color: var(--gray-400);
}

/* Numbers — inline-editable rows + default star (slice 12) */
.contact-editor .ce-numbers {
  margin-top: 2px;
}
/* Each number is ONE horizontal row: [type] [number] [star]. The row is a
   Bootstrap .row (flex-wrap:wrap) of .col columns, so override the wrap + column
   widths (with child-combinator + !important to beat .col / .col-12). */
.contact-editor .ce-num-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
}
.contact-editor .ce-num-row > .ce-num-type {
  flex: 0 0 140px !important;
  max-width: 140px !important;
  width: 140px;
  min-width: 0;
  padding: 0;
}
.contact-editor .ce-num-row > .ce-num-value {
  flex: 1 1 auto !important;
  max-width: none !important;
  width: auto;
  min-width: 0;
  padding: 0;
}
.contact-editor .ce-num-row > .ce-num-starcol {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto;
  padding: 0 0 4px 0;
  display: flex;
  align-items: center;
}
/* Number rows are label-less (the select shows the type, the input has a
   placeholder) — matches the prototype's compact [type][number][star] row. */
.contact-editor .ce-num-row .form-group > label,
.contact-editor .ce-num-row label {
  display: none;
}
.contact-editor .ce-num-row .form-group {
  margin: 0;
}
/* Mobile: the type labels are short (Mobile / Home / Work / Fax), so shrink the
   type column and hand the freed width to the phone number. */
@media (max-width: 640px) {
  .contact-editor .ce-num-row > .ce-num-type {
    flex: 0 0 96px !important;
    max-width: 96px !important;
    width: 96px;
  }
}
/* The number rows are an edit form, not a navigation list — suppress the
   framework's grey selected-row highlight (.selector-item.selected). */
.contact-editor .contact-number-item-selector-item.selected {
  background-color: transparent !important;
  color: inherit !important;
}
/* Real <button> (WPushButton) — reset the framework/UA button chrome. */
.contact-editor .ce-num-star {
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border-radius: 8px;
  color: var(--gray-300);
  font-size: 15px;
  transition: background 0.12s ease, color 0.12s ease;
}
.contact-editor .ce-num-star:hover {
  background: var(--brand-50);
  color: var(--brand-400);
}
.contact-editor .ce-num-star.is-default {
  color: var(--brand-500);
}
.contact-editor .ce-num-star.is-default:hover {
  cursor: default;
  color: var(--brand-500);
}

/* Inline "Add another number" link (prototype .add-line) — replaces the
   generic EditableSelector add toolbar (hidden in CSContactNumbers). */
.contact-editor .ce-addline {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 6px;
}
.contact-editor .ce-addline:hover {
  color: var(--brand-700);
}

/* Texting opt-in row (prototype .optin-row) — title/subtitle left, toggle right. */
.contact-editor .ce-optin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 10px 14px;
}
.contact-editor .ce-optin-text {
  min-width: 0;
}
.contact-editor .ce-optin-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
}
.contact-editor .ce-optin-sub {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 1px;
}
/* The toggle field renders its own form-group label/margins — strip them so only
   the switch sits at the right of the row. */
.contact-editor .ce-optin-control,
.contact-editor .ce-optin-control .form-group {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
.contact-editor .ce-optin-control .form-group > label {
  display: none;
}

/* ─── Location combo + group chips (framework Selector DROPDOWN markup) ─────────
   customerID (location) and customerContactGroupID (groups) are framework
   SelectorFields rendered as a `.dropdown-widget` control:
     .dropdown-widget > .selected-item-container > (single SelectorItem |
                                                    Tagify tags for multiselect)
   We don't rebuild the control — we re-skin it under .contact-editor so it reads
   as the prototype's .combo / chip-in-control. All scoped; nothing leaks to the
   portal's global dropdown/Tagify styling. (Targets framework markup — most
   likely of the redesign to need build-time visual tuning.) */
.contact-editor .ce-combo .form-group,
.contact-editor .ce-groupfield .form-group {
  margin-bottom: 0;
}
.contact-editor .ce-combo .dropdown-widget,
.contact-editor .ce-groupfield .dropdown-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.contact-editor .ce-combo .dropdown-widget:hover,
.contact-editor .ce-groupfield .dropdown-widget:hover {
  border-color: var(--gray-400);
}
.contact-editor .ce-combo .dropdown-widget.disabled,
.contact-editor .ce-groupfield .dropdown-widget.disabled {
  background: var(--gray-50);
}
/* Single border only: the .dropdown-widget above carries it. Kill borders /
   shadows on the framework's nested selector elements (root, item, tagify,
   inner inputs) so the control doesn't show a double outline. !important also
   beats any inline border the framework sets. */
.contact-editor .ce-combo .avidbit-selector,
.contact-editor .ce-combo .selected-item-container,
.contact-editor .ce-combo .selector-item,
.contact-editor .ce-combo .form-control,
.contact-editor .ce-combo input,
.contact-editor .ce-groupfield .avidbit-selector,
.contact-editor .ce-groupfield .selected-item-container,
.contact-editor .ce-groupfield .selector-item,
.contact-editor .ce-groupfield .form-control,
.contact-editor .ce-groupfield input {
  border: none !important;
  box-shadow: none !important;
}
.contact-editor .ce-combo .selected-item-container,
.contact-editor .ce-groupfield .selected-item-container {
  flex: 1 1 auto;
  min-width: 0;
}

/* Group chips — re-skin Tagify tags into the prototype .chip. */
.contact-editor .ce-groupfield .tagify,
.contact-editor .ce-groupfield .tagify__input {
  border: 0 !important;
  padding: 0;
  margin: 0;
  min-height: 0;
  background: transparent;
}
.contact-editor .ce-groupfield .selected-item-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.contact-editor .ce-groupfield .tagify__tag {
  margin: 2px 0;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 9999px;
}
.contact-editor .ce-groupfield .tagify__tag > div {
  padding: 3px 8px 3px 10px;
}
.contact-editor .ce-groupfield .tagify__tag-text {
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.contact-editor .ce-groupfield .tagify__tag__removeBtn {
  color: var(--brand-600);
  opacity: 0.6;
}
.contact-editor .ce-groupfield .tagify__tag__removeBtn:hover {
  opacity: 1;
  background: rgba(74, 146, 48, 0.12);
  color: var(--brand-700);
}

/* ─── Live preview card ───────────────────────────────────────────────────── */
.contact-editor .ce-preview {
  font-size: 14px;
}
.contact-editor .ce-pv-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 12px;
}
.contact-editor .ce-pv-label i {
  margin-right: 6px;
}
.contact-editor .ce-pv-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}
.contact-editor .ce-pv-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 22px 18px;
}
.contact-editor .ce-pv-avatar {
  width: 64px;
  height: 64px;
  font-size: 22px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--gray-100);
  color: var(--gray-600);
}
.contact-editor .ce-pv-headtext {
  min-width: 0;
}
.contact-editor .ce-pv-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--gray-900);
}
.contact-editor .ce-pv-name.is-empty {
  color: var(--gray-400);
  font-weight: 600;
}
.contact-editor .ce-pv-co {
  display: block;
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 2px;
}
.contact-editor .ce-pv-site {
  display: block;
  font-size: 12px;
  color: var(--brand-600);
  margin-top: 4px;
  word-break: break-all;
}

/* Notes callout */
.contact-editor .ce-pv-notes {
  margin: 0 22px 14px;
  background: var(--amber-50);
  border-left: 3px solid var(--amber-300);
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
}
.contact-editor .ce-pv-notes-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--amber-800);
}
.contact-editor .ce-pv-notes-body {
  display: block;
  font-size: 13px;
  color: var(--gray-700);
  margin-top: 3px;
  white-space: pre-wrap;
}

/* Group pills */
.contact-editor .ce-pv-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 22px 14px;
}
.contact-editor .ce-pv-tag {
  display: inline-flex;
  align-items: center;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 9999px;
}

/* Number + email rows */
.contact-editor .ce-pv-rows {
  border-top: 1px solid var(--gray-100);
}
.contact-editor .ce-pv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--gray-100);
}
.contact-editor .ce-pv-rows .ce-pv-row:last-child {
  border-bottom: none;
}
.contact-editor .ce-pv-ri {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-editor .ce-pv-row.is-default .ce-pv-ri {
  background: #dcfce7;
  color: #15803d;
}
.contact-editor .ce-pv-rmeta {
  min-width: 0;
}
.contact-editor .ce-pv-rt {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
}
.contact-editor .ce-pv-rv {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}
.contact-editor .ce-pv-defbadge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-700);
  background: var(--brand-100);
  padding: 1px 6px;
  border-radius: 9999px;
  margin-left: 6px;
}