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

  body {
      font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  }

  [data-lucide] {
      width: 1em;
      height: 1em;
      display: inline-block;
      vertical-align: middle;
  }

  svg {
      display: inline-block;
      vertical-align: middle;
  }

  /* Global overflow fix */
  html,
  body {
      overflow-x: hidden !important;
      max-width: 100vw !important;
  }

  .dark body {
      background: linear-gradient(180deg, #0b1223 0%, #141d33 100%);
      background-attachment: fixed;
  }

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

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

  ::-webkit-scrollbar-thumb {
      background: #CBD5E1;
      border-radius: 50px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: #94A3B8;
  }

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

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

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

  .sidebar-scroll::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.3);
      border-radius: 50px;
  }

  .sidebar {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sidebar-collapsed {
      width: 80px !important;
  }

  .sidebar-collapsed .sidebar-text {
      display: none;
  }

  .sidebar-collapsed .sidebar-logo-text {
      display: none;
  }

  .sidebar-collapsed .sidebar-badge {
      display: none;
  }

  .sidebar-collapsed .sidebar-item {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
  }

  .sidebar-collapsed .sidebar-header {
      display: none;
  }

  .sidebar-collapsed .sidebar-close-btn {
      display: none;
  }

  .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(6px);
      z-index: 40;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
  }

  .sidebar-overlay.active {
      opacity: 1;
      visibility: visible;
  }

  .ripple {
      position: relative;
      overflow: hidden;
  }

  .ripple::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10.01%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 0.5s, opacity 1s;
  }

  .ripple:active::after {
      transform: scale(0, 0);
      opacity: 0.3;
      transition: 0s;
  }

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

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

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

  .gradient-text {
      background: linear-gradient(135deg, #6366F1, #22D3EE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
  }

  .credit-card {
      background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #06B6D4 100%);
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
  }

  .credit-card.card-2 {
      background: linear-gradient(135deg, #0891B2 0%, #059669 50%, #10B981 100%);
  }

  .credit-card.card-3 {
      background: linear-gradient(135deg, #DC2626 0%, #F59E0B 50%, #EAB308 100%);
  }

  .credit-card::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  }

  .notification-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      background: #EF4444;
      color: white;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 2px solid white;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
  }

  .dark .notification-badge {
      border-color: #141d33;
      box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
  }

  .menu-active {
      background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(6, 182, 212, 0.1));
      color: #4F46E5;
      border-right: 3px solid #4F46E5;
  }

  .dark .menu-active {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(34, 211, 238, 0.08));
      color: #A5B4FC;
      border-right: 3px solid #818CF8;
      box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.1);
  }

  .dropdown-menu {
      transform-origin: top right;
      transform: scale(0.95) translateY(-10px);
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
  }

  .dropdown-menu.active {
      transform: scale(1) translateY(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
  }

  .dark .premium-dropdown {
      background: linear-gradient(180deg, #1e2942 0%, #182238 100%);
      border: 1px solid rgba(129, 140, 248, 0.12);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.03);
  }

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

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

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

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

  .toast-enter {
      animation: slideInRight 0.3s ease forwards;
  }

  .toast-exit {
      animation: slideOutRight 0.3s ease forwards;
  }

  .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(8px);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      padding: 16px;
  }

  .modal-overlay.active {
      opacity: 1;
      visibility: visible;
  }

  .modal-content {
      transform: scale(0.9) translateY(20px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

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

  .status-badge {
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 12px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
  }

  .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }

  .card-slider {
      overflow: hidden;
      position: relative;
  }

  .card-slider-track {
      display: flex;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-slide {
      min-width: 100%;
      flex-shrink: 0;
  }

  .scrollbar-hide::-webkit-scrollbar {
      display: none;
  }

  .scrollbar-hide {
      -ms-overflow-style: none;
      scrollbar-width: none;
  }

  .dark .notification-item:hover {
      background: rgba(129, 140, 248, 0.06) !important;
  }

  .dark .message-item:hover {
      background: rgba(129, 140, 248, 0.06) !important;
  }

  .dark .notif-glow-primary {
      box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
  }

  .dark .notif-glow-success {
      box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
  }

  .dark .notif-glow-warning {
      box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
  }

  @media print {
      .no-print {
          display: none !important;
      }
  }

  /* ============================================
           CRITICAL MOBILE FIX - 320px to 1023px
           ============================================ */
  @media (max-width: 1023px) {
      #mainContent {
          margin-left: 0 !important;
          width: 100% !important;
          max-width: 100vw !important;
          overflow-x: hidden !important;
      }

      main {
          padding-left: 12px !important;
          padding-right: 12px !important;
          max-width: 100% !important;
      }
  }

  @media(max-width:640px) {

      .notification-popup-fix,
      .messenger-popup-fix {
          position: fixed !important;
          left: 8px !important;
          right: 8px !important;
          top: 60px !important;
          width: auto !important;
          max-width: none !important;
      }

      .grid {
          gap: 0.75rem !important;
      }
  }

  /* Extra small devices (320px - 380px) */
  @media (max-width: 380px) {
      main {
          padding-left: 10px !important;
          padding-right: 10px !important;
      }

      h2.text-2xl {
          font-size: 1.375rem !important;
          line-height: 1.75rem !important;
      }

      h3.text-2xl,
      h3.text-3xl {
          font-size: 1.25rem !important;
          line-height: 1.5rem !important;
      }

      .modal-content {
          max-width: calc(100vw - 16px) !important;
      }

      .grid.grid-cols-3>button {
          padding: 0.75rem !important;
      }

      .grid.grid-cols-3 .w-12.h-12 {
          width: 2.5rem !important;
          height: 2.5rem !important;
      }

      .credit-card p.text-xl {
          font-size: 1rem !important;
          letter-spacing: 2px !important;
      }

      header .flex.items-center.gap-1 {
          gap: 0 !important;
      }

      header button.p-2 {
          padding: 0.375rem !important;
      }

      .notification-popup-fix,
      .messenger-popup-fix {
          top: 56px !important;
      }
  }