/* review-wizard.css — chrome + content styles for panels/review-wizard.
   Migrated verbatim from the pre-rewrite wizard stylesheets:
   shell rules (.rw-overlay, .rw-dialog, .rw-param-header, .rw-param-body,
   .rw-param-footer, .rw-param-close, and .rw-summary-* counterparts) come
   from edit-modal.css .cem- family (still used by generic modals elsewhere);
   content rules (.rw-overview-count, .rw-meta row, .rw-doc-row, .rw-review
   cells and labels) come from the retired extraction-review.css .erw-
   family. */

/* ===== Shell (was .cem-overlay / .cem-dialog) ===== */
.rw-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.rw-dialog {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  width: 90%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}
/* Wide-mode trigger when the doc preview is open lives in upload.css
   (shared with the upload modal). */

/* ===== Page wrapper — passthrough for dialog's flex column so body scrolls.
       The old edit-modal had no wrappers between .cem-dialog and header/body/
       footer; the new wizard adds #rw-content + .rw-param-page /
       .rw-summary-page, so we repeat the flex column here so shrink
       propagates to .rw-param-body where overflow-y: auto lives. */
#rw-content,
.rw-param-page,
.rw-summary-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}

/* ===== Header (was .cem-header). Plan 1: .rw-header from modal-shell. ===== */
.rw-header,
.rw-param-header,
.rw-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.rw-title,
.rw-param-header h3,
.rw-summary-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

/* Plan 1: doc-meta (filename + Show/Hide toggle) and counter live in
   the modal header, not in subpanels. Hoisted out so summary + view
   don't both render the filename. */
.rw-doc-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rw-doc-meta[hidden] { display: none; }
.rw-doc-name {
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rw-counter {
  font-size: 0.85rem;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}
.rw-counter[hidden] { display: none; }

/* ===== Close button (was .cem-close). Plan 1: .rw-close from modal-shell. ===== */
.rw-close,
.rw-param-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-light);
  padding: 0 4px;
}

/* ===== Body (was .cem-body). Plan 1: .rw-body from modal-shell. ===== */
.rw-body,
.rw-param-body,
.rw-summary-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

/* Plan 1: .rw-body is a flex row so panels (view, summary, preview)
   render side-by-side. View panel sits on the LEFT (matches the old
   .rw-content-row .rw-doc-pane / .rw-form-pane layout). */
.rw-body {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: stretch;
}

/* Panel slots are flex columns for their internal content. */
.rw-body .rw-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* View panel (doc preview): fixed width when it has content; collapses
   to zero when empty (open=false renders innerHTML=''). */
.rw-body .rw-panel-view { flex: 0 0 50%; }
.rw-body .rw-panel-view:empty { display: none; }

/* Summary + preview panels fill remaining space. */
.rw-body .rw-panel-summary,
.rw-body .rw-panel-preview {
  flex: 1 1 auto;
}

/* Widen the dialog when view panel has content (split layout). */
.rw-dialog:has(.rw-panel-view:not(:empty)) {
  max-width: 1100px;
}

/* Multi-engine compare modal — admin Test Extraction. The engine-cards
   panel renders one card per engine, so the dialog needs to scale to
   the full window width to give each card meaningful room (especially
   with 3+ engines + the doc-view panel open). Cap at viewport width
   minus a small gap on each side. Only triggers when the engine-cards
   panel is present; regular wizard sizing unchanged. Rule comes after
   the .rw-panel-view 1100px cap so this widening wins by cascade order
   when both panels are present. */
.rw-dialog:has(.rw-panel-engine-cards) {
  width: calc(100vw - 32px);
  max-width: calc(100vw - 32px);
}

/* ===== Footer (was .cem-footer). Plan 1: .rw-footer from modal-shell. ===== */
.rw-footer,
.rw-param-footer,
.rw-summary-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* Plan 1: modal-shell footer buttons reuse canonical .button-ok /
   .button-no from base.css (Universal modal button styles). The .rw-btn
   class is kept as a marker for footer scoping (no visual rules); see
   modal-shell.js _renderButtons. */

/* ===== Doc preview toggle. Header row with filename + Show/Hide button.
       Side-by-side layout activates when .rw-content-row carries the
       .rw-split modifier (see :has() rule in upload.css for dialog width). */
