Add Mark Gone action for stock items and enhance expiration and location filtering system

src/styles/app.css

@@ -151,7 +151,7 @@ body {
   top: 50%;
   right: 0.75rem;
   transform: translateY(-50%);
-  z-index: 5;
+  z-index: 2;
   text-decoration: none;
   font-size: 1.4rem;
   line-height: 1;
@@ -159,6 +159,10 @@ body {
   background: transparent;
 }
 
+.search-suggestions-picker {
+  z-index: 20;
+}
+
 .search-field-with-clear .search-clear-button {
   top: calc(50% + 1rem);
 }
@@ -177,11 +181,11 @@ body {
 }
 
 .location-picker {
-  z-index: 4;
+  z-index: 20;
 }
 
 .quantity-unit-picker {
-  z-index: 4;
+  z-index: 20;
   border-radius: 0.9rem;
   border: 1px solid var(--lonc-border);
   background: rgba(255, 255, 255, 0.96);
@@ -200,6 +204,13 @@ body {
   gap: 0.5rem;
 }
 
+.expiration-days-inline {
+  padding: 0.85rem 0.9rem;
+  border: 1px solid var(--lonc-border);
+  border-radius: 1rem;
+  background: rgba(255, 255, 255, 0.72);
+}
+
 .expiration-days-option {
   padding: 0.55rem 0.4rem;
   border-radius: 0.7rem;
@@ -223,6 +234,10 @@ body {
   .expiration-days-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+
+  .expiration-days-grid-inline {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 
 .location-level-badge {
@@ -251,11 +266,176 @@ body {
   gap: 0.75rem;
 }
 
+.stock-filter-reset {
+  font-size: 0.95rem;
+  color: var(--lonc-muted);
+}
+
+.stock-filter-reset:hover {
+  color: var(--lonc-primary);
+}
+
+.overview-row-single-open > [class*='col-'] {
+  width: 100%;
+}
+
+.overview-panel {
+  align-self: flex-start;
+  height: auto;
+}
+
+.overview-summary {
+  display: block;
+  cursor: pointer;
+  list-style: none;
+}
+
+.overview-summary::-webkit-details-marker {
+  display: none;
+}
+
+.overview-list {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.overview-list-split {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.overview-list-locations {
+  max-height: 28rem;
+  overflow-y: auto;
+  padding-right: 0.35rem;
+}
+
+.location-overview-columns {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+}
+
+.location-overview-column {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.location-overview-group {
+  display: grid;
+  gap: 0.85rem;
+  break-inside: avoid;
+}
+
+.overview-option {
+  appearance: none;
+  width: 100%;
+  padding: 0.95rem 1rem;
+  border-radius: 1rem;
+  border: 1px solid var(--lonc-border);
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    opacity 160ms ease,
+    border-color 160ms ease,
+    filter 160ms ease;
+}
+
+.overview-option:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(24, 42, 79, 0.08);
+}
+
+.overview-option:focus-visible {
+  outline: 2px solid rgba(31, 75, 153, 0.4);
+  outline-offset: 2px;
+}
+
+.overview-option-location {
+  position: relative;
+}
+
+.location-overview-parent {
+  padding: 0.95rem 1rem;
+}
+
+.location-overview-child {
+  padding: 0.75rem 0.9rem;
+  border-radius: 0.85rem;
+}
+
+.location-type-frozen {
+  background: rgba(86, 156, 214, 0.14);
+}
+
+.location-type-refrigerated {
+  background: rgba(80, 180, 140, 0.12);
+}
+
+.location-type-ambient {
+  background: rgba(224, 176, 65, 0.14);
+}
+
+.location-type-unknown {
+  background: rgba(108, 117, 125, 0.08);
+}
+
+.stock-filter-location-rail {
+  position: absolute;
+  left: 0.65rem;
+  top: 0.65rem;
+  bottom: 0.65rem;
+  width: 2px;
+  border-radius: 999px;
+  background: rgba(31, 75, 153, 0.16);
+}
+
+@media (max-width: 575.98px) {
+  .overview-list-split,
+  .location-overview-columns {
+    grid-template-columns: 1fr;
+  }
+
+  .overview-list-locations {
+    max-height: 20rem;
+  }
+}
+
 .legend-card {
   height: 100%;
   padding: 1rem;
   border-radius: 1rem;
   border: 1px solid var(--lonc-border);
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    opacity 160ms ease,
+    border-color 160ms ease,
+    filter 160ms ease;
+}
+
+button.legend-card {
+  appearance: none;
+  width: 100%;
+}
+
+button.legend-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(24, 42, 79, 0.08);
+}
+
+button.legend-card:focus-visible {
+  outline: 2px solid rgba(31, 75, 153, 0.4);
+  outline-offset: 2px;
+}
+
+.legend-card-active {
+  border-color: rgba(31, 75, 153, 0.35);
+  box-shadow: 0 16px 28px rgba(24, 42, 79, 0.1);
+  filter: saturate(1.05);
+}
+
+.legend-card-inactive {
+  opacity: 0.45;
+  filter: saturate(0.7);
 }
 
 .legend-expired,