.kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kpi-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.kpi-button:hover,
.kpi-button:focus-visible {
  border-color: #8f79ed;
  box-shadow: 0 12px 30px #5944bd20;
  outline: none;
  transform: translateY(-1px);
}

.kpi-button.kpi-accent:hover,
.kpi-button.kpi-accent:focus-visible {
  border-color: transparent;
  box-shadow: 0 14px 34px #6549e840;
}

.kpi-breakdown {
  margin-top: 12px;
}

.breakdown-panel {
  border-color: #d9d4f4;
}

.breakdown-panel > .panel-head > strong {
  font-size: 1.25rem;
}

.breakdown-table a,
.stock-edit-table a {
  color: var(--violet);
  font-weight: 650;
  text-decoration: none;
}

.breakdown-table .numeric,
.stock-edit-table .numeric,
.payout-breakdown .numeric {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.breakdown-table th.numeric,
.stock-edit-table th.numeric {
  text-align: right;
}

.metric-focus {
  background: #f3f0ff;
  font-weight: 750;
}

.sales-product,
.product-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 300px;
}

.sales-product-image,
.product-identity-image {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 56px;
  overflow: hidden;
  border-radius: 10px;
  background: #edeafb;
  color: var(--violet);
  font-size: .7rem;
}

.sales-product-image img,
.product-identity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-identity {
  color: inherit;
  font-weight: inherit;
}

.product-detail-link {
  color: inherit;
  text-decoration: none;
}

.product-identity-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-seller-article {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 750;
}

.product-one-c-name,
.product-wb-title,
.product-wb-code {
  overflow-wrap: anywhere;
}

.risk-row-wide {
  grid-template-columns: minmax(0, 1fr) auto;
}

.risk-row-wide .product-identity {
  min-width: 0;
}

.risk-row-wide > :last-child {
  text-align: right;
}

.product-one-c-name {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 450;
}

.product-wb-title {
  color: #464255;
  font-size: 0.78rem;
  font-weight: 500;
}

.product-wb-code {
  color: var(--muted);
  font-size: 0.7rem;
  text-decoration: none;
}

.product-wb-code:hover,
.product-wb-code:focus-visible {
  color: var(--violet);
  text-decoration: underline;
}

.page-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.page-head-actions form {
  margin: 0;
}

.payout-cell {
  border-radius: 8px;
  font-weight: 750;
}

.payout-positive,
.payout-per-kg-positive {
  color: #146442;
  background: #e8f7ef !important;
}

.payout-negative,
.payout-per-kg-negative {
  color: #9a2638;
  background: #ffecef !important;
}

.payout-per-kg-warning {
  color: #76540e;
  background: #fff3c9 !important;
}

.seller-article-line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
}

.one-c-product-name {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 450;
}

.stock-product {
  min-width: 330px;
}

.inventory-matrix-wrap {
  margin-top: 12px;
}

.inventory-matrix-table {
  min-width: max-content;
}

.inventory-matrix-table th:first-child,
.inventory-matrix-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 340px;
  background: #fff;
}

.inventory-matrix-table th:first-child {
  z-index: 2;
  background: #f0eff7;
}

.inventory-matrix-table th.numeric {
  min-width: 145px;
}

.inventory-matrix-table th small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.inventory-matrix-table .inventory-total {
  background: #f3f0ff;
  font-weight: 750;
}

.inventory-summary-head {
  margin-top: 24px;
}

.one-c-warning {
  padding: 10px 12px;
  border: 1px solid #e8c56b;
  border-radius: 10px;
  background: #fff7dc;
  color: #6e5515;
}

.payout-breakdown {
  margin: 0;
}

.payout-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}

.payout-breakdown dt {
  color: var(--muted);
  font-weight: 500;
}

.payout-breakdown dt strong,
.payout-breakdown dt small {
  display: block;
}

.payout-breakdown dt strong {
  color: var(--ink);
  font-weight: 650;
}

.payout-breakdown dt small {
  margin-top: 3px;
  font-size: .72rem;
}

.payout-breakdown dd {
  margin: 0;
}

.payout-breakdown .payout-total {
  margin-top: 5px;
  border-bottom: 0;
  font-weight: 750;
}

