/*
 * Analytics page styles — Full Funnel chart + table + skeleton,
 * and Web Vitals stats row. Kept in one file because the analytics
 * area has a coherent visual language (tabular-nums, stage/rate
 * cell pairs) and the classes don't show up outside these pages.
 */

/* =========================================================================
 * Full Funnel: chart summary strip
 *
 * Single 2-row grid where stage cells occupy row 1, and transition
 * (rate) cells share row 1 but span 2 stage columns each — this puts
 * every rate cell at the natural midpoint between two consecutive stage
 * centers. Arrows align with the bold COUNT line, never the title row.
 * ========================================================================= */
.funnel-summary {
  display: grid;
  grid-auto-rows: auto;
  column-gap: 0;
  margin: 0.5rem 0;
  width: 100%;
  align-items: start;
}

.funnel-summary__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 4px;
}

.funnel-summary__label {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--p-color-text-subdued, #6d7175);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel-summary__count {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--p-color-text, #202223);
  font-variant-numeric: tabular-nums;
}

.funnel-summary__overall {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--p-color-text-subdued, #6d7175);
  font-variant-numeric: tabular-nums;
}

.funnel-summary__rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-self: center;
  /* Vertically centered so BOTH the step % label and the arrow land
     at the stage COUNT line — tying the transition visually to the
     values only, never the titles. */
  align-self: center;
  width: clamp(56px, 6vw, 80px);
  max-width: 90%;
}

.funnel-summary__rate-step {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--p-color-text, #202223);
  font-variant-numeric: tabular-nums;
}

.funnel-summary__rate-arrow {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--p-color-text-subdued, #6d7175);
  line-height: 0;
}

.funnel-summary__rate-line {
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.funnel-summary__rate-arrow svg {
  display: block;
  margin-left: -1px; /* overlap line end and triangle base pixel */
}

/* Weakest step — tone only, no background chip. */
.funnel-summary__rate--weakest .funnel-summary__rate-step {
  color: #b45309;
}

.funnel-summary__rate--weakest .funnel-summary__rate-arrow {
  color: #b45309;
}

.funnel-summary__rate--weakest .funnel-summary__rate-line {
  background: #b45309;
  opacity: 0.4;
}

/* =========================================================================
 * Full Funnel: data table
 * ========================================================================= */

/* Tabular-nums across the whole table so digits align vertically. */
.funnel-table table {
  font-variant-numeric: tabular-nums;
}

/* Breathing room above the table — the summary strip sitting under
 * the chart was flush against the table header, giving a "stuck"
 * feel. 24px above the table separates the strip from the grid. */
.funnel-table {
  margin-top: 24px;
}

/* Stage cell — count bold on top, overall % subdued below. */
.funnel-stage-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 72px;
}

.funnel-stage-cell__count {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--p-color-text, #202223);
}

.funnel-stage-cell__overall {
  font-size: 0.6875rem;
  line-height: 1.1;
  color: var(--p-color-text-subdued, #6d7175);
}

/* Rate cell — step % + arrow line. No chip, no background. */
.funnel-rate-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  max-width: 80px;
}

.funnel-rate-cell__step {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--p-color-text, #202223);
}

.funnel-rate-cell__arrow {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--p-color-text-subdued, #6d7175);
  line-height: 0;
}

