/* =============================================================================
   Veridex — Revision Compare page styles (BL-002 Session D, Pass 1)
   =============================================================================
   Scoped styles for #page-revision-compare. All selectors begin with .rc-
   (matching the JS module's rcState / rcRender prefix) so they cannot
   collide with the existing review (.rv-) or upload (no scoped prefix)
   styles.

   D2 will add styles for the side-by-side viewer panes; this file covers
   the page shell, pickers, counts, filter chips, and the diff list.
   ============================================================================= */

/* ── Page shell ────────────────────────────────────────────────────────── */
.rc-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px;
}

.rc-header-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rc-drawing-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-right: auto;     /* push pickers to the right */
}

/* ── Pickers ───────────────────────────────────────────────────────────── */
.rc-picker-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rc-picker-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rc-picker-select {
  padding: 6px 10px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  min-width: 240px;
  max-width: 360px;
}
.rc-picker-select:disabled {
  background: var(--surface2);
  color: var(--text3);
  cursor: not-allowed;
}

.rc-swap-btn {
  padding: 6px 10px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
}
.rc-swap-btn:hover:not(:disabled) {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.rc-swap-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Status block (loading / empty / error) ────────────────────────────── */
.rc-empty {
  background: var(--surface);
  border: 1px dashed var(--border2);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: var(--text2);
  font-size: 14px;
}
.rc-empty-warning {
  border-color: var(--amber);
  background: var(--amber-light);
  color: var(--text);
}
.rc-empty-error {
  border-color: var(--red);
  background: rgba(220, 38, 38, 0.05);
  color: var(--text);
}

.rc-btn-secondary {
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.rc-btn-secondary:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* ── Counts strip ──────────────────────────────────────────────────────── */
.rc-counts {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
}
.rc-count {
  font-weight: 600;
}
.rc-count-add   { color: #16a34a; }
.rc-count-del   { color: var(--red); }
.rc-count-mod   { color: var(--amber); }
.rc-count-cloud { color: var(--purple); }
.rc-count-sub {
  color: var(--text3);
  font-size: 12px;
}

/* ── Filter chips ──────────────────────────────────────────────────────── */
.rc-filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rc-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rc-filter-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
  min-width: 110px;
}
.rc-chip {
  padding: 4px 10px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  line-height: 1.4;
}
.rc-chip:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.rc-chip-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}
.rc-chip-on:hover {
  background: var(--accent2);
  color: #ffffff;
}

/* ── Diff list ─────────────────────────────────────────────────────────── */
.rc-diff-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.rc-diff-row {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.rc-diff-row:last-child {
  border-bottom: none;
}
.rc-diff-row:hover {
  background: var(--surface2);
}
.rc-diff-row-expanded {
  background: var(--accent-dim2);
}
.rc-diff-row-expanded:hover {
  background: var(--accent-dim2);
}

.rc-diff-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
}

.rc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 72px;
  text-align: center;
}
.rc-badge-add { background: #d1fae5; color: #065f46; }
.rc-badge-del { background: #fee2e2; color: #991b1b; }
.rc-badge-mod { background: var(--amber-light); color: var(--amber); }

.rc-subbadge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text2);
}
.rc-subbadge-cloud {
  background: var(--purple-dim);
  color: var(--purple);
  border-color: var(--purple);
}

