@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

.turbo-progress-bar {
  height: 4px;
  /* @apply bg-; */
}

/* Add smooth transitions for dynamic content */
[data-subdomain-preview-target="preview"] {
  @apply transition-colors duration-200 ease-in-out;
}

[data-subdomain-preview-target="message"] {
  @apply transition-all duration-200 ease-in-out;
}

/* Subdomain input styling */
[data-subdomain-preview-target="input"]:invalid {
  @apply border-red-300 focus:border-red-500 focus:ring-red-500;
}

[data-subdomain-preview-target="input"]:valid {
  @apply border-green-300 focus:border-green-500 focus:ring-green-500;
}


/* Mobile Menu Animations */
.menu-closed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: all 0.4s ease-in-out;
}

.menu-open {
  max-height: 500px;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
  transition: all 0.4s ease-in-out;
}

/* Calendar Event Styles */
.reservation-event {
  border-radius: 4px;
  font-size: 0.75rem;
  padding: 2px 4px;
}

.maintenance-event {
  border-radius: 4px;
  font-size: 0.75rem;
  padding: 2px 4px;
}

.blocked-event {
  border-radius: 4px;
  font-size: 0.75rem;
  padding: 2px 4px;
}

.overdue-event {
  animation: pulse 2s infinite;
}

/* FullCalendar Overrides */
.fc-event {
  border-radius: 4px;
  font-size: 0.75rem;
  padding: 2px 4px;
  margin-bottom: 1px;
}

.fc-daygrid-event {
  border-radius: 4px;
  font-size: 0.75rem;
  padding: 2px 4px;
  margin-bottom: 1px;
}

.fc-event-title {
  font-weight: 500;
}

.fc-toolbar {
  margin-bottom: 1rem;
}

.fc-toolbar-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.fc-button {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #374151;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.fc-button:hover {
  background-color: #e5e7eb;
}

.fc-button-primary {
  background-color: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.fc-button-primary:hover {
  background-color: #2563eb;
}

.fc-button-active {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  color: white;
}

.fc-today {
  background-color: #fef3c7;
}

.fc-day-today .fc-daygrid-day-number {
  background-color: #f59e0b;
  color: white;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}