/* =========================================================
   SAPPHIRE HERO — Modular Scene Engine
   Drop this CSS in your project. Zero external dependencies.
   ========================================================= */

/* --- THEME VARIABLES --- */
:root {
  --sh-primary: #0066cc;
  --sh-primary-hover: #0052a3;
  --sh-primary-soft: rgba(0, 102, 204, 0.08);
  --sh-primary-light: #e8f0fe;
  --sh-bg: #f5f7fa;
  --sh-surface: #ffffff;
  --sh-surface-2: #f8fafc;
  --sh-border: #e5e9f0;
  --sh-border-light: #eef2f6;
  --sh-text-primary: #0f172a;
  --sh-text-secondary: #475569;
  --sh-text-tertiary: #94a3b8;
  --sh-success: #059669;
  --sh-success-light: #d1fae5;
  --sh-warning: #d97706;
  --sh-warning-light: #fef3c7;
  --sh-danger: #dc2626;
  --sh-danger-light: #fee2e2;
}

/* --- ROOT CONTAINER --- */
.sapphire-hero-viz * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sapphire-hero-viz {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--sh-text-primary);
}

/* --- TOP NAVIGATION BAR --- */
.sh-topnav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  flex-wrap: wrap;
  gap: 12px;
}

.sh-topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--sh-text-primary);
}

.sh-topnav-logo {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--sh-primary), var(--sh-primary-hover));
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 3px 8px rgba(0, 102, 204, 0.25);
}

.sh-topnav-tabs {
  display: flex;
  gap: 4px;
  background: var(--sh-surface-2);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--sh-border-light);
}

.sh-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sh-text-secondary);
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.sh-tab:hover {
  color: var(--sh-text-primary);
  background: rgba(0, 0, 0, 0.02);
}

.sh-tab.active {
  background: var(--sh-surface);
  color: var(--sh-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sh-tab-icon {
  font-size: 14px;
}

.sh-topnav-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sh-text-secondary);
}

.sh-live-indicator {
  width: 8px;
  height: 8px;
  background: var(--sh-success);
  border-radius: 50%;
  animation: sh-pulse 2s infinite;
}

@keyframes sh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
}

/* --- DEMO FRAME --- */
.sh-demo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--sh-bg);
  border: 1px solid var(--sh-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 70px -30px rgba(0, 102, 204, 0.18),
    0 18px 32px -24px rgba(0, 0, 0, 0.18);
}

.sh-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sh-canvas {
  width: 1440px;
  height: 760px;
  display: block;
  background: var(--sh-bg);
  transform-origin: top left;
  will-change: transform;
}

.sh-scene-title {
  position: absolute;
  bottom: 8px;
  right: 20px;
  font-size: 11px;
  color: var(--sh-text-tertiary);
  z-index: 50;
  background: var(--sh-surface);
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--sh-border-light);
  opacity: 0.8;
}

/* --- SHARED ANIMATIONS --- */
@keyframes sh-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sh-pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sh-check-pop {
  0% { opacity: 0; transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes sh-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sh-bar-fill {
  from { width: 0; }
  to { width: var(--sh-bar-width, 100%); }
}

.sh-anim-slide-up {
  animation: sh-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sh-anim-pop-in {
  animation: sh-pop-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sh-anim-fade-in {
  animation: sh-fade-in 0.4s ease forwards;
}

/* --- DESKTOP SCENE (SCENE 1) --- */
.sh-desktop {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sh-app-topbar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--sh-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  flex-shrink: 0;
}

.sh-app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sh-brand-logo {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--sh-primary), var(--sh-primary-hover));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 3px 8px rgba(0, 102, 204, 0.3);
}

.sh-brand-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--sh-text-primary);
  letter-spacing: -0.3px;
}

.sh-app-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  justify-content: center;
  overflow: hidden;
}

.sh-app-tab {
  height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--sh-text-secondary);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sh-app-tab.active {
  background: var(--sh-primary-soft);
  color: var(--sh-primary);
  border-color: rgba(0, 102, 204, 0.12);
}

.sh-nav-badge {
  background: var(--sh-primary);
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
}

.sh-app-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

.sh-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sh-primary), var(--sh-primary-hover));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.sh-user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--sh-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-main {
  flex: 1;
  min-height: 0;
  padding: 12px 16px 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sh-page-head {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.sh-page-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 2px;
  color: var(--sh-text-primary);
}

.sh-page-sub {
  font-size: 11px;
  color: var(--sh-text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sh-success-light);
  color: var(--sh-success);
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.sh-live-dot {
  width: 6px;
  height: 6px;
  background: var(--sh-success);
  border-radius: 50%;
  animation: sh-pulse 2s infinite;
}

.sh-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  opacity: 0;
}

.sh-card.visible {
  animation: sh-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sh-card-head {
  margin-bottom: 8px;
}

.sh-card-title {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  color: var(--sh-text-primary);
}

.sh-card-title svg {
  width: 14px;
  height: 14px;
  color: var(--sh-primary);
}

.sh-card-sub {
  font-size: 10px;
  color: var(--sh-text-secondary);
}

.sh-wo-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sh-wo-id {
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sh-text-primary);
}

.sh-wo-id::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--sh-primary);
  border-radius: 50%;
}

.sh-wo-tag {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--sh-primary-light);
  color: var(--sh-primary);
}

.sh-wo-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--sh-text-secondary);
  flex-wrap: wrap;
}

.sh-wo-meta strong {
  color: var(--sh-text-primary);
  font-weight: 600;
}

.sh-prop-item {
  background: #f1f5f9;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  padding: 12px;
  opacity: 0.38;
  transform: scale(0.98);
  position: relative;
  transition: border-color 0.3s, opacity 0.3s, transform 0.3s, background-color 0.3s;
}

.sh-prop-item.visible {
  animation: sh-pop-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sh-prop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}


.sh-prop-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  background: var(--sh-success);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transform: scale(0);
}

.sh-prop-item.checked .sh-prop-check {
  animation: sh-check-pop 0.5s 0.2s forwards;
}

.sh-prop-icon {
  width: 30px;
  height: 30px;
  background: var(--sh-primary-light);
  color: var(--sh-primary);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.sh-prop-icon svg {
  width: 16px;
  height: 16px;
}

.sh-prop-label {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--sh-text-primary);
}

.sh-prop-desc {
  font-size: 10px;
  color: var(--sh-text-tertiary);
}

.sh-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.sh-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--sh-text-secondary);
  padding: 6px 8px;
  background: var(--sh-surface-2);
  border-radius: 6px;
  opacity: 0;
}

.sh-check-item.visible {
  animation: sh-slide-up 0.3s forwards;
}

.sh-check-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

.sh-check-icon.pass {
  background: var(--sh-success-light);
  color: var(--sh-success);
}

.sh-check-icon.warn {
  background: var(--sh-warning-light);
  color: var(--sh-warning);
}

.sh-check-icon.fail {
  background: var(--sh-danger-light);
  color: var(--sh-danger);
}

.sh-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.sh-metric-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: 8px;
  padding: 10px 12px;
  opacity: 0;
}

.sh-metric-card.visible {
  animation: sh-slide-up 0.4s forwards;
}

.sh-metric-label {
  font-size: 9px;
  color: var(--sh-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 4px;
  font-weight: 600;
}

.sh-metric-value {
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
  color: var(--sh-text-primary);
}

.sh-metric-trend {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.sh-metric-trend.up {
  background: var(--sh-success-light);
  color: var(--sh-success);
}

.sh-metric-trend.down {
  background: var(--sh-warning-light);
  color: var(--sh-warning);
}

.sh-metric-sub {
  font-size: 9px;
  color: var(--sh-text-tertiary);
}

.sh-timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 10px;
}

.sh-timeline::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 34px;
  right: 34px;
  height: 2px;
  background: var(--sh-border);
  z-index: 0;
}

.sh-timeline-bar {
  position: absolute;
  top: 12px;
  left: 34px;
  height: 2px;
  background: var(--sh-primary);
  z-index: 1;
  width: 0%;
  max-width: calc(100% - 68px);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-tl-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.sh-tl-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sh-surface);
  border: 2px solid var(--sh-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--sh-text-tertiary);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sh-tl-dot.active {
  background: var(--sh-primary);
  border-color: var(--sh-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--sh-primary-soft);
  transform: scale(1.15);
}

