/**
 * Dropdown Menu Visibility Fixes
 * 
 * This stylesheet fixes issues with dropdown menus being clipped or hidden
 * by parent containers with overflow: hidden or lower z-index values.
 */

/* Ensure dropdown menus are always on top */
.dropdown-menu {
  z-index: 1050 !important;
  /* Higher than most content but below modals */
  position: absolute !important;
  /* Force absolute positioning */
}

/* Ensure tables and cards don't clip overflowing content */
.table-responsive {
  overflow: visible !important;
}

.table-scroll-container {
  overflow: visible !important;
}

.card {
  overflow: visible !important;
}

/* Ensure table action dropdowns are properly positioned */
.table-action .dropdown-menu {
  transform: none !important;
  /* Prevent Bootstrap from applying transforms that might cause clipping */
}

/* Fix for any parent containers that might clip dropdowns */
.container-fluid,
.container,
.row,
.col,
[class^="col-"] {
  overflow: visible !important;
}

/* Ensure dropdown toggle buttons have proper position context */
.dropdown,
.dropend,
.dropstart,
.dropup {
  position: relative !important;
}

/* Fix for card headers and footers with dropdowns - ensure they don't clip menu */
.card-header,
.card-footer {
  overflow: visible !important;
}

/* Fix for main content area - ensure dropdowns can escape boundaries */
.main,
main.content {
  overflow: visible !important;
}

/* Ensure dropdown menus in card headers and footers have high enough z-index to appear above sticky nav */
.card-header .dropdown-menu,
.card-footer .dropdown-menu {
  z-index: 1055 !important;
}

/* Fix for availability calendar page dropdown specifically */
.availability-calendar + .alert + .dropdown .dropdown-menu,
.card-header .dropdown .dropdown-menu,
.card-footer .dropdown .dropdown-menu {
  position: absolute !important;
  z-index: 1055 !important;
}

/* Fix for team availability show_user_availability page - 
   Prevents dropdown and buttons from being clipped or misaligned */
[data-controller="availability-calendar"] .card-header {
  position: relative !important;
  overflow: visible !important;
  z-index: auto !important;
}

[data-controller="availability-calendar"] .card-header .dropdown {
  position: relative !important;
  z-index: 1 !important;
}

[data-controller="availability-calendar"] .card-header .dropdown-menu {
  z-index: 1060 !important;
  position: absolute !important;
  /* Ensure the dropdown menu doesn't get clipped at page boundaries */
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
}

/* Ensure the card actions button group aligns properly within card header */
[data-controller="availability-calendar"] .card-header .d-flex.align-items-center.gap-2 {
  flex-shrink: 0 !important;
  /* Prevent action buttons from being compressed */
}

/* Ensure wrapper and main container don't clip dropdown content */
.wrapper,
.main {
  overflow: visible !important;
}

/* AdminKit's dropdownAnimation animated `transform` (translateY at 0%, translate(0)
   at 100%). Per CSS spec, an animation's keyframe transform overrides inline styles
   for the animated property — and with animation-fill-mode: forwards, that override
   persists. The result: Popper's `transform: translate(x, y)` (set inline to position
   the menu below the toggle) was getting frozen at translate(0,0), making the menu
   overlap its toggle button. Redefining the keyframes to animate only opacity keeps
   the fade-in effect without breaking Popper positioning. */
@keyframes dropdownAnimation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}