.rc-row-value {
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rc-row-field {
  font-size: 12px;
  color: var(--text2);
  background: var(--surface2);
  padding: 1px 6px;
  border-radius: 3px;
}
.rc-row-page {
  font-size: 11px;
  color: var(--text3);
}
.rc-row-expander {
  color: var(--text3);
  width: 14px;
  text-align: center;
}

/* ── Row detail (expanded) ─────────────────────────────────────────────── */
.rc-diff-row-body {
  padding: 0 14px 14px;
  font-size: 13px;
  color: var(--text2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rc-attr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.rc-attr-table th,
.rc-attr-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.rc-attr-table th {
  background: var(--surface2);
  font-weight: 600;
  color: var(--text2);
}
.rc-attr-table tr:last-child td {
  border-bottom: none;
}
.rc-attr-key   { font-weight: 500; color: var(--text); }
.rc-attr-from  { color: var(--red); font-family: ui-monospace, monospace; }
.rc-attr-to    { color: #16a34a; font-family: ui-monospace, monospace; }

.rc-detail-line {
  font-size: 12px;
  color: var(--text2);
}
.rc-detail-line code {
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

/* ============================================================================
   D2 additions — side-by-side viewers, decouple toggle, diff markers
   ============================================================================ */

/* Decouple toggle. Lives in the header card alongside the pickers. */
.rc-decouple-btn {
  padding: 6px 12px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
}
.rc-decouple-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
/* Active "decoupled" state — give the button a distinct look so the
   user can tell at a glance that sync is OFF. */
.rc-decouple-btn.rc-decouple-on {
  background: var(--amber-light);
  border-color: var(--amber);
  color: var(--amber);
}
.rc-decouple-btn.rc-decouple-on:hover {
  background: var(--amber);
  color: #ffffff;
}

/* Viewer shell + per-pane styles — full definitions are below in the v39
   Step 3 layout section. The .rc-pane-col / .rc-pane-label / .rc-viewer-pane
   rules below are shared between D2 and v39 layouts. */

.rc-pane-col {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;     /* clip the viewer's own scroll to this rounded card */
}

.rc-pane-label {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.rc-pane-label-from { border-left: 3px solid var(--red); }
.rc-pane-label-to   { border-left: 3px solid #16a34a; }

/* The pane itself is a positioned container for createViewer() — the
   viewer fills 100% of it (see viewer.js: position:absolute; inset:0). */
.rc-viewer-pane {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;        /* allow flex shrink so PDF.js scroll works inside */
  background: var(--nav-bg);
}

/* Diff marker overlay — the <svg> drawn into .vx-viewer-overlay by
   RcMarkers. The svg itself is pointer-events:none; per-marker
   <rect>s re-enable pointer events. */
.rc-marker-svg {
  /* All positioning + sizing handled inline by the renderer; here we
     only style the contained marker rects. */
}

/* Default marker visual. The renderer sets fill="none" and stroke=...
   inline; these CSS rules only handle transition + hover/selected state. */
.rc-marker {
  transition: stroke-width 80ms ease-out, filter 80ms ease-out;
}
.rc-marker:hover,
.rc-marker.rc-marker-hovered {
  stroke-width: 3;
  /* A subtle drop-shadow lifts the marker off the drawing — works on both
     dark and light PDF content. */
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35));
}
/* Selected (click-pair) state — thicker stroke and a strong glow so the
   pair stays visible even when the user moves the mouse away. */
.rc-marker.rc-marker-selected {
  stroke-width: 4;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.55));
}

/* Replace the D1 placeholder line with a subtle hint when modifications
   are expanded in the diff list. */
.rc-detail-hint {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  padding: 6px 10px;
  background: var(--surface2);
  border-radius: 4px;
  border-left: 3px solid var(--accent);
}

/* ============================================================================
   v39 stepper additions — left rail + Step 1 (drawing picker) + buttons
   ============================================================================ */

/* Stepper shell: rail on the left, main pane on the right. */
.rc-shell-stepper {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: start;
}

/* Left column wraps stepper rail + (Step 3 only) diff list, so both share
   the slim left strip and the viewers on the right get the full remaining
   width. The column is sticky so the rail stays visible if the right
   column ever grows taller. */
.rc-left-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
  align-self: start;
}

.rc-stepper-rail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 12px;
  min-height: 240px;
}

.rc-step-rail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  margin-bottom: 14px;
}

.rc-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  cursor: default;
}
.rc-step-clickable { cursor: pointer; }
.rc-step-clickable:hover .rc-step-title { color: var(--accent); }

.rc-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--surface2);
  color: var(--text3);
  border: 1.5px solid var(--border2);
  box-sizing: border-box;
}
.rc-step-current .rc-step-num {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}
.rc-step-done .rc-step-num {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
.rc-step-check {
  font-style: normal;
  font-size: 14px;
  line-height: 1;
}

.rc-step-body { flex: 1; min-width: 0; }
.rc-step-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.rc-step-future .rc-step-title { color: var(--text2); }
.rc-step-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
  word-wrap: break-word;
}
.rc-step-sub-placeholder { color: var(--text3); opacity: 0.55; }

