/* Tour, tooltips, and motion — tenant tokens, reduced-motion safe. */

.erp-tip {
  position: fixed;
  z-index: 1000002;
  max-width: min(18rem, calc(100vw - 24px));
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #f9fafb;
  background: var(--tenant-nav-bg, #071810);
  border: 1px solid var(--theme-accent-300, rgba(16, 185, 129, 0.28));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--theme-accent-800, #064e3b) 28%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.erp-tip.is-on {
  opacity: 1;
  transform: translateY(0);
}
.erp-tip-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-accent, #34d399);
  margin-bottom: 4px;
}

.erp-tour-root {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  pointer-events: none;
}
.erp-tour-root.is-on { pointer-events: auto; }
.erp-tour-root[hidden] { display: none !important; }
.erp-tour-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--theme-accent-deep, #064e3b) 55%, rgba(0, 0, 0, 0.45));
}
.erp-tour-spot {
  position: absolute;
  border-radius: 16px;
  box-shadow: 0 0 0 4px var(--theme-accent, #10b981), 0 0 0 9999px color-mix(in srgb, var(--theme-accent-deep, #064e3b) 55%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
  transition: top 0.28s cubic-bezier(0.16, 1, 0.3, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1), width 0.28s cubic-bezier(0.16, 1, 0.3, 1), height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  animation: erpTourPulse 1.8s ease-in-out infinite;
}
.erp-tour-card {
  position: absolute;
  width: min(22rem, calc(100vw - 24px));
  padding: 18px 18px 14px;
  border-radius: 20px;
  background: var(--tenant-card-bg, #ffffff);
  color: var(--tenant-card-text, #111827);
  border: 1px solid var(--theme-accent-200, rgba(16, 185, 129, 0.18));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--theme-accent-800, #064e3b) 22%, transparent);
  animation: erpRise 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
html.dark .erp-tour-card { background: #0a1f14; color: #f9fafb; }
.erp-tour-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-accent-800, #064e3b);
  margin-bottom: 6px;
}
.erp-tour-card h3 {
  font-size: 16px;
  font-weight: 650;
  margin: 0 0 6px;
}
.erp-tour-card p {
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
  margin: 0 0 14px;
}
html.dark .erp-tour-card p { color: #d1fae5; }
.erp-tour-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.erp-tour-progress {
  font-size: 11px;
  font-weight: 600;
  color: var(--theme-accent-800, #064e3b);
  opacity: 0.7;
  margin: 10px 0 0;
}

@keyframes erpTourPulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--theme-accent, #10b981), 0 0 0 9999px color-mix(in srgb, var(--theme-accent-deep, #064e3b) 55%, rgba(0, 0, 0, 0.45)); }
  50% { box-shadow: 0 0 0 7px var(--theme-accent, #10b981), 0 0 0 9999px color-mix(in srgb, var(--theme-accent-deep, #064e3b) 55%, rgba(0, 0, 0, 0.45)); }
}
@keyframes erpRise {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

html.erp-motion body .view-btn,
html.erp-motion body .jalusi-submit-btn,
html.erp-motion body .preview-update-btn,
html.erp-motion body .jalusi-cancel-btn,
html.erp-motion body .topbar-action-btn {
  transition: transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
html.erp-motion body .view-btn:active,
html.erp-motion body .jalusi-submit-btn:active,
html.erp-motion body .preview-update-btn:active {
  transform: scale(0.97);
}
html.erp-motion body .erp-list-item,
html.erp-motion body [data-erp-row],
html.erp-motion body .lead-card,
html.erp-motion body .ticket-row-card,
html.erp-motion body .client-list-item {
  animation: erpRise 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.erp-motion .status-dot.checking,
html.erp-motion .status-dot.reconnecting {
  animation: erpAlivePulse 1.2s ease-in-out infinite;
}
@keyframes erpAlivePulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .erp-tip, .erp-tour-spot, .erp-tour-card,
  html.erp-motion body .erp-list-item,
  html.erp-motion body [data-erp-row] {
    animation: none !important;
    transition: none !important;
  }
}