.from-gray-900 {
    --tw-gradient-from: rgba(49, 110, 19, 1) var(--tw-gradient-from-position) !important;
}
.to-gray-800 {
    --tw-gradient-to: rgba(20, 76, 8, 1) var(--tw-gradient-to-position) !important;
}
.bg-gray-900 {
    background-color: rgba(20, 76, 8, 1) !important;
}

.inactive{
    background-color:  white !important;
    color: rgb(96 125 139 / var(--tw-text-opacity)) !important;
}
.shadow-gray-900\/10 {
    --tw-shadow-color: white !important;
}

.hover\:shadow-gray-900\/20:hover {
   background-color: rgb(96 125 139 / 0.1) !important;
}

.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.password-wrapper .eye-icon {
  cursor: pointer;
  color: rgba(20, 76, 8, 1) !important;
  
}
.custom-icon{
  width: 30px;
  height: 30px;
  position: absolute;
  cursor: pointer;
  color: #fff;
  margin-top: -4px;
}
.eye-icon {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 1rem;
  cursor: pointer;
  color: #6b7280;
}

.add-icon {
  width: 30px;
  height: 30px;
  position: absolute;
  cursor: pointer;
  color: #6b7280;
  margin-top: 25px;
}
.add-product-color{
  width: 30px;
  height: 30px;
  position: absolute;
  cursor: pointer;
  color: #6b7280;
  margin-top: 5px;
}

.accent-green{
  accent-color: rgba(20, 76, 8, 1) !important;
}

.danger{
  color: rgb(244 67 54 / var(--tw-text-opacity));
}


div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {

  background-color: rgba(49, 110, 19, 1) var(--tw-gradient-from-position) !important;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {
    background-color: rgb(218, 54, 8) var(--tw-gradient-from-position) !important;
}

.text-black-gray{
  color:#1A1918;
}

.bg-blue-gray-f5{
  background: #F5F7F8;
}
.css-1jqq78o-placeholder {
  white-space: nowrap;
}
.svg-info {
      max-width: 16px !important;
    width: 100% !important;
    max-height: 16px !important;
    height: 100% !important;
}
.css-1nmdiq5-menu{
  width: auto !important;
}

/* Custom Scrollbar Styles */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}


/* Container for buttons to ensure proper alignment */
.swal2-actions {
  gap: 10px; /* Adds space between the buttons */
}

/* Base button styles to mimic Bootstrap */
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  color: white; /* Ensures text is visible */
}

/* Success Button (Update Now) - Static Green */
.btn-success {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

.btn-success:hover {
  background-color: #218838 !important;
}

/* Secondary Button (Skip For Now) - Static Grey */
.btn-secondary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

.btn-secondary:hover {
  background-color: #5a6268 !important;
}

/* Margin utility class */
.ms-2 {
  margin-left: 0.5rem !important;
}

.react-tiny-popover-container{
  z-index: 100 !important;
}

/* 1. Use a specific class to avoid affecting the whole project */
.btn-material[class*="bg-"] {
  position: relative;
  color: rgba(255, 255, 255, 0.95); 
  font-weight: 700;
  letter-spacing: 0.02857em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  
  /* Smooth transitions for all properties except brightness */
  transition: 
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 200ms ease;
  
  /* Initial subtle elevation */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 2. Hover State: No brightness change, just physical interaction */
.btn-material[class*="bg-"]:hover {
  color: #000000; /* Your preferred text color change */
  font-weight: 700;
  /* This creates the 'pop' using position and shadow instead of light */
  /* transform: translateY(-3px) scale(1.03);  */
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* 3. Active (Click) State */
.btn-material[class*="bg-"]:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: transform 50ms; /* Fast snap back on click */
}