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

@layer base {
  html {
    @apply antialiased;
  }

  body {
    @apply bg-campfire-dark text-campfire-light;
    user-select: none;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-bold;
  }
}

/* Custom scrollbar styles */
@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  ::-webkit-scrollbar {
    width: 0;
  }

	.overflow-hidden {
    overflow-x: hidden;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Keep custom thin scrollbar for specific elements if needed */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--campfire-amber) var(--campfire-charcoal);
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* Added for horizontal scrollbar */
    display: block; /* Override global hide for specific elements */
  }

  .scrollbar-thin::-webkit-webkit-scrollbar-track {
    background: var(--campfire-charcoal);
    border-radius: 10px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--campfire-amber);
    border-radius: 10px;
    border: 2px solid var(--campfire-charcoal); /* Add border for thumb */
  }
}

@layer components {
  .container-custom {
    @apply container mx-auto px-4 sm:px-6 lg:px-8;
  }

  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-campfire-dark bg-campfire-secondary hover:bg-campfire-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-campfire-secondary transition-colors duration-200;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-campfire-light bg-campfire-dark hover:bg-campfire-dark/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-campfire-dark transition-colors duration-200;
  }

  .btn-outline {
    @apply inline-flex items-center justify-center px-6 py-3 border border-campfire-light text-base font-medium rounded-md shadow-sm text-campfire-light hover:bg-campfire-light/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-campfire-light transition-colors duration-200;
  }

  .input {
    @apply block w-full px-3 py-2 bg-campfire-dark text-campfire-light border border-campfire-dark rounded-md focus:outline-none focus:ring-2 focus:ring-campfire-secondary focus:border-campfire-secondary;
  }

  .label {
    @apply block text-sm font-medium text-campfire-light/60 mb-1;
  }

  .card {
    @apply bg-campfire-darker rounded-lg shadow-lg border border-campfire-dark/20 overflow-hidden;
  }

  .card-header {
    @apply px-6 py-4 border-b border-campfire-dark/20;
  }

  .card-body {
    @apply px-6 py-4;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-campfire-dark/20;
  }

  .input-field {
    @apply block w-full px-4 py-2 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md shadow-sm placeholder-campfire-ash/60 focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber sm:text-sm;
  }

   .textarea-field {
    @apply block w-full px-4 py-3 bg-campfire-dark text-campfire-light border border-campfire-ash/30 rounded-md shadow-sm placeholder-campfire-ash/60 focus:outline-none focus:ring-campfire-amber focus:border-campfire-amber sm:text-sm;
  }

  /* Styles for react-select */
  .react-select__control {
    @apply !bg-campfire-dark !border-campfire-ash/30 !rounded-md !shadow-sm !cursor-pointer;
  }
  .react-select__control--is-focused {
    @apply !border-campfire-amber !ring-1 !ring-campfire-amber !shadow-none;
  }
  .react-select__value-container {
    @apply !px-4 !py-1.5;
  }
  .react-select__single-value {
    @apply !text-campfire-light;
  }
  .react-select__placeholder {
    @apply !text-campfire-ash/60;
  }
  .react-select__indicator-separator {
    @apply !bg-campfire-ash/30;
  }
  .react-select__dropdown-indicator {
     @apply !text-campfire-ash/60 hover:!text-campfire-ash;
  }
  .react-select__menu {
    @apply !bg-campfire-dark !rounded-md !shadow-lg !border !border-campfire-ash/30;
  }
  .react-select__option {
    @apply !text-campfire-light !cursor-pointer;
  }
  .react-select__option--is-focused {
    @apply !bg-campfire-charcoal;
  }
  .react-select__option--is-selected {
    @apply !bg-campfire-amber !text-campfire-dark;
  }
  .react-select__multi-value {
    @apply !bg-campfire-charcoal !rounded-md;
  }
  .react-select__multi-value-label {
    @apply !text-campfire-light !px-2 !py-1;
  }
  .react-select__multi-value__remove {
    @apply hover:!bg-red-500 hover:!text-white !rounded-r-md;
  }

  /* Styles for react-datepicker */
  .react-datepicker__input-container input {
    @apply input-field; /* Apply input-field styles */
  }

  .react-datepicker {
    @apply !font-sans !bg-campfire-dark !border !border-campfire-ash/30 !rounded-md !shadow-lg;
  }

  .react-datepicker__header {
    @apply !bg-campfire-charcoal !border-b !border-campfire-ash/30 !rounded-t-md;
  }

  .react-datepicker__current-month,
  .react-datepicker__day-name,
  .react-datepicker__navigation-icon::before {
    @apply !text-campfire-light;
  }

  .react-datepicker__day {
    @apply !text-campfire-light hover:!bg-campfire-charcoal !rounded-sm;
  }

  .react-datepicker__day--selected,
  .react-datepicker__day--keyboard-selected {
    @apply !bg-campfire-amber !text-campfire-dark;
  }

  .react-datepicker__day--outside-month {
    @apply !text-campfire-ash/60;
  }

  .react-datepicker__day--disabled {
    @apply !text-campfire-ash/30 !cursor-not-allowed;
  }

  .react-datepicker__navigation {
    @apply !top-2;
  }

  .react-datepicker__navigation--previous {
    @apply !left-2;
  }

  .react-datepicker__navigation--next {
    @apply !right-2;
  }

  /* Modal Backdrop */
  .modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50;
  }

  /* Modal Content */
  .modal-content {
    @apply bg-campfire-dark rounded-lg shadow-xl max-w-lg w-full p-6 border border-campfire-ash/30 max-h-[90vh] overflow-y-auto; /* Added max-h and overflow */
  }

  /* XP Progress Bar */
  .xp-progress-bar-container {
    @apply w-full bg-campfire-charcoal rounded-full h-2.5 relative overflow-hidden border border-campfire-ash/30; /* Added border */
  }

  .xp-progress-bar {
    @apply bg-campfire-amber h-2.5 rounded-full transition-all duration-500 ease-in-out;
  }

  /* Footer text color fix */
  footer p, footer a {
    @apply text-campfire-ash; /* Ensure footer text is ash color */
  }

  /* Custom slider thumb style */
  .slider-thumb-amber::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 bg-campfire-amber rounded-full cursor-pointer shadow-md;
  }

  .slider-thumb-amber::-moz-range-thumb {
    @apply appearance-none w-4 h-4 bg-campfire-amber rounded-full cursor-pointer shadow-md;
  }

  .slider-thumb-amber::-ms-thumb {
    @apply appearance-none w-4 h-4 bg-campfire-amber rounded-full cursor-pointer shadow-md;
  }

  /* Custom slider track style */
  .slider-thumb-amber::-webkit-slider-runnable-track {
    @apply w-full h-2 bg-campfire-charcoal rounded-lg;
  }

  .slider-thumb-amber::-moz-range-track {
    @apply w-full h-2 bg-campfire-charcoal rounded-lg;
  }

  .slider-thumb-amber::-ms-track {
    @apply w-full h-2 bg-campfire-charcoal rounded-lg;
  }

  /* Remove default fill for IE/Edge */
  .slider-thumb-amber::-ms-fill-lower {
    background: transparent;
  }
  .slider-thumb-amber::-ms-fill-upper {
    background: transparent;
  }

  /* Flame Rating Icons */
  .flame-rating-icon {
    @apply text-campfire-ash/50 cursor-pointer transition-colors duration-100;
  }

  .flame-rating-icon.filled {
    @apply text-campfire-amber;
  }
}
