/*
    aq-field-grid - the shared, global label/value summary panel

    Generalised from NACHAFileViewer's own file-info panel (wwwroot/css/Messaging/nacha-file-viewer.css) -
    the same "two-column grid of label/value rows, grouped under a small uppercase heading" pattern
    BulkPaymentViewer re-derived under bp-* for its own header panel. This is that pattern promoted to a
    real shared component, same spirit as aq-table.css - the next screen that needs "a compact summary of
    a record's own fields" reaches for aq-field-grid instead of a bespoke <table style="..."> full of
    inline styles (which is what every one of these panels looked like before it had its own screen-
    specific CSS).

    USAGE SKETCH:

        <div class="aq-group-title">Statement</div>
        <div class="aq-field-grid">
            <div class="aq-field">
                <span class="aq-field-key">Entity</span>
                <span class="aq-field-value">AQUA LONDON</span>
            </div>
            <div class="aq-field">
                <span class="aq-field-key">Opening balance</span>
                <span class="aq-field-value aq-field-value-debit">
                    204,357.86 D
                    <span class="aq-field-sub">First &middot; 12/04/2025</span>
                </span>
            </div>
        </div>

    Not scoped behind a screen-specific ancestor class the way nacha-file-viewer.css's own version is
    (`.nacha-viewer .nacha-field-grid`) - this file IS the shared component, so it applies wherever
    `.aq-field-grid` is used, full stop.
*/

.aq-group-title {
    font-size: calc(var(--aq-font-size) - 2px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--aq-blue-text);
    padding-bottom: 0.3rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid color-mix(in srgb, var(--aq-grey-light) 70%, var(--aq-white));
}

/* Pushes a badge (e.g. a "view raw detail" trigger) to the far right of the group title's own row,
   without affecting the plain text-only group titles elsewhere that don't carry one. */
.aq-group-title-with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Carries field documentation as a tooltip on hover. There is no icon to aim at, so the underline is what
   says "there is more here" - the long-standing convention for an explained term. */
.aq-hint {
    cursor: help;
    text-decoration: underline dotted var(--aq-grey-light);
    text-underline-offset: 0.2em;
}

    .aq-hint:hover {
        text-decoration-color: var(--aq-main-colour);
    }

/* Each set of record fields runs in two columns, so a group of rows takes half the vertical space of a
   single-column list. Row-major flow, so reading order and tab order still follow the DOM. */
.aq-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Wide enough that a right-aligned value never crowds the next column's label. */
    column-gap: 2rem;
}

    /* A group that only ever needs one column (a short field list, or a narrow host pane) - add this
       modifier rather than fighting the two-column default with per-field overrides. */
    .aq-field-grid.aq-field-grid-single {
        grid-template-columns: minmax(0, 1fr);
    }

.aq-field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--aq-grey-light) 50%, var(--aq-white));
}

    .aq-field .aq-field-key {
        color: var(--aq-grey-text);
        flex: 0 0 auto;
    }

    .aq-field .aq-field-value {
        font-weight: 600;
        text-align: right;
        /* Table cells elsewhere in the app force white-space: nowrap, which would be inherited here and
           stop a long name/reference from wrapping. */
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Secondary line under a value - a statement type under its balance, or a routing number under a
       bank name. */
    .aq-field .aq-field-sub {
        display: block;
        font-size: calc(var(--aq-font-size) - 2px);
        font-weight: 400;
        color: var(--aq-accent-colour);
    }

/* Debit/credit convention already used elsewhere in the app (aq-red-text/aq-blue-text) - named here so a
   field value can carry the meaning without reaching for the raw utility classes. */
.aq-field-value-debit {
    color: var(--aq-red-text) !important;
}

.aq-field-value-credit {
    color: var(--aq-blue-text) !important;
}

/*------------------------------------*\
    STAT STRIP

    A row of small cards, each a headline figure with its label, sitting above the panel the figures
    describe - "References 412", "Differences 3". Two earlier versions of this on the Reconcile Accounts
    screen were worse: first a `readonly disabled` <input> per count (a form control, tab stop and all,
    drawn around a number that was never editable), then plain text in the card header's own controls row,
    which was honest but read as chrome and got lost among the buttons beside it. Given its own row of
    cards, a count is the size it deserves to be and has somewhere to grow a second line later.

    Cards flex to fill the row evenly and wrap once they hit their min-width, so the strip works from a
    docked panel up to a full-width desktop without a breakpoint.
\*------------------------------------*/

.aq-stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    /* Dropped in above a grid inside a flex-column shell (.mm-root and friends) it would otherwise be a
       shrinkable flex item and get squeezed by the pane below it. Ignored in ordinary block flow. */
    flex: 0 0 auto;
}

