:host {
    --smepro-green: #5fa832;
    --smepro-teal: #3f9a86;
}

:host {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.slds-dropdown{
    border:1px solid black;
    border-radius: 0px;
    border-color: black !important;
    background-color: white;
}

/* PageLoading GIF */
.pageLoading-Gif{
	width: 30%;
	margin-top: 2%;
}

.sw-loading-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	min-height: 100%;
	width: 100%;
	background: linear-gradient(180deg, #f4faee 0%, #eaf3fb 100%);
	border-radius: 16px;
}

.fieldParent-text-color{
    color: #1c2b23 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.accountIconColor{
  background-color: transparent;
  color: #4f8a24;
  border-radius: 9px;
  box-shadow: none;
  --slds-c-icon-color-foreground: #4f8a24;
  --sds-c-icon-color-foreground: #4f8a24;
  --slds-c-icon-color-foreground-default: #4f8a24;
  --sds-c-icon-color-foreground-default: #4f8a24;
}

/* Icon color  */

.green-icon{
    --lwc-colorTextIconDefault: #5fa832;
}

/* ── Custom toggle switch (same as Step 3) ── */
.obj-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgb(205, 212, 205);
    transition: background .2s, box-shadow .2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.obj-toggle-track:focus,
.obj-toggle-track:focus-visible,
.obj-toggle-track:active {
    outline: none;
    box-shadow: none;
}
.obj-toggle-track_on {
    /* background: rgb(95, 168, 50); */
    background: linear-gradient(120deg, #5fa832, #2f8fb0);
    box-shadow: rgba(58, 150, 120, 0.16) 0px 0px 0px 3px, rgba(58, 150, 120, 0.5) 0px 4px 10px -2px;
}
.obj-toggle-track_on:focus,
.obj-toggle-track_on:focus-visible,
.obj-toggle-track_on:active {
    box-shadow: rgba(58, 150, 120, 0.16) 0px 0px 0px 3px, rgba(58, 150, 120, 0.5) 0px 4px 10px -2px;
}
.obj-toggle-track:disabled {
    cursor: not-allowed;
    opacity: .7;
}
.obj-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.obj-toggle-track_on .obj-toggle-knob {
    left: 21px;
}

.slds-combobox_container.slds-has-selection .slds-combobox__input-value, .slds-combobox_container.slds-has-selection .slds-combobox__input-value:focus {
    box-shadow: 0 0 0 0px;
}

:host{
    --sds-c-checkbox-toggle-color-background-checked: rgb(95, 168, 50) !important;
    --slds-c-checkbox-toggle-color-background-hover: rgb(95, 168, 50) !important;
}

/* ── Search box styling ── */
.search-col .searchBoxWrapper {
    background: rgb(247, 249, 246);
    border: 1px solid rgb(226, 231, 226);
    border-radius: 9px;
    padding: 4px 8px;
}
.search-col .searchBoxWrapper lightning-input {
    --sds-c-input-color-border: transparent;
    --slds-c-input-color-border: transparent;
    --sds-c-input-shadow: none;
    --slds-c-input-shadow: none;
    --sds-c-input-color-background: transparent;
    --slds-c-input-color-background: transparent;
}

/* Error when account lookup is empty */
.hasError .slds-input {
    border-color: red !important;
    background-color: white;
}
.object-table{
    position: relative;
    z-index: 5;
}

/* ── Card container ── */
.custom-form-card .slds-box {
    box-shadow: 0 10px 26px -16px rgba(23,43,32,.28);
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e6ebe6;
    margin-top: 9px;
    overflow: visible;
}

/* ── Section headers (Customer Settings, Opportunity Settings) ── */
.fm-section-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #1c2b23;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 20px 26px 16px;
    border-bottom: 1px solid #e4ebe6;
    margin: 0;
    line-height: 1.3;
}

/* ── Setting row (toggle + label inline) ── */
.fm-setting-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px;
    min-height: 48px;
}

/* ── Setting row label ── */
.fm-setting-label {
    font-size: 14.5px;
    font-weight: 600;
    color: #37453d;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.4;
    word-break: break-word;
}

.fm-setting-label .slds-required {
    color: #c23934;
    text-decoration: none;
    margin-right: 2px;
}

.fm-stage-row {
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.fm-stage-label {
    flex: 0 0 auto;
}

.fm-stage-combobox {
    flex: 1 1 auto;
    max-width: 320px;
}

.fm-stage-combobox lightning-combobox {
    --slds-c-input-radius-border: 8px;
    --sds-c-input-radius-border: 8px;
}

/* Make the picklist dropdown scrollable after ~5 options */
.fm-stage-combobox .slds-listbox,
.fm-stage-combobox .slds-dropdown,
.fm-stage-combobox .slds-listbox_vertical,
.fm-stage-combobox ul[role="listbox"],
.fm-stage-combobox div[role="listbox"] {
    max-height: 165px !important;
    overflow-y: auto !important;
    display: block !important;
}

.fm-stage-combobox li[role="presentation"],
.fm-stage-combobox .slds-listbox__item {
    max-height: 33px;
}

.fm-closedate-row {
    justify-content: flex-start;
}

.fm-closedate-label {
    flex: 0 0 auto;
    min-width: 190px;
    font-weight: 600 !important;
}

.fm-stage-label {
    min-width: 190px;
    font-weight: 600 !important;
}

.fm-toggle-spacer {
    flex: 0 0 auto;
    width: 42px;
    margin-right: 20px;
}

.fm-days-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    margin-left: 20px;
}

