.text-field {
  position: absolute;
  cursor: pointer;
  padding: 0;
  border: 2px solid transparent;
  box-sizing: content-box;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 32px;
  line-height: 32px;
  white-space: nowrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  letter-spacing: -1.2px;
  font-variant-ligatures: none;
  transition: border-color 0.2s;
  will-change: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transform: translateX(-2px);
}

/* Disable transitions when any element is being dragged */
body.dragging-active .text-field {
  transition: none;
}

.text-field:hover {
  border-color: rgba(102, 126, 234, 0.3);
}

.text-field.selected {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.text-field.dragging {
  opacity: 0.7;
  cursor: grabbing;
  transition: none;
}

.text-field-content {
  display: block;
  pointer-events: none;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-field-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 32px;
  line-height: 32px;
  padding: 0;
  margin: 0;
  white-space: pre;
  letter-spacing: -1.2px;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.frame-element {
  position: absolute;
  cursor: default;
  border: 2px solid transparent;
  box-sizing: content-box;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 32px;
  line-height: 32px;
  white-space: pre;
  letter-spacing: -1.2px;
  font-variant-ligatures: none;
  transition: border-color 0.2s;
  will-change: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overflow: visible;
  transform: translateX(-2px);
}

/* Disable transitions when any element is being dragged */
body.dragging-active .frame-element {
  transition: none;
}

.frame-element:hover {
  /* Hover effect removed - handled by JavaScript based on border detection */
}

.frame-element.selected {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
}

.frame-element.dragging {
  opacity: 0.7;
  cursor: grabbing;
  transition: none;
}

.frame-line {
  white-space: pre;
  overflow: visible;
  line-height: 32px;
}

/* Line elements */
.line-element {
  position: absolute;
  cursor: pointer;
  border: 2px solid transparent;
  box-sizing: content-box;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 32px;
  line-height: 32px;
  white-space: pre;
  letter-spacing: -1.2px;
  font-variant-ligatures: none;
  transition: border-color 0.2s;
  will-change: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transform: translateX(-2px);
}

/* Disable transitions when any element is being dragged */
body.dragging-active .line-element {
  transition: none;
}

.line-element:hover {
  border-color: rgba(102, 182, 234, 0.3);
}

.line-element.selected {
  border-color: #66b6ea;
  background: rgba(102, 182, 234, 0.05);
}

.line-element.dragging {
  opacity: 0.7;
  cursor: grabbing;
  transition: none;
}

.vertical-line-char {
  white-space: pre;
}

/* Symbol elements */
.symbol-element {
  position: absolute;
  cursor: pointer;
  padding: 0;
  border: 2px solid transparent;
  box-sizing: content-box;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 32px;
  line-height: 32px;
  white-space: pre;
  letter-spacing: -1.2px;
  font-variant-ligatures: none;
  transition: border-color 0.2s;
  will-change: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transform: translateX(-2px);
}

/* Disable transitions when any element is being dragged */
body.dragging-active .symbol-element {
  transition: none;
}

.symbol-element:hover {
  border-color: rgba(102, 182, 234, 0.3);
}

.symbol-element.selected {
  border-color: #66b6ea;
  background: rgba(102, 182, 234, 0.05);
}

.symbol-element.dragging {
  opacity: 0.7;
  cursor: grabbing;
  transition: none;
}

/* Resize handles */
.resize-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 2px;
  background: orange;
  border: 1px solid #ff8800;
  z-index: 1000;
}

.resize-handle:hover {
  background: #ff6600;
  transform: scale(1.2);
}

/* DB Text Field elements */
.db-text-field {
  position: absolute;
  cursor: pointer;
  padding: 0;
  border: 2px solid transparent;
  box-sizing: content-box;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 32px;
  line-height: 32px;
  white-space: nowrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  letter-spacing: -1.2px;
  font-variant-ligatures: none;
  background: rgba(76, 175, 80, 0.05);
  transition: border-color 0.2s, background 0.2s;
  will-change: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transform: translateX(-2px);
}

/* Disable transitions when any element is being dragged */
body.dragging-active .db-text-field {
  transition: none;
}

.db-text-field:hover {
  border-color: rgba(76, 175, 80, 0.3);
}

.db-text-field.selected {
  border-color: #4caf50;
  background: rgba(76, 175, 80, 0.1);
}

.db-text-field.dragging {
  opacity: 0.7;
  cursor: grabbing;
  transition: none;
}

.db-text-field.unresolved {
  background: rgba(255, 152, 0, 0.1);
  border-color: rgba(255, 152, 0, 0.3);
}

.db-text-field-content {
  display: block;
  pointer-events: none;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Expression Field elements */
.expr-field {
  position: absolute;
  cursor: pointer;
  padding: 0;
  border: 2px solid transparent;
  box-sizing: content-box;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 32px;
  line-height: 32px;
  white-space: nowrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  letter-spacing: -1.2px;
  font-variant-ligatures: none;
  background: rgba(103, 126, 234, 0.05);
  transition: border-color 0.2s, background 0.2s;
  will-change: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transform: translateX(-2px);
}

body.dragging-active .expr-field {
  transition: none;
}

.expr-field:hover {
  border-color: rgba(103, 126, 234, 0.3);
}

.expr-field.selected {
  border-color: #667eea;
  background: rgba(103, 126, 234, 0.1);
}

.expr-field.dragging {
  opacity: 0.7;
  cursor: grabbing;
  transition: none;
}

.expr-field.unresolved {
  background: rgba(255, 152, 0, 0.1);
  border-color: rgba(255, 152, 0, 0.3);
}

.expr-field-content {
  display: block;
  pointer-events: none;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Band elements */
.band-element {
  position: absolute;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: background 0.2s;
}

/* Disable transitions when any element is being dragged */
body.dragging-active .band-element {
  transition: none;
}

.band-element.selected {
  background: rgba(102, 126, 234, 0.1) !important;
}

.band-element.dragging {
  opacity: 0.7;
  cursor: grabbing;
}

.band-caption {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  color: #667eea;
  font-weight: bold;
  pointer-events: none;
  z-index: 10;
}

.band-children {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.band-children > * {
  pointer-events: auto;
}

/* Page break indicator for preview mode */
.page-break-indicator {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 2px dashed #999;
  pointer-events: none;
  z-index: 500;
  opacity: 0.5;
}
