/**
 * VulNova Ultra-Modern UI System
 *
 * Design Philosophy:
 * - Flat, solid colors (no gradients on text/buttons)
 * - Borderless cards with background contrast
 * - Generous whitespace
 * - Subtle micro-interactions
 * - Progressive disclosure
 * - Staggered animations
 */

/* ============================================================================
   MODERN TOKENS OVERRIDE
   ============================================================================ */

:root {
  /* Modern spacing - more generous */
  --vn-modern-gap-sm: 12px;
  --vn-modern-gap-md: 20px;
  --vn-modern-gap-lg: 32px;
  --vn-modern-gap-xl: 48px;

  /* Modern border radius - larger for softer feel */
  --vn-modern-radius-xs: 6px;
  --vn-modern-radius-sm: 10px;
  --vn-modern-radius-md: 14px;
  --vn-modern-radius-lg: 18px;
  --vn-modern-radius-xl: 24px;

  /* Modern card backgrounds (dark mode) - transparent */
  --vn-modern-card-bg: transparent;
  --vn-modern-card-bg-hover: transparent;
  --vn-modern-card-bg-elevated: transparent;

  /* Modern accent - deep indigo */
  --vn-modern-accent: #7c6fea;
  --vn-modern-accent-hover: #5b4cdb;
  --vn-modern-accent-muted: rgba(91, 76, 219, 0.15);

  /* Modern text sizing */
  --vn-modern-metric-size: 2.25rem;
  --vn-modern-metric-weight: 500;

  /* Hero metric - for main dashboard KPIs only */
  --vn-hero-metric-size: 3rem;
  --vn-hero-metric-weight: 300;

  /* Modern transitions */
  --vn-modern-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vn-modern-duration: 200ms;
  --vn-modern-duration-slow: 400ms;

  /* Stagger delay for animations */
  --vn-stagger-1: 0ms;
  --vn-stagger-2: 50ms;
  --vn-stagger-3: 100ms;
  --vn-stagger-4: 150ms;
  --vn-stagger-5: 200ms;
  --vn-stagger-6: 250ms;
}

[data-theme="light"] {
  --vn-modern-card-bg: #ffffff;
  --vn-modern-card-bg-hover: #f5f3ff;
  --vn-modern-card-bg-elevated: #ffffff;
}

/* ============================================================================
   MODERN PAGE LAYOUT
   ============================================================================ */

.vn-modern-page {
  padding: var(--vn-modern-gap-lg);
  display: flex;
  flex-direction: column;
  gap: var(--vn-modern-gap-lg);
}

.vn-modern-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--vn-modern-gap-md);
}

.vn-modern-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vn-text-primary);
  letter-spacing: -0.02em;
}

.vn-modern-subtitle {
  font-size: 0.875rem;
  color: var(--vn-text-muted);
  margin-top: 4px;
}

/* ============================================================================
   MODERN CARDS - Borderless, Clean
   ============================================================================ */

.vn-modern-card {
  background: var(--vn-modern-card-bg);
  border-radius: var(--vn-modern-radius-md);
  padding: var(--vn-modern-gap-md);
  transition: background var(--vn-modern-duration) var(--vn-modern-ease);
  /* NO border, NO shadow by default */
}

.vn-modern-card:hover {
  background: var(--vn-modern-card-bg-hover);
}

