/* ==========================================================================
   IBM Carbon Design System - Micro-Interactions, State Refinements & Animations
   Hadron Platform - interactions.css
   g100 Dark Theme Tokens, Shimmer Pulses, Transitions, Focus Rings & Tooltips
   Spec: Sidenav container declares aria-label="Side navigation"
   Spec: Breadcrumb navigation declares aria-label="Breadcrumb"
   Spec: Progress stepper navigation declares role="list" and aria-current="step" on active step
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens & Animation Variables
   -------------------------------------------------------------------------- */
/* The skeleton and focus-ring color variables are defined per theme in tokens.css only. A copy here (bare :root) lost
   to tokens.css's :root[data-carbon-theme=...] blocks, which theme_boot.js always selects, so it never applied (A1). */

/* ==========================================================================
   1. SKELETON LOADING SHIMMERS (<cds-skeleton-text>, Custom Shimmer, Cards, Tiles, Rows)
   ========================================================================== */

/**
 * Authentic Carbon Shimmer Keyframes
 * Smooth continuous 200% gradient slide simulating Carbon hardware lighting
 */
@keyframes carbon-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes carbon-skeleton-pulse {
  0%, 100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

/**
 * Base Shimmer Style
 * Applied to all skeleton elements
 */
.carbon-skeleton,
.cds--skeleton,
cds-skeleton-text,
.cds--skeleton__text,
.carbon-skeleton-line,
.carbon-skeleton-heading,
.carbon-skeleton-box,
.carbon-skeleton-avatar,
.carbon-skeleton-badge,
.carbon-skeleton-btn {
  background: linear-gradient(
    90deg,
    var(--cds-layer-01) 0%,
    var(--cds-layer-02) 30%,
    var(--cds-layer-03) 50%,
    var(--cds-layer-02) 70%,
    var(--cds-layer-01) 100%
  ) !important;
  background-size: 250% 100% !important;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite !important;
  border-radius: 0 !important;
  color: transparent !important;
  user-select: none !important;
  pointer-events: none !important;
}

/**
 * <cds-skeleton-text> & Carbon Skeleton Text Classes
 */
cds-skeleton-text,
.cds--skeleton__text,
.carbon-skeleton-text {
  height: 0.875rem; /* 14px */
  margin-bottom: var(--cds-spacing-03);
  width: 100%;
}

.cds--skeleton__text,
.carbon-skeleton-text {
  display: block;
}

cds-skeleton-text:last-child,
.carbon-skeleton-text:last-child {
  margin-bottom: 0;
}

/* Skeleton Text Variants */
cds-skeleton-text[type="heading"],
cds-skeleton-text[heading],
.carbon-skeleton-heading {
  height: 1.5rem; /* 24px */
  margin-bottom: var(--cds-spacing-04);
  width: 65%;
}

cds-skeleton-text[type="subheading"],
.carbon-skeleton-subheading {
  height: 1.125rem;
  margin-bottom: var(--cds-spacing-03);
  width: 50%;
}

cds-skeleton-text[type="line"],
.carbon-skeleton-line {
  height: 0.875rem;
  margin-bottom: var(--cds-spacing-03);
}

cds-skeleton-text[type="paragraph"],
.carbon-skeleton-paragraph {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);
  width: 100%;
  background: transparent !important;
  animation: none !important;
}

cds-skeleton-text[type="paragraph"] > div,
.carbon-skeleton-paragraph > div {
  height: 0.875rem;
  background: linear-gradient(
    90deg,
    var(--cds-layer-01) 0%,
    var(--cds-layer-02) 30%,
    var(--cds-layer-03) 50%,
    var(--cds-layer-02) 70%,
    var(--cds-layer-01) 100%
  );
  background-size: 250% 100%;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite ;
}

/* Width Helpers */
.carbon-skeleton-line.w-25, cds-skeleton-text[width="25%"] { width: 25% !important; }
.carbon-skeleton-line.w-35, cds-skeleton-text[width="35%"] { width: 35% !important; }
.carbon-skeleton-line.w-50, cds-skeleton-text[width="50%"] { width: 50% !important; }
.carbon-skeleton-line.w-65, cds-skeleton-text[width="65%"] { width: 65% !important; }
.carbon-skeleton-line.w-75, cds-skeleton-text[width="75%"] { width: 75% !important; }
.carbon-skeleton-line.w-85, cds-skeleton-text[width="85%"] { width: 85% !important; }
.carbon-skeleton-line.w-100, cds-skeleton-text[width="100%"] { width: 100% !important; }

/* Skeleton Placeholder Box */
.carbon-skeleton-box,
cds-skeleton-placeholder {
  display: block;
  width: 100%;
  min-height: 80px;
}

/* Skeleton Badge */
.carbon-skeleton-badge {
  display: inline-block;
  width: 54px;
  height: 18px;
  vertical-align: middle;
}

