/* ========================================================================================================== *
 * Reports layout (ADR-083).
 *
 * Color, type and register chrome come from the design system (lawfirm.tokens.css). This sheet keeps only the
 * report surface's structure: the sentence under the title, the run-time parameter bar, the ledger grid's group
 * rows and totals, and the designer's recipe column beside the live preview. It does not repaint DataTable,
 * PageHeader, Tabs, MetricStrip, Card or SideDialog. Unlayered and loaded after the token sheet.
 * ========================================================================================================== */

/* The report read as one sentence. In the designer each clause opens the recipe step that writes it. */
.report-sentence {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .45rem;
    color: var(--lf-muted);
}

.report-sentence__dot { color: var(--lf-border-strong); }

.report-sentence__clause {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--lf-ink);
    text-decoration: underline dotted var(--lf-border-strong);
    text-underline-offset: .25em;
    cursor: pointer;
}

.report-sentence__clause:hover { text-decoration-style: solid; text-decoration-color: currentColor; }
.report-sentence__clause:focus-visible { outline: 2px solid var(--lf-focus); outline-offset: 2px; border-radius: 2px; }

.report-stamp { margin: 0; font-size: .75rem; }

/* Run-time parameters: one quiet bar, controls in reading order, Run at the inline end. */
.report-params {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--lf-space-3) var(--lf-space-4);
    padding: var(--lf-space-3) var(--lf-space-4);
    border: 1px solid var(--lf-rule);
    border-radius: var(--lf-radius-md);
    background: var(--lf-surface);
}

.report-params__item { display: grid; gap: .3rem; min-width: 0; }

.report-params__label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--lf-muted);
}

.report-params__choice { min-width: 14rem; }
.report-params__number { width: 9rem; }
.report-params__actions { margin-inline-start: auto; }

/* Result: notes that qualify the figures, then tiles, chart and grid. */
.report-result { display: flex; flex-direction: column; gap: var(--lf-space-5, 1.25rem); }
.report-result.is-refreshing { opacity: .6; transition: opacity var(--lf-motion-fast); }

.report-result__notes { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }

.report-result__note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8125rem;
    line-height: 1.45;
}

.report-result__note--warning > .lf-icon { color: var(--lf-warning); }
.report-result__note--info > .lf-icon { color: var(--lf-info); }

/* Ledger grid: figures end-aligned in tabular digits, group rows on the muted band above their children. */
.report-grid__num,
.lf-table td.report-grid__num,
.lf-table th.report-grid__num {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums lining-nums;
}

.lf-table tr.report-grid__group > td {
    background: var(--lf-surface-muted);
    font-weight: 700;
}

.lf-table tr.report-grid__total > td {
    border-top: 2px solid var(--lf-ink);
    background: var(--lf-surface);
}

.report-grid__indent-1 { padding-inline-start: 1.75rem !important; }
.report-grid__indent-2 { padding-inline-start: 3rem !important; }
.report-grid__indent-3 { padding-inline-start: 4.25rem !important; }

.report-grid__toggle {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-inline-end: .25rem;
    padding: 0;
    border: 0;
    border-radius: var(--lf-radius-sm);
    background: none;
    color: var(--lf-muted);
    vertical-align: middle;
    cursor: pointer;
}

.report-grid__toggle:hover { background: var(--lf-surface-high, var(--lf-surface-selected)); color: var(--lf-ink); }
.report-grid__toggle:focus-visible { outline: 2px solid var(--lf-focus); outline-offset: 1px; }

/* The signature moment: what the last recipe edit changed lights once in Megaaro selection, then settles. */
.report-grid__flash { animation: report-flash 1100ms cubic-bezier(.16, 1, .3, 1); }

@keyframes report-flash {
    0%, 25% { background-color: var(--lf-surface-selected); box-shadow: inset 0 -2px 0 var(--lf-focus); }
    100% { background-color: transparent; box-shadow: inset 0 -2px 0 transparent; }
}

/* A single summary figure sits in the chart heading rather than a card of its own that repeats the grid total. */
.report-chart__figure { display: inline-flex; align-items: baseline; gap: .4rem; font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Library */
.report-library__name { display: grid; gap: .15rem; max-width: 46ch; }
.report-library__name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-library__actions { white-space: nowrap; text-align: end; }

/* Designer: live preview in the work area, the recipe docked at the inline end. */
.report-banner,
.report-problems {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    padding: var(--lf-space-3) var(--lf-space-4);
    border: 1px solid var(--lf-rule);
    border-radius: var(--lf-radius-md);
    background: var(--lf-info-surface);
    font-size: .875rem;
}

.report-banner > .lf-icon { color: var(--lf-info); flex-shrink: 0; }

.report-problems {
    flex-direction: column;
    background: var(--lf-warning-surface);
}

.report-problems ul { margin: 0; padding-inline-start: 1.1rem; }

.report-designer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lf-inspector-width);
    align-items: start;
    gap: var(--lf-space-6);
}

