/* =============================================================================
   areas/reports.css: WP5 · Raportit hub, portfolio summaries, Testihistoria,
   Muutoshistoria (spec E16). Screen only; the printed report and summaries use
   public/css/report.css through views/layouts/print.php.
   Every selector is prefixed .reports-: this file loads on every app page.
   ========================================================================== */
@layer areas {

/* ---------------------------------------------------------------- hub */
.reports-hub { display: flex; flex-direction: column; gap: var(--space-6); }
.reports-section .section__title { margin-bottom: var(--space-2); }
.reports-section__intro { margin: 0 0 var(--space-4); max-width: var(--measure); color: var(--color-text-muted); font-size: var(--text-sm); }

.reports-year + .reports-year { margin-top: var(--space-5); }
.reports-year__title {
  margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums; color: var(--color-text);
}

.reports-card { display: flex; flex-direction: column; gap: var(--space-2); }
.reports-card + .reports-card { margin-top: 0; }
.reports-card .card__title { margin: 0; }
.reports-card__kind {
  display: flex; align-items: center; gap: var(--space-2); margin: 0;
  font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.reports-card__icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-action); }
.reports-card__headline { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; }
.reports-card__facts { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.reports-card__facts li { display: flex; gap: var(--space-2); }
.reports-card__facts li > span[aria-hidden] { flex: none; width: 1.1em; text-align: center; }
.reports-card__note { margin: 0; font-size: var(--text-sm); color: var(--status-attn-fg); }
.reports-card__meta { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.reports-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: auto; padding-top: var(--space-2); }
@media (max-width: 35.99rem) {
  .reports-card__actions > .btn--primary, .reports-card__actions > .btn--secondary { flex: 1 1 100%; justify-content: center; }
}

.reports-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.reports-empty__icon { width: 2rem; height: 2rem; color: var(--color-text-muted); }
.reports-empty__text { margin: 0; max-width: var(--measure); font-size: var(--text-base); }

.reports-report { display: flex; flex-direction: column; gap: var(--space-2); }
.reports-report__text { margin: 0; max-width: var(--measure); }
.reports-report__hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); max-width: var(--measure); }

.reports-row__icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--color-action); }

/* ---------------------------------------------------------------- portfolio */
.reports-selectall {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--control-h-min); margin: 0 0 var(--space-3); cursor: pointer; font-weight: var(--weight-semibold);
}
.reports-selectall input, .reports-table__check input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-action); }
.reports-table__check { width: 3rem; }
.reports-table__check input { margin: .6rem .25rem; }
.reports-table__name { font-weight: var(--weight-semibold); color: var(--color-link); text-underline-offset: .18em; }
.reports-table__title { display: block; font-weight: var(--weight-semibold); }
.reports-table__sub { display: block; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.reports-table__actions { white-space: nowrap; text-align: right; }
.reports-table__actions .btn + .btn { margin-left: var(--space-2); }
@container table (max-width: 40rem) {
  .reports-table__check { width: auto; }
  .reports-table__actions { white-space: normal; text-align: left; display: flex !important; flex-wrap: wrap; gap: var(--space-2); }
  .reports-table__actions .btn + .btn { margin-left: 0; }
}

/* ---------------------------------------------------------------- filters */
.reports-filters {
  display: grid; gap: var(--space-3) var(--space-4); align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin: 0 0 var(--space-4);
}
.reports-filters__field { margin: 0; max-width: none; }
.reports-filters__submit { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.reports-filterbox {
  margin: 0 0 var(--space-4); padding: 0 var(--space-4);
  background: var(--color-surface); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.reports-filterbox__summary {
  display: flex; align-items: center; min-height: var(--control-h); cursor: pointer;
  font-weight: var(--weight-semibold); list-style-position: inside;
}
.reports-filterbox[open] .reports-filterbox__summary { border-bottom: 1px solid var(--color-border-subtle); margin-bottom: var(--space-4); }
.reports-filters--audit { margin-bottom: var(--space-4); }

.reports-count { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.reports-note { margin-bottom: var(--space-4); }

/* ---------------------------------------------------------------- history */
.reports-sub { display: block; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.reports-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-sm); overflow-wrap: anywhere; }
.reports-result { font-weight: var(--weight-semibold); white-space: nowrap; }
.reports-result--pass { color: var(--status-ok-fg); }
.reports-result--fail { color: var(--status-problem-fg); }
.reports-history td { font-variant-numeric: tabular-nums; }
.reports-history tr.is-voided { background: var(--color-surface-sunken); }
.reports-history tr.is-voided .reports-strike,
.reports-history tr.is-voided del { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--color-text-muted); }
.reports-voided {
  display: inline-flex; align-items: center; gap: .25rem; margin-right: var(--space-2);
  padding: 0 .5rem; min-height: 1.75rem; border-radius: var(--radius-tile);
  border: 0; background: var(--status-none-bg); color: var(--status-none-fg);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none;
}
.reports-voided .icon { width: 1rem; height: 1rem; }

.reports-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.reports-pager__info { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- audit */
.reports-action { font-weight: var(--weight-semibold); }
.reports-audit td { overflow-wrap: anywhere; }

}