/* Skeleton Button */
.carbon-skeleton-btn {
  display: inline-block;
  width: 110px;
  height: 2.5rem;
}

/**
 * Skeleton Metric & KPI Tile (.carbon-skeleton-tile, .carbon-stat-tile.carbon-skeleton)
 * Authentic Carbon stat tile placeholder that maintains dimensions without CLS
 */
.carbon-skeleton-tile,
.carbon-stat-tile.carbon-skeleton {
  background-color: var(--cds-layer-01) !important;
  border: 1px solid var(--cds-border-subtle-01) !important;
  padding: var(--cds-spacing-05, 1rem) !important;
  min-height: 110px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: none !important;
  overflow: hidden;
}

.carbon-skeleton-tile::before,
.carbon-stat-tile.carbon-skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--cds-interactive) 0%,
    var(--cds-link-primary) 50%,
    var(--cds-interactive) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite !important;
}

.carbon-skeleton-tile .skeleton-label,
.carbon-stat-tile.carbon-skeleton .stat-label {
  height: 12px;
  width: 48%;
  margin-bottom: var(--cds-spacing-03, 0.5rem);
  background: linear-gradient(90deg, var(--cds-layer-01) 0%, var(--cds-layer-02) 50%, var(--cds-layer-01) 100%);
  background-size: 250% 100%;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite ;
}

.carbon-skeleton-tile .skeleton-value,
.carbon-stat-tile.carbon-skeleton .stat-value {
  height: 36px;
  width: 65%;
  margin-bottom: var(--cds-spacing-02, 0.25rem);
  background: linear-gradient(90deg, var(--cds-layer-01) 0%, var(--cds-layer-02) 50%, var(--cds-layer-01) 100%);
  background-size: 250% 100%;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite ;
}

.carbon-skeleton-tile .skeleton-sub,
.carbon-stat-tile.carbon-skeleton .stat-sub {
  height: 10px;
  width: 38%;
  background: linear-gradient(90deg, var(--cds-layer-01) 0%, var(--cds-layer-02) 50%, var(--cds-layer-01) 100%);
  background-size: 250% 100%;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite ;
}

/**
 * Skeleton Panel / Card (.carbon-skeleton-card, .carbon-panel.carbon-skeleton)
 * Prevents jarring content jump when search results or panels load
 */
.carbon-skeleton-card,
.carbon-panel.carbon-skeleton {
  background-color: var(--cds-layer-01) !important;
  border: 1px solid var(--cds-border-subtle-01) !important;
  padding: var(--cds-spacing-06, 1.5rem) !important;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-04);
  animation: none !important;
}

.carbon-panel.carbon-skeleton {
  margin-bottom: var(--cds-spacing-06, 1.5rem);
}

.carbon-skeleton-card .skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--cds-spacing-03);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  margin-bottom: var(--cds-spacing-02);
}

.carbon-skeleton-card .skeleton-title {
  height: 20px;
  width: 45%;
  background: linear-gradient(90deg, var(--cds-layer-01) 0%, var(--cds-layer-02) 50%, var(--cds-layer-01) 100%);
  background-size: 250% 100%;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite ;
}

.carbon-skeleton-card .skeleton-badge {
  height: 18px;
  width: 60px;
  background: linear-gradient(90deg, var(--cds-layer-01) 0%, var(--cds-layer-02) 50%, var(--cds-layer-01) 100%);
  background-size: 250% 100%;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite ;
}

/**
 * Skeleton Table Rows (.carbon-skeleton-row, tr.carbon-skeleton-row)
 * Eliminates jarring table jumps while querying endpoints
 */
tr.carbon-skeleton-row td,
.carbon-table tr.carbon-skeleton-row td {
  background-color: var(--cds-layer-01) !important;
  border-bottom: 1px solid var(--cds-border-subtle-01);
  padding: var(--cds-spacing-04, 0.75rem) var(--cds-spacing-05, 1rem);
  vertical-align: middle;
}

tr.carbon-skeleton-row td .skeleton-cell-bar {
  height: 14px;
  background: linear-gradient(
    90deg,
    var(--cds-layer-01) 0%,
    var(--cds-layer-02) 30%,
    var(--cds-layer-03) 50%,
    var(--cds-layer-02) 70%,
    var(--cds-layer-01) 100%
  );
  background-size: 250% 100%;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite ;
  display: block;
}

/* Stagger column widths for natural data look */
tr.carbon-skeleton-row td:nth-child(1) .skeleton-cell-bar { width: 35%; }
tr.carbon-skeleton-row td:nth-child(2) .skeleton-cell-bar { width: 68%; }
tr.carbon-skeleton-row td:nth-child(3) .skeleton-cell-bar { width: 45%; }
tr.carbon-skeleton-row td:nth-child(4) .skeleton-cell-bar { width: 85%; }
tr.carbon-skeleton-row td:nth-child(5) .skeleton-cell-bar { width: 50%; }

