/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html { scroll-behavior: smooth; }

/* Availability Grid Styles */
.availability-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px;
  background-color: rgb(229 231 235);
}

.availability-grid .time-label {
  padding: 0.5rem;
  background-color: rgb(249 250 251);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.availability-grid .time-block {
  height: 2rem;
  cursor: pointer;
  background-color: rgb(156 163 175);
  transition: background-color 0.2s;
}

.availability-grid .time-block:hover {
  opacity: 0.8;
}

.availability-grid .time-block.available {
  background-color: rgb(34 197 94) !important;
}

.availability-grid .time-block.unavailable {
  background-color: rgb(239 68 68) !important;
}

/* Dark mode styles */
.dark .availability-grid {
  background-color: rgb(63 63 70);
}

.dark .availability-grid .time-label {
  background-color: rgb(39 39 42);
  color: rgb(161 161 170);
}

.dark .availability-grid .time-block {
  background-color: rgb(82 82 91);
}

.dark .availability-grid .time-block.available {
  background-color: rgb(34 197 94) !important;
}

.dark .availability-grid .time-block.unavailable {
  background-color: rgb(239 68 68) !important;
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

@keyframes stint-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    background-color: rgba(59, 130, 246, 0.1);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    background-color: rgba(59, 130, 246, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    background-color: rgba(59, 130, 246, 0);
  }
}

.stint-highlight {
  animation: stint-pulse 1.5s ease-out;
  border-radius: 4px;
  transition: all 0.3s ease;
}