Add dashboard module

webui/src/styles/dashboard.css

@@ -0,0 +1,97 @@
+.dashboard-page .card + .dashboard-widget-grid {
+  margin-top: 18px;
+}
+
+.dashboard-summary-grid .metric-detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dashboard-widget-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(220px, 1fr));
+  gap: 18px;
+  align-items: start;
+}
+
+.dashboard-widget {
+  min-width: 0;
+}
+
+.dashboard-widget-small {
+  grid-column: span 1;
+}
+
+.dashboard-widget-medium {
+  grid-column: span 2;
+}
+
+.dashboard-widget-wide,
+.dashboard-widget-full {
+  grid-column: 1 / -1;
+}
+
+.dashboard-widget-picker {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 12px;
+}
+
+.dashboard-widget-toggle {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  background: var(--panel-soft);
+  padding: 12px;
+}
+
+.dashboard-widget-toggle input {
+  margin-top: 3px;
+}
+
+.dashboard-widget-toggle strong,
+.dashboard-widget-toggle small {
+  display: block;
+}
+
+.dashboard-widget-toggle small {
+  color: var(--muted);
+  margin-top: 4px;
+  line-height: 1.35;
+}
+
+.dashboard-compact-list.detail-list div {
+  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
+}
+
+.dashboard-widget-metrics.metric-grid {
+  grid-template-columns: repeat(3, minmax(120px, 1fr));
+  margin-bottom: 0;
+}
+
+@media (max-width: 1120px) {
+  .dashboard-widget-grid {
+    grid-template-columns: repeat(2, minmax(220px, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .dashboard-widget-grid,
+  .dashboard-widget-picker,
+  .dashboard-widget-metrics.metric-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-widget-small,
+  .dashboard-widget-medium,
+  .dashboard-widget-wide,
+  .dashboard-widget-full {
+    grid-column: 1;
+  }
+}
+