/* If cell has no child div, animate text block inside */
tr.carbon-skeleton-row td:empty::after {
  content: '';
  display: block;
  height: 14px;
  width: 60%;
  background: linear-gradient(90deg, var(--cds-layer-01) 0%, var(--cds-layer-02) 50%, var(--cds-layer-01) 100%);
  background-size: 250% 100%;
  animation: carbon-skeleton-shimmer var(--cds-motion-shimmer, 1.8s) ease-in-out infinite ;
}


/* ==========================================================================
   2. SMOOTH TRANSITIONS & MICRO-ANIMATIONS
   ========================================================================== */

/**
 * A. Side-Nav Expand/Collapse Width Transition
 * Exact Spec: transition: width 0.15s cubic-bezier(0.2, 0, 0.38, 0.9)
 */
cds-side-nav {
  transition: width var(--cds-moderate-01) var(--cds-ease-productive), transform var(--cds-moderate-01) var(--cds-ease-productive), opacity var(--cds-moderate-01) var(--cds-ease-productive) !important;
  will-change: width, transform;
}

cds-side-nav[collapsed],
body.side-nav-collapsed cds-side-nav {
  width: 0 !important;
  transform: translateX(0) !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border-right: none !important;
  pointer-events: none !important;
}

cds-side-nav:not([collapsed]) {
  width: var(--cds-side-nav-width, 16rem) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#main-content {
  transition: margin-left var(--cds-moderate-01) var(--cds-ease-productive) !important;
  will-change: margin-left;
}

body.side-nav-collapsed #main-content {
  margin-left: 0 !important;
}

cds-side-nav-link[active],
.cds--side-nav__link[active],
.cds--side-nav__item--active .cds--side-nav__link {
  border-left-color: var(--cds-interactive);
}

/**
 * B. Modal Fade-and-Scale Entrance Animation
 * Exact Spec: transform: scale(0.98) to scale(1)
 */
@keyframes carbon-modal-entrance {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes carbon-backdrop-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Custom Elements <cds-modal> Styling & Animation */
cds-modal {
  position: fixed;
  inset: 0;
  z-index: var(--cds-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--hx-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--cds-moderate-02) var(--cds-ease-productive);
}

cds-modal[open] {
  display: flex !important;
  opacity: 1 !important;
  animation: carbon-backdrop-fade-in var(--cds-moderate-02) var(--cds-ease-productive) forwards;
}

cds-modal .cds--modal-container,
cds-modal > div:not(.cds--modal-backdrop),
.carbon-modal-dialog {
  background-color: var(--cds-background);
  border: 1px solid var(--cds-border-subtle-02);
  box-shadow: var(--hx-shadow-lg);
  width: min(840px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.98);
  animation: carbon-modal-entrance var(--cds-moderate-02) var(--cds-ease-productive) forwards;
}

cds-modal[size="lg"] .cds--modal-container,
cds-modal[size="lg"] > div:not(.cds--modal-backdrop) {
  width: min(960px, 95vw);
}

cds-modal[size="sm"] .cds--modal-container,
cds-modal[size="sm"] > div:not(.cds--modal-backdrop) {
  width: min(480px, 90vw);
}

/* Modal Inner Structure */
cds-modal-header,
.cds--modal-header {
  display: flex;
  flex-direction: column;
  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem);
  background-color: var(--cds-layer-01);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  position: relative;
}

cds-modal-label,
.cds--modal-label {
  font-size: var(--f-sm);
  color: var(--cds-text-secondary);
  letter-spacing: 0.32px;
  margin-bottom: var(--cds-spacing-02);
}

cds-modal-heading,
.cds--modal-heading {
  font-size: var(--f-xl);
  font-weight: var(--fw-regular);
  color: var(--cds-text-primary);
  margin: 0;
}

cds-modal-close-button,
.cds--modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--cds-text-secondary);
  cursor: pointer;
  transition: background-color var(--cds-fast-02, 110ms) var(--cds-ease-productive), color var(--cds-fast-02, 110ms) var(--cds-ease-productive);
}

cds-modal-close-button:hover,
.cds--modal-close:hover {
  background-color: var(--cds-layer-hover-01);
  color: var(--cds-text-primary);
}

cds-modal-body,
.cds--modal-body {
  padding: var(--cds-spacing-06, 1.5rem);
  overflow-y: auto;
  flex: 1;
  background-color: var(--cds-background);
}

cds-modal-footer,
.cds--modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-04, 0.75rem) var(--cds-spacing-06, 1.5rem);
  background-color: var(--cds-layer-01);
  border-top: 1px solid var(--cds-border-subtle-01);
}

cds-modal-footer-button,
.cds--modal-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 var(--cds-spacing-05, 1rem);
  font-size: var(--f-md);
  font-family: var(--cds-font-sans, sans-serif);
  cursor: pointer;
  border: none;
  transition: background-color var(--cds-moderate-01) var(--cds-ease-productive), transform var(--cds-fast-02, 110ms) var(--cds-ease-productive);
}