.report-designer__preview { display: flex; min-width: 0; flex-direction: column; gap: var(--lf-space-4); }
.report-designer__preview-note { margin: 0; font-size: .75rem; }

.report-recipe {
    position: sticky;
    inset-block-start: var(--lf-space-4);
    display: flex;
    max-height: calc(100dvh - 9rem);
    flex-direction: column;
    overflow-y: auto;
    border: 1px solid var(--lf-rule);
    border-radius: var(--lf-radius-md);
    background: var(--lf-surface);
}

.report-recipe__title {
    position: sticky;
    z-index: 1;
    inset-block-start: 0;
    margin: 0;
    padding: var(--lf-space-3) var(--lf-space-4);
    border-bottom: 1px solid var(--lf-rule);
    background: var(--lf-surface);
    font-size: .875rem;
    font-weight: 800;
}

.report-step + .report-step { border-top: 1px solid var(--lf-rule); }

.report-step__heading { margin: 0; font: inherit; }

.report-step__toggle {
    display: grid;
    width: 100%;
    min-height: 3.25rem;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .5rem var(--lf-space-4);
    border: 0;
    background: none;
    font: inherit;
    color: var(--lf-ink);
    text-align: start;
    cursor: pointer;
}

.report-step__toggle:hover { background: var(--lf-surface-muted); }
.report-step__toggle:focus-visible { outline: 2px solid var(--lf-focus); outline-offset: -2px; }

.report-step__number {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border: 1px solid var(--lf-border-strong);
    border-radius: var(--lf-radius-pill);
    font-size: .75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.report-step.is-open .report-step__number { border-color: var(--lf-ink); background: var(--lf-ink); color: var(--lf-surface); }
.report-step.has-error .report-step__number { border-color: var(--lf-danger); background: var(--lf-danger-surface); color: var(--lf-danger); }

.report-step__title { font-weight: 700; white-space: nowrap; }

.report-step__summary {
    overflow: hidden;
    font-size: .8125rem;
    color: var(--lf-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-step__body {
    display: flex;
    flex-direction: column;
    gap: var(--lf-space-3);
    padding: 0 var(--lf-space-4) var(--lf-space-4);
}

.report-list { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }

.report-list__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--lf-rule);
}

.report-list__item > .lf-icon { margin-top: .15rem; color: var(--lf-muted); }
.report-list__main { display: grid; min-width: 0; gap: .35rem; }
.report-list__main small { line-height: 1.35; }
.report-list__tools { display: flex; }
.report-column__rename { display: grid; gap: .35rem; }

.report-group__level {
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    margin-top: .2rem;
    border-radius: var(--lf-radius-sm);
    background: var(--lf-surface-muted);
    font-size: .6875rem;
    font-weight: 800;
}

.report-sort { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

.report-filter {
    display: grid;
    gap: .5rem;
    padding: .65rem .75rem;
    border: 1px solid var(--lf-rule);
    border-radius: var(--lf-radius-sm);
}

.report-filter__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.report-filter__field { font-size: .875rem; }
.report-filter__row { display: grid; gap: .5rem; }
.report-filter__value { display: flex; flex-wrap: wrap; gap: .5rem; }
.report-filter__value > .lf-input { flex: 1 1 6rem; min-width: 0; }

.report-filter__prompt {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.75rem;
    font-size: .8125rem;
    cursor: pointer;
}

.report-filter__prompt input { width: 1.05rem; height: 1.05rem; accent-color: var(--lf-ink); }

.report-calc summary {
    width: fit-content;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--lf-ink);
    cursor: pointer;
}

.report-calc__form { display: grid; gap: .5rem; padding-top: .5rem; }

/* Below the inspector breakpoint the recipe comes first, so editing never needs a long scroll past the grid. */
@media (max-width: 73.75rem) {
    .report-designer { grid-template-columns: minmax(0, 1fr); }
    .report-recipe { position: static; order: -1; max-height: none; }
}

@media (max-width: 40rem) {
    .report-params { flex-direction: column; align-items: stretch; }
    .report-params__actions { margin-inline-start: 0; }
    .report-params__actions .lf-button { width: 100%; }
    .report-params__choice, .report-params__number { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .report-grid__flash { animation: none; background-color: var(--lf-surface-selected); }
    .report-result.is-refreshing { transition: none; }
}