/**
 * @file
 * Belegungskalender-Styling
 * Überschreibt die Standard-Styles aus rentable_occupancy_calendar
 */

/* ==========================================================================
   Kalender-Container
   ========================================================================== */

.occupancy-calendar-wrapper {
  background-color: var(--nn-secondary-light);
  border-radius: var(--nn-radius);
  padding: var(--nn-space-lg);
  box-shadow: var(--nn-shadow);
  border: 1px solid var(--nn-secondary-dark);
}

.occupancy-calendar-wrapper .occupancy-calendar__container {
  overflow-x: auto;
}

.occupancy-calendar-wrapper .occupancy-calendar__legend {
  justify-content: center;
}

.block-occupancy-calendar-block .rdp-calendar.rdp-calendar--readonly {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  width: 100% !important;
  padding: var(--nn-space-md) !important;
}

/* Monate flexibel verteilen */
.rdp-calendar--readonly .rdp-months {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--nn-space-lg) !important;
}

.rdp-calendar--readonly .rdp-month {
  flex: 1 1 200px !important;
  max-width: 280px !important;
  min-width: 200px !important;
}

/* Block-Titel (vom JavaScript gerendert) */
.occupancy-calendar-wrapper .occupancy-calendar__title,
.occupancy-calendar-wrapper > h2,
.block-occupancy-calendar-block > h2 {
  display: block !important;
  visibility: visible !important;
  font-size: var(--nn-font-size-sm) !important;
  font-weight: var(--nn-font-weight-semibold) !important;
  color: var(--nn-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 var(--nn-space-md) 0 !important;
  padding-bottom: var(--nn-space-sm) !important;
  border-bottom: 2px solid var(--nn-secondary-dark) !important;
  text-align: center !important;
}

/* ==========================================================================
   Kalender-Navigation
   ========================================================================== */

.rdp-calendar--readonly .rdp-header-row {
  margin-bottom: var(--nn-space-md);
}

.rdp-calendar--readonly .rdp-prev,
.rdp-calendar--readonly .rdp-next {
  background: var(--nn-secondary) !important;
  border: 1px solid var(--nn-secondary-dark) !important;
  border-radius: var(--nn-radius-sm) !important;
  color: var(--nn-primary) !important;
  transition: all var(--nn-transition-fast);
}

.rdp-calendar--readonly .rdp-prev:hover,
.rdp-calendar--readonly .rdp-next:hover {
  background: var(--nn-secondary-dark) !important;
  border-color: var(--nn-accent) !important;
}

.rdp-calendar--readonly .rdp-month-jump {
  border: 1px solid var(--nn-border);
  border-radius: var(--nn-radius-sm);
  padding: var(--nn-space-sm) var(--nn-space-md);
  font-size: var(--nn-font-size-sm);
  color: var(--nn-text);
}

.rdp-calendar--readonly .rdp-month-jump:focus {
  outline: 2px solid var(--nn-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Monatsüberschriften
   ========================================================================== */

.rdp-calendar--readonly .rdp-month-header {
  font-weight: var(--nn-font-weight-semibold);
  font-size: var(--nn-font-size-lg);
  color: var(--nn-primary);
  margin-bottom: var(--nn-space-md);
  text-align: center;
}

/* ==========================================================================
   Wochentags-Header
   ========================================================================== */

.rdp-calendar--readonly .rdp-cell--header {
  font-weight: var(--nn-font-weight-medium);
  font-size: var(--nn-font-size-sm);
  color: var(--nn-text-muted);
  padding: var(--nn-space-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   Tages-Zellen
   ========================================================================== */

.rdp-calendar--readonly .rdp-day {
  border-radius: var(--nn-radius-sm);
  font-weight: var(--nn-font-weight-medium);
  transition: transform var(--nn-transition-fast), box-shadow var(--nn-transition-fast);
}

/* Verfügbar - Mintgrün */
.rdp-calendar--readonly .rdp-day--available {
  background: var(--nn-available) !important;
  color: var(--nn-text);
}

/* Belegt - Sanftes Rosa */
.rdp-calendar--readonly .rdp-day--booked {
  background: var(--nn-unavailable) !important;
  color: var(--nn-text);
}

/* Vergangene Tage - Grau (schlägt alle booked-Klassen inkl. rentable-picker.css !important) */
.rdp-calendar--readonly .rdp-day--disabled,
.rdp-calendar--readonly .rdp-day--past,
.rdp-calendar--readonly .rdp-day--booked.rdp-day--past,
.rdp-calendar--readonly .rdp-day--booked.rdp-day--booked-start.rdp-day--past,
.rdp-calendar--readonly .rdp-day--booked.rdp-day--booked-end.rdp-day--past,
.rdp-calendar--readonly .rdp-day--booked.rdp-day--booked-start.rdp-day--booked-end.rdp-day--past,
.rdp-calendar--readonly .rdp-day--booked-start.rdp-day--past,
.rdp-calendar--readonly .rdp-day--booked-end.rdp-day--past {
  background: var(--nn-light-gray) !important;
  background-color: var(--nn-light-gray) !important;
  background-image: none !important;
  color: var(--nn-gray-medium) !important;
}

/* Wochenenden hervorheben */
.rdp-calendar--readonly .rdp-day--weekend:not(.rdp-day--empty):not(.rdp-day--past) {
  font-weight: var(--nn-font-weight-bold);
}

/* Hover-Effekt */
.rdp-calendar--readonly .rdp-day:not(.rdp-day--empty):not(.rdp-day--past):hover {
  transform: scale(1.1);
  box-shadow: var(--nn-shadow);
  z-index: 1;
  position: relative;
}

/* ==========================================================================
   Halbtags-Indikatoren (An-/Abreise)
   ========================================================================== */

/* Fall 3: Anreisetag – DLO grün, DRU rot */
.rdp-calendar--readonly .rdp-day.rdp-day--booked-start:not(.rdp-day--booked-end):not(.rdp-day--past) {
  background-color: transparent !important;
  background-image: linear-gradient(135deg,
    var(--nn-available) 0%,
    var(--nn-available) 50%,
    var(--nn-unavailable) 50%,
    var(--nn-unavailable) 100%) !important;
}

/* Fall 2: Abreisetag – DLO rot, DRU grün (booked-end ohne booked-Klasse) */
.rdp-calendar--readonly .rdp-day.rdp-day--booked-end:not(.rdp-day--booked-start):not(.rdp-day--past) {
  background-color: transparent !important;
  background-image: linear-gradient(135deg,
    var(--nn-unavailable) 0%,
    var(--nn-unavailable) 50%,
    var(--nn-available) 50%,
    var(--nn-available) 100%) !important;
}

/* Fall 4: An- und Abreise am selben Tag – ganzer Tag rot */
.rdp-calendar--readonly .rdp-day.rdp-day--booked-start.rdp-day--booked-end:not(.rdp-day--past) {
  background: var(--nn-unavailable) !important;
  background-image: none !important;
}

/* ==========================================================================
   Legende
   ========================================================================== */

.occupancy-calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nn-space-lg);
  justify-content: center;
  margin-top: var(--nn-space-md);
  padding: var(--nn-space-md);
  background: var(--nn-secondary-light);
  border-radius: var(--nn-radius-sm);
  border: 1px solid var(--nn-secondary-dark);
}

.occupancy-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: var(--nn-space-sm);
  font-size: var(--nn-font-size-sm);
  color: var(--nn-text);
}

.occupancy-calendar__legend-color {
  width: 24px;
  height: 24px;
  border-radius: var(--nn-radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: var(--nn-shadow-sm);
}

.occupancy-calendar__legend-item--available .occupancy-calendar__legend-color {
  background: var(--nn-available);
}

.occupancy-calendar__legend-item--unavailable .occupancy-calendar__legend-color {
  background: var(--nn-unavailable);
}

/* ==========================================================================
   Responsive Anpassungen
   ========================================================================== */

@media (max-width: 768px) {
  .occupancy-calendar-wrapper {
    padding: var(--nn-space-md);
  }
  
  .occupancy-calendar__legend {
    gap: var(--nn-space-md);
  }
}