/* components/overlays: Modal and drawer (ui/dialog.js), Toast (ui/toast.js), Tooltip (ui/Tooltip.js) and Menu
   (ui/menu.js), on the design-system tokens. Values from DS components/feedback/Dialog.jsx, Toast.jsx, Tooltip.jsx,
   components/data/AdvancedSearch.jsx (the drawer), components/core/ActionMenu.jsx and navigation/TopBar.jsx (the
   menu surface and MenuRow); the few literals are the component's own (noted where they appear). */

/* ---- Modal (DS feedback/Dialog.jsx) on the native <dialog> ---- */
.ae-dialog {
  width: 520px; max-width: calc(100% - var(--s-8)); max-height: 80vh; /* DS Dialog: 80% of the host */
  margin: auto; padding: 0; border: 0; border-radius: var(--radius-sheet);
  background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.ae-dialog--sm { width: 420px; /* DS Dialog sm */ }
.ae-dialog--lg { width: 640px; /* DS Dialog lg */ }
.ae-dialog::backdrop { background: var(--surface-overlay); backdrop-filter: var(--blur-sheet); }
.ae-dialog[open] { animation: ae-rise var(--duration-normal) var(--ease-entrance); }
.ae-dialog[open]::backdrop { animation: ae-fade-in var(--duration-normal) var(--ease-standard); }
.ae-dialog__panel { display: flex; flex-direction: column; max-height: inherit; min-height: 0; }
.ae-dialog--modal .ae-dialog__panel { max-height: 80vh; }
.ae-dialog__header { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-2); }
.ae-dialog__title { flex: 1 1 auto; min-width: 0; margin: 0; font: var(--type-h4); color: var(--text-strong); }
.ae-dialog__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-2) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-4);
  font: var(--type-body-sm); color: var(--text-body);
}
.ae-dialog__description { color: var(--text-muted); }
.ae-dialog__footer {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2);
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.ae-confirm__message { color: var(--text-body); }

/* ---- Drawer: the right-side panel of DS data/AdvancedSearch.jsx ---- */
.ae-dialog--drawer {
  width: 640px; /* DS AdvancedSearch default width */
  max-width: calc(100% - 2 * var(--s-4)); height: calc(100dvh - 2 * var(--s-4)); max-height: calc(100dvh - 2 * var(--s-4));
  margin: var(--s-4) var(--s-4) var(--s-4) auto;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-chrome); box-shadow: var(--shadow-lg);
}
.ae-dialog--drawer.ae-dialog--sm { width: 420px; }
.ae-dialog--drawer.ae-dialog--md { width: 520px; }
.ae-dialog--drawer[open] { animation: ae-drawer-in var(--duration-sheet) var(--ease-entrance); }
.ae-dialog--drawer .ae-dialog__panel { height: 100%; max-height: none; }
.ae-dialog--drawer .ae-dialog__header { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-subtle); }
.ae-dialog--drawer .ae-dialog__title { font: var(--type-label); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.ae-dialog--drawer .ae-dialog__body { padding: var(--s-4); }
.ae-dialog--drawer .ae-dialog__footer { align-items: center; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border-subtle); }
/* the panel arrives from its own edge (a sheet's travel; the DS names --duration-sheet for it) */
@keyframes ae-drawer-in { from { opacity: 0; transform: translateX(var(--s-6)); } to { opacity: 1; transform: none; } }
[dir="rtl"] .ae-dialog--drawer { margin: var(--s-4) auto var(--s-4) var(--s-4); }

/* ---- Toast (DS feedback/Toast.jsx): bottom-right stack, top on mobile ---- */
.ae-toast-region {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2);
  width: min(420px, calc(100vw - 2 * var(--s-4))); /* DS Toast max width */
  pointer-events: none;
}
/* The stack never covers a pinned control row in the bottom-right corner, where it sits. Two page shells pin one there:
   a list screen's table footer (the pager: --gutter-inset + the card's --s-2 inset + the body's --s-2 + a
   --control-h-sm pager) and a FormCanvas's action row (DS CANVAS_BLOCK_GAP 20px + the row: --s-3 padding, a 36.75px
   button, --s-3 padding). While one is on screen the stack rises --s-3 above it, so a "Key revoked" toast never hides
   the pager and a "Saved" toast never covers the Save button for its 5 s. (Rows under it scroll; the pinned row
   cannot.) The canvas rule comes last: a canvas page wins over a paged table inside it. */