.fm-days-input {
    flex: 1 1 auto;
    max-width: 320px;
}

/* lightning-input renders its own <input> inside a shadow root, so a gradient
   cannot be set on that inner element from here (and the styling hooks below
   only take flat colours, not gradients). Same approach as .field-input in
   shopifyCredentials: paint the gradient on the HOST element and force the
   inner input transparent so the gradient shows through. */
.fm-days-input {
    background: linear-gradient(120deg, rgb(244, 250, 238) 0%, rgb(234, 243, 251) 100%);
    border-radius: 8px;
    --slds-c-input-color-background: transparent;
    --sds-c-input-color-background: transparent;
    --slds-c-input-color-background-focus: transparent;
    --slds-c-input-color-background-disabled: transparent;
    --lwc-colorBackgroundInput: transparent;
    --lwc-colorBackgroundInputDisabled: transparent;
    --slds-c-input-radius-border: 8px;
    --sds-c-input-radius-border: 8px;
    --slds-c-input-color-border: rgb(220, 232, 226);
    --sds-c-input-color-border: rgb(220, 232, 226);
}

.fm-tooltip-wrap {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* ── Tooltip ── */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltiptext {
    visibility: hidden;
    width: 250px;
    background: linear-gradient(120deg, #5fa832, #2f8fb0);
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 10px 12px;
    position: absolute;
    z-index: 10;
    top: -20%;
    left: 20px;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 8px 20px -8px rgba(23,43,32,.4);
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  border-style: solid;
  right: 99%;
  top: 4px;
  margin-left: -10px;
  border-width: calc(.5rem);
  border-color: transparent #5fa832 transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.sme-fieldmappingchildopportunity{
  position: relative;
}

/* ── Footer actions (Back + Save & Next) ── */
.sw-actions {
    padding: 18px 26px 22px;
    border-top: 1px solid #f0f2f0;
    margin-top: 12px;
    background: #fff;
    border-radius: 0 0 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sw-btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #37453d;
    border: 1px solid #d4d9d4;
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: box-shadow .2s, border-color .2s;
}
.sw-btn-back:hover {
    border-color: #5fa832;
    box-shadow: 0 2px 8px rgba(95,168,50,.15);
}

.sw-btn-save {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(120deg, #5fa832, #2f8fb0);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 11px 24px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(95,168,50,.3);
    transition: box-shadow .2s, transform .15s;
}
.sw-btn-save:hover {
    box-shadow: 0 8px 22px -4px rgba(58,150,120,.65), 0 3px 8px rgba(95,168,50,.3);
    transform: translateY(-1px);
}

/* ── Responsive ── */

/* Card padding shrink on narrow viewports */
@media (max-width: 1300px) {
  .search-col {
    transform: translate(-10px, -4px) !important;
  }
  .fm-section-title {
    padding: 18px 16px 14px;
    font-size: 17px;
  }
}

@media (max-width: 1100px) {
  .search-col {
    transform: translate(0px, -4px) !important;
  }
  .myToggleClass {
    padding: 0;
    margin-left: -20px;
  }
}

@media (max-width: 900px) {
  .custom-form-card .slds-box {
    padding: 8px !important;
  }
  .fm-section-title {
    padding: 14px 12px 10px;
    font-size: 16px;
  }
  .sw-actions {
    padding: 14px 16px 18px;
  }
  .sw-btn-back,
  .sw-btn-save {
    padding: 8px 14px;
    font-size: 12px;
  }
}

@media (max-width:1500px){
    .sme-field-mapping{
        padding-inline: 0;
    }
}/* ============================================================
   Custom in-component toasts (replaces ShowToastEvent). Success uses the
   brand green→teal gradient reference; error uses red. Added by UI packaging.
   ============================================================ */
.sw-toast-container { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 420px; pointer-events: none; }
.sw-toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(23,43,32,.45); color: #fff; width: 100%; box-sizing: border-box; pointer-events: auto; animation: sw-toast-in 180ms ease; }
@keyframes sw-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.sw-toast-icon { flex-shrink: 0; font-size: 15px; line-height: 1.3; font-weight: 700; }
.sw-toast-body { flex: 1; min-width: 0; }
.sw-toast-title { font-weight: 800; font-size: 13.5px; line-height: 1.3; }
.sw-toast-message { font-size: 12.5px; line-height: 1.4; opacity: .95; margin-top: 2px; word-break: break-word; }
.sw-toast-close { flex-shrink: 0; background: transparent; border: none; color: inherit; opacity: .85; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; font-family: inherit; }
.sw-toast-close:hover { opacity: 1; }
.sw-toast-success { background: linear-gradient(120deg, var(--smepro-green), var(--smepro-teal)); }
.sw-toast-error { background: linear-gradient(120deg, #e9923d, #b56a1f); }
.sw-toast-warning { background: #f59e0b; color: #1f2937; }
.sw-toast-info { background: #3b7ec4; }