/*
 * Background processes as a settings list (2026-10-18, the platform's since 2026-10-19): one card holds every
 * process as a row divided by hairlines. A row says its state by a ring — green on, hollow off, blue pulsing while it runs, red after a
 * failure — then its name, what it does and quiet chips of its schedule, its last run and a run in progress.
 * The controls sit at the right: the time, «Запустити» and a switch. A process switched off is dimmed.
 */
.fs-scheduled-tasks {
  display: grid;
  gap: var(--fs-space-4);
}

.fs-scheduled-tasks__content > div {
  display: grid;
  gap: var(--fs-space-3);
}

.fs-scheduled-tasks__section-head {
  display: grid;
  gap: 4px;
}

.fs-scheduled-tasks__section-head h2 {
  margin: 0;
  font-size: var(--fs-text-lg);
}

.fs-scheduled-tasks__section-head p {
  max-width: 80ch;
  margin: 0;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-sm);
}

.fs-scheduled-tasks__list {
  display: grid;
  overflow: hidden;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-card);
}

.fs-scheduled-task {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  transition: background 0.12s ease;
}

.fs-scheduled-task + .fs-scheduled-task {
  border-top: 1px solid var(--fs-color-border-subtle);
}

@media (hover: hover) {
  .fs-scheduled-task:hover {
    background: var(--fs-color-surface-subtle);
  }
}

.fs-scheduled-task__state {
  align-self: start;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 2px solid var(--fs-color-border);
  border-radius: 50%;
}

.fs-scheduled-task__state.is-enabled {
  background: var(--fs-color-success);
  border-color: var(--fs-color-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-success) 18%, transparent);
}

.fs-scheduled-task.is-running .fs-scheduled-task__state {
  background: var(--fs-color-primary);
  border-color: var(--fs-color-primary);
  animation: fs-scheduled-pulse 1.4s ease-in-out infinite;
}

.fs-scheduled-task.is-failed .fs-scheduled-task__state {
  background: var(--fs-color-danger);
  border-color: var(--fs-color-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-danger) 18%, transparent);
}

@keyframes fs-scheduled-pulse {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--fs-color-primary) 0%, transparent);
  }

  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fs-color-primary) 35%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-scheduled-task.is-running .fs-scheduled-task__state {
    animation: none;
  }
}

.fs-scheduled-task__main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.fs-scheduled-task:not(:has(.fs-scheduled-task__state.is-enabled)) .fs-scheduled-task__main {
  opacity: 0.72;
}

.fs-scheduled-task h2 {
  margin: 0;
  font-size: var(--fs-text-md);
  font-weight: 600;
}

.fs-scheduled-task__description {
  margin: 0;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  line-height: 1.4;
}

.fs-scheduled-task__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}

.fs-scheduled-task__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px 0 7px;
  color: var(--fs-color-text-secondary);
  background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-pill);
  font-size: var(--fs-text-xs);
}

.fs-scheduled-task__chip[hidden] {
  display: none;
}

.fs-scheduled-task__chip::before {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentcolor;
  mask: var(--task-chip-icon, none) center / 13px 13px no-repeat;
  -webkit-mask: var(--task-chip-icon, none) center / 13px 13px no-repeat;
  content: "";
}

.fs-scheduled-task__chip dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.fs-scheduled-task__chip dd {
  display: inline-flex;
  gap: 6px;
  margin: 0;
  color: var(--fs-color-text);
  font-weight: 500;
}

.fs-scheduled-task__chip small {
  color: var(--fs-color-text-secondary);
  font-weight: 400;
}

.fs-scheduled-task__chip--run {
  --task-chip-icon: url("/stoneware/icons/task-actions/refresh.svg");
}

.fs-scheduled-task.is-running .fs-scheduled-task__chip--run {
  color: var(--fs-color-primary-text);
  background: var(--fs-color-primary-subtle);
  border-color: var(--fs-color-primary-line);
}

