/*
 * Phones: two across wherever the content is short. The classes are set by
 * mobile-two-col.js, which decides what pairs; the card grids need no measuring and
 * are here alone. Every rule is for 768px and under.
 */
@media (max-width: 768px) {

  /* --- 1. Label / value details: loans, members, requests, masters -------------- */
  #app .m2c-pairs,
  .modal .m2c-pairs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: start;
    grid-auto-flow: row dense;
  }

  /* The panel's title, notes, and anything else that is not a detail: whole row. */
  .m2c-pairs > :not(.mr-detail-row):not(.detail-row):not(.sploan__term),
  .m2c-pairs > .m2c-wide {
    grid-column: 1 / -1;
  }

  .m2c-pairs > .mr-detail-row,
  .m2c-pairs > .detail-row,
  .m2c-pairs > .sploan__term {
    min-width: 0;
  }

  /* Label over value, as the stacked rows already were on a phone. */
  .m2c-pairs > .mr-detail-row {
    grid-template-columns: 1fr !important;
    gap: .1rem !important;
  }

  .m2c-pairs > .detail-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: .1rem;
    padding: .35rem 0 !important;
    border-bottom: 1px dashed rgba(15, 61, 122, .08);
  }

  .m2c-pairs > .mr-detail-row .mr-detail-value,
  .m2c-pairs > .detail-row > :last-child,
  .m2c-pairs > .sploan__term dd {
    overflow-wrap: anywhere;
  }

  /* --- 2. Short form fields in pairs -------------------------------------------- */
  #app .m2c-form,
  .modal .m2c-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: .6rem !important;
    align-items: start;
  }

  .m2c-form > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .m2c-form > .m2c-half {
    grid-column: auto;
  }

  .m2c-form > .m2c-half input,
  .m2c-form > .m2c-half select {
    width: 100%;
    min-width: 0;
  }

  /* Labels of a pair on different numbers of lines: both get two, boxes level. */
  .m2c-lab2 > label {
    display: flex !important;
    flex-wrap: wrap;
    align-content: flex-end;
    column-gap: .25em; /* a separate "*" keeps its space */
    min-height: 2.7em;
    line-height: 1.3;
  }

  /* The master forms (Unit, Deposit and Loan Master) write their field pairs as
     .form-row like every other form, but platform.css sets them to one column under
     640px with a more specific selector than the site-wide pair rule
     (mobile-compact.css), so every field of a new unit stood alone. */
  #app .master-type-form__section-body .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem .6rem !important;
  }

  #app .master-type-form__section-body .form-row > .form-group:has(textarea),
  #app .master-type-form__section-body .form-row > .form-group--wide {
    grid-column: 1 / -1;
  }

  /* A field left over at the end of a two-across row (Marital Status, the third of
     three) takes the row rather than half of it. */
  #app .form-row > .form-group:last-child:nth-child(odd),
  .modal .form-row > .form-group:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* An email address or a street address does not fit half a phone (at 360px the
     box shows "branch@exa"), so a pair holding one goes back to one per row; the
     field beside it would otherwise sit alone in half the width. */
  #app .form-row:has(> .form-group input[type="email"]),
  #app .form-row:has(> .form-group input[maxlength="255"]),
  #app .form-row:has(> .form-group input[maxlength="500"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* --- 3. Rows of buttons that wrapped raggedly: equal columns ----------------- */
  #app .m2c-btns,
  .modal .m2c-btns {
    display: grid !important;
    gap: .4rem !important;
    align-items: stretch;
  }

  .m2c-btns--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .m2c-btns--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .m2c-btns > .btn {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    text-align: center;
    justify-content: center;
    line-height: 1.2;
    padding-left: .4rem !important;
    padding-right: .4rem !important;
  }

  /* One left over in a two-across row takes the whole of its row. */
  .m2c-btns--2 > .btn:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* --- 4. Plan and loan-type cards ----------------------------------------------
     Two across. The grid is written inline with a 220px floor, so they stacked one
     to a row, and mobile-compact.css's .deposit-plan-grid rule could not reach it. */
  #app .deposit-plan-grid,
  #app [style*="grid-template-columns"]:has(> .deposit-plan-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .5rem !important;
  }

  #app .deposit-plan-card {
    min-width: 0;
    padding: .65rem !important;
  }

  #app .deposit-plan-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* A statement's figures: an odd one out (Loan outstanding, now there are three)
     takes the row rather than half of it. */
  #app .member-statements-kpis > .member-statements-kpi:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* --- A disbursed loan's header: Back in its top-right corner ------------------
     The header wraps, so on a phone the long "Personal Loan · Account LA-…" line
     pushed ← Back onto a row of its own under the status badge — a whole row for one
     small button, with the corner beside the loan number empty. It now takes that
     corner — beside the "Disbursed loan" label and the number only — and the loan
     type and account line keep the full width below, so the account number is not
     broken in two. */
  #app .closure-member-page > div:has(> button[onclick^="clearMemberDisbursedLoanDetail"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .75rem !important;
    row-gap: 0 !important;
    align-items: start;
  }

  /* The text block's own lines join the grid, so each can be placed. */
  #app .closure-member-page > div:has(> button[onclick^="clearMemberDisbursedLoanDetail"]) > div:first-child {
    display: contents;
  }

  #app .closure-member-page > div:has(> button[onclick^="clearMemberDisbursedLoanDetail"]) > div:first-child > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  #app .closure-member-page > div:has(> button[onclick^="clearMemberDisbursedLoanDetail"]) > div:first-child > :nth-child(-n + 2) {
    grid-column: 1;
  }

  #app .closure-member-page > div > button[onclick^="clearMemberDisbursedLoanDetail"] {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    white-space: nowrap;
  }
}