.funnel-rate-cell__arrow-line {
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* Weakest step — tone only, no surface change. */
.funnel-rate-cell--weakest .funnel-rate-cell__step {
  color: #b45309;
}

.funnel-rate-cell--weakest .funnel-rate-cell__arrow {
  color: #b45309;
}

.funnel-rate-cell--weakest .funnel-rate-cell__arrow-line {
  background: #b45309;
  opacity: 0.4;
}

/* =========================================================================
 * Full Funnel: load-more pagination frame
 *
 * Turbo adds [busy] to the frame during its fetch; CSS swaps the
 * button for a shimmering skeleton row during that window.
 * ========================================================================= */
.funnel-load-more {
  display: block;
  margin-top: 12px;
}

.funnel-load-more__content {
  display: flex;
  justify-content: center;
}

.funnel-load-more__skeleton {
  display: none;
}

turbo-frame.funnel-load-more[busy] .funnel-load-more__content {
  display: none;
}

turbo-frame.funnel-load-more[busy] .funnel-load-more__skeleton {
  display: block;
}

.funnel-load-more__skeleton-row {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  justify-content: space-between;
  align-items: center;
}

.funnel-load-more__skeleton-cell {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--p-color-bg-surface-secondary, #f6f6f7) 0%,
    var(--p-color-bg-surface-tertiary, #ebebeb) 50%,
    var(--p-color-bg-surface-secondary, #f6f6f7) 100%
  );
  background-size: 200% 100%;
  animation: funnel-load-more-shimmer 1.2s ease-in-out infinite;
}

.funnel-load-more__skeleton-label {
  text-align: center;
  font-size: 0.75rem;
  color: var(--p-color-text-subdued, #6d7175);
  margin-top: 4px;
}

@keyframes funnel-load-more-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* =========================================================================
 * Full Funnel: page-specific skeleton (chart summary placeholder)
 * ========================================================================= */
.funnel-summary-skeleton {
  display: grid;
  grid-auto-rows: auto;
  column-gap: 0;
  margin: 0.5rem 0;
  width: 100%;
  align-items: start;
}

.funnel-summary-skeleton__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  min-width: 0;
}

.funnel-summary-skeleton__label,
.funnel-summary-skeleton__count,
.funnel-summary-skeleton__overall,
.funnel-summary-skeleton__step,
.funnel-summary-skeleton__line,
.funnel-summary-skeleton__tip {
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--p-color-bg-surface-secondary, #f6f6f7) 0%,
    var(--p-color-bg-surface-tertiary, #ebebeb) 50%,
    var(--p-color-bg-surface-secondary, #f6f6f7) 100%
  );
  background-size: 200% 100%;
  animation: funnel-summary-skeleton-shimmer 1.2s ease-in-out infinite;
}

/* Heights / widths match the real UI so there's no layout shift. */
.funnel-summary-skeleton__label {
  height: 12px;
  width: 70%;
}

.funnel-summary-skeleton__count {
  height: 20px;
  width: 45%;
}

.funnel-summary-skeleton__overall {
  height: 12px;
  width: 35%;
}

.funnel-summary-skeleton__rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  justify-self: center;
  align-self: start;
  width: clamp(56px, 6vw, 80px);
  max-width: 90%;
}

.funnel-summary-skeleton__step {
  height: 12px;
  width: 60%;
}

.funnel-summary-skeleton__arrow {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

.funnel-summary-skeleton__line {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 1px;
}

.funnel-summary-skeleton__tip {
  width: 6px;
  height: 10px;
  border-radius: 1px;
  margin-left: -1px;
}

@keyframes funnel-summary-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* =========================================================================
 * BFS Web Vitals: flat stats row
 *
 * Stats sit directly on the metric card's surface (no nested card-in-a-card)
 * with vertical dividers between columns. The highlighted column ("28d p75",
 * the BFS decision metric) gets a thicker accent underline — no background
 * tint.
 * ========================================================================= */
.web-vitals-stats-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  max-width: 100%;
}

.web-vitals-stats-row .web-vitals-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1.25rem;
  border-left: 1px solid var(--p-color-border);
  min-width: 0;
}

.web-vitals-stats-row .web-vitals-stat:first-child {
  padding-left: 0;
  border-left: none;
}

.web-vitals-stat__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--p-color-text-subdued, #6d7175);
  margin-bottom: 0.375rem;
  white-space: nowrap;
}

.web-vitals-stat__value {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--p-color-text, #202223);
  font-variant-numeric: tabular-nums;
}

