/**
 * VulNova Design Tokens
 *
 * Core design system tokens based on DESIGN_PHILOSOPHY.md
 * This file is standalone and can be used alongside theme.css during transition.
 *
 * Token Categories:
 * 1. Color Palette (9 colors)
 * 2. Typography Scale
 * 3. Spacing Scale
 * 4. Component Tokens
 * 5. Glass Morphism
 * 6. Shadows
 * 7. Layout Tokens
 * 8. Transitions
 */

/* ============================================================================
   ROOT TOKENS - Dark Mode Default
   ============================================================================ */

:root {
  /* -------------------------------------------------------------------------
     1. COLOR PALETTE (9-Color System)
     Rule: Color indicates meaning, not decoration
     ------------------------------------------------------------------------- */

  /* Background & Surface */
  --vn-background: #0A0A12;
  --vn-surface: rgba(255, 255, 255, 0.03);
  --vn-surface-elevated: rgba(255, 255, 255, 0.06);
  --vn-surface-hover: rgba(255, 255, 255, 0.10);
  --vn-border: rgba(255, 255, 255, 0.08);

  /* Progress Track - Consistent grey for progress bars */
  --vn-progress-track: rgba(255, 255, 255, 0.12);

  /* Text Colors */
  --vn-text-primary: rgba(255, 255, 255, 0.87);
  --vn-text-secondary: rgba(255, 255, 255, 0.6);
  --vn-text-muted: rgba(255, 255, 255, 0.4);

  /* Accent Colors */
  --vn-accent-primary: #A78BFA;
  --vn-accent-secondary: #0EA5E9;

  /* Semantic Colors - Desaturated for dark mode comfort */
  --vn-destructive: #E25A5A;
  --vn-warning: #D9A033;
  --vn-success: #34B87F;
  --vn-info: #4BA8D4;

  /* Severity Colors (Use Sparingly) - Soft pastels for comfort (Snyk-inspired) */
  --vn-severity-critical: #e57373;
  --vn-severity-high: #ff9800;
  --vn-severity-medium: #ffd54f;
  --vn-severity-low: #81c784;

  /* -------------------------------------------------------------------------
     2. TYPOGRAPHY SCALE (Compact)
     Philosophy: Compact but readable. Every pixel earns its place.
     ------------------------------------------------------------------------- */

  /* Font Families */
  --vn-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vn-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font Sizes */
  --vn-font-display: 32px;
  --vn-font-title: 24px;
  --vn-font-heading: 18px;
  --vn-font-body: 14px;
  --vn-font-small: 12px;
  --vn-font-micro: 11px;

  /* Font Weights */
  --vn-weight-light: 300;
  --vn-weight-normal: 400;
  --vn-weight-medium: 500;
  --vn-weight-semibold: 600;
  --vn-weight-bold: 700;

  /* Metric weight - light for large numbers (Safe Security pattern) */
  --vn-weight-metric: 300;

  /* Line Heights */
  --vn-leading-tight: 1.25;
  --vn-leading-normal: 1.5;
  --vn-leading-relaxed: 1.75;

  /* -------------------------------------------------------------------------
     3. SPACING SCALE (4px Base)
     Tight but breathable. No wasted space, but not cramped.
     ------------------------------------------------------------------------- */

  --vn-sp-1: 4px;
  --vn-sp-2: 8px;
  --vn-sp-3: 12px;
  --vn-sp-4: 16px;
  --vn-sp-6: 24px;
  --vn-sp-8: 32px;
  --vn-sp-12: 48px;

  /* -------------------------------------------------------------------------
     4. COMPONENT TOKENS
     Rule: Components are compact. No oversized cards or bloated buttons.
     ------------------------------------------------------------------------- */

  /* Component Heights */
  --vn-button-height: 32px;
  --vn-button-height-sm: 28px;
  --vn-button-height-lg: 36px;
  --vn-input-height: 36px;
  --vn-table-row-height: 40px;
  --vn-badge-height: 20px;
  --vn-metric-card-height: 80px;

  /* Padding */
  --vn-card-padding: 16px;
  --vn-badge-padding-x: 8px;
  --vn-badge-padding-y: 6px;
  --vn-button-padding-x: 16px;

  /* Border Radius */
  --vn-border-radius-sm: 4px;
  --vn-border-radius-md: 8px;
  --vn-border-radius-lg: 12px;
  --vn-border-radius-xl: 16px;
  --vn-border-radius-2xl: 24px;
  --vn-border-radius-full: 9999px;

  /* -------------------------------------------------------------------------
     5. GLASS MORPHISM
     Modern layer system for depth and transparency
     ------------------------------------------------------------------------- */

  --vn-glass-bg: rgba(255, 255, 255, 0.03);
  --vn-glass-bg-hover: rgba(255, 255, 255, 0.06);
  --vn-glass-border: rgba(255, 255, 255, 0.08);
  --vn-glass-blur: blur(20px);

  /* -------------------------------------------------------------------------
     6. SHADOWS
     Subtle depth without overwhelming
     ------------------------------------------------------------------------- */

  --vn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --vn-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --vn-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --vn-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);

  /* Glow Effects */
  --vn-glow-primary: 0 0 20px rgba(124, 58, 237, 0.3);
  --vn-glow-accent: 0 0 20px rgba(14, 165, 233, 0.3);

  /* -------------------------------------------------------------------------
     7. LAYOUT TOKENS
     Fixed dimensions for key UI components
     ------------------------------------------------------------------------- */

  /* Sidebar/Dock */
  --vn-dock-collapsed: 64px;
  --vn-dock-expanded: 200px;

  /* Sidebar Colors (Dark Mode) */
  --vn-sidebar-bg: rgba(10, 10, 18, 0.98);
  --vn-sidebar-border: rgba(255, 255, 255, 0.08);
  --vn-sidebar-text: #94a3b8;
  --vn-sidebar-text-hover: rgba(255, 255, 255, 0.87);
  --vn-sidebar-heading: rgba(148, 163, 184, 0.7);
  --vn-sidebar-link-hover-bg: rgba(124, 58, 237, 0.1);
  --vn-sidebar-link-active-bg: rgba(124, 58, 237, 0.15);
  --vn-sidebar-link-active-text: #a78bfa;

  /* Panels */
  --vn-ai-panel-width: 380px;
  --vn-detail-panel-width: 420px;

  /* Search Bar */
  --vn-search-collapsed: 240px;
  --vn-search-expanded: 480px;

  /* Content Constraints */
  --vn-max-width-content: 1224px;
  --vn-max-width-narrow: 768px;
  --vn-max-width-wide: 1440px;

  /* -------------------------------------------------------------------------
     8. TRANSITIONS
     Smooth, purposeful animations
     ------------------------------------------------------------------------- */

  --vn-transition-fast: 150ms ease;
  --vn-transition-normal: 250ms ease;
  --vn-transition-slow: 350ms ease;

  /* Cubic bezier for spring-like animations */
  --vn-ease-spring: cubic-bezier(0.4, 0, 0.2, 1);
  --vn-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* -------------------------------------------------------------------------
     GRADIENTS
     ------------------------------------------------------------------------- */

  --vn-gradient-primary: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
  --vn-gradient-glow: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 100%);
  --vn-gradient-mesh: radial-gradient(at 20% 30%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
                      radial-gradient(at 80% 70%, rgba(14, 165, 233, 0.05) 0%, transparent 50%);
}

/* ============================================================================
   DARK MODE — explicit color-scheme for native form controls
   ============================================================================ */
[data-theme="dark"] {
  color-scheme: dark;
}

/* ============================================================================
   LIGHT MODE THEME
   Values from DESIGN_PHILOSOPHY.md (lines 160-171)
   ============================================================================ */

[data-theme="light"] {
  color-scheme: light;

  /* Background & Surface */
  --vn-background: #F8FAFC;
  --vn-surface: #FFFFFF;
  --vn-surface-elevated: #FFFFFF;
  --vn-surface-hover: #F1F5F9;
  --vn-border: #E2E8F0;

  /* Progress Track - Consistent grey for progress bars */
  --vn-progress-track: #E2E8F0;

  /* Text Colors */
  --vn-text-primary: #0F172A;
  --vn-text-secondary: #64748B;
  --vn-text-muted: #94A3B8;

  /* Accent Colors (adjusted for light mode) */
  --vn-accent-primary: #7C3AED;
  --vn-accent-secondary: #0EA5E9;

  /* Glass Morphism (light mode) */
  --vn-glass-bg: rgba(255, 255, 255, 0.7);
  --vn-glass-bg-hover: rgba(255, 255, 255, 0.9);
  --vn-glass-border: rgba(0, 0, 0, 0.08);

  /* Shadows (light mode - more visible) */
  --vn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --vn-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --vn-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --vn-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Glow Effects (subtle in light mode) */
  --vn-glow-primary: 0 0 20px rgba(124, 58, 237, 0.15);
  --vn-glow-accent: 0 0 20px rgba(14, 165, 233, 0.15);

  /* Gradient mesh (subtle for light mode) */
  --vn-gradient-mesh: radial-gradient(at 20% 30%, rgba(124, 58, 237, 0.04) 0%, transparent 50%),
                      radial-gradient(at 80% 70%, rgba(14, 165, 233, 0.03) 0%, transparent 50%);

  /* Severity Colors (darker for contrast on white) */
  --vn-severity-critical: #dc2626;
  --vn-severity-high: #ea580c;
  --vn-severity-medium: #ca8a04;
  --vn-severity-low: #16a34a;

  /* Sidebar Colors (Light Mode) */
  --vn-sidebar-bg: #FFFFFF;
  --vn-sidebar-border: #E2E8F0;
  --vn-sidebar-text: #64748B;
  --vn-sidebar-text-hover: #0F172A;
  --vn-sidebar-heading: #94A3B8;
  --vn-sidebar-link-hover-bg: #F1F5F9;
  --vn-sidebar-link-active-bg: rgba(124, 58, 237, 0.1);
  --vn-sidebar-link-active-text: #7C3AED;
}

