@tailwind base;
@tailwind components;
@tailwind utilities;

.rate-empty .ant-rate-star {
  color: #d9d9d9; /* Light gray for empty stars */
}
.rate-empty .ant-rate-star svg {
  fill: #d9d9d9;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Base styling for the scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px; /* Add height for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-primary); /* Light green */
  border-radius: 10px;
  border: 3px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #66CDAA; /* Darker green on hover */
}

*::-webkit-scrollbar-button {
  display: none; /* Hide scrollbar buttons */
}

/* Firefox */
* {
  scrollbar-width: thin; /* Thin scrollbar */
  scrollbar-color: #90EE90 #f1f1f1; /* Thumb color and track color */
}

/* Safari-Specific Styles */
.scroll-container {
  overflow-x: auto; /* Allow horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for Safari */
}

.scroll-container::-webkit-scrollbar {
  height: 12px; /* Height of the horizontal scrollbar */
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* Background of the track */
  border-radius: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #90EE90; /* Color of the thumb */
  border-radius: 10px;
  border: 3px solid #f1f1f1;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #66CDAA; /* Darker green on hover */
}

/* Ensure scrollbars are always visible */
html, body {
  overflow: auto; /* Prevent hidden scrollbars */
}

.scroll-container {
  scrollbar-gutter: stable; /* Ensure space for scrollbars */
  padding-bottom: 16px; /* Extra space for older Safari versions */
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

.no-horizontal-scrollbar {
  overflow-x: auto; /* Enable horizontal scrolling */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer and Edge */
}

.no-horizontal-scrollbar::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome, Safari, and other WebKit browsers */
}

@layer base {
  /* Hide the spinner arrows in number inputs */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
  }
}


.custom-modal .ant-modal-header {
  background-color: #2d3748; /* Dark background for the header */
  color: white; /* White text color */
}

.custom-modal .ant-modal-footer {
  background-color: #2d3748; /* Dark background for the footer */
  color: white; /* White text color */
}

.custom-modal .ant-modal-close {
  color: white; /* Close button color */
}

html[class="dark"] .ant-modal-content {
  background-color: var(--modal-bg-dark) !important; /* Dark theme background */
  color: white !important; /* Dark theme text color */
}

/* Apply styles for light theme */
html[class="light"] .ant-modal-content {
  background-color: var(
    --modal-bg-light
  ) !important; /* Light theme background */
  color: black !important; /* Light theme text color */
}