{{-- This view has been merged with create.blade.php into form.blade.php --}}
{{-- Redirecting to the unified form view --}}
@include('data-management.dynamic-forms.form')
                                    <div class="d-flex align-items-center justify-content-between">
                                        <h6 class="mb-0">
                                            @if($section->icon)
                                                <i class="{{ $section->icon }} me-2" style="color: var(--primary-color);"></i>
                                            @else
                                                <i class="fas fa-layer-group me-2" style="color: var(--primary-color);"></i>
                                            @endif
                                            {{ $section->name }}
                                        </h6>
                                        @if($section->collapsible)
                                            <button type="button" class="btn btn-sm btn-outline-secondary" 
                                                    data-bs-toggle="collapse" 
                                                    data-bs-target="#section-content-{{ $section->id }}"
                                                    aria-expanded="{{ $section->collapsed_by_default ? 'false' : 'true' }}">
                                                <i class="fas fa-chevron-down"></i>
                                            </button>
                                        @endif
                                    </div>
                                    @if($section->description)
                                        <small style="color: var(--text-muted);">{{ $section->description }}</small>
                                    @endif
                                </div>
                                <div class="card-body collapse {{ $section->collapsed_by_default ? '' : 'show' }}" 
                                     id="section-content-{{ $section->id }}">
                                    @if($section->fields->count() > 0)
                                        <div class="row">
                                            @foreach($section->fields as $field)
                                                @php
                                                    $value = old($field->name, $record->{$field->name} ?? $field->default_value);
                                                @endphp
                                                <div class="{{ $field->width_class }} mb-3" id="field-wrapper-{{ $field->name }}">
                                                    @include('data-management.dynamic-forms.partials.edit-field', ['field' => $field, 'value' => $value, 'record' => $record])
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="text-center py-3">
                                            <i class="fas fa-info-circle fa-2x mb-2" style="color: var(--text-muted);"></i>
                                            <p style="color: var(--text-muted);">No fields configured for this section.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Form Actions -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-save me-2"></i>
                                    Update {{ $dataType->name }}
                                </button>
                                @if(isset($isManageDataRoute) && $isManageDataRoute)
                                    <a href="{{ route('manage-data.show', [$dataType->slug, $record->id]) }}" class="btn btn-outline-secondary btn-lg">
                                        <i class="fas fa-times me-2"></i>
                                        Cancel
                                    </a>
                                @else
                                    <a href="{{ route('data-management.data-types.data.show', [$dataType, $record->id]) }}" class="btn btn-outline-secondary btn-lg">
                                        <i class="fas fa-times me-2"></i>
                                        Cancel
                                    </a>
                                @endif
                            </div>
                            <div>
                                <button type="button" class="btn btn-outline-info" onclick="validateForm()">
                                    <i class="fas fa-check-circle me-2"></i>
                                    Validate Changes
                                </button>
                                <button type="button" class="btn btn-outline-warning" onclick="resetForm()">
                                    <i class="fas fa-undo me-2"></i>
                                    Reset Changes
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <!-- Sections Overview -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-layer-group me-2"></i>
                            Sections Overview
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <small class="text-muted">{{ $sections->count() }} sections configured</small>
                        </div>
                        
                        @foreach($sections as $index => $section)
                            <div class="d-flex align-items-center justify-content-between py-2 border-bottom section-progress-item" 
                                 data-section-id="{{ $section->id }}">
                                <div class="d-flex align-items-center">
                                    @if($section->icon)
                                        <i class="{{ $section->icon }} me-2" style="color: var(--primary-color); font-size: 0.9rem;"></i>
                                    @else
                                        <i class="fas fa-layer-group me-2" style="color: var(--primary-color); font-size: 0.9rem;"></i>
                                    @endif
                                    <small class="fw-medium">{{ $section->name }}</small>
                                </div>
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-light text-dark me-1" style="font-size: 0.7rem;">
                                        {{ $section->fields->count() }} fields
                                    </span>
                                    <i class="fas fa-check-circle text-success section-status-icon" 
                                       style="display: none; font-size: 0.8rem;"></i>
                                    <a href="#section-{{ $section->id }}" class="btn btn-outline-primary btn-sm py-0 px-1 ms-1" 
                                       style="font-size: 0.7rem;">
                                        <i class="fas fa-arrow-down"></i>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Change Tracking -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-edit me-2"></i>
                            Change Tracking
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <small>Modified Fields</small>
                                <small><span id="changed-fields-count">0</span> changes</small>
                            </div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar progress-bar-striped bg-warning" id="changes-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                        
                        <div id="changed-fields-list">
                            <div class="text-center py-3">
                                <i class="fas fa-info-circle fa-2x mb-2" style="color: var(--text-muted);"></i>
                                <p style="color: var(--text-muted);" class="mb-0">No changes made yet</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Progress -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-tasks me-2"></i>
                            Form Completion
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <small>Completion</small>
                                <small><span id="progress-percentage">0</span>%</small>
                            </div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar" id="progress-bar" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                        
                        <div class="row text-center">
                            <div class="col-6">
                                <div class="border-end">
                                    <div class="fw-bold" style="color: var(--primary-color); font-size: 1.25rem;" id="completed-fields">0</div>
                                    <small style="color: var(--text-muted);">Completed</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="fw-bold" style="color: var(--text-muted); font-size: 1.25rem;" id="total-fields">{{ $allFields->count() }}</div>
                                <small style="color: var(--text-muted);">Total Fields</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Field Validation Status -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-shield-alt me-2"></i>
                            Validation Status
                        </h6>
                    </div>
                    <div class="card-body">
                        <div id="validation-status">
                            <div class="text-center py-3">
                                <i class="fas fa-check-circle fa-2x mb-2 text-success"></i>
                                <p style="color: var(--text-muted);" class="mb-0">All fields valid</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-bolt me-2"></i>
                            Quick Actions
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <button type="button" class="btn btn-outline-success btn-sm" onclick="saveAsDraft()">
                                <i class="fas fa-file-alt me-2"></i>
                                Save as Draft
                            </button>
                            <button type="button" class="btn btn-outline-warning btn-sm" onclick="resetForm()">
                                <i class="fas fa-undo me-2"></i>
                                Reset All Changes
                            </button>
                            <hr class="my-2">
                            <button type="button" class="btn btn-outline-info btn-sm" onclick="previewChanges()">
                                <i class="fas fa-eye me-2"></i>
                                Preview Changes
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="duplicateRecord()">
                                <i class="fas fa-copy me-2"></i>
                                Duplicate Entry
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">
                        <i class="fas fa-exclamation-triangle text-danger me-2"></i>
                        Confirm Delete
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this {{ strtolower($dataType->name) }} entry?</p>
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Warning:</strong> This action cannot be undone. All data will be permanently removed.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Cancel
                    </button>
                    <form action="@if(isset($isManageDataRoute) && $isManageDataRoute){{ route('manage-data.destroy', [$dataType->slug, $record->id]) }}@else{{ route('data-management.data-types.data.destroy', [$dataType, $record->id]) }}@endif" 
                          method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-2"></i>Delete Entry
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
// Field configuration and conditional logic
let fieldConfig = {};
let conditionalLogic = [];
let originalFormData = {};
let changedFields = new Set();

