/* The old "Analytics: Coming soon" roadmap/availability widgets (and their
   .coming-soon-panel / .roadmap-panel local overrides) were removed when
   /analytics was reactivated as the Customer Intelligence pilot's
   "Visitor Journey" view (see pages/analytics-page.js). The Visitor Journey
   widgets reuse existing app.css primitives (.panel, .metrics-grid,
   .metric-card, .data-table, .table-shell, .pagination, .inline-empty,
   .notice, .status, .button) rather than introducing new styling. This file
   only adds layout rules for pieces genuinely specific to this view (the
   event timeline, attribution list, and the date-range toolbar/form) --
   .data-table/.table-shell/.pagination themselves are defined once in
   app.css since billing's invoices table and Customer Profile's table share
   them too. */

/* Category colors -- one real token per EVENT_CATEGORY value in
   visitor-journey-session-detail-widget.js, reused by both the timeline
   node markers and the overview strip dots so the two stay visually
   consistent. */
:root {
  --vj-view: var(--brand-600);
  --vj-intent: var(--warning);
  --vj-conversion: var(--success);
  --vj-negative: var(--danger);
}

/* A real connected journey: a vertical line down the left edge with a
   colored node per event, not a stack of disconnected cards -- the
   visual metaphor Mostafa asked for ("يبان فعلا انها جيرني"). Each item
   fades/slides in with a short, staggered delay (--vj-step, set inline
   per item) so the journey visibly "unfolds" on load rather than
   appearing all at once; prefers-reduced-motion below turns this off
   entirely for anyone who has that set. */
.visitor-journey-timeline {
  display: grid;
  gap: 18px;
  margin: 0 0 0 4px;
  padding: 0 0 0 22px;
  list-style: none;
  position: relative;
}

.visitor-journey-timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.visitor-journey-timeline > li {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #fff;
  animation: vj-reveal 0.4s ease-out backwards;
  animation-delay: calc(var(--vj-step, 0) * 60ms);
}

.visitor-journey-timeline > li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 19px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--vj-view);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--border);
}

.visitor-journey-timeline > li.is-intent::before { background: var(--vj-intent); }
.visitor-journey-timeline > li.is-conversion::before { background: var(--vj-conversion); }
.visitor-journey-timeline > li.is-negative::before { background: var(--vj-negative); }

@keyframes vj-reveal {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .visitor-journey-timeline > li {
    animation: none;
  }
}

.visitor-journey-timeline__head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.visitor-journey-timeline__head span {
  color: var(--muted);
  font-size: 0.85rem;
}

.visitor-journey-event-ecommerce {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Overview strip -- the journey laid out on one real horizontal line: a
   labeled, colored node per event (not just an unlabeled dot needing a
   hover to identify) connected by a thin line, each node linking down to
   its matching event below so a customer can read the shape of the
   journey -- e.g. "Add to Cart -> Add to Cart -> Purchase" -- at a glance,
   without opening every card. */
.visitor-journey-strip {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 18px 4px 12px;
  margin-bottom: 4px;
  overflow-x: auto;
}

.visitor-journey-strip__node {
  display: grid;
  justify-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 3px;
  text-decoration: none;
}

.visitor-journey-strip__node small {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visitor-journey-strip__node:hover small,
.visitor-journey-strip__node:focus-visible small {
  color: var(--text);
}

.visitor-journey-strip__dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vj-view);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}

.visitor-journey-strip__node:hover .visitor-journey-strip__dot,
.visitor-journey-strip__node:focus-visible .visitor-journey-strip__dot {
  box-shadow: 0 0 0 2px var(--brand-600);
}

.visitor-journey-strip__dot.is-intent { background: var(--vj-intent); }
.visitor-journey-strip__dot.is-conversion { background: var(--vj-conversion); }
.visitor-journey-strip__dot.is-negative { background: var(--vj-negative); }

.visitor-journey-strip__connector {
  flex: 1 1 16px;
  min-width: 10px;
  height: 2px;
  background: var(--border);
  /* Vertically centers with the 14px dot, which sits above the label in
     each node -- not centered against the taller node+label column. */
  margin-top: 7px;
}

/* Attribution collapsed behind a real <details> -- a compact
   "Via source/medium" summary stays visible in the <summary>, the full
   grid (unchanged shape/overflow-safety from before) only renders once
   expanded. */