/* System preference detection (used when no explicit theme is set) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --vn-background: #F8FAFC;
    --vn-surface: #FFFFFF;
    --vn-surface-elevated: #FFFFFF;
    --vn-surface-hover: #F1F5F9;
    --vn-border: #E2E8F0;

    --vn-text-primary: #0F172A;
    --vn-text-secondary: #64748B;
    --vn-text-muted: #94A3B8;

    --vn-accent-primary: #7C3AED;
    --vn-accent-secondary: #0EA5E9;

    --vn-glass-bg: rgba(255, 255, 255, 0.7);
    --vn-glass-bg-hover: rgba(255, 255, 255, 0.9);
    --vn-glass-border: rgba(0, 0, 0, 0.08);

    --vn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --vn-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --vn-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --vn-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    --vn-glow-primary: 0 0 20px rgba(124, 58, 237, 0.15);
    --vn-glow-accent: 0 0 20px rgba(14, 165, 233, 0.15);

    --vn-gradient-mesh: radial-gradient(at 20% 30%, rgba(124, 58, 237, 0.04) 0%, transparent 50%),
                        radial-gradient(at 80% 70%, rgba(14, 165, 233, 0.03) 0%, transparent 50%);

    /* Severity Colors (darker for contrast on white) */
    --vn-severity-critical: #dc2626;
    --vn-severity-high: #ea580c;
    --vn-severity-medium: #ca8a04;
    --vn-severity-low: #16a34a;

    /* Sidebar Colors (Light Mode - System Preference) */
    --vn-sidebar-bg: #FFFFFF;
    --vn-sidebar-border: #E2E8F0;
    --vn-sidebar-text: #64748B;
    --vn-sidebar-text-hover: #0F172A;
    --vn-sidebar-heading: #94A3B8;
    --vn-sidebar-link-hover-bg: #F1F5F9;
    --vn-sidebar-link-active-bg: rgba(124, 58, 237, 0.1);
    --vn-sidebar-link-active-text: #7C3AED;
  }
}


/* ============================================================================
   UTILITY CLASSES
   Common patterns for quick application
   ============================================================================ */

/* -------------------------------------------------------------------------
   Glass Panel Utilities
   ------------------------------------------------------------------------- */

.vn-glass-panel {
  background: transparent;
  backdrop-filter: var(--vn-glass-blur);
  -webkit-backdrop-filter: var(--vn-glass-blur);
  border: 1px solid var(--vn-glass-border);
  border-radius: var(--vn-border-radius-lg);
}

.vn-glass-panel:hover {
  background: transparent;
}

.vn-glass-card {
  background: var(--vn-glass-bg);
  backdrop-filter: var(--vn-glass-blur);
  -webkit-backdrop-filter: var(--vn-glass-blur);
  border-radius: var(--vn-border-radius-lg);
  padding: var(--vn-card-padding);
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Modern: no border by default */
}

.vn-glass-card:hover {
  background: var(--vn-glass-bg-hover);
  /* Modern: subtle background change only, no border highlight */
}

/* -------------------------------------------------------------------------
   Chart Utilities
   ------------------------------------------------------------------------- */

.vn-chart-wrapper {
  min-height: 160px;
}

.vn-chart-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Text Utilities
   ------------------------------------------------------------------------- */

.vn-text-primary {
  color: var(--vn-text-primary);
}

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

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

.vn-text-accent {
  color: var(--vn-accent-primary);
}

.vn-text-accent-secondary {
  color: var(--vn-accent-secondary);
}

.vn-text-destructive {
  color: var(--vn-destructive);
}

/* Text on colored backgrounds (avatars, buttons, gradients) - always white */
.vn-text-on-color {
  color: #ffffff !important;
}

/* Typography Size Utilities */
.vn-text-display {
  font-size: var(--vn-font-display);
  font-weight: var(--vn-weight-bold);
  line-height: var(--vn-leading-tight);
}

.vn-text-title {
  font-size: var(--vn-font-title);
  font-weight: var(--vn-weight-bold);
  line-height: var(--vn-leading-tight);
}

.vn-text-heading {
  font-size: var(--vn-font-heading);
  font-weight: var(--vn-weight-semibold);
  line-height: var(--vn-leading-tight);
}

.vn-text-body {
  font-size: var(--vn-font-body);
  font-weight: var(--vn-weight-normal);
  line-height: var(--vn-leading-normal);
}

.vn-text-small {
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-medium);
  line-height: var(--vn-leading-normal);
}

.vn-text-micro {
  font-size: var(--vn-font-micro);
  font-weight: var(--vn-weight-semibold);
  line-height: var(--vn-leading-normal);
}

.vn-text-mono {
  font-family: var(--vn-font-mono);
}

/* Gradient Text */
.vn-gradient-text {
  background: var(--vn-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* -------------------------------------------------------------------------
   Background Utilities
   ------------------------------------------------------------------------- */

.vn-bg-base {
  background-color: var(--vn-background);
}

.vn-bg-surface {
  background-color: var(--vn-surface);
}

.vn-bg-surface-elevated {
  background-color: var(--vn-surface-elevated);
}

.vn-bg-accent {
  background-color: var(--vn-accent-primary);
}

.vn-bg-accent-secondary {
  background-color: var(--vn-accent-secondary);
}

.vn-bg-gradient {
  background: var(--vn-gradient-primary);
}

.vn-bg-mesh {
  background: var(--vn-gradient-mesh);
}

/* -------------------------------------------------------------------------
   Border Utilities
   ------------------------------------------------------------------------- */

.vn-border {
  border: 1px solid var(--vn-border);
}

.vn-border-accent {
  border: 1px solid var(--vn-accent-primary);
}

.vn-border-radius-sm {
  border-radius: var(--vn-border-radius-sm);
}

.vn-border-radius-md {
  border-radius: var(--vn-border-radius-md);
}

.vn-border-radius-lg {
  border-radius: var(--vn-border-radius-lg);
}

.vn-border-radius-xl {
  border-radius: var(--vn-border-radius-xl);
}

.vn-border-radius-full {
  border-radius: var(--vn-border-radius-full);
}

/* -------------------------------------------------------------------------
   Shadow Utilities
   ------------------------------------------------------------------------- */

.vn-shadow-sm {
  box-shadow: var(--vn-shadow-sm);
}

.vn-shadow-md {
  box-shadow: var(--vn-shadow-md);
}

.vn-shadow-lg {
  box-shadow: var(--vn-shadow-lg);
}

.vn-shadow-xl {
  box-shadow: var(--vn-shadow-xl);
}

.vn-glow-primary {
  box-shadow: var(--vn-glow-primary);
}

.vn-glow-accent {
  box-shadow: var(--vn-glow-accent);
}

/* -------------------------------------------------------------------------
   Spacing Utilities
   ------------------------------------------------------------------------- */

/* Padding */
.vn-p-1 { padding: var(--vn-sp-1); }
.vn-p-2 { padding: var(--vn-sp-2); }
.vn-p-3 { padding: var(--vn-sp-3); }
.vn-p-4 { padding: var(--vn-sp-4); }
.vn-p-6 { padding: var(--vn-sp-6); }
.vn-p-8 { padding: var(--vn-sp-8); }
.vn-p-12 { padding: var(--vn-sp-12); }

/* Margin */
.vn-m-1 { margin: var(--vn-sp-1); }
.vn-m-2 { margin: var(--vn-sp-2); }
.vn-m-3 { margin: var(--vn-sp-3); }
.vn-m-4 { margin: var(--vn-sp-4); }
.vn-m-6 { margin: var(--vn-sp-6); }
.vn-m-8 { margin: var(--vn-sp-8); }
.vn-m-12 { margin: var(--vn-sp-12); }

/* Gap */
.vn-gap-1 { gap: var(--vn-sp-1); }
.vn-gap-2 { gap: var(--vn-sp-2); }
.vn-gap-3 { gap: var(--vn-sp-3); }
.vn-gap-4 { gap: var(--vn-sp-4); }
.vn-gap-6 { gap: var(--vn-sp-6); }
.vn-gap-8 { gap: var(--vn-sp-8); }

/* -------------------------------------------------------------------------
   Transition Utilities
   ------------------------------------------------------------------------- */

.vn-transition-fast {
  transition: all var(--vn-transition-fast);
}

.vn-transition-normal {
  transition: all var(--vn-transition-normal);
}

.vn-transition-slow {
  transition: all var(--vn-transition-slow);
}

/* -------------------------------------------------------------------------
   Severity Badge Utilities
   ------------------------------------------------------------------------- */

.vn-severity-critical {
  background-color: rgba(225, 29, 72, 0.15);
  color: var(--vn-severity-critical);
  border: 1px solid rgba(225, 29, 72, 0.3);
}

.vn-severity-high {
  background-color: rgba(245, 158, 11, 0.15);
  color: var(--vn-severity-high);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.vn-severity-medium {
  background-color: rgba(255, 213, 79, 0.15);
  color: var(--vn-severity-medium);
  border: 1px solid rgba(255, 213, 79, 0.3);
}

.vn-severity-low {
  background-color: rgba(129, 199, 132, 0.15);
  color: var(--vn-severity-low);
  border: 1px solid rgba(129, 199, 132, 0.3);
}

/* Base Badge Style */
.vn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--vn-badge-height);
  padding: var(--vn-badge-padding-y) var(--vn-badge-padding-x);
  font-size: var(--vn-font-micro);
  font-weight: var(--vn-weight-semibold);
  border-radius: var(--vn-border-radius-full);
  line-height: 1;
}

/* -------------------------------------------------------------------------
   Button Base Utilities
   ------------------------------------------------------------------------- */

.vn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--vn-button-height);
  padding: 0 var(--vn-button-padding-x);
  font-size: var(--vn-font-body);
  font-weight: var(--vn-weight-medium);
  border-radius: var(--vn-border-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--vn-transition-fast);
  outline: none;
}

