feat: mobile-responsive frontend (bottom nav, stacked layouts, scrollable tables)

frontend/src/components/layout/AppLayout.css

@@ -52,3 +52,15 @@
     padding: var(--space-5);
   }
 }
+
+/* Mobile: stack layout vertically */
+@media (max-width: 768px) {
+  .dw-app-layout {
+    flex-direction: column;
+  }
+
+  .dw-app-layout__content {
+    padding: var(--space-4) var(--space-3);
+    padding-bottom: 80px; /* space for bottom nav */
+  }
+}

frontend/src/components/layout/Sidebar.css

@@ -187,3 +187,75 @@
   background: var(--color-warning-soft);
   color: var(--color-warning);
 }
+
+/* Mobile: bottom navigation bar */
+@media (max-width: 768px) {
+  .dw-sidebar {
+    width: 100%;
+    height: auto;
+    position: fixed;
+    bottom: 0;
+    top: auto;
+    left: 0;
+    right: 0;
+    flex-direction: row;
+    border-right: none;
+    border-top: 1px solid var(--color-border);
+    padding: var(--space-2) var(--space-3);
+    z-index: 100;
+    overflow-x: auto;
+  }
+
+  .dw-sidebar__top {
+    display: none;
+  }
+
+  .dw-sidebar__nav {
+    flex-direction: row;
+    gap: 0;
+    flex: 1;
+    justify-content: space-around;
+  }
+
+  .dw-sidebar__footer {
+    display: none;
+  }
+
+  .dw-sidebar__link {
+    flex-direction: column;
+    gap: 2px;
+    height: auto;
+    padding: var(--space-1) var(--space-2);
+    font-size: 10px;
+    min-width: 48px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .dw-sidebar__link-icon {
+    font-size: var(--text-base);
+  }
+
+  .dw-sidebar__link-label {
+    font-size: 10px;
+    white-space: nowrap;
+  }
+
+  .dw-sidebar__link--active::before {
+    display: none;
+  }
+
+  .dw-sidebar__badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    margin-left: 0;
+    min-width: 14px;
+    height: 14px;
+    font-size: 9px;
+  }
+
+  .dw-sidebar__collapse-btn {
+    display: none;
+  }
+}

frontend/src/components/layout/Topbar.css

@@ -346,3 +346,39 @@
   opacity: 0.5;
   cursor: default;
 }
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .dw-topbar {
+    padding: 0 var(--space-3);
+    gap: var(--space-2);
+  }
+
+  .dw-topbar__search {
+    display: none;
+  }
+
+  .dw-topbar__workspace {
+    max-width: 120px;
+    font-size: var(--text-xs);
+    padding: 0 var(--space-2);
+  }
+
+  .dw-topbar__notif-dropdown {
+    width: calc(100vw - var(--space-6));
+    right: calc(-1 * var(--space-3));
+  }
+}
+
+@media (max-width: 480px) {
+  .dw-topbar__upload-btn {
+    width: 28px;
+    height: 28px;
+    font-size: var(--text-sm);
+  }
+
+  .dw-topbar__icon-btn {
+    width: 28px;
+    height: 28px;
+  }
+}

frontend/src/components/ui/DataTable.css

@@ -173,3 +173,23 @@
     background: var(--color-accent-soft);
     color: var(--color-accent);
 }
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .dw-table__wrapper {
+    border-radius: var(--radius-sm);
+  }
+
+  .dw-table__th,
+  .dw-table__td {
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .dw-table__filename {
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+  }
+}

frontend/src/pages/Dashboard.css

@@ -177,3 +177,43 @@
     color: var(--color-text-muted);
     font-size: var(--text-sm);
 }
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .dw-dashboard__header-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-3);
+  }
+
+  .dw-dashboard__kpis {
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-2);
+  }
+
+  .dw-dashboard__kpi {
+    padding: var(--space-3) var(--space-2);
+  }
+
+  .dw-dashboard__kpi-value {
+    font-size: var(--text-lg);
+  }
+
+  .dw-dashboard__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dw-dashboard__doc-name {
+    max-width: 180px;
+  }
+
+  .dw-dashboard__activity-message {
+    max-width: 160px;
+  }
+}
+
+@media (max-width: 480px) {
+  .dw-dashboard__kpis {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

frontend/src/pages/Documents.css

@@ -111,3 +111,29 @@
     padding: 0 2px;
     line-height: 1;
 }
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .dw-docs__header-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-3);
+  }
+
+  .dw-docs__controls {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-3);
+  }
+
+  .dw-docs__filters {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    padding-bottom: var(--space-1);
+  }
+
+  .dw-docs__filter {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+}

frontend/src/styles/global.css

@@ -140,3 +140,14 @@ code, .mono {
   color: var(--color-text-secondary);
   font-size: var(--text-sm);
 }
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .dw-page {
+    gap: var(--space-4);
+  }
+
+  .dw-page__header h1 {
+    font-size: var(--text-xl);
+  }
+}