/*
 * BOOKINGS.CSS
 * Booking-specific styles for allocation lists and verification
 */

/* --------------------------------------------
 * ALLOCATION LIST
 * -------------------------------------------- */

.allocation-list {
  @apply space-y-3;
}

.allocation-item {
  @apply flex items-center space-x-4 p-4 rounded-xl
         bg-white dark:bg-gray-800
         border border-gray-200 dark:border-gray-700
         shadow-sm
         transition-all duration-200;
}

.allocation-item:hover {
  @apply shadow-md;
}

.allocation-item-allocated {
  @apply bg-gradient-to-r from-green-50 to-transparent
         dark:from-green-900/20 dark:to-transparent
         border-green-200 dark:border-green-800/50;
}

.allocation-item-available {
  @apply bg-gradient-to-r from-blue-50 to-transparent
         dark:from-blue-900/20 dark:to-transparent
         border-blue-200 dark:border-blue-800/50;
}

.allocation-item-maintenance {
  @apply bg-gradient-to-r from-red-50 to-transparent
         dark:from-red-900/20 dark:to-transparent
         border-red-200 dark:border-red-800/50;
}

/* Lock icon for allocated lockers */
.allocation-item-allocated .locker-icon {
  position: relative;
}

.allocation-item-allocated .locker-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2322c55e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25rem;
  opacity: 0.1;
}

/* --------------------------------------------
 * BOOKING STEPS / PROGRESS
 * -------------------------------------------- */

.booking-steps {
  @apply flex items-center justify-between w-full max-w-2xl mx-auto;
}

.booking-step {
  @apply flex flex-col items-center;
  position: relative;
}

.booking-step-circle {
  @apply w-12 h-12 rounded-full flex items-center justify-center
         bg-white dark:bg-gray-800
         border-2
         shadow-md
         transition-all duration-300;
  z-index: 10;
}

.booking-step-circle-pending {
  @apply border-gray-300 dark:border-gray-600
         text-gray-400 dark:text-gray-500;
}

.booking-step-circle-active {
  @apply border-teal-500 bg-teal-50 dark:bg-teal-900/30
         text-teal-600 dark:text-teal-400
         ring-4 ring-teal-500/20;
}

.booking-step-circle-completed {
  @apply border-green-500 bg-green-50 dark:bg-green-900/30
         text-green-600 dark:text-green-400;
}

.booking-step-label {
  @apply mt-2 text-xs font-semibold text-gray-600 dark:text-gray-400
         uppercase tracking-wide;
}

.booking-step-connector {
  @apply absolute top-6 left-1/2 w-full h-0.5 bg-gray-200 dark:bg-gray-700
         -translate-y-1/2;
}

.booking-step-connector-active {
  @apply bg-gradient-to-r from-teal-500 to-green-500;
}

/* Staggered animation delays for steps */
.booking-step:nth-child(1) { animation-delay: 100ms; }
.booking-step:nth-child(2) { animation-delay: 200ms; }
.booking-step:nth-child(3) { animation-delay: 300ms; }
.booking-step:nth-child(4) { animation-delay: 400ms; }
.booking-step:nth-child(5) { animation-delay: 500ms; }

/* --------------------------------------------
 * BOOKING CARDS
 * -------------------------------------------- */

.booking-card {
  @apply bg-white dark:bg-gray-800
         rounded-2xl
         shadow-lg shadow-gray-200/50 dark:shadow-black/50
         border border-gray-200/50 dark:border-gray-700/50
         overflow-hidden
         transition-all duration-300;
}

.booking-card:hover {
  @apply shadow-xl;
  transform: translateY(-2px);
}

.booking-card-header {
  @apply px-6 py-4 border-b border-gray-200/50 dark:border-gray-700/50;
}

.booking-card-body {
  @apply p-6;
}

.booking-card-footer {
  @apply px-6 py-4 bg-gray-50/50 dark:bg-gray-800/50
         border-t border-gray-200/50 dark:border-gray-700/50;
}

/* --------------------------------------------
 * BOOKING INFO GRID
 * -------------------------------------------- */

.booking-info-grid {
  @apply grid grid-cols-1 md:grid-cols-2 gap-4;
}

.booking-info-item {
  @apply flex items-start space-x-3;
}

.booking-info-icon {
  @apply w-10 h-10 rounded-xl flex items-center justify-center
         bg-gradient-to-br from-teal-500 to-teal-600
         text-white
         shadow-lg shadow-teal-500/30;
}

.booking-info-label {
  @apply text-xs font-semibold text-gray-500 dark:text-gray-400
         uppercase tracking-wide;
}

.booking-info-value {
  @apply text-sm font-bold text-gray-900 dark:text-white;
}

/* --------------------------------------------
 * VERIFICATION STATES
 * -------------------------------------------- */

.verification-state {
  @apply inline-flex items-center px-3 py-1.5 rounded-lg
         text-sm font-bold
         transition-all duration-200;
}

.verification-state-pending {
  @apply bg-yellow-100 dark:bg-yellow-900/30
         text-yellow-700 dark:text-yellow-300
         border border-yellow-200 dark:border-yellow-800/50;
}

.verification-state-verified {
  @apply bg-green-100 dark:bg-green-900/30
         text-green-700 dark:text-green-300
         border border-green-200 dark:border-green-800/50;
}

