/* === Global Styling Variables === */
:root {
  --bg-dark: #030712;
  --bg-card: rgba(13, 18, 37, 0.45);
  --border-card: rgba(255, 255, 255, 0.05);
  --border-hover: rgba(96, 165, 250, 0.2);
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --color-accent: #60a5fa;
  --color-accent-hover: #93c5fd;
  --color-accent-glow: rgba(96, 165, 250, 0.35);
  --color-purple: #8b5cf6;
  --color-purple-glow: rgba(139, 92, 246, 0.3);
  --color-green: #10b981;
  --color-green-glow: rgba(16, 185, 129, 0.25);
  --bg-nav: rgba(13, 18, 37, 0.8);
  --border-nav: rgba(255, 255, 255, 0.08);
}

/* === htmx indicators === */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

/* === Star & Ambient Glow Backgrounds === */
body {
  position: relative;
  overflow-x: hidden;
  background-color: var(--bg-dark) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 3% 12%, rgba(255,255,255,0.4) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 45%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 78%, rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 18% 32%, rgba(255,255,255,0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,0.2) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 28% 15%, rgba(255,255,255,0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 33% 55%, rgba(255,255,255,0.25) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 38% 72%, rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 42% 8%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 47% 38%, rgba(255,255,255,0.2) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 65%, rgba(255,255,255,0.4) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 22%, rgba(255,255,255,0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 82%, rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 48%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 5%, rgba(255,255,255,0.2) 50%, transparent 100%),
    radial-gradient(1px 1px at 73% 58%, rgba(255,255,255,0.4) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 30%, rgba(255,255,255,0.25) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 75%, rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 18%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 92%, rgba(255,255,255,0.2) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 42%, rgba(255,255,255,0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 95% 68%, rgba(255,255,255,0.25) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 5% 95%, rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 60%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 25% 3%, rgba(255,255,255,0.2) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 42%, rgba(255,255,255,0.4) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 90%, rgba(255,255,255,0.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 57% 10%, rgba(255,255,255,0.35) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 85%, rgba(255,255,255,0.3) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 50%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: starTwinkle 8s ease-in-out infinite alternate;
}

/* Ambient linear-glow lights */
body::after {
  content: '';
  position: fixed;
  top: -15%;
  left: 20%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.08) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(80px);
  animation: float 10s ease-in-out infinite alternate;
}

.bottom-ambient-glow {
  position: absolute;
  bottom: 0;
  right: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(100px);
  animation: float 12s ease-in-out infinite alternate-reverse;
}

/* === Glassmorphic Card Panel === */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover {
  border-color: var(--border-hover);
  box-shadow: 0 12px 40px 0 rgba(96, 165, 250, 0.12);
  transform: translateY(-2px);
}

/* === Premium Button Styles === */
.btn-accent {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  color: #ffffff !important;
  font-weight: 600;
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  box-shadow: 0 4px 14px 0 rgba(96, 165, 250, 0.25);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-accent:hover {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  box-shadow: 0 6px 20px 0 rgba(96, 165, 250, 0.45);
  transform: translateY(-1.5px);
}

.btn-accent:active {
  transform: translateY(1px);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  font-weight: 500;
  padding: 0.625rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: 0 4px 12px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1.5px);
}

.btn-outline:active {
  transform: translateY(1px);
}

/* === Modern Dark Form Inputs === */
.input-dark {
  background: rgba(17, 26, 53, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  width: 100%;
  outline: none;
  backdrop-filter: blur(4px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-dark:focus {
  border-color: #60a5fa;
  background: rgba(17, 26, 53, 0.75);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

.input-dark::placeholder {
  color: #64748b;
}

.checkbox-accent {
  width: 1rem;
  height: 1rem;
  accent-color: #60a5fa;
  border-radius: 0.25rem;
}

/* === Modern Select Component === */
.select-dark {
  background: rgba(17, 26, 53, 0.45) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 9l3 3 3-3' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-size: 1.25rem;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
  border-radius: 8px;
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
  font-size: 0.875rem;
  width: 100%;
  outline: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.select-dark:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

/* === Shimmer Loading Indicator === */
.htmx-indicator.shimmer-indicator {
  display: none;
  height: 3px;
  background: linear-gradient(90deg, transparent, #60a5fa, transparent);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 2px;
  margin-top: 0.5rem;
}
.htmx-request .shimmer-indicator {
  display: block;
}

/* === Scanline overlay for logs === */
.scanline-overlay {
  position: relative;
  overflow: hidden;
}
.scanline-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(96, 165, 250, 0.03) 50%,
    transparent 100%
  );
  height: 30%;
  animation: scanline 4s linear infinite;
}

/* === Dynamic Animations === */
@keyframes starTwinkle {
  0% { opacity: 0.35; }
  50% { opacity: 1; }
  100% { opacity: 0.35; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(96, 165, 250, 0); }
}

@keyframes pulseParticle {
  0% { left: 0%; opacity: 0.1; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0.1; }
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-slide-up {
  animation: fadeSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.floating-glow {
  animation: float 6s ease-in-out infinite;
}

/* Animated Connecting Line */
.pulse-line {
  position: relative;
}
.pulse-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 10px #60a5fa, 0 0 20px #60a5fa;
  transform: translateY(-50%);
  animation: pulseParticle 2.5s infinite linear;
}

/* Gradient typography fallback */
.text-gradient {
  background: linear-gradient(135deg, #f3f4f6 10%, #60a5fa 60%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Light Mode Overrides === */
body.light-mode {
  --bg-dark: #f8fafc;
  --bg-card: rgba(255, 255, 255, 0.7);
  --border-card: rgba(15, 23, 42, 0.08);
  --border-hover: rgba(59, 130, 246, 0.25);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --color-accent: #16a34a; /* WhatsApp green 600 */
  --color-accent-hover: #15803d; /* green 700 */
  --color-accent-glow: rgba(22, 163, 74, 0.15);
  --color-purple: #5b21b6; /* Purple 800 - AAA Contrast */
  --color-purple-glow: rgba(91, 33, 182, 0.1);
  --color-green: #16a34a;
  --color-green-glow: rgba(22, 163, 74, 0.18);
  --bg-nav: rgba(248, 250, 252, 0.85); /* Highly readable slate glass */
  --border-nav: rgba(15, 23, 42, 0.08);
}

body.light-mode::before {
  display: none; /* Hide stars in light mode */
}

body.light-mode::after {
  background: radial-gradient(circle, rgba(29, 78, 216, 0.04) 0%, transparent 70%);
}

body.light-mode .bottom-ambient-glow {
  background: radial-gradient(circle, rgba(91, 33, 182, 0.03) 0%, transparent 70%);
}

/* Dynamic active nav item highlights */
body.light-mode nav a {
  transition: all 0.25s ease;
}
body.light-mode nav a.bg-white\/10 {
  background-color: rgba(15, 23, 42, 0.06) !important;
  color: #0f172a !important;
}
body.light-mode nav a.hover\:bg-white\/5:hover {
  background-color: rgba(15, 23, 42, 0.03) !important;
  color: #0f172a !important;
}


body.light-mode .select-dark {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 9l3 3 3-3' stroke='%23334155' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.light-mode .input-dark {
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

body.light-mode .input-dark:focus {
  background-color: #fff;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

body.light-mode .text-gradient {
  background: linear-gradient(135deg, #0f172a 10%, #1d4ed8 60%, #5b21b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body.light-mode .glass-panel {
  box-shadow: 0 8px 30px 0 rgba(15, 23, 42, 0.04);
}

body.light-mode .glass-panel:hover {
  box-shadow: 0 12px 40px 0 rgba(29, 78, 216, 0.06);
}

body.light-mode .btn-outline {
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #334155;
}

body.light-mode .btn-outline:hover {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.15);
  color: #0f172a;
}

body.light-mode .bg-gray-900\/40,
body.light-mode .bg-gray-800\/40,
body.light-mode .bg-black\/20,
body.light-mode .bg-blue-950\/20 {
  background-color: rgba(15, 23, 42, 0.03) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

body.light-mode .text-white {
  color: #0f172a !important;
}

body.light-mode .text-gray-100 {
  color: #0f172a !important;
}

body.light-mode .text-gray-200 {
  color: #1e293b !important;
}

body.light-mode .text-gray-300 {
  color: #334155 !important;
}

body.light-mode .text-gray-400 {
  color: #334155 !important;
}

body.light-mode .text-gray-500 {
  color: #475569 !important;
}

body.light-mode .pricing-section-header {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

body.light-mode #pricing button {
  background-color: transparent;
  color: #334155;
}

body.light-mode #pricing button#cur-usd[style*="background:#4ade80"],
body.light-mode #pricing button#cur-inr[style*="background:#4ade80"],
body.light-mode #pricing button#bill-monthly[style*="background:#4ade80"],
body.light-mode #pricing button#bill-annual[style*="background:#4ade80"] {
  background-color: #16a34a !important;
  color: #fff !important;
}

/* --- Attribute based inline style overrides for full WCAG compliance --- */
body.light-mode [style*="color:#e2e8f0"],
body.light-mode [style*="color: #e2e8f0"],
body.light-mode [style*="color:#f3f4f6"],
body.light-mode [style*="color: #f3f4f6"] {
  color: #0f172a !important;
}

body.light-mode [style*="color:#94a3b8"],
body.light-mode [style*="color: #94a3b8"] {
  color: #334155 !important;
}

body.light-mode [style*="color:#64748b"],
body.light-mode [style*="color: #64748b"] {
  color: #475569 !important;
}

body.light-mode [style*="color:#60a5fa"],
body.light-mode [style*="color: #60a5fa"] {
  color: #16a34a !important;
}

/* Badge specific HSL mappings for high-contrast visibility */
body.light-mode [style*="color:#93c5fd"] {
  color: #16a34a !important;
  background-color: rgba(22, 163, 74, 0.08) !important;
  border-color: rgba(22, 163, 74, 0.2) !important;
}

body.light-mode [style*="color:#86efac"] {
  color: #065f46 !important;
  background-color: rgba(6, 95, 70, 0.08) !important;
  border-color: rgba(6, 95, 70, 0.2) !important;
}

body.light-mode [style*="color:#fca5a5"] {
  color: #991b1b !important;
  background-color: rgba(153, 27, 27, 0.08) !important;
  border-color: rgba(153, 27, 27, 0.2) !important;
}

body.light-mode [style*="color:#fde68a"] {
  color: #854d0e !important;
  background-color: rgba(133, 77, 14, 0.08) !important;
  border-color: rgba(133, 77, 14, 0.2) !important;
}

/* SVG logo and icons mapping for accessibility */
body.light-mode svg path[stroke="#60a5fa"],
body.light-mode svg [stroke="#60a5fa"] {
  stroke: #16a34a !important;
}

body.light-mode svg circle[fill="#60a5fa"],
body.light-mode svg [fill="#60a5fa"] {
  fill: #16a34a !important;
}

/* Light mode table header background override */
body.light-mode [style*="background:#111a35"],
body.light-mode [style*="background: #111a35"] {
  background: rgba(0, 0, 0, 0.04) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Light mode lead detail row background override */
body.light-mode [style*="background:rgba(17,26,53,0.5)"],
body.light-mode [style*="background: rgba(17,26,53,0.5)"] {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* === Solid card (mockup look) === */
.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body:not(.light-mode) .card {
  background: var(--bg-card);
  border-color: var(--border-card);
}

/* Pulsing green connection dot */
.pulse-dot { position: relative; display: inline-block; width: 14px; height: 14px; }
.pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: #22c55e; }
.pulse-dot::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: #22c55e; animation: pulse-ring 1.8s cubic-bezier(.21,.53,.56,.8) infinite; }
@keyframes pulse-ring { 0% { transform: scale(.8); opacity: .8; } 80%,100% { transform: scale(2.2); opacity: 0; } }

/* Equalizer bars */
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.eq span { display: inline-block; width: 3px; background: #16a34a; border-radius: 2px; animation: eq-bar 1s ease-in-out infinite; }
.eq span:nth-child(2){ animation-delay:.15s } .eq span:nth-child(3){ animation-delay:.3s }
.eq span:nth-child(4){ animation-delay:.45s } .eq span:nth-child(5){ animation-delay:.6s }
@keyframes eq-bar { 0%,100% { height: 20%; } 50% { height: 100%; } }

/* Live activity feed rows */
.feed-row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; font-size: 0.875rem; border-top: 1px solid rgba(15,23,42,0.05); animation: feed-slide .35s ease; }
.feed-dot { width: 8px; height: 8px; border-radius: 9999px; background: #cbd5e1; flex: none; }
.feed-dot-lead { background: #22c55e; }
.feed-label { font-size: 0.7rem; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; flex: none; }
.feed-label-lead { color: #16a34a; font-weight: 600; }
.feed-text { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-time { margin-left: auto; color: #cbd5e1; font-size: 0.75rem; flex: none; white-space: nowrap; }
@keyframes feed-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }