/* CleanHQ Animated Dashboard v1.3.0
   Lightweight motion layer for the CRM admin dashboard and customer/cleaner portals. */

:root {
  --chq-motion-ease: cubic-bezier(.2,.72,.2,1);
  --chq-motion-spring: cubic-bezier(.16,1,.3,1);
  --chq-motion-fast: 180ms;
  --chq-motion-medium: 480ms;
}

/* --------------------------------------------------------------------------
   Front-end customer + cleaner portals
   -------------------------------------------------------------------------- */
.chq-portal.chq-motion-surface,
.chq-portal-shell.chq-motion-surface {
  position: relative;
  isolation: isolate;
}

.chq-portal.chq-motion-surface::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px -18px auto;
  height: 280px;
  pointer-events: none;
  opacity: .58;
  background:
    radial-gradient(circle at 8% 24%, rgba(18,201,173,.16), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(18,144,243,.13), transparent 38%);
  filter: blur(4px);
}

.chq-motion-surface .chq-portal-header {
  position: relative;
  isolation: isolate;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.12);
}

.chq-motion-surface .chq-portal-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120%;
  left: -35%;
  width: 34%;
  height: 330%;
  opacity: .22;
  transform: rotate(24deg) translate3d(-160%,0,0);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
  animation: chqHeaderSweep 8s var(--chq-motion-ease) 1.2s infinite;
}

.chq-motion-surface .chq-portal-logo {
  box-shadow: 0 0 0 0 rgba(232,174,25,.38);
  animation: chqLogoPulse 3.2s ease-in-out infinite;
}

.chq-motion-surface .chq-portal-nav {
  position: sticky;
  top: 108px;
  z-index: 45;
  padding: 8px;
  border: 1px solid rgba(203,223,234,.78);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 34px rgba(3,44,84,.08);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

.admin-bar .chq-motion-surface .chq-portal-nav { top: 140px; }

.chq-motion-surface .chq-portal-nav a {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  transition: color var(--chq-motion-fast), background var(--chq-motion-fast), transform var(--chq-motion-fast) var(--chq-motion-ease);
}

.chq-motion-surface .chq-portal-nav a:hover {
  transform: translateY(-1px);
  background: #eef8fb;
}

.chq-motion-surface .chq-portal-nav a.is-active {
  color: #032c54 !important;
  background: linear-gradient(135deg, #fff5cf, #fffdf5);
  box-shadow: inset 0 0 0 1px rgba(232,174,25,.28);
}

.chq-motion-surface .chq-portal-metrics > div {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(203,223,234,.88) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,250,253,.96));
  transition: transform 240ms var(--chq-motion-spring), box-shadow 240ms, border-color 240ms;
}

.chq-motion-surface .chq-portal-metrics > div::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -52px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(18,201,173,.13), transparent 68%);
  transition: transform 420ms var(--chq-motion-spring);
}

.chq-motion-surface .chq-portal-metrics > div:hover {
  transform: translateY(-5px);
  border-color: rgba(18,144,243,.28) !important;
  box-shadow: 0 22px 44px rgba(3,44,84,.14) !important;
}

.chq-motion-surface .chq-portal-metrics > div:hover::after { transform: scale(1.28); }

.chq-motion-surface .chq-portal-metrics strong,
.chq-motion-surface .chq-portal-metrics b {
  font-variant-numeric: tabular-nums;
}

.chq-motion-surface .chq-portal-card,
.chq-motion-surface .chq-next-clean,
.chq-motion-surface .chq-not-linked {
  transition: transform 260ms var(--chq-motion-spring), box-shadow 260ms, border-color 260ms;
}

.chq-motion-surface .chq-portal-card:hover {
  transform: translateY(-2px);
  border-color: rgba(7,95,197,.2) !important;
  box-shadow: 0 24px 54px rgba(3,44,84,.12) !important;
}

.chq-motion-surface .chq-next-clean {
  position: relative;
  overflow: hidden;
}

.chq-motion-surface .chq-next-clean::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -64px;
  top: -72px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 24px rgba(255,255,255,.035), 0 0 0 48px rgba(255,255,255,.025);
  animation: chqOrbitBreath 5s ease-in-out infinite;
  pointer-events: none;
}

.chq-motion-surface .chq-job {
  transition: transform 200ms var(--chq-motion-ease), box-shadow 200ms, background 200ms;
}

.chq-motion-surface .chq-job:hover {
  transform: translateX(3px);
  box-shadow: 0 10px 26px rgba(3,44,84,.08);
}

.chq-motion-surface .chq-job.is-today {
  position: relative;
  box-shadow: inset 4px 0 0 var(--chq-gold), 0 9px 28px rgba(3,44,84,.07);
}

.chq-motion-surface .chq-pill,
.chq-motion-surface .chq-status {
  transition: transform var(--chq-motion-fast) var(--chq-motion-spring), box-shadow var(--chq-motion-fast);
}

