/* Event Calendar Integration Styles */

/* Mantine theme integration for calendar */
.mantine-calendar {
  --ec-bg-color: var(--mantine-color-body);
  --ec-text-color: var(--mantine-color-text);
  --ec-border-color: var(--mantine-color-gray-3);
  --ec-button-bg-color: var(--mantine-color-blue-6);
  --ec-button-text-color: var(--mantine-color-white);
  --ec-button-border-color: var(--mantine-color-blue-6);
  --ec-button-active-bg-color: var(--mantine-color-blue-7);
  --ec-today-bg-color: var(--mantine-color-blue-0);
  --ec-highlight-color: var(--mantine-color-blue-1);
}

/* Dark theme support */
[data-mantine-color-scheme="dark"] .mantine-calendar {
  --ec-bg-color: var(--mantine-color-dark-7);
  --ec-text-color: var(--mantine-color-dark-0);
  --ec-border-color: var(--mantine-color-dark-4);
  --ec-button-bg-color: var(--mantine-color-blue-6);
  --ec-button-text-color: var(--mantine-color-white);
  --ec-button-border-color: var(--mantine-color-blue-6);
  --ec-button-active-bg-color: var(--mantine-color-blue-7);
  --ec-today-bg-color: var(--mantine-color-dark-6);
  --ec-highlight-color: var(--mantine-color-dark-5);
}

/* Timeline specific styling */
.mantine-timeline {
  font-family: var(--mantine-font-family);
  font-size: var(--mantine-font-size-sm);
}

/* Resource labels styling */
.mantine-timeline .ec-resource {
  border-bottom: 1px solid var(--ec-border-color);
}

.mantine-timeline .ec-resource:hover {
  background-color: var(--ec-highlight-color);
}

/* Header styling */
.mantine-timeline .ec-header {
  background-color: var(--ec-bg-color);
  border-bottom: 2px solid var(--ec-border-color);
}

.mantine-timeline .ec-toolbar {
  padding: 1rem;
  background-color: var(--ec-bg-color);
}

.mantine-timeline .ec-button {
  background-color: var(--ec-button-bg-color);
  color: var(--ec-button-text-color);
  border: 1px solid var(--ec-button-border-color);
  border-radius: var(--mantine-radius-sm);
  padding: 0.5rem 1rem;
  font-size: var(--mantine-font-size-sm);
  font-weight: 500;
  transition: all 0.2s ease;
}

.mantine-timeline .ec-button:hover {
  background-color: var(--ec-button-active-bg-color);
  transform: translateY(-1px);
}

.mantine-timeline .ec-button:active {
  transform: translateY(0);
}

/* Time slots styling */
.mantine-timeline .ec-time {
  border-right: 1px solid var(--ec-border-color);
  background-color: var(--ec-bg-color);
  color: var(--ec-text-color);
  font-size: var(--mantine-font-size-xs);
}

.mantine-timeline .ec-line {
  border-right: 1px solid var(--ec-border-color);
}

/* Today indicator */
.mantine-timeline .ec-today {
  background-color: var(--ec-today-bg-color);
}

/* Scrollbar styling */
.mantine-timeline .ec-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mantine-timeline .ec-container::-webkit-scrollbar-track {
  background: var(--mantine-color-gray-1);
  border-radius: 4px;
}

.mantine-timeline .ec-container::-webkit-scrollbar-thumb {
  background: var(--mantine-color-gray-4);
  border-radius: 4px;
}

.mantine-timeline .ec-container::-webkit-scrollbar-thumb:hover {
  background: var(--mantine-color-gray-5);
}

/* Dark theme scrollbar */
[data-mantine-color-scheme="dark"] .mantine-timeline .ec-container::-webkit-scrollbar-track {
  background: var(--mantine-color-dark-6);
}

[data-mantine-color-scheme="dark"] .mantine-timeline .ec-container::-webkit-scrollbar-thumb {
  background: var(--mantine-color-dark-4);
}

[data-mantine-color-scheme="dark"] .mantine-timeline .ec-container::-webkit-scrollbar-thumb:hover {
  background: var(--mantine-color-dark-3);
}

/* Resource label content styling */
.mantine-timeline .ec-sidebar {
  background-color: var(--ec-bg-color);
  border-right: 2px solid var(--ec-border-color);
}

.mantine-timeline .ec-sidebar-title {
  background-color: var(--ec-bg-color);
  border-bottom: 1px solid var(--ec-border-color);
  font-weight: 600;
  padding: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mantine-timeline .ec-toolbar {
    padding: 0.5rem;
  }
  
  .mantine-timeline .ec-button {
    padding: 0.25rem 0.5rem;
    font-size: var(--mantine-font-size-xs);
  }
  
  .mantine-timeline .ec-sidebar {
    min-width: 150px;
  }
}

/* Loading state */
.calendar-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background-color: var(--ec-bg-color);
  border: 1px solid var(--ec-border-color);
  border-radius: var(--mantine-radius-md);
}

/* Fix for DateRangeInput calendar visibility in modals */
.mantine-DatePickerInput-dropdown {
  z-index: 9999 !important;
}

/* Additional fix for calendar popover */
.mantine-Popover-dropdown {
  z-index: 9999 !important;
}

/* Fix for date picker calendar specifically */
.mantine-DatePicker-calendar {
  z-index: 9999 !important;
}

/* Fix for any date picker dropdown */
.mantine-DateInput-dropdown,
.mantine-DateTimePicker-dropdown {
  z-index: 9999 !important;
}