        </div>
    </div>
    <script>
        // Modern Collapsible & Responsive Sidebar Drawer Toggle
        const sidebarToggleBtn = document.getElementById('sidebarToggle');
        const sidebar = document.getElementById('sidebar');
        const sidebarOverlay = document.getElementById('sidebarOverlay');
        
        function handleSidebarToggle() {
            if (window.innerWidth <= 768) {
                // Mobile View: Slide Drawer in/out
                sidebar.classList.toggle('open');
                sidebarOverlay.classList.toggle('active');
            } else {
                // Desktop View: Collapse/Expand Sidebar
                sidebar.classList.toggle('collapsed');
            }
        }

        if (sidebarToggleBtn) {
            // Remove any inline onclick attribute that might exist, and add listener
            sidebarToggleBtn.removeAttribute('onclick');
            sidebarToggleBtn.addEventListener('click', handleSidebarToggle);
        }

        if (sidebarOverlay) {
            sidebarOverlay.addEventListener('click', () => {
                sidebar.classList.remove('open');
                sidebarOverlay.classList.remove('active');
            });
        }

        // Clean up classes on window resize
        window.addEventListener('resize', () => {
            if (window.innerWidth > 768) {
                sidebar.classList.remove('open');
                if (sidebarOverlay) sidebarOverlay.classList.remove('active');
            }
        });

        // Auto-mark required fields with a red asterisk
        document.querySelectorAll('input[required], select[required], textarea[required]').forEach(element => {
            if(element.id) {
                const label = document.querySelector(`label[for="${element.id}"]`);
                if(label && !label.innerHTML.includes('req-mark')) {
                    label.innerHTML = label.innerHTML.replace(/\s*\*\s*$/, '') + ' <span class="req-mark" style="color: #ef4444;">*</span>';
                }
            }
        });

        // Global Note Modal function
        function showSmartNoteInfo(text) {
            document.getElementById('smartNoteText').textContent = text;
            document.getElementById('smartNoteModal').style.display = 'flex';
        }
        function closeSmartNoteInfo() {
            document.getElementById('smartNoteModal').style.display = 'none';
        }
    </script>

    <!-- Smart Note Info Modal -->
    <div id="smartNoteModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(4px);">
        <div class="card" style="max-width: 350px; width: 90%; box-sizing: border-box; background: var(--bg-dark); border: 1px solid var(--glass-border); box-shadow: 0 10px 25px rgba(0,0,0,0.5); padding: 1.5rem; border-radius: 12px;">
            <h3 style="margin-top: 0; color: #38bdf8; display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; margin-bottom: 1rem;">
                <i class="ph ph-info" style="font-size: 1.25rem;"></i> Note Information
            </h3>
            <p id="smartNoteText" style="color: var(--text-light); margin-bottom: 1.5rem; line-height: 1.5; font-size: 0.95rem; white-space: pre-wrap; word-break: break-word;">
            </p>
            <div style="display: flex; justify-content: flex-end;">
                <button type="button" onclick="closeSmartNoteInfo()" class="btn-primary" style="margin: 0; padding: 0.5rem 1rem; width: auto; font-size: 0.9rem;">Close</button>
            </div>
        </div>
    </div>
</body>
</html>
