* {
       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 0.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));
   }

   .glass-card {
       background: rgba(255, 255, 255, 0.7);
       backdrop-filter: blur(12px);
       border: 1px solid rgba(255, 255, 255, 0.6);
   }

   .dark .glass-card {
       background: rgba(30, 41, 59, 0.7);
       border: 1px solid rgba(51, 65, 85, 0.5);
   }

   .kpi-card {
       transition: all 0.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: 0.7rem;
       padding: 0.2rem 0.6rem;
       border-radius: 9999px;
       font-weight: 600;
       letter-spacing: 0.025em;
       white-space: nowrap;
   }

   .toast-enter {
       animation: toastIn 0.4s ease;
   }

   .toast-exit {
       animation: toastOut 0.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 0.5s ease forwards;
   }

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

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

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

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

   @keyframes pulse-dot {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.4;
       }
   }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   #liveMap {
       z-index: 1;
   }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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