/* Mek-Tech Neon Theme — Global Visual Layer */

@keyframes neonPulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px var(--accent)); }
  50% { opacity: 0.85; filter: drop-shadow(0 0 18px var(--accent)); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

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

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(0,212,255,0.3); opacity: 1; }
  50% { box-shadow: 0 0 14px var(--accent), 0 0 28px rgba(0,212,255,0.5); opacity: 0.85; }
}

@keyframes neon-border-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Page background ── */
body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -15%, rgba(0, 212, 255, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 95% 90%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 5% 70%, rgba(0, 255, 136, 0.06) 0%, transparent 50%) !important;
}

/* ── Navbar ── */
.navbar {
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 1px 0 rgba(0, 212, 255, 0.1), 0 4px 32px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 212, 255, 0.04) !important;
}

.nav-brand:hover { color: var(--accent) !important; text-shadow: 0 0 12px rgba(0,212,255,0.5); }

/* ── Sidebar ── */
.sidebar {
  border-right: 1px solid rgba(0, 212, 255, 0.15) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2), inset -1px 0 0 rgba(0, 212, 255, 0.05) !important;
}

.sidebar .sb-brand {
  background: linear-gradient(135deg, transparent, rgba(0, 212, 255, 0.06)) !important;
  border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
}

.brand-dot, .sidebar .sb-brand h2 .brand-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(0,212,255,0.4) !important;
  animation: pulse-glow 2s ease-in-out infinite !important;
}

.sb-item.active {
  color: var(--accent) !important;
  background: rgba(0, 212, 255, 0.1) !important;
  box-shadow: inset 3px 0 0 var(--accent), 0 0 16px rgba(0, 212, 255, 0.08) !important;
}

.sb-item.active .sb-icon svg,
.sb-item:hover .sb-icon svg {
  filter: drop-shadow(0 0 5px var(--accent));
}

.sb-item:hover {
  background: rgba(0, 212, 255, 0.06) !important;
  color: var(--text) !important;
}

/* ── Cards & KPIs ── */
.card, .kpi-card, .client-card, .integration-card, .provider-card,
.stat-card, .advice-card, .task-item, .rm-card, .nd-card, .login-card {
  border: 1px solid rgba(0, 212, 255, 0.12) !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover, .kpi-card:hover, .client-card:hover, .stat-card:hover,
.advice-card:hover, .task-item:hover, .rm-card:hover, .nd-card:hover {
  border-color: rgba(0, 212, 255, 0.35) !important;
  box-shadow: 0 0 28px rgba(0, 212, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-2px);
}

.kpi-card .kpi-num {
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.25) !important;
}

.kpi-card.accent .kpi-num { color: var(--accent) !important; text-shadow: 0 0 24px rgba(0, 212, 255, 0.55) !important; }
.kpi-card.green .kpi-num { text-shadow: 0 0 24px rgba(0, 255, 136, 0.45) !important; }
.kpi-card.purple .kpi-num { text-shadow: 0 0 24px rgba(168, 85, 247, 0.45) !important; }
.kpi-card.orange .kpi-num { text-shadow: 0 0 24px rgba(255, 179, 71, 0.45) !important; }

/* ── Buttons ── */
.btn-primary, .login-btn, button.btn-primary {
  background: linear-gradient(135deg, #00d4ff, #0099cc) !important;
  border: 1px solid rgba(0, 212, 255, 0.4) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
  color: #fff !important;
}

.btn-primary:hover, .login-btn:hover {
  box-shadow: 0 0 36px rgba(0, 212, 255, 0.5), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-1px);
}

/* ── Status badges ── */
.status-badge.lead { border-color: var(--accent) !important; color: var(--accent) !important; box-shadow: 0 0 8px rgba(0,212,255,0.2); }
.status-badge.active { border-color: var(--green) !important; color: var(--green) !important; box-shadow: 0 0 8px rgba(0,255,136,0.2); }

/* ── Form focus ── */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15), 0 0 20px rgba(0, 212, 255, 0.1) !important;
  outline: none !important;
}

/* ── Tables ── */
.data-table th { background: rgba(0, 212, 255, 0.04) !important; }
.data-table tr:hover td { background: rgba(0, 212, 255, 0.04) !important; }

/* ── Links ── */
.link, a.link { color: var(--accent) !important; }
.link:hover { text-shadow: 0 0 8px rgba(0,212,255,0.4); }

/* ── CRM bar ── */
.crm-bar {
  background: rgba(0, 212, 255, 0.07) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.06) !important;
  border-radius: 10px !important;
}

/* ── Page headers ── */
.page-hdr h1, .dash-header h1 {
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Neon top accent on cards ── */
.kpi-card::after, .client-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}

.kpi-card { position: relative; overflow: hidden; }
.kpi-card:hover::after { opacity: 1; }

.fade-in-up { animation: fadeInUp 0.45s ease-out forwards; }

.designer-frame {
  border: 1px solid rgba(0, 212, 255, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.1) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.45); }