/* Focus state for keyboard accessibility */
.vn-btn:focus-visible {
  outline: 2px solid var(--vn-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.25);
}

.vn-btn-primary {
  background: var(--vn-accent-primary);
  color: white;
  /* Modern: solid color, no gradient */
}

.vn-btn-primary:hover {
  background: #8B5CF6;
  /* Modern: just darken, no glow/lift */
}

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

.vn-btn-secondary {
  background: transparent;
  color: var(--vn-text-primary);
  border: 1px solid var(--vn-border);
}

.vn-btn-secondary:hover {
  background: var(--vn-glass-bg-hover);
  border-color: var(--vn-accent-primary);
}

.vn-btn-ghost {
  background: transparent;
  color: var(--vn-text-secondary);
  padding: 0 var(--vn-sp-2);
}

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

.vn-btn-danger {
  background: var(--vn-destructive);
  color: white;
}

.vn-btn-danger:hover {
  background: color-mix(in srgb, var(--vn-destructive) 85%, black);
  box-shadow: 0 0 20px color-mix(in srgb, var(--vn-destructive) 30%, transparent);
}

/* Button Sizes */
.vn-btn-sm {
  height: var(--vn-button-height-sm);
  padding: 0 var(--vn-sp-3);
  font-size: var(--vn-font-small);
}

.vn-btn-lg {
  height: var(--vn-button-height-lg);
  padding: 0 var(--vn-sp-6);
}

/* Button Links - Text buttons without background */
.vn-btn-link {
  background: transparent;
  border: none;
  color: var(--vn-text-secondary);
  cursor: pointer;
  transition: color var(--vn-transition-fast);
  padding: 0;
}

.vn-btn-link:hover {
  color: var(--vn-text-primary);
}

.vn-btn-link--primary {
  color: var(--vn-accent-primary);
}

.vn-btn-link--primary:hover {
  color: var(--vn-accent-secondary);
}

.vn-btn-link--danger {
  color: var(--vn-destructive);
}

.vn-btn-link--danger:hover {
  color: color-mix(in srgb, var(--vn-destructive) 85%, black);
}

/* -------------------------------------------------------------------------
   Icon Utilities
   ------------------------------------------------------------------------- */

.vn-icon-accent {
  color: var(--vn-accent-primary);
}

.vn-icon-secondary {
  color: var(--vn-text-secondary);
}

.vn-icon-muted {
  color: var(--vn-text-muted);
}

/* -------------------------------------------------------------------------
   Input Base Utilities
   ------------------------------------------------------------------------- */

.vn-input {
  height: var(--vn-input-height);
  padding: 0 var(--vn-sp-3);
  background: var(--vn-surface);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-border-radius-md);
  color: var(--vn-text-primary);
  font-size: var(--vn-font-body);
  font-family: var(--vn-font-primary);
  transition: all var(--vn-transition-fast);
}

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

.vn-input:focus {
  outline: none;
  border-color: var(--vn-accent-primary);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

/* Enhanced focus for keyboard navigation */
.vn-input:focus-visible {
  outline: 2px solid var(--vn-accent-primary);
  outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   Table Row Utility
   ------------------------------------------------------------------------- */

.vn-table-row {
  height: var(--vn-table-row-height);
  border-bottom: 1px solid var(--vn-border);
  transition: background var(--vn-transition-fast);
}

.vn-table-row:hover {
  background: var(--vn-glass-bg-hover);
}

/* Lightweight hover row - just the hover effect without height/border constraints */
.vn-hover-row {
  transition: background var(--vn-transition-fast);
}

.vn-hover-row:hover {
  background: var(--vn-glass-bg-hover);
}

/* Hover surface - generic hover for interactive surface elements */
.vn-hover-surface {
  transition: background var(--vn-transition-fast);
}

.vn-hover-surface:hover {
  background: var(--vn-surface-elevated);
}

/* Hover elevated - for elements that start at surface-elevated and need a visible hover */
.vn-hover-elevated {
  transition: background var(--vn-transition-fast);
}

.vn-hover-elevated:hover {
  background: var(--vn-surface-hover);
}

/* Progress bar track background */
.vn-bg-progress-track {
  background: var(--vn-progress-track);
}

/* Tag / chip background */
.vn-bg-tag {
  background: var(--vn-surface-elevated);
  color: var(--vn-text-secondary);
}

/* Border-color only utility (use with Tailwind border-width classes) */
.vn-border-color {
  border-color: var(--vn-border);
}

/* Loading overlay background */
.vn-bg-overlay {
  background: var(--vn-background);
}

/* -------------------------------------------------------------------------
   Card Utilities
   ------------------------------------------------------------------------- */

.vn-card {
  background: transparent;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-border-radius-lg);
  padding: var(--vn-card-padding);
}

.vn-metric-card {
  background: transparent;
  backdrop-filter: var(--vn-glass-blur);
  -webkit-backdrop-filter: var(--vn-glass-blur);
  border-radius: var(--vn-border-radius-lg);
  padding: var(--vn-card-padding);
  min-height: var(--vn-metric-card-height);
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Modern: no border */
}

.vn-metric-card:hover {
  background: transparent;
  transform: translateY(-1px);
  /* Modern: subtle lift only */
}

/* -------------------------------------------------------------------------
   Layout Utilities
   ------------------------------------------------------------------------- */

.vn-container {
  max-width: var(--vn-max-width-content);
  margin: 0 auto;
  padding: 0 var(--vn-sp-4);
}

.vn-container-narrow {
  max-width: var(--vn-max-width-narrow);
}

.vn-container-wide {
  max-width: var(--vn-max-width-wide);
}

/* Flexbox */
.vn-flex {
  display: flex;
}

.vn-flex-col {
  flex-direction: column;
}

.vn-items-center {
  align-items: center;
}

.vn-justify-center {
  justify-content: center;
}

.vn-justify-between {
  justify-content: space-between;
}

/* Grid */
.vn-grid {
  display: grid;
}

/* -------------------------------------------------------------------------
   Focus States (Accessibility)
   ------------------------------------------------------------------------- */

.vn-focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--vn-background), 0 0 0 4px var(--vn-accent-primary);
}

.vn-focus-ring:focus:not(:focus-visible) {
  box-shadow: none;
}

.vn-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--vn-background), 0 0 0 4px var(--vn-accent-primary);
}

/* -------------------------------------------------------------------------
   Animation Utilities
   ------------------------------------------------------------------------- */

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

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

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

.vn-animate-fade-in {
  animation: vn-fade-in var(--vn-transition-normal) var(--vn-ease-spring);
}

.vn-animate-slide-in {
  animation: vn-slide-in-right var(--vn-transition-normal) var(--vn-ease-spring);
}

.vn-animate-scale-in {
  animation: vn-scale-in var(--vn-transition-fast) var(--vn-ease-spring);
}

/* -------------------------------------------------------------------------
   Scrollbar Styling (Dark Theme)
   ------------------------------------------------------------------------- */

.vn-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.vn-scrollbar::-webkit-scrollbar-track {
  background: var(--vn-surface);
  border-radius: var(--vn-border-radius-sm);
}

.vn-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--vn-border-radius-sm);
}

.vn-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* -------------------------------------------------------------------------
   Skeleton Loading
   ------------------------------------------------------------------------- */

@keyframes vn-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.vn-skeleton {
  background: linear-gradient(
    90deg,
    var(--vn-surface) 25%,
    var(--vn-surface-elevated) 50%,
    var(--vn-surface) 75%
  );
  background-size: 200% 100%;
  animation: vn-shimmer 1.5s infinite;
  border-radius: var(--vn-border-radius-sm);
}

