/**
 * 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;
}