/* SITE-075: стили страницы /demo (бывшая /test-page).
   Файл подключён к site_head через PageCSS: разметка страницы осталась прежней,
   но оформление теперь говорит на языке сайта — акцент #4b6cb7 и bootstrap-переменные
   (--bs-body-bg, --bs-border-color, --bs-tertiary-bg), поэтому контролы одинаково
   выглядят в светлой и тёмной теме сайта и совпадают с полями форм на остальных страницах.

   SITE-0100 (владелец 13.11.2026): «полезли блоки внутри блока "Конфигурация"» на /test-page
   в Pro. Причина: файл лежал в assets_site/, а этот каталог встраивается ТОЛЬКО в Site-сборку
   (BUILD-0006), тогда как шапка Free/Pro (`local_demo_templates.go`) ссылается на тот же URL
   `/static/site/css/demo.css`. В поставках Free и Pro файл отдавал 404: редактор x-job-options
   терял ширину и моноширинный шрифт, зона загрузки — рамку и отступы, вкладки результата —
   оформление. Сам демо-блок общий для всех редакций (CLEAN-0009), поэтому и стили лежат в общем
   дереве `assets/`: URL не менялся, Site по-прежнему получает файл (наложение assets_site
   поверх assets отдаёт приоритет общему дереву). */
@import url("/static/vendor/prism/prism-tomorrow.min.css");

.demo-title { font-weight: 700; letter-spacing: -0.02em; }

/* Редактор x-job-options — обычное поле сайта, только моноширинное. */
.config-editor {
  width: 100%;
  min-height: 260px;
  padding: .75rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}
.config-editor:focus {
  outline: 0;
  border-color: #4b6cb7;
  box-shadow: 0 0 0 .2rem rgba(75, 108, 183, .15);
}

/* main.css сайта задаёт padding и радиус только .form-control, поэтому селект «Формат вывода»
   рядом с полем «Строк макс.» оказывался другой высоты (замечание владельца). Приводим его
   к тому же виду; padding-right оставляем под стрелку Bootstrap. */
.form-select {
  border-radius: 8px;
  padding: 0.6rem 2.25rem 0.6rem 1rem;
  border: 1px solid #ced4da;
}
.form-select:focus {
  border-color: #4b6cb7;
  box-shadow: 0 0 0 0.25rem rgba(75, 108, 183, 0.1);
}

/* Зона загрузки: мягкая пунктирная рамка в цвет акцента сайта. */
.dropzone {
  border: 2px dashed var(--bs-border-color);
  border-radius: 12px;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  background: var(--bs-tertiary-bg);
  transition: border-color .2s ease, background .2s ease;
}
.dropzone:hover, .dropzone.dragover { border-color: #4b6cb7; background: rgba(75, 108, 183, .06); }
.dropzone i { font-size: 2.25rem; color: #4b6cb7; }

/* Вкладки форматов результата — таблетки в цвет акцента. */
.result-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px; background: var(--bs-tertiary-bg); border-radius: 12px;
}
.result-tabs .btn { border-radius: 999px; font-size: .8rem; font-weight: 600; padding: 6px 14px; }
.result-tabs .btn.active { background: #4b6cb7; border-color: #4b6cb7; color: #fff; }

.meta-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
  border-radius: 999px; padding: 6px 12px; font-size: .85rem;
}
.meta-badge i { color: #4b6cb7; }

/* Окно кода всегда тёмное: у Prism в проекте только тёмная тема
   (prism-tomorrow.min.css), и на светлом фоне сайта светлые токены не читались —
   в светлой теме текст пропадал (замечание владельца по pane-preview). */
.code-window {
  background: #1e1e1e;
  color: #d4d4d4;
  border: 1px solid #333;
  border-radius: 12px;
  max-height: 520px;
  overflow: auto;
  display: none;
  margin-top: 12px;
  padding: 10px;
}
.code-window.active { display: block; }
.code-window pre { margin: 0; background: transparent !important; color: inherit; }
/* Логи живут внутри тёмного окна кода — цвета под его фон. */
.log-line { font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", monospace; font-size: 12px; padding: 2px 0; color: #d4d4d4; }
.log-time { color: #569cd6; }
.log-level-info { color: #6a9955; font-weight: 700; }
.log-level-warn { color: #ffb86b; font-weight: 700; }
.log-level-error { color: #f48771; font-weight: 700; }

/* Таблица превью: светлая в любой теме — так было на прежней странице, и на светлой теме
   серый текст на белом пропадал, когда цвет отдался теме (замечание владельца). */
/* Таблица результата. Раньше цвета были зашиты светлыми (#fff фон, #f8f9fa шапка):
   в тёмной теме таблица оставалась белой, а в светлой шапка почти сливалась с фоном —
   не видно, где заканчиваются заголовки и начинаются данные. Теперь цвета берутся из
   переменных, которые переключатель темы меняет вместе с data-theme/data-bs-theme. */
:root, html[data-theme="light"], html[data-bs-theme="light"] {
  --data-table-bg: #ffffff;
  --data-table-color: #1f2937;
  --data-table-head-bg: #e8eef6;
  --data-table-head-color: #0f172a;
  --data-table-head-border: #b9c7d8;
  --data-table-border: #dde5ee;
  --data-table-hover-bg: #f1f5f9;
  --data-table-type-color: #475569;
}
html[data-theme="dark"], html[data-bs-theme="dark"] {
  --data-table-bg: #1e293b;
  --data-table-color: #e2e8f0;
  --data-table-head-bg: #27364d;
  --data-table-head-color: #f8fafc;
  --data-table-head-border: #40506a;
  --data-table-border: #334155;
  --data-table-hover-bg: #24334a;
  --data-table-type-color: #a8b6c8;
}
.data-table { font-family: ui-monospace, monospace; font-size: 13px; border-collapse: collapse; width: 100%; background: var(--data-table-bg); color: var(--data-table-color); border-radius: 8px; overflow: hidden; }
.data-table th { background: var(--data-table-head-bg); border-bottom: 2px solid var(--data-table-head-border); padding: 10px 8px; font-weight: 700; color: var(--data-table-head-color); white-space: nowrap; text-align: left; vertical-align: bottom; }
/* Тип колонки: подпись под именем (CORE-0025) — по ней видно, что дата распознана как дата,
   хотя в JSON она записана строкой ISO-8601. */
.data-table th .col-type { display: block; margin-top: 2px; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--data-table-type-color); }
.data-table td { padding: 8px; border-bottom: 1px solid var(--data-table-border); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--data-table-color); }
.data-table tbody tr:hover { background: var(--data-table-hover-bg); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; border-radius: 8px; border: 1px solid var(--data-table-border); }