.verification-state-failed {
  @apply bg-red-100 dark:bg-red-900/30
         text-red-700 dark:text-red-300
         border border-red-200 dark:border-red-800/50;
}

/* --------------------------------------------
 * BOOKING TIMELINE
 * -------------------------------------------- */

.booking-timeline {
  @apply relative;
}

.booking-timeline::before {
  content: '';
  @apply absolute left-4 top-0 bottom-0 w-0.5
         bg-gray-200 dark:bg-gray-700;
}

.timeline-item {
  @apply relative flex items-start space-x-4 pb-6;
}

.timeline-marker {
  @apply w-8 h-8 rounded-full flex items-center justify-center
         bg-white dark:bg-gray-800
         border-2
         shadow-md
         z-10;
}

.timeline-marker-pending {
  @apply border-gray-300 dark:border-gray-600;
}

.timeline-marker-active {
  @apply border-teal-500 bg-teal-50 dark:bg-teal-900/30
         text-teal-600 dark:text-teal-400;
}

.timeline-marker-completed {
  @apply border-green-500 bg-green-50 dark:bg-green-900/30
         text-green-600 dark:text-green-400;
}

.timeline-content {
  @apply flex-1 pt-1;
}

.timeline-time {
  @apply text-xs text-gray-500 dark:text-gray-400;
}

.timeline-title {
  @apply text-sm font-bold text-gray-900 dark:text-white;
}

.timeline-description {
  @apply text-xs text-gray-600 dark:text-gray-400 mt-0.5;
}

/* --------------------------------------------
 * LOCKER SIZE CARDS
 * -------------------------------------------- */

.locker-size-card {
  @apply p-6 rounded-xl
         bg-white dark:bg-gray-800
         border-2
         cursor-pointer
         transition-all duration-200;
}

.locker-size-card-available {
  @apply border-gray-200 dark:border-gray-700
         hover:border-teal-500 dark:hover:border-teal-600
         hover:shadow-md;
}

.locker-size-card-selected {
  @apply border-teal-500 bg-teal-50 dark:bg-teal-900/30
         ring-2 ring-teal-500/50;
}

.locker-size-card-unavailable {
  @apply border-gray-200 dark:border-gray-700
         opacity-50 cursor-not-allowed;
}

.locker-size-icon {
  @apply w-16 h-16 mx-auto mb-4 rounded-xl
         flex items-center justify-center
         bg-gradient-to-br from-gray-100 to-gray-200
         dark:from-gray-700 dark:to-gray-800
         text-gray-400;
}

.locker-size-card-selected .locker-size-icon {
  @apply bg-gradient-to-br from-teal-500 to-teal-600
         text-white
         shadow-lg shadow-teal-500/30;
}

.locker-size-label {
  @apply text-sm font-bold text-gray-900 dark:text-white text-center;
}

.locker-size-dimensions {
  @apply text-xs text-gray-500 dark:text-gray-400 text-center;
}

/* --------------------------------------------
 * TIME DURATION DISPLAY
 * -------------------------------------------- */

.duration-display {
  @apply flex items-center space-x-2;
}

.duration-value {
  @apply text-2xl font-black text-gray-900 dark:text-white;
}

.duration-unit {
  @apply text-sm font-semibold text-gray-500 dark:text-gray-400;
}

.duration-breakdown {
  @apply flex items-center space-x-4 mt-2;
}

.duration-breakdown-item {
  @apply text-center;
}

.duration-breakdown-value {
  @apply text-lg font-bold text-gray-900 dark:text-white;
}

.duration-breakdown-label {
  @apply text-xs text-gray-500 dark:text-gray-400;
}

/* --------------------------------------------
 * BOOKING STATUS BADGES
 * -------------------------------------------- */

.booking-status {
  @apply inline-flex items-center px-3 py-1.5 rounded-full
         text-xs font-bold
         uppercase tracking-wide;
}

.booking-status-pending {
  @apply bg-yellow-100 dark:bg-yellow-900/30
         text-yellow-700 dark:text-yellow-300;
}

.booking-status-confirmed {
  @apply bg-blue-100 dark:bg-blue-900/30
         text-blue-700 dark:text-blue-300;
}

.booking-status-active {
  @apply bg-green-100 dark:bg-green-900/30
         text-green-700 dark:text-green-300;
}

.booking-status-completed {
  @apply bg-gray-100 dark:bg-gray-700
         text-gray-700 dark:text-gray-300;
}

.booking-status-cancelled {
  @apply bg-red-100 dark:bg-red-900/30
         text-red-700 dark:text-red-300;
}

/* --------------------------------------------
 * ACCESS CODE DISPLAY
 * -------------------------------------------- */

.access-code-container {
  @apply bg-gradient-to-r from-teal-50 to-emerald-50
         dark:from-teal-900/20 dark:to-emerald-900/20
         rounded-2xl
         border-2 border-teal-200 dark:border-teal-800/50
         p-6;
}

.access-code-label {
  @apply text-sm font-semibold text-gray-600 dark:text-gray-400
         uppercase tracking-wide mb-2;
}

.access-code {
  @apply text-4xl font-black text-gray-900 dark:text-white
         tracking-widest text-center
         font-mono;
}

.access-code-hint {
  @apply text-xs text-gray-500 dark:text-gray-400
         text-center mt-2;
}