// Load field configuration on page load
document.addEventListener('DOMContentLoaded', function() {
    loadFieldConfiguration();
    bindFormEvents();
    captureOriginalData();
    updateFormProgress();
    
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});

// Load field configuration from server
async function loadFieldConfiguration() {
    try {
        const response = await fetch(`{{ route('data-management.data-types.field-config', $dataType) }}`);
        const data = await response.json();
        
        fieldConfig = data.fields;
        conditionalLogic = data.conditions;
        
        // Apply initial conditional logic
        applyConditionalLogic();
        
    } catch (error) {
        console.error('Error loading field configuration:', error);
    }
}

// Capture original form data for change tracking
function captureOriginalData() {
    const form = document.getElementById('dynamicForm');
    const formData = new FormData(form);
    
    originalFormData = {};
    for (let [key, value] of formData.entries()) {
        originalFormData[key] = value;
    }
}

// Bind form events
function bindFormEvents() {
    const form = document.getElementById('dynamicForm');
    const inputs = form.querySelectorAll('input, select, textarea');
    
    inputs.forEach(input => {
        // Change tracking
        input.addEventListener('change', trackChanges);
        input.addEventListener('input', debounce(trackChanges, 300));
        
        // Progress tracking
        input.addEventListener('change', updateFormProgress);
        input.addEventListener('input', debounce(updateFormProgress, 300));
        
        // Conditional logic
        input.addEventListener('change', applyConditionalLogic);
        
        // Real-time validation
        input.addEventListener('blur', function() {
            validateField(this);
        });
    });
}

