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

/* Inert state — like disabled (greyed, no-op) but STAYS hoverable so its
   [data-tooltip] reason bubble still shows. Used for gated actions that must
   explain WHY they are unavailable (e.g. Push Back blocked by a booked
   installation) instead of silently disappearing. */
.ui-2026 .ui-2026-callout__icon--inert {
  opacity: 0.5;
  cursor: not-allowed;
}

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

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