refactor: sidebar layout for Tech Support and Feature Manager

- Add <aside class="sidebar"> with #sidebar-support and #sidebar-features to index.html
- Restyle .main-content as flex layout (sidebar left, tiles right)
- Body is now display:flex column with overflow:hidden for independent scroll panels
- Sidebar (270px fixed) with overflow-y:auto scrolls independently
- Tiles area (flex:1) scrolls independently
- New sidebar support button (.sidebar-support-btn) replaces support tile in main grid
- Feature Manager now renders into #sidebar-features instead of $tilesArea
- Compact sidebar overrides for .feature-card padding/font-size
- Remove 'support' and 'feature-manager' from CATEGORY_ORDER
- Responsive: sidebar becomes full-width above tiles at <=768px

Agent-Logs-Url: https://github.com/naturallaw777/staging_alpha/sessions/4304350a-bc4f-4698-82b5-8ee28f0ad960

Co-authored-by: naturallaw777 <99053422+naturallaw777@users.noreply.github.com>

app/sovran_systemsos_web/static/style.css

@@ -37,6 +37,9 @@ body {
   color: var(--text-primary);
   line-height: 1.5;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 /* ── Header bar ─────────────────────────────────────────────────── */
@@ -189,9 +192,87 @@ button:disabled {
 /* ── Main content ───────────────────────────────────────────────── */
 
 .main-content {
-  max-width: 980px;
-  margin: 0 auto;
-  padding: 24px 16px 48px;
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* ── Sidebar ────────────────────────────────────────────────────── */
+
+.sidebar {
+  width: 270px;
+  flex-shrink: 0;
+  height: 100%;
+  overflow-y: auto;
+  border-right: 1px solid var(--border-color);
+  background-color: var(--surface-color);
+  padding: 20px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ── Sidebar: Tech Support button ───────────────────────────────── */
+
+.sidebar-support-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  background-color: var(--card-color);
+  border: 2px dashed var(--accent-color);
+  border-radius: 12px;
+  padding: 12px 14px;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: border-style 0.15s, border-color 0.15s, background-color 0.15s;
+  text-align: left;
+}
+
+.sidebar-support-btn:hover {
+  border-style: solid;
+  border-color: #a8c8ff;
+  background-color: #35354a;
+}
+
+.sidebar-support-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.sidebar-support-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sidebar-support-title {
+  font-size: 0.88rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.sidebar-support-hint {
+  font-size: 0.72rem;
+  color: var(--accent-color);
+  font-weight: 600;
+}
+
+.sidebar-divider {
+  border: none;
+  border-top: 1px solid var(--border-color);
+  margin: 16px 0;
+}
+
+/* ── Tiles area ─────────────────────────────────────────────────── */
+
+#tiles-area {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+  padding: 24px 20px 48px;
+  min-width: 0;
 }
 
 /* ── Category sections ──────────────────────────────────────────── */
@@ -859,6 +940,28 @@ button.btn-reboot:hover:not(:disabled) {
 
 /* ── Responsive ─────────────────────────────────────────────────── */
 
+@media (max-width: 768px) {
+  body {
+    overflow: auto;
+  }
+  .main-content {
+    flex-direction: column;
+    overflow: visible;
+  }
+  .sidebar {
+    width: 100%;
+    height: auto;
+    border-right: none;
+    border-bottom: 1px solid var(--border-color);
+    padding: 14px 12px;
+  }
+  #tiles-area {
+    height: auto;
+    overflow-y: visible;
+    padding: 16px 12px 40px;
+  }
+}
+
 @media (max-width: 600px) {
   .header-bar {
     padding: 10px 14px;
@@ -872,9 +975,6 @@ button.btn-reboot:hover:not(:disabled) {
     flex-wrap: wrap;
     padding: 8px 14px;
   }
-  .main-content {
-    padding: 16px 12px 40px;
-  }
   .tiles-grid {
     justify-content: center;
   }
@@ -1444,3 +1544,29 @@ button.btn-reboot:hover:not(:disabled) {
 .tile-ports-label--loading {
   color: var(--text-dim);
 }
+
+/* ── Sidebar: compact feature card overrides ─────────────────────── */
+
+.sidebar .feature-manager-section {
+  margin-bottom: 0;
+}
+
+.sidebar .feature-subcategory {
+  margin-bottom: 16px;
+}
+
+.sidebar .feature-card {
+  padding: 10px 12px;
+}
+
+.sidebar .feature-card-name {
+  font-size: 0.88rem;
+}
+
+.sidebar .feature-card-desc {
+  font-size: 0.78rem;
+}
+
+.sidebar .section-header {
+  font-size: 0.75rem;
+}