/* ==========================================================================
   JalongFood • jalong.io.vn — Custom Design System & Real-time Animations
   Course Project: Database Design (3NF, Stored Procedures, Triggers, Pool, SSE/WS)
   ========================================================================== */

:root {
  --brand-primary: #f97316;       /* Orange 500 */
  --brand-primary-dark: #ea580c;  /* Orange 600 */
  --brand-secondary: #0f172a;     /* Slate 900 */
  --status-online: #10b981;       /* Emerald 500 */
  --status-offline: #ef4444;      /* Red 500 */
  --status-warning: #f59e0b;      /* Amber 500 */
  --inspector-accent: #6366f1;    /* Indigo 500 */
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-mono-code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ==========================================================================
   Glassmorphism & Surface Utilities
   ========================================================================== */
.glass-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-dark {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ==========================================================================
   Custom Scrollbars
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark-scrollbar::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.dark-scrollbar::-webkit-scrollbar-track {
  background: #0f172a;
  border-radius: 9999px;
}

.dark-scrollbar::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}

.dark-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Hide scrollbar for horizontal category pills on mobile */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   Real-time Live Update Animations (SSE / WebSocket / Trigger Events)
   ========================================================================== */
@keyframes pulseRing {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes pulseRingRed {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.75);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 9px rgba(239, 68, 68, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.pulse-online {
  animation: pulseRing 2s infinite;
}

.pulse-offline {
  animation: pulseRingRed 1.3s infinite;
}

/* Flash card or container when updated via real-time push */
@keyframes flashHighlight {
  0% {
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.55), 0 10px 25px -5px rgba(249, 115, 22, 0.25);
    transform: translateY(-2px);
    background-color: #fff7ed;
  }
  50% {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.45);
    background-color: #ecfdf5;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    transform: translateY(0);
  }
}

.live-flash {
  animation: flashHighlight 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flashRow {
  0% {
    background-color: rgba(99, 102, 241, 0.28);
  }
  40% {
    background-color: rgba(16, 185, 129, 0.22);
  }
  100% {
    background-color: transparent;
  }
}

.live-flash-row {
  animation: flashRow 1.8s ease-out;
}

@keyframes stepBounce {
  0%, 100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2);
  }
  70% {
    transform: scale(0.95);
  }
}

.step-active-bounce {
  animation: stepBounce 0.65s ease-out;
}

/* ==========================================================================
   DB Emergency Offline Hazard Banner
   ========================================================================== */
@keyframes hazardSlide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

.db-offline-banner {
  background-color: #dc2626;
  background-image: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.14) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, 0.14) 50%,
    rgba(0, 0, 0, 0.14) 75%,
    transparent 75%,
    transparent
  );
  background-size: 40px 40px;
  animation: hazardSlide 1.4s linear infinite;
}

/* ==========================================================================
   Order Tracker 4-Step Progress Bar
   ========================================================================== */
.tracker-connector {
  position: relative;
  height: 4px;
  background-color: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  transition: background-color 0.4s ease;
}