/* -------------------------------------------------------------------------
   Status Indicators
   ------------------------------------------------------------------------- */

.vn-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--vn-border-radius-full);
}

.vn-status-dot--critical {
  background-color: var(--vn-severity-critical);
  box-shadow: 0 0 8px var(--vn-severity-critical);
}

.vn-status-dot--high {
  background-color: var(--vn-severity-high);
}

.vn-status-dot--medium {
  background-color: var(--vn-severity-medium);
}

.vn-status-dot--low {
  background-color: var(--vn-severity-low);
}

.vn-status-dot--success {
  background-color: var(--vn-success);
}

/* -------------------------------------------------------------------------
   Divider
   ------------------------------------------------------------------------- */

.vn-divider {
  height: 1px;
  background: var(--vn-border);
  border: none;
  margin: var(--vn-sp-4) 0;
}

.vn-divider-vertical {
  width: 1px;
  height: 100%;
  background: var(--vn-border);
}

/* ============================================================================
   ADVANCED COMPONENTS
   Modal, Tooltip, Dropdown, Tabs, Progress, Toast, Tag
   ============================================================================ */

/* -------------------------------------------------------------------------
   Modal / Dialog
   ------------------------------------------------------------------------- */

.vn-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

[data-theme="light"] .vn-modal-overlay {
  background: rgba(0, 0, 0, 0.4);
}

.vn-modal {
  background: var(--vn-surface);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-border-radius-xl);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--vn-shadow-xl);
  animation: vn-scale-in var(--vn-transition-normal) var(--vn-ease-spring);
}

[data-theme="dark"] .vn-modal {
  background: #1a1625;
  border: 1px solid #2d2640;
}

.vn-modal-header {
  padding: var(--vn-sp-4) var(--vn-sp-6);
  border-bottom: 1px solid var(--vn-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vn-modal-header h2,
.vn-modal-header h3 {
  font-size: var(--vn-font-heading);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
  margin: 0;
}

.vn-modal-body {
  padding: var(--vn-sp-6);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  color: var(--vn-text-secondary);
  font-size: var(--vn-font-body);
  line-height: var(--vn-leading-normal);
}

.vn-modal-footer {
  padding: var(--vn-sp-4) var(--vn-sp-6);
  border-top: 1px solid var(--vn-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--vn-sp-3);
}

/* -------------------------------------------------------------------------
   Tooltip
   ------------------------------------------------------------------------- */

.vn-tooltip {
  position: absolute;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-border-radius-sm);
  padding: var(--vn-sp-1) var(--vn-sp-2);
  font-size: 12px;
  color: var(--vn-text-primary);
  white-space: nowrap;
  z-index: 1100;
  box-shadow: var(--vn-shadow-md);
  pointer-events: none;
}

.vn-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: rgba(20, 20, 30, 0.95);
}

.vn-tooltip--bottom::before {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: rgba(20, 20, 30, 0.95);
}

.vn-tooltip--left::before {
  bottom: auto;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-bottom-color: transparent;
  border-left-color: rgba(20, 20, 30, 0.95);
}

.vn-tooltip--right::before {
  bottom: auto;
  left: auto;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-bottom-color: transparent;
  border-right-color: rgba(20, 20, 30, 0.95);
}

/* -------------------------------------------------------------------------
   Dropdown Menu
   ------------------------------------------------------------------------- */

.vn-dropdown {
  position: relative;
  display: inline-block;
}

.vn-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--vn-glass-bg);
  backdrop-filter: var(--vn-glass-blur);
  -webkit-backdrop-filter: var(--vn-glass-blur);
  border: 1px solid var(--vn-glass-border);
  border-radius: var(--vn-border-radius-md);
  padding: var(--vn-sp-1) 0;
  margin-top: var(--vn-sp-1);
  box-shadow: var(--vn-shadow-lg);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--vn-transition-fast);
}

.vn-dropdown.is-open .vn-dropdown-menu,
.vn-dropdown:focus-within .vn-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vn-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-2);
  padding: var(--vn-sp-2) var(--vn-sp-4);
  font-size: var(--vn-font-body);
  color: var(--vn-text-secondary);
  cursor: pointer;
  transition: all var(--vn-transition-fast);
}

.vn-dropdown-item:hover {
  background: var(--vn-glass-bg-hover);
  color: var(--vn-text-primary);
}

.vn-dropdown-item--active {
  color: var(--vn-accent-primary);
}

.vn-dropdown-item--danger {
  color: var(--vn-destructive);
}

.vn-dropdown-item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.vn-dropdown-divider {
  height: 1px;
  background: var(--vn-border);
  margin: var(--vn-sp-1) 0;
}

/* -------------------------------------------------------------------------
   Tabs
   ------------------------------------------------------------------------- */

.vn-tabs {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-1);
  border-bottom: 1px solid var(--vn-border);
}

.vn-tab {
  position: relative;
  padding: var(--vn-sp-3) var(--vn-sp-4);
  font-size: var(--vn-font-body);
  font-weight: var(--vn-weight-medium);
  color: var(--vn-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--vn-transition-fast);
}

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

.vn-tab--active {
  color: var(--vn-accent-primary);
}

.vn-tab--active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vn-accent-primary);
  border-radius: var(--vn-border-radius-full);
}

.vn-tab-content {
  padding: var(--vn-sp-4) 0;
}

/* -------------------------------------------------------------------------
   Progress Bar
   ------------------------------------------------------------------------- */

.vn-progress {
  height: 4px;
  background: var(--vn-progress-track);
  border-radius: var(--vn-border-radius-full);
  overflow: hidden;
}

.vn-progress-bar {
  height: 100%;
  background: var(--vn-accent-primary);
  border-radius: var(--vn-border-radius-full);
  transition: width var(--vn-transition-normal);
}

.vn-progress-bar--gradient {
  background: var(--vn-gradient-primary);
}

.vn-progress-bar--success {
  background: var(--vn-success);
}

.vn-progress-bar--warning {
  background: var(--vn-warning);
}

.vn-progress-bar--danger {
  background: var(--vn-destructive);
}

/* Severity-specific progress bars */
.vn-progress-bar--critical {
  background: var(--vn-severity-critical);
}

.vn-progress-bar--high {
  background: var(--vn-severity-high);
}

.vn-progress-bar--medium {
  background: var(--vn-severity-medium);
}

.vn-progress-bar--low {
  background: var(--vn-severity-low);
}

/* Solid background utilities for direct use */
.vn-bar-critical { background-color: var(--vn-severity-critical); }
.vn-bar-high { background-color: var(--vn-severity-high); }
.vn-bar-medium { background-color: var(--vn-severity-medium); }
.vn-bar-low { background-color: var(--vn-severity-low); }
.vn-bar-success { background-color: var(--vn-success); }
.vn-bar-warning { background-color: var(--vn-severity-high); }

/* Monochromatic indicator dots */
.vn-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--vn-border-radius-full);
  background-color: var(--vn-text-muted);
}

/* -------------------------------------------------------------------------
   Toast Notifications
   ------------------------------------------------------------------------- */

@keyframes vn-toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes vn-toast-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.vn-toast-container {
  position: fixed;
  bottom: var(--vn-sp-6);
  right: var(--vn-sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--vn-sp-3);
  z-index: 1200;
}

.vn-toast-container--top {
  bottom: auto;
  top: var(--vn-sp-6);
}

.vn-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--vn-sp-3);
  min-width: 300px;
  max-width: 420px;
  padding: var(--vn-sp-4);
  background: var(--vn-glass-bg);
  backdrop-filter: var(--vn-glass-blur);
  -webkit-backdrop-filter: var(--vn-glass-blur);
  border: 1px solid var(--vn-glass-border);
  border-radius: var(--vn-border-radius-md);
  box-shadow: var(--vn-shadow-lg);
  animation: vn-toast-slide-in var(--vn-transition-normal) var(--vn-ease-spring);
}

.vn-toast.is-exiting {
  animation: vn-toast-slide-out var(--vn-transition-fast) ease-in forwards;
}

.vn-toast--success {
  border-left: 3px solid var(--vn-success);
}

.vn-toast--error {
  border-left: 3px solid var(--vn-destructive);
}

.vn-toast--warning {
  border-left: 3px solid var(--vn-warning);
}

.vn-toast--info {
  border-left: 3px solid var(--vn-info);
}

.vn-toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.vn-toast--success .vn-toast-icon {
  color: var(--vn-success);
}

.vn-toast--error .vn-toast-icon {
  color: var(--vn-destructive);
}

.vn-toast--warning .vn-toast-icon {
  color: var(--vn-warning);
}

.vn-toast--info .vn-toast-icon {
  color: var(--vn-info);
}

.vn-toast-content {
  flex: 1;
}

.vn-toast-title {
  font-size: var(--vn-font-body);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
  margin-bottom: var(--vn-sp-1);
}

.vn-toast-message {
  font-size: var(--vn-font-small);
  color: var(--vn-text-secondary);
  line-height: var(--vn-leading-normal);
}

