/* ============================================================
 * suppliers-stage5.css — Шаг 5: Suppliers / Offers Table
 * HTML-обёртка + стили для динамических классов pricing-v7.js
 *
 * НЕ изменяет: pricing-v7.js, app.py, result-stage2.css,
 * Product Card, Recommendation, States.
 * Стилизует только классы, создаваемые JS-рендером:
 *   Suppliers: .sc .sn .sr2 .sm2 .sf2 (+ .sc.o)
 *   Offers:    .gh2 .oc .oc-* (+ модификаторы h/m/l, td/td2, y/n)
 * ============================================================ */

/* ---------- Обёртки (вне динамических контейнеров) ---------- */
.suppliers-block {
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
}

.suppliers-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f2f5;
}

.suppliers-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}

.suppliers-head b {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 1px 8px;
}

.suppliers-tools {
  margin: 10px 0 8px;
}

.offers-block {
  margin-top: 6px;
}

/* ============================================================
 * SUPPLIERS — карточки поставщиков (динамические .sc)
 * ============================================================ */
.fg,
div.fg,
.suppliers-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.sc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fafbfc;
  border: 1px solid #edf0f3;
  border-radius: 9px;
  cursor: pointer;
  min-width: 0;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.sc:hover {
  background: #f3f6ff;
  border-color: #cdd8f0;
}

.sc.o {
  background: #eff4ff;
  border-color: #b6c8f0;
  box-shadow: 0 0 0 1px #b6c8f0 inset;
}

.sc .sn {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

.sc .sr2 {
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  white-space: nowrap;
  flex-shrink: 0;
}

.sc .sm2 {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  background: #eef0f3;
  border-radius: 8px;
  padding: 1px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sc .sf2 {
  font-size: 12px;
  font-weight: 700;
  color: #b91c1c;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
 * OFFERS — группы предложений (.gh2)
 * ============================================================ */
.gh2 {
  margin: 18px 0 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  background: #f3f5f8;
  border-left: 3px solid #2563eb;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

/* ============================================================
 * OFFERS — карточка предложения (.oc)
 * ============================================================ */
.oc {
  display: grid;
  grid-template-columns:
    minmax(150px, 1.4fr)      /* поставщик */
    minmax(110px, 1.1fr)      /* артикул */
    minmax(90px, 0.9fr)       /* бренд */
    minmax(80px, auto)        /* цена */
    minmax(48px, auto)        /* скоринг */
    minmax(90px, auto)        /* срок */
    minmax(90px, auto)        /* наличие */
    auto;                     /* действие */
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #edf0f3;
  border-bottom: none;
  min-width: 0;
  transition: background .12s ease, box-shadow .12s ease;
}

.oc:first-of-type { border-radius: 9px 9px 0 0; }
.oc:last-of-type  { border-radius: 0 0 9px 9px; border-bottom: 1px solid #edf0f3; }
.oc:hover { background: #fafcff; box-shadow: 0 1px 4px rgba(17,24,39,.05); }

/* --- Поставщик (вторично) --- */
.oc-supp {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.oc-ic {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
}

.oc-sn {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-sr {
  font-size: 10px;
  color: #9ca3af;
}

/* --- Артикул (длинные не ломают сетку) --- */
.oc-art {
  font-size: 12px;
  font-weight: 500;
  color: #1f2937;
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
  word-break: break-all;
  min-width: 0;
}

/* --- Бренд --- */
.oc-br { min-width: 0; }
.oc-bn {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oc-bt {
  font-size: 10px;
  color: #6b7280;
}

/* --- Цена (главный акцент) --- */
.oc-pr { min-width: 0; }
.oc-p {
  font-size: 16px;
  font-weight: 800;
  color: #b91c1c;
  white-space: nowrap;
  letter-spacing: -.2px;
}

/* --- Скоринг --- */
.oc-sc { justify-self: start; }
.oc-sb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.oc-sb {
  background: #f3f4f6;
  color: #6b7280;
}
.oc-sb.h { background: #dcfce7; color: #15803d; }
.oc-sb.m { background: #fef9c3; color: #a16207; }
.oc-sb.l { background: #fee2e2; color: #b91c1c; }
.oc-sb:empty { /* пустой скоринг (—) */
  background: #f3f4f6;
  color: #9ca3af;
}

/* --- Срок --- */
.oc-term { white-space: nowrap; }
.oc-t {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}
.oc-t.td  { color: #15803d; font-weight: 700; }
.oc-t.td2 { color: #b45309; font-weight: 600; }

/* --- Наличие --- */
.oc-st { white-space: nowrap; }
.oc-stk {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.oc-stk.y { background: #dcfce7; color: #15803d; }
.oc-stk.n { background: #f3f4f6; color: #6b7280; }

/* --- Действие (корзина) --- */
.oc-act { justify-self: end; }
.oc-add {
  width: 32px;
  height: 32px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.oc-add:hover { background: #eff4ff; border-color: #b6c8f0; }
.oc-add:active { transform: scale(.92); }

/* ============================================================
 * MOBILE — адаптивное карточное представление
 * ============================================================ */
@media (max-width: 900px) {
  .oc {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "supp art"
      "br   pr"
      "term st"
      "sc   act";
    row-gap: 6px;
    column-gap: 12px;
    padding: 12px;
  }
  .oc-supp { grid-area: supp; }
  .oc-art  { grid-area: art;  justify-self: end; text-align: right; font-size: 11px; }
  .oc-br   { grid-area: br; }
  .oc-pr   { grid-area: pr;  justify-self: end; }
  .oc-p    { font-size: 15px; }
  .oc-sc   { grid-area: sc; }
  .oc-term { grid-area: term; }
  .oc-st   { grid-area: st;  justify-self: end; }
  .oc-act  { grid-area: act; }

  .fg,
  .suppliers-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .sc { padding: 8px 10px; }
  .sc .sf2 { font-size: 11px; }
}

@media (max-width: 560px) {
  .fg,
  .suppliers-grid {
    grid-template-columns: 1fr;
  }
}