/* ============================================
   EVSELab Common Styles
   ============================================ */

/* Tech Grid Background */
.tech-grid {
  background-size: 40px 40px;
  background-image: linear-gradient(to right, #1e293b 1px, transparent 1px),
                    linear-gradient(to bottom, #1e293b 1px, transparent 1px);
}

/* Text Glow */
.text-glow { text-shadow: 0 0 20px rgba(217, 249, 157, 0.3); }

/* Dropdown Menu */
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown:hover .dropdown-arrow { transform: rotate(180deg); }
.dropdown-menu {
  z-index: 9999 !important;
  background: #fff !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15) !important;
}

/* Card Hover Effects */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); }
.solution-card, .service-card, .tech-card, .job-card, .contact-card { transition: all 0.3s ease; }
.solution-card:hover, .service-card:hover, .tech-card:hover, .job-card:hover, .contact-card:hover { transform: translateY(-4px); }

/* CTA Gradient */
.cta-gradient {
  background: linear-gradient(135deg, #0891B2, #7C3AED);
  box-shadow: 0 10px 40px -10px rgba(8, 145, 178, 0.5), 0 0 20px -5px rgba(124, 58, 237, 0.3);
}
.cta-gradient:hover { box-shadow: 0 15px 50px -10px rgba(8, 145, 178, 0.6), 0 0 30px -5px rgba(124, 58, 237, 0.4); }

/* Language Toggle */
.lang-toggle { display: flex; align-items: center; background: #F3F4F6; border: 1px solid #E5E7EB; border-radius: 9999px; padding: 2px; gap: 2px; }
.lang-btn { padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: 9999px; transition: all 0.2s; color: #6B7280; background: transparent; border: none; cursor: pointer; }
.lang-btn:hover { color: #111827; }
.lang-btn.active { background: #0891B2; color: #fff; }

/* Gradient Text */
.gradient-text, .text-gradient {
  background: linear-gradient(135deg, #0891B2, #7C3AED);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Navigation Links */
a.nav-link { color: #111827 !important; }
a.nav-link:hover { color: #0891B2 !important; }

/* Active Navigation */
.nav-active, a.nav-link.nav-active { color: #0891B2 !important; font-weight: 700 !important; }

/* Mobile Menu */
.mobile-dropdown-btn.active svg { transform: rotate(180deg); }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeInUp { animation: fadeInUp 0.6s ease-out forwards; }

/* ============================================
   APQP Phase Circles (NPD Roadmap)
   ============================================ */
.phase-circle {
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.phase-circle:hover {
  transform: scale(1.5);
  filter: drop-shadow(0 6px 20px rgba(217, 249, 157, 0.5));
  z-index: 100;
}

.phase-circle circle {
  transition: all 0.3s ease;
}

.phase-circle:hover circle {
  stroke: #D9F99D;
  stroke-width: 3;
}

/* Transform origins for phase circles */
.phase-circle-mockup { transform-origin: 200px 478px; }
.phase-circle-poc { transform-origin: 280px 441px; }
.phase-circle-evt1 { transform-origin: 400px 398px; }
.phase-circle-evtx { transform-origin: 520px 359px; }
.phase-circle-dvt1 { transform-origin: 640px 320px; }
.phase-circle-dvtx { transform-origin: 780px 281px; }
.phase-circle-pvt { transform-origin: 960px 247px; }
.phase-circle-mp { transform-origin: 1140px 213px; }

/* Phase Tooltip */
.phase-tooltip {
  position: fixed;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #D9F99D;
  border-radius: 8px;
  padding: 12px 16px;
  color: white;
  font-size: 13px;
  line-height: 1.6;
  max-width: 350px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(217, 249, 157, 0.3);
  white-space: pre-line;
}

.phase-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.phase-tooltip .tooltip-title {
  font-weight: 700;
  color: #D9F99D;
  margin-bottom: 8px;
  font-size: 14px;
}

.phase-tooltip div {
  color: #E2E8F0;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-line;
}

/* Sample Box Hover */
.sample-box {
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: pointer;
}

.sample-box rect {
  transition: all 0.3s ease;
}

.sample-box:hover {
  transform: scale(1.4);
  filter: drop-shadow(0 6px 20px rgba(217, 249, 157, 0.5));
  z-index: 200;
}

.sample-box:hover rect {
  stroke: #D9F99D;
  stroke-width: 2;
}

/* Transform origin for sample boxes */
.sample-box-a {
  transform-origin: 458px 495px;
}

.sample-box-b {
  transform-origin: 705px 420px;
}

.sample-box-c {
  transform-origin: 960px 340px;
}