/* ==========================================================================
   APLAS Safety Fast-Pass & Visitor Training Portal
   Mobile-First Industrial Design System & Realistic Visual Experience
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700;800&display=swap');

:root {
  --aplas-blue: #003399;
  --aplas-navy: #001f5c;
  --tech-dark: #071329;
  --tech-surface: #0b192e;
  --tech-card: #10233f;
  --tech-border: rgba(56, 189, 248, 0.18);
  
  --safety-amber: #f59e0b;
  --safety-amber-glow: rgba(245, 158, 11, 0.4);
  --compliance-green: #10b981;
  --compliance-green-glow: rgba(16, 185, 129, 0.4);
  --emergency-red: #ef4444;
  --emergency-red-glow: rgba(239, 68, 68, 0.4);
  --electric-blue: #38bdf8;
  
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  background-color: var(--tech-dark);
  color: #f1f5f9;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 10% 10%, rgba(0, 51, 153, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(16, 185, 129, 0.2) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(7, 19, 41, 0.98) 0%, var(--tech-dark) 100%);
  background-attachment: fixed;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--tech-dark);
}
::-webkit-scrollbar-thumb {
  background: #1e3a66;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--electric-blue);
}

/* Glassmorphism Surface */
.glass-panel {
  background: rgba(11, 25, 46, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--tech-border);
  box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.45);
}

.glass-card {
  background: rgba(16, 35, 63, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 51, 153, 0.3);
}

/* Hero Image Container with Vignette */
.hero-image-box {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}
.hero-image-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 19, 41, 0.1) 0%, rgba(7, 19, 41, 0.85) 100%);
  pointer-events: none;
}

/* Glowing Badges & Pulse Animations */
.pulse-green {
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseGreenAnim 2s infinite;
}
@keyframes pulseGreenAnim {
  0% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pulse-red {
  animation: pulseRedAnim 1.8s infinite;
}
@keyframes pulseRedAnim {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8); }
  70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Shake Animation for Hazard Traps */
.shake-hazard {
  animation: shakeAnim 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shakeAnim {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* 3D Holographic Pass Card */
.holographic-card {
  position: relative;
  background: linear-gradient(135deg, #001f5c 0%, #003399 45%, #0c2652 100%);
  border: 2px solid rgba(56, 189, 248, 0.45);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(0, 51, 153, 0.45);
}

.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(56, 189, 248, 0.3) 50%,
    rgba(245, 158, 11, 0.2) 55%,
    rgba(16, 185, 129, 0.25) 60%,
    transparent 70%
  );
  transform: rotate(25deg);
  pointer-events: none;
  animation: holoSheen 6s infinite linear;
}

@keyframes holoSheen {
  0% { transform: translateY(-30%) rotate(25deg); }
  100% { transform: translateY(30%) rotate(25deg); }
}

/* Water Ripple Animation for Handwashing Step */
.water-ripple {
  position: relative;
  overflow: hidden;
}
.water-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 10%, transparent 70%);
  animation: waterRippleAnim 2s infinite ease-out;
  pointer-events: none;
}
@keyframes waterRippleAnim {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Avatar Dropzone & Slots */
.avatar-slot {
  border: 2px dashed rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.avatar-slot.equipped {
  border-style: solid;
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}
.avatar-slot.drag-over {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.25);
  transform: scale(1.02);
}

/* Video Canvas Simulated Player */
.video-screen {
  background: #000000;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Mobile-Friendly Bottom Sticky Bar */
.mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: rgba(7, 19, 41, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(56, 189, 248, 0.2);
  padding: 0.75rem 1rem;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
}

/* Mobile & Touch Optimizations */
@media (max-width: 640px) {
  body {
    padding-bottom: 5rem;
  }
  .touch-tap-target {
    min-height: 48px;
  }
  .step-progress-item span {
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   Digital Vibrant Cyberpunk / High-Tech Typography & Glowing Effects
   ========================================================================== */
.digital-gradient-title {
  background: linear-gradient(135deg, #ffd000 0%, #ff4d6d 26%, #c084fc 52%, #22d3ee 78%, #34d399 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: digitalTextFlow 7s ease-in-out infinite;
  filter: drop-shadow(0 2px 14px rgba(255, 77, 109, 0.45)) drop-shadow(0 0 25px rgba(34, 211, 238, 0.35));
}

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

.digital-badge-glow {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.15), rgba(168, 85, 247, 0.2), rgba(255, 77, 109, 0.15));
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.25), inset 0 0 12px rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
}

/* ==========================================================================
   High-Fidelity Print Stylesheet (For ID Badges & Entry Fast-Passes)
   ========================================================================== */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  header, footer, nav, #topStatusBar, #stepProgressContainer, 
  .no-print, button, .admin-trigger, #toast-container, .modal-backdrop, .mobile-bottom-bar {
    display: none !important;
  }

  #step6Container {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .holographic-card {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #003399 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    page-break-inside: avoid !important;
  }

  .holographic-card::before {
    display: none !important;
  }

  .print-badge-header {
    background-color: #003399 !important;
    color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .qr-svg {
    border: 1px solid #cbd5e1 !important;
  }
}