.sh-tl-dot.complete {
  background: var(--sh-success);
  border-color: var(--sh-success);
  color: #fff;
}

.sh-tl-label {
  font-size: 10px;
}

.sh-card[data-sh-el="timeline"],
.sh-activity-card,
.sh-timeline-card {
  margin-bottom: 0;
  padding: 10px 12px;
  opacity: 1;
}

/* --- MOBILE SCENE (SCENE 2) --- */
.sh-mobile-scene {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  padding: 30px 40px;
  height: 100%;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8f0fe 100%);
}

.sh-phone {
  width: 240px;
  height: 480px;
  background: #1a202c;
  border-radius: 36px;
  padding: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #2d3748;
  position: relative;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
}

.sh-phone.visible {
  animation: sh-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sh-phone::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 18px;
  background: #0f172a;
  border-radius: 10px;
  z-index: 10;
}

.sh-phone-screen {
  width: 100%;
  height: 100%;
  background: var(--sh-surface);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.sh-phone-status {
  padding: 10px 20px 6px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--sh-text-tertiary);
  font-weight: 600;
}

.sh-phone-screen-inner {
  padding: 30px 16px 16px;
}

.sh-phone-app-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sh-border-light);
}

.sh-phone-app-logo {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--sh-primary), var(--sh-primary-hover));
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.sh-phone-app-title {
  font-size: 13px;
  font-weight: 700;
}

.sh-notification {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.sh-notification.visible {
  animation: sh-slide-up 0.4s forwards;
}

.sh-notif-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--sh-text-tertiary);
  margin-bottom: 4px;
  font-weight: 600;
}

.sh-notif-app {
  color: var(--sh-primary);
}

.sh-notif-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}

.sh-notif-desc {
  font-size: 11px;
  color: var(--sh-text-secondary);
  line-height: 1.4;
}

.sh-mobile-info-panel {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: 12px;
  padding: 20px;
  opacity: 0;
}

.sh-mobile-info-panel.visible {
  animation: sh-slide-up 0.5s forwards;
}

.sh-mip-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sh-mip-step {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sh-border-light);
}

.sh-mip-step:last-child {
  border-bottom: none;
}

.sh-mip-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sh-primary-soft);
  color: var(--sh-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.sh-mip-step.active .sh-mip-num {
  background: var(--sh-primary);
  color: white;
}

.sh-mip-step.complete .sh-mip-num {
  background: var(--sh-success);
  color: white;
}

.sh-mip-step-text {
  font-size: 11px;
}

.sh-mip-step-title {
  font-weight: 600;
  margin-bottom: 2px;
}

.sh-mip-step-desc {
  color: var(--sh-text-secondary);
  font-size: 10px;
}

/* --- ANALYTICS SCENE (SCENE 3) --- */
.sh-analytics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 24px;
  height: 100%;
}

.sh-analytics-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sh-analytics-title {
  font-size: 18px;
  font-weight: 700;
}

.sh-analytics-tabs {
  display: flex;
  gap: 4px;
  background: var(--sh-surface-2);
  padding: 3px;
  border-radius: 7px;
  border: 1px solid var(--sh-border-light);
}

.sh-a-tab {
  padding: 5px 12px;
  font-size: 11px;
  border-radius: 5px;
  color: var(--sh-text-secondary);
  font-weight: 500;
}