.vn-toast-close {
  flex-shrink: 0;
  padding: var(--vn-sp-1);
  background: transparent;
  border: none;
  color: var(--vn-text-muted);
  cursor: pointer;
  transition: color var(--vn-transition-fast);
}

.vn-toast-close:hover {
  color: var(--vn-text-primary);
}

/* -------------------------------------------------------------------------
   Tag / Chip
   ------------------------------------------------------------------------- */

.vn-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--vn-sp-1);
  height: 22px;
  padding: 0 var(--vn-sp-2);
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-medium);
  color: var(--vn-text-secondary);
  background: var(--vn-surface);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-border-radius-sm);
  white-space: nowrap;
}

.vn-tag--primary {
  background: rgba(124, 58, 237, 0.15);
  color: var(--vn-accent-primary);
  border-color: rgba(124, 58, 237, 0.3);
}

.vn-tag--success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--vn-success);
  border-color: rgba(16, 185, 129, 0.3);
}

.vn-tag--warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--vn-warning);
  border-color: rgba(245, 158, 11, 0.3);
}

.vn-tag--danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--vn-destructive);
  border-color: rgba(239, 68, 68, 0.3);
}

.vn-tag--removable {
  padding-right: var(--vn-sp-1);
}

.vn-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  border-radius: var(--vn-border-radius-sm);
  transition: all var(--vn-transition-fast);
}

.vn-tag-remove:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------------------
   Loading Spinner
   ------------------------------------------------------------------------- */

@keyframes vn-spin {
  to { transform: rotate(360deg); }
}

.vn-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--vn-border);
  border-top-color: var(--vn-accent-primary);
  border-radius: 50%;
  animation: vn-spin 0.8s linear infinite;
}

.vn-spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.vn-spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.vn-spinner--xl {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* Loading Overlay */
.vn-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 18, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--vn-sp-3);
  z-index: 100;
}

.vn-loading-text {
  font-size: var(--vn-font-small);
  color: var(--vn-text-secondary);
}

/* Button Loading State */
.vn-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.vn-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: vn-spin 0.8s linear infinite;
}

/* Skeleton Variants */
.vn-skeleton-text {
  height: 14px;
  margin-bottom: var(--vn-sp-2);
}

.vn-skeleton-text:last-child {
  width: 60%;
}

.vn-skeleton-heading {
  height: 24px;
  width: 40%;
  margin-bottom: var(--vn-sp-3);
}

.vn-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.vn-skeleton-card {
  height: 120px;
  border-radius: var(--vn-border-radius-lg);
}

.vn-skeleton-row {
  height: var(--vn-table-row-height);
  margin-bottom: var(--vn-sp-2);
}

/* Table Skeleton */
.vn-skeleton-cell {
  height: 12px;
  border-radius: var(--vn-border-radius-sm);
  display: inline-block;
}

.vn-skeleton-table-row td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--vn-border);
}

.vn-skeleton-table-row:nth-child(1) .vn-skeleton { animation-delay: 0ms; }
.vn-skeleton-table-row:nth-child(2) .vn-skeleton { animation-delay: 80ms; }
.vn-skeleton-table-row:nth-child(3) .vn-skeleton { animation-delay: 160ms; }
.vn-skeleton-table-row:nth-child(4) .vn-skeleton { animation-delay: 240ms; }
.vn-skeleton-table-row:nth-child(5) .vn-skeleton { animation-delay: 320ms; }
.vn-skeleton-table-row:nth-child(6) .vn-skeleton { animation-delay: 400ms; }
.vn-skeleton-table-row:nth-child(7) .vn-skeleton { animation-delay: 480ms; }
.vn-skeleton-table-row:nth-child(8) .vn-skeleton { animation-delay: 560ms; }

/* Pulse animation alternative */
@keyframes vn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.vn-pulse {
  animation: vn-pulse 2s ease-in-out infinite;
}

/* Progress indicator (indeterminate) */
.vn-progress--indeterminate .vn-progress-bar {
  width: 30%;
  animation: vn-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes vn-progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Empty State */
.vn-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--vn-sp-12);
  text-align: center;
}

.vn-empty-state-icon {
  width: 64px;
  height: 64px;
  color: var(--vn-text-muted);
  margin-bottom: var(--vn-sp-4);
}

.vn-empty-state-title {
  font-size: var(--vn-font-heading);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
  margin-bottom: var(--vn-sp-2);
}

.vn-empty-state-description {
  font-size: var(--vn-font-body);
  color: var(--vn-text-secondary);
  max-width: 320px;
  margin-bottom: var(--vn-sp-6);
}

/* -------------------------------------------------------------------------
   Detail Panel (420px Slide-out)
   ------------------------------------------------------------------------- */

.vn-detail-panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: all var(--vn-transition-normal);
}

.vn-detail-panel-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.vn-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--vn-background);
  border-left: 1px solid var(--vn-border);
  z-index: 1051;
  transform: translateX(100%);
  transition: transform var(--vn-transition-normal) var(--vn-ease-spring);
  display: flex;
  flex-direction: column;
  box-shadow: var(--vn-shadow-xl);
}

.vn-detail-panel.is-open {
  transform: translateX(0);
}

.vn-detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vn-sp-4) var(--vn-sp-6);
  border-bottom: 1px solid var(--vn-border);
  background: var(--vn-surface);
}

.vn-detail-panel-title {
  font-size: var(--vn-font-heading);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-primary);
  margin: 0;
}

.vn-detail-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--vn-text-muted);
  cursor: pointer;
  border-radius: var(--vn-border-radius-md);
  transition: all var(--vn-transition-fast);
}

.vn-detail-panel-close:hover {
  background: var(--vn-surface-elevated);
  color: var(--vn-text-primary);
}

.vn-detail-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--vn-sp-6);
}

.vn-detail-panel-section {
  margin-bottom: var(--vn-sp-6);
}

.vn-detail-panel-section:last-child {
  margin-bottom: 0;
}

.vn-detail-panel-section-title {
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vn-sp-3);
}

.vn-detail-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--vn-sp-2) 0;
  border-bottom: 1px solid var(--vn-border);
}

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

.vn-detail-panel-label {
  font-size: var(--vn-font-small);
  color: var(--vn-text-muted);
}

.vn-detail-panel-value {
  font-size: var(--vn-font-small);
  color: var(--vn-text-primary);
  text-align: right;
  max-width: 60%;
}

.vn-detail-panel-footer {
  padding: var(--vn-sp-4) var(--vn-sp-6);
  border-top: 1px solid var(--vn-border);
  background: var(--vn-surface);
  display: flex;
  gap: var(--vn-sp-3);
}

/* -------------------------------------------------------------------------
   Enhanced Data Table
   ------------------------------------------------------------------------- */

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

.vn-table thead {
  background: var(--vn-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.vn-table th {
  padding: var(--vn-sp-3) var(--vn-sp-4);
  text-align: left;
  font-size: var(--vn-font-micro);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--vn-border);
  white-space: nowrap;
}

.vn-table th.is-sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--vn-transition-fast);
}

.vn-table th.is-sortable:hover {
  color: var(--vn-text-primary);
}

.vn-table th .vn-sort-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: var(--vn-sp-1);
  vertical-align: middle;
  opacity: 0.3;
  transition: opacity var(--vn-transition-fast);
}

.vn-table th.is-sorted .vn-sort-icon {
  opacity: 1;
  color: var(--vn-accent-primary);
}

.vn-table th.is-sorted-desc .vn-sort-icon {
  transform: rotate(180deg);
}

.vn-table td {
  padding: var(--vn-sp-3) var(--vn-sp-4);
  font-size: var(--vn-font-small);
  color: var(--vn-text-secondary);
  border-bottom: 1px solid var(--vn-border);
  vertical-align: middle;
}

.vn-table tbody tr {
  transition: background var(--vn-transition-fast);
}

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

.vn-table tbody tr.is-selected {
  background: rgba(124, 58, 237, 0.1);
}

.vn-table tbody tr.is-clickable {
  cursor: pointer;
}

/* Checkbox column */
.vn-table-checkbox {
  width: 40px;
  text-align: center;
}

.vn-table-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--vn-accent-primary);
}

/* Actions column */
.vn-table-actions {
  width: 100px;
  text-align: right;
}

/* Pagination */
.vn-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vn-sp-4);
  border-top: 1px solid var(--vn-border);
}

.vn-pagination-info {
  font-size: var(--vn-font-small);
  color: var(--vn-text-muted);
}

.vn-pagination-controls {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-2);
}

.vn-pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-border-radius-md);
  color: var(--vn-text-secondary);
  cursor: pointer;
  transition: all var(--vn-transition-fast);
}

.vn-pagination-btn:hover:not(:disabled) {
  background: var(--vn-surface-elevated);
  color: var(--vn-text-primary);
  border-color: var(--vn-accent-primary);
}

.vn-pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.vn-pagination-btn.is-active {
  background: var(--vn-accent-primary);
  border-color: var(--vn-accent-primary);
  color: white;
}

.vn-pagination-pages {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-1);
}

.vn-pagination-ellipsis {
  padding: 0 var(--vn-sp-2);
  color: var(--vn-text-muted);
}