// Track field changes
function trackChanges() {
    const form = document.getElementById('dynamicForm');
    const inputs = form.querySelectorAll('input, select, textarea');
    
    changedFields.clear();
    
    inputs.forEach(input => {
        const currentValue = getFieldValue(input);
        const originalValue = originalFormData[input.name] || '';
        
        if (currentValue != originalValue) {
            changedFields.add(input.name);
        }
    });
    
    updateChangeTracking();
}

// Update change tracking display
function updateChangeTracking() {
    const changedCount = changedFields.size;
    const totalFields = Object.keys(fieldConfig).length;
    const percentage = totalFields > 0 ? Math.round((changedCount / totalFields) * 100) : 0;
    
    document.getElementById('changed-fields-count').textContent = changedCount;
    document.getElementById('changes-bar').style.width = percentage + '%';
    
    const listContainer = document.getElementById('changed-fields-list');
    
    if (changedCount === 0) {
        listContainer.innerHTML = `
            <div class="text-center py-3">
                <i class="fas fa-info-circle fa-2x mb-2" style="color: var(--text-muted);"></i>
                <p style="color: var(--text-muted);" class="mb-0">No changes made yet</p>
            </div>
        `;
    } else {
        let html = '';
        changedFields.forEach(fieldName => {
            const config = fieldConfig[fieldName];
            if (config) {
                html += `
                    <div class="mb-2 p-2 border border-warning rounded-2" style="background-color: #fffbf0;">
                        <small class="fw-bold text-warning">${config.label}</small>
                        <br><small class="text-muted">Modified</small>
                    </div>
                `;
            }
        });
        listContainer.innerHTML = html;
    }
}

// Rest of the JavaScript functions (similar to create.blade.php)
function updateFormProgress() {
    const form = document.getElementById('dynamicForm');
    const visibleFields = Array.from(form.querySelectorAll('input, select, textarea'))
        .filter(field => {
            const wrapper = field.closest('[id^="field-wrapper-"]');
            return wrapper && wrapper.style.display !== 'none';
        });
    
    const completedFields = visibleFields.filter(field => {
        if (field.type === 'checkbox' || field.type === 'radio') {
            return field.checked;
        } else if (field.type === 'file') {
            return field.files && field.files.length > 0;
        } else {
            return field.value && field.value.trim() !== '';
        }
    });
    
    const percentage = visibleFields.length > 0 ? Math.round((completedFields.length / visibleFields.length) * 100) : 0;
    
    document.getElementById('progress-percentage').textContent = percentage;
    document.getElementById('progress-bar').style.width = percentage + '%';
    document.getElementById('completed-fields').textContent = completedFields.length;
    document.getElementById('total-fields').textContent = visibleFields.length;
    
    // Update progress bar color
    const progressBar = document.getElementById('progress-bar');
    if (percentage < 30) {
        progressBar.className = 'progress-bar bg-danger';
    } else if (percentage < 70) {
        progressBar.className = 'progress-bar bg-warning';
    } else {
        progressBar.className = 'progress-bar bg-success';
    }
}

// Apply conditional logic (same as create form)
function applyConditionalLogic() {
    conditionalLogic.forEach(condition => {
        const dependentField = document.querySelector(`[name="${condition.dependent_field}"]`);
        const targetWrapper = document.getElementById(`field-wrapper-${condition.field}`);
        const targetField = document.querySelector(`[name="${condition.field}"]`);
        
        if (!dependentField || !targetWrapper || !targetField) return;
        
        const dependentValue = getFieldValue(dependentField);
        const conditionMet = evaluateCondition(dependentValue, condition.operator, condition.value);
        
        switch (condition.action) {
            case 'show':
                targetWrapper.style.display = conditionMet ? '' : 'none';
                break;
            case 'hide':
                targetWrapper.style.display = conditionMet ? 'none' : '';
                break;
            case 'require':
                targetField.required = conditionMet;
                updateFieldRequiredIndicator(targetField, conditionMet);
                break;
            case 'unrequire':
                targetField.required = !conditionMet;
                updateFieldRequiredIndicator(targetField, !conditionMet);
                break;
        }
    });
    
    updateFormProgress();
}

