/* ==========================================================================
   Report generator

   The screens the firm record's Reports tab is made of: setting a run up in
   three steps, the run itself, one client's report and its figures, and the
   template all of it is generated from.

   The report *document* is styled somewhere else entirely and on purpose — it
   is a client-facing PDF with a palette of its own, rendered from one
   self-contained string of HTML (see app/views/reports/pdf/_styles.html.erb).
   Nothing here reaches it, and nothing there reaches this.
   ========================================================================== */

/* --- The three steps of setting a run up ---------------------------------- */

.report-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.report-wizard__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.report-wizard__title {
  font-size: var(--font-size-xxlarge);
  color: var(--color-primary-dark);
}

.report-wizard__lead {
  margin-top: var(--space-1);
  max-width: 62ch;
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
}

/* The blank intake workbook, offered beside the lead on the step that asks for
   filled-in ones. Set apart from the paragraph above it rather than beside the
   step markers, because it is something to do before this step rather than a
   way through it. */
.report-wizard__aside {
  margin-top: var(--space-3);
}

.report-wizard__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.report-wizard__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.report-steps {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
}

.report-steps__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* The number in front of a step. Filled when it is the one open, ticked-off
   green when it is behind, and outlined when it is still ahead. */
.report-steps__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: var(--font-size-small);
  font-weight: 600;
}

.report-steps__step--current .report-steps__marker {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

.report-steps__step--current .report-steps__label {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.report-steps__step--done .report-steps__marker {
  background: var(--tint-green-16);
  border-color: var(--color-primary-green);
  color: var(--color-primary-dark);
}

/* --- Picking advisers, then their clients --------------------------------- */

.report-picker {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: var(--color-surface);
}

.report-picker + .report-picker {
  margin-top: var(--space-4);
}

.report-picker__legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  font-weight: 600;
  color: var(--color-primary-dark);
}

/* Two columns where there is room. A firm with forty clients under one adviser
   is a very long single column otherwise. */
.report-picker__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.report-picker__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.report-picker__row:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-sunken);
}

.report-picker__row:has(.report-picker__check:checked) {
  border-color: var(--color-primary-green);
  background: var(--tint-green-10);
}

.report-picker__check {
  margin-top: 2px;
  flex: none;
}

.report-picker__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.report-picker__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}

.report-picker__meta {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-weight: 400;
}

/* The report type step picks between paragraphs rather than names, so its rows
   need the line height a sentence wants. */
.report-picker__row .report-picker__meta {
  line-height: 1.45;
}

/* The blank workbook for one option, inside its row. A link rather than a
   button: the row is already one large click target for choosing this report,
   and a second button in it would compete with that. Given its own line so it
   is obviously not part of the sentence above it. */