.tracker-connector-fill {
  height: 100%;
  background: linear-gradient(90deg, #f97316, #10b981);
  border-radius: 9999px;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Toast Notifications
   ========================================================================== */
@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastExit {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(28px) scale(0.95);
  }
}

.toast-enter {
  animation: toastEnter 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-exit {
  animation: toastExit 0.22s ease-in forwards;
}

/* ==========================================================================
   Modal & Drawer Transitions
   ========================================================================== */
@keyframes modalPop {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-pop {
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   SQL & Trigger Live Stream Terminal Styling
   ========================================================================== */
.sql-terminal {
  background: #090d16;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
}

.sql-entry {
  border-left: 3px solid transparent;
  transition: background-color 0.2s ease;
}

.sql-entry:hover {
  background-color: rgba(30, 41, 59, 0.55);
}

.sql-entry-query {
  border-left-color: #38bdf8;
}

.sql-entry-trigger {
  border-left-color: #a855f7;
  background-color: rgba(168, 85, 247, 0.07);
}

.sql-entry-error {
  border-left-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.sql-entry-system {
  border-left-color: #10b981;
}

.sql-kw {
  color: #38bdf8;
  font-weight: 600;
}

.sql-str {
  color: #fde047;
}

.sql-num {
  color: #fb923c;
}

.sql-fn {
  color: #c084fc;
  font-weight: 600;
}

/* ==========================================================================
   Skeleton Shimmer
   ========================================================================== */
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Card hover polish */
.food-card {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}

.food-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -8px rgba(15, 23, 42, 0.1);
}

/* ==========================================================================
   CYBERPUNK NEON GLOW & CHOP CHOP DESIGN SYSTEM (SUB-AGENT 1)
   ========================================================================== */
@keyframes neonFlicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.8)) drop-shadow(0 0 20px rgba(0, 240, 255, 0.4));
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.35;
    filter: none;
  }
}

@keyframes neonPulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.55), 0 0 35px rgba(244, 63, 94, 0.35);
    border-color: rgba(249, 115, 22, 0.85);
  }
  50% {
    box-shadow: 0 0 28px rgba(249, 115, 22, 0.95), 0 0 55px rgba(244, 63, 94, 0.65);
    border-color: rgba(255, 183, 3, 1);
  }
}

@keyframes cyberFlashSale {
  0%, 100% {
    background-position: 0% 50%;
    transform: scale(1);
  }
  50% {
    background-position: 100% 50%;
    transform: scale(1.04);
  }
}

@keyframes radarPulse {
  0% {
    transform: scale(0.85);
    opacity: 1;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes badgeBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(0.9);
  }
}

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

@keyframes neonBorderRotate {
  0% {
    border-color: rgba(249, 115, 22, 0.7);
  }
  33% {
    border-color: rgba(0, 240, 255, 0.7);
  }
  66% {
    border-color: rgba(244, 63, 94, 0.7);
  }
  100% {
    border-color: rgba(249, 115, 22, 0.7);
  }
}

.neon-flicker-text {
  animation: neonFlicker 4s infinite;
}

.neon-pulse-btn {
  animation: neonPulseGlow 2s infinite ease-in-out;
}

.cyber-flash-badge {
  background: linear-gradient(135deg, #f72585, #7209b7, #3a0ca3, #4361ee, #4cc9f0);
  background-size: 300% 300%;
  animation: cyberFlashSale 3s ease infinite;
}

.blink-dot {
  animation: badgeBlink 1.1s infinite;
}

.cyber-float {
  animation: cyberFloating 3.5s ease-in-out infinite;
}

.radar-wave {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(0, 240, 255, 0.6);
  animation: radarPulse 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.cyber-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cyber-card:hover {
  transform: translateY(-5px);
  border-color: rgba(249, 115, 22, 0.6);
  box-shadow: 0 14px 32px -10px rgba(249, 115, 22, 0.35), 0 0 18px rgba(249, 115, 22, 0.2);
}

.cyber-hero-glow {
  background: radial-gradient(circle at 50% 50%, rgba(249, 115, 22, 0.16) 0%, rgba(244, 63, 94, 0.08) 45%, transparent 70%);
}

.cyber-badge-pulse {
  animation: neonBorderRotate 4s linear infinite;
}

/* ==========================================================================
   LIVE DELIVERY MAP ANIMATIONS
   ========================================================================== */
@keyframes routeDashFlow {
  from {
    stroke-dashoffset: 40;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.route-dash-glow {
  animation: routeDashFlow 1.1s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 123, 0, 0.85)) drop-shadow(0 0 14px rgba(255, 123, 0, 0.45));
}

@keyframes shipperVibrate {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-2px) rotate(-1.5deg);
  }
  75% {
    transform: translateY(1.5px) rotate(1.5deg);
  }
}

.shipper-bike-icon {
  animation: shipperVibrate 0.32s ease-in-out infinite;
}