/* Failure and retry states are kept separate so a completed partial job is
   never visually mistaken for a job that is still running. */
.package-failed{
  padding:3px 7px;
  border-radius:999px;
  background:#ffe2de;
  color:#b53d35;
  font-weight:740;
}

.retry-sync{
  min-height:25px;
  padding:2px 8px;
  border:1px solid #e4a8a2;
  border-radius:999px;
  background:#fff7f5;
  color:#ad4139;
  font-size:12px;
  font-weight:760;
  cursor:pointer;
}

.retry-sync:hover:not(:disabled){
  border-color:#cc6259;
  background:#fff0ed;
}

.retry-sync:disabled{
  cursor:not-allowed;
  opacity:.55;
}

.record-row.failed{background:#fff7f6;}
.status-badge.failed{background:#ffe4e0;color:#b33f36;}
.record-row.failed .action-reason{color:#b25249;}

.retry-all{
  border-color:#d9958e;
  background:#fff7f5;
  color:#a7443b;
}

.retry-all:hover:not(:disabled){
  border-color:#c65f55;
  background:#fff0ed;
}

/* 微信内置浏览器在部分机型会把原来的双列网格压成极窄的一列，
   长商品名因而逐字竖排。移动端统一改为单列信息流，确保可读。 */
@media(max-width:790px){
  .record-row{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
  .record-row>.product-cell,
  .record-row>.number,
  .record-row>.status-badge,
  .record-row>.row-action{
    grid-column:1;
    grid-row:auto;
    width:100%;
  }
  .record-row>.number{display:block;}
  .record-row>.status-badge{justify-self:start;width:max-content;}
  .record-row>.row-action{
    align-items:flex-start;
    flex-direction:row;
    text-align:left;
  }
  .record-row>.row-action .action-reason{
    flex:1;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .product-cell strong,.product-cell small{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}