/* packages/ui/formwrite.css — панель сохранения конфига
   (console-settings-write, Шаг 8).

   Только 20 замороженных токенов темы, ни одного своего цвета.

   Три правила несущие, а не косметические:

   1. .cfg-dirty видим всегда, когда непуст — оператор обязан видеть, что
      правки не сохранены, не наводя курсор и ничего не раскрывая. Пустой
      узел схлопывается (:empty), чтобы не занимать место в чистом состоянии.
   2. .cfg-diff-row не усекает значения: дифф показывается ДО необратимого
      действия, и обрезанное значение здесь — это соврать оператору о том,
      что он собирается записать. Длинные значения переносятся и скроллятся.
   3. .cfg-feedback ничем не скрывается: подтверждение «Сохранено — активный
      override #N» и текст отказа живут в одном узле, и ни одно из двух не
      имеет права быть невидимым.
*/

.cfg-write-blocked {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 13px/1.45 var(--sans);
}

.cfg-save-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--divider);
}

.cfg-dirty {
  margin-bottom: 10px;
  color: var(--warn);
  font: 600 13px/1.4 var(--sans);
}

.cfg-dirty:empty {
  display: none;
}

.cfg-reason-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.cfg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.cfg-actions button {
  padding: 7px 14px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 13px/1.2 var(--sans);
  cursor: pointer;
}

.cfg-actions button:hover {
  background: var(--surface-2);
}

.cfg-actions button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.cfg-actions .cfg-save {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--surface);
}

.cfg-actions .cfg-save:hover {
  background: var(--blue-deep);
}

.cfg-actions button[disabled] {
  color: var(--ink-3);
  cursor: default;
}

/* `align-self` несущий: `.cfg-field` (form.css) — КОЛОНОЧНЫЙ флекс, а его
   элементы по умолчанию тянутся на всю ширину (`align-items: stretch`).
   Кнопка из-за этого расползалась во весь экран — при том, что это подпись в
   два слова. */
.cfg-to-default {
  align-self: flex-start;
  margin-top: 6px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--ink-2);
  font: 12px/1.2 var(--sans);
  cursor: pointer;
}

.cfg-to-default:hover {
  background: var(--surface-2);
}

.cfg-diff-host {
  margin-bottom: 12px;
}

.cfg-diff-title,
.cfg-conflict-title {
  margin: 0 0 8px;
  color: var(--ink);
  font: 600 13px/1.3 var(--sans);
}

.cfg-diff-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-3);
  margin-bottom: 6px;
}

.cfg-diff-label {
  color: var(--ink);
  font: 600 13px/1.4 var(--sans);
}

/* Значения — моноширинным и БЕЗ усечения: см. правило 2 в шапке файла. */
.cfg-diff-before,
.cfg-diff-after {
  max-width: 100%;
  max-height: 8em;
  overflow: auto;
  font: 12px/1.45 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cfg-diff-before {
  color: var(--ink-3);
  text-decoration: line-through;
}

.cfg-diff-after {
  color: var(--ok);
}

.cfg-diff-arrow {
  color: var(--ink-3);
}

.cfg-diff-kind {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--blue-wash);
  color: var(--blue-deep);
  font: 11px/1.5 var(--sans);
}

.cfg-diff-empty,
.cfg-versions-empty {
  color: var(--ink-2);
  font: 13px/1.45 var(--sans);
}

.cfg-conflict {
  padding: 10px 12px;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: var(--surface-2);
}

.cfg-conflict-text {
  color: var(--ink-2);
  font: 13px/1.45 var(--sans);
}

.cfg-conflict-key {
  font: 12px/1.6 var(--mono);
  color: var(--ink);
}

.cfg-conflict-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.cfg-conflict-actions button {
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 13px/1.2 var(--sans);
  cursor: pointer;
}

.cfg-conflict-actions .cfg-overwrite {
  border-color: var(--err);
  color: var(--err);
}

.cfg-versions {
  margin-bottom: 12px;
}

.cfg-version-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--divider);
}

.cfg-version-id {
  font: 600 12px/1.4 var(--mono);
  color: var(--ink);
}

.cfg-version-reason {
  color: var(--ink-2);
  font: 13px/1.4 var(--sans);
}

.cfg-version-actor {
  color: var(--ink-3);
  font: 12px/1.4 var(--sans);
}

.cfg-version-active {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--blue-wash);
  color: var(--blue-deep);
  font: 11px/1.5 var(--sans);
}

.cfg-rollback {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font: 12px/1.2 var(--sans);
  cursor: pointer;
}

/* Правило 3: ни display:none, ни visibility:hidden — здесь живут и
   подтверждение, и текст отказа. */
.cfg-feedback {
  color: var(--ink);
  font: 13px/1.45 var(--sans);
}