/* Final GenFIRE amount/share/return pairing.
   Amount + percentage bar stay in the left column.
   Annual return / annual interest stays beside them in the right column. */

body[data-app-view="plans"] .asset-entry.asset-entry-has-return,
body[data-app-view="plans"] .liability-entry.liability-entry-has-interest {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
  align-items: start !important;
}

body[data-app-view="plans"] .asset-entry > .entry-title,
body[data-app-view="plans"] .asset-entry > .field-help,
body[data-app-view="plans"] .asset-entry > .risk-level-field,
body[data-app-view="plans"] .asset-entry > .inline-check,
body[data-app-view="plans"] .asset-entry > .real-property-sale-fields,
body[data-app-view="plans"] .liability-entry > .entry-title,
body[data-app-view="plans"] .liability-entry > .inline-check {
  grid-column: 1 / -1 !important;
}

body[data-app-view="plans"] .asset-entry.asset-entry-has-return > input[type="number"],
body[data-app-view="plans"] .liability-entry.liability-entry-has-interest > input[type="number"] {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  margin: 0 !important;
}

body[data-app-view="plans"] .asset-entry.asset-entry-has-return > .balance-share,
body[data-app-view="plans"] .liability-entry.liability-entry-has-interest > .balance-share {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body[data-app-view="plans"] .asset-entry.asset-entry-has-return > .compact-suffix,
body[data-app-view="plans"] .liability-entry.liability-entry-has-interest > .compact-suffix {
  grid-column: 2 !important;
  grid-row: 2 / 4 !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body[data-app-view="plans"] .liability-entry > .interest-label {
  display: none !important;
}

body[data-app-view="plans"] .liability-entry .compact-suffix.no-inline-label {
  padding-top: 18px !important;
}

body[data-app-view="plans"] .liability-entry .compact-suffix.no-inline-label::before {
  content: attr(data-inline-label) !important;
}

body[data-app-view="plans"] #assetItemList .custom-item-row.has-return,
body[data-app-view="plans"] #liabilityItemList .custom-item-row.has-liability-interest {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 14px !important;
  align-items: start !important;
}

body[data-app-view="plans"] #assetItemList .custom-item-row.has-return > label:first-child,
body[data-app-view="plans"] #assetItemList .custom-item-row.has-return > .risk-level-field,
body[data-app-view="plans"] #assetItemList .custom-item-row.has-return > .custom-row-check,
body[data-app-view="plans"] #assetItemList .custom-item-row.has-return > .remove-item,
body[data-app-view="plans"] #liabilityItemList .custom-item-row.has-liability-interest > label:first-child,
body[data-app-view="plans"] #liabilityItemList .custom-item-row.has-liability-interest > .custom-row-check,
body[data-app-view="plans"] #liabilityItemList .custom-item-row.has-liability-interest > .remove-item {
  grid-column: 1 / -1 !important;
}

body[data-app-view="plans"] #assetItemList .custom-item-row.has-return > label:nth-of-type(2),
body[data-app-view="plans"] #liabilityItemList .custom-item-row.has-liability-interest > label:nth-of-type(2) {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

body[data-app-view="plans"] #assetItemList .custom-item-row.has-return > label:nth-of-type(3),
body[data-app-view="plans"] #liabilityItemList .custom-item-row.has-liability-interest > label:nth-of-type(3) {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 420px) {
  body[data-app-view="plans"] .asset-entry.asset-entry-has-return,
  body[data-app-view="plans"] .liability-entry.liability-entry-has-interest,
  body[data-app-view="plans"] #assetItemList .custom-item-row.has-return,
  body[data-app-view="plans"] #liabilityItemList .custom-item-row.has-liability-interest {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}