/**
 * 配置新增/编辑页样式
 */

/* 页面容器 */
.config-new-page {
  @apply p-6;
}

/* 表单卡片 */
.config-new-page .config-form-card {
  @apply p-6;
}

/* 表单样式 */
.config-new-page .config-form {
  @apply space-y-6;
}

.config-new-page .form-row {
  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
}

.config-new-page .form-row-full {
  @apply md:col-span-2;
}

.config-new-page .form-group {
  @apply mb-4;
}

.config-new-page .form-label {
  @apply block text-sm font-medium mb-1 text-gray-700;
}

.config-new-page .form-label.required::after {
  content: " *";
  @apply text-red-500;
}

.config-new-page .form-input,
.config-new-page .form-select,
.config-new-page .form-textarea {
  @apply block w-full border rounded-md shadow-sm py-2 px-3 focus:outline-none  sm:text-sm;
}

.config-new-page .form-textarea {
  @apply font-mono;
}

.config-new-page .form-checkbox {
  @apply h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary-500;
}

.config-new-page .form-checkbox-label {
  @apply ml-2 block text-sm text-gray-900;
}

.config-new-page .input-error {
  @apply border-red-500;
}

.config-new-page .error-message {
  @apply text-sm text-red-500 mt-1;
}

.config-new-page .general-error {
  @apply bg-red-50 p-3 rounded text-center;
}

.config-new-page .form-help {
  @apply text-xs text-gray-500 mt-1;
}

.config-new-page .form-actions {
  @apply flex justify-end space-x-3;
}

.config-new-page .inline {
  @apply inline-block;
}

/* 标签按钮样式 */
.config-new-page .tag-buttons {
  @apply flex flex-wrap gap-2;
}

.config-new-page .tag-button {
  @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium 
         bg-gray-100 text-gray-700 border border-gray-200 cursor-pointer transition-all duration-200
         hover:bg-[rgba(0,104,74,0.1)] hover:border-[#00684a] hover:text-[#00684a];
}

.config-new-page .tag-button.active {
  @apply bg-[rgba(0,104,74,0.15)] border-[#00684a] text-[#00684a];
}

/* JSON编辑器 */
.config-new-page .json-editor {
  @apply w-full min-h-[400px] font-mono text-sm leading-relaxed 
         border rounded-md p-3 bg-gray-50 text-gray-800
         focus:outline-none focus:border-[#00684a] focus:ring focus:ring-[#00684a] focus:ring-opacity-20;
}

.config-new-page .editor-actions {
  @apply text-right mt-2;
}

/* 示例卡片 */
.config-new-page .example-card {
  @apply h-[500px] flex flex-col bg-gray-50 rounded-md border border-gray-200 overflow-hidden;
}

.config-new-page .example-header {
  @apply p-3 border-b border-gray-200 bg-gray-100;
}

.config-new-page .example-title {
  @apply font-medium text-gray-700;
}

.config-new-page .example-content {
  @apply p-3 flex-grow overflow-auto text-sm ;
}

.config-new-page .example-pre {
  @apply m-0 font-mono text-sm leading-relaxed text-gray-800;
}

.config-new-page .example-footer {
  @apply p-3 border-t border-gray-200 bg-gray-100;
}

/* 代码语法高亮基础样式 */
.config-new-page .code-json .key { @apply text-blue-600; }
.config-new-page .code-json .string { @apply text-green-600; }
.config-new-page .code-json .number { @apply text-purple-600; }
.config-new-page .code-json .boolean { @apply text-blue-600; }
.config-new-page .code-json .null { @apply text-gray-500; } 

.config-new-page .json-display {
  font-family: monospace;
  white-space: pre;
  background-color: #f8fafc;
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
}

.config-new-page .json-line {
  line-height: 1.5;
}

.config-new-page .json-char {
  color: #334155;
}

.config-new-page .json-brace {
  color: #64748b;
  font-weight: bold;
}

.config-new-page .json-bracket {
  color: #64748b;
  font-weight: bold;
}

.config-new-page .json-quote {
  color: #0ea5e9;
}

.config-new-page .json-colon {
  color: #64748b;
}

.config-new-page .json-comma {
  color: #64748b;
}