/* Per page selector */
.vn-per-page {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-2);
  font-size: var(--vn-font-small);
  color: var(--vn-text-muted);
}

.vn-per-page select {
  padding: var(--vn-sp-1) var(--vn-sp-2);
  background: var(--vn-surface);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-border-radius-sm);
  color: var(--vn-text-primary);
  font-size: var(--vn-font-small);
}

/* Table toolbar */
.vn-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vn-sp-4);
  border-bottom: 1px solid var(--vn-border);
}

.vn-table-search {
  position: relative;
  width: 240px;
}

.vn-table-search input {
  width: 100%;
  padding-left: var(--vn-sp-8);
}

.vn-table-search-icon {
  position: absolute;
  left: var(--vn-sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--vn-text-muted);
  pointer-events: none;
}

.vn-table-filters {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-2);
}

/* Bulk actions bar */
.vn-bulk-actions {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-4);
  padding: var(--vn-sp-3) var(--vn-sp-4);
  background: var(--vn-accent-primary);
  color: white;
  font-size: var(--vn-font-small);
}

.vn-bulk-actions-count {
  font-weight: var(--vn-weight-semibold);
}

.vn-bulk-actions-btns {
  display: flex;
  gap: var(--vn-sp-2);
  margin-left: auto;
}

/* -------------------------------------------------------------------------
   Form Validation States
   ------------------------------------------------------------------------- */

.vn-input.is-valid {
  border-color: var(--vn-success);
}

.vn-input.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.vn-input.is-invalid {
  border-color: var(--vn-destructive);
}

.vn-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.vn-form-group {
  margin-bottom: var(--vn-sp-4);
}

.vn-form-label {
  display: block;
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-medium);
  color: var(--vn-text-primary);
  margin-bottom: var(--vn-sp-2);
}

.vn-form-label.is-required::after {
  content: ' *';
  color: var(--vn-destructive);
}

.vn-form-hint {
  font-size: var(--vn-font-micro);
  color: var(--vn-text-muted);
  margin-top: var(--vn-sp-1);
}

.vn-form-error {
  font-size: var(--vn-font-micro);
  color: var(--vn-destructive);
  margin-top: var(--vn-sp-1);
  display: flex;
  align-items: center;
  gap: var(--vn-sp-1);
}

.vn-form-success {
  font-size: var(--vn-font-micro);
  color: var(--vn-success);
  margin-top: var(--vn-sp-1);
  display: flex;
  align-items: center;
  gap: var(--vn-sp-1);
}

/* Checkbox and Radio */
.vn-checkbox,
.vn-radio {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-2);
  cursor: pointer;
}

.vn-checkbox input,
.vn-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--vn-accent-primary);
  cursor: pointer;
}

.vn-checkbox-label,
.vn-radio-label {
  font-size: var(--vn-font-body);
  color: var(--vn-text-secondary);
}

/* Select dropdown styling */
.vn-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

/* Textarea */
.vn-textarea {
  min-height: 100px;
  padding: var(--vn-sp-3);
  resize: vertical;
}

/* Input with icon */
.vn-input-icon {
  position: relative;
}

.vn-input-icon .vn-input {
  padding-left: var(--vn-sp-10);
}

.vn-input-icon-left {
  position: absolute;
  left: var(--vn-sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--vn-text-muted);
  pointer-events: none;
}

.vn-input-icon-right {
  position: absolute;
  right: var(--vn-sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--vn-text-muted);
}

/* Character counter */
.vn-char-counter {
  font-size: var(--vn-font-micro);
  color: var(--vn-text-muted);
  text-align: right;
  margin-top: var(--vn-sp-1);
}

.vn-char-counter.is-warning {
  color: var(--vn-warning);
}

.vn-char-counter.is-error {
  color: var(--vn-destructive);
}

/* -------------------------------------------------------------------------
   Keyboard Shortcuts Help
   ------------------------------------------------------------------------- */

.vn-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--vn-sp-2);
  background: var(--vn-surface-elevated);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-border-radius-sm);
  font-family: var(--vn-font-mono);
  font-size: var(--vn-font-micro);
  font-weight: var(--vn-weight-medium);
  color: var(--vn-text-secondary);
  box-shadow: 0 2px 0 var(--vn-border);
}

.vn-shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--vn-sp-3) 0;
  border-bottom: 1px solid var(--vn-border);
}

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

.vn-shortcut-keys {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-1);
}

.vn-shortcut-desc {
  font-size: var(--vn-font-small);
  color: var(--vn-text-secondary);
}

.vn-shortcuts-section {
  margin-bottom: var(--vn-sp-6);
}

.vn-shortcuts-section:last-child {
  margin-bottom: 0;
}

.vn-shortcuts-section-title {
  font-size: var(--vn-font-small);
  font-weight: var(--vn-weight-semibold);
  color: var(--vn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--vn-sp-3);
}

/* -------------------------------------------------------------------------
   Theme-Aware Icon Container Backgrounds
   Use these for icon backgrounds in stat cards and feature cards
   ------------------------------------------------------------------------- */

.vn-icon-bg-purple {
  background: rgba(124, 58, 237, 0.15);
}

.vn-icon-bg-violet {
  background: rgba(139, 92, 246, 0.15);
}

.vn-icon-bg-blue {
  background: rgba(14, 165, 233, 0.15);
}

.vn-icon-bg-green {
  background: rgba(16, 185, 129, 0.15);
}

.vn-icon-bg-red {
  background: rgba(239, 68, 68, 0.15);
}

.vn-icon-bg-orange {
  background: rgba(249, 115, 22, 0.15);
}

.vn-icon-bg-yellow {
  background: rgba(234, 179, 8, 0.15);
}

/* Light mode adjustments for icon backgrounds */
[data-theme="light"] .vn-icon-bg-purple,
[data-theme="light"] .vn-icon-bg-violet,
[data-theme="light"] .vn-icon-bg-blue,
[data-theme="light"] .vn-icon-bg-green,
[data-theme="light"] .vn-icon-bg-red,
[data-theme="light"] .vn-icon-bg-orange,
[data-theme="light"] .vn-icon-bg-yellow {
  /* Slightly more opaque in light mode for visibility */
}

.vn-icon-bg-purple { background: rgba(124, 58, 237, 0.12); }
.vn-icon-bg-violet { background: rgba(139, 92, 246, 0.12); }
.vn-icon-bg-blue { background: rgba(14, 165, 233, 0.12); }
.vn-icon-bg-green { background: rgba(16, 185, 129, 0.12); }
.vn-icon-bg-red { background: rgba(239, 68, 68, 0.12); }
.vn-icon-bg-orange { background: rgba(249, 115, 22, 0.12); }
.vn-icon-bg-yellow { background: rgba(234, 179, 8, 0.12); }

[data-theme="light"] .vn-icon-bg-purple { background: rgba(124, 58, 237, 0.1); }
[data-theme="light"] .vn-icon-bg-violet { background: rgba(139, 92, 246, 0.1); }
[data-theme="light"] .vn-icon-bg-blue { background: rgba(14, 165, 233, 0.1); }
[data-theme="light"] .vn-icon-bg-green { background: rgba(16, 185, 129, 0.1); }
[data-theme="light"] .vn-icon-bg-red { background: rgba(239, 68, 68, 0.1); }
[data-theme="light"] .vn-icon-bg-orange { background: rgba(249, 115, 22, 0.1); }
[data-theme="light"] .vn-icon-bg-yellow { background: rgba(234, 179, 8, 0.1); }

/* -------------------------------------------------------------------------
   Theme-Aware Icon Colors
   Use these for icons in feature/stat cards
   ------------------------------------------------------------------------- */

