/*
 * Detail panels: no empty half-rows, no stretched lists (detail-panels.js).
 * Wider than a phone only; phones have mobile-two-col.css. The member profile's tabs
 * arrange their own panels and are left out.
 */

/* A panel with nothing but its heading (detail-panels.js), at every width. */
.mr-detail-panel.dp-empty {
  display: none !important;
}

/* A staff loan application's facts: a card of columns, label above value. */
.lnfacts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  column-gap: 1.25rem;
  margin-top: .25rem;
  padding: .55rem .9rem .65rem;
  border: 1px solid rgba(15, 61, 122, .1);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
}

.loan-disburse-detail .lnfacts {
  margin-bottom: .75rem;
}

.lnfact {
  display: grid;
  align-content: start;
  gap: .1rem;
  min-width: 0;
  padding: .4rem 0;
  border-bottom: 1px dashed rgba(15, 61, 122, .08);
}

.lnfact--wide {
  grid-column: span 2;
}

.lnfact__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.lnfact__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .lnfacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .8rem;
  }

  .lnfact--wide {
    grid-column: 1 / -1;
  }
}
@media (min-width: 769px) {

  /*
   * Panels share a row and grow into it: two to a row where the page asked for two
   * (.amd-detail-panels), as many as fit elsewhere — and whatever is left over at the
   * end takes the rest of its row instead of sitting in half of it.
   */
  #app .mr-detail-top:not(.mtabs__panel > *),
  .modal .mr-detail-top {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .85rem;
  }

  #app .mr-detail-top:not(.mtabs__panel > *) > *,
  .modal .mr-detail-top > * {
    flex: 1 1 280px;
    min-width: 0;
  }

  #app .mr-detail-top.amd-detail-panels:not(.mtabs__panel > *) > *,
  .modal .mr-detail-top.amd-detail-panels > * {
    flex-basis: calc(50% - .5rem);
  }

  /* Panels the page meant to take the whole row still do. */
  #app .mr-detail-top > .mr-detail-panel--full,
  #app .mr-detail-top > .mr-detail-panel--wide,
  #app .mr-detail-top > .amd-detail-panel--address {
    flex-basis: 100%;
  }

  /*
   * A panel that has come out wide: its details in columns, label above value, so it
   * is only as tall as its content. The title, and anything that is not a detail,
   * keeps the whole width.
   */
  .mr-detail-panel.dp-spread {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    column-gap: 1.25rem;
    align-content: start;
  }

  .mr-detail-panel.dp-spread > :not(.mr-detail-row) {
    grid-column: 1 / -1;
  }

  .mr-detail-panel.dp-spread > .mr-detail-row {
    grid-template-columns: 1fr;
    align-content: start;
    gap: .1rem;
    padding: .4rem 0;
    border-bottom: 1px dashed rgba(15, 61, 122, .08);
    min-width: 0;
  }

  .mr-detail-panel.dp-spread > .mr-detail-row:first-of-type {
    padding-top: .4rem;
  }

  .mr-detail-panel.dp-spread > .mr-detail-row:last-child {
    padding-bottom: .4rem;
  }

  .mr-detail-panel.dp-spread > .mr-detail-row.dp-long {
    grid-column: span 2;
  }

  .mr-detail-panel.dp-spread .mr-detail-panel-title {
    margin-bottom: .2rem;
  }
}