/**
 * PackSense Option 3 — unified dark + teal theme (landing + app).
 * Loaded after enterprise.css; overrides legacy purple/blue gradients.
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --ps-bg: #0a0a0b;
  --ps-bg-elevated: #141416;
  --ps-bg-muted: #1c1c1f;
  --ps-bg-gradient: #0a0a0b;
  --ps-surface: #141416;
  --ps-surface-hover: #1a1a1e;
  --ps-text: #f9fafb;
  --ps-text-secondary: #d1d5db;
  --ps-text-muted: #9ca3af;
  --ps-border: rgba(255, 255, 255, 0.08);
  --ps-border-strong: rgba(255, 255, 255, 0.14);
  --ps-accent: #14b8a6;
  --ps-accent-hover: #0d9488;
  --ps-accent-soft: rgba(20, 184, 166, 0.12);
  --ps-accent-gradient: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  --ps-input-bg: #0f0f11;
  --ps-input-border: rgba(255, 255, 255, 0.1);
  --ps-header-bg: rgba(10, 10, 11, 0.92);
  --ps-card-bg: #141416;
  --ps-meta-theme-color: #0a0a0b;
  --ps-focus-ring: 0 0 0 3px rgba(20, 184, 166, 0.25);
  --ps-font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --ps-bg-glow: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.12) 0%, transparent 72%);
}

html.ps-app,
html.ps-app body,
html,
body.ps-app,
body {
  background: var(--ps-bg) !important;
  background-image: none !important;
  color: var(--ps-text) !important;
}

/* Same top-center teal bloom as the home page (.ps-landing__glow) */
html.ps-app body::before,
.ps-app body::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  top: -80px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: min(1100px, 100vw) !important;
  height: min(520px, 60vh) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: none !important;
  opacity: 1 !important;
  background: var(--ps-bg-glow) !important;
}

.ps-app .bg-layer {
  background: var(--ps-bg) !important;
}