.payout-breakdown .payout-information {
  margin-top: 5px;
  padding: 12px 10px;
  border: 1px solid #d8d1f4;
  border-radius: 10px;
  background: #f6f3ff;
}

.advertising-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.advertising-overview div {
  padding: 11px;
  background: var(--paper);
  border-radius: 12px;
}

.advertising-overview dt,
.advertising-overview small {
  display: block;
  color: var(--muted);
  font-size: .7rem;
}

.advertising-overview dd {
  margin: 4px 0 0;
  font-weight: 750;
}

.advertising-breakdown-table > tbody > tr.advertising-zero > * {
  color: #8b8997;
  background: #f6f6f8;
  --bs-table-bg: #f6f6f8;
  --bs-table-color: #8b8997;
}

.advertising-zero a,
.advertising-zero .metric-focus {
  color: #8b8997;
}

.advertising-breakdown-table > tbody > tr.advertising-zero > .metric-focus {
  background: #eeeef2;
  --bs-table-bg: #eeeef2;
}

.advertising-funnel {
  min-width: 150px;
  margin: 0;
}

.advertising-funnel div {
  display: grid;
  grid-template-columns: minmax(76px, 1fr) auto;
  gap: 12px;
  padding: 2px 0;
}

.advertising-funnel dt {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 500;
}

.advertising-funnel dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

@media (max-width: 1050px) {
  .advertising-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.inline-message {
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid;
  border-radius: 12px;
  font-size: .84rem;
}

.inline-message-success {
  color: #135e42;
  background: #e8f8f0;
  border-color: #bde6d2;
}

.inline-message-error {
  color: #8a2130;
  background: #fff0f2;
  border-color: #f0bdc4;
}

.seller-stock-editor {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.seller-warehouse {
  margin-top: 18px;
  padding: 14px;
  background: var(--paper);
  border-radius: 14px;
}

.seller-warehouse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.seller-warehouse-head small {
  display: block;
  color: var(--muted);
}

.stock-amount-input {
  width: 120px;
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stock-edit-table .status-column {
  text-align: center;
}

.stock-action-cell {
  text-align: right;
}

.one-c-stock-head {
  margin-top: 1.5rem;
}

.one-c-stock-table {
  min-width: 960px;
}

.one-c-stock-table .one-c-article-input {
  min-width: 210px;
}

.one-c-toggle {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: .5rem;
  position: relative;
  white-space: nowrap;
}

.one-c-toggle input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.one-c-toggle-track {
  background: #c8c7d0;
  border-radius: 999px;
  display: inline-block;
  height: 28px;
  position: relative;
  transition: background-color .18s ease;
  width: 48px;
}

.one-c-toggle-track::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(31, 28, 48, .3);
  content: "";
  height: 22px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform .18s ease;
  width: 22px;
}

.one-c-toggle input:checked + .one-c-toggle-track {
  background: var(--green);
}

.one-c-toggle input:checked + .one-c-toggle-track::after {
  transform: translateX(20px);
}

.one-c-toggle input:focus-visible + .one-c-toggle-track {
  outline: 3px solid rgba(108, 76, 241, .3);
  outline-offset: 2px;
}

.one-c-toggle-copy {
  font-size: .82rem;
  font-weight: 700;
}

.one-c-toggle-cell {
  min-width: 180px;
}

.one-c-rule-state {
  color: var(--muted);
  font-size: .72rem;
  margin-top: .35rem;
}

.one-c-rule-state-success {
  color: var(--green);
}

.one-c-rule-state-error {
  color: var(--red);
}

.one-c-rule-state-loading {
  display: none;
}

.one-c-rule-state.htmx-request .one-c-rule-state-ready {
  display: none;
}

.one-c-rule-state.htmx-request .one-c-rule-state-loading {
  display: inline;
}

.stock-status {
  color: var(--muted);
  font-size: .75rem;
}

.stock-status-draft,
.stock-status-pending,
.stock-status-sending {
  color: #8b6414;
}

.stock-status-failed {
  color: var(--red);
}

.stock-status-synced {
  color: var(--green);
}

.cost-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}

.cost-form label span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .75rem;
}

.cost-form .cost-note {
  grid-column: span 3;
}

