/* ============================================================
   查询输入框语法高亮 overlay（Grafana LogQL / OpenObserve SQL）
   - overlay 透明文字层叠在 textarea 之上，pointer-events: none
     textarea 自身保留背景 / 边框 / 焦点环 / caret，仅文字透明
   - 颜色配对参考 VS Code Light+ / Dark+，与全站统一主题一致
   ============================================================ */
.hl-overlay {
  position: absolute; inset: auto; margin: 0; pointer-events: none;
  white-space: pre-wrap; overflow-wrap: anywhere;
  overflow: hidden; z-index: 3;
  color: #606266;   /* 与两页 textarea 正文同色 */
}
textarea.hl-on {
  color: transparent !important;
  caret-color: #24292f;
  position: relative; z-index: 2;
}
textarea.hl-on::placeholder { color: #c0c4cc; opacity: 1; }

/* Light+ 配色 */
.hl-kw { color: #0000ff; font-weight: 600; }   /* SQL 关键字 */
.hl-fn { color: #795e26; }                     /* 函数名 */
.hl-str { color: #a31515; }                    /* 字符串 */
.hl-num { color: #098658; }                    /* 数字 / 时间 */
.hl-op { color: #af00db; font-weight: 600; }   /* 操作符 */
.hl-var { color: #001080; }                    /* LogQL 模板变量 */

html[data-theme="dark"] {
  textarea.hl-on { caret-color: #3794ff; }   /* 与页面暗色 caret 一致 */
  textarea.hl-on::placeholder { color: #5a5a5a; }
  .hl-overlay { color: #cccccc; }
  /* Dark+ 配色 */
  .hl-kw { color: #569cd6; }
  .hl-fn { color: #dcdcaa; }
  .hl-str { color: #ce9178; }
  .hl-num { color: #b5cea8; }
  .hl-op { color: #c586c0; }
  .hl-var { color: #9cdcfe; }
}