/* Surewyse — small custom layer on top of Tailwind CDN. */

.sw-spin {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: sw-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 0.4rem;
}

@keyframes sw-spin { to { transform: rotate(360deg); } }

/* Toast container */
.sw-toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.sw-toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 360px;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid;
  background: #fff;
  animation: sw-toast-in 180ms ease-out;
}
.sw-toast--success { border-color: #a7f3d0; color: #065f46; background: #ecfdf5; }
.sw-toast--error   { border-color: #fecaca; color: #991b1b; background: #fef2f2; }
.sw-toast--info    { border-color: #cbd5e1; color: #0f172a; background: #f8fafc; }

@keyframes sw-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Landing page — graphical / animated layer
   ========================================================================== */

/* Animated mesh-gradient hero background */
.sw-mesh {
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(16,185,129,0.18) 0%, transparent 60%),
    radial-gradient(50% 50% at 80% 30%, rgba(59,130,246,0.18) 0%, transparent 60%),
    radial-gradient(70% 70% at 50% 90%, rgba(168,85,247,0.14) 0%, transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  background-size: 200% 200%;
  animation: sw-mesh-drift 18s ease-in-out infinite;
}
@keyframes sw-mesh-drift {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
  50%      { background-position: 30% 20%, 70% 40%, 30% 70%, 0 0; }
}

/* On-scroll reveal — JS adds .is-visible */
.sw-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.sw-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sw-reveal[data-delay="1"] { transition-delay: 80ms; }
.sw-reveal[data-delay="2"] { transition-delay: 160ms; }
.sw-reveal[data-delay="3"] { transition-delay: 240ms; }
.sw-reveal[data-delay="4"] { transition-delay: 320ms; }
.sw-reveal[data-delay="5"] { transition-delay: 400ms; }

/* Pulsing primary CTA */
.sw-pulse {
  position: relative;
}
.sw-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: sw-pulse-soft 2.4s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
}
@keyframes sw-pulse-soft {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Live demo widget --------------------------------------------------------- */
.sw-demo {
  background: #0b1220;
  border: 1px solid #1e293b;
  color: #e2e8f0;
  box-shadow: 0 30px 80px -20px rgba(2,6,23,0.55), 0 0 0 1px rgba(15,23,42,0.04);
}

.sw-demo .sw-cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  background: #34d399;
  margin-left: 2px;
  vertical-align: -2px;
  animation: sw-blink 1s steps(1) infinite;
}
@keyframes sw-blink { 50% { opacity: 0; } }

.sw-check {
  opacity: 0.35;
  transform: translateX(-4px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.sw-check.is-active {
  opacity: 1;
  transform: translateX(0);
}
.sw-check .sw-mark {
  display: inline-flex;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  background: rgba(148,163,184,0.18);
  align-items: center;
  justify-content: center;
  margin-right: 0.55rem;
  font-size: 0.7rem;
  color: #94a3b8;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.sw-check.is-pass .sw-mark { background: #10b981; color: #052e23; box-shadow: 0 0 0 4px rgba(16,185,129,0.18); }
.sw-check.is-fail .sw-mark { background: #ef4444; color: #350909; box-shadow: 0 0 0 4px rgba(239,68,68,0.18); }
.sw-check.is-warn .sw-mark { background: #f59e0b; color: #2a1a02; box-shadow: 0 0 0 4px rgba(245,158,11,0.18); }

.sw-result {
  transition: background 200ms ease, color 200ms ease;
}
.sw-result[data-result="valid"]   { background: rgba(16,185,129,0.12); color: #6ee7b7; }
.sw-result[data-result="invalid"] { background: rgba(239,68,68,0.12);  color: #fca5a5; }
.sw-result[data-result="risky"]   { background: rgba(245,158,11,0.12); color: #fcd34d; }

/* Pipeline (six stages) ---------------------------------------------------- */
.sw-pipeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  align-items: center;
  padding: 1rem 0;
}
.sw-pipeline::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, #cbd5e1 0%, #cbd5e1 100%);
  z-index: 0;
}
.sw-pipeline::after {
  content: "";
  position: absolute;
  left: 4%;
  top: calc(50% - 5px);
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: #10b981;
  box-shadow: 0 0 14px 4px rgba(16,185,129,0.55);
  animation: sw-flow 4.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes sw-flow {
  0%   { left: 4%;  opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(96% - 12px); opacity: 0; }
}
.sw-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.sw-stage-dot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 2px solid #cbd5e1;
  color: #475569;
  font-weight: 600;
  font-size: 0.85rem;
  transition: transform 280ms ease;
}
.sw-stage:hover .sw-stage-dot {
  transform: scale(1.08);
  border-color: #10b981;
  color: #047857;
}

/* Counter rows shimmer when first revealed */
.sw-stat-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Floating "marquee" of trusted-by logos / labels */
.sw-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sw-marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: sw-marquee 28s linear infinite;
}
@keyframes sw-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Dark mode — class-based, scoped to the dashboard. Marketing pages keep
   the existing light theme.
   ========================================================================== */

/* Smooth background/border/colour transitions when toggling theme */
.sw-theme-aware,
.sw-theme-aware * {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* Dark mesh — softer, deeper version of the landing's gradient */
.dark .sw-mesh {
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(16,185,129,0.10) 0%, transparent 60%),
    radial-gradient(50% 50% at 80% 30%, rgba(59,130,246,0.10) 0%, transparent 60%),
    radial-gradient(70% 70% at 50% 90%, rgba(168,85,247,0.08) 0%, transparent 60%),
    linear-gradient(135deg, #020617 0%, #0f172a 100%);
  background-size: 200% 200%;
}

/* Toast palettes for dark mode */
.dark .sw-toast {
  background: #0f172a;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.dark .sw-toast--success { border-color: #064e3b; color: #6ee7b7; background: #022c22; }
.dark .sw-toast--error   { border-color: #7f1d1d; color: #fca5a5; background: #2a0a0a; }
.dark .sw-toast--info    { border-color: #334155; color: #e2e8f0; background: #0f172a; }

/* Sidebar nav active state */
.sw-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #475569;            /* slate-600 */
  transition: background 150ms ease, color 150ms ease;
}
.sw-nav-item:hover { background: #f1f5f9; color: #0f172a; }
.sw-nav-item--active {
  background: linear-gradient(90deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
  color: #047857;
  box-shadow: inset 3px 0 0 0 #10b981;
}
.dark .sw-nav-item        { color: #cbd5e1; }
.dark .sw-nav-item:hover  { background: #1e293b; color: #ffffff; }
.dark .sw-nav-item--active{
  background: linear-gradient(90deg, rgba(16,185,129,0.18), rgba(16,185,129,0.04));
  color: #6ee7b7;
  box-shadow: inset 3px 0 0 0 #10b981;
}

/* Mobile drawer animation already uses Tailwind translate-x; this just hides
   the drawer's default focus outline when it's off-screen */
#sw-sidebar:not(.is-open):not(.lg\:translate-x-0) { /* placeholder for specificity */ }

/* Connection banner */
#sw-net-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: #0f172a;
  color: #e2e8f0;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
#sw-net-bar.sw-net-bar--visible { transform: translateY(0); }
.sw-net-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f87171;
  flex-shrink: 0;
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  .sw-mesh,
  .sw-pipeline::after,
  .sw-marquee-track,
  .sw-pulse::after {
    animation: none !important;
  }
  .sw-reveal { opacity: 1; transform: none; transition: none; }
}