.web-vitals-stats-row .web-vitals-stat--highlighted .web-vitals-stat__label {
  color: var(--p-color-text, #202223);
  font-weight: 600;
}

.web-vitals-stats-row .web-vitals-stat--highlighted .web-vitals-stat__value {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--p-color-border-info, #005ab4);
  display: inline-block;
  align-self: flex-start;
}

.web-vitals-stats-note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--p-color-text-subdued, #6d7175);
}
/*
 * Cross-sell module styles. Covers every UI piece specific to the
 * cross-sell dashboard, stores, syncs, and products pages — skeleton
 * placeholders for lazy-loaded data, expandable product rows, tab
 * strips, charts/stats grids, media-card tooltips, and the shared
 * filter row at the top of list pages.
 *
 * The `.cs-` prefix scopes everything to cross-sell so these rules
 * don't bleed into other areas of the app (profile, jobs, analytics).
 * Loaded via the asset pipeline (application.css require_tree .), so
 * these rules live in <head> and persist across Turbo frame swaps —
 * no need to re-emit inline <style> blocks on each partial render.
 *
 * Historical note: several blocks here were migrated out of inline
 * <style> inside ERB partials (cross_sell/_skeleton, _filter_styles,
 * etc.) so Turbo frame swaps don't drop their styles when a frame's
 * siblings are replaced — Turbo leaves <head> untouched but discards
 * anything outside the swapped <turbo-frame>.
 */

/* =========================================================================
 * Skeleton loading animation
 *
 * Used by cross-sell list pages while lazy-frame data is fetching.
 * Shimmer is a moving 200%-wide gradient that slides across a fixed
 * 100%-wide box, giving the classic loading-pulse effect. Pulse is
 * suppressed for users with `prefers-reduced-motion` so the page
 * doesn't animate at all in accessibility mode.
 * ========================================================================= */
.cs-skeleton {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: cs-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 0.25rem;
  display: inline-block;
}

@keyframes cs-skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-skeleton {
    animation: none;
  }
}

/* Preset skeleton shapes — callers pick the closest match to the real
 * content so layout doesn't jump when data loads in. */
.cs-skeleton-text {
  height: 0.75rem;
  width: 100%;
}

.cs-skeleton-text-sm {
  height: 0.625rem;
  width: 60%;
}

.cs-skeleton-badge {
  height: 1.25rem;
  width: 4rem;
  border-radius: 1rem;
}

/* =========================================================================
 * Expandable rows
 *
 * Product rows on the cross-sell products page expand in-place to
 * reveal per-variant details without a full page navigation. The
 * chevron rotates 90° on open and the content area animates its
 * max-height + opacity. max-height uses a generous 2000px ceiling
 * because row content is variable — a fixed smaller value would clip
 * tall expansions, and `auto` can't be transitioned by CSS.
 * ========================================================================= */
.cs-expandable-chevron {
  display: inline-block;
  font-size: 0.625rem;
  color: #6d7175;
  transition: transform 0.2s ease;
}

.cs-expandable-chevron--open {
  transform: rotate(90deg);
}

.cs-expandable-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease;
}

.cs-expandable-content--open {
  max-height: 2000px;
  opacity: 1;
}

/* -------------------------------------------------------------------------
 * Expandable row tabs
 *
 * Inline tab strip inside an expanded product row (e.g. Variants /
 * Recommendations / Performance). Active tab is indicated by the
 * 2px bottom border + color shift to the Polaris link blue.
 * ------------------------------------------------------------------------- */
.cs-tab {
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 400;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: #6d7175;
}

.cs-tab--active {
  font-weight: 600;
  border-bottom-color: #2c6ecb;
  color: #2c6ecb;
}

/* -------------------------------------------------------------------------
 * Turbo progress bar
 *
 * Overrides Turbo's default progress bar for cross-sell pages so the
 * top-of-page progress indicator uses the brand purple instead of
 * the library default blue.
 * ------------------------------------------------------------------------- */
.turbo-progress-bar {
  background-color: #5912d5;
  height: 3px;
}

/* =========================================================================
 * Charts grid (dashboard)
 *
 * 2-column grid of chart cards. The nested `min-width: 0 + flex: 1`
 * pair is load-bearing: without `min-width: 0`, a child chart with a
 * long x-axis label would force the grid track wider than 1fr and
 * break the equal-width layout.
 * ========================================================================= */
.cross-sell-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.cross-sell-charts-grid > div {
  display: flex;
  min-width: 0;
}

.cross-sell-charts-grid > div > .Polaris-LegacyCard {
  flex: 1;
  min-width: 0;
}