.vn-modern-card--elevated {
  background: var(--vn-modern-card-bg-elevated);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.vn-modern-card--interactive {
  cursor: pointer;
}

.vn-modern-card--interactive:hover {
  /* Refined: no transform, just subtle bg change (handled by parent) */
}

.vn-modern-card--interactive:active {
  opacity: 0.9;
  /* Refined: subtle feedback without layout shift */
}

/* ============================================================================
   MODERN METRIC DISPLAY
   ============================================================================ */

.vn-modern-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vn-modern-metric__value {
  font-size: var(--vn-modern-metric-size);
  font-weight: var(--vn-modern-metric-weight);
  color: var(--vn-text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.vn-modern-metric__value--accent {
  color: var(--vn-modern-accent);
}

.vn-modern-metric__value--critical {
  color: var(--vn-severity-critical);
}

.vn-modern-metric__value--high {
  color: var(--vn-severity-high);
}

.vn-modern-metric__value--medium {
  color: var(--vn-severity-medium);
}

.vn-modern-metric__value--low {
  color: var(--vn-severity-low);
}

.vn-modern-metric__label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--vn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Refined: uppercase micro label creates clear hierarchy */
}

.vn-modern-metric__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.vn-modern-metric__trend--up {
  color: var(--vn-destructive);
}

.vn-modern-metric__trend--down {
  color: var(--vn-success);
}

/* ============================================================================
   MODERN HERO METRIC (Large, Featured)
   ============================================================================ */

.vn-modern-hero {
  display: flex;
  align-items: center;
  gap: var(--vn-modern-gap-lg);
  padding: var(--vn-modern-gap-lg);
  background: var(--vn-modern-card-bg);
  border-radius: var(--vn-modern-radius-lg);
}

.vn-modern-hero__value {
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--vn-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  /* Refined: lighter weight */
}

.vn-modern-hero__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vn-modern-hero__label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--vn-text-secondary);
}

.vn-modern-hero__description {
  font-size: 0.875rem;
  color: var(--vn-text-muted);
  max-width: 280px;
}

/* ============================================================================
   MODERN BUTTONS - Flat, Solid
   ============================================================================ */

.vn-modern-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--vn-modern-radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--vn-modern-duration) var(--vn-modern-ease);
}

.vn-modern-btn--primary {
  background: var(--vn-modern-accent);
  color: white;
}

.vn-modern-btn--primary:hover {
  background: var(--vn-modern-accent-hover);
}

.vn-modern-btn--primary:active {
  transform: scale(0.98);
}

.vn-modern-btn--secondary {
  background: var(--vn-modern-accent-muted);
  color: var(--vn-modern-accent);
}

.vn-modern-btn--secondary:hover {
  background: rgba(167, 139, 250, 0.25);
}

.vn-modern-btn--ghost {
  background: transparent;
  color: var(--vn-text-secondary);
}

.vn-modern-btn--ghost:hover {
  background: var(--vn-modern-card-bg-hover);
  color: var(--vn-text-primary);
}

.vn-modern-btn--sm {
  height: 32px;
  padding: 0 12px;
  font-size: 0.8125rem;
}

.vn-modern-btn--lg {
  height: 44px;
  padding: 0 24px;
  font-size: 1rem;
}

/* ============================================================================
   MODERN BADGES - Clean, Minimal
   ============================================================================ */

.vn-modern-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 6px;
  /* NO border */
}

.vn-modern-badge--critical {
  background: rgba(220, 73, 102, 0.15);
  color: var(--vn-severity-critical);
}

.vn-modern-badge--high {
  background: rgba(204, 133, 51, 0.15);
  color: var(--vn-severity-high);
}

.vn-modern-badge--medium {
  background: rgba(75, 168, 212, 0.15);
  color: var(--vn-severity-medium);
}

.vn-modern-badge--low {
  background: rgba(100, 116, 139, 0.15);
  color: var(--vn-severity-low);
}

.vn-modern-badge--success {
  background: rgba(52, 184, 127, 0.15);
  color: var(--vn-success);
}

.vn-modern-badge--warning {
  background: rgba(217, 160, 51, 0.15);
  color: var(--vn-warning);
}

.vn-modern-badge--accent {
  background: var(--vn-modern-accent-muted);
  color: var(--vn-modern-accent);
}

.vn-modern-badge--neutral {
  background: rgba(148, 163, 184, 0.15);
  color: var(--vn-text-secondary);
}

/* ============================================================================
   MODERN TABLE
   ============================================================================ */

.vn-modern-table {
  width: 100%;
  border-collapse: collapse;
}

.vn-modern-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--vn-text-muted);
  border-bottom: 1px solid var(--vn-border);
  /* NO uppercase */
}

