/* Base typography — must live here (external CSS) because Replicant
   entity-encodes quotes in inline <style> tags, breaking quoted font names. */
body, h1, h2, h3, .btn, button, input, select, textarea, label, summary, th, td, code, pre {
  font-family: 'JetBrains Mono', monospace;
}

/* CodeMirror EDN Editor Styles */
.edn-editor-wrapper {
  border: 1px solid rgba(24, 29, 31, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.edn-editor-wrapper .cm-editor {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
  font-size: 14px;
}

.edn-editor-wrapper .cm-editor.cm-focused {
  outline: 2px solid #79D1B7;
  outline-offset: -1px;
}

.edn-editor-wrapper .cm-scroller {
  font-family: inherit;
}

.edn-editor-wrapper .cm-content {
  padding: 8px 0;
}

.edn-editor-wrapper .cm-line {
  padding: 0 8px;
}

/* Syntax highlighting - Clojure/EDN theme matching app aesthetics */
.cm-s-default .cm-keyword,
.edn-editor-wrapper .cm-keyword {
  color: #0296BA;
}

.cm-s-default .cm-string,
.edn-editor-wrapper .cm-string {
  color: #F97066;
}

.cm-s-default .cm-number,
.edn-editor-wrapper .cm-number {
  color: #79D1B7;
}

.cm-s-default .cm-comment,
.edn-editor-wrapper .cm-comment {
  color: #667085;
  font-style: italic;
}

.cm-s-default .cm-bracket,
.edn-editor-wrapper .cm-bracket {
  color: #344054;
}

.cm-s-default .cm-meta,
.edn-editor-wrapper .cm-meta {
  color: #92400E;
}

.cm-s-default .cm-atom,
.edn-editor-wrapper .cm-atom {
  color: #7A83F9;
}

.cm-s-default .cm-symbol,
.edn-editor-wrapper .cm-symbol {
  color: #181D1F;
}

/* Matching bracket highlight */
.edn-editor-wrapper .cm-matchingBracket {
  background-color: rgba(121, 209, 183, 0.15);
  outline: 1px solid #79D1B7;
}

.edn-editor-wrapper .cm-nonmatchingBracket {
  background-color: rgba(249, 112, 102, 0.1);
  outline: 1px solid #F97066;
}

/* Selection */
.edn-editor-wrapper .cm-selectionBackground {
  background-color: rgba(121, 209, 183, 0.12) !important;
}

.edn-editor-wrapper .cm-editor.cm-focused .cm-selectionBackground {
  background-color: rgba(121, 209, 183, 0.2) !important;
}

/* Active line */
.edn-editor-wrapper .cm-activeLine {
  background-color: #EEF6F0;
}

/* Gutter (line numbers) */
.edn-editor-wrapper .cm-gutters {
  background-color: #DDE5DF;
  border-right: 1px solid rgba(24, 29, 31, 0.12);
}

.edn-editor-wrapper .cm-lineNumbers .cm-gutterElement {
  color: #667085;
  padding: 0 8px 0 4px;
  min-width: 32px;
}

/* Cursor */
.edn-editor-wrapper .cm-cursor {
  border-left-color: #181D1F;
}

/* Placeholder styling when empty */
.edn-editor-wrapper .cm-placeholder {
  color: #667085;
  font-style: italic;
}

/* Template panel styles */
#template-panel {
  font-size: 14px;
}

#template-panel pre {
  margin: 5px 0;
  padding: 8px;
  background: #fff;
  color: #181D1F;
  border: 1px solid rgba(24, 29, 31, 0.12);
  border-radius: 10px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Action search and filter */
#action-search {
  border: 1px solid rgba(24, 29, 31, 0.12);
  border-radius: 10px;
}

#action-search:focus {
  outline: 2px solid #79D1B7;
  border-color: transparent;
}

/* Actions table in pipeline form */
#actions-table {
  max-height: 200px;
  overflow-y: auto;
  display: block;
}

#actions-table tbody {
  display: block;
  max-height: 150px;
  overflow-y: auto;
}

#actions-table thead,
#actions-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* Step template cards */
.step-template-card {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(24, 29, 31, 0.12);
}

.step-template-card:hover {
  border-color: #79D1B7;
}

/* Field validation errors */
.field-error {
  color: #F97066;
  font-size: 13px;
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(249, 112, 102, 0.06);
  border-left: 3px solid #F97066;
  border-radius: 2px;
  display: none;
}

.field-error.visible {
  display: block;
}