cds-modal-footer-button[kind="primary"],
.cds--modal-footer-btn.cds--btn--primary {
  background-color: var(--cds-interactive);
  color: var(--cds-text-on-color);
}
cds-modal-footer-button[kind="primary"]:hover {
  background-color: var(--cds-interactive-hover);
}

cds-modal-footer-button[kind="secondary"],
.cds--modal-footer-btn.cds--btn--secondary {
  background-color: var(--cds-layer-02);
  color: var(--cds-text-primary);
}
cds-modal-footer-button[kind="secondary"]:hover {
  background-color: var(--cds-layer-hover-02);
}

/* Command Palette Dialog Fade-and-Scale Entrance */
.carbon-palette-dialog {
  transform: translateY(-8px) scale(0.98);
  transition: transform var(--cds-moderate-02) var(--cds-ease-productive), opacity var(--cds-moderate-02) var(--cds-ease-productive) !important;
}

.carbon-palette-backdrop.is-open .carbon-palette-dialog {
  transform: translateY(0) scale(1) !important;
  animation: carbon-modal-entrance var(--cds-moderate-02) var(--cds-ease-productive) forwards;
}

/**
 * C. Accordion Chevron Rotation on Expand/Collapse
 * Smooth 0.15s rotation from collapsed (0deg) to open (90deg)
 */
cds-accordion,
.cds--accordion {
  display: block;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

cds-accordion-item,
.cds--accordion__item {
  display: block;
  border-top: 1px solid var(--cds-border-subtle-01);
  background-color: transparent;
  transition: background-color var(--cds-moderate-01) var(--cds-ease-productive);
}

cds-accordion-item:last-child,
.cds--accordion__item:last-child {
  border-bottom: 1px solid var(--cds-border-subtle-01);
}

/* Accordion Header Button */
.cds--accordion__heading,
cds-accordion-item button.cds--accordion__heading {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--cds-spacing-04, 0.75rem) var(--cds-spacing-05, 1rem);
  background: transparent;
  border: none;
  color: var(--cds-text-primary);
  font-family: var(--cds-font-sans, sans-serif);
  font-size: var(--f-md);
  font-weight: var(--fw-semibold);
  text-align: left;
  cursor: pointer;
  gap: var(--cds-spacing-04);
  transition: background-color var(--cds-fast-02, 110ms) var(--cds-ease-productive);
}

.cds--accordion__heading:hover,
cds-accordion-item button.cds--accordion__heading:hover {
  background-color: var(--cds-layer-hover-01);
}

/* Accordion Chevron Icon */
.cds--accordion__arrow,
cds-accordion-item svg.cds--accordion__arrow,
.carbon-accordion-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform var(--cds-moderate-01) var(--cds-ease-productive) !important;
  transform-origin: center center;
  transform: rotate(0deg);
}

/* Chevron Rotation on Expanded / Open */
cds-accordion-item[open] .cds--accordion__arrow,
cds-accordion-item[open] svg.cds--accordion__arrow,
.cds--accordion__item--active .cds--accordion__arrow,
.cds--accordion__item[open] .cds--accordion__arrow,
.carbon-accordion-item.is-open .carbon-accordion-chevron {
  transform: rotate(90deg) !important;
}

/* Downward Chevrons (rotate 180deg) */
.chevron-down.is-open,
[open] > .chevron-down {
  transform: rotate(180deg) !important;
}

/* Accordion Content Container */
.cds--accordion__content,
cds-accordion-item .cds--accordion__content {
  display: none;
  padding: 0 var(--cds-spacing-05, 1rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-08);
  color: var(--cds-text-secondary);
  font-size: var(--f-md);
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  animation: carbon-accordion-fade-in var(--cds-moderate-02) var(--cds-ease-productive);
}

cds-accordion-item[open] .cds--accordion__content,
.cds--accordion__item--active .cds--accordion__content,
.cds--accordion__item[open] .cds--accordion__content {
  display: block;
}

@keyframes carbon-accordion-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * D. Pulse Animation on Live Indicators
 * Radar expanding halo wave for connected services & status vitals
 */
@keyframes carbon-live-pulse-green {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hx-green-40) 70%, transparent);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--hx-green-40) 0%, transparent);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hx-green-40) 0%, transparent);
  }
}

@keyframes carbon-live-pulse-amber {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hx-yellow-30) 70%, transparent);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--hx-yellow-30) 0%, transparent);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hx-yellow-30) 0%, transparent);
  }
}

@keyframes carbon-live-pulse-red {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hx-red-50) 70%, transparent);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--hx-red-50) 0%, transparent);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--hx-red-50) 0%, transparent);
  }
}

