/* Автоматизация — список сценариев, вкладки и визуальный конструктор (SVG-диаграмма).
   Темо-зависимо через CSS-переменные кабинета (см. app.css). Без хардкода цвета. */

/* ---------- Вкладки раздела ---------- */
.auto-tabs {
  display: flex; gap: 3px; padding: 3px; margin-bottom: 24px;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 10px; width: fit-content;
}
.auto-tab {
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 8px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink-dim);
  font-family: var(--body); transition: background .12s, color .12s, border-color .12s;
}
.auto-tab:hover { color: var(--ink); }
.auto-tab.on {
  color: var(--accent); background: var(--bg-card); border-color: var(--line-bright);
  box-shadow: 0 1px 2px rgba(16,24,40,.12);
}

/* ---------- Карточки сценариев ---------- */
.flow-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06);
  transition: border-color .15s, box-shadow .2s;
  animation: rise .4s both;
}
.flow-card:hover { border-color: var(--line-bright); box-shadow: 0 6px 18px rgba(16,24,40,.10); }
.flow-card.off { opacity: .55; }
.flow-card .fc-body { flex: 1; min-width: 0; cursor: pointer; }
.flow-card .fc-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.flow-card .fc-trigger { font-size: 12.5px; color: var(--accent); margin-top: 3px; }
.flow-card .fc-meta {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}
.flow-card .fc-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- Тумблер (вкл/выкл) ---------- */
.flow-toggle { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.flow-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.flow-toggle .ft-slider {
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--line-bright); transition: background .18s; position: relative;
}
.flow-toggle .ft-slider::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--bg-card); box-shadow: 0 1px 2px rgba(16,24,40,.3);
  transition: transform .18s;
}
.flow-toggle input:checked + .ft-slider { background: var(--green); }
.flow-toggle input:checked + .ft-slider::after { transform: translateX(18px); }

/* ---------- Тулбар редактора ---------- */
.flow-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.flow-toolbar .fl-back { display: inline-flex; align-items: center; gap: 6px; }
.flow-toolbar .fl-name {
  font-family: var(--disp); font-weight: 600; font-size: 20px; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 4px 10px; outline: none; min-width: 220px; max-width: 420px;
  transition: border-color .15s, background .15s;
}
.flow-toolbar .fl-name:hover { border-color: var(--line); }
.flow-toolbar .fl-name:focus { border-color: var(--accent); background: var(--bg-card); }
.flow-toolbar .fl-save {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
}
.flow-toolbar .fl-save svg { display: inline-block; }
.flow-toolbar .btn-ghost.sm { display: inline-flex; align-items: center; gap: 6px; }
.flow-toolbar .spacer { flex: 1; }

/* ---------- Холст диаграммы ---------- */
.flow-wrap {
  position: relative; overflow: auto;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-raise);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  height: calc(100vh - 230px); min-height: 460px;
}
.flow-canvas { position: relative; min-width: 100%; min-height: 100%; }

.flow-svg { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.flow-edge {
  fill: none; stroke: var(--line-bright); stroke-width: 2;
}

/* ---------- Узел ---------- */
.flow-node {
  position: absolute; z-index: 3;
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(16,24,40,.08);
  cursor: pointer; overflow: hidden;
  border-top: 3px solid var(--ink-faint);
  transition: box-shadow .15s, border-color .15s, transform .12s;
}
.flow-node:hover { box-shadow: 0 8px 22px rgba(16,24,40,.16); transform: translateY(-1px); }
.flow-node.selected { box-shadow: 0 0 0 3px rgba(10,77,166,.28), 0 8px 22px rgba(16,24,40,.16); }
.flow-node .fn-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px;
}
.flow-node .fn-icon { display: inline-flex; flex: none; color: var(--ink-faint); }
.flow-node .fn-type {
  flex: 1; min-width: 0; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flow-node .fn-summary {
  padding: 0 12px 12px; font-size: 13px; color: var(--ink); line-height: 1.4;
  word-break: break-word;
}
.flow-node .node-del {
  flex: none; display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--ink-faint); cursor: pointer;
}
.flow-node:hover .node-del { display: inline-flex; }
.flow-node .node-del:hover { color: var(--red); border-color: var(--red); }

/* Акценты по типу — верхняя кромка + иконка */
.node-trigger        { border-top-color: var(--amber); }
.node-trigger .fn-icon { color: var(--amber-deep); }
.node-notify         { border-top-color: var(--accent); }
.node-notify .fn-icon { color: var(--accent); }
.node-condition      { border-top-color: var(--violet); }
.node-condition .fn-icon { color: var(--violet); }
.node-create_task    { border-top-color: var(--accent); }
.node-create_task .fn-icon { color: var(--accent); }
.node-change_status  { border-top-color: var(--green); }
.node-change_status .fn-icon { color: var(--green); }
.node-deploy_branch  { border-top-color: var(--navy); }
.node-deploy_branch .fn-icon { color: var(--navy); }
.node-assign_brigade { border-top-color: var(--master); }
.node-assign_brigade .fn-icon { color: var(--master); }
.node-delay          { border-top-color: var(--amber-deep); }
.node-delay .fn-icon { color: var(--amber-deep); }
.node-stop           { border-top-color: var(--red); }
.node-stop .fn-icon  { color: var(--red); }

