/*
 * Amazon Template Mapping Styles
 *
 * @package    MOMCS_Sync
 * @subpackage assets/css
 * @author     miniOrange
 */

.momcs-template-mapping-container {
    margin: 0px 0;
}

.momcs-template-mapping-description {
    margin-bottom: 20px;
}

.momcs-template-mapping-header {
    display: flex;
    margin-bottom: 10px;
    font-weight: bold;
}

.momcs-template-mapping-row {
    display: flex;
    margin-bottom: 10px;
}

.momcs-template-mapping-col {
    padding: 5px;
}

.momcs-template-mapping-wc-col {
    flex: 1;
    margin-right: 10px;
}

.momcs-template-mapping-amazon-col {
    flex: 1;
}

.momcs-template-mapping-status {
    display: inline-block;
    margin-left: 10px;
    line-height: 28px;
}

/* Field mapping styles */
.momcs-field-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.momcs-enum-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.momcs-enum-or {
    color: #666;
    font-style: italic;
    font-size: 12px;
}

.momcs-enum-select {
    min-width: 150px;
    padding: 4px;
}

.momcs-field-mapping-row-wc-field {
    min-width: 200px;
}

/* Required and optional field styles */
.momcs-required-field {
    background-color: #ffffff;
}

/* Fields that are required at nested levels but not at top level */
.momcs-nested-required-field {
    background-color: #ffffff;
    /* No special styling needed, just structural class */
}

.momcs-optional-field {
    background-color: #f9f9f9;
    color: #666;
}

.momcs-required-label {
    display: inline-block;
    color: #d63638;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    font-weight: bold;
    text-transform: uppercase;
}

.momcs-optional-label {
    display: inline-block;
    background-color: #dddddd;
    color: #666;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    font-weight: bold;
    text-transform: uppercase;
}

.momcs-error {
    color: #d9534f;
}

.momcs-template-mapping-status-saving {
    color: #f0ad4e;
}

.momcs-template-mapping-status-success {
    color: #5cb85c;
}

.momcs-template-mapping-status-error {
    color: #d9534f;
}

/* Error highlighting */
.momcs-mapping-field-error {
    border: 2px solid #d63638 !important;
    background-color: #fbeaea !important;
}

.momcs-validation-errors {
    margin: 20px 0;
}

.momcs-validation-errors .notice {
    margin: 0;
    padding: 10px 12px;
}

.momcs-validation-errors ul {
    margin: 0;
    padding-left: 20px;
}

.momcs-validation-errors li {
    margin: 5px 0;
}


.momcs-parent-field-header {
    background-color: #fff7ed !important;
    border-left: 4px solid #f97316 !important;
}

.momcs-nested-field-header {
    background-color: #fef3c7 !important;
    border-left: 4px solid #ea580c !important;
}

.momcs-collapsible-toggle {
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}

.momcs-collapsible-toggle:hover {
    background-color: #e9ecef;
}

.momcs-toggle-icon {
    margin-right: 8px;
    font-size: 12px;
    transition: transform 0.2s;
}

.momcs-field-type {
    color: #6c757d;
    font-size: 12px;
    margin-left: 8px;
}

.momcs-field-description {
    font-size: 12px;
    color: #6c757d;
    margin-top: 4px;
    font-style: italic;
}

.momcs-child-field-indent {
    margin-left: 28px;
    position: relative;
}

.momcs-child-field-indent:before {
    content: "└─";
    position: absolute;
    left: -24px;
    color: #d1d5db;
}

.momcs-nested-level-2 {
    margin-left: 56px;
    position: relative;
}

.momcs-nested-level-2:before {
    content: "└─";
    position: absolute;
    left: -24px;
    color: #d1d5db;
}

.momcs-nested-level-3 {
    margin-left: 84px;
    position: relative;
}

.momcs-nested-level-3:before {
    content: "└─";
    position: absolute;
    left: -24px;
    color: #d1d5db;
}

.momcs-nested-level-4 {
    margin-left: 112px;
    position: relative;
}

.momcs-nested-level-4:before {
    content: "└─";
    position: absolute;
    left: -24px;
    color: #d1d5db;
}

.momcs-child-field-row {
    background-color: #fafafa;
}

.momcs-child-field-row td {
    border-left: 4px solid #fed7aa !important;
}

.momcs-nested-section td {
    border-left: 4px solid #ea580c !important;
}

.momcs-nested-field-select {
    width: 100%;
}

/* Parent category warning styles */
.momcs-warning-container {
    margin: 15px 0;
}

.momcs-warning-container .notice {
    margin: 0;
}

.momcs-parent-category .option {
    font-weight: bold;
    color: #ea580c;
}

.momcs-child-category-tag {
    display: inline-block;
    background: #f1f1f1;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    font-size: 12px;
    color: #555;
}

.momcs-more-count {
    color: #666;
    font-style: italic;
}

#momcs-child-preview {
    line-height: 1.6;
}

/* Visual distinction for parent categories in dropdown */
.momcs-template-mapping-wc-category option.momcs-parent-category {
    font-weight: bold;
    background-color: #f8f9fa;
}

.momcs-template-mapping-wc-category option.momcs-child-category {
    padding-left: 15px;
}

/* Enhanced warning styles */
.momcs-recommendations {
    margin-top: 10px;
    padding-left: 10px;
}

.momcs-recommendation {
    margin: 5px 0;
    color: #555;
    line-height: 1.4;
}

.momcs-conflict-tag {
    display: inline-block;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 3px;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    font-size: 12px;
    color: #856404;
}

/* ==========================================================================
   SearchableSelect Component
   Modeled on .momcs-region-search-* from amazon-authorization.css
   ========================================================================== */

.momcs-searchable-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    height: 36px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    cursor: text;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.momcs-searchable-wrapper:hover {
    border-color: #b4b4b4;
}

.momcs-searchable-wrapper:focus-within {
    border-color: #f97316;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.15);
}

.momcs-searchable-search-icon {
    flex-shrink: 0;
    color: #9ca3af;
}

.momcs-searchable-chevron {
    flex-shrink: 0;
    color: #9ca3af;
    transition: transform 0.15s ease-in-out;
}

.momcs-searchable-wrapper:focus-within .momcs-searchable-chevron {
    transform: rotate(180deg);
}

.momcs-searchable-input {
    flex: 1;
    height: 28px;
    min-width: 0;
    padding: 0 2px;
    font-size: 13px;
    color: #1f2937;
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

.momcs-searchable-input::placeholder {
    color: #9ca3af;
    font-size: 13px;
}

/* Selected display (for chip rendering in template select) */
.momcs-searchable-selected-display {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    line-height: 28px;
}

.momcs-searchable-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s ease-in-out;
}

.momcs-searchable-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.momcs-searchable-result-item {
    padding: 8px 12px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
}

.momcs-searchable-result-item:hover,
.momcs-searchable-result-item.is-focused {
    background: #fff7ed;
}

.momcs-searchable-result-item:first-child {
    border-radius: 8px 8px 0 0;
}

.momcs-searchable-result-item:last-child {
    border-radius: 0 0 8px 8px;
}

.momcs-searchable-no-results {
    padding: 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}

/* Optgroup headers inside the searchable dropdown */
.momcs-searchable-group-header {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    cursor: default;
    user-select: none;
}

.momcs-searchable-group-header:first-child {
    border-top: none;
}

/* Pinned item styles (Add New Attribute) */
.momcs-searchable-pinned-add-new {
    color: #ea580c;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.momcs-searchable-pinned-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
    line-height: 1;
}

.momcs-searchable-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

/* Error state for searchable wrapper */
.momcs-searchable-wrapper.momcs-searchable-error {
    border: 2px solid #d63638 !important;
    background-color: #fbeaea !important;
}

/* Disabled state for searchable wrapper */
.momcs-searchable-wrapper.momcs-searchable-disabled {
    opacity: 0.6;
    pointer-events: none;
    background: #f5f5f5;
}

/* ==========================================================================
   Category Chip Styles
   ========================================================================== */