@media (max-width: 1050px) {
  .cost-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cost-form .cost-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .page-head-actions {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-grid .kpi-button:last-child {
    grid-column: 1 / -1;
  }

  .seller-warehouse {
    padding: 10px;
  }

  .seller-warehouse-head {
    align-items: stretch;
    flex-direction: column;
  }

  .seller-warehouse-head .btn {
    width: 100%;
  }

  .stock-amount-input {
    width: min(140px, 55vw);
  }

  .inventory-matrix-table thead {
    display: table-header-group;
  }

  .inventory-matrix-table tbody tr {
    display: table-row;
    padding: 0;
  }

  .inventory-matrix-table td,
  .inventory-matrix-table td:first-child {
    display: table-cell;
    padding: 8px 10px;
  }

  .inventory-matrix-table td::before {
    display: none;
  }

  .inventory-matrix-table th:first-child,
  .inventory-matrix-table td:first-child {
    min-width: 270px;
  }

  .cost-form {
    grid-template-columns: 1fr;
  }

  .cost-form .cost-note {
    grid-column: auto;
  }

  .sales-breakdown-table td:nth-child(2)::before {
    content: "Склад";
  }

  .sales-breakdown-table td:nth-child(3)::before {
    content: "Продано, кг";
  }

  .sales-breakdown-table td:nth-child(4)::before {
    content: "Продано, шт.";
  }

  .sales-breakdown-table td:nth-child(5)::before {
    content: "Продажи";
  }

  .sales-breakdown-table td:nth-child(6)::before {
    content: "Продажи за 1 кг";
  }

  .sales-breakdown-table td:nth-child(7)::before {
    content: "К перечислению";
  }

  .sales-breakdown-table td:nth-child(8)::before {
    content: "К перечислению за 1 кг";
  }

  .product-sales-table td:nth-child(2)::before {
    content: "Продано, кг";
  }

  .product-sales-table td:nth-child(3)::before {
    content: "Продано, шт.";
  }

  .product-sales-table td:nth-child(4)::before {
    content: "Продажи";
  }

  .product-sales-table td:nth-child(5)::before {
    content: "Продажи за 1 кг";
  }

  .product-sales-table td:nth-child(6)::before {
    content: "К перечислению";
  }

  .product-sales-table td:nth-child(7)::before {
    content: "К перечислению за 1 кг";
  }

  .cost-breakdown-table td:nth-child(2)::before {
    content: "Продано, шт.";
  }

  .cost-breakdown-table td:nth-child(3)::before {
    content: "Продано, кг";
  }

  .cost-breakdown-table td:nth-child(4)::before {
    content: "Продажи";
  }

  .cost-breakdown-table td:nth-child(5)::before {
    content: "Себестоимость производства";
  }

  .cost-breakdown-table td:nth-child(6)::before {
    content: "Затраты WB без рекламы";
  }

  .cost-breakdown-table td:nth-child(7)::before {
    content: "Реклама WB";
  }

  .cost-breakdown-table td:nth-child(8)::before {
    content: "Прибыль";
  }

  .advertising-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .advertising-breakdown-table td:nth-child(2)::before {
    content: "Воронка рекламы";
  }

  .advertising-breakdown-table td:nth-child(3)::before {
    content: "Рекламная выручка";
  }

  .advertising-breakdown-table td:nth-child(4)::before {
    content: "Продажи";
  }

  .advertising-breakdown-table td:nth-child(5)::before {
    content: "Себестоимость производства";
  }

  .advertising-breakdown-table td:nth-child(6)::before {
    content: "Затраты WB без рекламы";
  }

  .advertising-breakdown-table td:nth-child(7)::before {
    content: "Реклама WB";
  }

  .advertising-breakdown-table td:nth-child(8)::before {
    content: "ДРР";
  }

  .advertising-breakdown-table td:nth-child(9)::before {
    content: "Прибыль";
  }

  .inventory-breakdown-table td:nth-child(2)::before {
    content: "Остаток";
  }

  .inventory-breakdown-table td:nth-child(3)::before {
    content: "Состояние";
  }

  .inventory-breakdown-table td:nth-child(4)::before {
    content: "Обновлено";
  }

  .stock-edit-table td:nth-child(2)::before {
    content: "Сейчас в WB";
  }

  .stock-edit-table td:nth-child(3)::before {
    content: "Наш остаток";
  }

  .stock-edit-table td:nth-child(4)::before {
    content: "Статус";
  }
}