/*
 * 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;
}

  /* Timeline Drag & Drop Styles */
  .timeline-drop-target {
    outline: 2px dashed rgba(251, 146, 60, 0.4);
    outline-offset: 2px;
  }
  
  .timeline-drop-hover {
    outline: 2px solid rgb(251, 146, 60);
    outline-offset: 2px;
    transform: scale(1.05);
  }
  
  /* Current Time Indicator */
  .current-time-line {
    /* Mobile: ml-12 (48px) + gap-2 (8px) = 56px offset */
    /* Desktop: sm:ml-20 (80px) for time markers, but driver rows have different offset */
    /* Using calc to position based on timeline area percentage */
    --offset: 56px;
    left: calc(var(--offset) + (100% - var(--offset)) * var(--time-position) / 100);
  }
  
  @media (min-width: 640px) {
    .current-time-line {
      /* Desktop: sm:w-16 (64px) + sm:gap-3 (12px) = 76px, but time markers use sm:ml-20 (80px) */
      --offset: 76px;
    }
  }