/*
 * Account Statements on a phone: each transaction reads like a line in a banking app.
 *
 *   Loan Repayment                          − ₹3,899
 *   Loan repayment · LA-20260904-000086 · Principal 3,899.49 …
 *   25-09-2026   Ref Test                    [Paid]
 *
 * It was a card of seven "LABEL  value" pairs, two to a row with a label column in
 * each half — values squeezed beside their labels, the description over four lines —
 * and the card stopped short of the right edge, because a table row laid out as a grid
 * inside a table does not stretch. The table is a plain block here, each row a card
 * the full width, and the labels are gone where the layout says what a value is: the
 * amount is red with a minus or green with a plus, the date and reference sit together
 * under the description, the balance or status at the right.
 *
 * statement-lines.js marks which of Debit / Credit is empty ("—") so only the real one
 * shows, and marks an EMI history line, whose amounts read "Due" and "Paid".
 *
 * Overrides platform.css, mobile-compact.css and ui-system.css for this one table,
 * hence the !important on the layout.
 *
 * Deposits and loans are separate reports (statement-sections.js): each total names
 * itself ("Held now", "Outstanding now") rather than sitting under a shared heading.
 */

/* --- Every width: the sections' totals and the summary bar ------------------ */
.stmt-loans-card {
  margin-top: 1rem;
}