.fs-scheduled-task.is-failed .fs-scheduled-task__chip--run {
  --task-chip-icon: url("/stoneware/icons/task/alert-triangle.svg");
  color: var(--fs-color-danger-text);
  background: var(--fs-color-danger-subtle);
  border-color: color-mix(in srgb, var(--fs-color-danger) 30%, transparent);
}

.fs-scheduled-task__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/*
 * Three groups — when, now, by itself — each in its place on every row, so the eye finds «Виконати» in one
 * column down the list. A hairline between groups says they are different decisions.
 */
.fs-scheduled-task__group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fs-scheduled-task__group + .fs-scheduled-task__group,
.fs-scheduled-task__group + .fs-scheduled-task__toggle {
  padding-left: 12px;
  border-left: 1px solid var(--fs-color-border-subtle);
}

/* «Виконати» and «Зупинити» share one slot: the slot keeps its width when they swap. */
.fs-scheduled-task__group--now {
  min-width: 112px;
  justify-content: flex-end;
}

.fs-scheduled-task__stop-button {
  color: var(--fs-color-danger);
}

.fs-scheduled-task__stop-button .action-button__icon {
  background: currentcolor;
}

.fs-scheduled-task__field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fs-scheduled-task__field--interval input {
  width: 72px;
}

.fs-scheduled-task__unit {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
}

/* An instruction the owner edits in place stays with the process it steers, under its description. */
.fs-scheduled-task__note {
  display: grid;
  gap: 6px;
  max-width: 640px;
  margin-top: 8px;
}

.fs-scheduled-task__note label {
  display: grid;
  gap: 4px;
}

.fs-scheduled-task__note-label {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
}

.fs-scheduled-task__note textarea {
  width: 100%;
  padding: 6px 10px;
  color: var(--fs-color-text);
  background: var(--fs-color-field);
  border: 1px solid var(--fs-color-field-line);
  border-radius: var(--fs-radius-control);
  font: inherit;
  font-size: var(--fs-text-sm);
  line-height: 1.4;
  resize: vertical;
}

.fs-scheduled-task__note .action-button {
  justify-self: start;
}

.fs-scheduled-task__field input {
  width: 104px;
  min-height: 34px;
  padding: 4px 8px;
  color: var(--fs-color-text);
  background: var(--fs-color-field);
  border: 1px solid var(--fs-color-field-line);
  border-radius: var(--fs-radius-control);
  font: inherit;
  font-size: var(--fs-text-sm);
  font-variant-numeric: tabular-nums;
}

/* The switch: the checkbox stays the control, the track and the knob are drawn beside it. */
.fs-scheduled-task__toggle {
  position: relative;
  display: inline-flex;
  margin-left: 4px;
  cursor: pointer;
}

.fs-scheduled-task__toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.fs-scheduled-task__switch {
  position: relative;
  width: 40px;
  height: 24px;
  background: var(--fs-color-border);
  border-radius: 12px;
  transition: background 0.16s ease;
}

.fs-scheduled-task__switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgb(0 0 0 / 22%);
  transition: transform 0.16s ease;
  content: "";
}

.fs-scheduled-task__toggle input:checked + .fs-scheduled-task__switch {
  background: var(--fs-color-success);
}

.fs-scheduled-task__toggle input:checked + .fs-scheduled-task__switch::after {
  transform: translateX(16px);
}

.fs-scheduled-task__toggle input:focus-visible + .fs-scheduled-task__switch {
  box-shadow: var(--fs-focus-ring);
}

.fs-scheduled-task__toggle input:disabled + .fs-scheduled-task__switch {
  opacity: 0.5;
}

@media (max-width: 900px) {
  .fs-scheduled-task {
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: start;
  }

  .fs-scheduled-task__controls {
    grid-column: 2;
    flex-wrap: wrap;
  }

  .fs-scheduled-task__group--now {
    min-width: 0;
  }
}

.fs-scheduled-tasks__empty {
  margin: 0;
  padding: 18px 16px;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-sm);
}