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

.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;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.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-rose-300;
  position: relative;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.15) 4px,
    transparent 4px,
    transparent 8px
  );
}

.timeline-partial {
  @apply bg-amber-200;
  position: relative;
}

.timeline-booked::after {
  content: '';
  @apply absolute inset-0 bg-rose-400/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;
}

.timeline-status-line--loading {
  @apply text-gray-500 font-normal;
}

.timeline-taken-ranges {
  @apply mt-0.5 text-xs text-rose-700 leading-snug;
}

.timeline-container.compact .timeline-taken-ranges {
  @apply text-[11px];
}

.timeline-axis {
  @apply relative w-full h-4 mt-0.5;
}

.timeline-axis-tick {
  @apply absolute text-[10px] text-gray-500 leading-none;
  transform: translateX(-50%);
  white-space: nowrap;
}

.timeline-container.compact .timeline-axis {
  @apply h-3.5;
}

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

html.dark .timeline-partial,
body.dark .timeline-partial,
.dark .timeline-partial {
  @apply bg-amber-700/70;
}

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 .timeline-status-line--loading,
body.dark .timeline-status-line--loading,
.dark .timeline-status-line--loading {
  @apply text-gray-400;
}

html.dark .timeline-taken-ranges,
body.dark .timeline-taken-ranges,
.dark .timeline-taken-ranges {
  @apply text-rose-300;
}

html.dark .timeline-axis-tick,
body.dark .timeline-axis-tick,
.dark .timeline-axis-tick {
  @apply text-gray-400;
}

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

/* Timeline Tooltips (render above track so overflow:hidden does not clip text) */
.timeline-slot[title]:hover::before {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  @apply px-2 py-1 text-xs bg-gray-900 text-white rounded whitespace-nowrap z-30 pointer-events-none;
}

.timeline-slot[title]:hover::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  @apply w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-900 z-30 pointer-events-none;
}

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

/* Dark overlay/text contrast: themes/dark-mode.css */

.booking-timeline-legend {
  @apply flex flex-wrap gap-3 mb-2 text-xs text-gray-600;
}

.booking-timeline-legend-item {
  @apply inline-flex items-center gap-1.5;
}

.booking-timeline-swatch {
  @apply inline-block w-3 h-3 rounded-sm border border-gray-300;
}

.booking-timeline-swatch-available {
  @apply bg-blue-50;
}

.booking-timeline-swatch-taken {
  @apply bg-rose-300;
}

.booking-timeline-swatch-closed {
  @apply bg-gray-200;
}

.timeline-selection-overlay {
  @apply absolute top-0 h-full pointer-events-none;
  z-index: 12;
  background: rgba(59, 130, 246, 0.22);
  border: 2px dashed rgba(37, 99, 235, 0.85);
  box-sizing: border-box;
}

html.dark .timeline-selection-overlay,
body.dark .timeline-selection-overlay,
.dark .timeline-selection-overlay {
  background: rgba(96, 165, 250, 0.2);
  border-color: rgba(147, 197, 253, 0.9);
}

.booking-timeline-swatch-selection {
  background: rgba(59, 130, 246, 0.25);
  border: 2px dashed rgba(37, 99, 235, 0.85);
}

.booking-timeline-swatch-limited {
  @apply bg-amber-200;
}

html.dark .booking-timeline-legend,
body.dark .booking-timeline-legend,
.dark .booking-timeline-legend {
  @apply text-gray-300;
}

/* Range occupancy summary + strip */
.booking-range-summary {
  @apply text-xs font-medium rounded-md px-2 py-1.5 mb-1;
}

.booking-range-summary--available {
  @apply bg-emerald-50 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-200;
}

.booking-range-summary--partial {
  @apply bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-200;
}

.booking-range-summary--conflict,
.booking-range-summary--closed {
  @apply bg-rose-50 text-rose-800 dark:bg-rose-900/30 dark:text-rose-200;
}

.booking-range-summary--neutral {
  @apply bg-gray-50 text-gray-700 dark:bg-gray-800 dark:text-gray-300;
}

.booking-range-summary--compact {
  @apply mb-0.5 py-1;
}

.booking-range-strip {
  @apply flex flex-wrap gap-1 mb-2;
}

.booking-range-strip-cell {
  @apply flex flex-col items-center justify-end min-w-[2.5rem] px-1 py-1 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-[10px] leading-tight cursor-pointer;
}

.booking-range-strip-cell-day {
  @apply font-medium text-gray-700 dark:text-gray-200;
}

.booking-range-strip-cell-bar {
  @apply w-full h-1.5 rounded-sm mt-0.5;
}

.booking-range-strip-cell--available .booking-range-strip-cell-bar {
  @apply bg-blue-200 dark:bg-blue-700;
}

.booking-range-strip-cell--partial .booking-range-strip-cell-bar {
  @apply bg-amber-300 dark:bg-amber-600;
}

.booking-range-strip-cell--full .booking-range-strip-cell-bar {
  @apply bg-rose-400 dark:bg-rose-600;
}

.booking-range-strip-cell--closed .booking-range-strip-cell-bar {
  @apply bg-gray-300 dark:bg-gray-600;
}

.booking-range-strip-cell--focused {
  @apply ring-2 ring-indigo-500 border-indigo-400;
}

.booking-range-strip-cell--collapsed {
  @apply cursor-default text-gray-500 dark:text-gray-400 border-dashed min-w-[3rem];
}

.picker-range-occupancy {
  @apply mb-2;
}