.aq-stat-card {
    flex: 1 1 0;
    min-width: 6.5rem;
    display: flex;
    flex-direction: column;
    padding: 0.4rem 0.7rem;
    background: var(--aq-white);
    border: 1px solid color-mix(in srgb, var(--aq-grey-light) 45%, var(--aq-white));
    border-radius: var(--aq-radius);
}

/* Both lines run tight and there is no gap between them - the label and the figure are one unit, and the
   card only has to be tall enough to hold them, not to give each its own airspace. The whole strip sits
   above a grid that wants the vertical space more than these six numbers do. */
.aq-stat-card-label {
    font-size: calc(var(--aq-font-size) - 2px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--aq-grey-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aq-stat-card-value {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.15;
    /* These are read down the row against each other, so the digits line up. */
    font-variant-numeric: tabular-nums;
    color: var(--aq-text-colour, var(--aq-blue-text));
}

[data-theme="dark"] .aq-stat-card {
    background: var(--aq-surface-dark-card);
    border-color: var(--aq-surface-dark-border);
}

/*------------------------------------*\
    VERDICT PILL

    The record's headline answer to a yes/no question ("does this balance") - text always states it,
    never colour alone. Same soft-fill recipe as aq-badge's own variants, kept as its own component
    because aq-badge's uppercase/letter-spaced type is right for a short status word and wrong for a
    sentence like "Statement does not balance" (see nacha-file-viewer.css's own comment on this - carried
    forward unchanged, since it's still the right call).
\*------------------------------------*/

.aq-verdict {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--aq-radius);
    border: 1px solid transparent;
    font-size: calc(var(--aq-font-size) - 2px);
    font-weight: 600;
    white-space: nowrap;
}

.aq-verdict-success {
    background-color: var(--aq-success-colour-light-90);
    border-color: var(--aq-success-colour-light-50);
    color: var(--aq-success-colour-dark-25);
}

.aq-verdict-error,
.aq-verdict-danger {
    background-color: var(--aq-error-colour-light-90);
    border-color: var(--aq-error-colour-light-50);
    color: var(--aq-error-colour-dark-25);
}

.aq-verdict-warning {
    background-color: var(--aq-warning-colour-light-90);
    border-color: var(--aq-warning-colour-light-50);
    color: var(--aq-warning-colour-dark-50);
}

[data-theme="dark"] .aq-verdict-success {
    background-color: rgba(13, 165, 0, 0.2);
    border-color: rgba(13, 165, 0, 0.4);
    color: var(--aq-success-colour);
}

[data-theme="dark"] .aq-verdict-error,
[data-theme="dark"] .aq-verdict-danger {
    background-color: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.4);
    color: var(--aq-error-colour-light-25);
}

[data-theme="dark"] .aq-verdict-warning {
    background-color: rgba(255, 230, 0, 0.2);
    border-color: rgba(255, 230, 0, 0.4);
    color: var(--aq-warning-colour);
}

/* Two columns of label/value need real width. Below Bootstrap's md breakpoint they stack. */
@media (max-width: 767.98px) {
    .aq-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}