* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Inter', sans-serif;
       overflow-x: hidden;
   }

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

   /* Scrollbar */
   ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
   }

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

   ::-webkit-scrollbar-thumb {
       background: #4a4a5a;
       border-radius: 3px;
   }

   ::-webkit-scrollbar-thumb:hover {
       background: #6a6a7a;
   }

   .light ::-webkit-scrollbar-thumb {
       background: #c0c0c0;
   }

   .light ::-webkit-scrollbar-thumb:hover {
       background: #a0a0a0;
   }

   /* Sidebar scrollbar */
   .sidebar-scroll::-webkit-scrollbar {
       width: 4px;
   }

   .sidebar-scroll::-webkit-scrollbar-track {
       background: transparent;
   }

   .sidebar-scroll::-webkit-scrollbar-thumb {
       background: rgba(255, 255, 255, 0.1);
       border-radius: 2px;
   }

   /* Sidebar */
   .sidebar {
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .sidebar-overlay {
       transition: opacity 0.3s ease;
   }

   /* Cards glow */
   .card-glow {
       position: relative;
       overflow: hidden;
   }

   .card-glow::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
       opacity: 0;
       transition: opacity 0.5s ease;
   }

   .card-glow:hover::before {
       opacity: 1;
   }

   /* Dropdown animation */
   .dropdown-enter {
       animation: dropdownIn 0.2s ease forwards;
   }

   .dropdown-exit {
       animation: dropdownOut 0.15s ease forwards;
   }

   @keyframes dropdownIn {
       from {
           opacity: 0;
           transform: translateY(-8px) scale(0.96);
       }

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

   @keyframes dropdownOut {
       from {
           opacity: 1;
           transform: translateY(0) scale(1);
       }

       to {
           opacity: 0;
           transform: translateY(-8px) scale(0.96);
       }
   }

   /* Modal */
   .modal-overlay {
       transition: opacity 0.3s ease;
   }

   .modal-content {
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
   }

   /* Pulse dot */
   .pulse-dot {
       animation: pulse 2s infinite;
   }

   @keyframes pulse {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.5;
       }
   }

   /* Gradient border */
   .gradient-border {
       position: relative;
       border-radius: 12px;
   }

   .gradient-border::before {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: 12px;
       padding: 1px;
       background: linear-gradient(135deg, #8B5CF6, #06B6D4, #8B5CF6);
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .gradient-border:hover::before {
       opacity: 1;
   }

   /* Stat card hover */
   .stat-card {
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .stat-card:hover {
       transform: translateY(-2px);
   }

   /* Nav item */
   .nav-item {
       transition: all 0.2s ease;
       position: relative;
   }

   .nav-item.active {
       background: rgba(139, 92, 246, 0.12);
   }

   .nav-item.active::before {
       content: '';
       position: absolute;
       left: 0;
       top: 50%;
       transform: translateY(-50%);
       width: 3px;
       height: 60%;
       background: linear-gradient(to bottom, #8B5CF6, #06B6D4);
       border-radius: 0 3px 3px 0;
   }

   .light .nav-item.active {
       background: rgba(139, 92, 246, 0.08);
   }

   /* Table row hover */
   .table-row {
       transition: background 0.15s ease;
   }

   /* Chart container */
   .chart-container {
       position: relative;
       min-height: 300px;
   }

   /* Notification badge */
   .notif-badge {
       position: absolute;
       top: -2px;
       right: -2px;
       width: 18px;
       height: 18px;
       background: #EF4444;
       border-radius: 50%;
       font-size: 10px;
       font-weight: 700;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       border: 2px solid;
       animation: badgePulse 2s infinite;
   }

   .dark .notif-badge {
       border-color: #0f0f1a;
   }

   .light .notif-badge {
       border-color: #ffffff;
   }

   @keyframes badgePulse {

       0%,
       100% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.1);
       }
   }

   /* Mini sparkline area */
   .sparkline-up {
       color: #10B981;
   }

   .sparkline-down {
       color: #EF4444;
   }

   /* Active tab */
   .tab-btn.active {
       background: linear-gradient(135deg, #8B5CF6, #7C3AED);
       color: white;
       box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
   }

   /* Smooth transitions for theme */
   .theme-transition,
   .theme-transition *,
   .theme-transition *::before,
   .theme-transition *::after {
       transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
   }

   /* Mobile fixes */
   @media (max-width: 767px) {

       .notif-panel,
       .messenger-panel,
       .profile-panel,
       .quick-panel,
       .search-panel {
           position: fixed !important;
           left: 8px !important;
           right: 8px !important;
           width: auto !important;
           max-width: calc(100vw - 16px) !important;
       }

       .notif-panel,
       .messenger-panel {
           top: 60px !important;
       }

       .profile-panel {
           top: 60px !important;
           right: 8px !important;
           left: auto !important;
           width: 260px !important;
       }
   }

   /* Loading skeleton */
   .skeleton {
       background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.05) 50%, transparent 75%);
       background-size: 200% 100%;
       animation: shimmer 1.5s infinite;
   }

   @keyframes shimmer {
       0% {
           background-position: 200% 0;
       }

       100% {
           background-position: -200% 0;
       }
   }

   /* Mobile fixes - Prevents panels from going off-screen */
   @media (max-width: 640px) {

       .notif-panel,
       .messenger-panel,
       .profile-panel,
       .quick-panel,
       .search-panel {
           position: fixed !important;
           top: 70px !important;
           left: 12px !important;
           right: 12px !important;
           width: auto !important;
           max-width: calc(100vw - 24px) !important;
           z-index: 100 !important;
           transform-origin: top center;
       }

       /* Fix profile image distortion on very small screens */
       .profile-btn-img {
           min-width: 32px !important;
           flex-shrink: 0 !important;
       }
   }