/**
 * 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.

   NOTE: deliberately does NOT set `position`. Dropdown menus are positioned by
   Popper, which application.js configures with `strategy: 'fixed'` app-wide so a
   menu escapes any scrolling ancestor on its own. Popper writes `position: fixed`
   as an INLINE style, so a `position: absolute !important` here would win the
   cascade and re-trap every menu inside its scroll container while keeping the
   viewport-relative coordinates Popper computed — i.e. menus land in the wrong
   place. Leave positioning to Popper. */
.dropdown-menu {
  z-index: 1050 !important;
  /* Higher than most content but below modals */
}

.card {
  overflow: visible !important;
}

/* ...but a card that explicitly writes `.overflow-hidden` is asking to clip on
   purpose, and the blanket rule above silently took that away app-wide: same
   specificity (0,1,0) as Bootstrap's `.overflow-hidden`, both !important, and
   this file loads later, so it won.

   The visible damage is the card's rounded corners. In CSS painting order a
   child's background paints over its parent's border, and at a rounded corner
   the child's SQUARE box corner sticks out past the parent's curve — so an
   opaque square-cornered child (a flush list group, a media block, a tinted
   panel) paints across the corner arc and the card reads as square/clipped
   along that edge while the other corners stay round. `overflow: hidden` is
   what clips it back, which is exactly why those cards opt in.

   Two-class specificity (0,2,0) so the deliberate opt-in outranks the blanket
   rule while every card that never asked for clipping keeps it. Safe for
   dropdowns: application.js configures Popper with `strategy: 'fixed'`, so a
   menu is not clipped by an ancestor's overflow (see the note above), and no
   `.card.overflow-hidden` in app/views contains a dropdown toggle today. */
.card.overflow-hidden {
  overflow: hidden !important;
}

/* 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.
   `position` is intentionally omitted — see the note on `.dropdown-menu` above. */
.availability-calendar + .alert + .dropdown .dropdown-menu,
.card-header .dropdown .dropdown-menu,
.card-footer .dropdown .dropdown-menu {
  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` intentionally omitted — see the note on `.dropdown-menu` above. */
  /* 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; }
}