/* Mock Data Generator Specific Styles */

.field-row {
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.field-row:hover {
    background-color: #f8f9fa;
    border-left-color: var(--bs-primary);
}

.field-drag-handle {
    opacity: 0.5;
    transition: opacity 0.2s;
}

.field-row:hover .field-drag-handle {
    opacity: 1;
}

.preview-container {
    border-top: 1px solid #eee;
}

/* Custom Scrollbar for Preview */
.table-responsive::-webkit-scrollbar,
#codePreviewContainer::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track,
#codePreviewContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb,
#codePreviewContainer::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
#codePreviewContainer::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Sticky header for table */
#previewTable thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
    box-shadow: 0 1px 0 #dee2e6;
}

/* Pre/Code styling */
#codePreviewContainer pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}