.vn-icon-purple { color: #A78BFA; }
.vn-icon-violet { color: #8B5CF6; }
.vn-icon-blue { color: #38BDF8; }
.vn-icon-green { color: #34D399; }
.vn-icon-red { color: #F87171; }
.vn-icon-orange { color: #FB923C; }
.vn-icon-yellow { color: #FBBF24; }

[data-theme="light"] .vn-icon-purple { color: #7C3AED; }
[data-theme="light"] .vn-icon-violet { color: #6D28D9; }
[data-theme="light"] .vn-icon-blue { color: #0284C7; }
[data-theme="light"] .vn-icon-green { color: var(--vn-severity-low); }
[data-theme="light"] .vn-icon-red { color: var(--vn-severity-critical); }
[data-theme="light"] .vn-icon-orange { color: var(--vn-severity-high); }
[data-theme="light"] .vn-icon-yellow { color: var(--vn-severity-medium); }

/* -------------------------------------------------------------------------
   Theme-Aware Table Backgrounds
   ------------------------------------------------------------------------- */

.vn-table-header-bg {
  background: var(--vn-surface);
}

.vn-table-row-bg {
  background: transparent;
}

.vn-table-row-bg:hover {
  background: var(--vn-glass-bg-hover);
}

/* -------------------------------------------------------------------------
   Theme-Aware Status Badges (Compliance, etc.)
   ------------------------------------------------------------------------- */

.vn-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--vn-font-micro);
  font-weight: var(--vn-weight-medium);
  padding: 2px 8px;
  border-radius: var(--vn-border-radius-full);
}

.vn-status-badge--success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--vn-success);
}

.vn-status-badge--warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--vn-warning);
}

.vn-status-badge--danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--vn-destructive);
}

.vn-status-badge--info {
  background: rgba(14, 165, 233, 0.15);
  color: var(--vn-info);
}

[data-theme="light"] .vn-status-badge--success {
  background: color-mix(in srgb, var(--vn-severity-low) 10%, transparent);
  color: var(--vn-severity-low);
}

[data-theme="light"] .vn-status-badge--warning {
  background: color-mix(in srgb, var(--vn-severity-high) 10%, transparent);
  color: var(--vn-severity-high);
}

[data-theme="light"] .vn-status-badge--danger {
  background: color-mix(in srgb, var(--vn-severity-critical) 10%, transparent);
  color: var(--vn-severity-critical);
}

[data-theme="light"] .vn-status-badge--info {
  background: rgba(14, 165, 233, 0.1);
  color: #0284C7;
}

/* -------------------------------------------------------------------------
   Theme-Aware Progress Bars (for compliance sections)
   ------------------------------------------------------------------------- */

.vn-progress-track {
  width: 100%;
  height: 8px;
  background: var(--vn-progress-track);
  border-radius: var(--vn-border-radius-full);
  overflow: hidden;
}

.vn-progress-fill {
  height: 100%;
  border-radius: var(--vn-border-radius-full);
  transition: width var(--vn-transition-normal);
}

.vn-progress-fill--success {
  background: var(--vn-success);
}

.vn-progress-fill--warning {
  background: var(--vn-warning);
}

.vn-progress-fill--danger {
  background: var(--vn-destructive);
}

.vn-progress-fill--primary {
  background: var(--vn-accent-primary);
}

/* -------------------------------------------------------------------------
   Theme-Aware Message Boxes (for form feedback)
   ------------------------------------------------------------------------- */

.vn-message {
  padding: var(--vn-sp-3);
  border-radius: var(--vn-border-radius-md);
  font-size: var(--vn-font-small);
}

.vn-message--success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: var(--vn-success);
}

.vn-message--error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--vn-destructive);
}

.vn-message--warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--vn-warning);
}

.vn-message--info {
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.3);
  color: var(--vn-info);
}

/* -------------------------------------------------------------------------
   Theme-Aware Severity Cards (for dashboard vulnerability summary)
   These maintain visibility in both light and dark modes
   ------------------------------------------------------------------------- */

.vn-severity-card {
  border-radius: var(--vn-border-radius-md);
  padding: var(--vn-sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--vn-transition-fast);
}

.vn-severity-card--critical {
  background: var(--vn-glass-bg);
  border-left: 4px solid var(--vn-severity-critical);
  /* Modern: glass background with colored left accent */
}

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

.vn-severity-card--critical .vn-severity-icon,
.vn-severity-card--critical .vn-severity-count,
.vn-severity-card--critical .vn-severity-label {
  color: var(--vn-severity-critical);
}

.vn-severity-card--high {
  background: var(--vn-glass-bg);
  border-left: 4px solid var(--vn-severity-high);
  /* Modern: glass background with colored left accent */
}

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

.vn-severity-card--high .vn-severity-icon,
.vn-severity-card--high .vn-severity-count,
.vn-severity-card--high .vn-severity-label {
  color: var(--vn-severity-high);
}

.vn-severity-card--medium {
  background: var(--vn-glass-bg);
  border-left: 4px solid var(--vn-severity-medium);
  /* Modern: glass background with colored left accent */
}

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

.vn-severity-card--medium .vn-severity-icon,
.vn-severity-card--medium .vn-severity-count,
.vn-severity-card--medium .vn-severity-label {
  color: var(--vn-severity-medium);
}

.vn-severity-card--low {
  background: var(--vn-glass-bg);
  border-left: 4px solid var(--vn-severity-low);
  /* Modern: glass background with colored left accent */
}

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

.vn-severity-card--low .vn-severity-icon,
.vn-severity-card--low .vn-severity-count,
.vn-severity-card--low .vn-severity-label {
  color: var(--vn-severity-low);
}

.vn-severity-icon {
  width: 20px;
  height: 20px;
  margin-bottom: var(--vn-sp-1);
}

.vn-severity-count {
  font-size: 1.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  /* Modern: lighter weight, tabular numbers */
}

.vn-severity-label {
  font-size: var(--vn-font-micro);
}

/* Light mode - glass backgrounds (same as dark, inherits from CSS variables) */
[data-theme="light"] .vn-severity-card--critical,
[data-theme="light"] .vn-severity-card--high,
[data-theme="light"] .vn-severity-card--medium,
[data-theme="light"] .vn-severity-card--low {
  background: var(--vn-glass-bg);
}
[data-theme="light"] .vn-severity-card--critical:hover,
[data-theme="light"] .vn-severity-card--high:hover,
[data-theme="light"] .vn-severity-card--medium:hover,
[data-theme="light"] .vn-severity-card--low:hover {
  background: var(--vn-glass-bg-hover);
}

/* -------------------------------------------------------------------------
   Theme-Aware Threat Feed Items
   ------------------------------------------------------------------------- */

.vn-threat-item,
.vn-cve-item {
  height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.vn-threat-item {
  background: var(--vn-glass-bg);
  border: 1px solid var(--vn-glass-border);
  border-left: 3px solid var(--vn-severity-critical);
  border-radius: var(--vn-border-radius-md);
  padding: var(--vn-sp-3);
  transition: all var(--vn-transition-fast);
}

.vn-threat-item:hover {
  background: var(--vn-glass-bg-hover);
}

.vn-threat-item--critical {
  border-left-color: var(--vn-severity-critical);
}

.vn-threat-item--high {
  border-left-color: var(--vn-severity-high);
}

.vn-threat-item--medium {
  border-left-color: var(--vn-severity-medium);
}

.vn-threat-item--low {
  border-left-color: var(--vn-severity-low);
}

.vn-threat-actor-item {
  transition: all var(--vn-transition-fast);
}

.vn-threat-actor-item:hover {
  background: var(--vn-glass-bg-hover);
}

.vn-cve-item {
  background: var(--vn-glass-bg);
  border: 1px solid var(--vn-glass-border);
  border-left: 3px solid var(--vn-severity-critical);
  border-radius: var(--vn-border-radius-md);
  padding: var(--vn-sp-3);
  transition: all var(--vn-transition-fast);
}

.vn-cve-item:hover {
  background: var(--vn-glass-bg-hover);
}

/* -------------------------------------------------------------------------
   Subtle Status Badges (for Connected/Disconnected/Paused states)
   Following Linear/Vercel/Raycast dark mode aesthetic:
   - Low contrast backgrounds (rgba transparency)
   - Muted text colors that don't dominate
   - Subtle borders for definition
   ------------------------------------------------------------------------- */

.vn-status-subtle {
  display: inline-flex;
  align-items: center;
  gap: var(--vn-sp-1);
  font-size: var(--vn-font-micro);
  font-weight: var(--vn-weight-medium);
  padding: 4px 10px;
  border-radius: var(--vn-border-radius-full);
  transition: all var(--vn-transition-fast);
}

/* Connected - Subtle green that doesn't dominate */
.vn-status-subtle--connected {
  background: color-mix(in srgb, var(--vn-severity-low) 10%, transparent);
  color: color-mix(in srgb, var(--vn-severity-low) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--vn-severity-low) 20%, transparent);
}

[data-theme="light"] .vn-status-subtle--connected {
  background: color-mix(in srgb, var(--vn-severity-low) 8%, transparent);
  color: var(--vn-severity-low);
  border: 1px solid color-mix(in srgb, var(--vn-severity-low) 25%, transparent);
}

/* Disconnected/Error - Subtle red */
.vn-status-subtle--disconnected {
  background: color-mix(in srgb, var(--vn-severity-critical) 10%, transparent);
  color: color-mix(in srgb, var(--vn-severity-critical) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--vn-severity-critical) 20%, transparent);
}

[data-theme="light"] .vn-status-subtle--disconnected {
  background: color-mix(in srgb, var(--vn-severity-critical) 8%, transparent);
  color: var(--vn-severity-critical);
  border: 1px solid color-mix(in srgb, var(--vn-severity-critical) 25%, transparent);
}

/* Paused/Warning - Subtle amber */
.vn-status-subtle--paused {
  background: color-mix(in srgb, var(--vn-severity-high) 10%, transparent);
  color: color-mix(in srgb, var(--vn-severity-high) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--vn-severity-high) 20%, transparent);
}

[data-theme="light"] .vn-status-subtle--paused {
  background: color-mix(in srgb, var(--vn-severity-high) 8%, transparent);
  color: var(--vn-severity-high);
  border: 1px solid color-mix(in srgb, var(--vn-severity-high) 25%, transparent);
}

/* Disabled - Subtle neutral */
.vn-status-subtle--disabled {
  background: rgba(100, 116, 139, 0.1);
  color: rgba(148, 163, 184, 0.85);
  border: 1px solid rgba(100, 116, 139, 0.2);
}