/* Serif page titles */
.ps-app .header h1,
.ps-app .page-heading,
.ps-app .form-title,
.ps-app .executive-summary-title,
.ps-app .ps-serif-title {
  font-family: var(--ps-font-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* Headers / nav bars */
.ps-app .nav-header,
.ps-app body > .header,
.ps-app .site-header,
.ps-app header.sticky {
  background: var(--ps-header-bg) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--ps-border) !important;
}

/* Surfaces */
.ps-app .sidebar,
.ps-app .sidebar-section,
.ps-app .analysis-section,
.ps-app .metric-card,
.ps-app .review-card,
.ps-app .card,
.ps-app .login-card,
.ps-app .form-container,
.ps-app .modal-content,
.ps-app .product-grid .card,
.ps-app .card-featured,
.ps-app .main-layout .sidebar {
  background: var(--ps-card-bg) !important;
  border-color: var(--ps-border) !important;
}

.ps-app .form-container {
  border-radius: 1rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* Neutralize legacy gradient nav / action buttons (inline styles included) */
.ps-app .nav-link,
.ps-app a.nav-link[style],
.ps-app .action-btn,
.ps-app a.action-btn[style],
.ps-app .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--ps-border) !important;
  border-radius: 9999px !important;
  color: var(--ps-text) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

.ps-app .nav-link:hover,
.ps-app .action-btn:hover,
.ps-app a.nav-link[style]:hover,
.ps-app a.action-btn[style]:hover {
  background: var(--ps-accent-soft) !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
  color: #fff !important;
  transform: none !important;
}

/* Primary CTAs — solid teal pill */
.ps-app .submit-btn,
.ps-app .btn-primary,
.ps-app button[type="submit"]:not(.ps-landing-btn),
.ps-app .action-btn.primary,
.ps-app .nav-link.primary,
.ps-app a.nav-link[style*="48bb78"],
.ps-app a.nav-link[style*="6366f1"],
.ps-app a.nav-link[style*="17a2b8"] {
  background: var(--ps-accent) !important;
  border: 1px solid transparent !important;
  color: #041010 !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.ps-app .submit-btn:hover,
.ps-app .btn-primary:hover,
.ps-app button[type="submit"]:not(.ps-landing-btn):hover,
.ps-app .action-btn.primary:hover {
  background: var(--ps-accent-hover) !important;
  filter: none !important;
  opacity: 0.92;
}

/* Feature badge — teal not indigo */
.ps-feature-badge {
  color: var(--ps-accent) !important;
  background: var(--ps-accent-soft) !important;
  border: 1px solid rgba(20, 184, 166, 0.28) !important;
}

/* Metric packaging icon — teal not purple */
.ps-app .metric-icon.ps-metric-packaging {
  color: var(--ps-accent) !important;
  background: var(--ps-accent-soft) !important;
  border-color: rgba(20, 184, 166, 0.28) !important;
}

/* Progress bars & accent UI */
.ps-app .analysis-section h3 i,
.ps-app .executive-summary-title .ps-title-icon {
  color: var(--ps-accent) !important;
  background: var(--ps-accent-soft) !important;
  border-color: rgba(20, 184, 166, 0.28) !important;
}

/* Word cloud / chart accents stay readable on dark bg */
.ps-app .packaging-badge[style*="667eea"],
.ps-app .emotion-badge[style*="667eea"],
.ps-app .emotion-badge[style*="f093fb"] {
  background: var(--ps-accent-soft) !important;
  color: var(--ps-accent) !important;
  border: 1px solid rgba(20, 184, 166, 0.25) !important;
}

/* Demo dropdown overrides in results */
.ps-app select[style*="2d1b69"],
.ps-app .demo-select,
.ps-app #reviewSortSelect {
  background: var(--ps-input-bg) !important;
  border: 1px solid var(--ps-border) !important;
  color: var(--ps-text) !important;
}

/* Index / analyze home — calm background */
.ps-app .main-container {
  background: transparent !important;
}

.ps-app .particles {
  display: none !important;
}

/* Login */
.ps-app .login-card {
  background: var(--ps-surface) !important;
  border-radius: 1rem !important;
}

.ps-app .btn-primary {
  border-radius: 9999px !important;
  color: #041010 !important;
}

/* Metrics view links */
.ps-app .metrics-view-all {
  color: var(--ps-accent) !important;
}

.ps-app .metrics-view-all:hover {
  color: #2dd4bf !important;
}

/* Legacy display fonts → Option 3 serif for section titles */
.ps-app h1,
.ps-app h2,
.ps-app h3,
.ps-app .section-title,
.ps-app [style*="Rajdhani"],
.ps-app [style*="Orbitron"] {
  font-family: 'Inter', system-ui, sans-serif !important;
}

.ps-app .header h1,
.ps-app .executive-summary-title,
.ps-app .genai-page-title,
.ps-app .ps-serif-title {
  font-family: var(--ps-font-serif) !important;
  font-weight: 400 !important;
}

/* Sidebar toggle — teal on mobile */
.ps-app body > .header .sidebar-toggle.is-visible {
  background: var(--ps-accent-soft) !important;
  border-color: rgba(20, 184, 166, 0.35) !important;
  color: var(--ps-accent) !important;
}

/* Co-occurrence / network panels */
.ps-app .network-container,
.ps-app .word-cloud-container,
.ps-app .chart-container {
  background: var(--ps-card-bg) !important;
  border-color: var(--ps-border) !important;
}

/* GenAI / analysis blue legacy buttons → teal */
.ps-app a[style*="4299e1"],
.ps-app a[style*="3182ce"],
.ps-app button[style*="4299e1"],
.ps-app button[style*="3182ce"],
.ps-app .nav-link[style*="6366f1"],
.ps-app .nav-link[style*="48bb78"],
.ps-app .nav-link[style*="17a2b8"],
.ps-app .action-btn[style*="667eea"],
.ps-app .action-btn[style*="4299e1"] {
  background: var(--ps-accent) !important;
  background-image: none !important;
  color: #041010 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
}

.ps-app .failure-mode-card,
.ps-app .recommendation-card,
.ps-app .genai-stat-card {
  background: var(--ps-card-bg) !important;
  border: 1px solid var(--ps-border) !important;
}

/* Analyze home (index.html) */
.ps-app .nav-header {
  background: var(--ps-header-bg) !important;
  border-bottom: 1px solid var(--ps-border) !important;
  backdrop-filter: blur(14px) !important;
}

.ps-app .submit-btn {
  background: var(--ps-accent) !important;
  background-image: none !important;
  color: #041010 !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
  animation: none !important;
}

.ps-app .submit-btn::before {
  display: none !important;
}

.ps-app .submit-btn:hover {
  background: var(--ps-accent-hover) !important;
  transform: none !important;
  animation: none !important;
  opacity: 0.92;
}

.ps-app .ps-btn-demo,
.ps-app .cta-button.ps-btn-demo {
  display: inline-block;
  text-decoration: none;
  color: #041010 !important;
  background: var(--ps-accent) !important;
  background-image: none !important;
  padding: 14px 28px;
  border-radius: 9999px;
  font-weight: 600;
  box-shadow: none !important;
}

.ps-app .header h1::after {
  display: none !important;
}

/* Product search / scrape picker */
.ps-app .site-header {
  background: var(--ps-header-bg) !important;
  border-bottom: 1px solid var(--ps-border) !important;
}

.ps-app .page-heading {
  font-family: var(--ps-font-serif) !important;
  font-weight: 400 !important;
}

.ps-app .actions-bar {
  background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 11, 0.94) 28%, rgba(10, 10, 11, 0.98) 100%) !important;
  border-top: 1px solid var(--ps-border) !important;
}

.ps-app .btn-primary {
  background: var(--ps-accent) !important;
  color: #041010 !important;
  border-radius: 9999px !important;
}

/* Progress / waiting screen */
.ps-app .card:not(.metric-card):not(.review-card) {
  background: var(--ps-surface) !important;
  border-color: var(--ps-border) !important;
}