.rw-doc-file-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle, var(--bg-surface));
  margin-bottom: 0.5rem;
}
.rw-doc-file-name {
  font-size: 0.88rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* .rw-doc-toggle visual styling is now provided by .rw-btn / .rw-btn-*
   (modal-shell renders the toggle with class
   "rw-doc-toggle rw-btn rw-btn-{secondary|primary}"). The .rw-doc-toggle
   class is preserved purely as a marker for the upload.css :has()
   selector that widens the dialog when the doc preview is active. */

.rw-content-row { display: block; }
.rw-content-row.rw-split {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.rw-doc-pane {
  flex: 0 0 45%;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.rw-form-pane {
  flex: 1;
  min-width: 0;
  overflow: auto;
}
.rw-doc-header {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle, var(--bg-surface));
  font-size: 0.85rem;
  color: var(--text-light);
}
.rw-doc-body { padding: 0.5rem; }

/* View-panel containment. multi-engine-compare.js (and any future caller)
   passes a viewport-relative maxHeight (75vh) to mountView, which can exceed
   .rw-body's actual height (dialog max-height 85vh minus header+footer ~= 70vh).
   Without flex sizing on the chain .rw-panel-view → .rw-doc-body → .dv-viewport,
   the viewport pokes below the modal. flex 1+min-height:0+overflow:hidden gives
   the chain definite, body-bounded height; the inline maxHeight stays as an
   upper cap. dv-viewport keeps its own overflow:auto for pan/scroll, and is
   responsible for clipping/scrolling zoomed canvas/img/text content — no
   max-width clamp on the canvas/img (would defeat horizontal scroll on zoom-in). */
.rw-body .rw-panel-view { overflow: hidden; }
.rw-body .rw-panel-view .rw-doc-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.rw-body .rw-panel-view .dv-viewport {
  flex: 1 1 auto;
  min-height: 0;
}

/* ===== Progress bar (was .erw-progress / .erw-progress-fill) ===== */
.rw-progress {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.rw-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* ===== Overview body (was .erw-param-name) ===== */
.rw-overview-count {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.75rem 0 0.5rem;
  color: var(--text);
}

/* ===== Overview meta row (was .erw-summary-counts / .erw-summary-stat) ===== */
.rw-meta-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.rw-meta { font-size: 0.88rem; font-weight: 600; }

/* ===== Document row (was .erw-card) ===== */
.rw-doc-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1rem 0;
  background: var(--bg-surface);
}

/* ===== Multi-engine compare (admin Test Extraction) ===== */
/* Used by panels/review-wizard/multi-engine-compare.js. The
   .rw-engine-cards-grid mounts inside one of modal-shell's body
   panels (`engine-cards`); the row lays N per-engine cards
   horizontally — each card a fixed 360px column that scrolls its
   own summary content vertically; the row scrolls horizontally
   when the engine count exceeds the dialog width. Uses the wizard's
   --bg-surface / --border / --text vars so it inherits the same
   theme as the surrounding dialog (no --ap-* coupling). */
.rw-engine-cards-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 4px;
  height: 100%;
  min-height: 0;
  overflow: hidden;            /* per-panel scroll lives on .rw-engine-card-body */
  align-items: stretch;
}

.rw-engine-card {
  flex: 1 1 0;                 /* equal share — N engines, N columns of equal width */
  min-width: 0;                /* allow shrink below intrinsic content width */
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-surface);
}

.rw-engine-card-header {
  padding: 8px 12px;
  font-weight: 600;
  font-family: var(--rw-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  background: var(--bg-subtle, var(--bg-surface));
}

.rw-engine-card-body {
  padding: 8px 12px;
  overflow-y: auto;
  overflow-x: auto;             /* per-panel horizontal scroll for wide content */
  flex: 1 1 auto;
  min-height: 0;
  color: var(--text);
  /* Flex column so the inner .rw-summary-page (itself a flex-column
     container) becomes a flex item with align-items: stretch — fills the
     full card-body width. Without this, the summary sized to its content's
     intrinsic width and rendered narrower than the card. */
  display: flex;
  flex-direction: column;
}

.rw-engine-card-error {
  color: var(--error, #f87171);
  font-family: var(--rw-mono, ui-monospace, monospace);
  white-space: pre-wrap;
}

/* On wide enough dialogs the doc-view panel sits to the LEFT (inherits
   .rw-body's flex row from above) and the engine-cards grid expands to
   fill remaining space. */
.rw-body .rw-panel-engine-cards { flex: 1 1 auto; }

/* ===== Responsive (was .cem-dialog @600px) ===== */
@media (max-width: 600px) {
  .rw-dialog { width: 95%; max-height: 90vh; }
}