/* Stable payment layout + mobile expanded-row polish. Loaded last. */

.variable-add-payment-layout .payment-method-field,
.variable-add-payment-layout .payment-method-field .payment-select-shell,
.variable-add-payment-layout .payment-method-field .payment-select-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}

.variable-add-payment-layout .payment-method-field {
  justify-self: stretch !important;
  align-self: stretch !important;
}

.variable-add-payment-layout .payment-method-field .payment-select-button {
  min-height: 52px !important;
}

@media (min-width: 641px) {
  .variable-add-payment-layout .variable-expense-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: none !important;
  }

  .variable-add-payment-layout .date-field {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .variable-add-payment-layout .description-field {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .variable-add-payment-layout .subcategory-field {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .variable-add-payment-layout .amount-field {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .variable-add-payment-layout .budget-field {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  .variable-add-payment-layout .payment-method-field {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
}

@media (max-width: 640px) {
  .variable-add-payment-layout .variable-expense-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }

  .variable-add-payment-layout .date-field {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .variable-add-payment-layout .description-field {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .variable-add-payment-layout .subcategory-field {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .variable-add-payment-layout .payment-method-field {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  .variable-add-payment-layout .amount-field {
    grid-column: 1 !important;
    grid-row: 5 !important;
  }

  .variable-add-payment-layout .budget-field {
    grid-column: 1 !important;
    grid-row: 6 !important;
  }

  .mobile-row-payment-cell .mobile-payment-save-feedback {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    color: var(--green, #47e6a6);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .mobile-row-payment-cell .mobile-payment-save-feedback.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-row-editing-ready
    :is(.fixed-card, .variable-card)
    tbody tr.is-mobile-row-open
    .mobile-row-payment-cell {
    grid-area: payment !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px;
  }

  .mobile-row-editing-ready .variable-card tbody tr.is-mobile-row-open {
    grid-template-areas:
      "description"
      "payment"
      "amount"
      "budget"
      "liquidity" !important;
  }

  .mobile-row-editing-ready .fixed-card tbody tr.is-mobile-row-open {
    grid-template-areas:
      "description description"
      "payment payment"
      "amount amount"
      "pin pin" !important;
  }
}