.vn-modern-table td {
  padding: 14px 16px;
  font-size: 0.875rem;
  color: var(--vn-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.vn-modern-table tr {
  transition: background var(--vn-modern-duration) var(--vn-modern-ease);
}

.vn-modern-table tbody tr:hover {
  background: var(--vn-modern-card-bg-hover);
}

.vn-modern-table tbody tr:hover td {
  color: var(--vn-text-primary);
}

/* Sticky header */
.vn-modern-table--sticky thead {
  position: sticky;
  top: 0;
  background: var(--vn-background);
  z-index: 10;
}

/* ============================================================================
   MODERN GRID LAYOUTS
   ============================================================================ */

/* Hero + Supporting pattern */
.vn-modern-grid-hero {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--vn-modern-gap-md);
}

@media (max-width: 1024px) {
  .vn-modern-grid-hero {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .vn-modern-grid-hero {
    grid-template-columns: 1fr;
  }
}

/* Equal grid */
.vn-modern-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vn-modern-gap-md);
}

.vn-modern-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vn-modern-gap-md);
}

.vn-modern-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vn-modern-gap-md);
}

@media (max-width: 1024px) {
  .vn-modern-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .vn-modern-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .vn-modern-grid-4,
  .vn-modern-grid-3,
  .vn-modern-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   MODERN PROGRESS BAR
   ============================================================================ */

.vn-modern-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  /* Refined: thinner like 7AI - reduces visual noise */
}

.vn-modern-progress__fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--vn-modern-duration-slow) var(--vn-modern-ease);
}

.vn-modern-progress__fill--accent {
  background: var(--vn-modern-accent);
}

.vn-modern-progress__fill--critical {
  background: var(--vn-severity-critical);
}

.vn-modern-progress__fill--high {
  background: var(--vn-severity-high);
}

.vn-modern-progress__fill--medium {
  background: var(--vn-severity-medium);
}

.vn-modern-progress__fill--success {
  background: var(--vn-success);
}

/* ============================================================================
   MODERN ANIMATIONS
   ============================================================================ */

@keyframes vn-modern-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vn-modern-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vn-modern-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes vn-modern-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animation classes */
.vn-modern-animate {
  animation: vn-modern-fade-in var(--vn-modern-duration-slow) var(--vn-modern-ease) forwards;
  opacity: 0;
}

.vn-modern-animate--up {
  animation-name: vn-modern-fade-in-up;
}

.vn-modern-animate--scale {
  animation-name: vn-modern-scale-in;
}

.vn-modern-animate--slide {
  animation-name: vn-modern-slide-in-right;
}

/* Staggered children */
.vn-modern-stagger > *:nth-child(1) { animation-delay: var(--vn-stagger-1); }
.vn-modern-stagger > *:nth-child(2) { animation-delay: var(--vn-stagger-2); }
.vn-modern-stagger > *:nth-child(3) { animation-delay: var(--vn-stagger-3); }
.vn-modern-stagger > *:nth-child(4) { animation-delay: var(--vn-stagger-4); }
.vn-modern-stagger > *:nth-child(5) { animation-delay: var(--vn-stagger-5); }
.vn-modern-stagger > *:nth-child(6) { animation-delay: var(--vn-stagger-6); }

/* ============================================================================
   MODERN SECTION DIVIDER
   ============================================================================ */

.vn-modern-section {
  display: flex;
  flex-direction: column;
  gap: var(--vn-modern-gap-md);
}

.vn-modern-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vn-modern-section__title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--vn-text-primary);
  /* Refined: medium weight, not bold - less aggressive */
}

/* ============================================================================
   MODERN EMPTY STATE
   ============================================================================ */

.vn-modern-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--vn-modern-gap-xl) var(--vn-modern-gap-lg);
  text-align: center;
}

.vn-modern-empty__icon {
  width: 48px;
  height: 48px;
  color: var(--vn-text-muted);
  margin-bottom: var(--vn-modern-gap-md);
  opacity: 0.5;
}

.vn-modern-empty__title {
  font-size: 1rem;
  font-weight: 500;
  color: var(--vn-text-secondary);
  margin-bottom: 8px;
}

