/* ==========================================================================
   Transactions.css — styles specific to the Transactions module screens.
   ========================================================================== */

.txn-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 14px;
    margin-bottom: 26px
}

.txn-kpi-card {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--shadow)
}

.txn-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px
}

.txn-kpi-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--text)
}

.txn-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-top: 5px
}

.txn-kpi-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px
}

.txn-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px
}

.txn-section-title {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 16px;
    color: var(--text)
}

.txn-section-rule {
    flex: 1;
    height: 1px;
    background: var(--border)
}

.txn-primary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(190px,1fr));
    gap: 12px;
    margin-bottom: 26px
}

.txn-primary-card {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 13px 15px;
    cursor: pointer;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    width: 100%
}

    .txn-primary-card:hover {
        border-color: var(--border-strong);
        color: inherit
    }

.txn-primary-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px
}

.txn-primary-title {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.txn-recent-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.txn-recent-table-scroll {
    overflow: auto;
    max-height: 520px
}

.txn-recent-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 700px
}

    .txn-recent-table thead th {
        font-weight: 700;
        font-size: 10.5px;
        color: var(--text-3);
        padding: 11px 12px;
        background: var(--surface-2);
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 1
    }

        .txn-recent-table thead th:first-child {
            padding-left: 19px
        }

        .txn-recent-table thead th:last-child {
            padding-right: 19px
        }

        .txn-recent-table thead th.num {
            text-align: right
        }

    .txn-recent-table tbody td {
        padding: 11px 12px
    }

        .txn-recent-table tbody td:first-child {
            padding-left: 19px;
            font-family: var(--font-mono);
            font-weight: 700;
            color: var(--text)
        }

        .txn-recent-table tbody td:last-child {
            padding-right: 19px
        }

        .txn-recent-table tbody td.num {
            text-align: right;
            font-family: var(--font-mono);
            font-weight: 600
        }

            .txn-recent-table tbody td.num.pos {
                color: var(--green)
            }

            .txn-recent-table tbody td.num.neg {
                color: var(--accent)
            }

    .txn-recent-table tbody tr {
        border-top: 1px solid var(--border)
    }

        .txn-recent-table tbody tr:hover {
            background: var(--surface-2)
        }



/* =====================================================================
   MEMBER RECEIPT (mr-*) — append at end of Transactions.css
   Depends on lo-* classes (lo-context, lo-section, lo-subtabs, lo-struct)
   already defined in Loans.css. If Transactions pages don't load Loans.css,
   copy the referenced lo-* rules alongside these.
   ===================================================================== */

/* ---- overview band: 7-column meta ---- */
.mr-overview-meta {
    grid-template-columns: repeat(7, 1fr);
}

/* ---- lookup toggle (Member / SHG / Loan No / Savings A/c / Phone) ---- */
.mr-lookup-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 4px;
    margin: 0 0 16px;
    list-style: none;
}

    .mr-lookup-toggle .nav-item {
        display: flex;
    }

.mr-lookup-btn {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 7px 15px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-body);
}

    .mr-lookup-btn:hover {
        color: var(--text);
    }

    .mr-lookup-btn.active {
        background: var(--primary);
        color: #fff;
    }

/* ---- inline search inside member section ---- */
.mr-inline-search {
    width: 100%;
}

/* ---- entry tabs spacing ---- */
.mr-entry-tabs {
    margin-bottom: 14px;
}

/* ---- double-entry debit / credit coloring ---- */
.mr-debit {
    font-size: 13px;
    font-weight: 700;
    color: var(--danger);
}

.mr-credit {
    font-size: 13px;
    font-weight: 700;
    color: var(--green);
}