.chq-motion-surface .chq-pill:hover,
.chq-motion-surface .chq-status:hover { transform: scale(1.035); }

.chq-motion-surface :is(.chq-portal-button,.chq-job-actions button,.chq-pay-links a,.chq-login input[type=submit]) {
  position: relative;
  overflow: hidden;
  transition: transform 180ms var(--chq-motion-spring), box-shadow 180ms, filter 180ms !important;
}

.chq-motion-surface :is(.chq-portal-button,.chq-job-actions button,.chq-pay-links a,.chq-login input[type=submit]):hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: 0 13px 26px rgba(0,143,135,.22);
}

.chq-motion-surface :is(.chq-portal-button,.chq-job-actions button,.chq-pay-links a,.chq-login input[type=submit]):active {
  transform: translateY(0) scale(.985);
}

.chq-motion-surface .chq-portal-notice,
.chq-motion-surface .chq-account-message {
  animation: chqNoticeIn 520ms var(--chq-motion-spring) both;
}

.chq-motion-surface table tbody tr {
  transition: background var(--chq-motion-fast), transform var(--chq-motion-fast);
}

.chq-motion-surface table tbody tr:hover {
  background: #f5fbfd;
}

/* Generic reveal classes injected by dashboard-motion.js. */
.chq-motion-ready .chq-reveal {
  opacity: 0;
  transform: translate3d(0,18px,0) scale(.992);
}

.chq-motion-ready .chq-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms var(--chq-motion-ease) calc(var(--chq-stagger,0) * 55ms),
    transform 620ms var(--chq-motion-spring) calc(var(--chq-stagger,0) * 55ms);
}

/* --------------------------------------------------------------------------
   WordPress CleanHQ CRM admin dashboard
   -------------------------------------------------------------------------- */
.cleanhq.chq-motion-surface {
  --chq-motion-glow: rgba(24,168,120,.18);
  background:
    radial-gradient(circle at 92% 4%, rgba(24,168,120,.08), transparent 26%),
    radial-gradient(circle at 28% 0%, rgba(28,130,190,.055), transparent 24%),
    var(--chq-bg);
}

.cleanhq.chq-motion-surface .chq-header {
  position: sticky;
  top: 32px;
  z-index: 70;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 9px 28px rgba(16,42,67,.045);
}

.cleanhq.chq-motion-surface .chq-logo {
  box-shadow: 0 8px 24px rgba(24,168,120,.22);
  animation: chqAdminLogo 3.6s ease-in-out infinite;
}

.cleanhq.chq-motion-surface .chq-welcome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 10%, rgba(97,221,181,.22), transparent 28%),
    linear-gradient(120deg,#102e46,#174d59 62%,#126257);
  box-shadow: 0 20px 48px rgba(16,42,67,.18);
}

.cleanhq.chq-motion-surface .chq-welcome::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% auto -80% -16%;
  width: 22%;
  transform: rotate(18deg) translateX(-180%);
  opacity: .15;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: chqAdminSweep 9s var(--chq-motion-ease) 1.6s infinite;
}

.cleanhq.chq-motion-surface .chq-date {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cleanhq.chq-motion-surface .chq-metrics > a,
.cleanhq.chq-motion-surface .chq-report-kpis > div,
.cleanhq.chq-motion-surface .chq-ai-kpis > div {
  position: relative;
  overflow: hidden;
  transition: transform 220ms var(--chq-motion-spring), box-shadow 220ms, border-color 220ms;
}

.cleanhq.chq-motion-surface .chq-metrics > a:hover,
.cleanhq.chq-motion-surface .chq-report-kpis > div:hover,
.cleanhq.chq-motion-surface .chq-ai-kpis > div:hover {
  transform: translateY(-5px);
  border-color: rgba(24,168,120,.30);
  box-shadow: 0 20px 42px rgba(16,42,67,.11);
}

.cleanhq.chq-motion-surface .chq-metrics > a .dashicons {
  transition: transform 240ms var(--chq-motion-spring), background 240ms, color 240ms;
}

.cleanhq.chq-motion-surface .chq-metrics > a:hover .dashicons {
  transform: translateY(-2px) rotate(-4deg) scale(1.08);
  background: #daf8ed;
}

.cleanhq.chq-motion-surface .chq-metrics strong,
.cleanhq.chq-motion-surface .chq-report-kpis strong,
.cleanhq.chq-motion-surface .chq-ai-kpis strong {
  font-variant-numeric: tabular-nums;
}

.cleanhq.chq-motion-surface .chq-card {
  transition: transform 220ms var(--chq-motion-spring), box-shadow 220ms, border-color 220ms;
}

.cleanhq.chq-motion-surface .chq-card:hover {
  border-color: #c9dfd9;
  box-shadow: 0 16px 36px rgba(16,42,67,.075);
}

.cleanhq.chq-motion-surface .chq-actions a {
  transition: transform 180ms var(--chq-motion-spring), background 180ms, color 180ms;
}

.cleanhq.chq-motion-surface .chq-actions a:hover { transform: translateX(4px); }

.cleanhq.chq-motion-surface .chq-feed i {
  box-shadow: 0 0 0 0 rgba(24,168,120,.32);
  animation: chqFeedPulse 2.6s ease-in-out infinite;
  animation-delay: calc(var(--chq-stagger,0) * 120ms);
}

.cleanhq.chq-motion-surface .chq-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  overflow: hidden;
}