// Get field value based on field type (same as create form)
function getFieldValue(field) {
    if (field.type === 'checkbox') {
        return field.checked ? field.value : '';
    } else if (field.type === 'radio') {
        const checked = document.querySelector(`[name="${field.name}"]:checked`);
        return checked ? checked.value : '';
    } else if (field.multiple) {
        return Array.from(field.selectedOptions).map(option => option.value);
    } else {
        return field.value;
    }
}

// Evaluate condition (same as create form)
function evaluateCondition(value, operator, conditionValue) {
    switch (operator) {
        case 'equals':
            return value == conditionValue;
        case 'not_equals':
            return value != conditionValue;
        case 'contains':
            return value.toString().toLowerCase().includes(conditionValue.toLowerCase());
        case 'not_contains':
            return !value.toString().toLowerCase().includes(conditionValue.toLowerCase());
        case 'greater_than':
            return parseFloat(value) > parseFloat(conditionValue);
        case 'less_than':
            return parseFloat(value) < parseFloat(conditionValue);
        case 'is_empty':
            return !value || value === '';
        case 'is_not_empty':
            return value && value !== '';
        default:
            return false;
    }
}

// Update field required indicator (same as create form)
function updateFieldRequiredIndicator(field, required) {
    const label = field.closest('.mb-3').querySelector('label');
    if (label) {
        const existingAsterisk = label.querySelector('.text-danger');
        if (required && !existingAsterisk) {
            label.innerHTML += ' <span class="text-danger">*</span>';
        } else if (!required && existingAsterisk) {
            existingAsterisk.remove();
        }
    }
}

// Validate form (similar to create form)
function validateForm() {
    const form = document.getElementById('dynamicForm');
    const fields = form.querySelectorAll('input, select, textarea');
    let isValid = true;
    let validationReport = [];
    
    fields.forEach(field => {
        const fieldValid = validateField(field);
        if (!fieldValid) {
            isValid = false;
            validationReport.push({
                field: field.name,
                label: field.closest('.mb-3').querySelector('label').textContent.replace('*', '').trim(),
                error: field.parentNode.querySelector('.invalid-feedback').textContent
            });
        }
    });
    
    updateValidationStatus(validationReport);
    
    if (isValid) {
        showAlert('success', 'All changes are valid! Form ready to submit.');
    } else {
        showAlert('warning', `Form has ${validationReport.length} validation error(s). Please check the highlighted fields.`);
    }
    
    return isValid;
}

// Validate individual field (same as create form but simplified)
function validateField(field) {
    const fieldName = field.name;
    const fieldConfig = window.fieldConfig && window.fieldConfig[fieldName];
    
    if (!fieldConfig) return true;
    
    field.classList.remove('is-valid', 'is-invalid');
    const existingFeedback = field.parentNode.querySelector('.invalid-feedback, .valid-feedback');
    if (existingFeedback) {
        existingFeedback.remove();
    }
    
    const value = getFieldValue(field);
    let isValid = true;
    let errorMessage = '';
    
    if (field.required && (!value || value === '')) {
        isValid = false;
        errorMessage = 'This field is required.';
    }
    
    field.classList.add(isValid ? 'is-valid' : 'is-invalid');
    
    if (!isValid) {
        const feedback = document.createElement('div');
        feedback.className = 'invalid-feedback';
        feedback.textContent = errorMessage;
        field.parentNode.appendChild(feedback);
    }
    
    return isValid;
}

