/* User Tracking, Heap-style Analytics & Hotjar Bug Triage Styles */

.analytics-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
}

.analytics-nav-link {
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--mist);
  text-decoration: none;
  transition: all 0.15s ease;
}

.analytics-nav-link:hover {
  color: var(--ink);
  background: var(--paper);
}

.analytics-nav-link.is-active {
  color: var(--snow);
  background: var(--brand);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--snow);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.stat-card.stat-danger {
  border-left: 4px solid var(--danger);
}

.stat-card.stat-warn {
  border-left: 4px solid var(--warn);
}

.stat-card.stat-brand {
  border-left: 4px solid var(--brand);
}

.stat-card.stat-ok {
  border-left: 4px solid var(--ok);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.8125rem;
  color: var(--mist);
  margin-top: 0.25rem;
  font-weight: 500;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--snow);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-pills {
  display: flex;
  gap: 0.25rem;
  background: var(--paper);
  padding: 0.25rem;
  border-radius: var(--radius);
}

.filter-pill {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 4px;
  color: var(--mist);
  text-decoration: none;
}

.filter-pill.is-active {
  background: var(--snow);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Feature Usage Bars */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.feature-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
}

.feature-bar-wrap {
  width: 100%;
  height: 8px;
  background: var(--paper);
  border-radius: 4px;
  overflow: hidden;
}

.feature-bar-fill {
  height: 100%;
  background: var(--mark);
  border-radius: 4px;
}

/* Timeline & Session Replay Stream */
.session-stream {
  position: relative;
  margin-left: 1.25rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.stream-node {
  position: relative;
}

.stream-icon-badge {
  position: absolute;
  left: -2.15rem;
  top: 0.15rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--snow);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.stream-node.node-error .stream-icon-badge {
  border-color: var(--danger);
  background: #fdf2f2;
  color: var(--danger);
}

.stream-node.node-rage .stream-icon-badge {
  border-color: var(--warn);
  background: #fef8ee;
  color: var(--warn);
}

.stream-node.node-click .stream-icon-badge {
  border-color: var(--brand);
  background: #eef6fc;
  color: var(--brand);
}

.stream-node.node-pageview .stream-icon-badge {
  border-color: var(--ok);
  background: #effaf6;
  color: var(--ok);
}

.stream-card {
  background: var(--snow);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

.stream-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--mist);
  margin-bottom: 0.25rem;
}

.stream-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
}

.stream-details {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  background: var(--paper);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  overflow-x: auto;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Bug Triaging */
.bug-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.bug-badge.badge-unresolved {
  background: #fdf2f2;
  color: var(--danger);
  border: 1px solid #fac8c8;
}

.bug-badge.badge-resolved {
  background: #effaf6;
  color: var(--ok);
  border: 1px solid #b7ecd9;
}

.bug-badge.badge-ignored {
  background: var(--paper);
  color: var(--mist);
  border: 1px solid var(--line);
}

.stack-box {
  background: #0b1220;
  color: #cbd5e1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 360px;
}

.breadcrumbs-trail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.breadcrumb-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  padding: 0.35rem 0.6rem;
  background: var(--paper);
  border-radius: 4px;
}

.breadcrumb-tag {
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  background: var(--snow);
  border: 1px solid var(--line);
}

/* CSP-safe utility classes — replace inline style attributes that the
   content security policy blocks. */
.u-text-mist { color: var(--mist); }
.u-text-ink { color: var(--ink); }
.u-text-ok { color: var(--ok); }
.u-text-warn { color: var(--warn); }
.u-text-danger { color: var(--danger); }
.u-semibold { font-weight: 600; }
.u-mt-1 { margin-top: 1rem; }
.u-mt-075 { margin-top: 0.75rem; }
.u-meta-xs { font-size: 0.75rem; color: var(--mist); }
.u-meta-xs-tight { font-size: 0.75rem; color: var(--mist); margin-top: 0.15rem; }
.u-meta-sm { font-size: 0.8125rem; color: var(--mist); }
.u-meta-sm-semibold { font-size: 0.8125rem; font-weight: 600; color: var(--mist); }
.u-meta-sm-block { font-size: 0.8125rem; color: var(--mist); margin: 0 0 0.75rem 0; }
.u-inline-center { display: flex; gap: 0.5rem; align-items: center; }
.u-inline-center-tight { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.u-mono-xs { font-size: 0.75rem; color: var(--mist); font-family: monospace; }
.u-nowrap { white-space: nowrap; }
.u-nowrap-sm { white-space: nowrap; font-size: 0.8125rem; color: var(--mist); }
.u-capitalize { text-transform: capitalize; }
.u-break { word-break: break-word; }
.u-width-140 { width: 140px; color: var(--mist); }
.u-filter-select { padding: 0.4rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--line); font-size: 0.8125rem; }
.u-filter-select-tight { padding: 0.35rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--line); font-size: 0.8125rem; }
.u-filter-select-wide { width: 100%; padding: 0.4rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--line); font-size: 0.8125rem; }
.u-pad-sm { padding: 0.4rem 0.8rem; font-size: 0.8125rem; }
.u-error-row { background: #fdf2f2; color: var(--danger); }
.u-w-5 { width: 5%; }
.u-w-25 { width: 25%; }
.u-w-50 { width: 50%; }
.u-w-75 { width: 75%; }
.u-w-100 { width: 100%; }
.badge-danger { background: var(--danger); color: white; margin-left: 0.35rem; font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 999px; }
.feature-bar-fill { height: 8px; border-radius: 4px; background: var(--brand); }
.u-meta-xs-semibold { font-size: 0.75rem; color: var(--mist); font-weight: 600; }
.u-meta-xs-width { font-size: 0.75rem; color: var(--mist); width: 24px; }
.u-weight-500 { font-weight: 500; }
.u-flex-1 { flex: 1; }
.u-flex-wrap { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.u-inline-flex-tight { display: inline-flex; gap: 0.35rem; align-items: center; }
.u-meta-sm-500 { font-size: 0.8125rem; font-weight: 500; color: var(--mist); }
.u-stat-value-lg { font-size: 1.1rem; padding-top: 0.35rem; }
.u-right-sm { margin-top: 0.5rem; text-align: right; }
.u-details-sm { margin-top: 0.5rem; font-size: 0.8125rem; }
.u-summary-link { cursor: pointer; color: var(--brand); font-weight: 500; }
.u-brand-text { color: var(--brand); }
.u-meta-500-mist { font-weight: 600; color: var(--mist); }
.u-error-badge { background: #fdf2f2; color: var(--danger); }
.u-rage-badge { background: #fef8ee; color: var(--warn); border: 1px solid #fde2b3; }
.u-stat-warn-text { color: var(--warn); }
.u-stat-danger-text { color: var(--danger); }
.u-filter-form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; width: 100%; }
.u-filter-grow { flex: 1; min-width: 200px; }
.u-code-chip { font-size: 0.75rem; background: var(--paper); padding: 0.15rem 0.35rem; border-radius: 3px; }