/* @block callout */
/* @used-by Table row actions, horizontal icon menus */
/* @patterns ui-2026-callout, ui-2026-callout__content, ui-2026-callout__icons */
/* =============================================================================
   CALLOUT - Horizontal Icon Callout Component
   
   Combines tooltip shape (bubble with arrow) with dropdown styling (colors, border, shadow)
   Displays action icons horizontally in a row
   Appears on click (not hover)
   ============================================================================= */

.ui-2026 .ui-2026-callout {
  position: relative;
  display: inline-flex;
}

.ui-2026 .ui-2026-callout__trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: hsl(var(--muted-foreground));
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ui-2026 .ui-2026-callout__trigger:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.ui-2026 .ui-2026-callout__trigger i {
  width: 16px;
  height: 16px;
}

/* Callout content - Tooltip shape with dropdown styling */
.ui-2026 .ui-2026-callout__content {
  position: absolute;
  /* @ai: SBOS-ONLINE-557 — bumped 50 -> 100 and made overflow explicit so the
     per-icon [data-tooltip] ::after bubble paints above adjacent table rows
     and is not clipped. The real positioning fix is `position: relative` on
     .ui-2026-callout__icon below — this panel's `transform` makes it the
     containing block for absolute children, so without that the tooltip
     anchored to the panel instead of the icon and rendered off the visible
     area (icons appeared to have no description). */
  z-index: 100;
  overflow: visible;
  bottom: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md, 6px);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px) scale(0.95);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Arrow pointing down to trigger (tooltip-style) */
.ui-2026 .ui-2026-callout__content::before {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 12px;
  width: 10px;
  height: 10px;
  background: hsl(var(--background));
  border-right: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  transform: rotate(45deg);
  z-index: -1;
}

/* Show callout when open */
.ui-2026 .ui-2026-callout.is-open .ui-2026-callout__content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Horizontal icon container */
.ui-2026 .ui-2026-callout__icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

/* Individual icon button */
.ui-2026 .ui-2026-callout__icon {
  /* @ai: SBOS-ONLINE-557 — anchor the shared [data-tooltip] ::after bubble to
     the icon itself. .ui-2026-callout__content has a `transform`, which makes
     it (not the icon) the containing block for absolutely-positioned
     descendants; without this the tooltip positioned relative to the panel
     and rendered off-screen, so callout action icons showed no description on
     hover. position: relative restores the icon as the containing block. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm, 4px);
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
  text-decoration: none;
}

.ui-2026 .ui-2026-callout__icon:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

.ui-2026 .ui-2026-callout__icon i {
  width: 18px;
  height: 18px;
  color: hsl(var(--muted-foreground));
  transition: color 0.1s ease;
}

.ui-2026 .ui-2026-callout__icon:hover i {
  color: hsl(var(--foreground));
}

/* Destructive variant */
.ui-2026 .ui-2026-callout__icon--destructive {
  color: hsl(var(--destructive));
}

.ui-2026 .ui-2026-callout__icon--destructive:hover {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
}

.ui-2026 .ui-2026-callout__icon--destructive i {
  color: hsl(var(--destructive));
}

/* Disabled state */
.ui-2026 .ui-2026-callout__icon.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Placement: Bottom (if needed) */
.ui-2026 .ui-2026-callout__content[data-placement="bottom"] {
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateY(-4px) scale(0.95);
}

.ui-2026 .ui-2026-callout.is-open .ui-2026-callout__content[data-placement="bottom"] {
  transform: translateY(0) scale(1);
}

.ui-2026 .ui-2026-callout__content[data-placement="bottom"]::before {
  top: -5px;
  bottom: auto;
  border-top: 1px solid hsl(var(--border));
  border-left: 1px solid hsl(var(--border));
  border-right: none;
  border-bottom: none;
}

/* Placement: Left (if needed) */
.ui-2026 .ui-2026-callout__content[data-placement="left"] {
  right: calc(100% + 8px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(4px) scale(0.95);
}

.ui-2026 .ui-2026-callout.is-open .ui-2026-callout__content[data-placement="left"] {
  transform: translateY(-50%) translateX(0) scale(1);
}

.ui-2026 .ui-2026-callout__content[data-placement="left"]::before {
  left: auto;
  right: -5px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) rotate(45deg);
  border-right: 1px solid hsl(var(--border));
  border-top: 1px solid hsl(var(--border));
  border-left: none;
  border-bottom: none;
}

/* Placement: Right (if needed) */
.ui-2026 .ui-2026-callout__content[data-placement="right"] {
  left: calc(100% + 8px);
  right: auto;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) translateX(-4px) scale(0.95);
}

.ui-2026 .ui-2026-callout.is-open .ui-2026-callout__content[data-placement="right"] {
  transform: translateY(-50%) translateX(0) scale(1);
}

.ui-2026 .ui-2026-callout__content[data-placement="right"]::before {
  right: auto;
  left: -5px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) rotate(45deg);
  border-left: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
  border-right: none;
  border-top: none;
}