/* ---- payment summary width ---- */
.mr-pay-summary {
    min-width: 350px;
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
    .mr-overview-meta {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 720px) {
    .mr-overview-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .mr-lookup-toggle {
        display: flex;
        overflow-x: auto;
    }
}




/* =====================================================================
   MEMBER RECEIPT (mr-*) — append at end of Transactions.css
   Depends on lo-* classes (lo-context, lo-section, lo-subtabs, lo-struct)
   already defined in Loans.css. If Transactions pages don't load Loans.css,
   copy the referenced lo-* rules alongside these.
   ===================================================================== */

/* ---- overview band: 7-column meta ---- */
.mr-overview-meta {
    grid-template-columns: repeat(7, 1fr);
}

/* ---- lookup toggle (Member / SHG / Loan No / Savings A/c / Phone) ---- */
.mr-lookup-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 4px;
    margin: 0 0 16px;
    list-style: none;
}

    .mr-lookup-toggle .nav-item {
        display: flex;
    }

.mr-lookup-btn {
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 7px 15px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--font-body);
}

    .mr-lookup-btn:hover {
        color: var(--text);
    }

    .mr-lookup-btn.active {
        background: var(--primary);
        color: #fff;
    }

/* ---- inline search inside member section ---- */
.mr-inline-search {
    width: 100%;
}

/* ---- entry tabs spacing ---- */
.mr-entry-tabs {
    margin-bottom: 14px;
}

/* ---- double-entry debit / credit coloring ---- */
.mr-debit {
    font-size: 13px;
    font-weight: 700;
    color: var(--danger);
}

.mr-credit {
    font-size: 13px;
    font-weight: 700;
    color: var(--green);
}

/* ---- payment summary width ---- */
.mr-pay-summary {
    max-width: 420px;
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
    .mr-overview-meta {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 720px) {
    .mr-overview-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .mr-lookup-toggle {
        display: flex;
        overflow-x: auto;
    }
}

/* =====================================================================
   MEMBER RECEIPT — MULTI-LINE GRID additions
   ===================================================================== */

/* ---- receipt lines table ---- */
.mr-lines-table th,
.mr-lines-table td {
    vertical-align: middle;
}

.mr-line-sl {
    width: 40px;
    text-align: center;
    font-weight: 700;
    color: var(--text-3);
}

.mr-line-act {
    width: 44px;
    text-align: center;
}

/* compact controls inside grid rows */
.mr-line-ctl {
    min-width: 120px;
    padding: 7px 10px;
    font-size: 12.5px;
}

.mr-line-amt {
    max-width: 120px;
    text-align: right;
}

.mr-line-del {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .mr-line-del:hover {
        background: var(--danger-soft);
        border-color: var(--danger);
    }

/* ---- footer totals (Count + Amount) ---- */
.mr-lines-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.mr-total-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
}

.mr-total-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--text-3);
}

.mr-total-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

.mr-total-amount {
    background: var(--primary-soft);
    border-color: var(--primary);
}

    .mr-total-amount .mr-total-value {
        color: var(--primary);
    }

/* ---- double-entry total row ---- */
.mr-txn-total td {
    border-top: 2px solid var(--border-strong);
    background: var(--surface-2);
}

/* ---- responsive ---- */
@media (max-width: 720px) {
    .mr-lines-footer {
        flex-direction: column;
    }

    .mr-total-chip {
        justify-content: space-between;
    }
}



/* =====================================================================
   JOURNALS (jv-*) — append at end of Accounts.css
   Reuses lo-* and mr-* classes; adds the voucher-type hint + balance chip.
   ===================================================================== */

/* ---- voucher type hint banner ---- */
.jv-type-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    line-height: 1.45;
}

    .jv-type-hint i {
        color: var(--primary);
        margin-top: 1px;
        flex: 0 0 auto;
    }

/* ---- balance footer ---- */
.jv-balance-footer {
    flex-wrap: wrap;
}

.jv-balanced {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--green-soft);
    border-color: var(--green);
    color: var(--green);
    font-size: 13px;
    font-weight: 800;
}

    .jv-balanced i {
        font-size: 14px;
    }

/* unbalanced state — apply this class instead of jv-balanced when Dr != Cr */
.jv-unbalanced {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
    font-size: 13px;
    font-weight: 800;
}

    .jv-unbalanced i {
        font-size: 14px;
    }