.rc-step-connector {
  border-left: 1.5px solid var(--border2);
  height: 14px;
  margin-left: 11px;
  margin-top: 0;
  margin-bottom: 0;
}
.rc-step-connector-done { border-left-color: #16a34a; }

.rc-stepper-main { min-width: 0; }

/* Per-step pane (the right column's content). Always full width of
   .rc-stepper-main, padding inside each pane. */
.rc-step-pane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rc-pane-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.rc-pane-hint {
  font-size: 12px;
  color: var(--text2);
  margin-top: -4px;
  margin-bottom: 4px;
}

/* Inside Step 2, the header-card was the previous outer wrapper; now
   embed it as a sub-section. Trim its outer border so it doesn't look
   double-nested inside the pane card. */
.rc-step-pane .rc-header-card {
  background: var(--surface2);
  border: 1px solid var(--border);
}

.rc-pane-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* When the footer only holds one button (Step 1 has just Next), align right. */
.rc-pane-footer:has(> :only-child) { justify-content: flex-end; }

.rc-step3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Primary / secondary buttons inside step panes ─────────────────────── */
.rc-btn-primary {
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.rc-btn-primary:hover:not(:disabled) {
  filter: brightness(0.92);
}
.rc-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Step 1 — search + tree ────────────────────────────────────────────── */
.rc-search-wrap {
  position: relative;
}
.rc-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  box-sizing: border-box;
}
.rc-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

.rc-tree {
  border: 1px solid var(--border);
  border-radius: 6px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
}

.rc-tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.rc-tree-node:last-child { border-bottom: none; }

.rc-tree-project {
  background: var(--surface2);
  font-weight: 600;
  color: var(--text);
}
.rc-tree-project .rc-tree-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--text3);
}

.rc-tree-package {
  padding-left: 28px;
  color: var(--text2);
  font-weight: 500;
}

.rc-tree-leaf {
  padding-left: 48px;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: pointer;
  align-items: flex-start;
}
.rc-tree-leaf:hover {
  background: var(--surface2);
}
.rc-tree-leaf-body {
  flex: 1;
  min-width: 0;
}
.rc-tree-leaf-title {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.rc-tree-leaf-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}
.rc-tree-leaf-selected {
  background: var(--accent-dim);
}
.rc-tree-leaf-selected .rc-tree-leaf-title,
.rc-tree-leaf-selected .rc-tree-leaf-sub {
  color: var(--accent);
}
.rc-tree-check {
  color: var(--accent);
  font-size: 16px;
  margin-left: 8px;
}
.rc-tree-leaf-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.rc-tree-leaf-disabled:hover {
  background: transparent;
}

.rc-tree-icon, .rc-tree-icon-folder, .rc-tree-icon-file {
  font-size: 12px;
  color: var(--text3);
  flex-shrink: 0;
}

/* ============================================================================
   v39 Step 3 layout: diff list in left column under stepper; viewers fill right
   ============================================================================ */

/* Diff list as a left-column block. Sits below the stepper rail. Height
   bounded so the page doesn't grow; internal scroll. The list now occupies
   the same slim column as the rail (240px), so the viewers get the full
   remaining width — roughly 80% of the page. */
.rc-diff-list-col {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* The viewer shell now fills the entire right column. Two viewer panes
   side by side, each a flex column with label + toolbar + canvas. */
.rc-viewer-shell {
  height: 600px;
  min-height: 420px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Per-viewer toolbar — sits between the label and the canvas. Slim,
   right-aligned button row + zoom-percent readout. */
.rc-viewer-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.rc-vtb-btn {
  padding: 2px 8px;
  border: 1px solid var(--border2);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text2);
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  min-width: 24px;
}
.rc-vtb-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.rc-vtb-btn:active { transform: translateY(1px); }
.rc-vtb-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rc-vtb-zoom {
  margin-left: auto;
  font-size: 11px;
  color: var(--text3);
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  min-width: 44px;
  text-align: right;
}

/* ── Compact diff-list rows ─────────────────────────────────────────────
   The list now lives in the slim left column (240px), so rows must be
   compact: single-letter coloured badge (A / M / D), tag value, page, and
   the cloud indicator if any. Field-type chip and sub-type chips live in
   the expanded detail body.
   ====================================================================== */

.rc-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  flex-shrink: 0;
}
.rc-tag-add { background: #d1fae5; color: #065f46; }
.rc-tag-mod { background: var(--amber-light); color: var(--amber); }
.rc-tag-del { background: #fee2e2; color: #991b1b; }

/* Compact detail-meta strip: holds the field-type chip + sub-type chips
   that used to sit in the header. Shown only inside the expanded body. */
.rc-detail-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 6px;
}