.visitor-journey-event-attribution-toggle {
  margin-top: 8px;
}

.visitor-journey-event-attribution-toggle summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
}

.visitor-journey-event-attribution-toggle summary:hover {
  color: var(--text);
}

/* Two compact "touch" cards (first/last) instead of the old one-cell-per-
   raw-field grid -- each card leads with the one line a merchant actually
   reads (source / medium), with campaign/landing page/tracking-id badges
   as secondary, smaller detail underneath. */
.visitor-journey-event-attribution {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0 0;
}

.visitor-journey-touch {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--surface-soft);
  min-width: 0;
}

.visitor-journey-touch__label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.visitor-journey-touch strong {
  overflow-wrap: anywhere;
}

.visitor-journey-touch__meta,
.visitor-journey-touch__url {
  font-size: 0.78rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.visitor-journey-touch__ids {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
}

.visitor-journey-touch__ids code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: help;
}

.visitor-journey-sessions-table code,
.visitor-journey-timeline code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Per-KPI-card sparkline (see visitor-journey-sparkline-widget.js) -- rendered
   as the metric-card's own trailing child (renderMetricCard's `trailing`
   param), so it lives inside the card's real padding/border box instead of
   as a sibling underneath it. margin-top (rather than the card's own
   grid `gap`) keeps it visually secondary to the label/number/hint above,
   with more breathing room than those tightly-stacked lines get from each
   other. */
.sparkline {
  display: block;
  margin-top: 10px;
}

.sparkline svg {
  display: block;
  width: 100%;
  height: 40px;
  overflow: hidden;
}

.sparkline--empty {
  display: flex;
  align-items: center;
  min-height: 24px;
}

/* Date-range picker above the KPI cards (see visitor-journey-kpis-widget.js
   and visitor-journey-controller.js's applyDateRange/handleDateRangeSubmit).
   Prev/Next pagination below the sessions table now uses app.css's shared
   .pagination primitive instead of a local rule here. */
.visitor-journey-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.visitor-journey-date-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.visitor-journey-date-presets .button {
  padding: 8px 12px;
  font-size: 0.82rem;
}

.visitor-journey-date-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.visitor-journey-date-form label {
  margin: 0;
}

.visitor-journey-date-form input[type="date"] {
  min-width: 150px;
}

.visitor-journey-session-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}

.visitor-journey-session-search label {
  flex: 1 1 260px;
  margin: 0;
}

.visitor-journey-session-search input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Persistent Analytics sub-nav (Overview/Channels/Products/Funnel/Customer
   Journey) -- always visible while on /analytics, not hover-revealed; see
   visitor-journey-subnav-widget.js for why. A real tab bar, not a full
   secondary sidebar, since this app has no second-level sidebar chrome
   elsewhere to match -- underline-on-active matches .nav-link's own
   is-active treatment in the primary sidebar (app.css), just horizontal. */
/* The tab nav itself (.page-subnav / .page-subnav__tab) now lives in
   shared/ui/page-subnav.css, shared with Customer Profile and Automation. */

@media (max-width: 720px) {
  .visitor-journey-toolbar {
    align-items: stretch;
  }

  .visitor-journey-date-presets,
  .visitor-journey-date-form {
    width: 100%;
  }

  .visitor-journey-date-form label {
    flex: 1 1 140px;
  }

  .visitor-journey-date-form .button,
  .visitor-journey-date-form .text-button {
    flex: 0 0 auto;
  }
}

/* Channels/Funnel bar fill -- a brand-toned gradient instead of app.css's
   default flat/brand-700-to-600 .progress fill, scoped to these two
   widgets only (via modifier classes, not the shared .progress rule
   itself) so automation's rule bars, setup progress, and email-sending
   domain bars keep their existing look. */
.progress--channel span,
.progress--funnel span {
  background: linear-gradient(90deg, var(--brand-600), var(--brand-100));
}

[data-channels-legend] {
  margin: -4px 0 4px;
}

/* Vertical stage-to-stage connector for the Funnel, between each
   .funnel-stage row -- same thin-line visual language as the Customer
   Journey strip's own .visitor-journey-strip__connector, just vertical
   here since funnel stages stack instead of running left-to-right. */
.funnel-stage__connector {
  display: block;
  width: 2px;
  height: 12px;
  margin: 0 0 0 1px;
  background: var(--border);
}