/* Stats cards row (dashboard). Same rules as the charts grid but 4 cols —
   min-width:0 + flex:1 ensure every card is the exact same width regardless
   of value length (e.g. "1,234,567" vs "12%"). */
.cross-sell-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.cross-sell-stats-grid > div {
  display: flex;
  min-width: 0;
}

.cross-sell-stats-grid > div > .Polaris-LegacyCard {
  flex: 1;
  min-width: 0;
}

/* =========================================================================
 * Media-card tooltip
 *
 * Fast-appearing tooltip (no 500ms native `title` delay) for product
 * media cards. Rendered via ::after using `data-tooltip` so callers
 * don't need any extra markup — just set the attribute. Hidden when
 * the attribute is empty or missing so the pseudo-element doesn't
 * render an empty bubble.
 * ========================================================================= */
.cs-tip {
  position: relative;
}

.cs-tip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.5rem;
  background: #202223;
  color: #fff;
  font-size: 0.6875rem;
  line-height: 1.3;
  border-radius: 0.25rem;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms ease-in 40ms;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cs-tip:hover::after,
.cs-tip:focus-visible::after {
  opacity: 1;
}

/* Suppress the bubble when there's nothing to show — avoids a tiny
 * empty black pill appearing under cards that opt out. */
.cs-tip[data-tooltip=""]::after,
.cs-tip:not([data-tooltip])::after {
  display: none;
}

/* =========================================================================
 * Cross-sell filter row — consistent control heights for the search
 * input + filter pills + buttons at the top of stores/products/syncs
 * list pages. Previously lived inline in cross_sell/_filter_styles.
 * ========================================================================= */
.cs-filter-row {
  display: grid;
  gap: 0.75rem;
  align-items: stretch;
}

.cs-filter-row > div {
  display: flex;
  align-items: stretch;
}

.cs-filter-row input,
.cs-filter-row select {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.625rem;
  border: 1px solid #c9cccf;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 2.25rem;
  box-sizing: border-box;
  background: #fff;
}

.cs-filter-row .Polaris-Button {
  height: 2.25rem;
  min-height: 2.25rem;
}
/*
 * Detail-page layout primitives. Shared by profile, app, org, team,
 * store, and job detail pages so every detail-page body has the
 * same visual rhythm: one card per section, consistent label/value
 * grid, predictable gaps.
 *
 * Applied to markup via:
 *   - shared/_detail_row partial (expects parent .detail-grid)
 *   - shared/_card_title partial (expects parent polaris_card body)
 */

/* -----------------------------------------------------------------
 * Card title
 *
 * shared/_card_title renders its own title + 1px bottom hairline
 * INSIDE the Polaris card body. Because it sits inside the card's
 * inner padding, the divider naturally has left/right gutters —
 * matching the sys_info card pattern. Avoids the full-bleed divider
 * that Polaris's Header/Section boundary produces.
 * ----------------------------------------------------------------- */
.card-title {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--p-color-border-subdued, #e1e3e5);
  margin-bottom: 0.25rem;
}

/* -----------------------------------------------------------------
 * Detail grid
 *
 * 2-column label/value grid on desktop. On narrow viewports rows
 * stack vertically so there's no squished text.
 * ----------------------------------------------------------------- */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem 2rem; /* row gap, column gap */
  width: 100%;
}

.detail-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0; /* allow ellipsis / wrapping inside */
}

/* Consistent spacing + typography for detail-row label and value so
 * every page's grid reads the same, even when callers pass a badge
 * or link instead of simple text into the value slot. */