.report-picker__download {
  align-self: flex-start;
  margin-top: var(--space-2);
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-picker__download:hover {
  text-decoration-thickness: 2px;
}

/* What choosing a different report type would cost, on the step that offers it. */
.report-notice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* --- Uploading the workbooks ---------------------------------------------- */

.report-upload {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.report-upload__input {
  max-width: 210px;
  font-size: var(--font-size-small);
}

/* The submit button is hidden once auto-submit takes over (see
   auto_submit_controller). The `hidden` attribute alone is not enough: the
   button's own display rule outranks the browser's [hidden] { display: none },
   so the button has to be told again here. */
.report-upload__submit[hidden] {
  display: none;
}

.report-upload__filename,
.report-upload__status {
  margin-top: var(--space-1);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* What reading a workbook turned up. Errors stop the run; warnings do not, and
   the two have to be told apart at a glance or the distinction is worthless. */
.report-issues {
  margin-top: var(--space-2);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 52ch;
}

.report-issues__item {
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border-strong);
  font-size: var(--font-size-small);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.report-issues__item--error {
  border-left-color: var(--color-danger);
  color: var(--color-danger);
}

.report-issues__item--warning {
  border-left-color: var(--color-warning);
  color: var(--color-warning-dark);
}

.report-issues__where {
  display: block;
  font-size: var(--font-size-small);
  opacity: 0.75;
}

/* --- A run, and one report in it ------------------------------------------ */

.report-run__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.report-run__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.report-run__meta-line {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.report-run__failed {
  margin-left: var(--space-2);
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

.report-run__progress {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-green);
  border-radius: var(--radius-md);
  background: var(--tint-green-10);
  font-size: var(--font-size-medium);
}

.report-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.report-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.report-detail__title {
  font-size: var(--font-size-xxlarge);
  color: var(--color-primary-dark);
}

/* The figures on the left, the versions and the source file on the right. Falls
   to one column before the side panel gets too narrow to read. */
.report-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 1100px) {
  .report-detail__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.report-detail__col,
.report-detail__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.report-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.report-card + .report-card {
  margin-top: var(--space-4);
}

.report-card__header {
  margin-bottom: var(--space-3);
}

.report-card__title {
  font-size: var(--font-size-large);
  color: var(--color-primary-dark);
}

.report-card__description {
  margin-top: var(--space-1);
  max-width: 68ch;
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.report-values__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-medium);
}

.report-values__row:first-child {
  border-top: 0;
}

.report-values__row dt {
  color: var(--color-text-muted);
}

.report-versions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.report-versions__item {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.report-versions__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.report-versions__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.report-versions__label {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.report-versions__meta,
.report-versions__pending {
  margin-top: var(--space-1);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.report-versions__sent {
  margin-top: var(--space-1);
  font-size: var(--font-size-small);
  color: var(--color-success-dark);
}

.report-empty {
  padding: var(--space-4);
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
}

/* --- Editing a report's figures ------------------------------------------- */

.report-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.report-form__actions {
  position: sticky;
  bottom: 0;
  padding: var(--space-3) 0;
  background: var(--color-canvas);
  border-top: 1px solid var(--color-border);
}

/* A report is around a hundred and fifty fields. Laid out in a grid so a form
   section is scanned rather than scrolled, with the long ones — a conclusion, a
   risk blurb — spanning the row. */
.report-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-4);
}

.report-field--wide {
  grid-column: 1 / -1;
}

/* A grid item is sized by its content unless it is told otherwise, so a long
   hint under a short field pushes out over its neighbour instead of wrapping. */
.report-field {
  min-width: 0;
}

/* The app's form fields hold their text on one line, which is right for a label
   and wrong here: nearly every field on this form carries a sentence explaining
   what the intake workbook asks for, and the grid puts them in columns barely
   wider than an input. */
.report-field .form__label,
.report-field .form__hint {
  white-space: normal;
}

.report-field__check {
  width: 18px;
  height: 18px;
}

/* A figure that no longer says what the client's own file said. The whole point
   of tracking where a value came from, so it is worth being visible. */
.report-field__edited {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-yellow-100);
  color: var(--color-warning-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.report-rows__row {
  position: relative;
  padding: var(--space-3);
  padding-right: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.report-rows__remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}

.report-rows__remove:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* --- Template configuration ----------------------------------------------- */

/* One block per kind of report, each with its own drafts and published
   versions. Ruled off from the next so the two lines of template do not read as
   one long list. */
.report-kind + .report-kind {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.report-kind__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.report-kind__title {
  font-size: var(--font-size-large);
  font-weight: 600;
  color: var(--color-text);
}

.report-kind__blurb {
  max-width: 62ch;
  margin-top: var(--space-1);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.report-effective {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-size: var(--font-size-medium);
}

.report-section-config {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.report-section-config:first-of-type {
  border-top: 0;
}

.report-section-config__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.report-section-config__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--color-primary-dark);
  cursor: pointer;
}

.report-section-config__position {
  width: 90px;
}

/* A section switched off is left out of the report entirely, so it reads as
   switched off rather than merely unticked. */
.report-section-config:has(input[type="checkbox"]:not(:checked)) .report-fields {
  opacity: 0.5;
}

/* --- Previewing a template ------------------------------------------------ */

/* The report has a stylesheet of its own and a palette that is the firm's
   rather than the application's, so a preview of it is shown in a frame. That
   is also the only way to be sure the picture on this screen is the report
   itself rather than a mock-up of it that has quietly drifted. */
.report-preview-frame {
  display: block;
  width: 100%;
  height: 320px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.report-preview-frame--full {
  height: 640px;
}

.report-preview-frame[hidden] {
  display: none;
}

.report-preview__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.report-preview__modes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.report-section-config__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.report-section-config__head-right {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* What the card draws, in words. Beside the toggle so the list can be read
   without opening a dozen frames. */
.report-section-config__draws {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.report-section-config__preview {
  margin-bottom: var(--space-3);
}

.report-colour {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.report-colour__swatch {
  width: 42px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.report-colour__code {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}