/* Additional component styles that complement Tailwind */

/* Toast notification */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast-container > * {
  pointer-events: auto;
}

/* Modal overlay */
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* Table row hover transition */
.table-row-hover {
  transition: background-color 0.15s ease;
}

/* Sidebar transition */
.sidebar-transition {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Dropdown animation */
.dropdown-enter {
  animation: fadeIn 0.15s ease-out;
}

/* Card hover effect */
.card-hover {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.dark .card-hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid hsl(var(--muted));
  border-top-color: hsl(var(--primary));
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Page transition */
.page-enter {
  animation: fadeIn 0.3s ease-out;
}

/* Image placeholder */
.img-placeholder {
  background: linear-gradient(135deg, hsl(var(--muted)) 0%, hsl(var(--border)) 100%);
}