/* ===========================================================
   MODEL MAPPER STYLES
=========================================================== */
.mm-root .mm-body { flex-direction: column; gap: 4px; padding: 4px; }

.mm-hint {
  color: #404040; font-size: 11px;
  font-family: Verdana, sans-serif;
}

/* The 3-column mapper region: left tree | SVG overlay | right tree */
.mm-mapper {
  display: flex; flex: 2; min-height: 0;
  gap: 0; position: relative;
}
.mm-pane {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.mm-pane-left { z-index: 2; }
.mm-pane-right { z-index: 2; }
.mm-pane .t-pane-title {
  display: flex; justify-content: space-between; align-items: center;
}
.mm-edit-btn {
  background: #c0c0c0; border: 1px outset #ffffff;
  padding: 1px 8px; font-family: Verdana, sans-serif;
  font-size: 10px; color: #000; cursor: pointer;
}
.mm-edit-btn:active { border-style: inset; }

/* The SVG that draws the lines between panes */
.mm-lines {
  position: absolute; top: 0; left: 0;
  pointer-events: none; z-index: 1;
  width: 100%; height: 100%;
}

/* Tree pane */
.mm-tree {
  flex: 1; overflow: auto; min-height: 0;
  background: #ffffff;
  font-family: "Courier New", monospace; font-size: 12px;
}
.mm-tree-empty {
  padding: 20px; text-align: center;
  color: #808080; font-style: italic;
  font-family: Verdana, sans-serif;
}

/* Each addressable node */
.mm-node {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 6px 2px 4px;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
  user-select: none;
}
.mm-node:hover { background: #ffffe1; }
.mm-node.container { font-weight: bold; color: #000080; cursor: default; }
.mm-node.container:hover { background: #ffffff; }
.mm-node.leaf { color: #000; }
.mm-node.selected {
  background: #d0e0ff !important;
  outline: 2px solid #000080;
  outline-offset: -2px;
}
.mm-node.mapped { background: rgba(255, 255, 200, 0.4); }
.mm-node.mapped:hover { background: rgba(255, 255, 180, 0.6); }

.mm-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid #404040;
  flex-shrink: 0;
}
.mm-node .mm-key {
  color: #000080;
  font-family: "Courier New", monospace;
  font-weight: bold;
}
.mm-node.leaf .mm-key { font-weight: normal; }
.mm-node .mm-type {
  font-size: 9px; color: #808080;
  background: #e0e0e0; padding: 0 4px;
  border-radius: 2px;
  font-family: Verdana, sans-serif;
}
.mm-node .mm-val {
  color: #006000;
  font-family: "Courier New", monospace;
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mapping list pane */
.mm-list-pane {
  flex: 1; min-height: 120px;
  display: flex; flex-direction: column;
}
.mm-count {
  font-family: Verdana, sans-serif; font-weight: normal;
  font-size: 10px; color: #cce4ff;
}
.mm-list {
  flex: 1; overflow: auto; min-height: 0;
  background: #ffffff;
}
.mm-list-empty {
  padding: 20px; text-align: center;
  color: #808080; font-style: italic;
  font-family: Verdana, sans-serif;
}
.mm-list-table {
  width: 100%; border-collapse: collapse;
  font-family: Verdana, sans-serif; font-size: 11px;
}
.mm-list-table th {
  background: #000080; color: #ffffff;
  text-align: left; padding: 3px 8px;
  position: sticky; top: 0; z-index: 1;
}
.mm-list-table td {
  padding: 3px 8px;
  border-bottom: 1px solid #e8e8e8;
  vertical-align: middle;
}
.mm-list-table tr:nth-child(even) td { background: #f8f8f8; }
.mm-list-table tr:hover td { background: #ffffe1; }
.mm-list-table code {
  font-family: "Courier New", monospace; font-size: 11px;
  color: #000080;
}
.mm-list-table .mm-arrow {
  width: 24px; text-align: center; color: #808080; font-weight: bold;
}
.mm-list-table .mm-col-color { width: 24px; }
.mm-list-table .mm-col-action { width: 30px; }
.mm-x {
  background: #c0c0c0; border: 1px solid #808080;
  width: 22px; height: 22px; cursor: pointer;
  font-family: Verdana, sans-serif;
  color: #800000; font-weight: bold; font-size: 14px;
}
.mm-x:hover { background: #ffcccc; }

/* Modal */
.mm-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.mm-modal-inner {
  background: #c0c0c0; border: 2px outset #ffffff;
  padding: 0; width: min(700px, 90vw); max-height: 80vh;
  display: flex; flex-direction: column;
}
.mm-modal-title {
  background: linear-gradient(to right, #000080, #1084d0);
  color: #fff; padding: 4px 10px;
  font-family: Verdana, sans-serif; font-size: 12px; font-weight: bold;
}
.mm-modal-textarea {
  flex: 1; min-height: 300px;
  margin: 8px; padding: 6px 8px;
  border: 2px inset #ffffff; background: #ffffff;
  font-family: "Courier New", monospace; font-size: 12px;
  color: #000; resize: vertical;
}
.mm-modal-err {
  margin: 0 8px 4px; padding: 4px 8px;
  font-family: "Courier New", monospace; font-size: 11px;
  color: #a00000; background: #ffeeee;
  min-height: 16px;
}
.mm-modal-err:empty { background: transparent; padding: 0; min-height: 0; }
.mm-modal-actions {
  padding: 8px; text-align: right;
  background: #c0c0c0; border-top: 2px groove #ffffff;
}
.mm-modal-actions .t-btn { margin-left: 4px; }