* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: #222; }

.rn-app { display: flex; height: 100vh; }

/* LEFT — fields */
.rn-main { flex: 1; padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.rn-selbar { display: flex; align-items: center; gap: 8px; }
.rn-sel { font-weight: bold; }
.rn-spacer { flex: 1; }
.rn-btn { padding: 5px 12px; border: 1px solid #aaa; background: #f4f4f4; border-radius: 4px; cursor: pointer; }
.rn-btn:hover { background: #e9e9e9; }
.rn-toggle.on { background: #0a7d46; color: #fff; border-color: #0a7d46; }
.rn-toggle.on:hover { background: #096b3c; }

.rn-field { display: flex; flex-direction: column; gap: 4px; }
.rn-flabel { font-weight: 600; color: #333; }
.rn-combo-row { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
.rn-combo-row .rn-combo { flex: 1 1 auto; min-width: 0; }
.rn-clear-part { flex: 0 0 auto; white-space: nowrap; align-self: stretch; }
.rn-combo { position: relative; }
.rn-input { width: 100%; padding: 8px 10px; border: 1px solid #bbb; border-radius: 5px; font-size: 14px; }
.rn-input:focus { outline: none; border-color: #0a7d46; box-shadow: 0 0 0 2px rgba(10,125,70,0.15); }

/* dropdown of matches */
.rn-dd { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 5;
  background: #fff; border: 1px solid #bbb; border-radius: 5px; max-height: 220px; overflow: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.rn-dd-item { padding: 6px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-dd-item.active, .rn-dd-item:hover { background: #e8f1ff; }
.rn-dd-new { color: #0a7d46; font-style: italic; }

/* selected-objects list (click a row to fill the fields) */
.rn-objs-sec { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; }
.rn-objs-head { font-weight: 600; color: #2c3e50; display: flex; align-items: center; gap: 8px; }
.rn-objs-head > span { flex: 0 0 auto; }
.rn-list-search { flex: 1 1 auto; min-width: 80px; max-width: 280px; padding: 5px 8px; font-size: 13px; }
.rn-icon-btn { padding: 4px 6px; display: inline-flex; align-items: center; justify-content: center; }
.rn-icon-btn img { display: block; width: 16px; height: 16px; }
.rn-objects { border: 1px solid #ddd; border-radius: 5px; overflow: auto; flex: 1; min-height: 80px; background: #fff; }
.rn-obj-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; cursor: pointer;
  border-bottom: 1px solid #f1f1f1; white-space: nowrap; }
.rn-obj-row:hover { background: #e8f1ff; }
.rn-obj-row.selected { background: #d6e8ff; }
.rn-obj-row.selected:hover { background: #c5dcff; }
.rn-obj-row.found { background: #fff3cd; outline: 1px solid #e0c36a; }
.rn-obj-row.found.selected { background: #ffe8a3; }
.rn-obj-name { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.rn-obj-parts { color: #888; font-size: 11px; flex: 0 0 auto; }
.rn-obj-pre, .rn-obj-suf { color: #c0392b; }
.rn-objs-empty { color: #aaa; font-size: 12px; font-style: italic; padding: 14px; text-align: center; }

/* RIGHT — saved chips */
.rn-side { width: 400px; flex: 0 0 400px; border-left: 1px solid #ddd; padding: 12px; overflow: auto;
  display: flex; flex-direction: column; gap: 14px; background: #fafafa; }
.rn-side-sec { display: flex; flex-direction: column; gap: 6px; }
.rn-side-head { font-weight: bold; color: #2c3e50; border-bottom: 1px solid #e3e8ee; padding-bottom: 4px; }
.rn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#rn-chips-names { display: grid; grid-template-columns: repeat(3, 120px); gap: 6px; justify-content: start; }
.rn-chip { max-width: 100%; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px; border: 1px solid #ccd; background: #fff; border-radius: 14px;
  font-size: 12px; white-space: nowrap; }
#rn-chips-names .rn-chip { width: 120px; max-width: 120px; box-sizing: border-box; }
#rn-chips-names .rn-chip-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#rn-chips-names .rn-chips-empty { grid-column: 1 / -1; }
.rn-chip-div {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 0;
}
.rn-chip-div:first-child { margin-top: 0; }
.rn-chip-div-ltr {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; line-height: 1;
  color: #2c3e50; text-transform: uppercase;
}
.rn-chip-div-line {
  flex: 1 1 auto; height: 0; border-bottom: 1px dashed #b0b8c4; min-width: 24px;
}
.rn-chip:hover { background: #0a7d46; color: #fff; border-color: #0a7d46; }
.rn-chip.dragging { opacity: 0.4; }
.rn-chip-lbl { overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.rn-chip-x { flex: 0 0 auto; cursor: pointer; font-weight: bold; line-height: 1; opacity: 0.45;
  padding: 0 2px; }
.rn-chip-x:hover { opacity: 1; color: #ffd2cb; }
.rn-chip:not(:hover) .rn-chip-x:hover { color: #c0392b; }
.rn-chips-empty { color: #aaa; font-size: 12px; font-style: italic; }