.detail-row__label {
  color: var(--p-color-text, #202223);
}

.detail-row__value {
  color: var(--p-color-text-subdued, #6d7175);
  word-break: break-word;
}

/* When the value is a Polaris badge, align it to the left so it
 * doesn't stretch to fill the cell width. */
.detail-row__value .Polaris-Badge {
  align-self: flex-start;
}
/*
 * Shared styles for the lazy-frame error and empty states rendered
 * by `shared/frame_error` and `shared/frame_empty`. Both partials
 * render a centered icon circle + heading + body copy + optional
 * CTA, just differing in accent color (critical vs neutral).
 *
 * Loaded via the asset pipeline (application.css require_tree .),
 * so they live in <head> and persist across every Turbo frame swap —
 * no need to re-emit inline <style> blocks on each error/empty
 * render. Previously these rules lived inside shared/_frame_error_styles
 * and shared/_frame_empty view partials; the only reason for that was
 * a mistaken belief that styles needed to live inside <turbo-frame>
 * to survive swaps. They don't — Turbo leaves <head> untouched.
 */

/* -------------------------------------------------------------------------
 * Error state: red-tinted icon circle + title + description + details + CTA
 * ------------------------------------------------------------------------- */
.frame-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1rem;
  gap: 0.75rem;
}

.frame-error__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--p-color-bg-fill-critical-secondary, #feefef);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.frame-error__icon-wrap .Polaris-Icon,
.frame-error__icon-wrap svg {
  width: 22px !important;
  height: 22px !important;
}

.frame-error__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--p-color-text, #202223);
  margin: 0;
}

.frame-error__description {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--p-color-text-subdued, #6d7175);
  margin: 0;
  max-width: 48ch;
}

.frame-error__details {
  font-size: 0.75rem;
  color: var(--p-color-text-subdued, #6d7175);
  max-width: 640px;
  text-align: left;
}

.frame-error__details summary {
  cursor: pointer;
}

.frame-error__details pre {
  white-space: pre-wrap;
  margin-top: 0.5rem;
}

.frame-error__cta {
  margin-top: 0.5rem;
}

/* -------------------------------------------------------------------------
 * Empty state: neutral icon circle + title + description + optional CTA.
 * Mirrors .frame-error's proportions so error/empty read as one family.
 * ------------------------------------------------------------------------- */
.frame-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1rem;
  gap: 0.75rem;
}

.frame-empty__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--p-color-bg-surface-secondary, #f1f2f4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}

.frame-empty__icon-wrap .Polaris-Icon,
.frame-empty__icon-wrap svg {
  width: 22px !important;
  height: 22px !important;
}

.frame-empty__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--p-color-text, #202223);
  margin: 0;
}

.frame-empty__description {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--p-color-text-subdued, #6d7175);
  margin: 0;
  max-width: 48ch;
}

.frame-empty__cta {
  margin-top: 0.5rem;
}
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.9;
}
.empty-state img {
  max-width: 100px;
  border-radius: 50%;
  background-color: var(--p-color-bg-app);
  margin-bottom: var(--p-space-4);
}

.Polaris-Button--plain .Polaris-Icon--colorSubdued svg {
  fill: var(--p-color-icon-subdued) !important;

  &:hover {
    fill: var(--p-color-icon) !important;
  }
}

.Polaris-Tooltip {
  z-index: 999 !important;
  opacity: 1 !important;
}

.Polaris-Tooltip-TooltipOverlay {
  opacity: 1 !important;
  background: rgba(32, 34, 35, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

html[class~="Polaris-Summer-Editions-2023"] .Polaris-TopBar {
  background-color: var(--p-color-bg-surface);
  box-shadow: var(--p-shadow-sm);
  gap: var(--p-space-600);
}

html[class~="Polaris-Summer-Editions-2023"] .Polaris-TopBar-Menu__Activator {
  color: var(--p-color-text);
  padding: var(--p-space-150);
  background-color: var(--p-color-bg-fill);
  border-radius: var(--p-border-radius-200);
  min-width: auto;
  min-height: 2rem;
}

.Polaris-TopBar-Menu__Activator {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  color: var(--p-color-text);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 2.25rem;
  padding: var(--p-space-100) var(--p-space-200);
  border: 0;
  cursor: pointer;
  transition: background-color var(--p-motion-duration-100);
  margin-right: var(--p-space-200);
  border-radius: var(--p-border-radius-100);
  gap: var(--p-space-200);
}

html[class~="Polaris-Summer-Editions-2023"]
  .Polaris-TopBar-Menu__Activator:focus {
  background-color: var(--p-color-bg-fill-hover);
}

html[class~="Polaris-Summer-Editions-2023"]
  .Polaris-TopBar-Menu__Activator:active,
html[class~="Polaris-Summer-Editions-2023"]
  .Polaris-TopBar-Menu__Activator[aria-expanded="true"] {
  background-color: var(--p-color-bg-fill-active);
}

html[class~="Polaris-Summer-Editions-2023"]
  .Polaris-TopBar-Menu__Activator:hover {
  background-color: var(--pc-top-bar-background-light, var(--p-color-bg-hover));
}

.Polaris-TopBar-Menu__Activator:hover {
  background-color: var(--pc-top-bar-background-light, var(--p-color-bg-hover));
}

@media screen and (max-width: 1024px) {
  .Polaris-HorizontalGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 500px) {
  .Polaris-HorizontalGrid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .filter-margin {
    margin-left: var(--p-space-4);
  }
}

/* Parent wrapper */
.sticky-scroll-table {
  overflow-x: auto;
  position: relative;
  max-width: 100%;
  white-space: nowrap;
  border-radius: inherit;
}

/* Ensure table takes full width */
.sticky-scroll-table .Polaris-IndexTable__Table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
}

/* Sticky first column */
.sticky-scroll-table .Polaris-IndexTable__Table thead tr th:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
  transition: border-right 0.2s ease-in-out;

  background: var(--p-color-bg-surface-secondary);
  text-align: left;
  font-weight: var(--p-font-weight-semibold);
}

