/* automations.css - Automations surface
 *
 * Extracted verbatim from style.css. Rules keep their original
 * relative order, and @media rules travel with the surface so its
 * responsive overrides still land after the rules they override.
 */
.automation-row .auto-status { width: 10px; height: 10px; border-radius: 50%; margin-top: 0; flex-shrink: 0; align-self: center; }
.automation-row .auto-status.on { background: var(--accent-primary-hover); box-shadow: 0 0 0 4px var(--accent-hover-soft-18); }
.automation-row .auto-status.off { background: rgba(234, 235, 236, 0.32); box-shadow: none; }
.automation-row .automation-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.automation-card .auto-status { width: 10px; height: 10px; border-radius: 50%; margin-top: 0; flex-shrink: 0; align-self: center; }
.automation-card .auto-status.on { background: var(--accent-primary-hover); box-shadow: 0 0 0 4px var(--accent-hover-soft-18); }
.automation-card .auto-status.off { background: rgba(234, 235, 236, 0.32); }
[data-app-theme="light"] .automation-card,
[data-app-theme="og"] .automation-card {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}
.automation-card-stats[data-state="loading"] { opacity: 0.5; }
.automation-card--speed-to-lead .stl-section {
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
}
.automation-card--speed-to-lead .stl-section:first-of-type { padding-top: 10px; }
.automation-rule-input.input--ghost:focus { outline: none; border-color: var(--totaly-blue-500, var(--brand-blue-pure)); background: rgba(33, 150, 243, 0.06); }
html body .automations-view {
  padding: 1.25rem 1.5rem 2rem !important;
  max-width: 980px !important;
  margin: 0 auto;
  background: transparent;
}
html body .automations-view .automations-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
html body .automations-view .automations-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  padding: 0;
}
html body .automations-view .automation-card-head,
html body .automations-view .automation-card-title-wrap,
html body .automations-view .automation-card-title,
html body .automations-view .automation-card-status,
html body .automations-view .automation-card-desc,
html body .automations-view .automation-card-foot,
html body .automations-view .automation-card-metric,
html body .automations-view .automation-card-actions,
html body .automations-view .automation-stat,
html body .automations-view [class^="automation-card-"]:not(.automation-card):not(.automation-card-stats):not(.automation-card-badge),
html body .automations-view [class*=" automation-card-"]:not(.automation-card):not(.automation-card-stats):not(.automation-card-badge) {
  background: transparent;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html body .automations-view .automation-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0;
}
html body .automations-view .automation-card .auto-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
  margin: 0;
}
html body .automations-view .automation-card-title-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
html body .automations-view .automation-card-desc {
  color: #B8B8B8;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  padding: 0;
}
html body .automations-view .automation-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.6rem;
  margin-top: 0.15rem;
  border-top: 1px solid #2A2A2A;
  border-radius: 0;
}
html body .automations-view .automation-card-metric {
  color: #8A8A8A;
  font-size: 0.78rem;
  font-weight: 500;
}
html body .automations-view .automation-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
html body .automations-view .automation-card .toggle-switch.toggle-switch--inline {
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}
html body .automations-view .automation-card .toggle-switch.toggle-switch--inline .toggle-track::before {
  width: 16px;
  height: 16px;
  background: #E5E5E5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html body .automations-view .automation-card .toggle-switch.toggle-switch--inline input:checked + .toggle-track {
  background: #4CAF50;
}
html body .automations-view .automation-card .toggle-switch.toggle-switch--inline input:checked + .toggle-track::before {
  transform: translateX(14px);
}
html body .automations-view .automation-card-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 0.5rem;
  margin-left: 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2196F3;
  background: rgba(33, 150, 243, 0.12);
  border: 1px solid rgba(33, 150, 243, 0.32);
  border-radius: 999px;
}
html body .automations-view .automation-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  padding: 0.6rem 0.75rem;
  background: #191A1A;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #B8B8B8;
}
html body .automations-view .automation-card-skeleton {
  height: 96px;
  border-radius: 12px;
  background: linear-gradient(90deg, #1F2121 0%, #262828 50%, #1F2121 100%);
  background-size: 200% 100%;
  border: 1px solid #2A2A2A;
  animation: shimmer 1.4s infinite linear;
}
html body .automations-view .empty-state {
  background: #1F2121;
  border: 1px dashed #3A3A3A;
  border-radius: 12px;
  color: #B8B8B8;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.88rem;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-name {
  color: var(--fg-primary, #E3E1DD);
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-desc,
html[data-app-theme="dark"] body .automations-view .automation-card .text-muted,
html[data-app-theme="dark"] body .automations-view .automation-card .automation-meta {
  color: var(--fg-muted, #8A8F9C);
}
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .automation-status,
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .status-dot,
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row > div:first-child:not(.automation-meta) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.20);
  border: none;
  flex-shrink: 0;
}
html[data-app-theme="dark"] body .dashboard-view .right-panel .automation-row .auto-status.on {
  background: #1976D2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}
html[data-app-theme="dark"] body .automation-card .automation-card-eyebrow,
html[data-app-theme="dark"] body .automation-card .automation-card-meta,
html[data-app-theme="dark"] body .automation-card .automation-card-metric,
html[data-app-theme="dark"] body .automation-card .automation-card-subtitle,
html[data-app-theme="dark"] body .automation-card [class*="automation-card-"]:not(.automation-card-title):not(.automation-card-head):not(.automation-card-title-wrap) {
  color: #B5B7BE;
}
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat,
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat strong,
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat b,
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-stats .automation-stat strong {
  color: #E3E1DD;
}
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat {
  color: #B5B7BE;
}
html[data-app-theme="dark"] body .automations-view .automation-card-stats .automation-stat strong {
  color: #E3E1DD;
}
html[data-app-theme="dark"] body .automations-view .scheduler-jobs-card .activity-title,
html[data-app-theme="dark"] body .automations-view .recent-actions-wrap .activity-title,
html[data-app-theme="dark"] body .automations-view .activity-title {
  color: #E3E1DD;
}
html[data-app-theme="dark"] body .automations-view .activity-title .text-muted {
  color: #B5B7BE;
}
html[data-app-theme="dark"] body .automations-view .activity-meta,
html[data-app-theme="dark"] body .automations-view .activity-item .activity-meta {
  color: #B5B7BE;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-head .auto-status {
  margin-top: 7px;  /* (title line-height 17.1px - dot 8px) / 2 = ~4.5, plus eyebrow */
  flex: 0 0 8px;
  align-self: flex-start;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #E3E1DD;
  font-weight: 600;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title .auto-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);  /* grey when off */
  box-shadow: none;
  margin: 0;
  flex: 0 0 8px;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title .auto-status.on {
  background: #1976D2;
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title .automation-card-metric {
  color: #B5B7BE;
  font-weight: 400;
  font-size: 0.85rem;
  margin-left: 2px;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-title .automation-card-metric strong {
  color: #E3E1DD;
  font-weight: 600;
  margin-right: 3px;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-head {
  align-items: flex-start;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-head .toggle-switch {
  align-self: center;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-foot {
  display: flex;
  justify-content: flex-end;
}
html[data-app-theme="dark"] body .automations-view .automation-card .automation-card-foot .automation-card-actions {
  margin-left: auto;
}
body .automation-card {
  background: var(--bg-card);
  border: 1px solid var(--surface-charcoal);
  border-radius: 12px;
  padding: 20px;
  transition: transform .12s ease, border-color .12s ease;
}
body .automation-card:hover {
  border-color: var(--border-strong-warm);
}
body .automations-toolbar {
  background: transparent;
  border-bottom: 1px solid var(--bg-elev-1);
  padding-bottom: 16px;
}
body .automations-sub {
  color: var(--fg-faint);
  font-size: 14px;
}
body .automation-card-title {
  color: var(--border-card-light);
  font-weight: 600;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body .automation-card-status {
  color: var(--fg-faint);
  font-size: 13px;
}
body .automation-card-desc {
  color: var(--fg-muted-warm);
  font-size: 14px;
}
body .automation-row .auto-status.on {
  background: var(--status-success);
  box-shadow: 0 0 0 3px rgba(76,175,80,0.15);
}
body .automation-row {
  border-top-color: var(--bg-elev-1);
}
html[data-app-theme="dark"] body .automation-card:hover,
html[data-app-theme="dark"] body .automations-view .automation-card:hover {
  border-color: #3A3A3A !important;
  background: #222424 !important;
  background-color: #222424 !important;
  background-image: none;
  box-shadow: none;
  transform: none;
}
html[data-app-theme="dark"] body .automation-card .automation-card-title,
html[data-app-theme="dark"] body .automation-card [class*="-name"],
html[data-app-theme="dark"] body .automation-card [class*="-title"],
html[data-app-theme="dark"] body .automations-view [class*="automation"] [class*="-title"],
html[data-app-theme="dark"] body .automations-view [class*="automation"] [class*="-name"] {
  color: #E5E5E5 !important;
}
html[data-app-theme="dark"] body .automations-view .automations-toolbar,
html[data-app-theme="dark"] body .automations-view .automations-sub {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}
html body .automations-view .automation-card:hover {
  border-color: rgba(33,150,243,0.30) !important;
  background: #252727 !important;
}
.automation-card:hover {
  background: #252727 !important;
  border-color: var(--border-overlay-10) !important;
}
html body .automation-row .auto-status.on,
html body .automation-card .auto-status.on {
  background: #2196F3 !important;
  box-shadow: 0 0 0 3px rgba(33,150,243,0.18) !important;
}
html body .automation-card--speed-to-lead .automation-card-badge {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-secondary, #9ca3af) !important;
  padding: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}
html body .automation-card--speed-to-lead .automation-card-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #16a34a;
  margin-right: 6px;
  vertical-align: middle;
}