/* ---------- Кнопки «+» вставки ---------- */
.flow-plus {
  position: absolute; z-index: 4; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-card); border: 1.5px solid var(--line-bright);
  color: var(--ink-dim); cursor: pointer; padding: 0;
  box-shadow: 0 1px 3px rgba(16,24,40,.12);
  transition: border-color .12s, color .12s, background .12s, transform .1s;
}
.flow-plus:hover {
  border-color: var(--accent); color: var(--accent);
  transform: translate(-50%, -50%) scale(1.12);
}
.flow-plus.sm { width: 22px; height: 22px; }

/* Выходы condition (Да / Нет) */
.flow-outlet {
  position: absolute; z-index: 4; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.flow-outlet .fo-label {
  font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  font-family: var(--mono);
}
.flow-outlet.yes .fo-label { color: var(--green); background: var(--margin-soft); border: 1px solid rgba(31,157,87,.3); }
.flow-outlet.no .fo-label { color: var(--red); background: rgba(217,45,32,.08); border: 1px solid rgba(217,45,32,.3); }

/* ---------- Палитра шагов (popover) ---------- */
.flow-palette {
  position: absolute; z-index: 120;
  background: var(--bg-card); border: 1px solid var(--line-bright); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16,24,40,.20);
  padding: 8px; width: 210px;
  animation: rise .15s both;
}
.flow-palette .fp-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 4px 8px 8px;
}
.flow-palette .fp-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; border-radius: 8px;
  padding: 9px 10px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  font-family: var(--body); text-align: left; transition: background .1s;
}
.flow-palette .fp-item:hover { background: var(--surface-sunken); }
.flow-palette .fp-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--surface-sunken); color: var(--ink-faint);
}
.flow-palette .node-notify .fp-icon,
.flow-palette .node-create_task .fp-icon { color: var(--accent); }
.flow-palette .node-condition .fp-icon { color: var(--violet); }
.flow-palette .node-change_status .fp-icon { color: var(--green); }
.flow-palette .node-deploy_branch .fp-icon { color: var(--navy); }
.flow-palette .node-assign_brigade .fp-icon { color: var(--master); }
.flow-palette .node-delay .fp-icon { color: var(--amber-deep); }
.flow-palette .node-stop .fp-icon { color: var(--red); }

/* ---------- Drawer конфигурации ---------- */
.cfg-veil {
  position: fixed; inset: 0; background: rgba(0,21,61,.35); backdrop-filter: blur(2px);
  z-index: 110; animation: fade .2s both;
}
.cfg-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 94vw); z-index: 111;
  background: var(--bg-card); border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(16,24,40,.12);
  padding: 30px 28px; overflow-y: auto;
  animation: slide .25s cubic-bezier(.2,.9,.3,1) both;
}
.cfg-drawer h3 { font-family: var(--disp); font-weight: 600; font-size: 19px; margin: 8px 0 18px; }
.cfg-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.cfg-kicker svg { display: inline-block; }
.cfg-fields .field { margin-bottom: 16px; }
.cfg-fields .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cfg-fields label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 7px;
}
.cfg-fields input, .cfg-fields select, .cfg-fields textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--line-bright);
  border-radius: 9px; padding: 11px 13px; color: var(--ink);
  font-family: var(--body); font-size: 14px; outline: none; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.cfg-fields textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.cfg-fields input:focus, .cfg-fields select:focus, .cfg-fields textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,77,166,.12);
}
.cfg-hint {
  font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; margin: -6px 0 12px;
}
.cfg-hint code {
  font-family: var(--mono); font-size: 11px; background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
  color: var(--ink-dim); white-space: nowrap; display: inline-block; margin: 2px 2px 0 0;
}
.cfg-explain {
  font-size: 13.5px; color: var(--ink-dim); line-height: 1.55;
  background: var(--surface-sunken); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
}

/* ---------- Журнал прогонов (slide-in) ---------- */
.runs-veil {
  position: fixed; inset: 0; background: rgba(0,21,61,.35); backdrop-filter: blur(2px);
  z-index: 110; animation: fade .2s both;
}
.runs-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 96vw); z-index: 111;
  background: var(--bg-card); border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(16,24,40,.12);
  padding: 30px 26px; overflow-y: auto;
  animation: slide .25s cubic-bezier(.2,.9,.3,1) both;
}
.runs-drawer h3 { font-family: var(--disp); font-weight: 600; font-size: 19px; margin: 8px 0 18px; }
.run-card {
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg-card);
  margin-bottom: 10px; overflow: hidden;
}
.run-head {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: pointer;
  transition: background .12s;
}
.run-head:hover { background: var(--surface-sunken); }
.run-head .rh-main { display: flex; flex-direction: column; min-width: 0; }
.run-head .rh-event { font-size: 13px; font-weight: 600; color: var(--ink); }
.run-log {
  display: none; padding: 4px 14px 12px; border-top: 1px solid var(--line);
  background: var(--surface-sunken);
}
.run-log.open { display: block; }
.run-step {
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  font-size: 12.5px; color: var(--ink-dim); border-bottom: 1px dashed var(--line);
}
.run-step:last-child { border-bottom: none; }
.run-step .rs-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-bright); }
.run-step .rs-dot.done { background: var(--green); }
.run-step .rs-dot.cancelled { background: var(--red); }
.run-step .rs-dot.active { background: var(--amber); }
.run-step .rs-title { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.run-step .rs-result { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.run-step .muted-mono { margin: 0; display: inline; }

/* Кнопка-«картинка» в палитре/тесте — выравнивание имени проекта */
.flow-card .assign-pick, .runs-drawer .assign-pick { width: 100%; }