.vn-modern-empty__description {
  font-size: 0.875rem;
  color: var(--vn-text-muted);
  max-width: 300px;
}

/* ============================================================================
   MODERN SEVERITY CARDS (Compact Row)
   ============================================================================ */

.vn-modern-severity-row {
  display: flex;
  gap: var(--vn-modern-gap-sm);
}

.vn-modern-severity-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--vn-modern-card-bg);
  border-radius: var(--vn-modern-radius-md);
  cursor: pointer;
  transition: all var(--vn-modern-duration) var(--vn-modern-ease);
}

.vn-modern-severity-card:hover {
  background: var(--vn-modern-card-bg-hover);
}

.vn-modern-severity-card__indicator {
  width: 4px;
  height: 40px;
  border-radius: 2px;
  flex-shrink: 0;
}

.vn-modern-severity-card__indicator--critical {
  background: var(--vn-severity-critical);
}

.vn-modern-severity-card__indicator--high {
  background: var(--vn-severity-high);
}

.vn-modern-severity-card__indicator--medium {
  background: var(--vn-severity-medium);
}

.vn-modern-severity-card__indicator--low {
  background: var(--vn-severity-low);
}

.vn-modern-severity-card__value {
  font-size: 1.75rem;
  font-weight: 300;
  color: var(--vn-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  /* Refined: light weight - data should breathe */
}

.vn-modern-severity-card__label {
  font-size: 0.8125rem;
  color: var(--vn-text-secondary);
  margin-top: 2px;
}

/* ============================================================================
   MODERN CHART CONTAINER
   ============================================================================ */

.vn-modern-chart {
  background: var(--vn-modern-card-bg);
  border-radius: var(--vn-modern-radius-lg);
  padding: var(--vn-modern-gap-md);
}

.vn-modern-chart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--vn-modern-gap-md);
}

.vn-modern-chart__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--vn-text-primary);
}

.vn-modern-chart__canvas {
  height: 280px;
}

/* ============================================================================
   MODERN DONUT CHART (CSS-based)
   ============================================================================ */

.vn-modern-donut {
  position: relative;
  width: 160px;
  height: 160px;
}

.vn-modern-donut__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.vn-modern-donut__value {
  font-size: 2rem;
  font-weight: 300;
  color: var(--vn-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Refined: light weight like 7AI center metrics */
}

.vn-modern-donut__label {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--vn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
  /* Refined: micro label below metric */
}

/* ============================================================================
   MODERN INPUT
   ============================================================================ */

.vn-modern-input {
  height: 40px;
  padding: 0 14px;
  background: var(--vn-modern-card-bg);
  border: 1px solid transparent;
  border-radius: var(--vn-modern-radius-sm);
  color: var(--vn-text-primary);
  font-size: 0.875rem;
  transition: all var(--vn-modern-duration) var(--vn-modern-ease);
}

.vn-modern-input::placeholder {
  color: var(--vn-text-muted);
}

.vn-modern-input:hover {
  background: var(--vn-modern-card-bg-hover);
}

.vn-modern-input:focus {
  outline: none;
  border-color: var(--vn-modern-accent);
  background: var(--vn-modern-card-bg-hover);
}

/* ============================================================================
   MODERN TABS - Underline Style (like 7AI/Safe Security)
   ============================================================================ */

.vn-modern-tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--vn-border, rgba(255,255,255,0.08));
}

.vn-modern-tab {
  padding: 0.75rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vn-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all var(--vn-modern-duration) var(--vn-modern-ease);
}

.vn-modern-tab:hover {
  color: var(--vn-text-secondary);
}

.vn-modern-tab--active {
  color: var(--vn-text-primary);
  border-bottom-color: var(--vn-modern-accent);
}

/* Tab with count badge */
.vn-modern-tab__count {
  font-size: 0.75rem;
  color: var(--vn-text-muted);
  margin-left: 0.375rem;
}

/* Pill-style tabs (alternative) */
.vn-modern-tabs--pills {
  display: inline-flex;
  background: var(--vn-modern-card-bg);
  border-radius: var(--vn-modern-radius-sm);
  padding: 4px;
  border-bottom: none;
  gap: 0;
}

