/**
 * Timeline Component Styles
 * Fixed-scale timeline for availability display with booking overlays
 */

/* Base Timeline Container */
.timeline-container {
  @apply relative w-full bg-white rounded-lg border border-gray-200;
  min-height: 60px;
}

.timeline-container.compact {
  min-height: 40px;
}

.timeline-container.full {
  min-height: 120px;
  padding: 16px;
}

/* Timeline Track */
.timeline-track {
  @apply relative w-full h-8 bg-gray-100 rounded overflow-hidden;
  position: relative;
}

.timeline-container.full .timeline-track {
  @apply h-16;
}

/* Timeline Slots */
.timeline-slot {
  @apply absolute top-0 h-full border-r border-gray-200/50;
  transition: all 0.2s ease;
  cursor: default;
}

.timeline-slot:last-child {
  border-right: none;
}

/* Slot States */
.timeline-available {
  @apply bg-blue-50;
}

.timeline-booked {
  @apply bg-blue-600;
  position: relative;
}

.timeline-booked::after {
  content: '';
  @apply absolute inset-0 bg-blue-700/20;
}

.timeline-unavailable {
  @apply bg-gray-200;
  cursor: not-allowed;
}

.timeline-selection {
  @apply bg-amber-400 ring-2 ring-amber-500;
  z-index: 10;
}

.timeline-interactive {
  @apply cursor-pointer hover:bg-blue-100 hover:scale-105;
  transition: all 0.15s ease;
}

.timeline-interactive:hover {
  z-index: 5;
}

/* Compact Mode Specific */
.compact-slot {
  min-width: 2px;
}

/* Full Mode Specific */
.full-slot {
  min-width: 4px;
}

/* Gap Badges */
.timeline-gap-badges {
  @apply flex flex-wrap gap-2 mt-2;
}

.gap-badge {
  @apply inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full;
}

/* Status Line */
.timeline-status-line {
  @apply mt-2 text-sm text-gray-600 font-medium;
}

.timeline-container.compact .timeline-status-line {
  @apply text-xs mt-1;
}

/* Error States */
.timeline-error,
.timeline-unavailable {
  @apply flex items-center justify-center h-full text-gray-500 text-sm;
}

/* Responsive Design */
@media (max-width: 640px) {
  .timeline-container.full {
    padding: 12px;
  }
  
  .timeline-container.full .timeline-track {
    @apply h-12;
  }
  
  .full-slot {
    min-width: 3px;
  }
}

/* Dark Mode Support - Class-based (not system preference) */
html.dark .timeline-container,
body.dark .timeline-container,
.dark .timeline-container {
  @apply bg-gray-800 border-gray-700;
}

html.dark .timeline-track,
body.dark .timeline-track,
.dark .timeline-track {
  @apply bg-gray-700;
}

html.dark .timeline-slot,
body.dark .timeline-slot,
.dark .timeline-slot {
  @apply border-gray-600/50;
}

html.dark .timeline-available,
body.dark .timeline-available,
.dark .timeline-available {
  @apply bg-blue-900/30;
}

html.dark .timeline-booked,
body.dark .timeline-booked,
.dark .timeline-booked {
  @apply bg-blue-500;
}

html.dark .timeline-unavailable,
body.dark .timeline-unavailable,
.dark .timeline-unavailable {
  @apply bg-gray-600;
}

html.dark .timeline-status-line,
body.dark .timeline-status-line,
.dark .timeline-status-line {
  @apply text-gray-300;
}

html.dark .gap-badge,
body.dark .gap-badge,
.dark .gap-badge {
  @apply bg-green-900/30 text-green-400;
}

/* Timeline Tooltips */
.timeline-slot[title]:hover::before {
  content: attr(title);
  @apply absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 text-xs bg-gray-900 text-white rounded whitespace-nowrap z-20;
}

.timeline-slot[title]:hover::after {
  content: '';
  @apply absolute -top-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 z-20;
}

/* Animation for loading states */
.timeline-loading {
  @apply animate-pulse;
}

.timeline-loading .timeline-slot {
  @apply bg-gray-300;
}

/* Accessibility */
.timeline-interactive:focus {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Print styles */
@media print {
  .timeline-container {
    @apply border border-gray-400;
  }
  
  .timeline-booked {
    @apply bg-gray-800;
  }
  
  .timeline-available {
    @apply bg-gray-200;
  }
}

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* ULTRA-AGGRESSIVE CONTRAST FIX - Override any remaining gray-800 text in dark mode */

/* NUCLEAR OPTION: Force white text on any element with gray-800 color in dark contexts */
html.dark *[style*="color: rgb(31, 41, 55)"],
body.dark *[style*="color: rgb(31, 41, 55)"],
.dark *[style*="color: rgb(31, 41, 55)"],
html.dark *[style*="color:rgb(31, 41, 55)"],
body.dark *[style*="color:rgb(31, 41, 55)"],
.dark *[style*="color:rgb(31, 41, 55)"],
html.dark *[style*="color: rgb(31,41,55)"],
body.dark *[style*="color: rgb(31,41,55)"],
.dark *[style*="color: rgb(31,41,55)"],
html.dark *[style*="color:rgb(31,41,55)"],
body.dark *[style*="color:rgb(31,41,55)"],
.dark *[style*="color:rgb(31,41,55)"] {
  color: #ffffff !important;
}

/* Cover computed styles that might result in gray-800 */