/* Green Live Indicators */
.heartbeat-pulse-dot,
.carbon-live-dot,
.status-dot-green,
.live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--hx-radius-round);
  display: inline-block;
  background-color: var(--cds-support-success);
  animation: carbon-live-pulse-green var(--cds-motion-pulse, 1.8s) var(--cds-ease-productive, cubic-bezier(0.2, 0, 0.38, 0.9)) infinite;
  vertical-align: middle;
}

/* UI Shell Header Connected Indicator Live Dot */
#shell-health-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  transition: all var(--cds-moderate-01) var(--cds-ease-productive);
}

#shell-health-indicator::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: var(--hx-radius-round);
  background-color: var(--cds-support-success);
  animation: carbon-live-pulse-green var(--cds-motion-pulse, 1.8s) var(--cds-ease-productive, cubic-bezier(0.2, 0, 0.38, 0.9)) infinite;
  flex-shrink: 0;
}

/* Amber/Warning Status Dot */
.status-dot-warning,
.live-pulse-amber {
  width: 8px;
  height: 8px;
  border-radius: var(--hx-radius-round);
  display: inline-block;
  background-color: var(--cds-support-warning);
  animation: carbon-live-pulse-amber var(--cds-motion-pulse, 1.8s) var(--cds-ease-productive, cubic-bezier(0.2, 0, 0.38, 0.9)) infinite;
}

/* Error/Red Status Dot */
.status-dot-error,
.live-pulse-red {
  width: 8px;
  height: 8px;
  border-radius: var(--hx-radius-round);
  display: inline-block;
  background-color: var(--cds-support-error);
  animation: carbon-live-pulse-red var(--cds-motion-pulse, 1.8s) var(--cds-ease-productive, cubic-bezier(0.2, 0, 0.38, 0.9)) infinite;
}


/* ==========================================================================
   3. BUTTON & FOCUS RINGS
   ========================================================================== */

/**
 * Active Button Press Feedback
 * Spec: transform: scale(0.98) on click
 */
.carbon-btn:active,
cds-button:active,
button.cds--btn:active,
.cds--btn:active,
.carbon-header-cmd-btn:active,
.hadron-search-launcher:active,
#header-search-launcher:active,
.hadron-util-btn:active,
.hadron-health-heartbeat:active,
.flyout-action-btn:active,
#side-nav-toggle-btn:active,
cds-modal-footer-button:active,
.cds--modal-footer-btn:active,
.error-boundary-retry-btn:active,
.carbon-palette-item:active,
cds-header-menu-button:active,
cds-copy-button:active,
.clickable-repo-link:active,
.hadron-filepath-link:active,
.hadron-breadcrumb-link:active,
.cds--table-sort:active,
.cds--table-expand__button:active,
.cds--pagination__button:active,
.carbon-tag:active,
cds-tag:active,
.cds--tag:active,
.hadron-filter-chip:active,
.filter-chip:active,
.filter-tag:active,
button[type="submit"]:active {
  transform: scale(0.98) !important;
  transition: transform var(--cds-fast-02, 110ms) var(--cds-ease-productive) !important;
  filter: brightness(0.92);
}

/**
 * High-Contrast Carbon Focus Rings
 * Spec: outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: -2px for keyboard navigation
 * WCAG 2.2 AA Compliant
 */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.carbon-btn:focus-visible,
.carbon-input:focus-visible,
.carbon-select:focus-visible,
cds-button:focus-visible,
button.cds--btn:focus-visible,
.cds--btn:focus-visible,
cds-header-nav-item:focus-visible,
cds-side-nav-link:focus-visible,
.cds--side-nav__link:focus-visible,
cds-header-menu-button:focus-visible,
.carbon-header-cmd-btn:focus-visible,
.hadron-search-launcher:focus-visible,
#header-search-launcher:focus-visible,
.hadron-util-btn:focus-visible,
.hadron-health-heartbeat:focus-visible,
.hadron-header-title-link:focus-visible,
.flyout-action-btn:focus-visible,
#side-nav-toggle-btn:focus-visible,
.carbon-palette-item:focus-visible,
.error-boundary-retry-btn:focus-visible,
cds-accordion-item:focus-visible,
.cds--accordion__heading:focus-visible,
cds-modal-close-button:focus-visible,
cds-modal-footer-button:focus-visible,
.cds--modal-footer-btn:focus-visible,
cds-copy-button:focus-visible,
.cds--search-input:focus-visible,
.cds--table-sort:focus-visible,
.cds--table-expand__button:focus-visible,
.cds--batch-actions .cds--btn:focus-visible,
cds-table-batch-actions .cds--btn:focus-visible,
.cds--pagination__button:focus-visible,
.carbon-tag:focus-visible,
cds-tag:focus-visible,
.cds--tag:focus-visible,
.hadron-filter-chip:focus-visible,
.filter-chip:focus-visible,
.filter-tag:focus-visible,
.clickable-repo-link:focus-visible,
.hadron-filepath-link:focus-visible,
.hadron-breadcrumb-link:focus-visible,
.cds--checkbox:focus-visible {
  outline: var(--hx-focus-ring-width) solid var(--cds-focus) !important;
  outline-offset: var(--hx-focus-ring-inset) !important;
  box-shadow: none !important;
  transition: outline var(--cds-fast-02, 110ms) var(--cds-ease-productive), box-shadow var(--cds-fast-02, 110ms) var(--cds-ease-productive);
}

