/* Automation Input-Contact pane (rendered into #automationRoot by automation.js).
   Mirrors the layouts/widgets static-module convention. Prefixed .autom-* so
   nothing here collides with the inline dashboard.html Tailwind utility soup. */

#automationRoot { container-type: inline-size; }

/* ---- list view ---- */
.autom-panel { background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.autom-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid #f1f5f9;
}
.autom-panel-head .autom-sub { font-size: 0.8rem; color: #64748b; }
.autom-btn-primary {
  background: var(--accent); color: var(--accent-fg); font-weight: 600; font-size: 0.85rem;
  padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer;
}
.autom-btn-primary:hover { background: var(--accent-hover); }

.autom-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.autom-table thead { background: #f8fafc; color: #475569; }
.autom-table th { text-align: left; padding: 8px 16px; font-weight: 600; }
.autom-table td { padding: 10px 16px; border-top: 1px solid #f1f5f9; vertical-align: top; }
.autom-name { font-weight: 600; }
.autom-assigned { font-family: monospace; font-size: 0.75rem; color: #64748b; }

/* List-view row-action buttons — bordered, matches the Widgets page */
.autom-row-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 6px;
}
.autom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}
.autom-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.autom-btn-danger {
  color: #b91c1c;
  border-color: #fecaca;
}
.autom-btn-danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}
.autom-empty { padding: 24px 16px; font-size: 0.875rem; color: #94a3b8; }
.autom-error { padding: 24px 16px; font-size: 0.875rem; color: #dc2626; }

/* ---- editor ---- */
.autom-editor-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.autom-card { background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); padding: 20px; margin-bottom: 16px; }
.autom-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; color: #334155; }
.autom-input {
  width: 100%; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 8px 12px; font-size: 0.875rem; box-sizing: border-box;
}
.autom-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15); }
.autom-select {
  border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 10px;
  font-size: 0.85rem; background: #fff;
}
.autom-num { width: 5.5rem; font-family: monospace; }

/* rule card */
.autom-rule {
  border: 1px solid #e2e8f0; border-left: 4px solid var(--accent); border-radius: 8px;
  padding: 14px; margin-bottom: 14px; background: #fafbff;
}
.autom-rule-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.autom-rule-title { font-size: 0.85rem; font-weight: 700; color: var(--accent-hover); }
.autom-trigger-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.autom-trigger-row .autom-when { font-size: 0.8rem; color: #64748b; font-weight: 600; }

/* action steps */
.autom-steps { display: flex; flex-direction: column; gap: 6px; }
.autom-step {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px;
}
.autom-step.dragover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.18); }
.autom-step .autom-idx { font-size: 0.7rem; color: #94a3b8; font-family: monospace; width: 1.4rem; text-align: center; }
.autom-drag { cursor: grab; color: #94a3b8; font-size: 1rem; user-select: none; line-height: 1; }
.autom-drag:active { cursor: grabbing; }
.autom-step-type { font-size: 0.82rem; font-weight: 600; color: #334155; min-width: 6.5rem; }
.autom-step-params { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; font-size: 0.8rem; color: #64748b; }
.autom-step-params label { display: inline-flex; align-items: center; gap: 4px; }
.autom-step-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.autom-icon-btn {
  background: none; border: none; cursor: pointer; color: #94a3b8;
  font-size: 0.9rem; padding: 2px 5px; border-radius: 4px; line-height: 1;
}
.autom-icon-btn:hover { color: #334155; background: #f1f5f9; }
.autom-icon-btn.danger:hover { color: #dc2626; background: #fef2f2; }
.autom-icon-btn:disabled { opacity: 0.3; cursor: default; }
.autom-icon-btn:disabled:hover { background: none; color: #94a3b8; }
.autom-steps-empty { font-size: 0.78rem; color: #94a3b8; padding: 4px 2px; }
.autom-addstep-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

.autom-add-rule {
  background: var(--accent-light); color: var(--accent-hover); font-weight: 600; font-size: 0.82rem;
  padding: 8px 14px; border: 1px dashed var(--accent-soft); border-radius: 6px; cursor: pointer;
}
.autom-add-rule:hover { background: var(--accent-light); }
.autom-add-rule:disabled { opacity: 0.5; cursor: default; }

.autom-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.autom-save { background: var(--accent); color: var(--accent-fg); font-weight: 600; font-size: 0.85rem; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; }
.autom-save:hover { background: var(--accent-hover); }
.autom-editor-msg { font-size: 0.85rem; }
.autom-dirty { font-size: 0.75rem; color: #b45309; }

/* ---- assignment modal ---- */
.autom-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 60; }
.autom-modal {
  position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(620px, calc(100vw - 32px)); max-height: 82vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;
}
.autom-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #e2e8f0; }
.autom-modal-head h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.autom-modal-close { border: none; background: none; cursor: pointer; color: #94a3b8; font-size: 1.1rem; }
.autom-modal-close:hover { color: #475569; }
.autom-modal-body { padding: 14px 18px; overflow-y: auto; }
.autom-modal-note { font-size: 0.78rem; color: #64748b; margin-bottom: 12px; }

.autom-prow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #f1f5f9; }
.autom-prow:last-child { border-bottom: none; }
.autom-prow-info { min-width: 0; flex: 1; }
.autom-prow-actions { display: flex; flex-shrink: 0; gap: 6px; }
.autom-prow-name { font-weight: 600; font-size: 0.85rem; }
.autom-prow-meta { font-size: 0.72rem; color: #94a3b8; }
.autom-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; }
.autom-badge-on { background: #dcfce7; color: #15803d; }
.autom-badge-off { background: #f1f5f9; color: #64748b; }
.autom-badge-warn { background: #fef3c7; color: #b45309; }
.autom-badge-here { background: var(--accent-light); color: var(--accent-hover); }
.autom-prow-btn { font-size: 0.78rem; font-weight: 600; padding: 5px 12px; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; white-space: nowrap; }
.autom-prow-btn:hover { border-color: var(--accent-soft); }
.autom-prow-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.autom-prow-btn.primary:hover { background: var(--accent-hover); }
.autom-prow-btn.danger { color: #dc2626; border-color: #fecaca; }
.autom-prow-btn.danger:hover { background: #fef2f2; }

/* ---- offline hard-fail popup (OD-9): a deliberately blunt failure dialog,
   distinct from the amber "applies on reconnect" deferred styling layouts uses.
   Higher z-index than the assignment modal so it stacks on top. ---- */
.autom-alert-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 78; display: flex; align-items: center; justify-content: center; padding: 16px; }
.autom-alert {
  width: min(420px, 100%); background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35); border-top: 4px solid #dc2626;
}
.autom-alert-body { padding: 20px; }
.autom-alert-title { font-size: 1rem; font-weight: 700; color: #b91c1c; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.autom-alert-msg { font-size: 0.85rem; color: #475569; line-height: 1.5; }
.autom-alert-foot { display: flex; justify-content: flex-end; padding: 0 20px 18px; }
.autom-alert-ok { background: #dc2626; color: #fff; font-weight: 600; font-size: 0.85rem; padding: 8px 18px; border: none; border-radius: 6px; cursor: pointer; }
.autom-alert-ok:hover { background: #b91c1c; }