/* ============================================
   ATACAMA DARK SKY — Calendar Component Styles
   Restyled with new design tokens
   ============================================ */

.custom-calendar {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-lg);
  max-width: 480px;
  margin: 0 auto;
}

.custom-calendar .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.custom-calendar .calendar-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.custom-calendar .calendar-header .nav-btn {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast);
}

.custom-calendar .calendar-header .nav-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--space-sm);
}

.calendar-weekdays .weekday {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-xs) 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-day {
  position: relative;
  text-align: center;
  padding: 6px 2px;
  min-height: 52px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--duration-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid transparent;
}

.calendar-day:not(.empty):not(.past):not(.unavailable-moon):not(.sold-out):hover {
  background: var(--color-accent-glow);
  border-color: var(--color-accent);
}

.calendar-day .day-number {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: 1;
}

.calendar-day .moon-emoji {
  font-size: 0.65rem;
  line-height: 1;
  opacity: 0.7;
}

.calendar-day.empty {
  cursor: default;
}

/* Available (default) */
.calendar-day:not(.empty):not(.past):not(.unavailable-moon):not(.sold-out):not(.late-private-only) .day-number {
  color: var(--color-accent);
}

/* Past */
.calendar-day.past {
  cursor: default;
  opacity: 0.3;
}

.calendar-day.past .day-number {
  color: var(--color-text-muted);
}

/* Unavailable (moon) */
.calendar-day.unavailable-moon {
  cursor: not-allowed;
  opacity: 0.4;
}

.calendar-day.unavailable-moon .day-number {
  color: var(--color-text-muted);
}

/* Sold out */
.calendar-day.sold-out {
  cursor: not-allowed;
}

.calendar-day.sold-out .day-number {
  color: var(--color-text-muted);
}

.sold-out-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Late private only */
.calendar-day.late-private-only {
  border-color: rgba(201, 169, 110, 0.25);
}

.late-private-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

/* Today */
.calendar-day.today {
  border-color: var(--color-accent);
}

/* Selected */
.calendar-day.selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.calendar-day.selected .day-number {
  color: var(--color-bg-deep) !important;
  font-weight: 500;
}

.calendar-day.selected .moon-emoji {
  opacity: 1;
}

/* Astronomical events */
.astro-event {
  font-size: 0.6rem;
  line-height: 1;
}

.calendar-day.has-event {
  position: relative;
}

/* Legend */
.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.legend-dot.available { background: var(--color-accent); }
.legend-dot.selected { background: var(--color-accent); border: 2px solid var(--color-text-primary); }
.legend-dot.late-private { background: transparent; border: 1px solid var(--color-accent); }
.legend-dot.sold-out { background: #ef4444; opacity: 0.6; }
.legend-dot.unavailable-moon { background: var(--color-text-muted); opacity: 0.3; }
.legend-dot.past { background: var(--color-text-muted); opacity: 0.2; }

.legend-events {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
}

.legend-event-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.event-icon {
  font-size: 0.8rem;
}

/* Calendar help text */
.calendar-help {
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

/* Selected date display */
.selected-datetime {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  margin-top: var(--space-md);
}

.selected-datetime i {
  color: var(--color-accent);
  font-size: 1.25rem;
}

.selected-datetime h5 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-accent);
  margin: var(--space-xs) 0;
}

.selected-datetime p {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  margin: var(--space-xs) 0;
}

.selected-datetime small {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .custom-calendar {
    padding: var(--space-md);
  }

  .calendar-day {
    min-height: 44px;
    padding: 4px 1px;
  }

  .calendar-day .day-number {
    font-size: 0.8rem;
  }

  .calendar-legend {
    gap: var(--space-xs) var(--space-md);
  }
}