// Update validation status (same as create form)
function updateValidationStatus(errors) {
    const container = document.getElementById('validation-status');
    
    if (errors.length === 0) {
        container.innerHTML = `
            <div class="text-center py-3">
                <i class="fas fa-check-circle fa-2x mb-2 text-success"></i>
                <p class="text-success mb-0">All validations passed!</p>
            </div>
        `;
    } else {
        let html = `
            <div class="mb-2">
                <small class="text-danger fw-bold">${errors.length} Validation Error(s)</small>
            </div>
        `;
        
        errors.forEach(error => {
            html += `
                <div class="mb-2 p-2 border border-danger rounded-2" style="background-color: #fef2f2;">
                    <small class="fw-bold text-danger">${error.label}</small>
                    <br><small class="text-danger">${error.error}</small>
                </div>
            `;
        });
        
        container.innerHTML = html;
    }
}

// Reset form to original state
function resetForm() {
    if (confirm('Are you sure you want to reset all changes? This will restore the original values.')) {
        location.reload();
    }
}

// Delete record
function deleteRecord() {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

// Duplicate record
function duplicateRecord() {
    if (confirm('Do you want to create a copy of this record?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        @if(isset($isManageDataRoute) && $isManageDataRoute)
            form.action = '{{ route("manage-data.create", $dataType->slug) }}';
        @else
            form.action = '{{ route("data-management.data-types.data.create", $dataType) }}';
        @endif
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        form.appendChild(csrfToken);
        
        const duplicateFlag = document.createElement('input');
        duplicateFlag.type = 'hidden';
        duplicateFlag.name = 'duplicate_from';
        duplicateFlag.value = '{{ $record->id }}';
        form.appendChild(duplicateFlag);
        
        document.body.appendChild(form);
        form.submit();
    }
}

// Preview changes
function previewChanges() {
    if (changedFields.size === 0) {
        showAlert('info', 'No changes have been made to preview.');
        return;
    }
    
    let html = '<h6>Changed Fields:</h6><ul>';
    changedFields.forEach(fieldName => {
        const config = fieldConfig[fieldName];
        if (config) {
            html += `<li><strong>${config.label}</strong> has been modified</li>`;
        }
    });
    html += '</ul>';
    
    showAlert('info', html);
}

// Save as draft (placeholder)
function saveAsDraft() {
    showAlert('info', 'Draft saving functionality will be implemented in a future update.');
}

// Show alert function (same as create form)
function showAlert(type, message) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    const form = document.getElementById('dynamicForm');
    form.insertAdjacentHTML('afterbegin', alertHtml);
    
    setTimeout(() => {
        const alert = form.querySelector('.alert');
        if (alert) {
            const bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        }
    }, 5000);
}

// Utility function for debouncing (same as create form)
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Form submission handling
document.getElementById('dynamicForm').addEventListener('submit', function(e) {
    if (!validateForm()) {
        e.preventDefault();
        showAlert('danger', 'Please fix the validation errors before submitting the form.');
        return false;
    }
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Updating...';
    submitBtn.disabled = true;
    
    setTimeout(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    }, 10000);
});
</script>
@endpush

@push('styles')
<style>
/* Enhanced section layout styles */
#sections-container .card {
    transition: all 0.3s ease;
    border: 1px solid var(--border-color, #dee2e6);
}

#sections-container .card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Section progress tracking */
.section-progress-item {
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 2px 0;
    padding: 8px 4px !important;
}

.section-progress-item:hover {
    background-color: var(--bs-light, #f8f9fa);
}

.section-progress-item.section-complete {
    background-color: rgba(25, 135, 84, 0.1);
    border-left: 3px solid var(--bs-success, #198754);
}

/* Enhanced progress bars */
.progress {
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    transition: width 0.6s ease;
    border-radius: 10px;
}

/* Section width responsive adjustments */
@media (max-width: 991.98px) {
    #sections-container .col-6,
    #sections-container .col-8,
    #sections-container .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Sidebar cards sticky positioning */
@media (min-width: 992px) {
    .col-lg-4 .card {
        position: sticky;
        top: 20px;
    }
}

/* Form field enhancements */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Change tracking styles */
.changed-field-indicator {
    border-left: 3px solid var(--bs-warning, #ffc107);
    background-color: rgba(255, 193, 7, 0.1);
}

/* Smooth scrolling for section navigation */
html {
    scroll-behavior: smooth;
}
</style>
@endpush