/* Automations center — js/automations.js
   A list of scheduled rules plus the editor modal. Deliberately styled after
   the sites manager (sm-*) so the two "workspace machinery" views feel like one
   family rather than two apps. */

.auto-wrap { max-width: 860px; margin: 0 auto; padding: 34px 28px 22vh; }

.auto-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 20px;
}
.auto-title { font-size: 25px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.auto-sub { font-size: 13px; color: var(--text-light); margin-top: 3px; }

.auto-banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-hover); color: var(--text-light);
  font-size: 13px; line-height: 1.55;
}
.auto-banner strong { color: var(--text); }

.auto-list { display: flex; flex-direction: column; gap: 10px; }

.auto-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg); transition: border-color 0.12s, background 0.12s;
}
.auto-card:hover { border-color: var(--border-strong); }
.auto-card.auto-off { opacity: 0.62; }
.auto-card-main { min-width: 0; }
.auto-card-top { display: flex; align-items: center; gap: 8px; }
.auto-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.auto-desc { font-size: 13px; color: var(--text-light); margin-top: 4px; line-height: 1.5; }
.auto-meta { font-size: 12px; color: var(--text-faint); margin-top: 4px; }
.auto-err { font-size: 12px; color: var(--danger, #d44c47); margin-top: 5px; }

.auto-pill {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-input); color: var(--text-faint);
}
.auto-pill-on { background: rgba(68, 131, 97, 0.16); color: #2f7150; }
[data-theme="dark"] .auto-pill-on { background: rgba(68, 131, 97, 0.24); color: #7fc9a2; }

.auto-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.auto-btn {
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  font: inherit; font-size: 12.5px; padding: 6px 11px;
  border-radius: var(--radius-ctl, 7px); cursor: pointer; white-space: nowrap;
}
.auto-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); }
.auto-btn:disabled { opacity: 0.5; cursor: default; }
.auto-btn-primary { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }
.auto-btn-primary:hover { filter: brightness(1.07); background: var(--accent); }
.auto-btn-danger { color: var(--danger, #d44c47); }
.auto-btn-danger.auto-confirm { background: var(--danger, #d44c47); color: #fff; border-color: transparent; }

.auto-empty { text-align: center; padding: 56px 24px; }
.auto-empty-ic { color: var(--text-faint); margin-bottom: 10px; }
.auto-empty-title { font-size: 17px; font-weight: 600; color: var(--text); }
.auto-empty-sub {
  font-size: 13.5px; color: var(--text-light); line-height: 1.6;
  margin: 6px auto 18px; max-width: 44ch;
}

/* ---- editor modal ---- */
.auto-layer {
  position: fixed; inset: 0; z-index: 1220;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 17, 26, 0.42); padding: 20px;
}
.auto-modal {
  width: min(620px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg-modal, var(--bg)); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.auto-form { padding: 6px 22px 18px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.auto-field { display: flex; flex-direction: column; gap: 6px; }
.auto-flabel { font-size: 12.5px; font-weight: 600; color: var(--text); }
.auto-hint { font-weight: 400; color: var(--text-faint); font-size: 11.5px; }
.auto-form textarea.settings-input { resize: vertical; font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.55; }

.auto-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-seg button {
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text-light);
  font: inherit; font-size: 12.5px; padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
.auto-seg button:hover { background: var(--bg-hover); color: var(--text); }
.auto-seg button.on { background: var(--accent); border-color: transparent; color: #fff; font-weight: 600; }

.auto-when-row { display: flex; gap: 8px; align-items: center; }
.auto-when-row .settings-input { width: auto; min-width: 130px; }
.auto-action-sub { font-size: 12px; color: var(--text-faint); }

.auto-preview {
  padding: 11px 13px; border-radius: 9px; background: var(--bg-hover);
  font-size: 13px; color: var(--text-light); line-height: 1.5;
}
.auto-warn {
  padding: 10px 12px; border-radius: 9px; font-size: 12.5px; line-height: 1.5;
  background: rgba(217, 115, 13, 0.12); color: #a5620b;
}
[data-theme="dark"] .auto-warn { color: #e0a458; }
.auto-error { font-size: 12.5px; color: var(--danger, #d44c47); margin-top: 4px; }
.auto-foot { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 720px) {
  .auto-wrap { padding: 22px 16px 22vh; }
  .auto-card { flex-direction: column; align-items: flex-start; }
  .auto-card-actions { flex-wrap: wrap; }
}