/* Video Documentation Generator - Custom Styles */

/* These styles are loaded alongside Bootstrap */

/* Override Bootstrap primary color */
:root {
  --bs-primary: var(--primary-color, #0d6efd);
  --bs-primary-rgb: var(--primary-color-rgb, 13, 110, 253);
}

/* Custom button hover effects */
.btn-primary {
  transition: all 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
}

/* Card animations */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

/* Motion Badge - Editable */
.motion-badge {
  transition: all 0.15s ease;
}

.motion-badge:hover {
  transform: scale(1.05);
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.motion-badge .bi-pencil-fill {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.motion-badge:hover .bi-pencil-fill {
  opacity: 1;
}

/* Fix dropdown overflow in frame grid */
.frame-grid {
  overflow: visible !important;
}

.frame-card {
  overflow: visible !important;
}

/* Ensure dropdown menus appear above everything */
.dropdown-menu {
  z-index: 9999 !important;
}

/* When dropdown is open, increase z-index of parent */
.dropdown.show {
  z-index: 9998 !important;
}

/* Frame card with open dropdown gets highest z-index */
.frame-card:has(.dropdown.show) {
  z-index: 9997 !important;
}

/* Frame grid responsiveness */
@media (max-width: 576px) {
  .frame-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .frame-card img {
    height: 100px !important;
  }
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  /* Dark mode styles can be added here */
}