/* v0.23.0-rc1 - Reporting, Analytics & Scientific CV / Exports. Built on the v0.17 design tokens; no new palette. */

.report-scope {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary-subtle);
    border: var(--border-width) solid var(--color-primary-subtle-strong);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    font-size: 0.9rem;
}

.report-scope__item { display: inline-flex; gap: var(--space-2xs); }
.report-scope__label { color: var(--color-text-muted); }
.report-scope__value { font-weight: 600; }

.report-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-sm) var(--space-md);
    align-items: end;
    margin-bottom: var(--space-md);
}

.report-filters label { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--space-3xs); }
.report-filters select,
.report-filters input[type="number"],
.report-filters input[type="text"] { width: 100%; }
.report-filters__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.report-filters__check { display: flex; align-items: center; gap: var(--space-xs); }
.report-filters__check label { margin: 0; }

.report-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.report-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.report-grid { display: grid; gap: var(--space-md); }
.report-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

/* Bar chart: values are always written as text, the second series is HATCHED, so nothing depends on colour alone. */
.bar-chart { margin: 0; }
.bar-chart__title { font-size: 1rem; margin: 0 0 var(--space-xs); }
.bar-chart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.bar-chart__row {
    display: grid;
    grid-template-columns: minmax(6rem, 34%) 1fr;
    gap: var(--space-xs);
    align-items: center;
    font-size: 0.875rem;
}
.bar-chart__label { overflow-wrap: anywhere; }
.bar-chart__label button {
    all: unset;
    cursor: pointer;
    color: var(--color-primary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bar-chart__label button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bar-chart__track { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.bar-chart__bars { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bar-chart__bar {
    height: 0.75rem;
    min-width: 2px;
    border-radius: 2px;
    background: var(--color-primary);
    transition: width 120ms ease;
}
.bar-chart__bar--alt {
    background: repeating-linear-gradient(45deg, var(--color-primary) 0 3px, var(--color-surface) 3px 6px);
    border: 1px solid var(--color-primary);
}
.bar-chart__value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bar-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: 0.8rem; color: var(--color-text-muted); margin-top: var(--space-xs); }
.bar-chart__swatch { display: inline-block; width: 1.5rem; height: 0.6rem; vertical-align: middle; margin-right: var(--space-2xs); background: var(--color-primary); }
.bar-chart__swatch--alt { background: repeating-linear-gradient(45deg, var(--color-primary) 0 3px, var(--color-surface) 3px 6px); border: 1px solid var(--color-primary); }
.bar-chart__table { margin-top: var(--space-xs); }
.bar-chart__table summary { cursor: pointer; font-size: 0.85rem; color: var(--color-primary); }

@media (prefers-reduced-motion: reduce) {
    .bar-chart__bar { transition: none; }
}

.report-table-scroll { overflow-x: auto; max-width: 100%; }
.report-table-scroll table { min-width: 34rem; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table th button { all: unset; cursor: pointer; font-weight: 600; }
.report-table th button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.report-note { font-size: 0.85rem; color: var(--color-text-muted); margin: var(--space-xs) 0; }

.report-issue {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: var(--border-width) solid var(--color-border);
}
.report-issue__count { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; }
.report-issue__desc { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }

.report-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-md) 0; align-items: center; }

/* CV preview: reads like a document, and is what gets printed. */
.cv-preview {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    max-width: 52rem;
}
.cv-preview h2 { font-size: 1.25rem; margin-top: var(--space-lg); border-bottom: var(--border-width) solid var(--color-border); padding-bottom: var(--space-2xs); }
.cv-preview ol { padding-left: 1.4rem; }
.cv-preview li { margin-bottom: var(--space-xs); overflow-wrap: anywhere; }
.cv-preview__meta { font-size: 0.8rem; color: var(--color-text-muted); border-top: var(--border-width) solid var(--color-border); margin-top: var(--space-lg); padding-top: var(--space-sm); }
.cv-narrative { white-space: pre-wrap; }
.cv-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-md); }
.cv-options fieldset { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); min-width: 0; margin: 0; }
.cv-options legend { font-weight: 600; padding: 0 var(--space-2xs); }
.cv-options label:not(.inline) { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin: var(--space-xs) 0 var(--space-3xs); }
.cv-options select,
.cv-options input[type="number"] { width: 100%; max-width: 100%; }
.cv-options label.inline { display: flex; align-items: center; gap: var(--space-xs); margin: var(--space-3xs) 0; }
.report-actions label.inline { display: inline-flex; align-items: center; gap: var(--space-xs); }
.card fieldset { min-width: 0; }
.char-counter { font-size: 0.8rem; color: var(--color-text-muted); }
.char-counter--over { color: var(--color-danger-text, #a12b2b); font-weight: 700; }

.selection-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); }
.selection-list li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-sm); align-items: center; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); }
.selection-list__buttons { display: flex; gap: var(--space-2xs); }

