backend/internal/web/ui/app.css

@@ -325,6 +325,38 @@
   font-size: 0.75rem;
 }
 
+/* ============================================================
+   Section 11b — Sidebar collapse state
+   ============================================================ */
+
+/* When sidebar-is-collapsed is toggled on the shell, shrink the grid column */
+.dashboard-shell.sidebar-is-collapsed {
+  grid-template-columns: 4rem 1fr;
+}
+
+/* Hide text labels and section headings in collapsed state */
+.dashboard-shell.sidebar-is-collapsed .sidebar-brand-title,
+.dashboard-shell.sidebar-is-collapsed .sidebar-section-label,
+.dashboard-shell.sidebar-is-collapsed .sidebar-nav-label,
+.dashboard-shell.sidebar-is-collapsed .sidebar-project-label {
+  display: none;
+}
+
+/* Center icons in collapsed state */
+.dashboard-shell.sidebar-is-collapsed .sidebar-nav-link-inner {
+  justify-content: center;
+}
+
+/* Hide the full project list in collapsed state (icons not present for projects) */
+.dashboard-shell.sidebar-is-collapsed .sidebar-project-list {
+  display: none;
+}
+
+/* Flip the collapse button chevron when collapsed */
+.dashboard-shell.sidebar-is-collapsed .sidebar-collapse-button svg {
+  transform: rotate(180deg);
+}
+
 /* ============================================================
    Section 12 — Dashboard main content area
    ============================================================ */