.sh-a-tab.active {
  background: var(--sh-surface);
  color: var(--sh-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sh-heatmap-card,
.sh-waterfall-card,
.sh-transactions-card {
  background: var(--sh-surface);
  border: 1px solid var(--sh-border);
  border-radius: 10px;
  padding: 16px;
  opacity: 0;
}

.sh-heatmap-card.visible,
.sh-waterfall-card.visible,
.sh-transactions-card.visible {
  animation: sh-slide-up 0.5s forwards;
}

.sh-card-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.sh-card-h-title {
  font-size: 12px;
  font-weight: 700;
}

.sh-card-h-sub {
  font-size: 10px;
  color: var(--sh-text-tertiary);
}

.sh-heatmap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 3px;
  height: 160px;
}

.sh-heat-cell {
  background: var(--sh-primary-light);
  border-radius: 3px;
  opacity: 0;
  transition: all 0.3s;
}

.sh-heat-cell.visible {
  animation: sh-pop-in 0.3s forwards;
}

.sh-heat-cell.lvl-1 { background: #e8f0fe; }
.sh-heat-cell.lvl-2 { background: #b8d4f5; }
.sh-heat-cell.lvl-3 { background: #7ab5e8; }
.sh-heat-cell.lvl-4 { background: #3d96dc; }
.sh-heat-cell.lvl-5 { background: var(--sh-primary); }

.sh-heat-cell.pulse {
  animation: sh-heat-pulse 0.6s ease;
}

@keyframes sh-heat-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 10px rgba(0, 102, 204, 0.5); }
  100% { transform: scale(1); }
}

.sh-waterfall {
  height: 160px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 10px;
}

.sh-wf-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
}

.sh-wf-bar.visible {
  animation: sh-slide-up 0.5s forwards;
}

.sh-wf-bar-body {
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--sh-primary), var(--sh-primary-hover));
  border-radius: 4px 4px 0 0;
  transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.sh-wf-bar.grow .sh-wf-bar-body {
  height: var(--sh-wf-h, 80px);
}

.sh-wf-bar.negative .sh-wf-bar-body {
  background: linear-gradient(180deg, var(--sh-warning), #b45309);
}

.sh-wf-bar.positive .sh-wf-bar-body {
  background: linear-gradient(180deg, var(--sh-success), #047857);
}

.sh-wf-label {
  font-size: 10px;
  color: var(--sh-text-secondary);
  font-weight: 600;
  text-align: center;
}

.sh-wf-value {
  font-size: 9px;
  color: var(--sh-text-tertiary);
  font-weight: 700;
}

.sh-transactions-card {
  grid-column: 1 / -1;
}

.sh-txn-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 140px;
  overflow: hidden;
}

.sh-txn {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  padding: 10px 12px;
  background: var(--sh-surface-2);
  border-radius: 6px;
  align-items: center;
  opacity: 0;
  transform: translateX(-10px);
}

.sh-txn.visible {
  animation: sh-slide-up 0.3s forwards;
}

.sh-txn-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.sh-txn-icon.procure {
  background: var(--sh-primary-light);
  color: var(--sh-primary);
}

.sh-txn-icon.maint {
  background: var(--sh-warning-light);
  color: var(--sh-warning);
}

.sh-txn-icon.prod {
  background: var(--sh-success-light);
  color: var(--sh-success);
}

.sh-txn-title {
  font-size: 11px;
  font-weight: 600;
}

.sh-txn-meta {
  font-size: 10px;
  color: var(--sh-text-tertiary);
}

.sh-txn-amount {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sh-txn-amount.neg {
  color: var(--sh-warning);
}

.sh-txn-amount.pos {
  color: var(--sh-success);
}

.sh-txn-time {
  font-size: 10px;
  color: var(--sh-text-tertiary);
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
  .sapphire-hero-viz {
    padding: 20px 18px 48px;
  }

  .sh-topnav {
    padding: 12px 16px;
    gap: 10px;
  }

  .sh-topnav-tabs {
    gap: 3px;
    padding: 3px;
  }

  .sh-tab {
    padding: 7px 12px;
    font-size: 12px;
    gap: 6px;
  }

  .sh-demo-frame {
    border-radius: 18px;
  }
}

@media (max-width: 900px) {
  .sapphire-hero-viz {
    padding: 16px 12px 40px;
  }

  .sh-topnav {
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 18px;
  }

  .sh-topnav-brand {
    font-size: 14px;
    gap: 8px;
  }

  .sh-topnav-logo {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .sh-topnav-tabs {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sh-topnav-tabs::-webkit-scrollbar {
    display: none;
  }

  .sh-tab {
    flex: 0 0 auto;
    padding: 6px 10px;
    font-size: 12px;
  }

  .sh-topnav-status {
    margin-left: auto;
    font-size: 11px;
  }

  .sh-demo-frame {
    border-radius: 16px;
    box-shadow:
      0 32px 60px -24px rgba(0, 102, 204, 0.18),
      0 18px 32px -24px rgba(0, 0, 0, 0.18);
  }

  .sh-app-topbar {
    height: 58px;
    padding: 0 14px;
    gap: 12px;
  }

  .sh-brand-logo {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .sh-brand-name {
    font-size: 15px;
  }

  .sh-app-tabs {
    gap: 6px;
  }

  .sh-app-tab {
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
    gap: 6px;
  }

  .sh-page-head {
    gap: 10px;
  }

  .sh-page-title {
    font-size: 22px;
  }

  .sh-prop-grid,
  .sh-metrics {
    gap: 8px;
  }

  .sh-checklist {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .sapphire-hero-viz {
    padding: 12px 8px 28px;
  }

  .sh-topnav {
    padding: 10px 10px;
    gap: 8px;
    border-radius: 10px;
    margin-bottom: 14px;
  }

  .sh-topnav-brand {
    min-width: 0;
    font-size: 13px;
  }

  .sh-topnav-status {
    font-size: 10px;
    gap: 6px;
  }

  .sh-live-indicator {
    width: 7px;
    height: 7px;
  }

  .sh-topnav-tabs {
    padding: 3px;
    border-radius: 7px;
  }

  .sh-tab {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
  }

  .sh-tab-icon {
    font-size: 12px;
  }

  .sh-demo-frame {
    border-radius: 12px;
    aspect-ratio: 16 / 11;
  }

  .sh-scene-title {
    right: 10px;
    bottom: 6px;
    font-size: 10px;
    padding: 2px 8px;
  }

  .sh-app-topbar {
    height: 52px;
    padding: 0 10px;
    gap: 8px;
  }

  .sh-app-brand {
    gap: 8px;
  }

  .sh-brand-logo {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
  }

  .sh-brand-name {
    font-size: 13px;
  }

  .sh-app-tab {
    height: 30px;
    padding: 0 8px;
    font-size: 10px;
    gap: 5px;
  }

  .sh-nav-badge {
    font-size: 9px;
    padding: 2px 5px;
  }

  .sh-page-title {
    font-size: 18px;
  }

  .sh-page-sub {
    font-size: 11px;
  }

  .sh-card,
  .sh-metric-card,
  .sh-heatmap-card,
  .sh-waterfall-card,
  .sh-transactions-card {
    border-radius: 8px;
  }

  .sh-prop-grid,
  .sh-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .sh-prop-item,
  .sh-metric-card {
    padding: 10px;
  }

  .sh-metric-value {
    font-size: 16px;
  }

  .sh-phone {
    width: 200px;
    height: 408px;
    border-radius: 28px;
  }

  .sh-phone-screen {
    border-radius: 20px;
  }
}

@media (max-width: 420px) {
  .sapphire-hero-viz {
    padding: 10px 6px 24px;
  }

  .sh-topnav {
    padding: 8px;
    margin-bottom: 12px;
  }

  .sh-topnav-brand {
    font-size: 12px;
    gap: 6px;
  }

  .sh-topnav-logo {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .sh-tab {
    padding: 5px 8px;
    font-size: 11px;
    gap: 5px;
  }

  .sh-demo-frame {
    border-radius: 10px;
  }

  .sh-prop-grid,
  .sh-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .sh-phone {
    width: 184px;
    height: 376px;
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sapphire-hero-viz *,
  .sapphire-hero-viz *::before,
  .sapphire-hero-viz *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sh-live-indicator,
  .sh-heat-cell.pulse,
  .sh-wf-bar-body,
  .sh-notification,
  .sh-prop-item,
  .sh-metric-card,
  .sh-phone {
    animation: none !important;
    transition: none !important;
  }
}



/* Inventory stage */
.sh-main{
  position:relative;
  overflow:hidden;
}

.sh-dashboard-exit{
  opacity:0 !important;
  transform:translateY(-22px) scale(.985);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}

.sh-dashboard-hidden{
  pointer-events:none;
  visibility:hidden;
}

.sh-inv-stage{
  position:absolute;
  inset:20px 20px 20px 20px;
  opacity:0;
  pointer-events:none;
}

.sh-inv-stage.is-active{
  opacity:1;
  pointer-events:auto;
}

.sh-inv-screen{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.sh-inv-screen.is-active{
  opacity:1;
  pointer-events:auto;
}

.sh-inv-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}

.sh-inv-page-kicker{
  margin-bottom:10px;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0, 0, 0, 0.7);
}

.sh-inv-page-title{
  margin:0;
  font-size:34px;
  line-height:.98;
  letter-spacing:-.04em;
  font-weight:800;
  color:#0066cc;
}

.sh-inv-live-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(135, 190, 255, 0.34);
  background:
    linear-gradient(
      135deg,
      #0f74dc 0%,
      #0066cc 42%,
      #0058b8 72%,
      #004b9c 100%
    );
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10),
    0 8px 18px rgba(0, 64, 140, 0.22),
    0 2px 6px rgba(0, 40, 90, 0.18);
}

.sh-inv-live-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(180deg, #34d399 0%, #16a34a 100%);
  box-shadow:
    0 0 0 0 rgba(34, 197, 94, 0.46),
    0 0 10px rgba(34, 197, 94, 0.20);
  animation: sh-inv-pulse 1.8s infinite;
}
.sh-inv-card-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.sh-inv-card{
  min-height:390px;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(151,190,222,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  overflow:hidden;
  opacity:0;
  transform:translateY(20px) scale(.985);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

.sh-inv-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.sh-inv-card-media{
  position:relative;
  height:220px;
  border-radius:18px;
  overflow:hidden;
  background:#12273a;
}

.sh-inv-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.04);
  filter:brightness(.88) saturate(.95);
}

.sh-inv-card-float{
  position:absolute;
  left:16px;
  right:16px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(8,19,29,.78);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  backdrop-filter:blur(12px);
}

.sh-inv-card-float-label{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(224,238,250,.48);
}

.sh-inv-card-body{
  padding-top:18px;
}

.sh-inv-card-label{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(224,238,250,.42);
}

.sh-inv-card-title{
  margin:0;
  font-size:24px;
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:800;
  color:#edf6ff;
}

.sh-inv-card-title--wide{
  font-size:21px;
}

.sh-inv-bento{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1.05fr;
  grid-template-rows:repeat(2, minmax(180px, 1fr));
  gap:16px;
  height:calc(100% - 84px);
  position:relative;
}

.sh-inv-bento-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(151,190,222,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  opacity:0;
  transform:translateY(20px) scale(.985);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}

.sh-inv-bento-card.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

.sh-inv-bento-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.82) saturate(.95);
}

.sh-inv-bento-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(4,12,19,.08), rgba(4,12,19,.24) 32%, rgba(4,12,19,.88) 100%);
}

.sh-inv-bento-content{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:2;
}

.sh-inv-bento-content--plain{
  bottom:18px;
}

.sh-inv-bento-label{
  margin:0 0 6px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(224,238,250,.5);
}

.sh-inv-bento-title{
  margin:0;
  font-size:24px;
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:800;
  color:#edf6ff;
}

.sh-inv-bento {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(180px, 1fr));
  gap: 16px;
  position: static;
}

.sh-inv-bento-card--vehicles   { grid-column: 1; grid-row: 1 / span 3; }
.sh-inv-bento-card--tools      { grid-column: 2; grid-row: 1; }
.sh-inv-bento-card--toolkits   { grid-column: 3; grid-row: 1; }
.sh-inv-bento-card--materials  { grid-column: 2; grid-row: 2; }
.sh-inv-bento-card--machinery  { grid-column: 3; grid-row: 2; }
.sh-inv-bento-card--assembly   { grid-column: 2; grid-row: 3; }
.sh-inv-bento-card--blends     { grid-column: 3; grid-row: 3; }

.sh-inv-screen-shift-in{
  animation:sh-inv-screen-in .9s cubic-bezier(.16,1,.3,1) forwards;
}

.sh-inv-screen-shift-out{
  animation:sh-inv-screen-out .85s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes sh-inv-pulse{
  0%{box-shadow:0 0 0 0 rgba(53,208,140,.44)}
  70%{box-shadow:0 0 0 10px rgba(53,208,140,0)}
  100%{box-shadow:0 0 0 0 rgba(53,208,140,0)}
}

@keyframes sh-inv-screen-in{
  0%{opacity:0;transform:translateX(44px) scale(.985)}
  100%{opacity:1;transform:translateX(0) scale(1)}
}

@keyframes sh-inv-screen-out{
  0%{opacity:1;transform:translateX(0) scale(1)}
  100%{opacity:0;transform:translateX(-44px) scale(.985)}
}

/* ============================================
   INVENTORY TABLE SCREEN
   ============================================ */
.sh-inv-screen--table{
  inset:0;
}

.sh-inv-table-wrap{
  height:calc(100% - 86px);
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(0,102,204,.28);
  background:#f5f5f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
}

/* ---- Custom pills for inventory table (no s-pill involvement) ---- */
.sh-inv-pill{
  display:inline-block;
  padding:3px 9px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  line-height:1.6;
  border-width:1px;
  border-style:solid;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.sh-inv-pill--primary { background: linear-gradient(180deg, #0f74dc 0%, #0066cc 100%); color: #ffffff; border-color: #3399ff; }
.sh-inv-pill--success { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); color: #ffffff; border-color: #4ade80; }
.sh-inv-pill--success-soft { background: linear-gradient(180deg, #84cc16 0%, #65a30d 100%); color: #f7fee7; border-color: #a3e635; }
.sh-inv-pill--danger { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); color: #ffffff; border-color: #f87171; }
.sh-inv-pill--warning { background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%); color: #ffffff; border-color: #facc15; }
.sh-inv-pill--amber { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); color: #fff7ed; border-color: #fbbf24; }
.sh-inv-pill--attention { background: linear-gradient(180deg, #f97316 0%, #ea580c 100%); color: #ffffff; border-color: #fb923c; }
.sh-inv-pill--info { background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%); color: #ecfeff; border-color: #22d3ee; }
.sh-inv-pill--info-special { background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%); color: #f0fdfa; border-color: #2dd4bf; }
.sh-inv-pill--royal { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); color: #f5f3ff; border-color: #a78bfa; }
.sh-inv-pill--royal-soft { background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 100%); color: #3b0764; border-color: #ddd6fe; }
.sh-inv-pill--pop { background: linear-gradient(180deg, #f472b6 0%, #ec4899 100%); color: #fff1f7; border-color: #f9a8d4; }
.sh-inv-pill--purple { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); color: #faf5ff; border-color: #a78bfa; }
.sh-inv-pill--indigo { background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); color: #eef2ff; border-color: #818cf8; }
.sh-inv-pill--dark { background: linear-gradient(180deg, #475569 0%, #334155 100%); color: #f8fafc; border-color: #64748b; }
.sh-inv-pill--black { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #f8fafc; border-color: #334155; }

/* Condition pills: 132px width to fit "Under Maintenance" */
.sh-inv-pill.sh-inv-condition-pill{width:132px;text-align:center;}
/* Status pills: 96px width to fit "Unavailable" */
.sh-inv-pill.sh-inv-status-pill{width:96px;text-align:center;}


.sh-inv-table{
  width:100%;
  min-width:1200px;
  border-collapse:separate;
  border-spacing:0;
  font-size:12.5px;
}

.sh-inv-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:10px 10px;
  text-align:left;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#ffffff;
  background:linear-gradient(180deg, #0b74de 0%, #0066cc 100%);
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(0,102,204,.5);
  white-space:nowrap;
}

.sh-inv-table thead th:last-child{border-right:none;}

.sh-inv-table tbody td{
  padding:8px 10px;
  vertical-align:middle;
  border-right:1px solid rgba(0,102,204,.2);
  border-bottom:1px solid rgba(0,102,204,.18);
  color:#111111;
  white-space:nowrap;
}

.sh-inv-table tbody td:last-child{border-right:none;}

.sh-inv-table tbody tr:nth-child(odd){background:#f5f7fa;}
.sh-inv-table tbody tr:nth-child(even){background:rgba(154, 204, 253, 0.425);}

.sh-inv-table tbody tr{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
.sh-inv-table tbody tr.is-visible{opacity:1;transform:translateY(0);}

.sh-inv-table tbody tr:hover{background:rgba(0,102,204,.1);}

.sh-inv-table tbody tr.sh-row-discarded{
  background:rgba(179,0,0,.08);
  animation:sh-row-discard-out .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes sh-row-discard-out{
  0%{opacity:1;transform:translateX(0);}
  100%{opacity:0;transform:translateX(-80px);}
}

.sh-inv-table td:nth-child(2){min-width:180px;font-weight:700;}
.sh-inv-table td:nth-child(6){min-width:140px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;letter-spacing:.03em;}

/* ========================================
   LIVE ACTIONS
   ======================================== */

.sh-act-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,25,47,.72);
  backdrop-filter:blur(3px);
  z-index:49;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  border-radius:inherit;
}
.sh-act-backdrop.is-active{opacity:1;}

.sh-row-focus{
  position:relative;
  z-index:50;
  background:rgba(0,102,204,.22) !important;
  outline:2px solid rgba(0,102,204,.6);
  outline-offset:-2px;
}
.sh-row-dimmed{opacity:.38;}

@keyframes sh-pill-flipping{
  0%{transform:rotateX(0deg) scale(1);filter:blur(0);}
  50%{transform:rotateX(90deg) scale(.85);filter:blur(2px);}
  100%{transform:rotateX(0deg) scale(1);filter:blur(0);}
}
.sh-pill-flipping{animation:sh-pill-flipping .52s ease-in-out forwards;}

@keyframes sh-qty-flash{
  0%{background:inherit;}
  30%{background:rgba(255,189,46,.55);}
  100%{background:inherit;}
}
.sh-qty-flash{animation:sh-qty-flash .9s ease forwards;}

@keyframes sh-row-discarding{
  0%{transform:scaleY(1);opacity:1;max-height:52px;padding:8px 10px;}
  60%{transform:scaleY(1);opacity:.6;max-height:52px;padding:8px 10px;}
  100%{transform:scaleY(0);opacity:0;max-height:0;padding:0 10px;}
}
.sh-row-discarding{
  animation:sh-row-discarding .75s ease-in forwards;
  transform-origin:top center;
  overflow:hidden;
}

.sh-act-card{
  position:absolute;
  top:44%;
  left:50%;
  transform:translate(-50%,-50%) scale(.72);
  width:380px;
  background:#fff;
  border-radius:14px;
  z-index:100;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.25);
  font-family:inherit;
  overflow:hidden;
  opacity:0;
  transition:opacity .2s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.sh-act-card.is-active{opacity:1;transform:translate(-50%,-50%) scale(1);}

.sh-act-card-bar--primary{height:6px;background:linear-gradient(90deg,#0055cc,#0088ff);}
.sh-act-card-bar--success{height:6px;background:linear-gradient(90deg,#1a7a3a,#28b566);}
.sh-act-card-bar--danger{height:6px;background:linear-gradient(90deg,#b30000,#e00000);}
.sh-act-card-bar--warning{height:6px;background:linear-gradient(90deg,#c47a00,#ffaa00);}

.sh-act-card-icon--primary{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#0055cc,#0088ff);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sh-act-card-icon--success{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#1a7a3a,#28b566);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sh-act-card-icon--danger{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#b30000,#e00000);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sh-act-card-icon--warning{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#c47a00,#ffaa00);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sh-act-card-bar--pop{height:6px;background:linear-gradient(90deg,#db2777,#f472b6);}
.sh-act-card-icon--pop{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#db2777,#f472b6);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.sh-act-card-head{
  padding:16px 20px 10px;
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid #e8eef5;
}
.sh-act-card-title{
  font-size:16px;
  font-weight:700;
  color:#0a192f;
  line-height:1.3;
  flex:1;
}
.sh-act-card-headline{
  font-size:11.5px;
  color:#6a7d8e;
  margin-top:3px;
  font-weight:400;
}

.sh-act-item-row{
  display:flex;
  align-items:center;
  padding:10px 20px;
  gap:12px;
  border-bottom:1px solid #f0f4fa;
}
.sh-act-item-label{font-size:11px;color:#8a9bab;font-weight:600;text-transform:uppercase;letter-spacing:.06em;min-width:60px;}
.sh-act-item-value{font-size:13.5px;color:#0a192f;font-weight:700;}

.sh-act-state-row{
  display:flex;
  align-items:center;
  padding:10px 20px;
  gap:12px;
  background:#f5f8fc;
  border-bottom:1px solid #e8eef5;
}
.sh-act-state-label{font-size:11px;color:#6a7d8e;font-weight:600;text-transform:uppercase;letter-spacing:.06em;min-width:60px;}
.sh-act-state-value{font-size:13.5px;color:#0a192f;font-weight:700;}

.sh-act-confirm{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  gap:10px;
  background:#f5f8fc;
}
.sh-act-btn{
  flex:1;
  padding:10px 16px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:700;
  border:none;
  cursor:pointer;
  transition:filter .15s, transform .1s;
  font-family:inherit;
  text-align:center;
}
.sh-act-btn:hover{filter:brightness(.92);}
.sh-act-btn:active{transform:scale(.97);}
.sh-act-btn--cancel{
  background:#e8edf2;
  color:#3a4a5c;
}
.sh-act-btn--primary{
  background:linear-gradient(135deg,#0055cc,#0088ff);
  color:#fff;
}
.sh-act-btn--success{
  background:linear-gradient(135deg,#1a7a3a,#28b566);
  color:#fff;
}
.sh-act-btn--danger{
  background:linear-gradient(135deg,#b30000,#e00000);
  color:#fff;
}
.sh-act-btn--warning{
  background:linear-gradient(135deg,#c47a00,#ffaa00);
  color:#fff;
}

.sh-act-cost-block{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 20px;
  background:#f5f8fc;
  border-top:1px solid #e8eef5;
  gap:6px;
  font-size:12px;
  color:#6a7d8e;
}
.sh-act-cost-label{font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.sh-act-cost-value{font-weight:700;font-size:15px;color:#0a192f;}

.sh-act-log-line{
  display:flex;
  align-items:center;
  padding:9px 20px;
  gap:14px;
  border-bottom:1px solid #f0f4fa;
  font-size:12.5px;
  color:#2c3a4a;
}
.sh-act-log-line:hover{background:#f5f8fc;}
.sh-act-log-time{color:#8a9bab;font-weight:600;min-width:42px;font-size:11.5px;}
.sh-act-log-label{color:#0055cc;font-weight:600;min-width:96px;}
.sh-act-log-val{color:#6a7d8e;margin-left:auto;font-weight:700;font-size:11.5px;letter-spacing:.04em;}

.sh-act-replace-row{display:flex;align-items:center;padding:10px 20px;gap:12px;}
.sh-act-replace-label{font-size:11px;color:#8a9bab;font-weight:600;text-transform:uppercase;letter-spacing:.06em;min-width:60px;}
.sh-act-replace-val{font-size:13px;color:#0a192f;font-weight:600;}

/* ============================================================
   REQUESTS TAB — LIGHT ERP STYLE
   ============================================================ */

.sh-req-stage{
  position:absolute;
  inset:12px 16px 14px;
  opacity:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.sh-req-stage.is-active{
  opacity:1;
  pointer-events:auto;
}

.sh-req-stage-exit{
  opacity:0 !important;
  transform:translateY(-18px) scale(.985);
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}

.sh-rep-stage-enter{
  animation:sh-rep-stage-in .55s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes sh-rep-stage-in{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.985);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.sh-req-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  flex-shrink:0;
}

.sh-req-page-kicker{
  margin:0 0 4px;
  font-size:11px;
  font-weight:600;
  color:var(--sh-text-tertiary);
  letter-spacing:.01em;
  text-transform:none;
}

.sh-req-page-title{
  margin:0;
  font-size:18px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--sh-text-primary);
}

.sh-req-live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:30px;
  padding:0 12px;
  border:1px solid var(--sh-border);
  border-radius:999px;
  background:var(--sh-surface);
  color:var(--sh-text-secondary);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(15, 23, 42, 0.04);
}

.sh-req-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sh-success);
  box-shadow:0 0 0 4px rgba(5, 150, 105, 0.10);
}

.sh-req-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  align-content:start;
}

.sh-req-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:16px 16px 14px;
  border:1px solid var(--sh-border);
  border-left:4px solid var(--sh-primary);
  border-radius:14px;
  background:var(--sh-surface);
  box-shadow:0 2px 8px rgba(15, 23, 42, 0.04);
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity .45s cubic-bezier(.16,1,.3,1),
    transform .45s cubic-bezier(.16,1,.3,1),
    box-shadow .25s ease,
    border-color .25s ease,
    border-left-color .25s ease;
  overflow:hidden;
}

.sh-req-card.is-visible{
  opacity:1;
  transform:translateY(0);
}

.sh-req-card:hover{
  border-color:#d8e2ee;
  border-left-color:var(--sh-primary);
  box-shadow:0 8px 24px rgba(15, 23, 42, 0.08);
}

.sh-req-card.is-accepted{
  border-left-color:var(--sh-success);
}

.sh-req-card.is-rejected{
  border-left-color:var(--sh-danger);
}

.sh-req-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}

.sh-req-type{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:24px;
  padding:0 9px 0 7px;
  border-radius:999px;
  background:#eff6ff;
  color:var(--sh-primary);
  font-size:10px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}

.sh-req-type-icon{
  width:12px;
  height:12px;
  flex-shrink:0;
}

.sh-req-time{
  font-size:11px;
  color:var(--sh-text-tertiary);
  white-space:nowrap;
}

.sh-req-asset{
  margin:0 0 3px;
  font-size:15px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--sh-text-primary);
}

.sh-req-code{
  display:inline-block;
  margin-bottom:10px;
  padding:2px 8px;
  border:1px solid var(--sh-border-light);
  border-radius:6px;
  background:var(--sh-surface-2);
  font-size:11px;
  font-weight:700;
  color:var(--sh-text-secondary);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

.sh-req-meta{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:14px;
}

.sh-req-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.sh-req-meta-row span{
  font-size:11px;
  font-weight:600;
  color:var(--sh-text-tertiary);
  text-transform:none;
  flex-shrink:0;
}

.sh-req-meta-row strong{
  font-size:12px;
  font-weight:600;
  color:var(--sh-text-primary);
  text-align:right;
}

.sh-req-actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:auto;
}

.sh-req-btn{
  flex:1;
  height:34px;
  border-radius:8px;
  border:1px solid var(--sh-border);
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

.sh-req-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15, 23, 42, 0.1);
}

.sh-req-btn:active{
  transform:translateY(0);
  box-shadow:none;
}

.sh-req-btn-accept{
  background:#ecfdf3;
  border-color:#ccefdc;
  color:#0f8a5f;
}

.sh-req-btn-accept:hover{
  background:#d8f9e6;
  border-color:#a8dbc4;
}

.sh-req-btn-reject{
  background:#fff4f4;
  border-color:#f3d2d2;
  color:#c24141;
}

.sh-req-btn-reject:hover{
  background:#fee8e8;
  border-color:#e8b8b8;
}

.sh-req-btn:disabled{
  opacity:.55;
  cursor:default;
  pointer-events:none;
}

.sh-req-result{
  display:none;
  align-items:center;
  justify-content:center;
  height:38px;
  margin-top:auto;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
}

.sh-req-card.is-accepted .sh-req-result{
  display:flex;
  background:#ecfdf3;
  color:#0f8a5f;
  border:1px solid #ccefdc;
}

.sh-req-card.is-rejected .sh-req-result{
  display:flex;
  background:#fff4f4;
  color:#c24141;
  border:1px solid #f3d2d2;
}

.sh-req-card.is-accepted .sh-req-actions,
.sh-req-card.is-rejected .sh-req-actions{
  display:none;
}

/* REPORTS TAB — SEPARATE PREFIX, NO sh-inv-* REUSE */
.sh-rep-stage{
  position:absolute;
  inset:12px 16px 14px;
  opacity:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.sh-rep-stage.is-active{
  opacity:1;
  pointer-events:auto;
}

.sh-rep-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  flex-shrink:0;
}

.sh-rep-page-kicker{
  margin:0 0 4px;
  font-size:11px;
  font-weight:600;
  color:var(--sh-text-tertiary);
  letter-spacing:.01em;
}

.sh-rep-page-title{
  margin:0;
  font-size:18px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--sh-text-primary);
}

.sh-rep-live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:30px;
  padding:0 12px;
  border:1px solid var(--sh-border);
  border-radius:999px;
  background:var(--sh-surface);
  color:var(--sh-text-secondary);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.sh-rep-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sh-success);
  box-shadow:0 0 0 4px rgba(5,150,105,.10);
}

.sh-rep-table-shell{
  flex:1;
  min-height:0;
  overflow:hidden;
}

.sh-rep-table-wrap{
  height:calc(100% - 0px);
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(0,102,204,.28);
  background:#f5f5f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
}

.sh-rep-table-wrap .sh-act-card{
  top:44%;
}

.sh-rep-table-wrap .sh-act-card .sh-act-btn--success{
  background:linear-gradient(135deg,#1a7a3a,#28b566);
  color:#fff;
}

/* ---- Custom pills for reports table ---- */
.sh-rep-pill{
  display:inline-block;
  padding:3px 9px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  line-height:1.6;
  border-width:1px;
  border-style:solid;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.sh-rep-pill--primary { background: linear-gradient(180deg, #0f74dc 0%, #0066cc 100%); color: #ffffff; border-color: #3399ff; }
.sh-rep-pill--success { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); color: #ffffff; border-color: #4ade80; }
.sh-rep-pill--success-soft { background: linear-gradient(180deg, #84cc16 0%, #65a30d 100%); color: #f7fee7; border-color: #a3e635; }
.sh-rep-pill--danger { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); color: #ffffff; border-color: #f87171; }
.sh-rep-pill--warning { background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%); color: #ffffff; border-color: #facc15; }
.sh-rep-pill--amber { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); color: #fff7ed; border-color: #fbbf24; }
.sh-rep-pill--attention { background: linear-gradient(180deg, #f97316 0%, #ea580c 100%); color: #ffffff; border-color: #fb923c; }
.sh-rep-pill--info { background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%); color: #ecfeff; border-color: #22d3ee; }
.sh-rep-pill--info-special { background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%); color: #f0fdfa; border-color: #2dd4bf; }
.sh-rep-pill--royal { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); color: #f5f3ff; border-color: #a78bfa; }
.sh-rep-pill--royal-soft { background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 100%); color: #3b0764; border-color: #ddd6fe; }
.sh-rep-pill--pop { background: linear-gradient(180deg, #f472b6 0%, #ec4899 100%); color: #fff1f7; border-color: #f9a8d4; }
.sh-rep-pill--purple { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); color: #faf5ff; border-color: #a78bfa; }
.sh-rep-pill--indigo { background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); color: #eef2ff; border-color: #818cf8; }
.sh-rep-pill--dark { background: linear-gradient(180deg, #475569 0%, #334155 100%); color: #f8fafc; border-color: #64748b; }
.sh-rep-pill--black { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #f8fafc; border-color: #334155; }

/* Condition pills */
.sh-rep-pill.sh-rep-condition-pill{width:132px;text-align:center;}
/* Status pills */
.sh-rep-pill.sh-rep-status-pill{width:96px;text-align:center;}

.sh-rep-table{
  width:100%;
  min-width:1200px;
  border-collapse:separate;
  border-spacing:0;
  font-size:12.5px;
}

.sh-rep-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:10px 10px;
  text-align:left;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#ffffff;
  background:linear-gradient(180deg, #0b74de 0%, #0066cc 100%);
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(0,102,204,.5);
  white-space:nowrap;
}

.sh-rep-table thead th:last-child{
  border-right:none;
}

.sh-rep-table tbody td{
  padding:8px 10px;
  vertical-align:middle;
  border-right:1px solid rgba(0,102,204,.2);
  border-bottom:1px solid rgba(0,102,204,.18);
  color:#111111;
  white-space:nowrap;
}

.sh-rep-table tbody td:last-child{
  border-right:none;
}

.sh-rep-table tbody tr:nth-child(odd){
  background:#f5f7fa;
}

.sh-rep-table tbody tr:nth-child(even){
  background:rgba(154, 204, 253, 0.425);
}

.sh-rep-table tbody tr{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}

.sh-rep-table tbody tr.is-visible{
  opacity:1;
  transform:translateY(0);
}

.sh-rep-table tbody tr:hover{
  background:rgba(0,102,204,.1);
}

.sh-rep-table tbody tr.sh-row-discarded{
  background:rgba(179,0,0,.10) !important;
  animation:sh-rep-row-discard-out .62s cubic-bezier(.16,1,.3,1) forwards;
  transform-origin:center;
}

@keyframes sh-rep-row-discard-out{
  0%{
    opacity:1;
    transform:translateX(0);
    filter:blur(0);
  }
  30%{
    opacity:1;
    transform:translateX(14px);
  }
  100%{
    opacity:0;
    transform:translateX(-120px);
    filter:blur(1px);
  }
}

.sh-rep-table td strong{
  color:#111111;
  font-weight:700;
}

.sh-rep-table td:nth-child(2){
  min-width:180px;
  font-weight:700;
}

.sh-rep-table td:nth-child(5){
  min-width:140px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing:.03em;
}


/* ============================================================
   SH-INSP — Inspections Table Stage
   Mirrors sh-rep / sh-inv table pattern. Page-scoped prefix: sh-insp
   ============================================================ */

.sh-insp-stage {
  position: absolute;
  inset: 12px 16px 14px;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sh-insp-stage.is-active {
  opacity: 1;
  pointer-events: auto;
}
.sh-insp-stage-enter {
  animation: sh-insp-stage-in .55s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes sh-insp-stage-in {
  0%   { opacity:0; transform:translateY(18px) scale(.985); }
  100% { opacity:1; transform:translateY(0)    scale(1); }
}

.sh-insp-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.sh-insp-page-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sh-text-tertiary);
  letter-spacing: .01em;
}
.sh-insp-page-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sh-text-primary);
}
.sh-insp-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--sh-border);
  border-radius: 999px;
  background: var(--sh-surface);
  color: var(--sh-text-secondary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.sh-insp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sh-success);
  box-shadow: 0 0 0 4px rgba(5,150,105,.10);
}

/* ---- Table shell ---- */
.sh-insp-table-shell {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(0,102,204,.28);
  background: #f5f5f5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
}
.sh-insp-table-wrap {
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* ---- Pills ---- */
.sh-insp-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.6;
  border-width: 1px;
  border-style: solid;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.sh-insp-pill--primary      { background:linear-gradient(180deg,#0f74dc 0%,#0066cc 100%); color:#fff;    border-color:#3399ff; }
.sh-insp-pill--success      { background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%); color:#fff;    border-color:#4ade80; }
.sh-insp-pill--success-soft { background:linear-gradient(180deg,#84cc16 0%,#65a30d 100%); color:#f7fee7; border-color:#a3e635; }
.sh-insp-pill--danger       { background:linear-gradient(180deg,#ef4444 0%,#dc2626 100%); color:#fff;    border-color:#f87171; }
.sh-insp-pill--warning      { background:linear-gradient(180deg,#eab308 0%,#ca8a04 100%); color:#fff;    border-color:#facc15; }
.sh-insp-pill--amber        { background:linear-gradient(180deg,#f59e0b 0%,#d97706 100%); color:#fff7ed; border-color:#fbbf24; }
.sh-insp-pill--attention    { background:linear-gradient(180deg,#f97316 0%,#ea580c 100%); color:#fff;    border-color:#fb923c; }
.sh-insp-pill--info         { background:linear-gradient(180deg,#06b6d4 0%,#0891b2 100%); color:#ecfeff; border-color:#22d3ee; }
.sh-insp-pill--info-special { background:linear-gradient(180deg,#14b8a6 0%,#0d9488 100%); color:#f0fdfa; border-color:#2dd4bf; }
.sh-insp-pill--royal        { background:linear-gradient(180deg,#8b5cf6 0%,#7c3aed 100%); color:#f5f3ff; border-color:#a78bfa; }
.sh-insp-pill--royal-soft   { background:linear-gradient(180deg,#c4b5fd 0%,#a78bfa 100%); color:#3b0764; border-color:#ddd6fe; }
.sh-insp-pill--pop          { background:linear-gradient(180deg,#f472b6 0%,#ec4899 100%); color:#fff1f7; border-color:#f9a8d4; }
.sh-insp-pill--indigo       { background:linear-gradient(180deg,#6366f1 0%,#4f46e5 100%); color:#eef2ff; border-color:#818cf8; }
.sh-insp-pill--dark         { background:linear-gradient(180deg,#475569 0%,#334155 100%); color:#f8fafc; border-color:#64748b; }
.sh-insp-pill--black        { background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%); color:#f8fafc; border-color:#334155; }

.sh-insp-pill.sh-insp-condition-pill { width:132px; text-align:center; }
.sh-insp-pill.sh-insp-status-pill    { width:96px;  text-align:center; }

/* ---- Table ---- */
.sh-insp-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.sh-insp-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(180deg,#0b74de 0%,#0066cc 100%);
  border-right: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(0,102,204,.5);
  white-space: nowrap;
}
.sh-insp-table thead th:last-child { border-right: none; }
.sh-insp-table tbody td {
  padding: 8px 10px;
  vertical-align: middle;
  border-right: 1px solid rgba(0,102,204,.2);
  border-bottom: 1px solid rgba(0,102,204,.18);
  color: #111111;
  white-space: nowrap;
}
.sh-insp-table tbody td:last-child { border-right: none; }
.sh-insp-table tbody tr:nth-child(odd)  { background: #f5f7fa; }
.sh-insp-table tbody tr:nth-child(even) { background: rgba(154,204,253,0.425); }
.sh-insp-table tbody tr {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
.sh-insp-table tbody tr.is-visible { opacity:1; transform:translateY(0); }
.sh-insp-table tbody tr:hover       { background:rgba(0,102,204,.1); }
.sh-insp-table tbody tr.sh-row-discarded {
  background: rgba(179,0,0,.08);
  animation: sh-row-discard-out .5s cubic-bezier(.16,1,.3,1) forwards;
}
.sh-insp-table td:nth-child(1) { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; letter-spacing:.03em; }
.sh-insp-table td:nth-child(2) { min-width:180px; font-weight:700; }
.sh-insp-table td:nth-child(4) { min-width:140px; }

/* ---- Inspection splash card (Step 1) — primary bar ---- */
.sh-insp-card {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.72);
  width: 380px;
  background: #fff;
  border-radius: 14px;
  z-index: 100;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.25);
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  font-family: inherit;
}
.sh-insp-card.is-active {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
.sh-insp-card-bar {
  height: 6px;
  background: linear-gradient(90deg,#0055cc,#0088ff);
}
.sh-insp-card-head {
  padding: 16px 20px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #e8eef5;
}
.sh-insp-card-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg,#0055cc,#0088ff);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sh-insp-card-title    { font-size:16px; font-weight:700; color:#0a192f; line-height:1.3; flex:1; }
.sh-insp-card-headline { font-size:11.5px; color:#6a7d8e; margin-top:3px; font-weight:400; }
.sh-insp-meta-row {
  display: flex; align-items: center;
  padding: 9px 20px; gap: 12px;
  border-bottom: 1px solid #f0f4fa;
}
.sh-insp-meta-label { font-size:11px; color:#8a9bab; font-weight:600; text-transform:uppercase; letter-spacing:.06em; min-width:72px; }
.sh-insp-meta-value { font-size:13.5px; color:#0a192f; font-weight:700; }
.sh-insp-card-actions {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 20px; gap: 10px;
  background: #f5f8fc;
}
.sh-insp-btn {
  flex: 1; padding: 10px 16px;
  border-radius: 8px; font-size:13.5px; font-weight:700;
  border: none; cursor: pointer;
  transition: filter .15s, transform .1s;
  font-family: inherit; text-align: center;
}
.sh-insp-btn:hover  { filter:brightness(.92); }
.sh-insp-btn:active { transform:scale(.97); }
.sh-insp-btn--cancel  { background:#e8edf2; color:#3a4a5c; }
.sh-insp-btn--primary { background:linear-gradient(135deg,#0055cc,#0088ff); color:#fff; }
.sh-insp-btn--success { background:linear-gradient(135deg,#1a7a3a,#28b566); color:#fff; }

/* ---- Checkpoint card (Step 2) — wider ---- */
.sh-insp-check-card {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.72);
  width: 440px;
  background: #fff;
  border-radius: 14px;
  z-index: 100;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.25);
  overflow: hidden;
  opacity: 0;
  transition: opacity .2s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
  font-family: inherit;
}
.sh-insp-check-card.is-active {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}
.sh-insp-check-card-bar {
  height: 6px;
  background: linear-gradient(90deg,#1a7a3a,#28b566);
}
.sh-insp-check-card-head {
  padding: 14px 20px 10px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid #e8eef5;
}
.sh-insp-check-card-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,#1a7a3a,#28b566);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sh-insp-check-card-title    { font-size:15px; font-weight:700; color:#0a192f; flex:1; }
.sh-insp-check-card-subtitle { font-size:11px; color:#6a7d8e; margin-top:2px; }
.sh-insp-checklist-body {
  padding: 10px 0;
  max-height: 280px;
  overflow: hidden;
}
.sh-insp-check-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 20px;
  border-bottom: 1px solid #f0f4fa;
  font-size: 12.5px; color: #2c3a4a;
  cursor: default;
}
.sh-insp-check-item:last-child { border-bottom: none; }
.sh-insp-checkbox {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 2px solid #c5d2de;
  background: #fff;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.sh-insp-checkbox.is-checked {
  background: #0066cc;
  border-color: #0066cc;
}
.sh-insp-checkbox.is-checked::after {
  content: '';
  display: block;
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}
.sh-insp-check-card-actions {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 20px; gap: 10px;
  background: #f5f8fc;
  border-top: 1px solid #e8eef5;
}

/* ---- Backdrop ---- */
.sh-insp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,25,47,.72);
  backdrop-filter: blur(3px);
  z-index: 49;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  border-radius: inherit;
}
.sh-insp-backdrop.is-active { opacity:1; }

/* ---- Row focus / dim ---- */
.sh-insp-table tbody tr.sh-insp-row-focus {
  position: relative;
  z-index: 50;
  background: rgba(0,102,204,.22) !important;
  outline: 2px solid rgba(0,102,204,.6);
  outline-offset: -2px;
}
.sh-insp-table tbody tr.sh-insp-row-dimmed { opacity: .38; }

@keyframes sh-insp-pill-flip {
  0% {
    transform: rotateX(0deg) scale(1);
    filter: blur(0);
  }

  50% {
    transform: rotateX(90deg) scale(0.85);
    filter: blur(2px);
  }

  100% {
    transform: rotateX(0deg) scale(1);
    filter: blur(0);
  }
}

.sh-insp-pill-flipping {
  animation: sh-insp-pill-flip 0.52s ease-in-out forwards;
}
/* ---- Stage exit animations ---- */
.sh-rep-stage-exit {
  opacity: 0 !important;
  transform: translateY(-18px) scale(.985);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}

.sh-insp-stage-exit {
  opacity: 0 !important;
  transform: translateY(-18px) scale(.985);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}

/* =========================
   MAINTENANCE STAGE / TABLE
   ========================= */

.sh-maint-stage{
  position:absolute;
  inset:12px 16px 14px;
  opacity:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.sh-maint-stage.is-active{
  opacity:1;
  pointer-events:auto;
}

.sh-maint-stage-enter{
  animation:sh-maint-stage-in .55s cubic-bezier(.16,1,.3,1) forwards;
}

.sh-maint-stage-exit{
  opacity:0 !important;
  transform:translateY(-18px) scale(.985);
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}

@keyframes sh-maint-stage-in{
  0%{opacity:0;transform:translateY(18px) scale(.985);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

.sh-maint-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
  flex-shrink:0;
}

.sh-maint-page-kicker{
  margin:0 0 4px;
  font-size:11px;
  font-weight:600;
  color:var(--sh-text-tertiary);
  letter-spacing:.01em;
}

.sh-maint-page-title{
  margin:0;
  font-size:18px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--sh-text-primary);
}

.sh-maint-live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:30px;
  padding:0 12px;
  border:1px solid var(--sh-border);
  border-radius:999px;
  background:var(--sh-surface);
  color:var(--sh-text-secondary);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

.sh-maint-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sh-success);
  box-shadow:0 0 0 4px rgba(5,150,105,.10);
}

.sh-maint-table-shell{
  flex:1;
  min-height:0;
  overflow:hidden;
}

.sh-maint-table-wrap{
  height:100%;
  min-height:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(0,102,204,.28);
  background:#f5f5f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
}

.sh-maint-table{
  width:100%;
  min-width:1200px;
  border-collapse:separate;
  border-spacing:0;
  font-size:12.5px;
}

.sh-maint-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:10px 10px;
  text-align:left;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#ffffff;
  background:linear-gradient(180deg, #0b74de 0%, #0066cc 100%);
  border-right:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(0,102,204,.5);
  white-space:nowrap;
}

.sh-maint-table thead th:last-child{
  border-right:none;
}

.sh-maint-table tbody td{
  padding:8px 10px;
  vertical-align:middle;
  border-right:1px solid rgba(0,102,204,.2);
  border-bottom:1px solid rgba(0,102,204,.18);
  color:#111111;
  white-space:nowrap;
}

.sh-maint-table tbody td:last-child{
  border-right:none;
}

.sh-maint-table tbody tr:nth-child(odd){
  background:#f5f7fa;
}

.sh-maint-table tbody tr:nth-child(even){
  background:rgba(154, 204, 253, 0.425);
}

.sh-maint-table tbody tr{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1), background .2s ease;
}

.sh-maint-table tbody tr.is-visible{
  opacity:1;
  transform:translateY(0);
}

.sh-maint-table tbody tr:hover{
  background:rgba(0,102,204,.1);
}

.sh-maint-table td:nth-child(2){
  min-width:220px;
  font-weight:700;
}

.sh-maint-table td:nth-child(4){
  min-width:140px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing:.03em;
}

.sh-maint-pill{
  display:inline-block;
  padding:3px 9px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  line-height:1.6;
  border-width:1px;
  border-style:solid;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

.sh-maint-pill--primary { background: linear-gradient(180deg, #0f74dc 0%, #0066cc 100%); color: #ffffff; border-color: #3399ff; }
.sh-maint-pill--success { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); color: #ffffff; border-color: #4ade80; }
.sh-maint-pill--success-soft { background: linear-gradient(180deg, #84cc16 0%, #65a30d 100%); color: #f7fee7; border-color: #a3e635; }
.sh-maint-pill--danger { background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); color: #ffffff; border-color: #f87171; }
.sh-maint-pill--warning { background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%); color: #ffffff; border-color: #facc15; }
.sh-maint-pill--amber { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); color: #fff7ed; border-color: #fbbf24; }
.sh-maint-pill--attention { background: linear-gradient(180deg, #f97316 0%, #ea580c 100%); color: #ffffff; border-color: #fb923c; }
.sh-maint-pill--info { background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%); color: #ecfeff; border-color: #22d3ee; }
.sh-maint-pill--info-special { background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%); color: #f0fdfa; border-color: #2dd4bf; }
.sh-maint-pill--royal { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); color: #f5f3ff; border-color: #a78bfa; }
.sh-maint-pill--royal-soft { background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 100%); color: #3b0764; border-color: #ddd6fe; }
.sh-maint-pill--pop { background: linear-gradient(180deg, #f472b6 0%, #ec4899 100%); color: #fff1f7; border-color: #f9a8d4; }
.sh-maint-pill--purple { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); color: #faf5ff; border-color: #a78bfa; }
.sh-maint-pill--indigo { background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); color: #eef2ff; border-color: #818cf8; }
.sh-maint-pill--dark { background: linear-gradient(180deg, #475569 0%, #334155 100%); color: #f8fafc; border-color: #64748b; }
.sh-maint-pill--black { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #f8fafc; border-color: #334155; }

.sh-maint-pill.sh-maint-priority-pill{
  width:96px;
  text-align:center;
}

.sh-maint-pill.sh-maint-status-pill{
  width:96px;
  text-align:center;
}

@keyframes sh-maint-pill-flip{
  0%{transform:rotateX(0deg) scale(1);filter:blur(0);}
  50%{transform:rotateX(90deg) scale(.85);filter:blur(2px);}
  100%{transform:rotateX(0deg) scale(1);filter:blur(0);}
}

.sh-maint-pill-flipping{
  animation:sh-maint-pill-flip .52s ease-in-out forwards;
}

.sh-maint-row-focus{
  position:relative;
  z-index:5;
  background:rgba(0,102,204,.22) !important;
  outline:2px solid rgba(0,102,204,.6);
  outline-offset:-2px;
}

.sh-maint-row-dimmed{
  opacity:.38;
}

.sh-maint-row-discard{
  background:rgba(179,0,0,.08) !important;
  animation:sh-maint-row-discard-out .5s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes sh-maint-row-discard-out{
  0%{opacity:1;transform:translateX(0);}
  100%{opacity:0;transform:translateX(-80px);}
}

/* maintenance action card */
.sh-maint-card{
  position:absolute;
  top:44%;
  left:50%;
  transform:translate(-50%,-50%) scale(.72);
  width:400px;
  background:#ffffff;
  border-radius:14px;
  z-index:100;
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.25);
  overflow:hidden;
  opacity:0;
  transition:opacity .2s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}

.sh-maint-card.is-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.sh-maint-card-bar{
  height:6px;
}

.sh-maint-card-bar--primary{
  background:linear-gradient(90deg,#0055cc,#0088ff);
}

.sh-maint-card-bar--warning{
  background:linear-gradient(90deg,#c47a00,#ffaa00);
}

.sh-maint-card-head{
  padding:16px 20px 10px;
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid #e8eef5;
}

.sh-maint-card-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.sh-maint-card-icon--primary{
  background:linear-gradient(135deg,#0055cc,#0088ff);
}

.sh-maint-card-icon--warning{
  background:linear-gradient(135deg,#c47a00,#ffaa00);
}

.sh-maint-card-title{
  font-size:16px;
  font-weight:700;
  color:#0a192f;
  line-height:1.3;
}

.sh-maint-card-headline{
  font-size:11.5px;
  color:#6a7d8e;
  margin-top:3px;
  font-weight:400;
}

.sh-maint-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 20px;
  border-bottom:1px solid #f0f4fa;
}

.sh-maint-meta-label{
  font-size:11px;
  color:#8a9bab;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.sh-maint-meta-value{
  font-size:13px;
  color:#0a192f;
  font-weight:700;
  text-align:right;
}

.sh-maint-form{
  padding:14px 20px;
  background:#f8fbff;
  border-top:1px solid #eef4fa;
}

.sh-maint-textarea{
  width:100%;
  min-height:88px;
  resize:none;
  border:1px solid #d7e2ee;
  border-radius:10px;
  padding:12px 13px;
  font:inherit;
  font-size:12.5px;
  color:#0f172a;
  background:#ffffff;
  outline:none;
}

.sh-maint-textarea:focus{
  border-color:#3399ff;
  box-shadow:0 0 0 3px rgba(0,102,204,.10);
}

.sh-maint-card-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 20px 18px;
  background:#f8fbff;
}

.sh-maint-btn{
  flex:1;
  height:40px;
  border:none;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:filter .16s ease, transform .1s ease;
}

.sh-maint-btn:hover{
  filter:brightness(.96);
}

.sh-maint-btn:active{
  transform:scale(.98);
}

.sh-maint-btn--ghost{
  background:#e8edf2;
  color:#3a4a5c;
}

.sh-maint-btn--primary{
  background:linear-gradient(135deg,#0055cc,#0088ff);
  color:#ffffff;
}

.sh-maint-btn--warning{
  background:linear-gradient(135deg,#c47a00,#ffaa00);
  color:#ffffff;
}

.sh-maint-card--form .sh-maint-form{
  animation:sh-maint-form-in .28s ease forwards;
}

@keyframes sh-maint-form-in{
  0%{opacity:0;transform:translateY(8px);}
  100%{opacity:1;transform:translateY(0);}
}