feat: integrate analytics and fragment receipt improvements

src/styles/components.css

@@ -801,8 +801,41 @@
 }
 
 .ui-query-actions .ui-button {
-  flex: 0 0 88px;
-  width: 88px;
+  flex: 0 0 var(--query-action-width);
+  width: var(--query-action-width);
+}
+
+/* Shared list-filter sizing keeps ordinary controls compact and leaves enough
+   room for a complete date range without page-specific width overrides. */
+.ui-filter-row {
+  align-items: end;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-5);
+}
+
+.ui-filter-row > .ui-field,
+.ui-filter-field {
+  flex: 0 1 var(--query-control-width);
+  width: min(100%, var(--query-control-width));
+}
+
+.ui-filter-row > .ui-date-range-field,
+.ui-filter-field--date-range {
+  flex-basis: var(--query-date-range-width);
+  width: min(100%, var(--query-date-range-width));
+}
+
+.ui-filter-actions {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  gap: var(--space-3);
+}
+
+.ui-filter-actions .ui-button {
+  flex: 0 0 var(--query-action-width);
+  width: var(--query-action-width);
 }
 
 .ui-pagination {
@@ -1569,6 +1602,24 @@
   .ui-modal__guard { padding: var(--space-5); }
   .ui-modal__guard footer { display: grid; }
 
+  .ui-filter-row > .ui-field,
+  .ui-filter-field,
+  .ui-filter-row > .ui-date-range-field,
+  .ui-filter-field--date-range {
+    flex-basis: 100%;
+    width: 100%;
+  }
+
+  .ui-filter-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    width: 100%;
+  }
+
+  .ui-filter-actions .ui-button {
+    width: 100%;
+  }
+
   .ui-query-panel__grid,
   .ui-detail-info-grid,
   .ui-detail-progress-stats,
@@ -1583,6 +1634,12 @@
   }
 }
 
+@media (max-width: 360px) {
+  .ui-filter-actions {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
 @media (max-width: 780px) {
   .ui-table-wrap {
     background: transparent;

src/styles/global.css

@@ -132,6 +132,16 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.dashboard-grid--four {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+@media (max-width: 1180px) {
+  .dashboard-grid--four {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 .metric-card {
   display: grid;
   gap: var(--space-2);
@@ -6849,6 +6859,30 @@
   font-style: normal;
 }
 
+.signature-quality-matrix__drainage {
+  display: grid;
+  gap: var(--space-2);
+  min-width: 150px;
+}
+
+.signature-quality-matrix__drainage > div {
+  border-bottom: 1px dashed var(--color-border);
+  display: grid;
+  gap: 4px;
+  grid-template-columns: 58px 1fr;
+  padding-bottom: var(--space-2);
+}
+
+.signature-quality-matrix__drainage > div:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.signature-quality-matrix__drainage b {
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
 .signature-quality-matrix__rate {
   font-weight: 600;
 }
@@ -8026,14 +8060,11 @@
 }
 
 .admin-user-toolbar {
-  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-columns: minmax(0, 1fr) auto;
 }
 
 .admin-user-filter-grid {
-  align-items: end;
-  display: grid;
-  gap: var(--space-4);
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  min-width: 0;
 }
 
 .admin-user-toolbar > .ui-button {
@@ -8235,7 +8266,6 @@
   .admin-drainage-toolbar { grid-template-columns: 1fr; }
   .admin-drainage-section__heading { align-items: stretch; flex-direction: column; }
   .admin-user-toolbar { grid-template-columns: 1fr; }
-  .admin-user-filter-grid { grid-template-columns: 1fr; }
 }
 
 .admin-drainage-actions .ui-button--ghost {

src/styles/tokens.css

@@ -91,6 +91,9 @@
   --control-height-md: 38px;
   --control-height-lg: 44px;
   --control-padding-x: 12px;
+  --query-control-width: 220px;
+  --query-date-range-width: 320px;
+  --query-action-width: 88px;
   --z-dropdown: 1000;
   --z-modal: 1100;
   --z-toast: 1200;