/* Ge det redigerbara värdet företräde när indatakolumnen blir smal. */
.flow-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flow-row .unit-input {
  grid-template-columns: minmax(72px, 1fr) 64px;
}

.flow-row .unit-input select,
.flow-row .unit-input span {
  width: 72px !important;
  min-width: 72px;
  max-width: 72px;
}

.unit-input select:not(:first-child) {
  width: 72px !important;
  min-width: 72px;
  max-width: 72px;
}

/* Egen pil ligger ovanpå fältet och kan därför inte klippas av vid zoom. */
.unit-input select:not(:first-child),
.dimension-method .method-limit select {
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-align-last: center;
  padding: 0 23px 0 5px;
  background-image: none;
}

.unit-input:has(select),
.dimension-method .method-limit:has(select) {
  position: relative;
}

.unit-input:has(select)::after,
.dimension-method .method-limit:has(select)::after {
  content: "▾";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 8px;
  transform: translateY(-54%);
  color: #45576b;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

/* Undvik att två kolumner gör inmatningsfälten för smala vid fönsterzoom. */
@media (min-width: 951px) {
  .app-grid {
    grid-template-columns: minmax(440px, .86fr) minmax(420px, 1.14fr);
  }
}

@media (max-width: 950px) {
  .app-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 621px) {
  .unit-input {
    grid-template-columns: minmax(84px, 1fr) 72px;
  }

  .unit-input select,
  .unit-input span {
    min-width: 72px;
  }
}