.stmt-foot__cap {
  display: block;
  color: var(--muted, #6F7E9D);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.stmt-foot__val {
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.stmt-foot__cell--in .stmt-foot__val { color: #067647; }
.stmt-foot__cell--out .stmt-foot__val { color: #b42318; }
.stmt-foot__cell--now .stmt-foot__val { color: var(--primary, #1A2D5A); }
.stmt-foot__cell--owed .stmt-foot__val { color: #b54708; }

/* How a tile's figure is made up: "Deposits ₹10,000 + interest earned ₹48". */
.stmt-kpi__sub {
  margin-top: .15rem;
  color: var(--muted, #6F7E9D);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
}

.stmt-foot__note {
  display: block;
  margin-top: .2rem;
  color: var(--muted, #6F7E9D);
  font-size: 11.5px;
  font-weight: 500;
}

.stmt-meta__group {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(1, 181, 116, .1);
  color: #065f46;
}

.stmt-meta__group--loan {
  background: rgba(181, 71, 8, .1);
  color: #7a2e0e;
}

/*
 * Wider screens: the description wraps. Every table cell is one line (data-tables.css),
 * and a description may take 280px, so on a laptop the seven columns overran the card
 * and the last one — Balance, or the loan's Outstanding now — was cut off at the edge.
 * On a statement the figures are what must stay in view; the words can take two lines.
 */
@media (min-width: 769px) {
  #app table.member-statements-table tbody td[data-label="Description"] {
    min-width: 160px;
    max-width: none;
    white-space: normal;
    overflow: visible;
    line-height: 1.4;
  }

  #app table.member-statements-table tfoot td.member-statements-tfoot-label,
  #app table.member-statements-table tfoot td.stmt-foot__cell {
    white-space: normal;
  }
}

@media (max-width: 768px) {
  #app table.member-statements-table,
  #app table.member-statements-table tbody,
  #app table.member-statements-table tfoot {
    display: block !important;
    width: 100% !important;
  }

  #app table.member-statements-table tbody tr.member-statements-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "type type debit"
      "type type credit"
      "desc desc desc"
      "date ref  bal" !important;
    grid-auto-flow: row !important;
    align-items: center;
    column-gap: .6rem !important;
    row-gap: .25rem !important;
    width: 100% !important;
    margin: 0 0 .5rem !important;
    padding: .65rem .8rem !important;
    border: 1px solid var(--border, #E6DCC4) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-sizing: border-box;
  }

  #app table.member-statements-table tbody tr.member-statements-row > td {
    display: block !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left;
  }

  #app table.member-statements-table tbody tr.member-statements-row > td::before {
    content: none !important;
  }

  /* The labels that remain are words in the line, not table headings: none of
     platform.css's 10px uppercase label column. */
  #app table.member-statements-table tbody tr.member-statements-row > td::before {
    flex: none !important;
    display: inline !important;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-transform: none !important;
    letter-spacing: normal !important;
  }

  /* An empty amount ("—") is not shown: a line is a debit or a credit. */
  #app table.member-statements-table tbody tr.member-statements-row > td.sl-empty {
    display: none !important;
  }

  /* The type (or instalment) — its chip — top left. */
  #app table.member-statements-table tbody tr.member-statements-row > td[data-label="Type"],
  #app table.member-statements-table tbody tr.member-statements-row > td[data-label="Installment"] {
    grid-area: type;
    align-self: start;
  }

  /* The amount, top right: minus and red going out, plus and green coming in. */
  #app table.member-statements-table tbody tr.member-statements-row > td.member-statements-debit {
    grid-area: debit;
    justify-self: end;
    color: #b42318 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #app table.member-statements-table tbody tr.member-statements-row > td.member-statements-credit {
    grid-area: credit;
    justify-self: end;
    color: #067647 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  #app table.member-statements-table tbody tr.member-statements-row:not(.sl-emi) > td.member-statements-debit::before {
    content: "− " !important;
  }

  #app table.member-statements-table tbody tr.member-statements-row:not(.sl-emi) > td.member-statements-credit::before {
    content: "+ " !important;
  }

  /* An instalment is owed, then paid — not money in and out — so its amounts say
     which they are: "Due ₹8,720", "Paid ₹11,183". */
  #app table.member-statements-table tbody tr.member-statements-row.sl-emi > td.member-statements-debit::before,
  #app table.member-statements-table tbody tr.member-statements-row.sl-emi > td.member-statements-credit::before {
    color: var(--muted, #6F7E9D) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  #app table.member-statements-table tbody tr.member-statements-row.sl-emi > td.member-statements-debit::before { content: "Due  " !important; }
  #app table.member-statements-table tbody tr.member-statements-row.sl-emi > td.member-statements-credit::before { content: "Paid  " !important; }

  /* A loan line is repaid or taken — not money in and out of savings. */
  #app table.member-statements-table.stmt-table--loan tbody tr.member-statements-row > td.member-statements-debit::before,
  #app table.member-statements-table.stmt-table--loan tbody tr.member-statements-row > td.member-statements-credit::before {
    color: var(--muted, #6F7E9D) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  #app table.member-statements-table.stmt-table--loan tbody tr.member-statements-row > td.member-statements-debit::before { content: "Repaid  " !important; }
  #app table.member-statements-table.stmt-table--loan tbody tr.member-statements-row > td.member-statements-credit::before { content: "Loan taken  " !important; }
  #app table.member-statements-table.stmt-table--loan tbody tr.member-statements-row > td.member-statements-credit { color: #b54708 !important; }

  /* What it was, across the card. */
  #app table.member-statements-table tbody tr.member-statements-row > td[data-label="Description"] {
    grid-area: desc;
    color: var(--text2, #2E3E63) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* When and which: small, together, under it. */
  #app table.member-statements-table tbody tr.member-statements-row > td.member-statements-date {
    grid-area: date;
    color: var(--muted, #6F7E9D) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  #app table.member-statements-table tbody tr.member-statements-row > td.member-statements-date .member-statements-date__sub {
    display: block;
    font-weight: 500;
  }

  #app table.member-statements-table tbody tr.member-statements-row > td.member-statements-ref {
    grid-area: ref;
    color: var(--muted, #6F7E9D) !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #app table.member-statements-table tbody tr.member-statements-row > td.member-statements-ref::before {
    content: "Ref " !important;
    font-family: inherit;
    font-weight: 600;
  }

  /* The balance after it, or its status. */
  #app table.member-statements-table tbody tr.member-statements-row > td[data-label="Balance"],
  #app table.member-statements-table tbody tr.member-statements-row > td[data-label="Status"] {
    grid-area: bal;
    justify-self: end;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  #app table.member-statements-table tbody tr.member-statements-row > td[data-label="Balance"]:has(.member-statements-balance)::before {
    content: "Bal " !important;
    color: var(--muted, #6F7E9D);
    font-weight: 600;
  }

  #app table.member-statements-table tbody tr.member-statements-row > td[data-label="Balance"] .member-statements-balance {
    color: var(--text, #0D1B3E);
    font-weight: 700;
  }

  /* Nothing to show, or loading: a plain message across the list. */
  #app table.member-statements-table tbody tr:not(.member-statements-row) {
    display: block !important;
  }

  /* --- The totals: count on top, then Debit · Credit · Net in three columns ---- */
  #app table.member-statements-table tfoot .member-statements-tfoot-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .25rem .75rem;
    width: 100% !important;
    padding: .65rem .8rem !important;
    border: 1px solid var(--border, #E6DCC4) !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
    box-sizing: border-box;
  }

  #app table.member-statements-table tfoot .member-statements-tfoot-row > td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 14px;
    font-weight: 700;
    text-align: left !important;
  }

  /* A spacer that keeps the figures under their columns on a wide screen. */
  #app table.member-statements-table tfoot .member-statements-tfoot-row > td.stmt-foot__cell--blank {
    display: none !important;
  }

  #app table.member-statements-table tfoot .member-statements-tfoot-row > td.member-statements-tfoot-label {
    grid-column: 1 / -1;
    margin: 0 0 .15rem !important;
    padding: 0 0 .35rem !important;
    border-bottom: 1px dashed var(--border, #E6DCC4) !important;
    color: var(--text2, #2E3E63);
    font-size: 12px;
    font-weight: 600;
  }

  #app table.member-statements-table tfoot .member-statements-tfoot-row > td.member-statements-debit::before,
  #app table.member-statements-table tfoot .member-statements-tfoot-row > td.member-statements-credit::before,
  #app table.member-statements-table tfoot .member-statements-tfoot-row > td.member-statements-net::before {
    display: block;
    color: var(--muted, #6F7E9D);
    font-size: 11px;
    font-weight: 600;
  }

  #app table.member-statements-table tfoot .member-statements-tfoot-row > td.member-statements-debit::before { content: "Debit"; }
  #app table.member-statements-table tfoot .member-statements-tfoot-row > td.member-statements-credit::before { content: "Credit"; }
  #app table.member-statements-table tfoot .member-statements-tfoot-row > td.member-statements-net::before { content: "Net"; }
}

/* EMI tab: a partial payment listed beside the instalments (statement-sections.js). */
#app .member-statements-inst.member-statements-inst--partial {
  display: inline-block;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: #dcf3e6;
  color: #1f6f4a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}