/* Ledger account statement popup.

   Self-contained, like every report page: every selector here is scoped to .lap-* and nothing is
   shared with Ledger.css. The two are opened one from the other but are separate surfaces — a
   modal has no sidebar, no fixed toolbar and no page scroll to fit around, so almost none of the
   register's layout would have applied anyway.

   The modal itself is sized by Blazored's own wrapper; this file only lays out what goes inside
   it, and caps the table's own scroll box so a long statement scrolls internally rather than
   pushing the modal past the viewport. */

.lap-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Wide enough for eleven columns, but never wider than the viewport on a laptop. */
    width: min(1400px, 92vw);
    font-size: 12px;
    color: #26303d;
}


/* ---- head ------------------------------------------------------------------------------------ */

.lap-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e9f0;
}

.lap-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lap-title strong {
    font-size: 16px;
    line-height: 1.3;
    /* An account name can be long; the summary figures must keep their room. */
    overflow-wrap: anywhere;
}

.lap-title span {
    font-size: 11px;
    color: #6b7482;
}

.lap-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lap-figure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 96px;
    padding: 6px 12px;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    background: #f7f9fc;
}

.lap-figure span {
    font-size: 10px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6b7482;
}

.lap-figure strong {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.lap-figure-strong {
    border-color: #c7d0dd;
    background: #e8eef6;
}


/* ---- ageing strip -----------------------------------------------------------------------------

   The payoff of running FIFO rather than a plain running balance: the closing figure split by how
   long each unsettled charge has been sitting. Empty buckets stay in place, greyed, so the four
   ages always sit in the same order and the strip does not reflow between accounts. */

.lap-ageing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    background: #fbfcfe;
}

.lap-ageing-label {
    font-size: 10px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6b7482;
    margin-right: 2px;
}

.lap-bucket {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #eef0f3;
    border-radius: 999px;
    background: #ffffff;
    color: #9aa3b0;
}

.lap-bucket span {
    font-size: 11px;
}

.lap-bucket strong {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.lap-bucket.filled {
    border-color: #c7d0dd;
    color: #26303d;
}

/* An unadjusted credit is money in hand, not something overdue — it reads as the opposite of an
   ageing bucket rather than as the worst one. */
.lap-bucket-advance {
    border-color: #b7d4b9;
    background: #f1f8f1;
}


/* ---- toolbar --------------------------------------------------------------------------------- */

.lap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lap-filter select,
.lap-filter input {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #ffffff;
    font-size: 12px;
    color: #26303d;
}

.lap-filter-wide input {
    width: 260px;
    max-width: 100%;
}

.lap-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Asks for no width of its own, so the buttons sit flush right and stay inside the modal even
       when the filters have taken the whole row. */
    margin-left: auto;
}

.lap-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #ffffff;
    color: #26303d;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.lap-action-btn:hover:not(:disabled) {
    background: #eef2f7;
    border-color: #7d93b2;
}

.lap-action-btn:disabled {
    opacity: .55;
    cursor: default;
}

.lap-action-btn svg {
    fill: currentColor;
    flex: 0 0 auto;
}

.lap-close-btn {
    background: #eef2f7;
}


/* ---- table ------------------------------------------------------------------------------------

   Its own scroll box in both directions: eleven columns are wider than most laptops, and a long
   statement has to scroll inside the modal rather than growing it past the screen. */

.lap-scroll {
    overflow: auto;
    max-height: 58vh;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    background: #ffffff;
}

.lap-table {
    width: 100%;
    border-collapse: collapse;
    /* Fixed would divide the width evenly and starve Adjusted Against, which is the widest text
       and the one that shows what FIFO actually did. */
    table-layout: auto;
}

.lap-table th,
.lap-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #eef0f3;
    border-right: 1px solid #f2f4f7;
    vertical-align: top;
    white-space: nowrap;
}

.lap-table th:last-child,
.lap-table td:last-child {
    border-right: none;
}

/* Sticky header — the nearest scrollport is .lap-scroll, so top:0 pins to the box, not the page. */
.lap-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef2f7;
    border-bottom: 1px solid #d5dce6;
    text-align: right;
    font-weight: 600;
    color: #46505f;
}

.lap-table thead th.lap-text,
.lap-table thead th.lap-wide {
    text-align: left;
}

.lap-text {
    width: 110px;
    min-width: 110px;
    text-align: left;
}

/* min-width, not width alone: under table-layout:auto a `width` is only a suggestion the browser
   may ignore for any column whose content can wrap, which is every one of these. */
.lap-wide {
    min-width: 160px;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* tabular-nums makes every digit the same width, so decimal points line up down a column. */
.lap-num {
    width: 110px;
    min-width: 110px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.lap-age {
    width: 60px;
    min-width: 60px;
}

.lap-balance {
    font-weight: 600;
}

.lap-open {
    color: #a4423a;
}

/* The allocation list is the one cell worth reading in full — it names every entry this one was
   settled against, in the order FIFO took them. */
.lap-against {
    min-width: 220px;
    color: #46505f;
}

.lap-table tbody tr:hover td {
    background: #f7f9fc;
}

/* The opening balance is not a document, so it reads as the line the statement starts from. */
.lap-table tbody tr.lap-opening-row td {
    background: #f4f6fa;
    font-style: italic;
}

/* A row with something still unsettled — the ones the ageing strip is counting. */
.lap-table tbody tr.lap-open-row td.lap-open {
    font-weight: 600;
}

.lap-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #e8eef6;
    border-top: 2px solid #c7d0dd;
    font-weight: 600;
}

.lap-empty {
    padding: 24px 10px;
    text-align: center;
    color: #6b7482;
}


/* ---- mobile ----------------------------------------------------------------------------------- */

@media (max-width: 700px) {

    .lap-body {
        width: 92vw;
    }

    .lap-summary {
        width: 100%;
    }

    .lap-figure {
        flex: 1 1 0;
        min-width: 0;
        padding: 6px 8px;
    }

    .lap-filter-wide input {
        width: 100%;
    }

    .lap-actions {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .lap-action-btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 8px;
    }

    .lap-scroll {
        max-height: 50vh;
    }

    .lap-table th,
    .lap-table td {
        padding: 6px 8px;
    }

    .lap-num,
    .lap-text {
        width: 88px;
        min-width: 88px;
    }

    .lap-wide {
        min-width: 130px;
    }
}