/* ===== JSON/YAML CHECKER TOOL STYLES (Unified Dark Theme) ===== */

/* Responsive main container */
@media (max-width: 768px) {
  main {
    margin: 1em;
    padding: 0 0.5em;
  }
}

/* CodeMirror unified dark theme overrides */
.CodeMirror {
  background: #23232b !important;
  color: #e0e0e0 !important;
  border: 1.5px solid #4dabf7 !important;
  box-shadow: none !important;
  border-radius: 7px !important;
  min-height: 150px;
  font-family: 'Consolas', 'Monaco', monospace;
}

.cm-s-default,
.react-codemirror2 .CodeMirror,
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-lines,
.CodeMirror-gutters,
.CodeMirror-linenumber,
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar {
  background: #23232b !important;
  color: #e0e0e0 !important;
  min-height: 150px;
  font-family: 'Consolas', 'Monaco', monospace;
}

.CodeMirror-gutters {
  border-right: 1.5px solid #4dabf7 !important;
}

.CodeMirror-linenumber {
  color: #6272a4 !important;
}

.CodeMirror-cursor {
  border-left: 2px solid #4dabf7 !important;
}

.CodeMirror-activeline-background {
  background: #282838 !important;
}

.CodeMirror pre,
.CodeMirror-linebackground {
  background: transparent !important;
}

/* Custom dark scrollbars for CodeMirror */
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
  background: #23232b !important;
}
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar {
  background: #23232b !important;
  border: none !important;
}
.CodeMirror-vscrollbar::-webkit-scrollbar,
.CodeMirror-hscrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #23232b;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
  background: #363646;
  border-radius: 6px;
}

/* Remove any white/gray lines or bars */
.CodeMirror pre,
.CodeMirror-linebackground {
  background: transparent !important;
}

/* Error highlighting */
.cm-error-highlight,
.CodeMirror-lint-line-error,
.CodeMirror-lint-line-error .CodeMirror-gutter-elt {
  background-color: rgba(255, 85, 85, 0.2) !important;
  border-bottom: 2px solid #ff5555 !important;
  border-left: 3px solid #ff5555 !important;
  border-right: 3px solid #ff5555 !important;
}
.CodeMirror-lint-marker-error {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 3'%3E%3Ccircle cx='1' cy='1.5' r='.5' fill='%23ff5555'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  position: relative;
}
.CodeMirror-lint-tooltip {
  background-color: #282a36;
  border: 1px solid #4dabf7;
  border-radius: 4px;
  color: #f8f8f2;
  font-family: 'Segoe UI', Arial, sans-serif;
  padding: 8px;
  z-index: 100;
}

/* Editor container margin */
.json-editor-container,
.react-codemirror2 {
  margin: 15px 0;
}

/* Controls/buttons styling */
.controls {
  display: flex;
  gap: 2rem;
  margin: 2rem 0 0 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* Form group styling */
.form-group label,
.form-group .comment,
.form-group input,
#xmlInput.minimized,
#editor h3,
#editor .form-group,
#editor .form-group:hover,
.config-section,
input[type="text"]:focus,
#postEditorControls,
#editor h3,
.config-section,
.section-group,
.section-group .form-group,
.section-group .form-group:hover,
#postEditorControls,
input[type="text"]:focus {
  display: block;
  width: 100%;
}
.form-group label {
  margin-bottom: 0.2em;
}
.comment {
  margin-bottom: 0.4em;
  font-style: italic;
  color: #999999;
}
.form-group input {
  margin-bottom: 0.8em;
  background-color: #1e1e1e;
  border: 1px solid #00d8ff;
  border-radius: 5px;
  color: #f5f5f5;
  padding: 10px;
  font-size: 1rem;
}
.error-message,
.success-message {
  color: #ff6b6b;
  background-color: rgba(255, 107, 107, 0.1);
  border-left: 4px solid #ff6b6b;
  padding: 15px;
  margin: 15px 0;
  border-radius: 4px;
  font-size: 1.1em;
}

/* Hide textarea used by CodeMirror to prevent double border/stacking */
.json-editor-container textarea,
.CodeMirror textarea {
  border: none !important;
  background: transparent !important;
  color: transparent !important;
  resize: none !important;
  outline: none !important;
  box-shadow: none !important;
  position: absolute !important;
  left: -9999px !important;
  height: 1px !important;
  width: 1px !important;
  pointer-events: none !important;
}

/* Force-hide any textarea that is a child of .json-editor-container or .CodeMirror */
.json-editor-container textarea,
.CodeMirror textarea,
.json-editor-container > textarea,
.CodeMirror > textarea {
  display: block !important;
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 1px !important;
  max-height: 1px !important;
  border: none !important;
  background: transparent !important;
  color: transparent !important;
  resize: none !important;
  outline: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  z-index: -1 !important;
}