/* ========================================================================================================== *
 * Billing layout helpers.
 *
 * Color, type, and register chrome come from the design system (lawfirm.tokens.css). This sheet only keeps
 * finance-specific structure: end-aligned money columns, a voided row that stays in place,
 * and the overview's two account columns. It does not repaint DataTable, PageHeader, Tabs, AmountSummary,
 * or SideDialog.
 * Unlayered and loaded after the token sheet.
 * ========================================================================================================== */

/* Figure columns: one amount, aligned to the inline end, in the system money color. */
.lf-ledger .lf-table th.lf-ledger__fig,
.lf-ledger .lf-table td.lf-ledger__fig {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
}

.lf-ledger__nowrap {
    white-space: nowrap;
}

.lf-ledger__detail {
    white-space: nowrap;
}

.lf-ledger__detail .lf-clip + .lf-status {
    margin-inline-start: .4rem;
    vertical-align: middle;
}

.lf-ledger__ref {
    font-weight: 650;
    white-space: nowrap;
    unicode-bidi: isolate;
}

.lf-ledger__empty {
    color: var(--lf-muted);
}

/* Day book and other plain tables (not DataTable) use the same header treatment as a register. */
.lf-ledger .lf-table-region:not(.lf-datatable__region) .lf-table thead th {
    background: var(--lf-surface-muted);
    color: var(--lf-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-block-end: 1px solid var(--lf-rule);
}

/* Totals sit on the muted band with one steel rule, the same quiet close as AmountSummary. */
.lf-ledger .lf-table tfoot td {
    padding-block: .6rem;
    border-block-start: 1px solid var(--lf-rule);
    border-block-end: 0;
    background: var(--lf-surface-muted);
    font-weight: 700;
    color: var(--lf-ink);
}

.lf-ledger .lf-table tfoot tr + tr td {
    border-block-start: 0;
}

.lf-ledger__total-label {
    white-space: nowrap;
}

/* A voided entry keeps its place. The status cell stays readable. */
.lf-ledger .lf-ledger__row--void td {
    color: var(--lf-muted);
}

.lf-ledger .lf-ledger__row--void td:not(.lf-ledger__keep):not(.lf-datatable__check) {
    text-decoration: line-through;
    text-decoration-color: var(--lf-danger);
    text-decoration-thickness: 1px;
}

/* A row just posted is marked with the same selection blue as the rest of the app, then settles. */
.lf-ledger .lf-ledger__row--posted td {
    animation: lf-ledger-posted 2.4s cubic-bezier(.16, 1, .3, 1) both;
}

.lf-ledger .lf-ledger__row--posted td:first-child {
    box-shadow: inset 3px 0 0 var(--lf-migaro);
}

.lf-ledger .lf-ledger__row--posted td:first-child:dir(rtl) {
    box-shadow: inset -3px 0 0 var(--lf-migaro);
}

@keyframes lf-ledger-posted {
    0% { background: color-mix(in srgb, var(--lf-migaro) 16%, var(--lf-surface)); }
    100% { background: color-mix(in srgb, var(--lf-migaro) 6%, var(--lf-surface)); }
}

@media (prefers-reduced-motion: reduce) {
    .lf-ledger .lf-ledger__row--posted td {
        animation: none;
        background: color-mix(in srgb, var(--lf-migaro) 8%, var(--lf-surface));
    }
}

/* Overview: two account columns, then the day book. Cards and progress come from the design system. */
.lf-ledger-abstract {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--lf-space-5) var(--lf-space-6);
    align-items: start;
}

.lf-ledger-account {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.lf-ledger-account + .lf-ledger-account {
    padding-inline-start: var(--lf-space-6);
    border-inline-start: 1px solid var(--lf-rule);
}

.lf-ledger-account__title,
.lf-ledger-section-title {
    margin: 0;
    color: var(--lf-ink);
    font-size: .875rem;
    font-weight: 700;
}

.lf-ledger-account .lf-amount-summary + .lf-ledger-account__title {
    margin-block-start: var(--lf-space-2);
}

.lf-ledger-measure__legend {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: .35rem 0 0;
    color: var(--lf-muted);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums lining-nums;
}

.lf-ledger-note {
    margin: 0;
    color: var(--lf-muted);
    font-size: .8125rem;
}

/* Advance balance: one sum read across the page (received − spent − returned = balance). Each term shows its
   magnitude; the operator sits on the rule between terms, and the result closes on the muted band. */
.lf-advance-balance {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 0;
    border: 1px solid var(--lf-rule);
    border-radius: var(--lf-radius-lg);
    background: var(--lf-surface);
}

.lf-advance-balance__term {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
    padding: 1rem 1.5rem;
}

.lf-advance-balance__term + .lf-advance-balance__term {
    border-inline-start: 1px solid var(--lf-rule);
}

.lf-advance-balance__term[data-op]::before {
    content: attr(data-op) / "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--lf-rule);
    border-radius: 50%;
    background: var(--lf-surface);
    color: var(--lf-muted);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    translate: -50% -50%;
}

.lf-advance-balance__term[data-op]:dir(rtl)::before {
    translate: 50% -50%;
}

.lf-advance-balance dt {
    color: var(--lf-muted);
    font-size: .8125rem;
    font-weight: 500;
}

.lf-advance-balance dd {
    margin: 0;
}

.lf-advance-balance .lf-money__amount {
    color: var(--lf-ink);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums lining-nums;
}

.lf-advance-balance__term--result {
    border-start-end-radius: inherit;
    border-end-end-radius: inherit;
    background: var(--lf-surface-muted);
}

.lf-advance-balance__term--result[data-op]::before {
    color: var(--lf-ink);
}

.lf-advance-balance__term--result dt {
    color: var(--lf-ink);
    font-weight: 700;
}

.lf-advance-balance__term--result .lf-money__amount {
    font-size: 1.5rem;
    font-weight: 800;
}

.lf-advance-balance .lf-money--negative .lf-money__amount {
    color: var(--lf-danger);
}

@media (max-width: 640px) {
    .lf-advance-balance {
        grid-auto-flow: row;
    }

    .lf-advance-balance__term {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .85rem 1rem;
    }

    .lf-advance-balance__term + .lf-advance-balance__term {
        border-inline-start: 0;
        border-block-start: 1px solid var(--lf-rule);
    }

    .lf-advance-balance__term[data-op]::before,
    .lf-advance-balance__term[data-op]:dir(rtl)::before {
        inset-block-start: 0;
        inset-inline-start: 1rem;
        translate: 0 -50%;
    }

    .lf-advance-balance__term--result {
        border-radius: 0 0 var(--lf-radius-lg) var(--lf-radius-lg);
    }
}

@media (max-width: 900px) {
    .lf-ledger-abstract {
        grid-template-columns: minmax(0, 1fr);
    }

    .lf-ledger-account + .lf-ledger-account {
        padding-inline-start: 0;
        padding-block-start: var(--lf-space-4);
        border-inline-start: 0;
        border-block-start: 1px solid var(--lf-rule);
    }
}

@media (forced-colors: active) {
    .lf-ledger .lf-ledger__row--posted td {
        animation: none;
        background: transparent;
        box-shadow: none;
    }
}