class AppRoot extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <app-sidebar></app-sidebar>
      <div class="app-shell">
        <app-topbar></app-topbar>
        <main id="main-content"></main>
      </div>
      <app-mobile-nav></app-mobile-nav>`;

    // Apply saved collapse state
    if (localStorage.getItem('sidebar-collapsed') === 'true') {
      this.classList.add('collapsed');
    }
  }

  setPage(html) {
    const main = document.getElementById('main-content');
    if (main) {
      main.innerHTML = html;
      main.scrollTop = 0;
      if (window.lucide) lucide.createIcons({ root: main });
    }
  }
}
customElements.define('app-root', AppRoot);