fix: admin panel showSection ID mismatch + missing main-content CSS

css/admin.css

@@ -169,6 +169,16 @@ body {
     min-height: 100vh;
 }
 
+/* ─── Main Content ─── */
+.main-content {
+    grid-column: 2;
+    grid-row: 2;
+    padding: 2rem;
+    overflow-y: auto;
+    max-height: calc(100vh - var(--topbar-h));
+    background: var(--bg);
+}
+
 /* ─── Top Bar ─── */
 .admin-topbar {
     grid-column: 1 / -1;

js/admin.js

@@ -182,6 +182,9 @@ const AdminApp = {
     /* ─────────────────────── NAVIGATION ─────────────────────── */
 
     showSection(name) {
+        // Normalize: ensure name has section- prefix
+        if (!name.startsWith('section-')) name = 'section-' + name;
+
         // Hide all sections
         document.querySelectorAll('[id^="section-"]').forEach(s => {
             s.style.display = 'none';
@@ -196,7 +199,8 @@ const AdminApp = {
         document.querySelectorAll('.sidebar a, .sidebar .nav-link').forEach(a => {
             a.classList.remove('active');
         });
-        const activeLink = document.querySelector(`[onclick*="'${name}'"]`);
+        const shortName = name.replace('section-', '');
+        const activeLink = document.querySelector(`.sidebar-link[data-section="${shortName}"]`);
         if (activeLink) activeLink.classList.add('active');
 
         // Update topbar title