* {
      scrollbar-width: thin;
      scrollbar-color: #94a3b8 transparent
  }

  ::-webkit-scrollbar {
      width: 6px;
      height: 6px
  }

  ::-webkit-scrollbar-track {
      background: transparent
  }

  ::-webkit-scrollbar-thumb {
      background: #94a3b8;
      border-radius: 3px
  }

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

  body {
      font-family: 'Inter', sans-serif
  }

  .font-jakarta {
      font-family: 'Plus Jakarta Sans', sans-serif
  }

  .sidebar-link {
      transition: all .2s ease
  }

  .sidebar-link:hover {
      background: rgba(59, 130, 246, 0.08)
  }

  .sidebar-link.active {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
      color: #3b82f6;
      border-right: 3px solid #3b82f6
  }

  .dark .sidebar-link:hover {
      background: rgba(59, 130, 246, 0.15)
  }

  .dark .sidebar-link.active {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1))
  }

  .kpi-card {
      transition: all .3s ease
  }

  .kpi-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15)
  }

  .dark .kpi-card:hover {
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4)
  }

  .status-badge {
      font-size: .7rem;
      padding: .2rem .6rem;
      border-radius: 9999px;
      font-weight: 600;
      letter-spacing: .025em;
      white-space: nowrap
  }

  .toast-enter {
      animation: toastIn .4s ease
  }

  .toast-exit {
      animation: toastOut .3s ease forwards
  }

  @keyframes toastIn {
      from {
          transform: translateX(100%);
          opacity: 0
      }

      to {
          transform: translateX(0);
          opacity: 1
      }
  }

  @keyframes toastOut {
      from {
          transform: translateX(0);
          opacity: 1
      }

      to {
          transform: translateX(100%);
          opacity: 0
      }
  }

  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(16px)
      }

      to {
          opacity: 1;
          transform: translateY(0)
      }
  }

  .fade-in-up {
      animation: fadeInUp .5s ease forwards
  }

  .fade-in-up-d1 {
      animation-delay: .05s;
      opacity: 0
  }

  .fade-in-up-d2 {
      animation-delay: .1s;
      opacity: 0
  }

  .fade-in-up-d3 {
      animation-delay: .15s;
      opacity: 0
  }

  .fade-in-up-d4 {
      animation-delay: .2s;
      opacity: 0
  }

  @keyframes pulseDot {

      0%,
      100% {
          opacity: 1
      }

      50% {
          opacity: .4
      }
  }

  .pulse-dot {
      animation: pulseDot 2s ease-in-out infinite
  }

  .dropdown-panel {
      transform: scale(.95);
      opacity: 0;
      pointer-events: none;
      transition: all .2s ease
  }

  .dropdown-panel.open {
      transform: scale(1);
      opacity: 1;
      pointer-events: auto
  }

  .modal-overlay {
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease
  }

  .modal-overlay.open {
      opacity: 1;
      pointer-events: auto
  }

  .modal-content {
      transform: scale(.95) translateY(10px);
      transition: transform .3s ease
  }

  .modal-overlay.open .modal-content {
      transform: scale(1) translateY(0)
  }

  @media(max-width:1023px) {
      .sidebar {
          transform: translateX(-100%);
          transition: transform .3s ease
      }

      .sidebar.open {
          transform: translateX(0)
      }
  }

  .overlay {
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease
  }

  .overlay.open {
      opacity: 1;
      pointer-events: auto
  }

  .tab-btn {
      transition: all .2s ease;
      cursor: pointer
  }

  .tab-btn.active {
      background: white;
      color: #2563eb;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
  }

  .dark .tab-btn.active {
      background: #334155;
      color: #60a5fa
  }

  .action-btn {
      transition: all .15s ease;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center
  }

  .action-btn:hover {
      transform: scale(1.1)
  }

  #trackingMap {
      z-index: 1
  }

  .leaflet-container {
      font-family: 'Inter', sans-serif
  }

  .custom-marker {
      background: none;
      border: none
  }

  .marker-pin {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
      color: white;
      font-size: 16px;
      position: relative
  }

  .marker-pin::after {
      content: '';
      position: absolute;
      bottom: -7px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent
  }

  .marker-pin.green {
      background: #10b981
  }

  .marker-pin.green::after {
      border-top: 9px solid #10b981
  }

  .marker-pin.amber {
      background: #f59e0b
  }

  .marker-pin.amber::after {
      border-top: 9px solid #f59e0b
  }

  .marker-pin.blue {
      background: #3b82f6
  }

  .marker-pin.blue::after {
      border-top: 9px solid #3b82f6
  }

  .marker-pin.red {
      background: #ef4444
  }

  .marker-pin.red::after {
      border-top: 9px solid #ef4444
  }

  .marker-pin.purple {
      background: #8b5cf6
  }

  .marker-pin.purple::after {
      border-top: 9px solid #8b5cf6
  }

  .marker-pulse {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      animation: markerPulse 2s infinite
  }

  @keyframes markerPulse {
      0% {
          transform: scale(1);
          opacity: .6
      }

      100% {
          transform: scale(2.5);
          opacity: 0
      }
  }

  .shipment-card {
      transition: all .2s ease;
      cursor: pointer;
      border: 2px solid transparent
  }

  .shipment-card:hover {
      border-color: rgba(59, 130, 246, .3);
      transform: translateX(4px)
  }

  .shipment-card.selected {
      border-color: #3b82f6;
      background: rgba(59, 130, 246, .05)
  }

  .dark .shipment-card.selected {
      background: rgba(59, 130, 246, .1)
  }

  .tracking-sidebar {
      transition: all .3s ease
  }

  .edit-field {
      transition: all .2s ease
  }

  .edit-field:focus {
      box-shadow: 0 0 0 3px rgba(59, 130, 246, .2)
  }

  @media(prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
          animation-duration: .01ms !important;
          transition-duration: .01ms !important
      }
  }