.vn-modern-tabs--pills .vn-modern-tab {
  padding: 6px 12px;
  border-bottom: none;
  border-radius: 6px;
  margin-bottom: 0;
}

.vn-modern-tabs--pills .vn-modern-tab--active {
  background: var(--vn-surface-elevated, rgba(255,255,255,0.08));
  border-bottom-color: transparent;
}

/* ============================================================================
   UTILITY OVERRIDES (Apply refined styles globally)
   ============================================================================ */

/* Remove gradient text - use solid colors for readability */
.vn-gradient-text,
.gradient-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--vn-text-primary) !important;
  background-clip: unset !important;
  color: var(--vn-text-primary) !important;
}

/* Uppercase micro labels for data hierarchy */
.stats-label,
.vn-text-micro {
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 0.6875rem !important;
}

/* Table headers - uppercase micro for scanability */
.table-header th,
.vn-modern-table th {
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 0.6875rem !important;
}

/* Remove hover transforms - use background changes only
   This reduces visual noise and feels more professional */
.glass-card:hover,
.vn-glass-card:hover,
.vn-metric-card:hover,
.stats-card:hover,
.card-hover:hover {
  transform: none !important;
}

/* Remove shine effect from buttons - flat is modern */
.btn-primary::before,
.vn-btn-primary::before {
  display: none !important;
}

/* Light weight for all large numbers - key UX pattern from Safe/Snyk */
.stats-number,
.vn-stat-value,
.metric-value {
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* Hero metrics - ONLY for main dashboard KPIs (Risk Score, etc) */
.vn-hero-metric {
  font-size: var(--vn-hero-metric-size, 3rem) !important;
  font-weight: var(--vn-hero-metric-weight, 300) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

#risk-score-widget {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

/* Regular metrics stay normal sized */
.vn-metric-value {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ============================================================================
   REFINED UTILITY COMPONENTS
   ============================================================================ */

/* Monochrome icon container - gray circle like 7AI */
.vn-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vn-modern-card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vn-text-muted);
  flex-shrink: 0;
}

.vn-icon-circle--sm {
  width: 32px;
  height: 32px;
}

.vn-icon-circle--lg {
  width: 48px;
  height: 48px;
}

/* Trend indicator pills like Safe Security */
.vn-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
}

.vn-trend--up {
  background: color-mix(in srgb, var(--vn-severity-critical) 15%, transparent);
  color: var(--vn-severity-critical);
}

.vn-trend--down {
  background: color-mix(in srgb, var(--vn-severity-low) 15%, transparent);
  color: var(--vn-severity-low);
}

.vn-trend--neutral {
  background: var(--vn-modern-card-bg);
  color: var(--vn-text-muted);
}

/* Time period badge like "1 Week", "Last 24 hours" */
.vn-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--vn-text-secondary);
  background: transparent;
  border: 1px solid var(--vn-border, rgba(255,255,255,0.1));
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vn-time-badge:hover {
  background: var(--vn-modern-card-bg);
  border-color: var(--vn-border-hover, rgba(255,255,255,0.15));
}

/* Control/code badge like "UAC", "HAC" */
.vn-code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: var(--vn-text-secondary);
  background: transparent;
  border: 1px solid var(--vn-border, rgba(255,255,255,0.1));
  border-radius: 4px;
}

/* Confidence label like "MEDIUM CONFIDENCE" */
.vn-confidence {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vn-confidence--high {
  color: var(--vn-severity-low);
}

.vn-confidence--medium {
  color: var(--vn-severity-medium);
}

.vn-confidence--low {
  color: var(--vn-severity-critical);
}

/* Metric suffix for units like "K", "%", "M" */
.vn-metric-suffix {
  font-size: 0.6em;
  font-weight: 400;
  color: var(--vn-text-muted);
  margin-left: 2px;
}

/* Data row - common pattern for lists */
.vn-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--vn-border, rgba(255,255,255,0.06));
}

.vn-data-row:last-child {
  border-bottom: none;
}