.sticky-scroll-table .Polaris-IndexTable__Table tbody tr td:first-child {
  position: sticky;
  left: 0;
  background: var(--p-color-bg-surface);
  z-index: 10;
  font-weight: 600;
  transition: border-right 0.2s ease-in-out;
}

/* Show right border when scrolling */
.Polaris-IndexTable-ScrollContainer.scrolled
  .Polaris-IndexTable__Table
  tbody
  tr
  td:first-child::after,
.Polaris-IndexTable-ScrollContainer.scrolled
  .Polaris-IndexTable__Table
  thead
  tr
  th:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  /* Adjust thickness */
  height: 100%;
  background: var(--p-color-border-secondary);
  /* Adjust color */
}

/* Jobs Selection Bar */
.jobs-selection-bar {
  padding: var(--p-space-300) var(--p-space-400);
  background-color: var(--p-color-bg-surface-secondary);
  border-radius: var(--p-border-radius-200);
  border: 1px solid var(--p-color-border-secondary);
}

/* Jobs Checkbox Styling */
.jobs-checkbox {
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  cursor: pointer;
  accent-color: var(--p-color-bg-fill-brand) !important;
  border-radius: var(--p-border-radius-100);
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  margin: 0 !important;
}

.jobs-checkbox:disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Jobs Table Cell Link — inherits color, underlines on hover only. Used on
   the Job ID and Queue Name cells so the value text doubles as a link to the
   job details page without looking like a hyperlink at rest. */
.jobs-cell-link,
.jobs-cell-link:visited {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.jobs-cell-link:hover {
  text-decoration: underline;
}
/*
 * Shared skeleton styles for lazy-frame loading states. The atom is
 * .lazy-skeleton__box — a shimmering rectangle every other skeleton
 * shape (chart, table row, pill, etc.) composes from.
 *
 * Loaded once via the asset pipeline, so every page that renders a
 * skeleton partial picks these up automatically without any per-
 * partial <style> plumbing.
 */

.lazy-skeleton__box {
  background: linear-gradient(
    90deg,
    var(--p-color-bg-surface-secondary, #f6f6f7) 0%,
    var(--p-color-bg-surface-tertiary, #ebebeb) 50%,
    var(--p-color-bg-surface-secondary, #f6f6f7) 100%
  );
  background-size: 200% 100%;
  animation: lazy-skeleton-shimmer 1.2s ease-in-out infinite;
}

.lazy-skeleton__table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lazy-skeleton__table-row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--p-color-border-subdued, #e1e3e5);
}

.lazy-skeleton__table-row:last-child {
  border-bottom: none;
}

.lazy-skeleton__table-row--header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--p-color-border, #d2d5d8);
}

@keyframes lazy-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lazy-skeleton__box {
    animation: none;
  }
}
.hidden {
  display: none;
}

.relative {
  position: relative;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */