.react-table-mapping{width:100%;height:fit-content;padding:20px}.mapping-container{position:relative;display:flex;justify-content:space-between;height:fit-content;background-color:var(--color-bg-mapping-primary);border-radius:12px;overflow:auto}.custom-cell-text,.custom-cell-input,.custom-cell-select{padding:12px;flex:1;font-size:14px;color:var(--color-text-default)}.custom-cell-text{margin:0 4px}.mapping-table-input-container{position:relative;width:100%}.mapping-table-input{display:flex;height:26px;width:100%;border-radius:6px;border:1px solid var(--color-border-default);background-color:var(--color-bg-mapping-secondary);color:var(--color-text-default);padding:4px 6px;line-height:1;font-size:14px;outline:none}.mapping-table-input::placeholder{color:var(--color-text-tertiary)}.mapping-table-input:hover{background-color:var(--color-bg-mapping-secondary-hover)}.mapping-table-input:hover::placeholder{color:var(--color-text-secondary)}.mapping-table-input:focus{background-color:var(--color-bg-mapping-secondary)}.mapping-table-input:focus::placeholder{color:var(--color-text-secondary)}.mapping-table-input:focus-visible{outline:none;box-shadow:0 0 0 2px var(--gray-1000)}.mapping-table-input:read-only{cursor:default}.mapping-table-input:disabled{cursor:not-allowed;background-color:var(--color-bg-mapping-secondary-disabled);color:var(--color-text-secondary)}.mapping-table-input[type=file]{padding-left:86px}.mapping-table-input[type=file]::file-selector-button{position:absolute;top:0;left:0;margin-right:0;height:100%;border-radius:6px 0 0 6px;border:1px solid var(--color-border-default);background-color:var(--color-bg-mapping-secondary);padding:4px 6px;font-size:12px;font-weight:500;color:var(--color-text-default)}.mapping-table-input:disabled::file-selector-button{color:var(--color-text-secondary)}.mapping-table-input-with-start-icon{padding-left:28px}.mapping-table-input-with-end-icon{padding-right:28px}.mapping-table-input-icon-start{position:absolute;top:50%;left:6px;height:16px;width:16px;transform:translateY(-50%);color:var(--color-icon-tertiary)}.mapping-table-input-icon-end{position:absolute;top:50%;right:6px;height:16px;width:16px;transform:translateY(-50%);color:var(--color-icon-tertiary)}.mapping-table-input-container:hover .mapping-table-input-icon-start,.mapping-table-input-container:hover .mapping-table-input-icon-end{color:var(--color-icon-secondary)}.mapping-table-input:focus~.mapping-table-input-icon-start,.mapping-table-input:focus~.mapping-table-input-icon-end{color:var(--color-icon-default)}.mapping-table-select-trigger{display:flex;height:fit-content;width:100%;cursor:pointer;align-items:center;justify-content:space-between;border-radius:6px;border:1px solid var(--color-border-default);background-color:var(--color-bg-mapping-primary);padding:4px 6px;height:26px;font-size:14px;color:var(--color-text-default);outline:none}.mapping-table-select-trigger:focus,.mapping-table-select-trigger:focus-visible{outline:2px solid var(--color-text-default);outline-offset:2px}.mapping-table-select-trigger:disabled{cursor:not-allowed;background-color:var(--color-bg-mapping-secondary-disabled);color:var(--color-text-secondary)}.mapping-table-select-trigger[data-size=default]{height:36px}.mapping-table-select-trigger[data-size=sm]{height:32px}.mapping-table-select-trigger>span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-height:1.5}.mapping-table-select-trigger[data-placeholder]{color:var(--color-text-tertiary)}.mapping-table-select-content{position:relative;z-index:103;max-height:var(--radix-select-content-available-height);min-width:var(--radix-select-trigger-width);overflow-x:hidden;overflow-y:auto;border-radius:6px;border:1px solid var(--color-border-default);background-color:var(--color-bg-mapping-primary);color:var(--color-text-default);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.mapping-table-select-content[data-side=bottom]{margin-top:4px}.mapping-table-select-content[data-side=left]{margin-right:4px}.mapping-table-select-content[data-side=right]{margin-left:4px}.mapping-table-select-content[data-side=top]{margin-bottom:4px}.mapping-table-select-content .radix-select-viewport{padding:2px}.mapping-table-select-label{color:var(--color-text-default);padding:4px 6px;font-size:14px;font-weight:700}.mapping-table-select-item{position:relative;display:flex;min-height:30px;width:100%;cursor:default;user-select:none;align-items:center;border-radius:2px;padding:4px 28px 4px 6px;font-size:14px;outline:none}.mapping-table-select-item:focus,.mapping-table-select-item:hover{background-color:var(--color-bg-mapping-primary-hover)}.mapping-table-select-item[data-disabled]{pointer-events:none;opacity:.5}.mapping-table-select-item .item-indicator{position:absolute;right:8px;display:flex;height:14px;width:14px;align-items:center;justify-content:center;color:var(--color-text-default)}.mapping-table-select-separator{background-color:var(--color-border-default);margin:4px -4px;height:1px}.mapping-table-select-scroll-up-button,.mapping-table-select-scroll-down-button{display:flex;cursor:default;align-items:center;justify-content:center;padding:4px 0}.select-icon{height:16px;width:16px;opacity:.5}.mapping-table-container{position:relative;height:100%;width:100%;overflow:auto;border-radius:8px;border:1px solid var(--color-border-default)}.mapping-table{width:100%;caption-side:bottom;font-size:14px}.mapping-table-header{background-color:var(--color-bg-mapping-secondary);color:var(--color-text-secondary);font-weight:500}.mapping-table-header tr{border-bottom:1px solid var(--color-border-default)}.mapping-table-body tr:last-child{border-bottom:0}.mapping-table-footer{height:52px;width:fit-content;border-top:1px solid var(--color-border-default);background-color:var(--color-bg-mapping-secondary);padding:8px;font-weight:500;font-size:14px}.mapping-table-footer tr:last-child{border-bottom:0}.mapping-table-row{border-bottom:1px solid var(--color-border-default)}.mapping-table-row:hover{background-color:var(--color-bg-mapping-primary-hover)}.mapping-table-row[data-state=selected]{background-color:var(--color-bg-mapping-primary-selected)}.mapping-table-head{height:40px;border-right:1px solid var(--color-border-default);padding:0 8px;text-align:center;vertical-align:middle;font-weight:500;color:var(--color-text-secondary)}.mapping-table-head:last-child{border-right:0}.mapping-table-head:has([role=checkbox]){padding-right:0}.mapping-table-cell{padding:12px 16px;vertical-align:middle;font-size:14px}.mapping-table-cell:has([role=checkbox]){padding-right:0}.mapping-table-caption{margin-top:16px;color:var(--color-text-secondary)}.mapping-button{color:var(--color-text-secondary);cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;border-radius:.375rem;font-size:.875rem;font-weight:500;outline:none;transition:all .2s ease-in-out;border:none;&:focus-visible{border-color:var(--color-border-focus, #3b82f6);ring:3px solid rgba(59,130,246,.5)}&:disabled{opacity:.5;cursor:not-allowed!important}& svg:not([class*=size-]){width:1rem;height:1rem}& svg{pointer-events:none;flex-shrink:0}&[aria-invalid=true]{border-color:var(--color-border-destructive, #ef4444);ring:3px solid rgba(239,68,68,.2)}}.mapping-button--default{background-color:var(--color-bg-primary, #3b82f6);color:var(--color-text-primary-foreground, white);box-shadow:0 1px 2px #0000000d;&:hover:not(:disabled){background-color:var(--color-bg-primary-hover, #2563eb)}&:disabled:hover{background-color:var(--color-bg-primary, #3b82f6)}}.mapping-button--destructive{background-color:var(--color-bg-destructive, #ef4444);color:#fff;box-shadow:0 1px 2px #0000000d;&:hover:not(:disabled){background-color:var(--color-bg-destructive-hover, #dc2626)}&:focus-visible{ring-color:rgba(239,68,68,.2)}}.mapping-button--outline{background-color:var(--button-outline-bg, var(--color-bg-default, white));border:1px solid var(--color-border-default, #d1d5db);color:var(--color-text-default, #374151);box-shadow:0 1px 2px #0000000d;&:hover:not(:disabled){background-color:var(--button-outline-hover, var(--color-bg-hover, #f9fafb));color:var(--color-text-default, #374151)}&:disabled:hover{background-color:var(--button-outline-bg, var(--color-bg-default, white))}}.mapping-button--secondary{background-color:var(--color-bg-secondary, #f3f4f6);color:var(--color-text-secondary-foreground, #374151);box-shadow:0 1px 2px #0000000d;&:hover:not(:disabled){background-color:var(--color-bg-secondary-hover, #e5e7eb)}}.mapping-button--ghost{background-color:transparent;&:hover:not(:disabled){background-color:var(--color-bg-accent, #f3f4f6);color:var(--color-text-accent-foreground, #374151)}}.mapping-button--link{color:var(--color-text-primary, #3b82f6);text-decoration:underline;text-underline-offset:4px;background-color:transparent;&:hover:not(:disabled){text-decoration:underline}}.mapping-button--default{height:2.25rem;padding:.5rem 1rem;&:has(>svg){padding-left:.75rem;padding-right:.75rem}}.mapping-button--sm{height:2rem;gap:.375rem;border-radius:.375rem;padding:0 .75rem;&:has(>svg){padding-left:.625rem;padding-right:.625rem}}.mapping-button--lg{height:2.5rem;border-radius:.375rem;padding:0 1.5rem;&:has(>svg){padding-left:1rem;padding-right:1rem}}.mapping-button--icon{width:1.5rem;height:1.5rem;padding:0}.source-table{min-width:300px;max-height:fit-content;background-color:var(--color-bg-mapping-primary);border-radius:14px;z-index:10;margin-right:48px}.source-table-header{background-color:var(--color-bg-mapping-secondary);border-bottom:1px solid var(--color-border-default);border-radius:14px 14px 0 0}.source-table-header-container{display:flex;align-items:center;gap:4px;padding:0}.source-table-header-cell{padding:12px;font-weight:500;text-align:center;flex-grow:1;color:var(--color-text-default)}.source-table-row-container{display:flex;align-items:center;justify-content:space-between;gap:4px;border-bottom:1px solid var(--color-border-default)}.source-table-row{display:grid;align-items:center;position:relative;height:61px}.source-table-row:hover{background-color:color-mix(in oklab,var(--color-bg-mapping-primary-hover) 20%,transparent)}.source-connector{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:100%;background-color:var(--color-icon-primary);border:2px solid var(--color-bg-mapping-primary);z-index:9999;cursor:pointer;transition:all .2s ease-in-out;box-shadow:0 1px 2px #0000000d;transition:all .1s ease-in-out}.connector:hover{scale:1.1;background-color:var(--color-icon-info)}.target-table{max-height:fit-content;min-width:300px;background-color:var(--color-bg-mapping-primary);border-radius:14px;z-index:10;margin-left:48px}.target-table-header{background-color:var(--color-bg-mapping-secondary);border-bottom:1px solid var(--color-border-default);border-radius:14px 14px 0 0}.target-table-header-container{display:flex;align-items:center;gap:4px;padding:0}.target-table-header-cell{padding:12px;font-weight:500;text-align:center;flex-grow:1;color:var(--color-text-default)}.target-table-row{display:grid;align-items:center;position:relative}.target-table-row-container{display:flex;align-items:center;justify-content:space-between;gap:4px;border-bottom:1px solid var(--color-border-default);height:61px}.target-table-row:hover{background-color:color-mix(in oklab,var(--color-bg-mapping-primary-hover) 20%,transparent)}.target-connector{position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:100%;background-color:var(--color-icon-primary);border:2px solid var(--color-bg-mapping-primary);z-index:9999;cursor:pointer;transition:all .2s ease-in-out;box-shadow:0 1px 2px #0000000d;transition:all .1s ease-in-out}.table{min-width:400px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px #0000001a;z-index:1}.table-header{display:flex;background-color:#f5f5f5;border-bottom:1px solid #e0e0e0;border-radius:4px 4px 0 0}.header-cell{padding:12px;font-weight:700;flex:1;text-align:center}.table-body{max-height:calc(100vh - 200px)}.table-row{display:flex;border-bottom:1px solid #e0e0e0;position:relative;height:50px;align-items:center}.cell{padding:12px;flex:1}.detail-btn{padding:5px 10px;background-color:#4285f4;color:#fff;border:none;border-radius:4px;cursor:pointer}.mapping-svg{flex:1;width:100%;position:absolute;top:0;left:0;right:0}.mapping-svg path,.mapping-svg foreignObject,.mapping-svg g{pointer-events:auto}.delete-btn{display:flex;align-items:center;justify-content:center;width:16px;height:16px;background-color:#ff5252;color:#fff;border-radius:50%;font-size:10px;cursor:pointer;box-shadow:0 1px 3px #0000004d}.delete-btn:hover{background-color:#ff1a1a}.delete-btn-circle{display:flex;align-items:center;justify-content:center;width:16px;height:16px;background-color:#ff5252;color:#fff;border-radius:50%;margin:3px;font-size:12px;cursor:pointer;box-shadow:0 2px 5px #0000004d;border:1px solid white;transition:transform .2s,background-color .2s}.delete-btn-circle:hover{background-color:#ff1a1a}.mapping-line-group path.line-base{fill:none;pointer-events:none}.mapping-line-group path.hover-area{stroke:transparent;fill:none;cursor:pointer}.mapping-line-group path.hover-area.dragging{cursor:default}.mapping-line-group:hover path.line-base{filter:drop-shadow(0 0 2px rgba(33,150,243,.3))}.mapping-line-group.hovered{z-index:1000}.mapping-delete-button{width:16px;height:16px;border:1px solid var(--color-border-danger);display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-mapping-primary);border-radius:50%;color:var(--color-icon-danger);box-shadow:0 1px 2px #0000000d}.mapping-delete-button:hover{box-shadow:0 4px 6px -1px #0000001a;transform:scale(1.1)}.mapping-delete-button.dragging{cursor:default;opacity:.5}.mapping-delete-button:not(.dragging){cursor:pointer}.mapping-delete-icon{width:10px;height:10px}.no-data-container{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;height:100%;border:1px solid var(--color-border-default);border-top:0;padding:2rem 0;color:var(--color-text-secondary);border-bottom-right-radius:.3rem;border-bottom-left-radius:.3rem}:root{--gray-1000: #151826;--gray-900: #242632;--gray-800: #545667;--gray-700: #676a7b;--gray-600: #8f92a4;--gray-500: #afb2c5;--gray-400: #d3d6ea;--gray-300: #e4e6fa;--gray-200: #eef0ff;--gray-100: #f3f4f9;--gray-50: #ffffff;--info-900: #0369d3;--info-600: #009bff;--info-500: #34aaff;--info-400: #5ebaff;--info-300: #8ecdff;--info-100: #e3f3ff;--danger-600: #dc3412;--color-text-default: var(--gray-1000);--color-text-secondary: var(--gray-700);--color-text-tertiary: var(--gray-600);--color-text-danger: var(--danger-600);--color-icon-primary: var(--info-900);--color-icon-info: var(--info-600);--color-icon-danger: var(--danger-600);--color-bg-mapping-primary: var(--gray-50);--color-bg-mapping-primary-hover: var(--gray-100);--color-bg-mapping-secondary: var(--gray-100);--color-bg-mapping-secondary-hover: var(--gray-200);--color-bg-mapping-secondary-selected: var(--gray-400);--color-bg-mapping-secondary-disabled: var(--gray-300);--color-border-default: var(--gray-400);--color-border-danger: var(--danger-600);--shadow-sm: 0px 1px 2px 0px #0000000d}.dark{--gray-1000: #151826;--gray-900: #242632;--gray-800: #545667;--gray-700: #676a7b;--gray-600: #8f92a4;--gray-500: #afb2c5;--gray-400: #d3d6ea;--gray-300: #e4e6fa;--gray-200: #eef0ff;--gray-100: #f3f4f9;--gray-50: #ffffff;--info-900: #0369d3;--info-600: #009bff;--info-500: #34aaff;--info-400: #5ebaff;--info-300: #8ecdff;--info-100: #e3f3ff;--danger-600: #dc3412;--color-text-default: var(--gray-100);--color-text-secondary: var(--gray-400);--color-text-tertiary: var(--gray-500);--color-text-danger: var(--danger-600);--color-icon-primary: var(--info-300);--color-icon-info: var(--info-300);--color-icon-danger: var(--danger-600);--color-bg-mapping-primary: var(--gray-900);--color-bg-mapping-primary-hover: var(--gray-700);--color-bg-mapping-secondary: var(--gray-1000);--color-bg-mapping-secondary-hover: var(--gray-600);--color-bg-mapping-secondary-selected: var(--gray-500);--color-bg-mapping-secondary-disabled: var(--gray-700);--color-border-default: var(--gray-800);--color-border-danger: var(--danger-600);--shadow-sm: 0px 0px .5px 0px rgba(0, 0, 0, .5), 0px .5px 0px 0px rgba(255, 255, 255, .1) inset, 0px 0px .5px 0px rgba(255, 255, 255, .3) inset, 0px 1px 3px 0px rgba(0, 0, 0, .4)}