/* SignVerse Modern UI Layer — sv-modern.css
   Additive: loaded AFTER sf-core.css + sf-envelopes.css. Never overrides layout
   or business logic; only enhances visual quality with motion, glow, and polish.
   Inspired by 21st.dev / Aceternity / Magic UI patterns, adapted to vanilla CSS.
   All values reference existing --sf-* / --sv-* tokens where possible. */

/* ═══════════════════════════════════════════════════════
   0. STRUCTURAL REDESIGNS (real DOM/layout changes)
   ═══════════════════════════════════════════════════════ */

/* ── Stat cards: accent layer ONLY ──
   Layout, surface, typography and spacing all live in sf-envelopes.css
   (.sf-stat-card and friends) — that file is the single owner. This block adds
   just the per-card colour accents, which only envelopes.html uses. Metric
   cards are read-only surfaces, not controls: no hover state, no motion, no
   gradients. Don't reintroduce card styling here; edit sf-envelopes.css. */
.sf-stat-card { border-left: 3px solid transparent; }
.sv-stat-accent-blue  { border-left-color: var(--sf-brand, #2563eb); }
.sv-stat-accent-orange { border-left-color: #ea580c; }
.sv-stat-accent-amber  { border-left-color: #d97706; }
.sv-stat-accent-green  { border-left-color: #16a34a; }

/* Flat tints, not gradients — the 135° gradients read as a gloss/shine on
   what should be a plain icon chip. */
.sv-stat-icon-blue   { background: #e8f0fe !important; color: var(--sf-brand) !important; }
.sv-stat-icon-orange { background: #fff1e7 !important; color: #ea580c !important; }
.sv-stat-icon-amber  { background: #fef4e2 !important; color: #d97706 !important; }
.sv-stat-icon-green  { background: #e7f7ed !important; color: #16a34a !important; }

.sf-stat-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;      /* keep the number + trend on ONE line (2-digit values were wrapping) */
  white-space: nowrap;
  min-width: 0;
}
.sf-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.sf-stat-trend.up {
  background: rgba(22,163,74,0.12);
  color: #16a34a;
}
.sf-stat-trend.down {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}

/* Mini completion ring (positioned top-right of stat card) */
.sv-stat-ring {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
}
.sv-stat-ring svg {
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
}
.sv-stat-ring-track { fill: none; stroke: var(--sf-env-border-soft, #e5eaf2); stroke-width: 3; }
.sv-stat-ring-fill  { fill: none; stroke: var(--sf-brand); stroke-width: 3; stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--sf-ease-out, ease-out); }

/* ── Detail page hero header (replaces flat header) ── */
.sv-detail-hero {
  background: linear-gradient(135deg, var(--sf-surface, #fff) 0%, var(--sf-env-blue-soft, #eef4ff) 100%);
  border: 1px solid var(--sf-env-border, #dbe3ef);
  border-radius: 18px;
  padding: 28px 28px 24px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.sv-detail-hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle at top right, rgba(var(--sf-brand-rgb, 37,99,235), 0.06), transparent 70%);
  pointer-events: none;
}
.sv-detail-hero .sf-detail-back { margin-bottom: 16px; }
.sv-detail-hero .sf-detail-header { margin-bottom: 0; }
.sv-detail-hero .sf-detail-title { font-size: 28px; }

.sv-hero-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--sf-env-text-muted, #64748b);
  flex-wrap: wrap;
}
.sv-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sv-hero-meta-item svg { width: 14px; height: 14px; opacity: 0.6; }
.sv-hero-meta-divider {
  width: 1px;
  height: 16px;
  background: var(--sf-env-border, #dbe3ef);
}

/* ── Table row: status color left stripe (replaces plain hover) ── */
.sf-env-row {
  border-left: 3px solid transparent;
}
.sf-env-row[data-status="completed"]    { border-left-color: var(--sf-env-green, #16a34a); }
.sf-env-row[data-status="in_progress"]  { border-left-color: var(--sf-brand, #2563eb); }
.sf-env-row[data-status="draft"]        { border-left-color: var(--sf-env-border-strong, #cbd5e1); }
.sf-env-row[data-status="declined"]     { border-left-color: var(--sf-env-danger, #ef4444); }
.sf-env-row[data-status="expired"]      { border-left-color: var(--sf-env-warning, #f59e0b); }
.sf-env-row[data-status="revision_pending"] { border-left-color: var(--sf-env-warning, #f59e0b); }

/* Same for agreement rows */
.pe-row {
  border-left: 3px solid transparent;
}
.pe-row[data-status="completed"]    { border-left-color: var(--sf-env-green, #16a34a); }
.pe-row[data-status="in_progress"]  { border-left-color: var(--sf-brand, #2563eb); }
.pe-row[data-status="draft"]        { border-left-color: var(--sf-env-border-strong, #cbd5e1); }
.pe-row[data-status="review"]       { border-left-color: #7c3aed; }

/* ── Detail chips: from flat pills to mini-cards with icons ── */
.sf-detail-chip {
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--sf-env-border-soft, #e5eaf2);
  background: var(--sf-surface, #fff);
  min-height: 56px;
  align-items: flex-start;
  justify-content: center;
}
.sf-detail-chip .sf-chip-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sf-detail-chip .sf-chip-value {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

/* ── Summary grid: hover row highlight with slide ── */
.sf-summary-item {
  position: relative;
}
.sf-summary-item::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--sf-brand, #2563eb);
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transform: scaleY(0.5);
  transition: opacity 0.2s, transform 0.2s var(--sf-ease-spring, ease);
}
.sf-summary-item:hover::after {
  opacity: 1;
  transform: scaleY(1);
}

/* ── Toolbar: search bar with glass effect ── */
.sf-env-search input {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Filter pill active: gradient instead of flat color ── */
.sf-filter-pill.active {
  background: linear-gradient(135deg, var(--sf-brand, #2563eb), #4f46e5);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(var(--sf-brand-rgb, 37,99,235), 0.25);
}

/* ── Table header: subtle gradient bg ── */
.sf-env-table-header {
  background: linear-gradient(180deg, var(--sf-env-surface-soft, #fbfdff), #f1f5f9);
}

/* ── Empty state: gradient action card icons ── */
.sf-empty-action-icon {
  background: linear-gradient(135deg, var(--sf-env-blue-soft, #eef4ff), var(--sf-brand-light, #dbeafe)) !important;
  color: var(--sf-brand) !important;
}

/* ── Agreement detail: readiness ring card ── */
.sv-readiness-card {
  background: linear-gradient(135deg, var(--sf-surface, #fff), var(--sf-env-blue-soft, #eef4ff));
  border: 1px solid var(--sf-env-border, #dbe3ef);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
}

/* ── Timeline: Aceternity-style thick blue connector + ring dots ── */
.timeline-item::before {
  width: 3px !important;
  background: linear-gradient(180deg, var(--sf-brand, #2563eb), rgba(37,99,235,0.2)) !important;
  left: 13px !important;
}
.timeline-dot {
  width: 28px !important;
  height: 28px !important;
  border: 3px solid var(--sf-brand, #2563eb) !important;
  background: var(--sf-surface, #fff) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
}
.timeline-dot svg { width: 13px !important; height: 13px !important; }
.timeline-label {
  font-size: 14px !important;
  font-weight: 600 !important;
}
/* Shared entrance keyframe. Metric cards deliberately do NOT use it (see
   section 18) — it stays here for the timeline / pe-role users below. */
@keyframes sv-card-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sf-timeline-item, .timeline-item {
  animation: sv-card-enter 0.4s var(--sf-ease-out, ease) both;
}
.sf-timeline-item:nth-child(1), .timeline-item:nth-child(1) { animation-delay: 0ms; }
.sf-timeline-item:nth-child(2), .timeline-item:nth-child(2) { animation-delay: 80ms; }
.sf-timeline-item:nth-child(3), .timeline-item:nth-child(3) { animation-delay: 160ms; }
.sf-timeline-item:nth-child(4), .timeline-item:nth-child(4) { animation-delay: 240ms; }
.sf-timeline-item:nth-child(5), .timeline-item:nth-child(5) { animation-delay: 320ms; }

/* ── Page title: heavier display weight ── */
.sf-page-title {
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--sf-env-text-strong, #0f172a), var(--sf-brand, #2563eb));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Breadcrumb navigation ── */
.sv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sf-env-text-muted, #64748b);
  margin-bottom: 8px;
}
.sv-breadcrumb a {
  color: var(--sf-env-text-muted, #64748b);
  text-decoration: none;
}
.sv-breadcrumb a:hover { color: var(--sf-brand, #2563eb); }
.sv-breadcrumb-sep {
  font-size: 10px;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════
   1. MOTION TOKENS (missing from sf-core.css)
   ═══════════════════════════════════════════════════════ */
:root {
  /* Easing curves */
  --sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --sf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Glow intensities (used by card-glow, status-glow, etc.) */
  --sf-glow-brand: rgba(var(--sf-brand-rgb, 37,99,235), 0.12);
  --sf-glow-brand-strong: rgba(var(--sf-brand-rgb, 37,99,235), 0.22);
  --sf-glow-green: rgba(22, 163, 74, 0.12);
  --sf-glow-amber: rgba(217, 119, 6, 0.12);
  --sf-glow-red: rgba(220, 38, 38, 0.12);
}

/* ═══════════════════════════════════════════════════════
   2. REDUCED MOTION — respect the preference
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sv-fade-in, .sv-stagger-item { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════
   3. CARD HOVER GLOW (Aceternity-style)
   ═══════════════════════════════════════════════════════ */
.sf-card,
.sf-env-table-card,
.sf-empty-action-card,
.sf-final-card,
.sf-link-card,
.pe-card {
  transition:
    border-color var(--sf-duration-base) var(--sf-ease-out),
    box-shadow var(--sf-duration-base) var(--sf-ease-out),
    transform var(--sf-duration-base) var(--sf-ease-out);
}

.sf-card:hover,
.sf-final-card:hover,
.sf-link-card:hover,
.pe-card:hover {
  border-color: var(--sf-brand-light);
  box-shadow:
    0 8px 24px var(--sf-glow-brand),
    0 0 0 1px rgba(var(--sf-brand-rgb), 0.08);
}

/* ═══════════════════════════════════════════════════════
   4. STATUS PILL GLOW
   ═══════════════════════════════════════════════════════ */
.sf-status-pill {
  transition: box-shadow var(--sf-duration-fast) var(--sf-ease-out);
}

.sf-status-completed:hover,
.sf-status-completed {
  box-shadow: 0 0 8px var(--sf-glow-green);
}
.sf-status-in-progress:hover {
  box-shadow: 0 0 10px var(--sf-glow-brand);
}
.sf-status-revision-pending:hover {
  box-shadow: 0 0 10px var(--sf-glow-amber);
}
.sf-status-declined:hover {
  box-shadow: 0 0 10px var(--sf-glow-red);
}

/* ═══════════════════════════════════════════════════════
   5. TABLE ROW INTERACTION
   ═══════════════════════════════════════════════════════ */
.sf-env-row {
  transition:
    background var(--sf-duration-fast) var(--sf-ease-out),
    box-shadow var(--sf-duration-fast) var(--sf-ease-out);
}
.sf-env-row:hover {
  background: var(--sf-env-surface-soft, #fafbfd);
  box-shadow: inset 3px 0 0 var(--sf-brand);
}
.sf-env-row:hover .sf-env-col-actions {
  background: var(--sf-env-surface-soft, #fafbfd);
}

/* ═══════════════════════════════════════════════════════
   6. FADE-IN ON SCROLL (IntersectionObserver-powered)
   ═══════════════════════════════════════════════════════ */
.sv-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s var(--sf-ease-out),
    transform 0.5s var(--sf-ease-out);
}
.sv-fade-in.sv-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — add .sv-stagger to parent, .sv-stagger-item to children */
.sv-stagger-item {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.4s var(--sf-ease-out),
    transform 0.4s var(--sf-ease-out);
}
.sv-stagger-item.sv-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════
   7. SHIMMER BUTTON (Magic UI inspired)
   Removed: an infinite looping gradient sweep across primary buttons
   (e.g. "New Envelope") read as distracting rather than polished.
   Buttons keep their plain solid background from sf-envelopes.css /
   sf-core.css.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   8. TIMELINE PULSE (active signer dot)
   ═══════════════════════════════════════════════════════ */
.sf-timeline-icon {
  transition: transform var(--sf-duration-base) var(--sf-ease-spring);
}
.sf-timeline-icon:hover {
  transform: scale(1.08);
}

.sf-wf-dot.current {
  animation: sv-pulse 2s ease-in-out infinite;
}
@keyframes sv-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0); }
}

/* Active recipient order number */
.sf-recip-order-num.active {
  animation: sv-pulse-blue 2s ease-in-out infinite;
}
@keyframes sv-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--sf-brand-rgb), 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--sf-brand-rgb), 0); }
}

/* ═══════════════════════════════════════════════════════
   9. FILTER PILL TRANSITIONS
   ═══════════════════════════════════════════════════════ */
.sf-filter-pill {
  transition:
    background var(--sf-duration-fast) var(--sf-ease-out),
    color var(--sf-duration-fast) var(--sf-ease-out),
    border-color var(--sf-duration-fast) var(--sf-ease-out),
    transform var(--sf-duration-fast) var(--sf-ease-spring);
}
.sf-filter-pill:active {
  transform: scale(0.96);
}

/* ═══════════════════════════════════════════════════════
   10. SEGMENTED TABS — smooth active indicator
   ═══════════════════════════════════════════════════════ */
.sf-detail-tab {
  transition:
    background var(--sf-duration-fast) var(--sf-ease-out),
    color var(--sf-duration-fast) var(--sf-ease-out);
}
.sf-detail-tab.active::after {
  animation: sv-tab-slide 0.3s var(--sf-ease-spring);
}
@keyframes sv-tab-slide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ═══════════════════════════════════════════════════════
   11. AVATAR RING (active signer)
   ═══════════════════════════════════════════════════════ */
.sf-recip-avatar-sm {
  transition: transform var(--sf-duration-fast) var(--sf-ease-spring);
}
.sf-recip-avatar-sm:hover {
  transform: scale(1.12);
  z-index: 5;
}

/* ═══════════════════════════════════════════════════════
   12. EMPTY STATE CARD HOVER LIFT
   ═══════════════════════════════════════════════════════ */
.sf-empty-action-card {
  transition:
    border-color var(--sf-duration-base) var(--sf-ease-out),
    box-shadow var(--sf-duration-base) var(--sf-ease-out),
    transform var(--sf-duration-base) var(--sf-ease-out);
}
.sf-empty-action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--sf-glow-brand);
}

/* ═══════════════════════════════════════════════════════
   13. SEARCH INPUT FOCUS GLOW
   ═══════════════════════════════════════════════════════ */
.sf-env-search input {
  transition:
    border-color var(--sf-duration-fast) var(--sf-ease-out),
    box-shadow var(--sf-duration-fast) var(--sf-ease-out);
}

/* ═══════════════════════════════════════════════════════
   14. ICON BUTTON MICRO-INTERACTION
   ═══════════════════════════════════════════════════════ */
.sf-icon-btn {
  transition:
    background var(--sf-duration-fast) var(--sf-ease-out),
    color var(--sf-duration-fast) var(--sf-ease-out),
    transform var(--sf-duration-fast) var(--sf-ease-spring);
}
.sf-icon-btn:active {
  transform: scale(0.92);
}

/* ═══════════════════════════════════════════════════════
   15. DRAWER SLIDE-IN (smoother)
   ═══════════════════════════════════════════════════════ */
.sf-activity-drawer {
  transition: right 0.3s var(--sf-ease-out);
}

/* ═══════════════════════════════════════════════════════
   16. MODAL OVERLAY FADE
   ═══════════════════════════════════════════════════════ */
.sf-activity-overlay {
  transition: opacity 0.25s var(--sf-ease-out);
  opacity: 0;
}
.sf-activity-overlay.open {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   17. SUMMARY GRID ITEM HOVER
   ═══════════════════════════════════════════════════════ */
.sf-summary-item {
  transition: background var(--sf-duration-fast) var(--sf-ease-out);
}
.sf-summary-item:hover {
  background: var(--sf-env-surface-soft, #fbfdff);
}
.sf-summary-icon {
  transition: transform var(--sf-duration-base) var(--sf-ease-spring);
}
.sf-summary-item:hover .sf-summary-icon {
  transform: scale(1.1);
}

/* ═══════════════════════════════════════════════════════
   18. PAGE-LOAD STAGGER FOR STAT CARDS
   Removed: renderStats() shows this row (display:none → '') on every
   page load/refresh, not just once, so the opacity:0→1 keyframe replayed
   on every refresh and read as the cards flashing "light" before settling.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   19. DETAIL PAGE HEADER — title entrance
   ═══════════════════════════════════════════════════════ */
.sf-detail-header {
  animation: sv-header-enter 0.4s var(--sf-ease-out) both;
}
@keyframes sv-header-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════
   20. GRADIENT ACCENT STRIPE ON ACTIVE CARDS
   ═══════════════════════════════════════════════════════ */
.sf-card:has(.sf-status-in-progress),
.sf-flow-seq-card:has(.sf-recip-order-num.active) {
  border-image: linear-gradient(135deg, var(--sf-brand), #8b5cf6) 1;
  border-image-slice: 1;
  border-width: 1px 1px 1px 3px;
  border-style: solid;
}

/* ═══════════════════════════════════════════════════════
   21. PAGINATION — active page number scale
   ═══════════════════════════════════════════════════════ */
.sf-page-btn {
  transition:
    background var(--sf-duration-fast) var(--sf-ease-out),
    color var(--sf-duration-fast) var(--sf-ease-out),
    transform var(--sf-duration-fast) var(--sf-ease-spring);
}
.sf-page-btn.active {
  transform: scale(1.08);
}
.sf-page-btn:not(:disabled):hover {
  transform: scale(1.06);
}

/* ═══════════════════════════════════════════════════════
   22. VERIFIED BADGE SHIMMER
   ═══════════════════════════════════════════════════════ */
.sf-verified-badge {
  position: relative;
  overflow: hidden;
}
.sf-verified-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.3) 50%,
    transparent 60%
  );
  background-size: 250% 100%;
  animation: sv-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   23. HASH CHAIN LINK — code block subtle highlight
   ═══════════════════════════════════════════════════════ */
.sf-hash-mono {
  transition: background var(--sf-duration-fast) var(--sf-ease-out);
  padding: 1px 4px;
  border-radius: 4px;
}
.sf-hash-mono:hover {
  background: var(--sf-env-blue-soft);
}

/* ═══════════════════════════════════════════════════════
   24. FOCUS-VISIBLE RING (accessibility)
   ═══════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--sf-brand);
  outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sf-brand);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════
   25. TOOLTIP-STYLE HOVER ON STAT VALUES
   Removed: recolouring the metric to brand blue on card hover was part of
   the same hover treatment metric cards no longer carry.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   26. AGREEMENT LIST — pe-row hover + progress bar glow
   ═══════════════════════════════════════════════════════ */
.pe-row {
  transition:
    background var(--sf-duration-fast) var(--sf-ease-out),
    box-shadow var(--sf-duration-fast) var(--sf-ease-out);
}
.pe-row:hover {
  box-shadow: inset 3px 0 0 var(--sf-brand);
}

.pe-progress-fill {
  transition: width 0.6s var(--sf-ease-out);
}
.pe-progress-fill.high {
  box-shadow: 0 0 6px var(--sf-glow-green);
}

/* ═══════════════════════════════════════════════════════
   27. AGREEMENT DETAIL — journey stages + readiness ring
   ═══════════════════════════════════════════════════════ */
.pe-stage {
  transition: transform var(--sf-duration-fast) var(--sf-ease-spring);
}
.pe-stage:hover {
  transform: scale(1.15);
}
.pe-stage.active {
  animation: sv-pulse-blue 2s ease-in-out infinite;
}

.pe-timeline-item {
  animation: sv-card-enter 0.4s var(--sf-ease-out) both;
}

.pe-card {
  transition:
    border-color var(--sf-duration-base) var(--sf-ease-out),
    box-shadow var(--sf-duration-base) var(--sf-ease-out);
}
.pe-card:hover {
  border-color: var(--sf-brand-light, #dbeafe);
  box-shadow: 0 8px 24px var(--sf-glow-brand);
}

/* ═══════════════════════════════════════════════════════
   28. ROLE PILLS — subtle entrance animation
   ═══════════════════════════════════════════════════════ */
[class*="pe-role-"] {
  animation: sv-card-enter 0.3s var(--sf-ease-out) both;
}

/* ═══════════════════════════════════════════════════════
   29. DOCUMENT PREVIEW CARD — focus glow when expanded
   ═══════════════════════════════════════════════════════ */
.sf-preview-card {
  transition:
    border-color var(--sf-duration-base) var(--sf-ease-out),
    box-shadow var(--sf-duration-base) var(--sf-ease-out);
}
.sf-preview-card:hover {
  border-color: var(--sf-brand-light, #dbeafe);
  box-shadow:
    0 8px 32px var(--sf-glow-brand),
    0 0 0 1px rgba(var(--sf-brand-rgb), 0.06);
}

/* ═══════════════════════════════════════════════════════
   30. RECIPIENT ROW — smooth enter for dynamic content
   ═══════════════════════════════════════════════════════ */
.sf-recip-row {
  transition:
    background var(--sf-duration-fast) var(--sf-ease-out),
    box-shadow var(--sf-duration-fast) var(--sf-ease-out);
}
.sf-recip-row:hover {
  box-shadow: inset 3px 0 0 var(--sf-brand);
}

/* ═══════════════════════════════════════════════════════
   31. DARK MODE — structural overrides
   ═══════════════════════════════════════════════════════ */
:root[data-theme="dark"] .sv-detail-hero {
  background: linear-gradient(135deg, var(--sf-surface, #1e293b) 0%, rgba(37,99,235,0.08) 100%);
  border-color: var(--sf-border, #334155);
}
:root[data-theme="dark"] .sv-detail-hero::before {
  background: radial-gradient(circle at top right, rgba(37,99,235,0.12), transparent 70%);
}
/* The dark .sv-stat-icon-* gradients were removed with their light-mode twins
   (section 0) — the icon chips are flat tints now. */
:root[data-theme="dark"] .sf-filter-pill.active {
  background: linear-gradient(135deg, rgba(37,99,235,0.9), rgba(79,70,229,0.9));
}
:root[data-theme="dark"] .sf-env-table-header {
  background: linear-gradient(180deg, var(--sf-surface, #1e293b), rgba(30,41,59,0.8));
}
:root[data-theme="dark"] .sf-page-title {
  background: linear-gradient(135deg, #e2e8f0, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
}
/* NOTE: the app is a single light theme (no toggle). A prior
   `@media (prefers-color-scheme: dark)` override that darkened only .sv-detail-hero
   on an OS in dark mode was removed — it left the surrounding page light, so the
   hero mismatched. The `:root[data-theme="dark"]` rules above never fire (nothing
   sets data-theme) and are kept only as a reference for a future real dark theme. */

/* ═══════════════════════════════════════════════════════
   32. SPOTLIGHT GLOW (cursor-following radial highlight)
   ═══════════════════════════════════════════════════════ */
/* .sf-stat-card is deliberately NOT in this group — the metric cards carry no
   cursor glow (sv-modern.js excludes them from the spotlight tracker too). */
.sf-kpi-card,
.sf-widget-card {
  position: relative;
  overflow: hidden;
}
.sf-kpi-card::before,
.sf-widget-card::before {
  content: '';
  position: absolute;
  top: var(--spot-y, 50%);
  left: var(--spot-x, 50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 0;
}
.sv-spotlight-active::before {
  opacity: 1;
}
.sf-kpi-card > *,
.sf-widget-card > * {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════
   33. ANIMATED GRADIENT BORDER (stat & KPI cards)
   ═══════════════════════════════════════════════════════ */
@keyframes sv-border-rotate {
  to { --sv-border-angle: 360deg; }
}
@property --sv-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
/* Rotating rainbow-gradient border on hover — kept for dashboard KPI cards only.
   Removed from .sf-stat-card (metric cards) as it read as a "weird" hover. */
.sf-kpi-card:hover {
  border-color: transparent;
  background-image:
    linear-gradient(var(--sf-kpi-bg, #fff), var(--sf-kpi-bg, #fff)),
    conic-gradient(from var(--sv-border-angle, 0deg), #3b82f6, #8b5cf6, #ec4899, #f59e0b, #3b82f6);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: sv-border-rotate 3s linear infinite;
}

/* ═══════════════════════════════════════════════════════
   34. GLASSMORPHISM SURFACE (stat cards)
   Removed: the translucent rgba(255,255,255,0.85) + blur background made
   the cards read as washed-out/light against the page background instead
   of the solid white card defined in sf-envelopes.css. Cards keep the
   opaque #fff background from sf-envelopes.css .sf-stat-card.
   ═══════════════════════════════════════════════════════ */
:root[data-theme="dark"] .sf-kpi-card {
  background: rgba(30,41,59,0.85);
}
/* OS-dark override removed (light-only app): it darkened stat/kpi cards while
   the rest of the page stayed light. See the note in section 31. */

/* ═══════════════════════════════════════════════════════
   35. SHIMMER LOADING REVEAL
   ═══════════════════════════════════════════════════════ */
@keyframes sv-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.sv-shimmer-reveal {
  position: relative;
}
.sv-shimmer-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: sv-shimmer 0.8s ease-out forwards;
  pointer-events: none;
  border-radius: inherit;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════
   36. ROW HOVER HIGHLIGHT (tables)
   ═══════════════════════════════════════════════════════ */
.sf-env-row,
.pe-row {
  position: relative;
  transition: background 0.15s, box-shadow 0.15s;
}
.sf-env-row:hover,
.pe-row:hover {
  background: linear-gradient(90deg, rgba(37,99,235,0.04) 0%, rgba(139,92,246,0.03) 100%);
  box-shadow: inset 3px 0 0 var(--sf-brand, #3b82f6);
}
.sf-env-row::after,
.pe-row::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(37,99,235,0.06) 0%, transparent 60%);
  pointer-events: none;
  transition: opacity 0.2s;
}
.sv-spotlight-active.sf-env-row::after,
.sv-spotlight-active.pe-row::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   37. DARK MODE OVERRIDES
   The stat-card entries that lived here were removed: nothing sets
   data-theme (see the note in section 31), so they never fired, and having a
   second surface/shadow definition for metric cards was the main reason their
   styling was hard to follow. sf-envelopes.css owns those cards outright.
   ═══════════════════════════════════════════════════════ */
:root[data-theme="dark"] .sf-env-row:hover,
:root[data-theme="dark"] .pe-row:hover {
  background: linear-gradient(90deg, rgba(37,99,235,0.08) 0%, rgba(139,92,246,0.06) 100%);
}
/* OS-dark override removed (light-only app): it recolored stat labels/values +
   row hovers on an OS in dark mode while the rest of the page stayed light. */

/* ═══════════════════════════════════════════════════════
   38. STAGGER ANIMATIONS (cards appear one by one)
   ═══════════════════════════════════════════════════════ */
/* Metric cards are static — their stagger delays went with the entrance
   animation removed in section 18. */
.sf-kpi-grid .sf-kpi-card:nth-child(1) { transition-delay: 0s; }
.sf-kpi-grid .sf-kpi-card:nth-child(2) { transition-delay: 0.05s; }
.sf-kpi-grid .sf-kpi-card:nth-child(3) { transition-delay: 0.1s; }
.sf-kpi-grid .sf-kpi-card:nth-child(4) { transition-delay: 0.15s; }
.sf-kpi-grid .sf-kpi-card:nth-child(5) { transition-delay: 0.2s; }
.sf-kpi-grid .sf-kpi-card:nth-child(6) { transition-delay: 0.25s; }

/* ═══════════════════════════════════════════════════════
   39. MICRO-INTERACTIONS (buttons, pills, actions)
   ═══════════════════════════════════════════════════════ */
.sf-btn-primary-tall,
.sf-filter-pill,
.sf-kpi-action {
  transition: transform 0.15s var(--sf-ease-out), box-shadow 0.15s, background 0.15s;
}
.sf-btn-primary-tall:active { transform: scale(0.97); }
.sf-filter-pill:hover { transform: translateY(-1px); }
.sf-kpi-action:hover { transform: translateX(2px); }

/* The metric-card !important override block that used to sit here is gone.
   It existed to cancel hover/lift/glow/gradient rules that this file no longer
   declares, and its blanket `border-color` also cancelled the .sv-stat-accent-*
   left stripe. With the sources removed there is nothing left to neutralise. */