/* Logo icons for chips (self-contained, no dependency on scheduled-sync.css) */
.momcs-category-chip .momcs-schedule-card-logo {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.momcs-category-chip .momcs-schedule-card-logo--wc {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDg1LjkgNDcuNiI+CjxwYXRoIGZpbGw9IiM2YjIxYTgiIGQ9Ik03Ny40LDAuMWMtNC4zLDAtNy4xLDEuNC05LjYsNi4xTDU2LjQsMjcuN1Y4LjZjMC01LjctMi43LTguNS03LjctOC41cy03LjEsMS43LTkuNiw2LjVMMjguMywyNy43VjguOAoJYzAtNi4xLTIuNS04LjctOC42LTguN0g3LjNDMi42LDAuMSwwLDIuMywwLDYuM3MyLjUsNi40LDcuMSw2LjRoNS4xdjI0LjFjMCw2LjgsNC42LDEwLjgsMTEuMiwxMC44UzMzLDQ1LDM2LjMsMzguOWw3LjItMTMuNXYxMS40CgljMCw2LjcsNC40LDEwLjgsMTEuMSwxMC44czkuMi0yLjMsMTMtOC43bDE2LjYtMjhjMy42LTYuMSwxLjEtMTAuOC02LjktMTAuOEM3Ny4zLDAuMSw3Ny4zLDAuMSw3Ny40LDAuMXoiLz4KPC9zdmc+Cg==");
}

.momcs-category-chip .momcs-schedule-card-logo--amazon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0Ij4KICA8cGF0aCBmaWxsPSIjODU0ZDBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Im0xNi40MTIgMTYuMjQgMS41ODcgLTEuNDY4YTAuNTMyIDAuNTMyIDAgMCAwIDAuMDI3IC0wLjczNmMtMC42NTUgLTAuNzY0IC0wLjg1MiAtMS40MDEgLTAuODUyIC0xLjg2MlY2LjA0NmMwLjAwNyAtMS4wMjUgLTAuOTczIC0zLjA3NiAtNC45NDUgLTMuMDc2IC0zLjUzOCAwIC00LjgyNiAyLjEgLTUuMTE1IDMuNDk1IC0wLjA1NSAwLjI2MyAwLjE0OCAwLjQ5NiAwLjQxNiAwLjUybDIuMDkgMC4xODljMC4yNTUgMC4wMjMgMC40ODMgLTAuMTUyIDAuNTgzIC0wLjM4NyAwLjI2IC0wLjYxIDAuODY3IC0xLjM4MyAyLjAyNiAtMS4zODMgMS4xNjggMCAxLjU3NyAwLjg5NSAxLjYzNSAxLjM0M1Y4LjEzYy01LjcyNCAwIC03LjIwNCAyLjQ5MiAtNy4yMDQgNC44NjcgMCAyLjM3NiAxLjczMyAzLjU2MyAzLjg1NSAzLjU2MyAxLjQwOSAwIDIuNzA5IC0wLjc3NyAzLjQzIC0xLjM2NGEwLjU0NyAwLjU0NyAwIDAgMSAwLjcyMyAwLjAxNGwxLjA1NyAxLjAyMmEwLjUgMC41IDAgMCAwIDAuNjg3IDAuMDA4Wm0tMy41MyAtMi41NzhjMS4yODMgLTAuOTc2IDAuOTg4IC0zLjY5OSAwLjk4OCAtMy42OTlzLTIuNDEyIC0wLjE2IC0zLjM1NCAxLjI4N2MtMC41MTQgMC43OSAtMC4zNDggMS44NjIgMC4yNzUgMi40MTIgMC41MTkgMC40NTggMS4zOTIgMC41MzIgMi4wOTEgMFptOC45NDkgMy4zNzNjLTAuMTU1IC0wLjE3NiAtMC44NjggLTAuMTE1IC0xLjU1MyAtMC4wNTcgLTAuNjggMC4wNTggLTEuMzMyIDAuMTEzIC0xLjM4NCAtMC4wNjcgLTAuMTA1IC0wLjM2MSAzLjE2NSAtMS4xOTggMy45NzMgLTAuNTQyIDAuNzAzIDAuNTcgLTEuMTEyIDMuOTM1IC0xLjYxMiAzLjY2NCAtMC4xIC0wLjA1NCAwLjA1IC0wLjQ2MSAwLjIzMiAtMC45NjMgMC4yNzQgLTAuNzUxIDAuNjI2IC0xLjcxNiAwLjM0NCAtMi4wMzVabS05LjgyNCAyLjMxM2MtNC41MjcgMCAtNy43NzEgLTEuNTY4IC05LjQ0NyAtMi4zNzggLTAuNzAxIC0wLjMzOSAtMS4xMjcgLTAuNTQ1IC0xLjI1OCAtMC40NDcgLTAuNDQxIDAuMzMgNC43MjQgNC40MTQgMTAuNzA1IDQuNDE0IDUuMjMxIDAgOS43NTYgLTIuODI1IDkuMDk0IC0zLjIgLTAuMjM3IC0wLjEzNCAtMC43MzMgMC4wMzMgLTEuNTM0IDAuMzA0IC0xLjQ0MiAwLjQ4NiAtMy44NzIgMS4zMDcgLTcuNTYgMS4zMDdaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=");
}