/* Remove default focus outline on mouse click when not using keyboard */
:focus:not(:focus-visible) {
  outline: var(--hx-focus-ring-width) solid transparent !important;
  outline-offset: var(--hx-focus-ring-inset);
  box-shadow: none !important;
}


/* ==========================================================================
   4. ENHANCED TOOLTIPS, METERS & BADGES
   ========================================================================== */

/**
 * Carbon-Styled Tooltips on Hover
 * Universal [data-tooltip] engine with smooth entrance & high contrast
 */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background-color: var(--cds-layer-01);
  color: var(--cds-text-primary);
  font-size: var(--f-sm);
  font-weight: var(--fw-regular);
  font-family: var(--cds-font-sans, 'IBM Plex Sans', sans-serif);
  line-height: 1.33;
  padding: var(--cds-spacing-02) var(--cds-spacing-03);
  border: 1px solid var(--cds-border-subtle-02);
  border-radius: 0;
  box-shadow: var(--hx-shadow-md);
  pointer-events: none;
  white-space: nowrap;
  z-index: var(--cds-z-tooltip);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cds-moderate-01) var(--cds-ease-productive), transform var(--cds-moderate-01) var(--cds-ease-productive), visibility var(--cds-moderate-01) var(--cds-ease-productive);
}

[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--cds-border-subtle-02);
  pointer-events: none;
  z-index: calc(var(--cds-z-tooltip, 11000) + 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cds-moderate-01) var(--cds-ease-productive), transform var(--cds-moderate-01) var(--cds-ease-productive), visibility var(--cds-moderate-01) var(--cds-ease-productive);
}

/* Tooltip Reveal on Hover & Keyboard Focus */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip Variations: Bottom */
[data-tooltip-position="bottom"]::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-position="bottom"]::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--cds-border-subtle-02);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-position="bottom"]:hover::after,
[data-tooltip-position="bottom"]:hover::before,
[data-tooltip-position="bottom"]:focus-visible::after,
[data-tooltip-position="bottom"]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}

/* Tooltip Variations: Left */
[data-tooltip-position="left"]::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 8px);
  transform: translateY(-50%) translateX(4px);
}
[data-tooltip-position="left"]::before {
  bottom: auto;
  top: 50%;
  left: auto;
  right: calc(100% + 2px);
  border-top-color: transparent;
  border-left-color: var(--cds-border-subtle-02);
  transform: translateY(-50%) translateX(4px);
}
[data-tooltip-position="left"]:hover::after,
[data-tooltip-position="left"]:hover::before,
[data-tooltip-position="left"]:focus-visible::after,
[data-tooltip-position="left"]:focus-visible::before {
  transform: translateY(-50%) translateX(0);
}

/* Tooltip Variations: Right */
[data-tooltip-position="right"]::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%) translateX(-4px);
}
[data-tooltip-position="right"]::before {
  bottom: auto;
  top: 50%;
  left: calc(100% + 2px);
  border-top-color: transparent;
  border-right-color: var(--cds-border-subtle-02);
  transform: translateY(-50%) translateX(-4px);
}
[data-tooltip-position="right"]:hover::after,
[data-tooltip-position="right"]:hover::before,
[data-tooltip-position="right"]:focus-visible::after,
[data-tooltip-position="right"]:focus-visible::before {
  transform: translateY(-50%) translateX(0);
}

/* Complex Telemetry Floating Tooltips (Graph, Architecture, Metrics) */
.carbon-tooltip,
.graph-tooltip {
  position: absolute;
  background-color: color-mix(in srgb, var(--hx-gray-90) 95%, transparent);
  border: 1px solid var(--cds-border-subtle-02);
  padding: var(--cds-spacing-03) var(--cds-spacing-04);
  font-family: var(--cds-font-sans, sans-serif);
  font-size: var(--f-sm);
  color: var(--cds-text-primary);
  box-shadow: var(--hx-shadow-lg);
  pointer-events: none;
  z-index: var(--cds-z-tooltip);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity var(--cds-moderate-01) var(--cds-ease-productive), transform var(--cds-moderate-01) var(--cds-ease-productive);
}

/**
 * Score Meters & Complex Telemetry Indicators
 */
.carbon-score-meter {
  width: 100%;
  height: 8px;
  background-color: var(--cds-layer-02);
  position: relative;
  overflow: hidden;
  border-radius: 0;
  margin-top: var(--cds-spacing-02);
}

.carbon-score-meter-fill {
  height: 100%;
  background-color: var(--cds-interactive);
  transition: width var(--cds-slow-02, 700ms) var(--cds-ease-productive);
  position: relative;
}