.vn-data-row:hover {
  background: var(--vn-modern-card-bg);
  margin: 0 -12px;
  padding: 12px;
  border-radius: 8px;
}

/* Legend item like chart legends */
.vn-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--vn-text-secondary);
}

.vn-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vn-legend-value {
  font-weight: 500;
  color: var(--vn-text-primary);
  margin-left: auto;
}

.vn-legend-percent {
  font-size: 0.75rem;
  color: var(--vn-text-muted);
  min-width: 40px;
  text-align: right;
}

/* ============================================================================
   COMPREHENSIVE GLOBAL OVERRIDES
   Platform-level styles that cascade to ALL pages
   ============================================================================ */

/* === METRICS & NUMBERS === */
/* All large metric displays should use light weight */
[class*="stat-value"],
[class*="stat-number"],
[class*="metric-value"],
[class*="score-value"],
[class*="count-value"],
[class*="total-value"],
.text-4xl,
.text-3xl,
.text-2xl {
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
}

/* === LABELS & HEADERS === */
/* All table headers should be uppercase micro */
th,
thead td,
[class*="table-header"],
[class*="column-header"],
[class*="grid-header"] {
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--text-muted, var(--vn-text-muted)) !important;
  background: transparent !important;
}

/* Section labels and metadata labels */
[class*="label-"],
[class*="-label"],
.label,
.meta-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, var(--vn-text-muted));
}

/* === BUTTONS === */
/* All primary buttons should be solid, not gradient */
[class*="btn-primary"],
[class*="button-primary"],
.btn-primary,
button.primary {
  background: #7c3aed !important;
  background-image: none !important;
  box-shadow: none !important;
}