.momcs-category-chips-display {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.momcs-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

.momcs-category-chip-wc {
    background: #f3e8ff;
    color: #6b21a8;
    border: 1px solid #e9d5ff;
}

.momcs-category-chip-amazon {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
}

/* Override .momcs-schedule-card-logo size when used inside chips */
.momcs-category-chip .momcs-category-chip-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex-shrink: 0;
}

.momcs-category-chip-arrow {
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
}

/* ==========================================================================
   CSS-only Tooltip (data-tooltip attribute)
   ========================================================================== */

.momcs-field-tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.momcs-field-tooltip-trigger .momcs-tooltip-icon {
    width: 14px;
    height: 14px;
    color: #9ca3af;
    margin-left: 6px;
    flex-shrink: 0;
    transition: color 0.15s;
}

.momcs-field-tooltip-trigger:hover .momcs-tooltip-icon {
    color: #f97316;
}

.momcs-field-tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: normal;
    max-width: 300px;
    width: max-content;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.momcs-field-tooltip-trigger::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 14px;
    border: 5px solid transparent;
    border-top-color: #1f2937;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
}

.momcs-field-tooltip-trigger:hover::after,
.momcs-field-tooltip-trigger:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Modernized Field Mapping Table
   ========================================================================== */

.momcs-field-mapping-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.momcs-field-mapping-table thead th {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 14px;
    text-align: left;
    border: none;
}

.momcs-field-mapping-table thead th:first-child {
    border-radius: 8px 0 0 0;
}

.momcs-field-mapping-table thead th:last-child {
    border-radius: 0 8px 0 0;
}

.momcs-field-mapping-table tbody tr {
    transition: background 0.1s;
}

.momcs-field-mapping-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.momcs-field-mapping-table tbody tr:hover {
    background: #fff7ed;
}

.momcs-field-mapping-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    vertical-align: middle;
}

.momcs-field-mapping-table tbody tr:last-child td {
    border-bottom: none;
}

/* Required indicator */
.momcs-required-indicator {
    color: #d63638;
    font-weight: bold;
    margin-right: 4px;
}

/* ==========================================================================
   Shimmer Loading for SearchableSelect Wrappers
   ========================================================================== */

.momcs-searchable-wrapper.momcs-searchable-loading {
    position: relative;
    pointer-events: none;
}

.momcs-searchable-wrapper.momcs-searchable-loading .momcs-skeleton-select {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 6px;
    z-index: 5;
    background: linear-gradient(90deg, #f4f5f7 0%, #e9ecef 40%, #f4f5f7 80%);
    background-size: 200% 100%;
    animation: momcs-skeleton-shimmer 1.2s ease-in-out infinite;
}

.momcs-searchable-wrapper.momcs-searchable-loading .momcs-searchable-input,
.momcs-searchable-wrapper.momcs-searchable-loading .momcs-searchable-selected-display,
.momcs-searchable-wrapper.momcs-searchable-loading .momcs-searchable-search-icon,
.momcs-searchable-wrapper.momcs-searchable-loading .momcs-searchable-chevron {
    visibility: hidden;
}

@keyframes momcs-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Initial load, empty state, editor shell */
.momcs-template-mapping-init-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    min-height: 32px;
}

.momcs-template-mapping-init-loading .spinner {
    float: none;
    margin: 0;
}

.momcs-template-mapping-empty-state {
    margin: 20px 0 24px;
    padding: 28px 24px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #f6f7f7;
    max-width: 520px;
}

.momcs-template-mapping-empty-state-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.momcs-template-mapping-empty-state-desc {
    margin: 0 0 16px;
    color: #50575e;
    font-size: 14px;
    line-height: 1.5;
}

.momcs-template-mapping-rows-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}