/* =========================================================
 OPTUM BRANDING
 ========================================================= */
.name, .font-largest, .font-large {
  color: #002677;
}
.optum-wrapper {
  background-color: #FAF8F2;
  padding: 20px 0;
}

/* =========================================================
 ✅ GLOBAL PAGE WIDTH (CURRENT WORKING WIDTH)
 ========================================================= */
:root {
  --page-max-width: 1305px;
  --page-side-padding: 18px;
  --col-gap: 16px; /* space between the 3 columns */
  --row-gap: 14px; /* vertical space between cards */
}

/* Core container */
.container {
  width: 89% !important;
  max-width: var(--page-max-width) !important;
  margin: 0 auto !important;
}

/* =========================================================
 HEADER (LEFT ALIGNED)
 ========================================================= */
.optum-header-wrapper {
  display: flex;
  justify-content: flex-start !important;
  text-align: left !important;
}
.optum-header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  padding: 20px;
}
.optum-header img {
  margin-right: 8px !important;
}
.optum-header-subprod {
  display: inline-block;
  padding-left: 10px;
  font-weight: 700;
}

/* =========================================================
 ✅ SHARED CONTENT RAIL
 ========================================================= */
.align-to-tiles {
  width: 100% !important;
  max-width: var(--page-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-side-padding) !important;
  padding-right: var(--page-side-padding) !important;
  box-sizing: border-box !important;
}

/* =========================================================
 ✅ STATUS BANNER ("All Systems Operational") — LEFT
 ========================================================= */
.page-status,
.system-status,
.overall-status,
.status-banner,
.status-banner-container,
.global-status,
#page-status,
#page_status {
  width: 100% !important;
  max-width: var(--page-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-side-padding) !important;
  padding-right: var(--page-side-padding) !important;
  box-sizing: border-box !important;
}
.page-status .status,
.page-status .page-status-content,
.page-status .status-container,
.status-banner .status,
.status-banner .status-container,
.overall-status .status,
.system-status .status {
  width: 100% !important;
  text-align: left !important;
}

/* =========================================================
 ✅ COMPONENTS SECTION (STATIC COLUMNS WITHOUT ROW-STRETCHING)
 ========================================================= */
.components-section {
  max-width: var(--page-max-width) !important;
  margin: 0 auto !important;
  padding-left: var(--page-side-padding) !important;
  padding-right: var(--page-side-padding) !important;
}

/* Turn OFF any previous multi-column/grid behavior */
.components-section .components-container,
.components-section ul {
  display: block !important;
  column-count: unset !important;
  column-fill: unset !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The 3 independent columns wrapper */
.optum-columns {
  display: flex !important;
  gap: var(--col-gap) !important;
  align-items: flex-start !important;
}

/* Each column is its own vertical stack */
.optum-col {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--row-gap) !important;
}

/* Cards */
.components-section li,
.components-section .component-container {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  background: #ffffff !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 2px !important;
  text-align: left !important;
  position: relative !important;
  overflow: visible !important;
}

/* Inner row layout */
.components-section li > a,
.components-section .component-inner-container,
.components-section .component-container > a {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  text-decoration: none !important;
  text-align: left !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Component name */
.components-section .name,
.components-section .component-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: hidden !important;
  line-height: 1.2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  text-align: left !important;
}

/* Tooltip icon */
.components-section .tool-tip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}
.components-section .tool-tip svg,
.components-section .tool-tip i,
.components-section .tool-tip span {
  display: block !important;
  line-height: 1 !important;
}
.components-section .tool-tip svg {
  transform: translateY(-0.5px) !important;
}

/* Status on right */
.components-section .status,
.components-section .component-status,
.components-section .component-status span,
.components-section span.status {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  text-align: right !important;
  margin-left: auto !important;
}

/* Expand/collapse stays clickable */
.components-section button,
.components-section [role="button"],
.components-section [aria-expanded] {
  position: relative !important;
  z-index: 25 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Text helpers */
.tile-left-text,
.tile-left-text * {
  text-align: left !important;
}

/* =========================================================
 RESPONSIVE (columns collapse cleanly)
 ========================================================= */
@media (max-width: 1200px) {
  .optum-columns { flex-wrap: wrap !important; }
  .optum-col { flex: 1 1 calc(50% - (var(--col-gap) / 2)) !important; }
  .optum-col.optum-col-3 { display: none !important; }
}
@media (max-width: 760px) {
  .optum-columns { display: block !important; }
  .optum-col { display: block !important; width: 100% !important; }
  .optum-col.optum-col-2,
  .optum-col.optum-col-3 { display: none !important; }
}

/* =========================================================
 ✅ ORIGINAL WORKING TOOLTIP BEHAVIOR (keep)
 ========================================================= */
/* Force tooltip containers to escape stacking contexts */
[role="tooltip"],
.tooltip,
.tooltip-content,
.tippy-box,
.tippy-content {
  position: fixed !important;
  z-index: 2147483647 !important;
}
/* Ensure tooltip trigger does not clip */
.components-section .tool-tip {
  overflow: visible !important;
  position: static !important;
}
/* Safety: ensure no parent clips */
.components-section,
.optum-columns,
.optum-col,
.components-section li,
.components-section .component-container {
  overflow: visible !important;
}

/* =========================================================
 ✅ NEW: FALLBACK TOOLTIP (ONLY USED WHEN NATIVE TOOLTIP FAILS)
 ========================================================= */
#optum-fallback-tooltip {
  position: fixed;
  z-index: 2147483647;
  max-width: 360px;
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,0.22);
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.35;
  display: none;
  pointer-events: none; /* never blocks mouse */
}
#optum-fallback-tooltip.optum-top::after,
#optum-fallback-tooltip.optum-bottom::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
}
#optum-fallback-tooltip.optum-top::after {
  bottom: -14px;
  border-top-color: rgba(0,0,0,0.22);
}
#optum-fallback-tooltip.optum-top::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -13px;
  border: 7px solid transparent;
  border-top-color: #ffffff;
}
#optum-fallback-tooltip.optum-bottom::after {
  top: -14px;
  border-bottom-color: rgba(0,0,0,0.22);
}
#optum-fallback-tooltip.optum-bottom::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -13px;
  border: 7px solid transparent;
  border-bottom-color: #ffffff;
}

/* =========================================================
 ✅ HIDE "SUBSCRIBE" BUTTON / UPDATES DROPDOWN (fixed brace)
 ========================================================= */
.updates-dropdown-container,
#show-updates-dropdown,
a#show-updates-dropdown {
  display: none !important;
  visibility: hidden !important;
}
.subscribe,
.subscribe-link,
.subscribe-button,
a[href*="/subscribe"],
a[href*="subscribe"],
button[aria-label*="Subscribe"],
button[title*="Subscribe"] {
  display: none !important;
  visibility: hidden !important;
}