document.addEventListener('DOMContentLoaded', function () {
    // 1. Sidebar Logic
    const sidebar = document.getElementById('sidebar');
    const mainContent = document.getElementById('mainContent');
    const closeBtn = document.getElementById('sidebarToggle');
    const floatingBtn = document.getElementById('floatingToggle');
    const overlay = document.getElementById('sidebarOverlay');
  
    function hideSidebar() {
      if (window.innerWidth <= 1024) {
        if(sidebar) sidebar.classList.remove('mobile-expanded');
        if(overlay) overlay.classList.remove('active');
      } else {
        if(sidebar) sidebar.classList.add('vanished');
        if(mainContent) mainContent.classList.add('expanded');
      }
      if(floatingBtn) floatingBtn.classList.add('visible');
    }
  
    function showSidebar() {
      if (window.innerWidth <= 1024) {
        if(sidebar) sidebar.classList.add('mobile-expanded');
        if(overlay) overlay.classList.add('active');
      } else {
        if(sidebar) sidebar.classList.remove('vanished');
        if(mainContent) mainContent.classList.remove('expanded');
      }
      if(floatingBtn) floatingBtn.classList.remove('visible');
    }
  
    if (closeBtn) closeBtn.addEventListener('click', hideSidebar);
    if (floatingBtn) floatingBtn.addEventListener('click', showSidebar);
    if (overlay) overlay.addEventListener('click', hideSidebar);
  
    if (window.innerWidth <= 1024 && floatingBtn) {
      floatingBtn.classList.add('visible'); 
    }
  
    window.addEventListener('resize', () => {
      if (window.innerWidth > 1024) {
        if (sidebar && !sidebar.classList.contains('vanished') && floatingBtn) {
          floatingBtn.classList.remove('visible');
        }
        if(sidebar) sidebar.classList.remove('mobile-expanded');
        if(overlay) overlay.classList.remove('active');
      } else {
        if(sidebar) sidebar.classList.remove('vanished');
        if(mainContent) mainContent.classList.remove('expanded');
        if (sidebar && !sidebar.classList.contains('mobile-expanded') && floatingBtn) {
          floatingBtn.classList.add('visible');
        }
      }
    });

    // 2. Live Clock Logic
    function updateClock() {
        const now = new Date();
        const options = { weekday: 'short', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' };
        const clockEl = document.getElementById('liveClock');
        if(clockEl) clockEl.textContent = now.toLocaleDateString('en-US', options);
    }
    setInterval(updateClock, 1000);
    updateClock();
});