/*
 * Reports area — overview table, per-run data table, and run-history
 * table. All three use the design tokens and collapse to stacked
 * "label: value" cards under 640px so they read on mobile (the data
 * table relies on each cell's data-label attribute for the stacked
 * label). Sibling of app.css / lists.css in the global sheet set.
 */

.reports-overview__table,
.report-data__table,
.report-history__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm, 0.875rem);
}

.reports-overview__table th,
.reports-overview__table td,
.report-data__table th,
.report-data__table td,
.report-history__table th,
.report-history__table td {
    padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem);
    text-align: left;
    border-bottom: 1px solid var(--color-border, #e2e2e2);
    vertical-align: top;
}

.reports-overview__table thead th,
.report-data__table thead th,
.report-history__table thead th {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--font-size-xs, 0.75rem);
}

.reports-overview__num,
.report-data__num,
.report-history__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.report-data__center {
    text-align: center;
}

.reports-overview__report {
    font-weight: var(--font-weight-medium, 500);
}

.reports-overview__link,
.report-history__link {
    color: var(--color-brand);
    text-decoration: none;
}

.reports-overview__link:hover,
.report-history__link:hover {
    text-decoration: underline;
}

.reports-overview__desc {
    display: block;
    margin-top: var(--space-1, 0.25rem);
    font-weight: var(--font-weight-regular, 400);
    color: var(--color-text-muted, #6b7280);
    font-size: var(--font-size-xs, 0.75rem);
}

.reports-overview__never,
.report-history__none {
    color: var(--color-text-muted, #6b7280);
}

/* Inline status banner above the available-reports table — the result of a
   "Run selected" bulk action. Mirrors the jobs-table status treatment. */
.reports-overview__status {
    margin: 0 0 var(--space-3, 0.75rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 0.375rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.reports-overview__status--ok {
    background: var(--color-success-surface);
    color: var(--color-success-on-surface);
}

.reports-overview__status--error {
    background: var(--color-danger-surface);
    color: var(--color-danger-on-surface);
}

/* Run-time dataset warnings, above the report data in both modes. */
.report-data__warnings {
    margin: 0 0 var(--space-3, 0.75rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 0.375rem);
    font-size: var(--font-size-sm, 0.875rem);
    background: var(--color-warning-surface);
    color: var(--color-warning-on-surface);
}

.report-data__warning {
    margin: 0;
}

.report-data__warning + .report-data__warning {
    margin-block-start: var(--space-1, 0.25rem);
}

.report-history__row--selected {
    background: var(--color-brand-subtle, #eff4ff);
}

.report-history__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
}

.report-detail__action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.report-detail__run-form {
    display: contents;
}

.report-detail__action-link {
    color: var(--color-brand);
    text-decoration: none;
}

.report-detail__action-link:hover {
    text-decoration: underline;
}

/* Anchors that should read as primary buttons (View jobs / Export …),
   matching the submit-button look so the whole action row is uniform. */
.app-shell__main a.button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin-top: var(--space-2);
    padding: 0 var(--space-5);
    background: var(--color-chrome-surface);
    color: var(--color-chrome-on-surface);
    font: inherit;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: filter var(--motion-duration-fast) var(--motion-easing-standard);
}

.app-shell__main a.button-link:hover {
    filter: brightness(1.08);
    color: var(--color-chrome-on-surface);
}

.app-shell__main a.button-link:active {
    filter: brightness(0.92);
}

.app-shell__main a.button-link:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 3px;
}

.report-data__overview {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}

.report-data__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-3, 0.75rem);
}

.report-data__count {
    color: var(--color-text-muted, #6b7280);
    font-size: var(--font-size-sm, 0.875rem);
}

.report-data__table-wrap {
    overflow-x: auto;
}

.report-data__more {
    margin-top: var(--space-4, 1rem);
    text-align: center;
}

.report-data__loading {
    color: var(--color-text-muted, #6b7280);
}

.reports-retention__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-3, 0.75rem);
}

.reports-retention__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
    min-width: 12rem;
}

.reports-retention__actions {
    display: flex;
    gap: var(--space-3, 0.75rem);
}

.reports-retention__note {
    margin-top: var(--space-2, 0.5rem);
    color: var(--color-text-muted, #6b7280);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Canonical sm floor (599px) — see tokens.css "Responsive breakpoints".
   This block is the report-table-to-card transformation, the same
   intent as ListView's `list-table--mobile-cards` rule at the same
   breakpoint. The two should rise and fall together. */
@media (max-width: 599px) {
    .report-data__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .report-data__table,
    .report-data__table tbody,
    .report-data__table tr,
    .report-data__table td {
        display: block;
        width: 100%;
    }

    .report-data__table tr {
        margin-bottom: var(--space-3, 0.75rem);
        border: 1px solid var(--color-border, #e2e2e2);
        border-radius: var(--radius-md, 8px);
    }

    .report-data__table td {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3, 0.75rem);
        border-bottom: none;
        text-align: right;
    }

    .report-data__table td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-semibold, 600);
        color: var(--color-text-muted, #6b7280);
        text-align: left;
    }
}

/* Extra separation between the lead actions card (Run / View jobs) and the
   summary tiles / run-summary card below it, so the tile row doesn't crowd
   the action row. */
.report-detail__actions {
    margin-bottom: var(--space-6, 2rem);
}

/* Breathing room under the Overview's status/last-run tiles so the metric
   tiles inside the summary card below (report-data__tiles) don't read as
   the same row. */
.report-detail__tiles {
    margin-bottom: var(--space-6, 2rem);
}

/* Requirement-card styles moved to the shared PrerequisitesCard component's
   scoped CSS (Components/Ui/Cards/PrerequisitesCard.razor.css) as prereqs-card__*. */

/* ----- Print ---------------------------------------------------------- */
/* Reports are commonly exported via the browser's print-to-PDF, so the
   data table should drop hover, zebra stripes, and the toolbar's
   interactive controls and render as a clean, ink-friendly grid. The
   mobile transformation above (max-width: 599px) is NOT inherited under
   print — print viewports report their own logical width — so the table
   stays in its full-width form. */
@media print {
    .report-data__toolbar,
    .report-data__more,
    .report-history__actions,
    .report-detail__actions {
        display: none;
    }

    .reports-overview__table,
    .report-data__table,
    .report-history__table {
        color: #000;
        background: #fff;
    }

    .reports-overview__table th,
    .reports-overview__table td,
    .report-data__table th,
    .report-data__table td,
    .report-history__table th,
    .report-history__table td {
        border-color: #000;
    }

    .reports-overview__link,
    .report-history__link {
        color: #000;
        text-decoration: underline;
    }
}