/* ==========================================================================
   Parcel Wave Zimbabwe - Global CSS Stylesheet
   Zero-Build Native Web Styles
   ========================================================================== */

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Continuous Marquee Animation */
.marquee-track-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  position: relative;
  min-width: 0;
}

marquee.app-marquee {
  width: 100%;
  overflow: hidden;
  display: block;
}

.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee-scroll 22s linear infinite;
  will-change: transform;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Mobile Navigation Drawer Overlay */
#mobileDrawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999999;
}

#mobileDrawer.is-open {
  display: block !important;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tracking Progress Bar & Timeline */
.step-active {
  background-color: #2563eb;
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);
}

.step-complete {
  background-color: #059669;
  border-color: #34d399;
  color: #ffffff;
}

.step-inactive {
  background-color: #1e293b;
  border-color: #334155;
  color: #64748b;
}

/* Print Styles for Invoices and Waybill Shipping Labels */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }
  header, footer, .no-print, #alertContainer, .bg-slate-950, #mobileNav {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  .print-card {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
  }
}