.container-fluid {
  padding-left: 0 !important;
  min-height: 100vh;
}

.date-picker>.ant-picker-input {
  padding: 1.5px 0px !important;
}

.range-picker {
  height: 34.5px !important;
}

.dark {
  color: black;
}

.salelist-saleperson-input .ant-select-selector {
  height: 34.5px !important;
}

.salelist-search-btn {
  height: 34.5px !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.date-picker-transaction-create,
.hr-staffs-date-picker {
  height: 34.5px !important;
}

.user-btn {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.ant-dropdown-menu {
  border-radius: 10px !important;
}

/* ====== START - Overriding ====== */

.ant-layout-header {
  background-color: transparent !important;
  padding: 0 !important;
}

.ant-select-selection-placeholder {
  padding: 2px 0 !important;
  line-height: 30px !important;
}

.ant-select-show-search.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  height: 34px !important;
}

.ant-input-lg {
  font-size: 14px;
}

.ant-input-number-lg input {
  height: 25px !important;
}

.ant-form-item-control-input-content .ant-select-selector .ant-select-selection-search .ant-select-selection-search-input {
  height: 32px !important;
}

.ant-drawer-body {
  padding: 0 !important;
}

.ant-menu-dark .ant-menu-inline.ant-menu-sub {
  background-color: transparent;
}

.ant-menu-title-content>a {
  padding: 0 !important;
}

.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: transparent;

}


/* .menu-item .active {
  color: #319AF6 !important;
} */


.menu-item a {
  display: block;
}

.menu-item {
  position: relative;
}

.menu-item a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
}


.menu-item:has(.active) {
  background-color: #F5F8FF !important;
  color: #5599F7 !important;
 
  width: 100%;
}

.totalMargin {
  margin-top: 8px !important;

}

.min-margin {
  margin-top: -25px !important;
}

.ant-layout-footer {
  padding: 24px !important;
  background-color: transparent !important;
}

.ant-menu-title-content a {
  color: inherit !important;
}

.ant-btn {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 15px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgb(0 0 0 / 7%);
}

.ant-picker {
  width: 100%;
}

.ant-input-number {
  width: 100%;
}

.ant-select {
  width: 100%;
}

.ant-input,
.ant-select-selector {
  border-radius: 5px !important;
}

.ant-input {
  padding: 5.5px 11px !important;
}



.ant-picker,
.ant-input-number {

  border-radius: 5px !important;
  padding: 5px 11px !important;
}





.ant-select-lg {
  font-size: 14px !important;
}

.ant-table {
  background-color: transparent !important;
}

.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper,
.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover {
  background: transparent;
  padding: 0 !important;
}

.ant-input-affix-wrapper {
  background: transparent;
  border-radius: 5px !important;
  padding: 0 !important;
  /* border-color: #ff4d4f; */
}

.ant-switch {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

.ant-switch-checked {
  background-color: #1890ff !important;
}

.ant-input-number-affix-wrapper-lg {
  padding: 0 !important;
}

.ant-input-number-affix-wrapper {
  border-radius: 5px !important;
}

.ant-btn-danger {
  background-color: #ff4d4f !important;
}


.ant-color-picker {
  width: 300px !important;
}

.ant-color-picker-inner-content {
  width: 100% !important;
}

.ant-color-picker-alpha-input {
  width: 20px !important;
}

.ant-form-item-label {
  .ant-form-item-required {
    color: #ff4d4f !important;
  }

}

:where(.customer-login-email) .ant-form-item-label {
  .ant-form-item-required {
    color: #5e5e5e !important;
  }
  .ant-form-item-required::before {
    content: '' !important;
  }

}

:where(.customer-login-password) .ant-form-item-label {
  .ant-form-item-required {
    color: #5e5e5e !important;
  }
  .ant-form-item-required::before {
    content: '' !important;
  }

}
:where(.forget-password) .ant-form-item-label {
  .ant-form-item-required {
    color: #5e5e5e !important;
  }
  .ant-form-item-required::before {
    content: '' !important;
  }

}



/* ====== END - Overriding ====== */


/* globals.css / styles.css */

/* Keyframes for the up/down wave motion */
@keyframes line-wave {
  0%, 100% { transform: translateY(0) rotate(20deg); } 
  50% { transform: translateY(15px) rotate(20deg); }   
}
@keyframes line-wave-reverse {
  0%, 100% { transform: translateY(0) rotate(-20deg); } 
  50% { transform: translateY(15px) rotate(-20deg); }   
}
@keyframes center-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(15px); }
}

/* Keyframes for the flowing dotted pattern */
@keyframes dot-flow {
  0% { background-position-y: 0%; }
  100% { background-position-y: 100%; }
}

/* Animation classes to apply in JSX */
.animate-line-wave-left {
  animation: line-wave 3s infinite alternate ease-in-out;
  transform-origin: top left;
}
.animate-line-wave-right {
  animation: line-wave-reverse 3s infinite alternate ease-in-out;
  transform-origin: top right;
}
.animate-line-wave-center {
  animation: center-wave 3s infinite alternate ease-in-out;
}
.animate-dot-flow {
  animation: dot-flow 6s linear infinite; /* Controls the speed of the dots */
}

/* Custom CSS for the AI Button with Shimmer Effect */

/* Define the base color: #319AF6 */
/* Tailwind does not have this color, so we use a CSS variable or direct background */

.custom-ai-button {
  --button-color: #319AF6; /* Define the base blue */
  --light-blue: #4FA8FF;   /* Slightly lighter shade for highlights */
  --dark-blue: #2A88D8;    /* Slightly darker shade for shadows */

  @apply relative flex items-center justify-center
         px-6 py-2.5 rounded-xl text-white font-medium
         border border-blue-400 shadow-lg /* Use a border color close to the base */
         overflow-hidden 
         transition-all duration-300 ease-in-out;
         
  /* Apply the custom gradient using the defined variables */
  background: linear-gradient(to bottom, var(--light-blue), var(--button-color) 70%, var(--dark-blue));
}

.custom-ai-button .magic-wand {
  @apply ml-2;
}

/* --- Shimmer Effect --- */
.custom-ai-button::before {
  content: '';
  @apply absolute inset-0 block;
  
  /* White transparent gradient for the moving shine */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%, /* Increased transparency for subtle effect */
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%); /* Start shimmer off-left */
  transition: transform 0.6s ease-in-out; /* Smooth slide */
}

/* --- Hover State --- */
.custom-ai-button:hover::before {
  transform: translateX(100%); /* Move shimmer across to the right on hover */
}

.custom-ai-button:hover {
  @apply border-blue-300 shadow-xl; /* Adjust border/shadow on hover */
  /* You can optionally adjust the background gradient on hover here if needed */
}