Add grouped stock view with expiration and location filtering

src/styles/app.css

@@ -275,6 +275,12 @@ body {
   color: var(--lonc-primary);
 }
 
+.stock-view-switch {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
 .overview-row-single-open > [class*='col-'] {
   width: 100%;
 }
@@ -537,6 +543,133 @@ button.legend-card:focus-visible {
   border-left-color: #6c757d;
 }
 
+.grouped-stock-card {
+  border-left: 4px solid transparent;
+}
+
+.grouped-stock-summary {
+  display: block;
+  cursor: pointer;
+  list-style: none;
+}
+
+.grouped-stock-summary::-webkit-details-marker {
+  display: none;
+}
+
+.grouped-stock-summary-meta {
+  align-items: center;
+}
+
+.grouped-stock-toggle-label {
+  color: var(--lonc-primary);
+}
+
+.grouped-stock-toggle-label::after {
+  content: 'Expand';
+  margin-left: 0.35rem;
+}
+
+.grouped-stock-card[open] .grouped-stock-toggle-label::after {
+  content: 'Hide';
+}
+
+.grouped-stock-card.expiration-expired {
+  border-left-color: #dc3545;
+}
+
+.grouped-stock-card.expiration-use-first {
+  border-left-color: #fd7e14;
+}
+
+.grouped-stock-card.expiration-upcoming {
+  border-left-color: #ffc107;
+}
+
+.grouped-stock-card.expiration-within-date {
+  border-left-color: #198754;
+}
+
+.grouped-stock-card.expiration-none {
+  border-left-color: #6c757d;
+}
+
+.grouped-stock-items {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.grouped-stock-item {
+  display: block;
+  padding: 0.9rem 1rem;
+  border-radius: 0.95rem;
+  border: 1px solid var(--lonc-border);
+  background: rgba(255, 255, 255, 0.72);
+  color: inherit;
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    border-color 160ms ease;
+}
+
+.grouped-stock-item:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(24, 42, 79, 0.08);
+  border-color: rgba(31, 75, 153, 0.18);
+}
+
+.grouped-stock-item.expiration-soft-expired {
+  background: rgba(220, 53, 69, 0.09);
+}
+
+.grouped-stock-item.expiration-soft-use-first {
+  background: rgba(253, 126, 20, 0.1);
+}
+
+.grouped-stock-item.expiration-soft-upcoming {
+  background: rgba(255, 193, 7, 0.11);
+}
+
+.grouped-stock-item.expiration-soft-within-date {
+  background: rgba(25, 135, 84, 0.08);
+}
+
+.grouped-stock-item.expiration-soft-none {
+  background: rgba(108, 117, 125, 0.08);
+}
+
+.grouped-stock-item-meta {
+  justify-content: flex-start;
+}
+
+.grouped-stock-item-subline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.grouped-stock-subline-separator {
+  color: var(--lonc-muted);
+}
+
+.grouped-stock-date-pair {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.grouped-stock-date-separator {
+  color: var(--lonc-muted);
+  font-weight: 700;
+}
+
+@media (min-width: 1200px) {
+  .grouped-stock-item-meta {
+    justify-content: flex-end;
+  }
+}
+
 .stock-review-card {
   border-left: 6px solid transparent;
 }