/* ============================================
   ALERTS DEMO — Full-fidelity CORR Alerts page
   ============================================
   Near-1:1 rendering of the CORR platform Alerts
   page for the website Platform page interactive demo.
   Replaces the simplified CorrInteractiveDemo.
   ============================================ */

/* Google Fonts (Saira Condensed, Nunito Sans) and Font Awesome 6
   used to be @imported here, but Webflow's DevLink CSS-module build
   pipeline doesn't reliably resolve external @import URLs. Moved to
   document-head <link> injection in AlertsDemo.tsx (useEffect on
   mount) which renders correctly in Webflow Designer + the published
   site. See loadDemoAssets() at the top of the component. */

/* --- Section wrapper --- */
.AlertsDemo-module__section--NYqph {
  background: var(--bg-muted, #F4F4F5);
  padding: var(--section-pad, 96px) 0;
}

.AlertsDemo-module__container--s94Ay {
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding: 0 var(--container-padding, 32px);
}

.AlertsDemo-module__section-header--xqPa2 {
  text-align: center;
  margin-bottom: 48px;
}

.AlertsDemo-module__section-header--xqPa2 h2 {
  font-family: var(--font-body);
  font-size: var(--h2-size, 40px);
  font-weight: var(--h2-weight, 700);
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: var(--h2-line-height, 1.2);
  margin: 0 0 12px;
}

.AlertsDemo-module__section-header--xqPa2 p {
  font-size: var(--body-size, 16px);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Demo chrome (window frame) ---
   Nunito Sans set as the base body font for the demo so EVERY text
   element inside renders with the same family the real CORR product
   uses. Saira Condensed is applied separately on the page title. */
.AlertsDemo-module__demo-frame--UOYVW {
  position: relative;  /* Anchor for hotspot overlay + guide toggle */
  background: #151827;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  max-width: var(--container);
  margin: 0 auto 48px;
  height: 720px;
  display: flex;
  flex-direction: column;
  font-family: 'Nunito Sans', 'Inter', -apple-system, system-ui, sans-serif;
}

/* Top bar — org switcher + system status */
.AlertsDemo-module__top-bar--NofrV {
  height: 44px;
  background: #1B2032;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
}

.AlertsDemo-module__top-bar-logo--cid8l {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.AlertsDemo-module__top-bar-logo--cid8l svg {
  width: 20px;
  height: 20px;
}

.AlertsDemo-module__top-bar-logo-text--zXLwE {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.AlertsDemo-module__top-bar-org--HZQ0k {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 12px;
}

.AlertsDemo-module__top-bar-org-badge--jgGYJ {
  background: #004C97;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.AlertsDemo-module__top-bar-org-name--Knm5m {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.AlertsDemo-module__top-bar-status--Z78Q2 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 8px;
}

.AlertsDemo-module__status-dot--oLUqE {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.AlertsDemo-module__top-bar-right--HfG8A {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.AlertsDemo-module__top-bar-icon--lVrzs {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
}

.AlertsDemo-module__top-bar-avatar--vKf50 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-bright, #009CDE);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Main layout: sidebar + content --- */
.AlertsDemo-module__main-layout--zWwDr {
  display: flex;   /* Flex instead of grid — reliable scroll containment */
  flex: 1;         /* Fill remaining space after top-bar */
  min-height: 0;   /* Allow flex child to shrink below content size */
  overflow: hidden; /* Contain children within this box */
}

/* --- Sidebar --- */
/* Sidebar matches the real CORR collapsed (icon-only) state from
   the Figma export Cameron supplied 2026-04-27: 60px wide, icon
   centered in a 44×44 hit area, item labels hidden. */
.AlertsDemo-module__sidebar--w2NEb {
  width: 60px;
  flex-shrink: 0;
  background: #1B2032;
  border-right: 1px solid rgba(135, 152, 173, 0.3);
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.AlertsDemo-module__sidebar-item--oSGC5 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #8798AD;
  cursor: pointer;
  position: relative;
  transition: color 150ms, background 150ms;
}

/* Hide the text label on every sidebar item in the collapsed view.
   When/if an expanded sidebar state is added later, override this in
   a `.sidebar.expanded` modifier. The icon `<i>` element is allowed
   through; the label `<span>` (the only other child besides the badge)
   is hidden. */
.AlertsDemo-module__sidebar-item--oSGC5 > span:not(.AlertsDemo-module__sidebar-badge--TVGBe) {
  display: none;
}

.AlertsDemo-module__sidebar-item--oSGC5:hover {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.04);
}

/* Active sidebar item — uses an absolute 3px blue accent on the
   left edge instead of border-left, so the item itself stays the
   intended 44px width (Figma "Rectangle 251" pattern). */
.AlertsDemo-module__sidebar-item-active--r8gFs {
  color: var(--blue-bright, #009CDE);
  background: rgba(0, 156, 222, 0.10);
}

.AlertsDemo-module__sidebar-item-active--r8gFs::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--blue-bright, #009CDE);
  border-radius: 4px 0 0 4px;
}

.AlertsDemo-module__sidebar-icon--CsrNM {
  width: 24px;
  height: 24px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

/* Status — Open and Closed variants.
   Open: muted grey pill with white text — Cameron 2026-04-28 specced
   the exact RGBA pulled from the live CORR product. The 30% alpha
   over the dark row background resolves to a soft slate; white text
   gives ~7:1 contrast on that resolved color (vs. ~3:1 for black). */
.AlertsDemo-module__status-open--VK_Vi {
  background: rgba(99, 118, 140, 0.30);
  color: #FFFFFF;
}

.AlertsDemo-module__status-closed--CONok {
  background: rgba(56, 174, 103, 0.30);
  color: #FFFFFF;
}

/* Selected filter pill — solid white tile with dark text, matches
   the Figma "Status: Open" and "Last Week" active filters. */
.AlertsDemo-module__filter-pill-selected--Z2k3D {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #151826 !important;
}

.AlertsDemo-module__filter-pill-selected--Z2k3D .AlertsDemo-module__filter-pill-chevron--t0HsS {
  color: #151826 !important;
}

.AlertsDemo-module__filter-pill-icon--vYLDH {
  font-size: 12px;
  margin-right: 2px;
  color: #151826;
}

.AlertsDemo-module__sidebar-group-label--JJQt0 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.25);
  padding: 16px 16px 4px 16px;
  text-transform: uppercase;
}

/* sidebar-group now wraps ONLY the indented children of MDR (Dashboard,
   Alerts, etc.). The MDR parent label sits OUTSIDE the group so it
   stays at the top level alongside Cyber Risk Dashboard. The font-size
   tweak still applies to nested children to read as visually subordinate. */
.AlertsDemo-module__sidebar-group--itI12 {
  margin-bottom: 4px;
}

.AlertsDemo-module__sidebar-group--itI12 .AlertsDemo-module__sidebar-item--oSGC5 {
  font-size: 11px;
}

/* .sidebar-icon styles removed 2026-04-27 — the real CORR sidebar
   has no per-row icons; these were placeholder geometry that didn't
   match the production product. */

.AlertsDemo-module__sidebar-badge--TVGBe {
  background: #EF3340;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: auto;
  min-width: 16px;
  text-align: center;
  line-height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.AlertsDemo-module__sidebar-spacer--_p5rg {
  flex: 1;
}

.AlertsDemo-module__sidebar-divider--CTBCq {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 8px 0;
}

/* --- Content area --- */
.AlertsDemo-module__content--GwSo0 {
  position: relative;  /* Anchor for inline hotspot dots */
  flex: 1;
  min-width: 0;
  min-height: 0;       /* Allow flex child to shrink below content size */
  /* Tightened from 20px 24px → 12px 24px to claw back ~16px of vertical
     space so more alert rows are visible without scrolling. Cameron
     2026-04-28: "utilize as much space as possible for this demo". */
  padding: 12px 24px;
  /* Extra bottom padding (12 → 160) gives the wizard's auto-scroll on
     step 3 (click-socai) enough scrollable range to position the
     SOCAI button at ~70% down the viewport. Without it, max scrollTop
     tops out at ~370 and the button can only reach ~85% down — too
     low. The extra empty space sits below the last alert row and is
     never visible during the wizard flow. */
  padding-bottom: 160px;
  overflow-y: auto;    /* Block children overflow → scrollbar appears */
  overflow-x: hidden;
  overscroll-behavior: contain; /* Don't chain wheel events to the page */
  /* NOT display:flex — flex children shrink-to-fit and never overflow.
     Block layout lets children keep natural height, enabling scroll. */
}

/* Vertical spacing between block-level children (replaces flex gap) */
.AlertsDemo-module__content--GwSo0 > * + * {
  /* Tightened from 16px → 10px between content sections (page-title,
     filter-bar, widgets, alerts table) — saves ~18px total stacked. */
  margin-top: 10px;
}

.AlertsDemo-module__content--GwSo0::-webkit-scrollbar {
  width: 6px;
}

.AlertsDemo-module__content--GwSo0::-webkit-scrollbar-track {
  background: transparent;
}

.AlertsDemo-module__content--GwSo0::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.AlertsDemo-module__content--GwSo0::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Page title area */
.AlertsDemo-module__page-title-row--misD6 {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

/* ALERTS title — matches Figma: Saira Condensed, 24px, uppercase.
   Falls back to Saira (regular), then Inter, then sans-serif if the
   condensed family isn't loaded by the host Webflow site. */
.AlertsDemo-module__page-title--Zx9r1 {
  font-family: 'Saira Condensed', 'Saira', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 500;
  /* Tightened line-height from 38px → 28px. The original 38px was leaving
     14px of "ghost" leading above and below the ALERTS title, which read
     as wasted space at the top of the demo. 28px keeps a comfortable
     cap-height halo without inflating the row. */
  line-height: 28px;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

.AlertsDemo-module__page-tabs--qMBMe {
  display: flex;
  gap: 4px;
}

.AlertsDemo-module__page-tab--t8lIK {
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}

.AlertsDemo-module__page-tab--t8lIK:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.2);
}

.AlertsDemo-module__page-tab-active--jXLwe {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Filter bar */
.AlertsDemo-module__filter-bar--D5398 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.AlertsDemo-module__filter-toggle--sBDYp {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-right: 8px;
}

.AlertsDemo-module__filter-toggle-btn--CfaVk {
  font-size: 10px;
  padding: 4px 12px;
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}

.AlertsDemo-module__filter-toggle-btn--CfaVk:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
}

.AlertsDemo-module__filter-toggle-active--CeeKQ {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.AlertsDemo-module__filter-pill--CFzqc {
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms, border-color 120ms, background 120ms;
}

.AlertsDemo-module__filter-pill--CFzqc:hover {
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
}

.AlertsDemo-module__filter-pill-chevron--t0HsS {
  font-size: 8px;
  opacity: 0.5;
}

.AlertsDemo-module__filter-row-2--gnmn4 {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.AlertsDemo-module__filter-btn-add--pvp0T {
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--blue-bright, #009CDE);
  color: var(--blue-bright, #009CDE);
  background: transparent;
  cursor: pointer;
  transition: background 120ms;
}

.AlertsDemo-module__filter-btn-add--pvp0T:hover {
  background: rgba(0, 156, 222, 0.1);
}

/* --- Summary widgets row --- */
.AlertsDemo-module__widgets--slu0J {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

/* Widget cards — Figma: #1B2032 fill, 1px grey-30 border, 8px radius,
   tight 16px padding, 8px 16px shadow underneath.
   Cameron 2026-04-28: shrunk vertical footprint to surface more alert
   rows below — padding 16→12, min-height 180→150 (donut/legend still
   fit; insights numbers still breathe). */
.AlertsDemo-module__widget--ibLir {
  background: #1B2032;
  border: 1px solid rgba(135, 152, 173, 0.30);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 150px;
}

.AlertsDemo-module__widget-header--Hn1Oj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 14 → 8: header → body gap was eating vertical real estate inside
     each widget. */
  margin-bottom: 8px;
}

.AlertsDemo-module__widget-title--bteXq {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}

.AlertsDemo-module__widget-icon--zStvh {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

/* Donut chart widget */
.AlertsDemo-module__donut-layout--g95k5 {
  display: flex;
  gap: 16px;
  align-items: center;
}

.AlertsDemo-module__donut-wrap--MGSBu {
  flex-shrink: 0;
  position: relative;
  /* 120 → 104: donut shrinks slightly so the Asset Criticality widget
     no longer sets the tallest row in the widgets grid. The 209 total
     and tier legend still read clearly. */
  width: 104px;
  height: 104px;
}

.AlertsDemo-module__donut-center--o4Nnm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.AlertsDemo-module__donut-total--molSl {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.AlertsDemo-module__donut-label--fmoQ1 {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
}

.AlertsDemo-module__donut-legend--YRNwN {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.AlertsDemo-module__legend-row--vQ4UC {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  cursor: default;
}

.AlertsDemo-module__legend-dot--CFQit {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.AlertsDemo-module__legend-value--knUDy {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}

.AlertsDemo-module__legend-chevron--AB_hv {
  font-size: 8px;
  opacity: 0.4;
}

/* Source list widget */
.AlertsDemo-module__source-list--jhk21 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.AlertsDemo-module__source-row--wWsSY {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  cursor: default;
}

.AlertsDemo-module__source-icon--gGxpG {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.AlertsDemo-module__source-name--TN1CE {
  flex: 1;
}

.AlertsDemo-module__source-count--hoYAD {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Insights widget — soft radial cyan washes at top and bottom on
   the standard dark card. Per Figma. The two radial gradients
   layered over #1B2032 give the card a subtle "lit from above and
   below" feel that distinguishes it from the donut and source
   widgets without changing its size or layout. */
.AlertsDemo-module__widget-insights--CHV2_ {
  background:
    radial-gradient(50% 13.47% at 50% 0%, rgba(29, 185, 255, 0.10) 0%, rgba(29, 185, 255, 0) 100%),
    radial-gradient(50% 29.22% at 50% 100%, rgba(29, 183, 253, 0.17) 0%, rgba(29, 184, 254, 0) 100%),
    #1B2032;
  border-color: rgba(135, 152, 173, 0.30);
}

.AlertsDemo-module__insights-header--PyqyS {
  display: flex;
  align-items: center;
  gap: 6px;
}

.AlertsDemo-module__insights-icon--vr3ot {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

.AlertsDemo-module__insight-item--xJbmz {
  margin-bottom: 16px;
}

.AlertsDemo-module__insight-number--umjGE {
  font-size: 28px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

.AlertsDemo-module__insight-pct--oxD5j {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 6px;
}

.AlertsDemo-module__insight-desc--OojMm {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
  line-height: 1.4;
}

/* --- Alert table --- */
.AlertsDemo-module__table-controls--Ewfzz {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Search bar — full-width, slightly lighter than the page background
   per Figma (#242D43). Plain rectangle, no border, just a subtle
   color step. */
.AlertsDemo-module__search-box--MBwCS {
  background: #242D43;
  border: none;
  border-radius: 4px;
  padding: 8px 12px 8px 32px;
  font-size: 13px;
  color: rgba(170, 183, 201, 0.85);
  flex: 1;
  position: relative;
  cursor: text;
  transition: background 120ms;
  min-width: 0;
}

.AlertsDemo-module__search-box--MBwCS:hover {
  background: #2A3550;
}

.AlertsDemo-module__search-icon--Zso6J {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
}

.AlertsDemo-module__search-wrap--MtCwR {
  position: relative;
}

.AlertsDemo-module__table-total--Xp4id {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 12px;
}

.AlertsDemo-module__table-sort--JLN9H {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-left: auto;
}

.AlertsDemo-module__sort-select--JoXtl {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}

.AlertsDemo-module__sort-select--JoXtl:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

.AlertsDemo-module__generate-btn--sU174 {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color 120ms;
}

.AlertsDemo-module__generate-btn--sU174:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Table header — Figma uses #202433 with grey 12px Nunito Sans
   labels (mixed case, NOT uppercase). */
.AlertsDemo-module__table-header--q2w33 {
  display: grid;
  grid-template-columns: 90px minmax(240px, 2fr) 56px 100px 100px 130px 180px 96px;
  gap: 8px;
  padding: 12px;
  background: #202433;
  border-bottom: 1px solid rgba(135, 152, 173, 0.30);
  font-size: 12px;
  font-weight: 400;
  color: #8798AD;
  letter-spacing: 0;
  text-transform: none;
}

/* Table rows — Figma uses solid #242C43 row tiles separated by a
   thin gap so each row reads as a card. */
.AlertsDemo-module__alert-table--h3DgG {
  background: transparent;
  border: none;
  border-radius: 6px;
  overflow: hidden;
}

/* Alert row — matches the header grid (9 columns). Slightly taller
   per Figma (~73px overall) so each row reads as a substantive card
   rather than a compact list item. */
.AlertsDemo-module__alert-row--koogA {
  display: grid;
  grid-template-columns: 90px minmax(240px, 2fr) 56px 100px 100px 130px 180px 96px;
  gap: 8px;
  background: #242C43;
  margin-bottom: 2px;
  padding: 12px 16px;
  align-items: center;
  min-height: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  align-items: center;
  transition: background var(--duration-fast, 200ms);
  cursor: pointer;
}

/* .alert-row:hover removed 2026-04-27 — non-clickable rows shouldn't
   show a hover state. .clickable-row:hover (defined below) handles
   the proper hover for rows that actually open a detail panel. */

.AlertsDemo-module__alert-row-expanded--fuTsF {
  background: rgba(255, 255, 255, 0.04);
}


/* Clickable-row affordances. NO infinite pulse animation — the
   product is the product. Three quiet cues:
   1. The chevron (›) on clickable rows is brighter than its non-
      clickable siblings, so the eye registers it as an action.
   2. Hover state lifts the background and sharpens the left border.
   3. A single one-shot 1.2s "first-flash" runs on the FIRST clickable
      row when the demo first enters the viewport. After that, no
      animation.
   Design rationale (2026-04-27): visitors are security pros. They
   don't need begging affordances; they need ONE confident moment of
   invitation, then a polished product. */
.AlertsDemo-module__clickable-row--nmte4 {
  position: relative;
}

.AlertsDemo-module__clickable-row--nmte4 .AlertsDemo-module__row-chevron--nqvDb {
  color: rgba(0, 156, 222, 0.6);
  transition: color 0.15s ease;
}

.AlertsDemo-module__clickable-row--nmte4:hover {
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 4px 0 0 0 rgba(0, 156, 222, 0.65);
}

.AlertsDemo-module__clickable-row--nmte4:hover .AlertsDemo-module__row-chevron--nqvDb {
  color: rgba(0, 156, 222, 0.95);
}

/* The .alert-row-first-flash + .alert-row-intro-label rules and
   their keyframes were removed 2026-04-27 — the v3 guided tour
   replaces the one-shot intro moment with a full 4-step tour
   (see .tour-* rules below). */

.AlertsDemo-module__alert-row--koogA:last-child {
  border-bottom: none;
}

.AlertsDemo-module__row-chevron--nqvDb {
  color: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  transition: transform var(--duration-fast, 200ms);
  display: flex;
  align-items: center;
  justify-content: center;
}

.AlertsDemo-module__row-chevron-open--MlrmA {
  transform: rotate(90deg);
}

/* ============================================
   FREE-ROAM PULSE — Cameron 2026-05-11
   ============================================
   Replaces the wizard spotlight on the Home page (and on any
   tablet render). The wizard's hand-holding flow is overkill for
   the Home page — visitors should be able to click around. The
   pulse draws attention to the entry-point click target (row 0
   chevron) and, after a row is expanded, to the SOCAI button as
   the natural next thing to try.
   --------------------------------------------
   Applied to: .row-chevron on row 0 (until any row is expanded),
   then .detail-action-socai (until SOCAI panel opens). Both are
   <span>s so we need position: relative locally; the ::after
   pseudo is absolutely positioned outside the element so it
   doesn't push the layout.
   The ring animation uses box-shadow only — no transform on the
   parent — to avoid stacking-context issues with the wizard
   spotlight veil. */
.AlertsDemo-module__free-roam-pulse--NzkfN {
  position: relative;
}

.AlertsDemo-module__free-roam-pulse--NzkfN::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue-bright, #009CDE);
  box-shadow:
    0 0 0 0 rgba(0, 156, 222, 0.7),
    0 0 10px 3px rgba(0, 156, 222, 0.7);
  animation: AlertsDemo-module__free-roam-pulse-ring--cblqN 1.8s ease-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* Variant for elements where a corner-positioned dot would clip
   awkwardly (e.g. tabs inside scroll containers, the SOCAI input).
   Uses a slightly inset top so the dot tucks against the corner
   without overflowing visually. */
.AlertsDemo-module__free-roam-pulse-inset--akZNq::after {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue-bright, #009CDE);
  box-shadow:
    0 0 0 0 rgba(0, 156, 222, 0.7),
    0 0 10px 3px rgba(0, 156, 222, 0.7);
  animation: AlertsDemo-module__free-roam-pulse-ring--cblqN 1.8s ease-out infinite;
  pointer-events: none;
  z-index: 2;
}

.AlertsDemo-module__free-roam-pulse-inset--akZNq {
  position: relative;
}

@keyframes AlertsDemo-module__free-roam-pulse-ring--cblqN {
  0% {
    box-shadow:
      0 0 0 0 rgba(0, 156, 222, 0.7),
      0 0 10px 3px rgba(0, 156, 222, 0.7);
  }
  70% {
    box-shadow:
      0 0 0 14px rgba(0, 156, 222, 0),
      0 0 10px 3px rgba(0, 156, 222, 0.35);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(0, 156, 222, 0),
      0 0 10px 3px rgba(0, 156, 222, 0.7);
  }
}

.AlertsDemo-module__alert-name--mNFXe {
  color: var(--blue-bright, #009CDE);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(0, 156, 222, 0.3);
  text-underline-offset: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.AlertsDemo-module__alert-external-icon--brhY6 {
  font-size: 9px;
  opacity: 0.5;
}

.AlertsDemo-module__alert-source-icon--Rm4Nk {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
}

/* Severity & status badges — colors and weights matched to the
   Figma "Vendor Severity" and "Alert Status" patterns: solid-but-
   translucent fill, white text, slightly more substantial than the
   prior pale-overlay style. */
/* Severity badges — Cameron 2026-04-28: ALL severities render as
   outline pills now (colored border, transparent fill, WHITE text
   inside). The label color used to encode severity, but on a dark
   row that hurt scannability for Medium/Low. White text + colored
   border keeps the severity color cue while improving legibility. */
.AlertsDemo-module__severity-badge--CcXb9 {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
  text-align: center;
  display: inline-block;
  background: transparent;
  color: #FFFFFF;
  border: 1px solid transparent;
}

.AlertsDemo-module__severity-high--Fc0fY,
.AlertsDemo-module__severity-critical--l93OS {
  border-color: #EB2A2A;
}

.AlertsDemo-module__severity-medium--fr6OC {
  border-color: #FF9500;
}

.AlertsDemo-module__severity-low--nPeY5 {
  border-color: #FFCC00;
}

/* Base layout for the status pill. Color + bg live on the
   .status-open / .status-closed variant classes — putting them here
   too caused the variant rules to be overridden because both classes
   share the same specificity and .status-badge appeared later in
   source order, painting every Open pill green (Cameron 2026-04-28). */
.AlertsDemo-module__status-badge--Hnk4M {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  text-align: center;
}

/* Age cell — Cameron 2026-04-28: match the Assigned column's text
   treatment so timestamps read with the same visual weight as the
   playbook name beside them, instead of fading into the row as
   small dim metadata. The .alert-assigned override at the bottom of
   this file (12px / white / line-height 1.35) is what we're aligning
   to here. */
.AlertsDemo-module__alert-age--ThXSx {
  font-size: 12px;
  color: #FFFFFF;
  line-height: 1.35;
  white-space: nowrap;
}

.AlertsDemo-module__alert-age-relative--SC1pr {
  display: block;
}

.AlertsDemo-module__alert-age-absolute--RQw_V {
  display: block;
  font-size: 12px;
  color: #FFFFFF;
}

.AlertsDemo-module__alert-assigned--vyRqm {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.AlertsDemo-module__alert-actions--ni0MG {
  display: flex;
  gap: 6px;
  align-items: center;
}

.AlertsDemo-module__action-icon--O9r2d {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  cursor: pointer;
  position: relative;
  transition: color 120ms, background 120ms;
}

.AlertsDemo-module__action-icon--O9r2d:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

/* Custom instant tooltip — replaces native title attr */
.AlertsDemo-module__action-icon--O9r2d::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1B2032;
  color: rgba(255, 255, 255, 0.85);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms ease;
}

.AlertsDemo-module__action-icon--O9r2d:hover::after {
  opacity: 1;
}

/* --- Expanded detail panel --- */
.AlertsDemo-module__detail-panel--iVyIp {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 1px;
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  /* Cameron 2026-04-28: animation was max-height: 0 → 600px, but that
     fought our auto-scroll on row-click — when scrollTo fired (~32ms
     after the click), the panel was still mid-grow at ~60px tall, so
     .content's scrollHeight was small and scrollTop got clamped to a
     tiny range that couldn't scroll the widgets above the row out of
     view. Switched to an opacity/translate enter so layout doesn't
     animate. */
  animation: AlertsDemo-module__detail-enter--SVtAr var(--duration-normal, 300ms) var(--ease-enter);
  /* Min-height keeps the panel tall enough that the row above it can
     actually be scrolled to the top of .content's viewport. Without
     this, the panel sizes to ~500px, total content is ~840px in a
     664px viewport, and the auto-scroll's max effective scrollTop is
     ~176px — not enough to push the page-title + filter-bar + widgets
     fully out of view. 620px gives ~290px of scroll headroom. */
  min-height: 620px;
}

@keyframes AlertsDemo-module__detail-enter--SVtAr {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.AlertsDemo-module__detail-col--hH4my {
  background: #151827;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AlertsDemo-module__detail-tabs--mMViU {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}

/* Detail panel tabs.
   Strong contrast between inactive (dim, 0.30) and active (bright,
   0.95) — the contrast itself is the affordance. Visitors will
   instinctively want to click the dim ones to "complete" the set.
   Hover state brightens to about halfway and tints the underline.
   No pulse animation — the contrast does all the affordance work. */
.AlertsDemo-module__detail-tab--EslXB {
  font-size: 11px;
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.30);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-bottom-color 0.15s ease;
}

.AlertsDemo-module__detail-tab--EslXB:hover {
  color: rgba(255, 255, 255, 0.70);
  border-bottom-color: rgba(0, 156, 222, 0.40);
}

.AlertsDemo-module__detail-tab-active--zHFBu {
  color: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--blue-bright, #009CDE);
}

/* Left column — alert details */
.AlertsDemo-module__detail-field--lM1tL {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
}

.AlertsDemo-module__detail-field--lM1tL:last-child {
  border-bottom: none;
}

.AlertsDemo-module__detail-key--GT5e1 {
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
  margin-right: 8px;
}

.AlertsDemo-module__detail-value--bCiY_ {
  color: rgba(255, 255, 255, 0.75);
  text-align: right;
  word-break: break-word;
}

.AlertsDemo-module__detail-value-badge--eyhnY {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 100px;
  display: inline-block;
}

.AlertsDemo-module__detail-mitre-tag--COCIU {
  font-size: 10px;
  color: var(--blue-bright, #009CDE);
  display: flex;
  align-items: center;
  gap: 4px;
}

.AlertsDemo-module__detail-mitre-sub--tfxW2 {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 2px;
  display: block;
}

/* Center column — SOC Summary */
.AlertsDemo-module__soc-summary-title--KYWqm {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 8px;
}

.AlertsDemo-module__soc-summary-text--JWsN_ {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin-bottom: 6px;
}

.AlertsDemo-module__soc-summary-bullets--pt3ag {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.AlertsDemo-module__soc-summary-bullets--pt3ag li {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  padding: 2px 0 2px 14px;
  position: relative;
}

.AlertsDemo-module__soc-summary-bullets--pt3ag li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

/* Highlight classes — usable in any context */
.AlertsDemo-module__ip-highlight--j5ps7 {
  color: #22c55e;
}

.AlertsDemo-module__server-highlight--s4jpm {
  color: #22c55e;
}

.AlertsDemo-module__soc-summary-bullets--pt3ag .AlertsDemo-module__ip-highlight--j5ps7 {
  color: #22c55e;
}

.AlertsDemo-module__soc-result--tINoO {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
  margin-top: 8px;
}

/* Customer response block (dark highlighted) */
.AlertsDemo-module__customer-response--_ezto {
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 4px 4px 0;
  padding: 12px;
  margin: 12px 0;
}

.AlertsDemo-module__customer-response--_ezto p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin: 0 0 8px;
}

.AlertsDemo-module__customer-response--_ezto p:last-child {
  margin-bottom: 0;
}

.AlertsDemo-module__customer-response--_ezto .AlertsDemo-module__ip-highlight--j5ps7 {
  color: #22c55e;
}

.AlertsDemo-module__customer-response--_ezto .AlertsDemo-module__server-highlight--s4jpm {
  color: #22c55e;
}

/* Additional Analysis */
.AlertsDemo-module__additional-title--Wyq9V {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 12px;
  margin-bottom: 8px;
}

/* Section divider in SOC summary */
.AlertsDemo-module__soc-section-divider--XbcVQ {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 16px 0;
}

/* Priority badge */
.AlertsDemo-module__soc-priority-badge--Ftq1N {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  margin-bottom: 12px;
}

/* Bold labels in SOC bullets */
.AlertsDemo-module__soc-summary-bullets--pt3ag strong {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

/* Scrollable detail column content. max-height bumped 420 → 540
   2026-04-28 to match the taller .detail-panel min-height (620px)
   so columns naturally fill the panel height instead of leaving
   empty space at the bottom of each column. The user scrolls
   within these regions to read more. */
.AlertsDemo-module__detail-scroll--ghcMu {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* Don't chain wheel events to the page */
  max-height: 540px;
  padding-right: 4px;
}

.AlertsDemo-module__detail-scroll--ghcMu::-webkit-scrollbar {
  width: 4px;
}

.AlertsDemo-module__detail-scroll--ghcMu::-webkit-scrollbar-track {
  background: transparent;
}

.AlertsDemo-module__detail-scroll--ghcMu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.AlertsDemo-module__detail-scroll--ghcMu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Right column — Responses */
.AlertsDemo-module__response-label--PiC6b {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 4px;
}

.AlertsDemo-module__response-empty--xVszz {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

/* Response action row — Cameron 2026-04-28 specced this from the live
   CORR product. Each Primary/Secondary response is an ACTIONABLE row
   (analyst can toggle the checkbox to perform), not an audit-log
   description. Layout: [checkbox] [kind icon] [label + target]. */
.AlertsDemo-module__response-action--jkmrd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: #FFFFFF;
}

.AlertsDemo-module__response-action--jkmrd + .AlertsDemo-module__response-action--jkmrd {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.AlertsDemo-module__response-checkbox--qsDSJ {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(135, 152, 173, 0.5);
  border-radius: 2px;
  background: transparent;
}

.AlertsDemo-module__response-icon--oiXgO {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.AlertsDemo-module__response-action-label--AoZfz {
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.AlertsDemo-module__response-action-target--A7Vh7 {
  color: #FFFFFF;
  font-weight: 500;
}

/* --- Trigger Events tab --- */
.AlertsDemo-module__trigger-events--P4t7Y {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.AlertsDemo-module__trigger-title--_NeIM {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.AlertsDemo-module__trigger-field--_bZ8W {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.AlertsDemo-module__trigger-field--_bZ8W:last-child {
  border-bottom: none;
}

.AlertsDemo-module__trigger-label--LQ_IF {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 2px;
}

.AlertsDemo-module__trigger-value--JABsa {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 6px;
}

.AlertsDemo-module__trigger-search-icon--cKo0p {
  font-size: 10px;
  opacity: 0.4;
  cursor: default;
}

/* --- Investigation tab --- */
.AlertsDemo-module__investigation-content--MOg_P {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AlertsDemo-module__investigation-heading--u_mCO {
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-bright, #009CDE);
  margin-bottom: 4px;
}

.AlertsDemo-module__investigation-item--e1ogc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.AlertsDemo-module__investigation-icon--QSQgy {
  font-size: 12px;
  opacity: 0.5;
}

/* --- Unified Timeline table --- */
/* ================================================================
   UNIFIED TIMELINE — Vertical card layout matching CORR platform
   ================================================================ */
.AlertsDemo-module__timeline-wrap--CvL2m {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

/* Sort control (top-right) */
.AlertsDemo-module__timeline-sort--M3WiX {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding: 6px 0 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

.AlertsDemo-module__timeline-sort-icon--rjjo_ {
  font-size: 9px;
}

/* --- Individual timeline entry --- */
.AlertsDemo-module__tl-entry--C2zLp {
  margin-bottom: 2px;
}

/* Badge bar: full-width colored banner with icon, type label, chevron */
.AlertsDemo-module__tl-badge-bar--Zpklr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 4px 4px 0 0;
  font-size: 10px;
  font-weight: 600;
}

.AlertsDemo-module__tl-badge-bar-icon--ykSAd {
  font-size: 11px;
  display: flex;
  align-items: center;
}

.AlertsDemo-module__tl-badge-bar-label--dxqFW {
  flex: 1;
}

.AlertsDemo-module__tl-badge-bar-chevron--DXCIK {
  font-size: 10px;
  opacity: 0.6;
  cursor: default;
}

/* Badge bar color variants */
.AlertsDemo-module__tl-bar-escalation--hHOs2 {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border-left: 3px solid #a855f7;
}

.AlertsDemo-module__tl-bar-comment--DD_1j {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border-left: 3px solid #22c55e;
}

.AlertsDemo-module__tl-bar-audit--vK02F {
  background: rgba(107, 114, 128, 0.18);
  color: #9ca3af;
  border-left: 3px solid #6b7280;
}

.AlertsDemo-module__tl-bar-event--FfnbD {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border-left: 3px solid #3b82f6;
}

/* Entry body: content below the badge bar */
.AlertsDemo-module__tl-entry-body--wrNzM {
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid transparent;
  padding: 8px 10px;
  border-radius: 0 0 4px 4px;
}

/* Timestamp row inside entry body */
.AlertsDemo-module__tl-entry-time--v5_GB {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 2px;
}

/* Simple detail text (for Escalation, Audit, Event entries) */
.AlertsDemo-module__tl-entry-detail--HisXY {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}

/* --- Comment entry specifics --- */
.AlertsDemo-module__tl-comment-user--jCvlS {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(42, 173, 224, 0.8);
  margin-bottom: 8px;
}

.AlertsDemo-module__tl-comment-copy-icon--sefvG {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  cursor: default;
}

/* Dark content card inside comment entries */
.AlertsDemo-module__tl-comment-card--DA1ls {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.AlertsDemo-module__tl-comment-card--DA1ls strong {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  display: block;
  margin-bottom: 2px;
}

.AlertsDemo-module__tl-comment-heading--n_1gO {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 8px;
  margin-bottom: 2px;
}

.AlertsDemo-module__tl-comment-text--HXrma {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

.AlertsDemo-module__tl-comment-list--G2tSl {
  list-style: none;
  padding: 0;
  margin: 2px 0 4px;
}

.AlertsDemo-module__tl-comment-list--G2tSl li {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  padding: 1px 0 1px 14px;
  position: relative;
}

.AlertsDemo-module__tl-comment-list--G2tSl li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.AlertsDemo-module__tl-comment-list--G2tSl strong {
  display: inline;
  margin-bottom: 0;
  font-size: 10px;
}

/* --- CTA below demo --- */
.AlertsDemo-module__cta-wrap--ebdfV {
  text-align: center;
  margin-top: 20px;
}

.AlertsDemo-module__cta-subtext--MR9UD {
  font-size: 15px;
  color: var(--text-secondary, #52525B);
  margin-bottom: 12px;
}

.AlertsDemo-module__btn-primary--NsnUy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cta-orange, #FA6614);
  color: var(--text-inverse, #FFFFFF);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: var(--radius-sm, 6px);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast, 200ms),
              transform var(--duration-fast, 200ms),
              box-shadow var(--duration-fast, 200ms);
}

.AlertsDemo-module__btn-primary--NsnUy:hover {
  background: var(--cta-orange-hover, #E55D0F);
  color: var(--text-inverse, #FFFFFF);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(250, 102, 20, 0.25);
}

.AlertsDemo-module__btn-primary--NsnUy:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(250, 102, 20, 0.2);
}

.AlertsDemo-module__btn-primary--NsnUy:focus-visible {
  outline: 2px solid var(--text-primary, #1E1E1E);
  outline-offset: 2px;
}

/* --- Detail panel bottom action bar --- */
.AlertsDemo-module__detail-action-bar--PCBy0 {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 12px;
  background: #151827;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.AlertsDemo-module__detail-action-btn--BXQ53 {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: default;
  white-space: nowrap;
}

/* SOC AI button — distinguished by SHAPE (subtle persistent glow),
   not by animation. The glow is so soft it reads as a property of
   the button rather than a separate effect, but it's enough to
   separate this pill from its neighbors as the "primary curiosity"
   element on the row. Hover deepens the glow and lifts slightly. */
.AlertsDemo-module__detail-action-socai--uevpV {
  color: var(--blue-bright, #009CDE);
  border-color: rgba(0, 156, 222, 0.40);
  background: rgba(0, 156, 222, 0.10);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 156, 222, 0.18), 0 0 12px -2px rgba(0, 156, 222, 0.20);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.AlertsDemo-module__detail-action-socai--uevpV:hover {
  background: rgba(0, 156, 222, 0.18);
  border-color: rgba(0, 156, 222, 0.60);
  box-shadow: 0 0 0 1px rgba(0, 156, 222, 0.35), 0 0 16px -2px rgba(0, 156, 222, 0.30);
  transform: translateY(-1px);
}

/* ============================================
   GUIDED TOUR — Hotspot overlay
   ============================================ */

/* Sidebar wrapper — position: relative so sidebar hotspot can anchor to it.
   display:flex + align-self:stretch lets .nav-figma fill the full height of
   .main-layout so the dark #1B2032 nav color extends below the SVG content
   (mirrors how .header-figma's wrapper bg fills around the absolute-positioned
   header copies). */
.AlertsDemo-module__sidebar-wrap--VnHfC {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-self: stretch;
}


/* ============================================
   SOCAI PANEL
   ============================================ */
/* SOC AI panel slides in as an OVERLAY on the right side of the
   demo frame, not as a flex sibling. Previous behavior squashed the
   .content area's width when SOCAI opened (Cameron 2026-04-27).
   Now it floats above .content via absolute positioning so the
   underlying alerts UI stays at full width. */
.AlertsDemo-module__socai-panel--QvZf1 {
  position: absolute;
  top: 44px; /* sit below the .top-bar */
  right: 0;
  bottom: 0;
  width: 360px;
  background: #1B2032;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  z-index: 95; /* above the wizard spotlight (90) so the chat-input
                   target reads bright during step 4. The whole panel
                   reads bright in that step — fine, the panel is small
                   and the user's focus is already on it. */
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.32);
  animation: AlertsDemo-module__socai-slide-in--DWtnv 250ms ease-out;
}

@keyframes AlertsDemo-module__socai-slide-in--DWtnv {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Panel header */
.AlertsDemo-module__socai-header--OVhDv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #151827;
  flex-shrink: 0;
}

.AlertsDemo-module__socai-header-left--EhemO {
  display: flex;
  align-items: center;
  gap: 8px;
}

.AlertsDemo-module__socai-menu-icon--IOHo3 {
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
}

.AlertsDemo-module__socai-logo--FdE48 {
  display: flex;
  align-items: center;
  animation: AlertsDemo-module__socai-logo-spin--Q__Zx 8s linear infinite;
}

@keyframes AlertsDemo-module__socai-logo-spin--Q__Zx {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.AlertsDemo-module__socai-title--GCk8T {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.02em;
}

.AlertsDemo-module__socai-header-right--cAbww {
  display: flex;
  align-items: center;
  gap: 6px;
}

.AlertsDemo-module__socai-header-btn--ykYyn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.AlertsDemo-module__socai-header-btn--ykYyn:hover {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
}

/* Panel body */
.AlertsDemo-module__socai-body--DzeqI {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* Don't chain wheel events to the page */
  padding: 16px;
  min-height: 0;
}

.AlertsDemo-module__socai-body--DzeqI::-webkit-scrollbar {
  width: 4px;
}

.AlertsDemo-module__socai-body--DzeqI::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

/* Welcome view */
.AlertsDemo-module__socai-welcome--wwwEl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 300px;
  gap: 16px;
}

.AlertsDemo-module__socai-orb-wrap--YQMFv {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.AlertsDemo-module__socai-orb-glow--UZgrU {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 156, 222, 0.25) 0%, rgba(124, 58, 237, 0.15) 50%, transparent 70%);
  animation: AlertsDemo-module__orb-glow-pulse--RVHza 3s ease-in-out infinite;
}

@keyframes AlertsDemo-module__orb-glow-pulse--RVHza {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}

.AlertsDemo-module__socai-orb--Po6s7 {
  position: relative;
  z-index: 1;
  animation: AlertsDemo-module__orb-float--uX5QT 4s ease-in-out infinite;
}

@keyframes AlertsDemo-module__orb-float--uX5QT {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.AlertsDemo-module__socai-status--Jo8ry {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}

.AlertsDemo-module__socai-desc--RRTG9 {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  max-width: 280px;
}

.AlertsDemo-module__socai-context--Qx1eH {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

/* Conversation view */
.AlertsDemo-module__socai-conversation--TN7xW {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* User message */
.AlertsDemo-module__socai-msg-user--kUV9l {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.AlertsDemo-module__socai-msg-avatar--VC8Cs {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue-bright, #009CDE);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.AlertsDemo-module__socai-msg-bubble-user--wrvSB {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}

/* Tool calls */
.AlertsDemo-module__socai-tool-call--GAgWR {
  margin-left: 32px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.AlertsDemo-module__socai-tool-header--m0Xwp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}

.AlertsDemo-module__socai-tool-status--XKp7M {
  margin-left: auto;
  font-size: 9px;
  color: #22c55e;
  font-weight: 500;
}

/* AI message */
.AlertsDemo-module__socai-msg-ai--FHDpH {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.AlertsDemo-module__socai-msg-avatar-ai--ynEro {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 156, 222, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.AlertsDemo-module__socai-msg-bubble-ai--RT9kh {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  flex: 1;
  min-width: 0;
}

.AlertsDemo-module__socai-ai-heading--YlrtN {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 10px;
  margin-bottom: 4px;
}

.AlertsDemo-module__socai-ai-heading--YlrtN:first-child {
  margin-top: 0;
}

.AlertsDemo-module__socai-ai-text--c8j22 {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
  margin-bottom: 4px;
}

.AlertsDemo-module__socai-ai-list--ocBrt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 4px 0;
}

.AlertsDemo-module__socai-ai-list-item--mJ0H5 {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  padding-left: 10px;
  position: relative;
}

.AlertsDemo-module__socai-ai-list-item--mJ0H5::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: rgba(0, 156, 222, 0.5);
}

.AlertsDemo-module__socai-ai-label--QQOB5 {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

/* Chat input area */
.AlertsDemo-module__socai-input-area--A1Gsr {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #151827;
  padding: 10px 12px;
  flex-shrink: 0;
  position: relative;
}

.AlertsDemo-module__socai-input-row--G2gi8 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}

.AlertsDemo-module__socai-input-plus--HdwSA {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  flex-shrink: 0;
}

.AlertsDemo-module__socai-input-plus--HdwSA:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.3);
}

.AlertsDemo-module__socai-input-field--suHAE {
  flex: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.AlertsDemo-module__socai-send-btn--epAUI {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--blue-bright, #009CDE);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

/* Agent bar */
.AlertsDemo-module__socai-agent-bar--_wJmJ {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.AlertsDemo-module__socai-agent-select--cEOl2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  cursor: default;
}

/* Slash command menu */
.AlertsDemo-module__socai-slash-menu--IZ_g5 {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 12px;
  right: 12px;
  background: #1B2032;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: AlertsDemo-module__slash-menu-enter--lJ6xk 150ms ease-out;
}

@keyframes AlertsDemo-module__slash-menu-enter--lJ6xk {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.AlertsDemo-module__socai-slash-title--F6ZNP {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.25);
  padding: 4px 12px 6px;
}

.AlertsDemo-module__socai-slash-item--lyD_4 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  cursor: default;
}

.AlertsDemo-module__socai-slash-item--lyD_4:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .AlertsDemo-module__main-layout--zWwDr {
    flex-direction: column;
  }
  .AlertsDemo-module__sidebar--w2NEb,
  .AlertsDemo-module__sidebar-wrap--VnHfC {
    display: none;
  }
  .AlertsDemo-module__widgets--slu0J {
    grid-template-columns: 1fr;
  }
  .AlertsDemo-module__detail-panel--iVyIp {
    grid-template-columns: 1fr;
  }
  .AlertsDemo-module__alert-row--koogA,
  .AlertsDemo-module__table-header--q2w33 {
    grid-template-columns: 24px 2fr 60px 70px 60px 80px;
  }
  .AlertsDemo-module__alert-assigned--vyRqm,
  .AlertsDemo-module__table-header--q2w33 > :nth-child(7) {
    display: none;
  }
  .AlertsDemo-module__alert-actions--ni0MG,
  .AlertsDemo-module__table-header--q2w33 > :nth-child(8) {
    display: none;
  }
  .AlertsDemo-module__socai-panel--QvZf1 {
    display: none;
  }
  .AlertsDemo-module__detail-action-bar--PCBy0 {
    display: none;
  }
}


/* ============================================
   VIEW MODE TOGGLE — "Categories | Triage"
   ============================================
   Segmented control next to the ALERTS title (Figma 2026-04-27).
   Two equal-width pills, active one elevated with darker fill +
   soft shadow. Sits inside the page-title-row alongside <h3>. */
.AlertsDemo-module__view-toggle--y5PZX {
  display: inline-flex;
  align-items: center;
  width: 312px;
  height: 34px;
  padding: 4px;
  gap: 4px;
  background: rgba(158, 172, 192, 0.10);
  border-radius: 4px;
  flex-shrink: 0;
}

.AlertsDemo-module__view-toggle-segment--LYcCw {
  flex: 1;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito Sans', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.AlertsDemo-module__view-toggle-segment--LYcCw:hover:not(.AlertsDemo-module__view-toggle-active--pZSzM) {
  background: rgba(135, 152, 173, 0.15);
}

.AlertsDemo-module__view-toggle-active--pZSzM {
  background: rgba(135, 152, 173, 0.30);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

/* ============================================
   ALERT ROW NEW CELLS — Figma 2026-04-27
   ============================================
   Response Priority pill, Status + SOC Verdict cell, and Host
   cell with user/host icons + names. Adds visual fidelity to the
   data grid without restructuring the underlying table component. */
.AlertsDemo-module__priority-pill--zwayq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(135, 152, 173, 0.30);
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
}

.AlertsDemo-module__priority-pill--zwayq svg {
  flex-shrink: 0;
  color: #FFFFFF;
}

.AlertsDemo-module__status-cell--fuLRI {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.AlertsDemo-module__status-verdict--LeCyJ {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.AlertsDemo-module__host-cell--zWzGx {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.AlertsDemo-module__host-row--exwbR {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #FFFFFF;
  min-width: 0;
}

.AlertsDemo-module__host-row--exwbR svg {
  flex-shrink: 0;
}

.AlertsDemo-module__host-icon-user--st4XW {
  color: #AAB7C9;
}

.AlertsDemo-module__host-icon-machine--oixou {
  color: #D32F2F;
}

/* ============================================
   REAL VENDOR LOGOS — Cameron 2026-04-27
   ============================================
   White rounded tile that holds the symbol-light SVG from
   portal.criticalstart.io. Used on the alert row's Source cell and
   inside the Source widget's per-source row. The white background
   gives every vendor logo (CrowdStrike red, Microsoft blue, etc.)
   a consistent visual frame on the dark UI. */
.AlertsDemo-module__alert-source-logo--asv31,
.AlertsDemo-module__source-logo--iDfqp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #FFFFFF;
  flex-shrink: 0;
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
}

.AlertsDemo-module__alert-source-logo--asv31 img,
.AlertsDemo-module__source-logo--iDfqp img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Source widget tile is slightly smaller so it fits the compact
   per-source row layout. */
.AlertsDemo-module__source-logo--iDfqp {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  padding: 3px;
}

/* ============================================
   ID CELL + ASSIGNED — Cameron's live-product screenshot 2026-04-27
   ============================================
   ID column shows expand chevron + the 8-digit alert ID side by side
   in the same cell. Assigned column wraps long playbook names like
   "Proactive Threat Hunting (Default)" onto two lines. */
.AlertsDemo-module__alert-id-cell--S_SDq {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #FFFFFF;
}

.AlertsDemo-module__alert-id-text--Juk_h {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Assigned cell — render team / playbook name as wrapping text so
   "Default (High Priority)" reads as multi-line not ellipsis-truncated.
   Two-tier weight per the live CORR product (Cameron 2026-04-28):
   the lead ("Default" or analyst name) is bold; the parenthetical
   suffix ("(High Priority)", "(Critical Start)") is regular weight.
   See the parser in AlertsDemo.tsx — anything before the first
   " (...)" group is the lead, the parenthetical group is the suffix. */
.AlertsDemo-module__alert-assigned--vyRqm {
  font-size: 12px;
  line-height: 1.35;
  color: #FFFFFF;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.AlertsDemo-module__alert-assigned-lead--y8ryw {
  font-weight: 700;
}

.AlertsDemo-module__alert-assigned-suffix--hBc0t {
  font-weight: 400;
}

/* ============================================
   FIGMA SVG ASSET WRAPPERS — 2026-04-28 (v2)
   ============================================
   Direct Figma exports of the header (Header Group.svg) and the
   collapsed left-rail nav (Nav Menu - Dark.svg). Both render at the
   SVG's NATIVE pixel size, NOT scaled to fit the demo frame width.
   Scaling a 866-wide canvas to fill a ~1200-wide marketing column
   stretched the header to ~111px tall — way oversized vs. the real
   product's ~56px bar. Native sizing preserves the designed
   proportions. The wrapper extends the dark `#1B2032` color across
   the full demo frame width via background-color so the bar visually
   reads edge-to-edge even though the SVG content only spans 866px. */
/* Header — split-render of the Figma SVG (see DemoFigmaAssets.tsx
   for why). Two copies of the same SVG: left copy clipped to show
   pixels 0-644 (logo + org switcher + System Status pill), right
   copy clipped to show pixels 644-866 (scoped-mode + notifications
   + help + user avatar). Wrapper's #1B2032 background fills the
   gap between the two clusters so the bar reads continuous. */
.AlertsDemo-module__header-figma--vSwuO {
  width: 100%;
  height: 56px;
  background: #1B2032;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  /* Continuous divider line across the full header width. The original
     SVG had this baked in as an inner-shadow filter on the rect, but
     the split-render approach leaves a ~334px gap in the middle of the
     wrapper where neither SVG copy paints the line. Moving the divider
     to the wrapper as a CSS border guarantees one unbroken hairline
     spanning edge to edge. Color matches the nav rail's border-right
     so the two dividers read as one continuous frame around the
     content area. */
  border-bottom: 1px solid rgba(135, 152, 173, 0.30);
  box-sizing: border-box;
}

.AlertsDemo-module__header-figma--vSwuO .header-figma-left,
.AlertsDemo-module__header-figma--vSwuO .header-figma-right {
  position: absolute;
  top: 0;
  width: 866px;
  height: 80px;
  pointer-events: none;
}

.AlertsDemo-module__header-figma--vSwuO .header-figma-left {
  left: 0;
  /* Show only pixels 0-644 from the SVG's left edge (the logo +
     org-switcher + status-pill cluster). Anything to the right of
     x=644 in the SVG gets clipped — i.e. the right-side icons would
     have rendered here but are hidden. */
  clip-path: inset(0 222px 0 0);
}

.AlertsDemo-module__header-figma--vSwuO .header-figma-right {
  right: 0;
  /* Show only pixels 644-866 from the SVG's left edge (the scoped-
     mode + notifications + help + avatar cluster). The left portion
     of the SVG is hidden. Because the SVG is anchored to the demo
     frame's right edge, the avatar lands ~4px from the right edge —
     matching the real CORR product layout. */
  clip-path: inset(0 0 0 644px);
}

.AlertsDemo-module__header-figma--vSwuO .header-figma-left > svg,
.AlertsDemo-module__header-figma--vSwuO .header-figma-right > svg {
  display: block;
  width: 866px;
  height: 80px;
}

/* Nav rail — 60px-wide collapsed column. The SVG's native viewBox
   is 234×534 but only the leftmost ~60px contains visible content
   (icons); overflow:hidden clips the empty padding on the right.
   Same treatment as .header-figma: the wrapper provides the dark
   #1B2032 background and stretches to fill the full available
   height (via .sidebar-wrap's flex setup), while the SVG itself is
   absolutely positioned at the top at NATIVE pixel dimensions so it
   never gets stretched or distorted. Below the SVG's 534px content,
   the wrapper's background color extends down through the rest of
   the demo frame, matching the real CORR product where the nav
   color runs the full viewport height. */
.AlertsDemo-module__nav-figma--zJdbU {
  width: 60px;
  flex-shrink: 0;
  background: #1B2032;
  /* Continuous divider line down the full nav-rail height. The
     original SVG had this baked in as an inner-shadow filter on the
     rect (right edge), but that line stopped at the SVG's native
     534px height — leaving a vertical gap of bare background below
     it where the wrapper extends to fill the rest of .main-layout.
     Putting the divider on the wrapper guarantees one unbroken
     hairline running top to bottom. */
  border-right: 1px solid rgba(135, 152, 173, 0.30);
  box-sizing: border-box;
  overflow: hidden;
  line-height: 0;
  position: relative;     /* Anchor for absolutely-positioned SVG */
  align-self: stretch;    /* Fill .sidebar-wrap's full height */
}

.AlertsDemo-module__nav-figma--zJdbU svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 234px;            /* SVG native — never scaled */
  height: 534px;           /* SVG native — never scaled */
  pointer-events: none;
}

/* ============================================
   WIZARD — v4 (2026-04-28)
   ============================================
   Replaces the old TourOverlay + HotspotDot system. Four sequential
   steps; each step has exactly one undimmed/clickable target. The
   rest of the demo frame is rendered inert (no cursor change, no
   click handlers fire) so the user can't get lost.

   Visual model:
   - .wizard-active applied to .demo-frame neutralizes the cursor +
     pointer events on every interactive element inside the frame.
   - .wizard-target opts the active target back in (cursor: pointer +
     pointer-events: auto).
   - .wizard-spotlight is a single absolutely-positioned div sized to
     the active target's rect, with a giant box-shadow that paints
     the surrounding area dim. No bright colors, no glow. Pointer
     events pass through it (pointer-events: none) so clicks reach
     the target underneath.
   - .wizard-continue is the explore-detail step's "Continue →" pill,
     which lets the user advance early; auto-advances after 10s.
   ============================================ */

/* Parent .content scroll is locked while the wizard is active —
   handled in JS rather than CSS overflow:hidden because that would
   also block our programmatic auto-scroll on row-click. See the
   useEffect in AlertsDemo.tsx that attaches a capturing wheel
   listener and prevents wheel events that would scroll .content,
   while still letting wheel events pass through to inner
   .detail-scroll regions (SOC summary, timeline, trigger events). */

/* Inertness: when the wizard is active, default everything in the
   demo frame to default-cursor + no pointer events. The .wizard-target
   override below opts back in. The * selector is heavy but constrained
   to the demo frame, which is a finite region. !important wins against
   the existing scattered cursor: pointer rules without rewriting them. */
.AlertsDemo-module__wizard-active--WleIs *,
.AlertsDemo-module__wizard-active--WleIs *::before,
.AlertsDemo-module__wizard-active--WleIs *::after {
  cursor: default !important;
}
.AlertsDemo-module__wizard-active--WleIs button,
.AlertsDemo-module__wizard-active--WleIs [role="button"],
.AlertsDemo-module__wizard-active--WleIs [class*="alert-row"],
.AlertsDemo-module__wizard-active--WleIs [class*="filter-pill"],
.AlertsDemo-module__wizard-active--WleIs [class*="action-icon"],
.AlertsDemo-module__wizard-active--WleIs [class*="detail-tab"],
.AlertsDemo-module__wizard-active--WleIs [class*="detail-action-btn"],
.AlertsDemo-module__wizard-active--WleIs [class*="socai-input-field"],
.AlertsDemo-module__wizard-active--WleIs [class*="socai-send-btn"],
.AlertsDemo-module__wizard-active--WleIs [class*="filter-toggle-btn"],
.AlertsDemo-module__wizard-active--WleIs [class*="page-tab"],
.AlertsDemo-module__wizard-active--WleIs [class*="search-box"],
.AlertsDemo-module__wizard-active--WleIs [class*="generate-btn"],
.AlertsDemo-module__wizard-active--WleIs [class*="sort-select"],
.AlertsDemo-module__wizard-active--WleIs [class*="legend-row"],
.AlertsDemo-module__wizard-active--WleIs [class*="source-row"] {
  pointer-events: none !important;
}

/* The active step's target opts back in. .wizard-target gets
   pointer-events: auto for itself AND its descendants so clicks land
   anywhere inside the target's bounding box. */
.AlertsDemo-module__wizard-active--WleIs .AlertsDemo-module__wizard-target--wG2FV,
.AlertsDemo-module__wizard-active--WleIs .AlertsDemo-module__wizard-target--wG2FV * {
  pointer-events: auto !important;
}
.AlertsDemo-module__wizard-active--WleIs .AlertsDemo-module__wizard-target--wG2FV {
  cursor: pointer !important;
}
.AlertsDemo-module__wizard-active--WleIs .AlertsDemo-module__wizard-target--wG2FV * {
  cursor: pointer !important;
}

/* Spotlight cutout. Sits inside .demo-frame (overflow: hidden) at
   z-index 96, ABOVE the SOCAI panel (95) so step 4's chat-input
   cutout actually dims the panel content around it. The 9999px
   box-shadow is the dim. Border on the cutout is a soft 1px ring
   so the active target reads as "this is the focused one" without
   resorting to bright accent colors. Cameron 2026-04-28 raised
   z-index from 90 → 96. */
.AlertsDemo-module__wizard-spotlight--bh5M2 {
  position: absolute;
  z-index: 96;
  border-radius: 6px;
  pointer-events: none;
  /* Cameron 2026-04-28: bumped dim from 0.62 → 0.80 to make the
     spotlit target pop harder against the dark surround. Border
     also tightened slightly (0.18 → 0.24) so the cutout's 1px
     ring reads more clearly at the new contrast level. */
  box-shadow: 0 0 0 9999px rgba(7, 14, 24, 0.80);
  border: 1px solid rgba(255, 255, 255, 0.24);
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
  animation: AlertsDemo-module__wizard-spotlight-fade-in--PGo6J 280ms ease-out;
}

@keyframes AlertsDemo-module__wizard-spotlight-fade-in--PGo6J {
  from { box-shadow: 0 0 0 9999px rgba(7, 14, 24, 0); border-color: rgba(255, 255, 255, 0); }
  to   { box-shadow: 0 0 0 9999px rgba(7, 14, 24, 0.80); border-color: rgba(255, 255, 255, 0.24); }
}

/* Embed-mode: no spotlight dim or highlight ring.
   The demo runs fully visible — no blackout, no cutout border.
   Platform page instance is completely unaffected. */
.AlertsDemo-module__embed-mode--CukYA .AlertsDemo-module__wizard-spotlight--bh5M2 {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Continue → pill. Anchored to the bottom-right corner of the
   demo-frame itself. z-index 110 keeps it above the spotlight dim
   (96). Cameron 2026-04-28 wanted this to "pop" against the now-
   80%-opacity dim, so it's a solid white pill with dark text + a
   soft drop shadow — same affordance as a primary CTA. */
.AlertsDemo-module__wizard-continue--jKBXD {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #151827;
  background: #FFFFFF;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  transition: background 150ms, transform 150ms, box-shadow 150ms;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.12);
  /* Soft entrance — fades up from below as it appears. */
  animation: AlertsDemo-module__wizard-continue-enter--Or7Td 240ms ease-out;
}

/* Higher-specificity opt-in for pointer events / cursor. The
   `.wizard-active button` inertness rule has specificity (0,1,1)
   which beats plain `.wizard-continue` (0,1,0) even with !important,
   so pointer-events: none was winning and the click was being eaten.
   `.wizard-active .wizard-continue` (0,2,0) wins back. */
.AlertsDemo-module__wizard-active--WleIs .AlertsDemo-module__wizard-continue--jKBXD {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.AlertsDemo-module__wizard-continue--jKBXD:hover {
  background: #F0F4FA;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.AlertsDemo-module__wizard-continue--jKBXD:active {
  transform: translateY(0);
}

@keyframes AlertsDemo-module__wizard-continue-enter--Or7Td {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 10-second countdown ring. The conic-gradient sweeps from full to
   empty over 10s, matching the auto-advance timer in the parent
   useEffect. Dark stroke on white pill so it reads against the
   button's bright background. */
.AlertsDemo-module__wizard-continue-ring--ou6aW {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(#151827 0%, rgba(21, 24, 39, 0.18) 0%);
  flex-shrink: 0;
  animation: AlertsDemo-module__wizard-continue-countdown--LQoQT 10s linear forwards;
}

@keyframes AlertsDemo-module__wizard-continue-countdown--LQoQT {
  from {
    background: conic-gradient(#151827 100%, rgba(21, 24, 39, 0.18) 0%);
  }
  to {
    background: conic-gradient(#151827 0%, rgba(21, 24, 39, 0.18) 100%);
  }
}

/* ============================================
   PHONE RESPONSIVE (added 2026-04-30)
   ============================================
   AlertsDemo is desktop-first by design — it emulates a multi-column
   security dashboard. At <768 we don't try to redesign the dashboard;
   we shrink the chrome, simplify the table to its essential 2 columns
   (severity + name), and surface a "best viewed on desktop" hint via
   the wizard banner copy. The wizard still works — taps still register
   on alert rows — just with a tighter layout.

   What changes:
   - Demo frame becomes fluid + shorter, sits in the page rhythm
   - Header chrome (Figma-rendered org switcher) and nav rail hidden
   - View toggle hidden (Categories | Triage)
   - Alert table collapses to 2 columns
   - The 866px header SVG panes capped at viewport
   - Detail panel becomes full-width drawer (already mostly OK at 1024
     breakpoint, just verify panes are 100%)

   2026-05-11 launch decision (Cameron):
   The phone-optimized layout below is retained for tablet/landscape
   phone (768+), but the demo section is hard-hidden below 768px.
   At true phone widths the interactive panel can't carry its weight:
   detail panel, wizard, and table interactions don't survive the
   reflow. Cleaner to hide the whole section and let the next page
   section flow up. Applies to both Home (HomePage AlertsDemo) and
   Platform (PlatformPage AlertsDemo) usages.
   ============================================ */
/* ============================================
   PHONE + TABLET HIDE — Cameron 2026-05-11 (v2)
   ============================================
   Update from the morning's phone-only hide: visitors on tablet
   (768-1023px) saw a partially-working demo because the wizard's
   SOCAI target is hidden at that width AND the embedded panel
   has horizontal-scroll issues at narrower widths. Per Cameron,
   the entire interactive demo is desktop-only now.

   What we hide:
   - .demo-frame (the interactive panel itself)
   - .section-header inside .section is kept hidden too, because
     the H2 ("MDR Transparency That Sets Us Apart") only makes
     sense as a setup for the live demo below. If there's no demo,
     the headline is orphaned.

   What we show in its place when a screenshot URL is provided
   (mobileScreenshotUrl prop): a .mobile-fallback block with an
   <img> tag. The image is fluid-width and bordered so it reads
   as a "preview of the platform" not as decoration.

   What we show when no URL is provided: nothing — section
   collapses cleanly and the adjacent sections flow together.
   This is the launch-night default until Cameron has a real
   screenshot to drop in.
   ============================================ */
@media (max-width: 1023px) {
  .AlertsDemo-module__demo-frame--UOYVW {
    display: none !important;
  }
  /* Section H2 + subhead stay visible on small screens — they
     give the screenshot context and the section doesn't read as
     orphaned. Padding tightened a touch so the section doesn't
     dominate the page when the interactive panel is gone. */
  .AlertsDemo-module__section--NYqph {
    padding: var(--section-pad-sm, 56px) 0;
  }
  .AlertsDemo-module__section-header--xqPa2 {
    margin-bottom: 24px;
  }
}

/* The mobile fallback is the inverse: hidden by default (desktop),
   visible at ≤1023. The opacity guard handles the case where the
   <img> hasn't loaded yet — better to show nothing than a broken
   image icon.
   --------------------------------------------------
   2026-05-11 v3 (Cameron): The previous version had 16px padding
   inside .mobile-fallback PLUS the <img>'s own border+radius.
   When this component is embedded inside CorrIntegrationFlow's
   pcbDashboardWrap (which has its own ring outline at the wrap's
   edge), the result was a visible "card around the screenshot"
   — the wrap's ring sat ~16px outside the image edge, leaving
   a dark frame between them.
   Now: no inner padding, the image fills its parent edge-to-edge,
   and its own border/radius IS the visible mask. CorrIntegrationFlow
   separately hides .pcbDashboardWrap::after on ≤1023 so the wrap
   doesn't double-border the image. */
.AlertsDemo-module__mobile-fallback--FdGMn {
  display: none;
}

.AlertsDemo-module__mobile-fallback-img--xitEO {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* Match the demo-frame's own border-radius so the screenshot
     edges align with the CORR product's natural corner radius. */
  border-radius: var(--radius-lg, 16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.AlertsDemo-module__mobile-fallback-caption--o4fit {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary, #71717A);
  margin: 16px auto 0;
  max-width: 480px;
  line-height: 1.5;
  padding: 0 16px;
}

@media (max-width: 1023px) {
  .AlertsDemo-module__mobile-fallback--FdGMn {
    display: block;
    /* 2026-05-11 v4 (Cameron): a touch of horizontal breathing
       room so the screenshot doesn't kiss the viewport edges.
       16px on phone, 24px on tablet — proportional to the wider
       canvas. The wrap's outline ring stays hidden so this
       padding doesn't reintroduce the "double-card" issue. */
    padding: 0 16px;
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .AlertsDemo-module__mobile-fallback--FdGMn {
    padding: 0 24px;
  }
}

@media (max-width: 767px) {
  .AlertsDemo-module__demo-frame--UOYVW {
    height: auto;
    min-height: 540px;
    max-width: 100%;
    margin: 0 auto 32px;
    border-radius: var(--radius-md, 10px);
  }

  /* Hide the photoreal header Figma SVG — not legible at phone width.
     Replace with a slim text-only top bar so the dashboard still has
     a "real product" frame. */
  .AlertsDemo-module__header-figma--vSwuO {
    height: 44px;
  }
  .AlertsDemo-module__header-figma--vSwuO .header-figma-left,
  .AlertsDemo-module__header-figma--vSwuO .header-figma-right {
    display: none;
  }

  /* Hide the nav rail too — at phone width the icons-only column eats
     real estate that should be the alerts table. */
  .AlertsDemo-module__nav-figma--zJdbU,
  .AlertsDemo-module__nav-figma-wrap--fVavV {
    display: none;
  }

  /* View toggle (Categories | Triage) is desktop-only chrome */
  .AlertsDemo-module__view-toggle--y5PZX {
    display: none;
  }

  /* Page title row tightening */
  .AlertsDemo-module__page-title-row--misD6 {
    padding: 12px 12px 8px;
    gap: 8px;
  }

  /* Alert table — drop to severity + name + chevron only.
     Hide host, status, response priority, assignee, actions on phone. */
  .AlertsDemo-module__alert-row--koogA,
  .AlertsDemo-module__table-header--q2w33 {
    grid-template-columns: 24px 1fr 24px !important;
    padding: 12px 12px;
    gap: 8px;
  }
  .AlertsDemo-module__alert-host--FXycq,
  .AlertsDemo-module__alert-status--h0M80,
  .AlertsDemo-module__alert-priority--qfTAu,
  .AlertsDemo-module__alert-assigned--vyRqm,
  .AlertsDemo-module__alert-actions--ni0MG,
  .AlertsDemo-module__alert-soc-verdict--CyrZI {
    display: none !important;
  }
  .AlertsDemo-module__table-header--q2w33 > :nth-child(n+3) {
    display: none;
  }
  /* Re-show the chevron at the very end */
  .AlertsDemo-module__alert-row--koogA > :last-child,
  .AlertsDemo-module__table-header--q2w33 > :last-child {
    display: block;
  }

  /* The 866px hardcoded SVG panes must not horizontal-scroll */
  .AlertsDemo-module__header-figma--vSwuO .header-figma-left > svg,
  .AlertsDemo-module__header-figma--vSwuO .header-figma-right > svg {
    width: 100%;
    height: auto;
  }

  /* Detail panel: ensure it's full-width on phone (already mostly handled
     by detail-panel grid-template-columns: 1fr at <1024, but enforce) */
  .AlertsDemo-module__detail-panel--iVyIp {
    grid-template-columns: 1fr !important;
  }
  .AlertsDemo-module__socai-panel--QvZf1,
  .AlertsDemo-module__detail-action-bar--PCBy0,
  .AlertsDemo-module__twin-pane--X2Q3b,
  .AlertsDemo-module__twin-pane-left--PjGYy,
  .AlertsDemo-module__twin-pane-right--vj0Kb {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Wizard: shrink the continue banner, tighter spotlight */
  .AlertsDemo-module__wizard-continue--jKBXD {
    font-size: 13px;
    padding: 8px 14px;
    bottom: 12px;
  }
  .AlertsDemo-module__wizard-spotlight--bh5M2 {
    border-radius: 4px;
  }

  /* Demo hint banner more prominent at phone width */
  .AlertsDemo-module__demo-hint--gfNlP {
    font-size: 13px;
    padding: 10px 12px;
  }

  /* Reduce shadow/border so the frame isn't too "heavy" at small width */
  .AlertsDemo-module__demo-frame--UOYVW {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
}