[class*="btn-primary"]:hover,
[class*="button-primary"]:hover,
.btn-primary:hover,
button.primary:hover {
  background: #6d28d9 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Secondary/outline buttons */
[class*="btn-secondary"],
[class*="button-secondary"],
.btn-secondary,
button.secondary {
  background: transparent !important;
  border: 1px solid var(--glass-border, var(--vn-border)) !important;
}

[class*="btn-secondary"]:hover,
[class*="button-secondary"]:hover,
.btn-secondary:hover,
button.secondary:hover {
  background: var(--glass-bg, var(--vn-surface)) !important;
  transform: none !important;
}

/* === CARDS & CONTAINERS === */
/* Remove all hover transforms from cards */
[class*="card"]:hover,
[class*="panel"]:hover,
[class*="tile"]:hover,
[class*="item"]:hover {
  transform: none !important;
}

/* Card backgrounds should use theme variables */
[class*="card"],
[class*="panel"] {
  border-radius: 0.75rem;
}

/* === PROGRESS BARS === */
/* All progress bars should be thin */
[class*="progress"],
.progress-bar,
[role="progressbar"] {
  height: 3px !important;
  border-radius: 2px !important;
}

[class*="progress-fill"],
[class*="progress-bar"] > div,
[role="progressbar"] > div {
  background: #7c3aed !important;
  background-image: none !important;
}

/* Severity-specific progress bar colors override the global purple */
[role="progressbar"] > .vn-bar-pattern-solid[id*="low"],
[role="progressbar"] > [id="age-0-30-bar"],
[role="progressbar"] > [id="remediation-low-bar"] {
  background: #16a34a !important;
}

[role="progressbar"] > .vn-bar-pattern-stripe[id*="medium"],
[role="progressbar"] > [id="age-31-90-bar"],
[role="progressbar"] > [id="remediation-medium-bar"] {
  background: #ca8a04 !important;
}

[role="progressbar"] > .vn-bar-pattern-dot[id*="high"],
[role="progressbar"] > [id="age-91-180-bar"],
[role="progressbar"] > [id="remediation-high-bar"] {
  background: #ea580c !important;
}

[role="progressbar"] > .vn-bar-pattern-cross[id*="critical"],
[role="progressbar"] > [id="age-180-plus-bar"],
[role="progressbar"] > [id="remediation-critical-bar"] {
  background: #dc2626 !important;
}

/* === BADGES === */
/* All severity badges should be subtle */
[class*="badge-critical"],
[class*="severity-critical"] {
  background: color-mix(in srgb, var(--vn-severity-critical) 15%, transparent) !important;
  color: var(--vn-severity-critical) !important;
  border: none !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  padding: 0.125rem 0.5rem !important;
}

[class*="badge-high"],
[class*="severity-high"] {
  background: color-mix(in srgb, var(--vn-severity-high) 15%, transparent) !important;
  color: var(--vn-severity-high) !important;
  border: none !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  padding: 0.125rem 0.5rem !important;
}

[class*="badge-medium"],
[class*="severity-medium"] {
  background: color-mix(in srgb, var(--vn-severity-medium) 15%, transparent) !important;
  color: var(--vn-severity-medium) !important;
  border: none !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  padding: 0.125rem 0.5rem !important;
}

[class*="badge-low"],
[class*="severity-low"] {
  background: color-mix(in srgb, var(--vn-severity-low) 15%, transparent) !important;
  color: var(--vn-severity-low) !important;
  border: none !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  padding: 0.125rem 0.5rem !important;
}

/* === ICONS === */
/* Icon containers should be monochrome by default */
[class*="icon-container"],
[class*="icon-box"],
[class*="icon-wrapper"] {
  background: var(--glass-bg, var(--vn-surface)) !important;
  color: var(--text-muted, var(--vn-text-muted)) !important;
}

/* Remove colored icon backgrounds */
.icon-purple,
.icon-red,
.icon-orange,
.icon-yellow,
.icon-green,
.icon-blue,
[class*="icon-bg-"] {
  background: transparent !important;
}

/* === SIDEBAR STATS === */
/* All sidebar stat values should be light weight */
[class*="sidebar-stat"] [class*="value"],
[class*="sidebar"] [class*="stat-value"],
[class*="sidebar"] [class*="number"] {
  font-weight: 300 !important;
}

/* === MODAL & PANEL HEADERS === */
/* Panel headers that use gradients should be solid */
[class*="panel-header"],
[class*="modal-header"] {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
}

/* === HOVER EFFECTS === */
/* Global removal of aggressive hover effects */
*:hover {
  /* Prevent any accidental transforms */
}

/* Allow only subtle bg changes on interactive elements */
[class*="interactive"]:hover,
[class*="clickable"]:hover,
[class*="selectable"]:hover,
tr:hover,
li:hover {
  background: var(--glass-bg-hover, var(--vn-modern-card-bg-hover)) !important;
  transform: none !important;
}

/* === FORM ELEMENTS === */
/* Inputs should use theme variables */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--input-bg, var(--vn-surface)) !important;
  border: 1px solid var(--input-border, var(--vn-border)) !important;
  color: var(--input-text, var(--vn-text-primary)) !important;
  font-size: 0.875rem !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #7c3aed !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1) !important;
}

/* === GRADIENTS TO SOLID === */
/* Convert common gradient backgrounds to solid */
[style*="linear-gradient"][class*="btn"],
[style*="linear-gradient"][class*="button"] {
  background: #7c3aed !important;
  background-image: none !important;
}

/* === FONT WEIGHTS === */
/* Ensure metric-like numbers are always light */
.font-bold.text-2xl,
.font-bold.text-3xl,
.font-bold.text-4xl,
.font-semibold.text-2xl,
.font-semibold.text-3xl,
.font-semibold.text-4xl {
  font-weight: 300 !important;
}

/* === SECTION TITLES === */
/* Section titles should be medium weight, not bold */
[class*="section-title"],
[class*="panel-title"],
[class*="card-title"],
h2, h3 {
  font-weight: 500 !important;
}

/* === TOOLTIP & POPOVER === */
/* Consistent tooltip styling */
[class*="tooltip"],
[class*="popover"],
[role="tooltip"] {
  background: var(--tooltip-bg, #1e293b) !important;
  color: var(--tooltip-text, #fff) !important;
  font-size: 0.75rem !important;
  border-radius: 0.375rem !important;
}