/* :root{
    --primary-color: #D74559;
}

.bg-primary-color {
    background-color: var(--primary-color);
}

.text-primary-color {
    color: var(--primary-color);
}


.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background: var(--primary-color);
    color: #fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background: var(--primary-color);
    color: #fff!important;
}
.bg-gray-500{
    background-color: #606060!important;
}
.bg-red-500{
    background-color: #D74559!important;
}
.truncate {
    width: 100px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.truncate-x {
    width: 70px;
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #shipmentsTable_wrapper{
    width: 90vw;
    overflow: auto;
  }
  .mb-3{
    margin-bottom: 1rem;
  }
  .bg-green-500{
    background-color: #22C55E;
  }
  
 
.text-blue-50 { color: #eff6ff ; }
.bg-blue-50 { background-color: #eff6ff ; }
.text-blue-100 { color: #dbeafe ; }
.bg-blue-100 { background-color: #dbeafe ; }
.text-blue-200 { color: #bfdbfe ; }
.bg-blue-200 { background-color: #bfdbfe ; }
.text-blue-300 { color: #93c5fd ; }
.bg-blue-300 { background-color: #93c5fd ; }
.text-blue-400 { color: #60a5fa ; }
.bg-blue-400 { background-color: #60a5fa ; }
.text-blue-500 { color: #3b82f6 ; }
.bg-blue-500 { background-color: #3b82f6 ; }
.text-blue-600 { color: #2563eb ; }
.bg-blue-600 { background-color: #2563eb ; }
.text-blue-700 { color: #1d4ed8 ; }
.bg-blue-700 { background-color: #1d4ed8 ; }
.text-blue-800 { color: #1e40af ; }
.bg-blue-800 { background-color: #1e40af ; }
.text-blue-900 { color: #1e3a8a ; }
.bg-blue-900 { background-color: #1e3a8a ; }


.text-green-50 { color: #ecfdf5 ; }
.bg-green-50 { background-color: #ecfdf5 ; }
.text-green-100 { color: #d1fae5 ; }
.bg-green-100 { background-color: #d1fae5 ; }
.text-green-200 { color: #a7f3d0 ; }
.bg-green-200 { background-color: #a7f3d0 ; }
.text-green-300 { color: #6ee7b7 ; }
.bg-green-300 { background-color: #6ee7b7 ; }
.text-green-400 { color: #34d399 ; }
.bg-green-400 { background-color: #34d399 ; }
.text-green-500 { color: #10b981 ; }
.bg-green-500 { background-color: #10b981 ; }
.text-green-600 { color: #059669 ; }
.bg-green-600 { background-color: #059669 ; }
.text-green-700 { color: #047857 ; }
.bg-green-700 { background-color: #047857 ; }
.text-green-800 { color: #065f46 ; }
.bg-green-800 { background-color: #065f46 ; }
.text-green-900 { color: #064e3b ; }
.bg-green-900 { background-color: #064e3b ; }


.text-purple-50 { color: #f5f3ff ; }
.bg-purple-50 { background-color: #f5f3ff ; }
.text-purple-100 { color: #ede9fe ; }
.bg-purple-100 { background-color: #ede9fe ; }
.text-purple-200 { color: #ddd6fe ; }
.bg-purple-200 { background-color: #ddd6fe ; }
.text-purple-300 { color: #c4b5fd ; }
.bg-purple-300 { background-color: #c4b5fd ; }
.text-purple-400 { color: #a78bfa ; }
.bg-purple-400 { background-color: #a78bfa ; }
.text-purple-500 { color: #8b5cf6 ; }
.bg-purple-500 { background-color: #8b5cf6 ; }
.text-purple-600 { color: #7c3aed ; }
.bg-purple-600 { background-color: #7c3aed ; }
.text-purple-700 { color: #6d28d9 ; }
.bg-purple-700 { background-color: #6d28d9 ; }
.text-purple-800 { color: #5b21b6 ; }
.bg-purple-800 { background-color: #5b21b6 ; }
.text-purple-900 { color: #4c1d95 ; }
.bg-purple-900 { background-color: #4c1d95 ; }

.text-gray-900 { color: #111827 ; }
 */

 
:root{
  --primary-color: #D74559;
  --neon-gradient: linear-gradient(135deg, #f44336, #e91e63, #9c27b0);
  --neon-red: #f44336;
  --neon-pink: #e91e63;
  --neon-purple: #9c27b0;
  --neon-bright-red: #ff5722;
  --neon-bright-pink: #ff4081;
  --neon-bright-purple: #e040fb;
}

.bg-primary-color {
  background: var(--neon-gradient) !important;
}

.text-primary-color {
  color: var(--neon-red);
}

/* ONLY target the main header element for neon styling */
body > header,
header.z-10 {
  background: var(--neon-gradient) !important;
  position: relative !important;
}

/* Neon top border - only on main header */
body > header::after,
header.z-10::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--neon-bright-red), var(--neon-bright-pink), var(--neon-bright-purple)) !important;
  box-shadow: 0 0 15px rgba(255, 64, 129, 0.8) !important;
  z-index: 10 !important;
}

/* Search field styling - very specific */
body > header input[placeholder*="Search"] {
  padding-left: 50px !important;
  padding-right: 25px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 87, 34, 0.6) !important;
  color: white !important;
  border-radius: 12px !important;
}

body > header input[placeholder*="Search"]:focus {
  border-color: var(--neon-bright-pink) !important;
  box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.4) !important;
}

/* Header text colors - only main header */
body > header,
body > header * {
  color: white !important;
}

/* Dropdown menu - FIXED z-index and positioning */
header ul[aria-label="submenu"] {
  background: linear-gradient(135deg, 
      rgba(244, 67, 54, 0.95), 
      rgba(233, 30, 99, 0.95), 
      rgba(156, 39, 176, 0.95)) !important;
  border: 2px solid var(--neon-bright-pink) !important;
  box-shadow: 
      0 0 25px rgba(255, 64, 129, 0.6),
      0 10px 30px rgba(0, 0, 0, 0.3) !important;
  z-index: 999999 !important;
  position: absolute !important;
}

header ul[aria-label="submenu"] a {
  color: white !important;
}

header ul[aria-label="submenu"] a:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: var(--neon-gradient) !important;
  color: #fff !important;
  border-color: var(--neon-bright-pink) !important;
}

/* Original utility classes */
.bg-gray-600{
  background-color: #6f767d !important;
}

.truncate {
  width: 100px;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-x {
  width: 100px;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-green-500{
  background-color: #28a745 !important;
}