/* stock before the pilot (stock2.js): to order by supplier, expiring, thrown away, the throw-away sheet. Prefix st2-. */
.st2-tabs button.st2-hot { color: #b42318 }
.st2-tabs button.st2-hot[aria-pressed="true"] { color: #b42318 }
.st2-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 880px }
.st2-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.st2-lead { margin: 0; color: var(--ink2); font-size: var(--fs-13); line-height: 1.5; max-width: 60ch }
.st2-none { padding: 28px 18px; text-align: center; color: var(--ink2); border: 1px dashed var(--sep); border-radius: 14px; background: #fff }
.st2-foot { margin: 2px 0 0; font-size: var(--fs-12); color: var(--ink2); line-height: 1.5 }
.st2-h { margin: 10px 0 0; font-size: var(--fs-15); font-weight: 600 }

/* one card per supplier */
.st2-sup, .st2-sent, .st2-card { background: #fff; border: 1px solid var(--sep); border-radius: 14px; overflow: hidden }
.st2-sup > header, .st2-sent > header, .st2-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sep2) }
.st2-sup > header div, .st2-sent > header div { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.st2-sup > header b, .st2-sent > header b, .st2-card > header b { font-size: var(--fs-15); font-weight: 600 }
.st2-nosup > header b { color: var(--ink2) }
.st2-ol { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--sep2) }
.st2-ol:has(.st2-pick) { grid-template-columns: auto minmax(0, 1fr) auto }
.st2-pick { width: 20px; height: 20px; accent-color: var(--acc); margin: 0 }
.st2-skip > span, .st2-skip .st2-q { opacity: .45 }
.st2-ol span { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.st2-ol b { font-weight: 500 }
.st2-q { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px }
.st2-q input { width: 72px; height: 40px; border: 1px solid var(--sep); border-radius: 10px; text-align: center; font: inherit; font-size: var(--fs-15); font-variant-numeric: tabular-nums; background: #fff }
.st2-q small { color: var(--ink2); font-size: var(--fs-12) }
.st2-sup > footer, .st2-sent > footer { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fafafb; flex-wrap: wrap }
.st2-go { min-height: 44px; padding: 0 18px; border-radius: 12px; background: #1f9d55; color: #fff; font-weight: 600; font-size: var(--fs-14); display: inline-flex; align-items: center; gap: 6px; text-decoration: none }
.st2-print { min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--sep2); font-weight: 500; font-size: var(--fs-13); color: var(--ink) }
.st2-print:disabled { opacity: .5 }
.st2-sent.late { border-color: #f5c58a }
.st2-late { color: #a15c07; font-weight: 600 }
.st2-sl { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; font-size: var(--fs-13) }
.st2-sl small { color: var(--ink2) }

/* expiring */
.st2-days { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--ink2) }
.st2-days select { height: 36px; border: 1px solid var(--sep); border-radius: 9px; padding: 0 8px; font: inherit; font-size: var(--fs-13); background: #fff }
.st2-card.bad { border-color: #f5b5ae }
.st2-card.bad > header { background: #fff0ee; color: #8f1a12 }
.st2-er { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--sep2) }
.st2-er:last-child, .st2-ol:last-of-type { border-bottom: 0 }
.st2-er > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.st2-er b { font-weight: 500 }
.st2-when { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-13); font-variant-numeric: tabular-nums }
.st2-when small { color: var(--ink2); font-size: var(--fs-12) }
.st2-er.gone .st2-when { color: #b42318; font-weight: 600 }

/* thrown away */
.st2-per button { min-width: 72px }
.st2-tots { display: flex; flex-wrap: wrap; gap: 8px }
.st2-tot { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--sep); font-size: var(--fs-13) }
.st2-wr { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--sep2); font-size: var(--fs-13) }
.st2-wr:last-child { border-bottom: 0 }
.st2-wr > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.st2-wr b { font-weight: 500 }
.st2-t { color: var(--ink2); font-size: var(--fs-12); font-variant-numeric: tabular-nums }
.st2-why { padding: 2px 9px; border-radius: 999px; background: var(--sep2); font-size: var(--fs-12); white-space: nowrap }
.st2-why.expired { background: #fff4e0; color: #8a4b00 }
.st2-why.damaged, .st2-why.contaminated { background: #fff0ee; color: #b42318 }

/* the throw-away sheet */
.st2-lots, .st2-whys { display: flex; flex-wrap: wrap; gap: 8px }
.st2-lots .chip, .st2-whys .chip { min-height: 40px }
.st2-whys .chip[aria-checked="true"], .st2-lots .chip[aria-checked="true"] { background: var(--c1); color: #fff; border-color: var(--c1) }
.st2-wqf .st2-q input { width: 110px }
.st2-wlink { margin-top: 4px; align-self: flex-start }
.dv-exp { flex: 0 0 132px !important }

@media (max-width: 760px) {
  .st2-er { grid-template-columns: minmax(0, 1fr) auto }
  .st2-er .st2-when { grid-column: 1; grid-row: 2 }
  .st2-wr { grid-template-columns: 56px minmax(0, 1fr) }
  .st2-wr > span:nth-child(3), .st2-wr > span:nth-child(4) { grid-column: 2 }
}
.kpis .kpi.bad b { color: #b42318 }