/* Custom style for schema selector option button */
.schema-selector {
    background-color: #1f2937;
    color: #fff;
    border: 1px solid #374151;
    border-radius: 0.375rem;
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    min-width: 120px;
}
.schema-selector:focus {
    border-color: #0d7ff2;
    outline: none;
    box-shadow: 0 0 0 2px #0d7ff233;
}
/* Styling for validation results container */
.validation-results {
    background-color: #1f2937;
    border: 1px solid #374151;
    border-radius: 0.375rem;
    color: #f9fafb;
    padding: 1rem;
    margin-top: 1rem;
    font-size: 1rem;
    min-height: 3rem;
}
/* Monaco editor-like textarea styling for JSON diff and other editors */
.monaco-editor-like {
    background-color: #1e1e1e;
    border: 1px solid #374151;
    border-radius: 0.375rem;
    color: #f9fafb;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    padding: 1rem;
    min-height: 300px;
    resize: vertical;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #111827;
    color: #f9fafb;
}
.bg-surface { background-color: #1f2937; }
.bg-background { background-color: #111827; }
.text-primary-custom { color: #0d7ff2; }
.text-secondary-custom { color: #9ca3af; }
.border-custom { border-color: #374151 !important; }
.btn-custom { background-color: #1f2937; color: #9ca3af; border: 1px solid #374151; }
.btn-custom:hover { background-color: #111827; color: #f9fafb; border: 1px solid #374151; }
.btn-primary-custom { background-color: #0d7ff2; color: #fff; }
.btn-primary-custom:hover { background-color: #0b6ed1; color: #fff; }
.form-control, .form-control:focus { background-color: transparent; color: #f9fafb; border-color: #374151; }
.form-control::placeholder { color: #9ca3af; opacity: 0.5; }

.diff-red { color: #ff6b6b; } /* A shade of red for diffs */
.diff-green { color: #6bff6b; } /* A shade of green for diffs */

/* Styles for json-validator.html */
#json-editor {
  height: 27.65rem;
  border: 1px solid #333;
  border-radius: 0.25rem;
}

.CodeMirror {
  height: 100%;
  font-size: 13px; /* Set font size for CodeMirror */
}

.CodeMirror-scroll {
  height: 100%;
  min-height: 0; /* Important for flex containers */
}

.error-border .CodeMirror {
    border: 1px solid #dc3545 !important;
}

.form-select {
    background-color: transparent;
    color: #f9fafb;
    border-color: #374151;
}

.form-select:focus {
    border-color: #0d7ff2;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 127, 242, 0.25);
}

.form-select option {
    background-color: #1f2937; /* Dark background for options */
    color: #f9fafb; /* Light text for options */
}