/* === Page Layout Cleanup === */
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.screenPage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* === Main Editor Card === */
.gcodeCard {
  background: #1e1e1e;
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1200px;
  margin: 0;
  height: 100%;
  border-radius: 5;
  box-shadow: none;
}

/* === Top Toolbar === */
.editorTopBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.0rem;
  font-size: 0.85rem;
  padding: 4px 8px;
  background: #1e1e1e;
}

/* Topbar content styling */
.editorTopBar h2 {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
}

.editorTopBar input[type="text"],
.editorTopBar select,
.editorTopBar input[type="color"],
#fileNameInput {
  font-size: 0.85rem;
  padding: 4px 6px;
  border-radius: 4px;
  border: none;
}

#fileNameInput {
  width: 160px;
}

.editorTopBar .searchButtons button {
  padding: 4px 6px;
  font-size: 0.85rem;
}

/* Custom folder label */
.fileLabel {
  padding: 4px 10px;
  background: #444;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}

.fileLabel:hover {
  background: #666;
}

/* === Code Editor Textarea === */
#gcodeEditor {
  flex: 1;
  width: 100%;
  min-height: 72vh;
  font-family: monospace;
  font-size: 1rem;
  padding: 1rem;
  background: transparent;
  position: relative;
  z-index: 2;
  color: #0f0;
  border: none;
  resize: none;
  overflow: auto;
}

/* === Bottom Toolbar === */
.editorActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 4px 8px;
  background: #1e1e1e;
}

/* Buttons & Inputs in Bottom Bar */
.editorActions button,
.editorActions select,
.editorActions input[type="color"] {
  font-size: 0.85rem;
  padding: 4px 6px;
  border-radius: 4px;
  border: none;
}

/* Highlight rules */
.highlightRules {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.highlightRule select,
.highlightRule input[type="color"] {
  font-size: 0.85rem;
  padding: 4px 6px;
  border-radius: 4px;
  border: none;
}

/* Remove gap and padding ONLY for G-Code Editor screen */
#screenContainer>#gcodeScreen {
  padding: 0 !important;
}

#gcodeScreen.screenPage {
  gap: 0 !important;
  justify-content: stretch !important;
  height: 100vh;
  align-items: stretch;
  /* Instead of center */
  background-color: #fff;
}


.editorWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

#gcodeEditor,
#highlightMirror {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  padding-left: 1rem;
  /* Only side padding if needed */
  padding-right: 1rem;
  width: 100%;
  height: 100%;
  font-family: monospace;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
  tab-size: 4;
   white-space: pre;        /* ← THIS IS THE FIX */
  word-break: normal;      /* ← disable line wrapping */
  overflow: auto;
  padding: 1rem;
  box-sizing: border-box;
  border: none;
}

#gcodeEditor {
  color: transparent;
  /* So caret is visible but text is invisible */
  caret-color: white;
  background: transparent;
  z-index: 2;
  resize: none;
  position: relative;
  resize: none;
}

#highlightMirror {
  z-index: 1;
  pointer-events: none;
  color: white;
}