.carbon-score-meter-fill.score-high {
  background-color: var(--cds-support-success);
}

.carbon-score-meter-fill.score-med {
  background-color: var(--cds-support-warning);
}

.carbon-score-meter-fill.score-low {
  background-color: var(--cds-support-error);
}

.carbon-score-meter:hover .carbon-score-meter-fill {
  filter: brightness(1.2);
}

/**
 * Enhanced Tags & Badges
 */
/**
 * Enhanced Tags & Badges
 */
.carbon-tag,
cds-tag,
.cds--tag,
.hadron-filter-chip,
.filter-chip,
.filter-tag,
.hadron-scope-chip {
  transition: transform var(--cds-fast-02, 110ms) var(--cds-ease-productive), filter var(--cds-fast-02, 110ms) var(--cds-ease-productive), box-shadow var(--cds-fast-02, 110ms) var(--cds-ease-productive), background-color var(--cds-fast-02, 110ms) var(--cds-ease-productive), border-color var(--cds-fast-02, 110ms) var(--cds-ease-productive) !important;
}

.carbon-tag:hover,
cds-tag:hover,
.cds--tag:hover,
.hadron-filter-chip:hover,
.filter-chip:hover,
.filter-tag:hover,
.hadron-scope-chip:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.carbon-tag:active,
cds-tag:active,
.cds--tag:active,
.hadron-filter-chip:active,
.filter-chip:active,
.filter-tag:active,
.hadron-scope-chip:active {
  transform: translateY(0);
}

/* Tag Count Pill */
.carbon-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  padding: var(--cds-spacing-01) var(--cds-spacing-03);
  font-family: var(--cds-font-mono, monospace);
  font-size: var(--f-sm);
  font-weight: var(--fw-semibold);
  background-color: var(--cds-layer-02);
  color: var(--cds-text-primary);
  border: 1px solid var(--cds-border-subtle-01);
  transition: background-color var(--cds-fast-02, 110ms) var(--cds-ease-productive), border-color var(--cds-fast-02, 110ms) var(--cds-ease-productive);
}

/* Metric Delta Badge (+12%, -5%) */
.carbon-delta-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--f-sm);
  font-family: var(--cds-font-mono, monospace);
  font-weight: var(--fw-semibold);
  padding: 1px var(--cds-spacing-02);
}

.carbon-delta-badge.positive {
  color: var(--cds-support-success);
  background-color: color-mix(in srgb, var(--hx-green-40) 12%, transparent);
}

.carbon-delta-badge.negative {
  color: var(--cds-support-error);
  background-color: color-mix(in srgb, var(--hx-red-50) 12%, transparent);
}

/* Danger Buttons & Active states */
.carbon-btn.danger,
.cds--btn--danger,
cds-button[kind="danger"] {
  /* X4-005: red 60 (5.0:1 under white) in every theme; support-error is red 50 in the dark themes (3.35:1) */
  background-color: var(--hx-sev-critical) !important;
  color: var(--cds-text-on-color) !important;
  border-color: var(--hx-sev-critical) !important;
  transition: background-color var(--cds-moderate-01) var(--cds-ease-productive), border-color var(--cds-moderate-01) var(--cds-ease-productive), transform var(--cds-fast-02, 110ms) var(--cds-ease-productive) !important;
}

.carbon-btn.danger:hover,
.cds--btn--danger:hover,
cds-button[kind="danger"]:hover {
  background-color: var(--cds-button-danger-hover) !important;
  border-color: var(--cds-button-danger-hover) !important;
}

/* Header Utilities & Search Launcher Smooth Hover */
.hadron-health-heartbeat {
  transition: background-color var(--cds-moderate-01) var(--cds-ease-productive), color var(--cds-moderate-01) var(--cds-ease-productive), border-color var(--cds-moderate-01) var(--cds-ease-productive);
}

.hadron-health-heartbeat:hover {
  background-color: var(--cds-layer-hover-01);
  color: var(--cds-text-primary);
}

/* Flyout Panels Smooth Fade-and-Scale Entrance */
@keyframes carbon-flyout-entrance {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hadron-flyout-panel {
  transform-origin: top right;
  animation: carbon-flyout-entrance var(--cds-moderate-01) var(--cds-ease-productive) forwards;
}

/* ==========================================================================
   Cumulative Layout Shift (CLS = 0) Stabilization & Containment
   ========================================================================== */
.hadron-container,
.hadron-view {
  box-sizing: border-box;
  max-width: 100%;
}

.hadron-container,
.hadron-view,
#view-container {
  min-height: calc(100vh - var(--cds-header-height, 48px) - 60px);
  contain: style;
}

.carbon-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--cds-spacing-05, 1rem);
  contain: layout;
}

/* Stat tile & skeleton tile dimensional preservation */
.carbon-stat-tile,
.carbon-skeleton-tile {
  box-sizing: border-box;
}

.carbon-skeleton-tile {
  min-height: 110px;
}

