.compositions-shell .page-head {
  background: #fff;
}

.composition-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.composition-toolbar {
  grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(150px, .62fr));
}

.composition-note {
  border-color: rgba(47, 139, 108, .22);
  background: #f2faf5;
  color: #286b55;
}

.composition-note strong {
  color: var(--green);
}

.composition-table {
  min-width: 1180px;
}

.composition-count {
  display: grid;
  gap: 4px;
  min-width: 150px;
}

.composition-count b {
  font-size: 18px;
}

.composition-count small,
.composition-meta,
.component-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.status-badge.missing_composition {
  background: #fff4e5;
  color: #8a5b19;
}

.status-badge.low_margin {
  background: #fff0ef;
  color: var(--danger);
}

.composition-drawer .drawer-panel {
  width: min(640px, 100vw);
}

.composition-form {
  display: grid;
  gap: 14px;
}

.composition-totals {
  margin-bottom: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.composition-list {
  margin: 4px 0 0;
}

.composition-list .component-row {
  grid-template-columns: minmax(190px, 1.2fr) minmax(92px, .5fr) minmax(92px, .5fr) auto;
}

.component-select {
  min-height: 38px;
}

.component-quantity {
  min-height: 38px;
}

.component-cost {
  display: grid;
  gap: 3px;
  min-width: 84px;
  font-weight: 920;
}

.remove-component {
  width: 38px;
  min-height: 38px;
  padding: 0;
}

.add-component-panel {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(110px, .4fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faf4;
}

@media (max-width: 1120px) {
  .composition-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 760px) {
  .composition-summary,
  .composition-toolbar,
  .form-grid,
  .add-component-panel {
    grid-template-columns: 1fr;
  }

  .composition-list .component-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .composition-drawer .drawer-panel {
    padding: 16px;
  }
}