/* Stock exceptions are visible through words, icons and restrained color.
   Healthy products keep the neutral inventory surface. */
#stockView :is(.card, tr, #wsProduct)[data-stock-state="empty"] {
  --inventory-state-color: #ff9690;
  --inventory-state-tint: #342327;
  --inventory-state-border: #654047;
}
#stockView :is(.card, tr, #wsProduct)[data-stock-state="low"] {
  --inventory-state-color: #edc073;
  --inventory-state-tint: #302b20;
  --inventory-state-border: #625337;
}
#stockView .card[data-stock-state] { position: relative; }
#stockView .card.inventory-card:is([data-stock-state="empty"], [data-stock-state="low"])::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--inventory-state-color) 35%, var(--inventory-state-color) 65%, transparent);
  opacity: .7;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--inventory-state-color) 18%, transparent);
  pointer-events: none;
  z-index: 1;
}
#stockView .inventory-card__status-slot { display: flex; align-items: center; min-height: 24px; margin: 0; }
#stockView .inventory-card__status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid var(--inventory-state-border, var(--ds-border));
  border-radius: 6px;
  background: var(--inventory-state-tint, var(--ds-inset));
  color: var(--inventory-state-color, var(--ds-muted)) !important;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.25;
  white-space: normal;
}
#stockView .inventory-card__status svg { flex: 0 0 14px; width: 14px; height: 14px; }
#stockView .card:is([data-stock-state="empty"], [data-stock-state="low"]) :is(.inventory-card__quantity, .inventory-row__quantity) strong {
  color: var(--inventory-state-color);
}
#stockView .card[data-stock-state="empty"] :is(.card__actions-inline, .inventory-row__actions) .btn:disabled {
  opacity: .38;
  cursor: not-allowed;
  background: transparent !important;
}

/* List and table retain their compact reading order. */
#stockView .card.inventory-row:is([data-stock-state="empty"], [data-stock-state="low"])::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--inventory-state-color);
  pointer-events: none;
}
#stockView .inventory-row .inventory-card__status-slot { min-height: 0; }
#stockView .inventory-row .inventory-card__status-slot:empty { display: none; }
#stockView .inventory-row .inventory-card__status { margin-top: 2px; }
#stockView .ws-inventory-table tr:is([data-stock-state="empty"], [data-stock-state="low"]) .ws-col-qty { color: var(--inventory-state-color); }
#stockView .ws-inventory-table .inventory-card__status { margin-block: 0 4px; font-size: 11px; min-height: 22px; }
#stockView #wsProduct:is([data-stock-state="empty"], [data-stock-state="low"]) .ws-stock-state,
#stockView #wsProduct:is([data-stock-state="empty"], [data-stock-state="low"]) .ws-product-numbers > div:first-child strong { color: var(--inventory-state-color); }

/* Status is a primary filter; color and kit choices live in a disclosure. */
#stockView #inventoryHealthFilters {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  order: 0;
}
#stockView #inventoryHealthFilters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ds-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
}
#stockView #inventoryHealthFilters button:hover { background: var(--ds-elevated); color: var(--ds-text); }
#stockView #inventoryHealthFilters button[aria-pressed="true"] { background: var(--ds-elevated); border-color: var(--ds-border); color: var(--ds-text); }
#stockView #inventoryHealthFilters button[data-stock-health="low"][aria-pressed="true"] { background: #302b20; border-color: #625337; color: #edc073; }
#stockView #inventoryHealthFilters button[data-stock-health="empty"][aria-pressed="true"] { background: #342327; border-color: #654047; color: #ff9690; }
#stockView #inventoryHealthFilters button [data-health-count] { font: inherit; font-variant-numeric: tabular-nums; opacity: .72; }
#stockView .ws-color-options { position: relative; flex: 0 0 auto; min-width: 0; order: 1; }
#stockView .ws-color-options > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
#stockView .ws-color-options > summary::-webkit-details-marker { display: none; }
#stockView .ws-color-options > summary::after { content: "⌄"; font-size: 14px; }
#stockView .ws-color-options[open] > summary,
#stockView .ws-color-options > summary:hover { color: var(--ds-text); background: var(--ds-elevated); }
#stockView .ws-color-options[data-filter-active="true"] > summary { color: var(--ds-accent); }
#stockView .ws-color-options[open] > summary::after { transform: rotate(180deg); }
#stockView .ws-color-options__body {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 15;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface);
  box-shadow: 0 10px 24px #0005;
}
#stockView .ws-inventory-toolbar .ws-color-options #statusFilters { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px !important; padding: 0 !important; }
#stockView .ws-color-options #statusFilters .chip { min-height: 44px !important; padding: 8px 10px !important; font-size: 12px !important; text-align: left; }

/* A narrow menu stays beside its trigger when the toolbar wraps on iPad. */
@media (min-width: 768px) {
  #stockView .ws-display-options__body { width: 168px; }
  #stockView .ws-display-options .inventory-layout { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  #stockView .ws-display-options .inventory-layout button { width: 100%; min-width: 0; min-height: 44px !important; justify-content: flex-start; }
}

@media (max-width: 767px) {
  #stockView #inventoryHealthFilters { flex: 1 1 100%; gap: 4px; }
  #stockView #inventoryHealthFilters button { flex: 1 1 0; min-width: 0; padding: 6px; gap: 4px; font-size: 12px; white-space: normal; }
  body[data-stock-tools="closed"] #stockView #wsColorOptions { display: none; }
  #stockView #wsColorOptions { flex: 1 1 100%; }
  #stockView .ws-color-options__body { position: static; width: auto; max-width: 100%; margin-top: 4px; box-shadow: none; }
  #stockView .ws-color-options #statusFilters .chip { width: 100%; }
}

/* Rotated phones retain the existing horizontal card layout. */
@media (min-width: 768px) and (max-width: 1199px) and (max-height: 520px) {
  #stockView .card.inventory-card .inventory-card__status-slot { grid-column: 1; grid-row: 1; }
  #stockView .card.inventory-card .card__title { grid-column: 1; grid-row: 2; }
  #stockView .card.inventory-card .inventory-card__balance { grid-column: 2; grid-row: 1 / span 2; }
}