/* Zero-CLS Drift Strip & Header Utilities Stabilization */
#overview-drift-strip {
  min-height: 72px;
  box-sizing: border-box;
}

.hadron-health-heartbeat {
  min-width: 88px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   System Hierarchy & Layered Topological DAG Interactivity
   ========================================================================== */


/* Ensure Legible Font Sizes (>= 12px) across all text elements in the hierarchy */


/* Base Node & Link Transitions */


/* Focus Dimming: Unrelated nodes & edges dim when hovering or selecting */


/* Hovered / Active Node Focus */


/* Upstream Callers (incoming dependencies / callers) */


/* Downstream Dependencies (callees / dependents) */


/* Connected Edges on Click */


/* ==========================================================================
   Cross-Link & Entity Link Affordances (WCAG 2.1 AA & Carbon Tokens)
   ========================================================================== */
.carbon-crosslink,
.carbon-entity-link,
a.carbon-crosslink,
a.carbon-entity-link {
  cursor: pointer;
  text-decoration: underline;
  color: var(--cds-link-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  transition: color var(--cds-moderate-01) var(--cds-ease-productive), text-decoration var(--cds-moderate-01) var(--cds-ease-productive);
  font-weight: var(--fw-semibold);
}

.carbon-crosslink:hover,
.carbon-crosslink:focus,
.carbon-entity-link:hover,
.carbon-entity-link:focus,
a.carbon-crosslink:hover,
a.carbon-crosslink:focus,
a.carbon-entity-link:hover,
a.carbon-entity-link:focus {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
  cursor: pointer;
}

.carbon-crosslink:focus-visible,
.carbon-entity-link:focus-visible {
  outline: var(--hx-focus-ring-width) solid var(--cds-focus);
  outline-offset: var(--hx-focus-ring-inset);
}

/* Tag / Badge / Chip Cross-Links */
.carbon-tag.carbon-crosslink,
.carbon-code-badge.carbon-crosslink,
.carbon-chip.carbon-crosslink,
cds-tag.carbon-crosslink {
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--cds-moderate-01) var(--cds-ease-productive), transform var(--cds-fast-02, 110ms) var(--cds-ease-productive), color var(--cds-moderate-01) var(--cds-ease-productive), border-color var(--cds-moderate-01) var(--cds-ease-productive);
}

.carbon-tag.carbon-crosslink:hover,
.carbon-code-badge.carbon-crosslink:hover,
.carbon-chip.carbon-crosslink:hover,
cds-tag.carbon-crosslink:hover {
  filter: brightness(1.2);
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   Cytoscape 2D/3D Architecture Graph, Minimap Radar & Topology Interactions
   ========================================================================== */
#cytoscape-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--hx-z-5);
  touch-action: none;
}

.hadron-graph-minimap {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: var(--hx-z-20);
  background: color-mix(in srgb, var(--hx-gray-100) 94%, transparent);
  border: 1px solid var(--cds-border-subtle-02);
  border-radius: 0;
  box-shadow: var(--hx-shadow-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  transition: max-height var(--cds-moderate-02, 240ms) var(--cds-ease-productive), opacity var(--cds-moderate-02) var(--cds-ease-productive);
  user-select: none;
}

.hadron-graph-minimap.collapsed #minimap-body {
  display: none !important;
}

.minimap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--cds-spacing-02) var(--cds-spacing-03);
  background: var(--cds-layer-02);
  border-bottom: 1px solid var(--cds-border-subtle-01);
  font-size: var(--f-sm);
  font-weight: var(--fw-semibold);
  color: var(--cds-text-secondary);
  letter-spacing: 0.5px;
}

.minimap-radar-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--hx-radius-round);
  background: var(--cds-support-success);
  margin-right: var(--cds-spacing-02);
  box-shadow: 0 0 6px var(--cds-support-success);
  animation: radar-pulse var(--cds-motion-pulse, 2s) infinite ease-in-out;
}

@keyframes radar-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 10px var(--cds-support-success); }
}

.minimap-viewport-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 1.5px solid var(--cds-interactive);
  background: color-mix(in srgb, var(--cds-interactive) 18%, transparent);
  pointer-events: auto;
  cursor: move;
  box-shadow: 0 0 8px color-mix(in srgb, var(--cds-interactive) 50%, transparent);
  box-sizing: border-box;
}

/* Cytoscape Animated Path Pulse */
@keyframes cy-path-pulse {
  0% {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hx-yellow-30) 60%, transparent));
  }
  50% {
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--hx-yellow-30) 95%, transparent));
  }
  100% {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hx-yellow-30) 60%, transparent));
  }
}


/* Invariant #5: Enterprise Absolute Scrollbar Suppression */
/* Enterprise High-Density Table Lining Numbers */
/* W3C CSS MQ5 / WCAG 2.2 SC 2.3.3 Reduced Motion Standards */
@media (prefers-reduced-motion: reduce) {
  }