/* The shared table supplies the markup; scoped rules add sticky axes and a
   distinct total without changing the other inventory tables. */
.stock-overview {
  --container-width: 90rem;
  min-inline-size: 0;
}

.stock-overview__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--size-3);
  padding: var(--size-4);
  margin-block-end: var(--size-5);
  background: var(--input-background);
  border: var(--border) solid var(--color-border);
  border-radius: var(--rounded-lg);
}

.stock-overview__filter-id,
.stock-overview__filter-title {
  display: grid;
  gap: var(--size-1);
}

.stock-overview__filter-id { flex: 0 1 9rem; }
.stock-overview__filter-title { flex: 1 1 16rem; }

.stock-overview__status:not([hidden]) {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--size-2);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.stock-overview__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--size-2);
  margin-block-end: var(--size-3);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.stock-overview__scroll {
  overflow: auto;
  max-block-size: 65vh;
  background: var(--input-background);
  border: var(--border) solid var(--color-border);
  border-radius: var(--rounded-lg);
  isolation: isolate;
}

.stock-overview__scroll:focus-visible {
  outline: 2px solid var(--color-selected-dark);
  outline-offset: 2px;
}

.stock-overview__table {
  border-collapse: separate;
  border-spacing: 0;
}

.stock-overview__table :is(th, td) {
  padding: var(--size-3) var(--size-2);
  vertical-align: middle;
}

.stock-overview__table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--color-bg);
  border-block-end: var(--border) solid var(--color-border);
}

.stock-overview__table tbody td {
  border-block-end: var(--border) solid var(--color-border-light);
}

.stock-overview__table tbody tr:last-child td { border-block-end: 0; }
.stock-overview__table tbody tr:hover td { background: var(--color-hover-light); }

.stock-overview__table .stock-overview__product {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: clamp(10rem, 20vw, 17rem);
  min-inline-size: clamp(10rem, 20vw, 17rem);
  max-inline-size: 17rem;
  background: var(--input-background);
  border-inline-end: var(--border) solid var(--color-border);
  overflow-wrap: anywhere;
}

.stock-overview__table thead .stock-overview__product {
  z-index: 3;
  background: var(--color-bg);
}

.stock-overview__product-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--size-4);
}

.stock-overview__product-name {
  display: block;
  font-weight: var(--font-medium);
  line-height: 1.5;
}

.stock-overview__product-id {
  display: block;
  margin-block-start: var(--size-1);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.stock-overview__table .stock-overview__quantity {
  min-inline-size: 5rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Let warehouse columns share spare space instead of stretching Actions. */
.stock-overview__table :is(th, td):last-child:not([colspan]) {
  inline-size: 1%;
  white-space: nowrap;
}

/* Wrap complete warehouse names so location details stay visible. */
.stock-overview__quantity .stock-overview__sort {
  display: inline-flex;
  max-inline-size: 10rem;
  justify-content: end;
  vertical-align: middle;
}

.stock-overview__sort-label {
  min-inline-size: 0;
  overflow-wrap: break-word;
  white-space: normal;
}

.stock-overview__table tbody .stock-overview__quantity span { white-space: nowrap; }

.stock-overview__table .stock-overview__total {
  inline-size: 1%;
  background: var(--color-secondary);
  border-inline-start: var(--border) solid var(--color-border);
  font-weight: var(--font-semibold);
}

.stock-overview__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1);
  min-block-size: var(--size-6);
}

.stock-overview__sort svg { flex-shrink: 0; }
.stock-overview__sort:hover,
.stock-overview__sort--active { color: var(--color-primary); }
.stock-overview__sort--active { font-weight: var(--font-semibold); }
.stock-overview__sort:focus-visible { outline: 2px solid var(--color-selected-dark); }