.cleanhq.chq-motion-surface .chq-pipeline-track {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf4f1;
}

.cleanhq.chq-motion-surface .chq-pipeline-fill {
  display: block;
  width: var(--chq-pipeline-width,0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#18a878,#38ca99);
  transform-origin: left;
  animation: chqPipelineGrow 760ms var(--chq-motion-spring) both;
}

.cleanhq.chq-motion-surface .chq-table tbody tr {
  transition: background 160ms, box-shadow 160ms, transform 160ms;
}

.cleanhq.chq-motion-surface .chq-table tbody tr:hover {
  transform: translateX(2px);
  box-shadow: inset 3px 0 0 #18a878;
}

.cleanhq.chq-motion-surface .chq-primary,
.cleanhq.chq-motion-surface .chq-secondary,
.cleanhq.chq-motion-surface .chq-icon-link {
  transition: transform 170ms var(--chq-motion-spring), box-shadow 170ms, background 170ms, color 170ms;
}

.cleanhq.chq-motion-surface .chq-primary:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(24,168,120,.23); }
.cleanhq.chq-motion-surface .chq-primary:active { transform: translateY(0) scale(.985); }
.cleanhq.chq-motion-surface .chq-icon-link:hover { transform: scale(1.12); }

.cleanhq.chq-motion-surface .chq-modal {
  opacity: 0;
  transition: opacity 220ms ease;
}

.cleanhq.chq-motion-surface .chq-modal.is-open { opacity: 1; }

.cleanhq.chq-motion-surface .chq-modal-panel {
  transform: translateX(36px);
  transition: transform 360ms var(--chq-motion-spring);
}

.cleanhq.chq-motion-surface .chq-modal.is-open .chq-modal-panel { transform: none; }

.cleanhq.chq-motion-surface .chq-bars i {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 820ms var(--chq-motion-spring) calc(var(--chq-stagger,0) * 70ms);
}
.cleanhq.chq-motion-surface .chq-bars.is-visible i { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   Keyframes + accessibility
   -------------------------------------------------------------------------- */
@keyframes chqHeaderSweep {
  0%, 72% { transform: rotate(24deg) translate3d(-160%,0,0); }
  86%, 100% { transform: rotate(24deg) translate3d(520%,0,0); }
}
@keyframes chqAdminSweep {
  0%, 76% { transform: rotate(18deg) translateX(-180%); }
  91%, 100% { transform: rotate(18deg) translateX(720%); }
}
@keyframes chqLogoPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,174,25,.34); transform: translateZ(0); }
  50% { box-shadow: 0 0 0 9px rgba(232,174,25,0); transform: translateY(-1px); }
}
@keyframes chqAdminLogo {
  0%,100% { transform: translateY(0) rotate(0); box-shadow: 0 8px 24px rgba(24,168,120,.20); }
  50% { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 12px 28px rgba(24,168,120,.28); }
}
@keyframes chqOrbitBreath { 0%,100% { transform: scale(.94); opacity:.68; } 50% { transform: scale(1.08); opacity:1; } }
@keyframes chqFeedPulse { 0%,100% { box-shadow:0 0 0 0 rgba(24,168,120,.30); } 50% { box-shadow:0 0 0 6px rgba(24,168,120,0); } }
@keyframes chqNoticeIn { from { opacity:0; transform:translate3d(0,-10px,0); } to { opacity:1; transform:none; } }
@keyframes chqPipelineGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }

@media (max-width: 782px) {
  .cleanhq.chq-motion-surface .chq-header { top: 46px; }
  .chq-motion-surface .chq-portal-nav { top: 82px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
  .admin-bar .chq-motion-surface .chq-portal-nav { top: 128px; }
}

@media (max-width: 700px) {
  .chq-motion-surface .chq-portal-nav {
    position: static;
    margin-bottom: 14px;
  }
  .chq-motion-surface .chq-portal-card:hover,
  .chq-motion-surface .chq-portal-metrics > div:hover,
  .cleanhq.chq-motion-surface .chq-metrics > a:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chq-motion-surface *,
  .chq-motion-surface *::before,
  .chq-motion-surface *::after,
  .cleanhq.chq-motion-surface *,
  .cleanhq.chq-motion-surface *::before,
  .cleanhq.chq-motion-surface *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .chq-motion-ready .chq-reveal { opacity:1 !important; transform:none !important; }
}