.readiness-list { list-style: none; padding: 0; margin: var(--space-xs) 0; display: grid; gap: var(--space-2xs); font-size: 0.9rem; }
.readiness-list li { display: grid; grid-template-columns: 8.5rem 11rem 1fr; gap: var(--space-xs); align-items: start; }

@media (max-width: 40rem) {
    .report-filters { grid-template-columns: 1fr; }
    .report-charts { grid-template-columns: 1fr; }
    .bar-chart__row { grid-template-columns: 1fr; gap: 0; }
    .report-issue { grid-template-columns: 1fr; }
    .readiness-list li { grid-template-columns: 1fr; }
    .cv-preview { padding: var(--space-md); }
    .selection-list li { grid-template-columns: 1fr; }
}

/* Print / "Save as PDF": only the document itself is printed. */
@media print {
    body * { visibility: hidden; }
    .cv-preview, .cv-preview *, .scenario-report, .scenario-report * { visibility: visible; }
    .cv-preview, .scenario-report { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: none; padding: 0; }
    .cv-preview a, .scenario-report a { color: inherit; text-decoration: none; }
    .cv-preview h2, .scenario-report h2 { break-after: avoid; }
    .cv-preview li, .scenario-report li, .scenario-report tr { break-inside: avoid; }
    .scenario-report .no-print { display: none !important; }

    /* v0.33.0-rc3 (D22-UX-REPORT-MOBILE-001, printing): an A4 page is about 720 CSS px wide, so the narrow-screen rules applied to the PDF as well
       (app.css below 860px: every table wrapper a horizontally scrolling block with nowrap; components.css: overflow-x auto, a 14rem first column,
       sticky headers) - columns were cut at the right edge and the scrollbar was printed. On paper each table is an ordinary full-width table: nothing
       scrolls or is hidden, text wraps inside its cell (long titles, reasons and identifiers in full), the header row repeats on every page, a row is
       never split. The screen layout is untouched. */
    html .scenario-report { padding: 0; border: none; border-radius: 0; background: none; }   /* the screen card rule below this block used to win (same specificity, later) - its frame was printed */
    .scenario-report .data-table-wrap { display: block; overflow: visible !important; white-space: normal; border: none; border-radius: 0; box-shadow: none; background: none; }
    .scenario-report .data-table { width: 100%; table-layout: auto; font-size: 9pt; line-height: 1.3; }
    .scenario-report .data-table th,
    .scenario-report .data-table td { position: static; min-width: 0 !important; max-width: none; padding: 0.2rem 0.3rem; white-space: normal; overflow-wrap: break-word; vertical-align: top; border-bottom: 0.5pt solid #888; }
    .scenario-report .data-table th { color: #000; background: none; font-size: 8pt; letter-spacing: 0; }
    .scenario-report .data-table .is-numeric { overflow-wrap: normal; white-space: nowrap; }
    .scenario-report .data-table thead { display: table-header-group; }
    .scenario-report .data-table tfoot { display: table-footer-group; }
    .scenario-report .data-table tbody tr:hover { background: none; }
    .scenario-report h3 { break-after: avoid; }
}

/* v0.26.0-rc2: printable "Raport scenariusza" (screen styling; print rules are in the shared block above). */
.scenario-report { padding: var(--space-lg); background: var(--color-surface, #fff); border: var(--border-width, 1px) solid var(--color-border, #ddd); border-radius: var(--radius-md, 8px); }
.scenario-report h2 { margin-top: var(--space-lg); }
/* v0.33.0-rc2 (D22-UX-REPORT-MOBILE-001): the label column was max-content - on a phone the longest label ("Wersja reguł obliczeń (CalculationRuleVersion)")
   took the whole width, the value column shrank to ~1 character and word-break: break-all then set every value one letter per line. Now the label column
   is at most 40 % (labels wrap by words), values break only a string that cannot fit otherwise (the snapshot hash), and below 40rem - a phone, 400 % zoom -
   each label stands above its value. Printing keeps the two columns. */
.scenario-report__meta { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: var(--space-xs) var(--space-md); margin: 0; }
.scenario-report__meta dt { font-weight: 600; overflow-wrap: break-word; }
.scenario-report__meta dd { margin: 0; overflow-wrap: anywhere; }

@media screen and (max-width: 40rem) {
    .scenario-report { padding: var(--space-md); }
    .scenario-report__meta { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .scenario-report__meta dd { margin-bottom: var(--space-sm); }
}