/*
    Job transaction list - JobTransactionRenderer.renderIntoDiv.

    A private class namespace (.Txn*) for this one renderer, deliberately NOT the shared
    .JobDisbursementLineItem* classes it used to borrow. Those are `width: 50%; float: left`
    (Mobile.css) combined with `min-width: 250px`, which fight on a phone: the min-width wins, so
    two "half-width" labels can never sit side by side yet stay floated, and the rows wrap
    semi-randomly. They are still used by the disbursement screens, so they are left alone here
    rather than changed underneath those callers.

    THEMING: every colour below resolves from Tokens.css, which is loaded unconditionally
    (index-template.html) rather than through Theme.css. That matters - Theme.css is disabled under
    Tradie Classic, so token-consuming rules that live *in* Theme.css go unstyled there. Because
    these rules consume the tokens directly, and Dark.css redefines the :root token values, one set
    of rules covers all four combinations (Classic/Light x Dark on/off) with no duplicate
    Classic-only block. Do not hardcode a hex here - that is what breaks Dark Mode.
*/

/* ── Section ─────────────────────────────────────────────────────────── */

/* clear:both because this block is rendered after whatever the caller has already built, and that
   can end in floated content - the job history screen's image/attachment thumbnails
   (.JobAttachmentThumbnailParent is float:left) sit directly above it. Without this the first
   section wraps up alongside the thumbnails instead of starting on its own line. */
.TxnSection {
    clear: both;
    margin-bottom: var(--space-3);
}

.TxnSectionHead {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0 0 var(--space-2) 0;
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-strong);
    font-family: var(--font);
    font-size: var(--type-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Card ────────────────────────────────────────────────────────────── */

.TxnCard {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-1);
    padding: var(--space-2);
    /* The old .JobTransaction was `display: inline-block` with no margin, so consecutive
       transactions butted together into one continuous grey slab. */
    margin-bottom: var(--space-2);
    font-family: var(--font);
    font-size: var(--type-base);
    color: var(--text);
    overflow: hidden;
}

/* Title left, date right, on one baseline - the hierarchy the old markup had no way to express,
   since every field carried the identical label class and only some were bolded. */
.TxnCardHead {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.TxnCardTitle {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    /* Long supplier/product names truncate rather than reflowing the date onto its own line. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.TxnCardDate {
    flex: 0 0 auto;
    font-size: var(--type-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.TxnCardSub {
    margin-top: 2px;
    font-size: var(--type-sm);
    color: var(--text-muted);
    /* Descriptions are free text from the ERP and can be long - wrap, don't truncate. */
    white-space: normal;
    word-wrap: break-word;
}

/* ── Line items ──────────────────────────────────────────────────────── */

.TxnLines {
    margin: var(--space-2) 0 0 0;
    padding: var(--space-2) 0 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

.TxnLine {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: 2px 0;
}

/* Quantity as its own fixed, right-aligned column so figures line up vertically down the card.
   Previously the quantity was concatenated into the front of the description string, which is why
   nothing scanned ("2ea PROD123 - 15mm copper elbow"). */
.TxnQty {
    flex: 0 0 4.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.TxnLineText {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    word-wrap: break-word;
}

/* Product/activity code, de-emphasised so the human-readable description leads. */
.TxnCode {
    margin-right: var(--space-1);
    font-size: var(--type-sm);
    color: var(--text-muted);
}

/* ── Footer, empty state, refresh ────────────────────────────────────── */

.TxnFooter {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 2px solid var(--border-strong);
    font-family: var(--font);
    font-size: var(--type-base);
    font-weight: 700;
    color: var(--text);
}

.TxnFooterValue {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

/* Content, not chrome. The old empty state and total both used .InlineLoadingSpinnerText
   (opacity .75, centred), which reads as a transient loading message. */
.TxnEmpty {
    clear: both;
    padding: var(--space-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: var(--type-base);
    color: var(--text-muted);
    text-align: center;
}

/* The whole block is one tap-to-refresh target (see renderIntoDiv). Nothing said so except the
   empty state's text, so a populated list looked inert. */
.TxnRefreshBar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-2);
    border-top: 1px solid var(--border);
    font-family: var(--font);
    font-size: var(--type-sm);
    color: var(--text-muted);
}

.TxnUpdating {
    clear: both;
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font);
    font-size: var(--type-sm);
    color: var(--text-muted);
    text-align: center;
}