/* ============================================================
 * NextGen MIS — Stacked actions menu (`.ng-actions-menu`)
 * ------------------------------------------------------------
 * In-row (or toolbar) overflow menu: one compact toggle opens a
 * vertically stacked list of actions. Built on Bootstrap 3's
 * `.dropdown` behaviour; menu chrome inherits the global
 * token-driven `.dropdown-menu` rules in `_chrome.css`.
 *
 * Primary consumer: DataTables action columns with 3+ links.
 * ============================================================ */

.ng-actions-menu {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

/* Toggle — compact secondary, same footprint as other in-row actions.
   `.btn-sm` (page toolbar) inherits DS button sizing; `.btn-xs` stays the
   dense in-row default. */
.ng-actions-menu__toggle.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  line-height: 1;
}

/* Right-aligned menus (page toolbar) open flush under the toggle's right edge */
.ng-actions-menu__menu.dropdown-menu.dropdown-menu-right {
  left: auto;
  right: 0;
}

.ng-actions-menu__toggle .caret {
  margin-left: 0;
}

/* Stacked panel — flush under the toggle so the block reads as one control */
.ng-actions-menu__menu.dropdown-menu {
  float: none;
  left: 0;
  right: auto;
  min-width: 100%;
  margin-top: 0;
  padding: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown);
}

/* Dropdown pointer, kept aligned to the toggle. The menu right-anchors to stay
   on screen (see refinements.js placeMenu), so the vendor triangle — pinned at
   a fixed left — would point at empty space; drive its X from
   `--ng-actions-arrow-x` so it always sits under the toggle. Falls back to the
   vendor offset for a left-anchored (non-escaped) menu, where the toggle is
   already at the menu's left. `!important` defeats the Metronic vendor rule. */
.ng-actions-menu__menu.dropdown-menu::before {
  left: var(--ng-actions-arrow-x, 9px) !important;
  right: auto !important;
  /* Match the menu's own border/fill so the triangle adapts to dark mode —
     the vendor arrow is a hard-coded light grey/white otherwise. */
  border-bottom-color: var(--color-border-default) !important;
}
.ng-actions-menu__menu.dropdown-menu::after {
  left: calc(var(--ng-actions-arrow-x, 9px) + 1px) !important;
  right: auto !important;
  border-bottom-color: var(--color-bg-surface) !important;
}

.ng-actions-menu.open > .ng-actions-menu__toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  z-index: calc(var(--z-dropdown) + 1);
}

/* Each action is a full-width row in the stack */
.ng-actions-menu__menu > li > a,
.ng-actions-menu__menu > li > button.ng-actions-menu__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-default);
  cursor: pointer;
}

.ng-actions-menu__menu > li > a > i,
.ng-actions-menu__menu > li > button.ng-actions-menu__item > i {
  margin-right: var(--space-1);
  width: 14px;
  text-align: center;
}

.ng-actions-menu__menu > li + li > a,
.ng-actions-menu__menu > li + li > button.ng-actions-menu__item {
  border-top: 1px solid var(--color-border-default);
}

/* Hover — Chrome only styles `.dropdown-menu > li > a`; buttons need parity.
   Skip disabled / aria-disabled stubs so they never pick up the hover fill. */
.ng-actions-menu__menu > li > a:hover,
.ng-actions-menu__menu > li > a:focus,
.ng-actions-menu__menu > li > button.ng-actions-menu__item:hover:not(:disabled):not([aria-disabled="true"]),
.ng-actions-menu__menu > li > button.ng-actions-menu__item:focus:not(:disabled):not([aria-disabled="true"]) {
  outline: none;
  background-color: var(--color-bg-sunken);
  color: var(--color-text-strong);
}

.ng-actions-menu__menu > li:last-child > a,
.ng-actions-menu__menu > li:last-child > button.ng-actions-menu__item {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

/* Optional primary emphasis on one menu row (e.g. Beneficiaries) */
.ng-actions-menu__menu > li > a.ng-actions-menu__item--primary,
.ng-actions-menu__menu > li > button.ng-actions-menu__item.ng-actions-menu__item--primary {
  color: var(--color-brand-primary);
}

.ng-actions-menu__menu > li > a.ng-actions-menu__item--primary:hover,
.ng-actions-menu__menu > li > a.ng-actions-menu__item--primary:focus,
.ng-actions-menu__menu > li > button.ng-actions-menu__item.ng-actions-menu__item--primary:hover:not(:disabled):not([aria-disabled="true"]),
.ng-actions-menu__menu > li > button.ng-actions-menu__item.ng-actions-menu__item--primary:focus:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--color-brand-primary) 8%, var(--color-bg-surface));
  color: var(--color-brand-primary-hover);
}

/* Disabled / stub rows (e.g. Generate when file exists, Archive until wired) */
.ng-actions-menu__menu > li > button.ng-actions-menu__item:disabled,
.ng-actions-menu__menu > li > button.ng-actions-menu__item[aria-disabled="true"] {
  opacity: 0.45;
  color: var(--color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Escapes overflow scrollers when opened inside `.ng-tablescroll` (see refinements.js) */
.ng-actions-menu__menu.is-fixed {
  position: fixed;
  display: block;
  float: none;
  margin: 0;
}