:root:has(.ae-data-table.is-filled .ae-table-footer) .ae-toast-region {
  bottom: calc(var(--gutter-inset) + 2 * var(--s-2) + var(--control-h-sm) + var(--s-3));
}
:root:has(.ae-form-canvas__actions) .ae-toast-region { bottom: calc(20px + 36.75px + 2 * var(--s-3) + var(--s-3)); }
[data-layout="mobile"] .ae-toast-region { top: var(--s-4); bottom: auto; right: var(--s-4); }
.ae-toast {
  --ae-tone-fg: var(--status-info-fg);
  pointer-events: auto; display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--ae-tone-fg); border-left: var(--accent-bar-w) solid var(--ae-tone-fg);
  border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-lg);
  animation: ae-rise var(--duration-normal) var(--ease-entrance);
}
.ae-toast--success { --ae-tone-fg: var(--status-success-fg); }
.ae-toast--warning { --ae-tone-fg: var(--status-warning-fg); }
.ae-toast--danger { --ae-tone-fg: var(--status-danger-fg); }
.ae-toast__icon { display: grid; flex-shrink: 0; color: var(--ae-tone-fg); }
.ae-toast__text { flex: 1 1 auto; min-width: 0; font: var(--type-body-sm); color: var(--text-strong); overflow-wrap: anywhere; }
.ae-toast__close {
  display: inline-flex; flex-shrink: 0; padding: 0; border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-subtle); cursor: pointer; transition: var(--transition-control);
}
.ae-toast__close:hover { color: var(--text-strong); }

/* ---- Tooltip (DS feedback/Tooltip.jsx): fixed, placed by ui/Tooltip.js ---- */
.ae-tooltip-anchor { display: inline-flex; min-width: 0; }
.ae-tooltip {
  position: fixed; z-index: 3000; width: max-content; max-width: 32ch;
  padding: var(--s-1) var(--s-2); border-radius: var(--radius-xs);
  background: var(--surface-inverse); color: var(--surface-card); box-shadow: var(--shadow-md);
  font: var(--type-caption); font-size: var(--text-2xs); text-align: center; white-space: normal;
  pointer-events: none; animation: ae-fade-in var(--duration-fast) var(--ease-standard);
}
.ae-tooltip--left, .ae-tooltip--right { text-align: start; }
.ae-tooltip::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.ae-tooltip--top::after {
  top: 100%; left: var(--ae-tooltip-arrow, 50%); margin-left: -4px;
  border-width: 4px 4px 0 4px; border-color: var(--surface-inverse) transparent transparent transparent;
}
.ae-tooltip--bottom::after {
  bottom: 100%; left: var(--ae-tooltip-arrow, 50%); margin-left: -4px;
  border-width: 0 4px 4px 4px; border-color: transparent transparent var(--surface-inverse) transparent;
}
.ae-tooltip--left::after {
  left: 100%; top: var(--ae-tooltip-arrow, 50%); margin-top: -4px;
  border-width: 4px 0 4px 4px; border-color: transparent transparent transparent var(--surface-inverse);
}
.ae-tooltip--right::after {
  right: 100%; top: var(--ae-tooltip-arrow, 50%); margin-top: -4px;
  border-width: 4px 4px 4px 0; border-color: transparent var(--surface-inverse) transparent transparent;
}

/* ---- Menu (DS core/ActionMenu.jsx surface, navigation/TopBar.jsx MenuRow) ---- */
.ae-menu {
  z-index: 40; display: flex; flex-direction: column; min-width: 220px; /* DS account menu */
  padding: var(--s-1); border: var(--border-width-hairline) solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-raised); box-shadow: var(--shadow-lg);
  animation: ae-rise var(--duration-normal) var(--ease-entrance);
}
.ae-menu--fixed { position: fixed; }
.ae-menu--attached { position: absolute; top: calc(100% + var(--s-1)); }
.ae-menu--end { inset-inline-end: 0; }
.ae-menu--start { inset-inline-start: 0; }
.ae-menu__item {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 30px; /* DS MenuRow */
  padding: 0 var(--s-2); border: none; border-radius: var(--radius-xs); background: transparent;
  font: var(--type-body-sm); color: var(--text-body); text-align: start; text-decoration: none; cursor: pointer;
  transition: var(--transition-control);
}
.ae-menu__item:hover, .ae-menu__item:focus-visible { background: var(--surface-hover); color: var(--text-strong); text-decoration: none; }
.ae-menu__item:focus-visible { outline-offset: -2px; }
.ae-menu__item--danger, .ae-menu__item--danger:hover, .ae-menu__item--danger:focus-visible { color: var(--status-danger-fg); }
.ae-menu__item:disabled, .ae-menu__item[aria-disabled="true"] { opacity: 0.55; color: var(--text-subtle); cursor: not-allowed; background: transparent; }
.ae-menu__icon { display: inline-flex; flex-shrink: 0; color: var(--text-subtle); }
.ae-menu__item--danger .ae-menu__icon { color: inherit; }
.ae-menu__label { flex: 1 1 auto; min-width: 0; }
.ae-menu__value { flex-shrink: 0; color: var(--text-subtle); font-size: var(--text-2xs); }
.ae-menu__separator { height: 1px; margin-block: var(--s-1); background: var(--border-subtle); }