/* FlowCAD3D — revision comparison dialog, 3D comparison legend and revision clouds in the drawings workspace
   (js/ui/revcompare-dialog.js). Uses the theme tokens of css/app.css; the status colours are fixed (they match the
   3D overlay) and readable in the light and the dark theme. */
:root { --rc-added: #16A34A; --rc-changed: #F59E0B; --rc-removed: #EF4444; --rc-cloud: #DC2626; }

/* ---------- dialog ---------- */
.rc-dlg .rc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.rc-dlg .rc-base { flex: 1 1 420px; grid-template-columns: 140px 1fr; }
.rc-dlg .rc-against { flex: 0 1 auto; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.rc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg3); font-weight: 600; font-size: 13px; }
.rc-sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--fg3); }
.rc-sw.added { background: var(--rc-added); }
.rc-sw.changed { background: var(--rc-changed); }
.rc-sw.removed { background: var(--rc-removed); }
.rc-sw.oldpos { background: var(--rc-changed); }
.rc-sw.ghost { opacity: .55; border: 1px dashed currentColor; }
.rc-meta { margin: 4px 0 6px; }
.rc-list { max-height: 34vh; overflow: auto; }
.rc-row { width: 100%; text-align: left; font: inherit; color: inherit; align-items: center; }
.rc-row .t1, .rc-row .t2 { display: block; }
.rc-badge { flex: none; min-width: 84px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; color: #111; }
.rc-badge.added { background: var(--rc-added); color: #fff; }
.rc-badge.changed { background: var(--rc-changed); }
.rc-badge.removed { background: var(--rc-removed); color: #fff; }
.rc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.rc-opts .field { flex: 0 1 320px; grid-template-columns: auto 90px; }
.rc-opts .rc-letter { text-transform: uppercase; font-weight: 700; text-align: center; }
.rc-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: 13px; }
.rc-chk input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); }
.rc-drws { margin-top: 6px; max-height: 30vh; overflow: auto; }
.rc-drw { display: flex; width: 100%; padding: 6px 8px; border-radius: 6px; background: var(--bg3); border: 1px solid transparent; }
.rc-drw:hover { border-color: var(--line2); }
.rc-drw.focus { border-color: var(--accent); background: var(--accentbg); }
.rc-drw .grow { flex: 1; min-width: 0; }
.rc-drw .t1 { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-drw .t2 { display: block; color: var(--fg3); font-size: 12px; }

/* ---------- legend of the 3D comparison (floating over the model view) ---------- */
.rc-legend { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 21; width: 290px; max-width: calc(100% - 24px); background: var(--overlay-bg); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; color: var(--fg); padding: 4px 10px 8px; }
.rc-lg-head { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line); padding: 2px 0 6px; margin-bottom: 4px; }
.rc-lg-title { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.rc-lg-row { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.rc-lg-row .grow { flex: 1; }
.rc-lg-row b { font-variant-numeric: tabular-nums; }
.rc-lg-foot { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }

/* ---------- drawings workspace ---------- */
.rc-bar { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.rc-bar .rc-toggle.active { background: var(--accentbg); border-color: var(--accent); }
.rc-bar .rc-toggle .ico { color: var(--rc-cloud); }
.rc-bar .rc-state { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-drawing .revcloud-layer { pointer-events: none; }

/* ---------- tablet / phone: 44 px touch targets ---------- */
body.mode-touch .rc-chk { min-height: 44px; }
body.mode-touch .rc-chk input[type="checkbox"] { width: 24px; height: 24px; }
body.mode-touch .rc-row, body.mode-touch .rc-drw { min-height: 48px; }
body.mode-touch .rc-lg-head .btn, body.mode-touch .rc-lg-foot .btn, body.mode-touch .rc-bar .btn { min-height: 44px; min-width: 44px; }
@media (max-width: 640px) {
  .rc-dlg .rc-base { grid-template-columns: 1fr; }
  .rc-opts .field { grid-template-columns: 1fr 90px; }
}