[data-theme="light"] .vn-status-subtle--disabled {
  background: rgba(100, 116, 139, 0.08);
  color: #64748B;
  border: 1px solid rgba(100, 116, 139, 0.25);
}

/* Active - Subtle primary accent */
.vn-status-subtle--active {
  background: rgba(124, 58, 237, 0.1);
  color: rgba(167, 139, 250, 0.9);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

[data-theme="light"] .vn-status-subtle--active {
  background: rgba(124, 58, 237, 0.08);
  color: #7C3AED;
  border: 1px solid rgba(124, 58, 237, 0.25);
}

/* Popular/Info - Subtle blue */
.vn-status-subtle--info {
  background: rgba(14, 165, 233, 0.1);
  color: rgba(56, 189, 248, 0.9);
  border: 1px solid rgba(14, 165, 233, 0.2);
}

[data-theme="light"] .vn-status-subtle--info {
  background: rgba(14, 165, 233, 0.08);
  color: #0284C7;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

/* -------------------------------------------------------------------------
   Monochromatic Icon Containers
   For category cards where color = decoration (not meaning)
   All icons use the same muted color, differentiated by icon shape
   ------------------------------------------------------------------------- */

.vn-icon-mono {
  background: var(--vn-surface-elevated);
  border: 1px solid var(--vn-border);
  color: var(--vn-text-secondary);
}

.vn-icon-mono:hover {
  color: var(--vn-text-primary);
  border-color: var(--vn-accent-primary);
}

/* -------------------------------------------------------------------------
   Semantic Text Colors
   For inline text that needs semantic meaning (success, warning, error, info)
   These are theme-aware and work in both light and dark modes
   ------------------------------------------------------------------------- */

.vn-text-success {
  color: var(--vn-success);
}

.vn-text-warning {
  color: var(--vn-warning);
}

.vn-text-error,
.vn-text-destructive {
  color: var(--vn-destructive);
}

.vn-text-info {
  color: var(--vn-info);
}

/* Severity text colors - semantic meaning for vulnerability severity */
.vn-text-severity-critical {
  color: var(--vn-severity-critical);
}

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

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

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

/* -------------------------------------------------------------------------
   Severity Background & Border Utilities
   For cards, badges, and other elements that need severity-based styling
   These use subtle transparency for backgrounds and solid colors for borders
   ------------------------------------------------------------------------- */

/* Critical severity backgrounds */
.vn-bg-severity-critical {
  background: rgba(225, 29, 72, 0.1);
}
[data-theme="light"] .vn-bg-severity-critical {
  background: rgba(225, 29, 72, 0.08);
}
.vn-bg-severity-critical:hover {
  background: rgba(225, 29, 72, 0.15);
}
.vn-border-severity-critical {
  border-color: rgba(225, 29, 72, 0.3);
}

/* High severity backgrounds */
.vn-bg-severity-high {
  background: rgba(245, 158, 11, 0.1);
}
[data-theme="light"] .vn-bg-severity-high {
  background: rgba(245, 158, 11, 0.08);
}
.vn-bg-severity-high:hover {
  background: rgba(245, 158, 11, 0.15);
}
.vn-border-severity-high {
  border-color: rgba(245, 158, 11, 0.3);
}

/* Medium severity backgrounds */
.vn-bg-severity-medium {
  background: rgba(14, 165, 233, 0.1);
}
[data-theme="light"] .vn-bg-severity-medium {
  background: rgba(14, 165, 233, 0.08);
}
.vn-bg-severity-medium:hover {
  background: rgba(14, 165, 233, 0.15);
}
.vn-border-severity-medium {
  border-color: rgba(14, 165, 233, 0.3);
}

/* Low severity backgrounds */
.vn-bg-severity-low {
  background: rgba(100, 116, 139, 0.1);
}
[data-theme="light"] .vn-bg-severity-low {
  background: rgba(100, 116, 139, 0.08);
}
.vn-bg-severity-low:hover {
  background: rgba(100, 116, 139, 0.15);
}
.vn-border-severity-low {
  border-color: rgba(100, 116, 139, 0.3);
}

/* Info/accent backgrounds (for non-severity categories) */
.vn-bg-info {
  background: rgba(14, 165, 233, 0.1);
}
[data-theme="light"] .vn-bg-info {
  background: rgba(14, 165, 233, 0.08);
}
.vn-bg-info:hover {
  background: rgba(14, 165, 233, 0.15);
}
.vn-border-info {
  border-color: rgba(14, 165, 233, 0.3);
}

/* Accent/primary backgrounds */
.vn-bg-accent {
  background: rgba(124, 58, 237, 0.1);
}
[data-theme="light"] .vn-bg-accent {
  background: rgba(124, 58, 237, 0.08);
}
.vn-bg-accent:hover {
  background: rgba(124, 58, 237, 0.15);
}
.vn-border-accent {
  border-color: rgba(124, 58, 237, 0.3);
}

/* Success backgrounds */
.vn-bg-success {
  background: rgba(16, 185, 129, 0.1);
}
[data-theme="light"] .vn-bg-success {
  background: rgba(16, 185, 129, 0.08);
}
.vn-bg-success:hover {
  background: rgba(16, 185, 129, 0.15);
}
.vn-border-success {
  border-color: rgba(16, 185, 129, 0.3);
}

/* Warning backgrounds */
.vn-bg-warning {
  background: rgba(245, 158, 11, 0.1);
}
[data-theme="light"] .vn-bg-warning {
  background: rgba(245, 158, 11, 0.08);
}
.vn-bg-warning:hover {
  background: rgba(245, 158, 11, 0.15);
}
.vn-border-warning {
  border-color: rgba(245, 158, 11, 0.3);
}

/* -------------------------------------------------------------------------
   Page Header Component
   Standardized header for all pages with title, subtitle, and actions
   ------------------------------------------------------------------------- */

.vn-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--vn-sp-6);
  margin-bottom: var(--vn-sp-8);
}

.vn-page-header-content {
  flex: 1;
  min-width: 0;
}

.vn-page-header-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--vn-text-primary);
  letter-spacing: -0.02em;
  margin: 0;
  /* Modern: solid color, lighter weight, no gradient */
}

.vn-page-header-subtitle {
  font-size: 0.875rem;
  color: var(--vn-text-muted);
  margin: 4px 0 0 0;
  line-height: 1.5;
}

.vn-page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--vn-sp-3);
  flex-shrink: 0;
}

.vn-page-header-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--vn-sp-2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vn-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vn-sp-4);
  }

  .vn-page-header-actions {
    justify-content: flex-start;
  }
}

/* ============================================================================
   MAIN CONTENT AREA - Single source of truth for main element styling
   All pages should use: <main class="vn-main">
   ============================================================================ */
.vn-main {
  flex: 1;
  padding: var(--vn-sp-6);  /* 1.5rem - equivalent to Tailwind p-6 */
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 0;             /* allow flex child to shrink below content size */
}

/* ── Dark Theme: Edit Tags Modal ── */
[data-theme="dark"] #editTagsModal .vn-modal {
  background: #1a1625;
  border: 1px solid #2d2640;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] #editTagsModal select,
[data-theme="dark"] #editTagsModal input[type="text"] {
  background: #241f33 !important;
  color: #f1f0ff !important;
  border-color: #2d2640 !important;
  color-scheme: dark;
}

[data-theme="dark"] #editTagsModal select option {
  background: #241f33;
  color: #f1f0ff;
}

[data-theme="dark"] #editTagsModal .vn-toast--info {
  background: rgba(75, 168, 212, 0.1) !important;
  border: 1px solid rgba(75, 168, 212, 0.2);
  border-left: 3px solid var(--vn-info);
}

[data-theme="dark"] #editTagsModal .edit-category-row {
  border-bottom-color: #2d2640 !important;
}

[data-theme="dark"] #editTagsModal .vn-text-secondary {
  color: #c7d2fe;
}

[data-theme="dark"] #editTagsModal .vn-text-muted {
  color: #a5b4fc;
}

/* ── Light Theme: Edit Tags Modal ── */
[data-theme="light"] #editTagsModal .vn-modal {
  background: #f3f1ff;
  border: 1px solid #e9e5ff;
  box-shadow: 0 20px 40px rgba(91, 76, 219, 0.1);
}

[data-theme="light"] #editTagsModal .vn-toast--info {
  background: rgba(59, 130, 246, 0.08) !important;
  border: 1px solid rgba(59, 130, 246, 0.15);
  border-left: 3px solid var(--vn-info);
}

[data-theme="light"] #editTagsModal select,
[data-theme="light"] #editTagsModal input[type="text"] {
  background: #ffffff !important;
  color: #1e1b4b !important;
  border-color: #ddd6fe !important;
  color-scheme: light;
}

[data-theme="light"] #editTagsModal select option {
  background: #ffffff;
  color: #1e1b4b;
}

[data-theme="light"] #editTagsModal .edit-category-row {
  border-bottom-color: #ddd6fe !important;
}

[data-theme="light"] #editTagsModal .vn-text-secondary {
  color: #1e1b4b;
}

[data-theme="light"] #editTagsModal .vn-text-muted {
  color: #64748B;
}