/* =============================================================================
   AQUILA CTEM - Apple-Inspired Design System
   ============================================================================= */

:root {
    /* Apple-inspired color palette */
    --color-bg: #f5f5f7;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-text-primary: #1d1d1f;
    --color-text-secondary: #86868b;
    --color-text-tertiary: #a1a1a6;
    --color-border: #d2d2d7;
    --color-border-light: #e8e8ed;
    
    /* Accent colors */
    --color-accent: #0071e3;
    --color-accent-hover: #0077ed;
    --color-success: #34c759;
    --color-warning: #ff9f0a;
    --color-danger: #ff3b30;
    --color-info: #5ac8fa;
    
    /* Severity colors */
    --color-critical: #ff2d55;
    --color-high: #ff6b35;
    --color-medium: #ffcc00;
    --color-low: #34c759;
    --color-info-severity: #5ac8fa;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
}

.dark {
    --color-bg: #000000;
    --color-surface: #1c1c1e;
    --color-surface-elevated: #2c2c2e;
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #98989d;
    --color-text-tertiary: #636366;
    --color-border: #38383a;
    --color-border-light: #2c2c2e;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.app-container { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
    width: 260px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    transition: transform var(--transition-normal);
}

.sidebar-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-md);
    overflow-y: auto;
}

.nav-section { margin-bottom: var(--spacing-lg); }

.nav-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-tertiary);
    padding: var(--spacing-sm) var(--spacing-md);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-md);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-item:hover {
    background: var(--color-border-light);
    color: var(--color-text-primary);
}

.nav-item.active {
    background: var(--color-accent);
    color: white;
}

.nav-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.nav-item-badge {
    margin-left: auto;
    background: var(--color-danger);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 260px;
    min-height: 100vh;
}

/* Header */
.header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.header-title {
    font-size: 24px;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

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

.btn-primary:hover {
    background: var(--color-accent-hover);
    transform: scale(1.02);
}

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

.btn-secondary:hover { background: var(--color-border-light); }

.btn-danger { background: var(--color-danger); color: white; }
.btn-success { background: var(--color-success); color: white; }
.btn-warning { background: var(--color-warning); color: white; }

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 24px; font-size: 16px; }

/* Page Content */
.page-content {
    padding: var(--spacing-xl);
    max-width: 1800px;
    margin: 0 auto;
}

/* Cards */
.card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    overflow: hidden;
}

.card-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title { font-size: 16px; font-weight: 600; }
.card-body { padding: var(--spacing-lg); }

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-fast);
}

.stat-card:hover { transform: translateY(-2px); }

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.stat-card.critical::before { background: var(--color-critical); }
.stat-card.high::before { background: var(--color-high); }
.stat-card.medium::before { background: var(--color-medium); }
.stat-card.success::before { background: var(--color-success); }
.stat-card.info::before { background: var(--color-accent); }

.stat-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.stat-value {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.stat-change {
    font-size: 12px;
    margin-top: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.stat-change.positive { color: var(--color-success); }
.stat-change.negative { color: var(--color-danger); }

/* Risk Score Card */
.risk-score-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: white;
    padding: var(--spacing-xl);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

.risk-score-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%);
}

.risk-score-value { font-size: 64px; font-weight: 700; line-height: 1; }
.risk-score-label { font-size: 14px; opacity: 0.8; margin-top: var(--spacing-sm); }
.risk-score-grade {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    font-size: 48px;
    font-weight: 700;
    opacity: 0.3;
}

/* Severity Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-critical { background: rgba(255, 45, 85, 0.15); color: var(--color-critical); }
.badge-high { background: rgba(255, 107, 53, 0.15); color: var(--color-high); }
.badge-medium { background: rgba(255, 204, 0, 0.15); color: #b38f00; }
.badge-low { background: rgba(52, 199, 89, 0.15); color: var(--color-success); }
.badge-info { background: rgba(90, 200, 250, 0.15); color: var(--color-info); }
.badge-success { background: rgba(52, 199, 89, 0.15); color: var(--color-success); }
.badge-warning { background: rgba(255, 159, 10, 0.15); color: var(--color-warning); }
.badge-danger { background: rgba(255, 59, 48, 0.15); color: var(--color-danger); }

/* Tables */
.table-container { overflow-x: auto; }

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

th {
    text-align: left;
    padding: var(--spacing-md);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg);
    position: sticky;
    top: 0;
}

td {
    padding: var(--spacing-md);
    font-size: 14px;
    border-bottom: 1px solid var(--color-border-light);
}

tr:hover { background: var(--color-border-light); }
tr.selected { background: rgba(0, 113, 227, 0.1); }

.mono { font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: 13px; }

/* Charts */
.chart-container { position: relative; height: 300px; }

/* Forms */
.form-group { margin-bottom: var(--spacing-lg); }

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.form-input {
    width: 100%;
    padding: 10px var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

.form-input::placeholder { color: var(--color-text-tertiary); }

textarea.form-input { resize: vertical; min-height: 100px; }

.form-select { appearance: none; cursor: pointer; }

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

/* Search */
.search-container { position: relative; }

.search-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
}

.search-input { padding-left: 40px; width: 300px; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    animation: modalIn 0.2s ease;
}

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

.modal-lg { max-width: 900px; }
.modal-xl { max-width: 1200px; }

.modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title { font-size: 18px; font-weight: 600; }

.modal-body {
    padding: var(--spacing-lg);
    overflow-y: auto;
    max-height: 60vh;
}

.modal-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* Progress Bar */
.progress-bar {
    height: 8px;
    background: var(--color-border-light);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-fill.success { background: var(--color-success); }
.progress-fill.warning { background: var(--color-warning); }
.progress-fill.danger { background: var(--color-danger); }

/* Loading */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border-light);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Toast */
.toast-container {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.toast {
    background: var(--color-surface-elevated);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    animation: slideIn 0.3s ease;
    min-width: 300px;
}

.toast.success { border-left: 3px solid var(--color-success); }
.toast.error { border-left: 3px solid var(--color-danger); }
.toast.warning { border-left: 3px solid var(--color-warning); }
.toast.info { border-left: 3px solid var(--color-info); }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Tabs */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--spacing-lg);
}

.tab {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

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

/* Empty State */
.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--color-text-secondary);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

/* Status Indicator */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: var(--spacing-xs);
}

.status-dot.online { background: var(--color-success); }
.status-dot.offline { background: var(--color-danger); }
.status-dot.warning { background: var(--color-warning); }
.status-dot.pending { background: var(--color-text-tertiary); }

/* Grid Layouts */
.grid { display: grid; gap: var(--spacing-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* Spacing Utilities */
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mt-auto { margin-top: auto; }

/* Text Utilities */
.text-sm { font-size: 12px; }
.text-md { font-size: 14px; }
.text-lg { font-size: 16px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.text-secondary { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.font-mono { font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; }
.font-semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Live Indicator */
.live-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 12px;
    color: var(--color-success);
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Active Scan Panel */
.pulse-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse-glow 1.5s infinite;
}

@keyframes pulse-glow {
    0%, 100% { 
        opacity: 1; 
        box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.7);
    }
    50% { 
        opacity: 0.8;
        box-shadow: 0 0 0 8px rgba(0, 113, 227, 0);
    }
}

.stat-mini {
    text-align: center;
    padding: var(--spacing-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

.stat-mini-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-mini-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.typing-indicator {
    display: inline-block;
    animation: blink 1s infinite;
    margin-right: 4px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Score Ring */
.score-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.score-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.score-ring-bg {
    fill: none;
    stroke: var(--color-border-light);
    stroke-width: 10;
}

.score-ring-fill {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.score-ring-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Animation Utilities */
[x-cloak] { display: none !important; }

.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.slide-up { animation: slideUp 0.3s ease; }
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   ENHANCED ANALYTICS STYLES
   ============================================================================= */

/* Risk Hero Section */
.risk-hero {
    display: flex;
    justify-content: center;
    padding: var(--spacing-lg) 0;
}

.risk-score-card.large {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl) var(--spacing-2xl);
    text-align: center;
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    position: relative;
    overflow: hidden;
}

.risk-score-card.large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-success), var(--color-warning), var(--color-danger));
}

.risk-score-grade {
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.risk-trend {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
}

/* Stats Grid Enhancements */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card.low {
    border-left-color: var(--color-low);
}

.stat-card.accent {
    border-left-color: var(--color-accent);
}

.stat-card.warning {
    border-left-color: var(--color-warning);
}

.stat-sublabel {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}

/* Mini Stat Cards (for secondary views) */
.stat-card-mini {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    border-left: 3px solid var(--color-border);
}

.stat-card-mini.critical { border-left-color: var(--color-critical); }
.stat-card-mini.high { border-left-color: var(--color-high); }
.stat-card-mini.warning { border-left-color: var(--color-warning); }
.stat-card-mini.info { border-left-color: var(--color-info); }

.stat-value-mini {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.stat-label-mini {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
    font-weight: 500;
}

/* Grid Enhancements */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

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

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

/* Chart Container Improvements */
.chart-container {
    position: relative;
    width: 100%;
    min-height: 200px;
}

.chart-container canvas {
    max-width: 100%;
}

/* Table Row Hover */
.hover-row {
    transition: background-color var(--transition-fast);
}

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

/* Text Color Utilities */
.text-accent { color: var(--color-accent); }

/* Improved Badge Styles */
.badge-secondary {
    background: var(--color-text-tertiary);
    color: white;
}

/* Progress Bar Variants */
.progress-fill.danger { background: var(--color-danger); }
.progress-fill.warning { background: var(--color-warning); }
.progress-fill.success { background: var(--color-success); }
.progress-fill.info { background: var(--color-info); }

/* DNS Security Grid */
.dns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.dns-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    text-align: center;
}

.dns-check-icon {
    font-size: 24px;
    margin-bottom: var(--spacing-xs);
}

.dns-check-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Empty State Improvements */
.empty-state {
    padding: var(--spacing-2xl);
    text-align: center;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.empty-state p {
    color: var(--color-text-secondary);
    max-width: 400px;
    margin: 0 auto;
}

/* Score Indicators */
.score-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.score-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.score-dot.critical { background: var(--color-critical); }
.score-dot.high { background: var(--color-high); }
.score-dot.medium { background: var(--color-medium); }
.score-dot.low { background: var(--color-low); }

/* Metric Cards */
.metric-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.metric-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

.metric-change {
    font-size: 12px;
    margin-top: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.metric-change.positive { color: var(--color-success); }
.metric-change.negative { color: var(--color-danger); }

/* Sparkline Container */
.sparkline {
    height: 40px;
    margin-top: var(--spacing-md);
}

/* Tooltip Styles for Charts */
.chartjs-tooltip {
    background: var(--color-surface-elevated) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    font-family: inherit !important;
}

/* Dark Mode Chart Adjustments */
.dark .chart-container canvas {
    filter: brightness(0.95);
}

/* Animated Count Up */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.count-up {
    animation: countUp 0.5s ease-out;
}

/* Risk Level Indicator */
.risk-level {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.risk-bar {
    flex: 1;
    height: 8px;
    background: var(--color-border-light);
    border-radius: 4px;
    overflow: hidden;
}

.risk-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width var(--transition-normal);
}

.risk-bar-fill.critical { background: linear-gradient(90deg, var(--color-high), var(--color-critical)); }
.risk-bar-fill.high { background: linear-gradient(90deg, var(--color-medium), var(--color-high)); }
.risk-bar-fill.medium { background: linear-gradient(90deg, var(--color-low), var(--color-medium)); }
.risk-bar-fill.low { background: var(--color-low); }

/* =============================================================================
   AQUILA SCORE - Credit Score Style
   ============================================================================= */
.aquila-score-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.aquila-score-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0,113,227,0.1) 0%, transparent 50%);
    animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.aquila-score-value {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #fff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
}

.aquila-score-label {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: var(--spacing-sm);
}

.aquila-score-gauge {
    width: 100%;
    max-width: 400px;
    height: 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    margin: var(--spacing-lg) auto;
    position: relative;
    overflow: hidden;
}

.aquila-score-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 1s ease-out;
}

.aquila-score-fill.excellent { background: linear-gradient(90deg, #34c759, #30d158); }
.aquila-score-fill.good { background: linear-gradient(90deg, #30d158, #ffcc00); }
.aquila-score-fill.fair { background: linear-gradient(90deg, #ffcc00, #ff9f0a); }
.aquila-score-fill.poor { background: linear-gradient(90deg, #ff9f0a, #ff3b30); }

.aquila-score-range {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    max-width: 400px;
    margin: 0 auto;
}

/* Top 5 Criticals List */
.criticals-list {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.critical-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
    gap: var(--spacing-md);
    transition: background var(--transition-fast);
    cursor: pointer;
}

.critical-item:hover { background: var(--color-bg); }
.critical-item:last-child { border-bottom: none; }

.critical-rank {
    width: 28px;
    height: 28px;
    background: var(--color-critical);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.critical-info { flex: 1; min-width: 0; }
.critical-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.critical-meta { font-size: 13px; color: var(--color-text-secondary); }

/* Trend Sparklines */
.trend-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.trend-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.trend-value {
    font-size: 28px;
    font-weight: 700;
}

.trend-change {
    font-size: 13px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.trend-change.up { background: rgba(52,199,89,0.15); color: #34c759; }
.trend-change.down { background: rgba(255,59,48,0.15); color: #ff3b30; }
.trend-change.neutral { background: rgba(142,142,147,0.15); color: #8e8e93; }

/* Section Headers with Icons */
.section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.section-icon {
    width: 40px;
    height: 40px;
    background: var(--color-accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
}

.section-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Evidence Locker */
.evidence-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
}

.evidence-preview {
    background: #1c1c1e;
    padding: var(--spacing-md);
    max-height: 200px;
    overflow: auto;
}

.evidence-preview img {
    max-width: 100%;
    border-radius: var(--radius-sm);
}

.evidence-preview pre {
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
    color: #98c379;
    white-space: pre-wrap;
    word-break: break-all;
}

.evidence-actions {
    padding: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

/* Compliance Framework Tags */
.framework-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
}

.framework-tag.nist { background: #e3f2fd; color: #1565c0; }
.framework-tag.cis { background: #f3e5f5; color: #7b1fa2; }
.framework-tag.iso { background: #e8f5e9; color: #2e7d32; }
.framework-tag.pci { background: #fff3e0; color: #ef6c00; }
.framework-tag.soc2 { background: #fce4ec; color: #c2185b; }

.dark .framework-tag.nist { background: rgba(33,150,243,0.2); color: #64b5f6; }
.dark .framework-tag.cis { background: rgba(156,39,176,0.2); color: #ce93d8; }
.dark .framework-tag.iso { background: rgba(76,175,80,0.2); color: #81c784; }
.dark .framework-tag.pci { background: rgba(255,152,0,0.2); color: #ffb74d; }
.dark .framework-tag.soc2 { background: rgba(233,30,99,0.2); color: #f48fb1; }

/* Campaign Cards */
.campaign-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border-light);
}

.campaign-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
}

.campaign-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
}

.campaign-stat {
    text-align: center;
}

.campaign-stat-value {
    font-size: 24px;
    font-weight: 700;
}

.campaign-stat-label {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Identity Exposure Cards */
.exposure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.exposure-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    border-left: 4px solid var(--color-danger);
}

.exposure-card.warning { border-left-color: var(--color-warning); }
.exposure-card.info { border-left-color: var(--color-info); }

.exposure-icon {
    font-size: 32px;
    margin-bottom: var(--spacing-md);
}

.exposure-count {
    font-size: 36px;
    font-weight: 700;
}

.exposure-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Live Feed */
.live-feed {
    background: #1c1c1e;
    border-radius: var(--radius-md);
    height: 300px;
    overflow: hidden;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 12px;
}

.live-feed-content {
    padding: var(--spacing-md);
    height: 100%;
    overflow-y: auto;
    color: #98c379;
}

.live-feed-line {
    display: flex;
    gap: var(--spacing-md);
    padding: 2px 0;
    opacity: 0;
    animation: fadeInLine 0.3s ease forwards;
}

@keyframes fadeInLine {
    to { opacity: 1; }
}

.live-feed-time { color: #5c6370; }
.live-feed-type { color: #e5c07b; }
.live-feed-message { color: #abb2bf; }
.live-feed-success { color: #98c379; }
.live-feed-error { color: #e06c75; }
.live-feed-warning { color: #d19a66; }

/* Globe Placeholder */
.globe-container {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
    border-radius: var(--radius-lg);
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.globe-placeholder {
    font-size: 120px;
    opacity: 0.3;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Sub-navigation Tabs */
.sub-nav {
    display: flex;
    gap: var(--spacing-xs);
    background: var(--color-bg);
    padding: var(--spacing-xs);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
}

.sub-nav-item {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sub-nav-item:hover { color: var(--color-text-primary); }
.sub-nav-item.active {
    background: var(--color-surface);
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

/* DNS Hygiene Visual */
.dns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--spacing-md);
}

.dns-item {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    border: 2px solid transparent;
}

.dns-item.pass { border-color: var(--color-success); }
.dns-item.fail { border-color: var(--color-danger); }
.dns-item.warn { border-color: var(--color-warning); }

.dns-status {
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
}

.dns-label {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.dns-detail {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Typing Indicator Animation */
.typing-indicator {
    display: inline-block;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* =============================================================================
   ANALYTICS COMPONENTS
   ============================================================================= */

/* Ticker Bar (MTTR, Peer Rank, etc.) */
.ticker-bar {
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    gap: var(--spacing-lg);
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    white-space: nowrap;
}

.ticker-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticker-value {
    font-size: 20px;
    font-weight: 700;
}

.ticker-change {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.ticker-change.positive { background: rgba(52,199,89,0.15); color: #34c759; }
.ticker-change.negative { background: rgba(255,59,48,0.15); color: #ff3b30; }

.ticker-sublabel {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.ticker-period {
    font-size: 11px;
    color: inherit;
    opacity: 0.7;
}

.ticker-divider {
    width: 1px;
    height: 40px;
    background: var(--color-border-light);
}

.sparkline-mini {
    width: 60px;
    height: 24px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

/* Kill Chain Funnel */
.funnel-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.funnel-stage {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.funnel-bar {
    height: 36px;
    width: var(--funnel-width, 100%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    transition: width 0.5s ease;
}

.funnel-label {
    font-size: 12px;
    color: var(--color-text-secondary);
    min-width: 80px;
}

.funnel-value {
    font-size: 14px;
}

/* Quadrant Chart */
.quadrant-chart {
    position: relative;
    height: 200px;
    margin: var(--spacing-md);
}

.quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 100%;
    gap: 2px;
}

.quadrant-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.quadrant-cell.tl { background: rgba(255,204,0,0.1); }
.quadrant-cell.tr { background: rgba(255,59,48,0.15); }
.quadrant-cell.bl { background: rgba(142,142,147,0.1); }
.quadrant-cell.br { background: rgba(0,113,227,0.1); }

.quadrant-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.quadrant-dots {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.quadrant-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, 50%);
}

.quadrant-dot.badge-critical { background: var(--color-critical); }
.quadrant-dot.badge-high { background: var(--color-high); }
.quadrant-dot.badge-medium { background: var(--color-medium); }
.quadrant-dot.badge-low { background: var(--color-low); }

.quadrant-axis-x, .quadrant-axis-y {
    position: absolute;
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.quadrant-axis-x { bottom: -20px; right: 0; }
.quadrant-axis-y { top: 0; left: -20px; writing-mode: vertical-lr; transform: rotate(180deg); }

/* Matrix Table (Header Hardening) */
.matrix-table {
    width: 100%;
    font-size: 12px;
}

.matrix-table th { padding: 8px; text-align: center; }
.matrix-table td { padding: 8px; text-align: center; }

.matrix-pass {
    background: rgba(52,199,89,0.2);
}
.matrix-pass::after { content: '✓'; color: #34c759; }

.matrix-fail {
    background: rgba(255,59,48,0.2);
}
.matrix-fail::after { content: '✗'; color: #ff3b30; }

/* SSL Runway Chart */
.runway-chart {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.runway-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.runway-label {
    font-size: 12px;
    min-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.runway-track {
    flex: 1;
    height: 12px;
    background: var(--color-bg);
    border-radius: 6px;
    overflow: hidden;
}

.runway-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.runway-bar.safe .runway-fill { background: var(--color-success); }
.runway-bar.warning .runway-fill { background: var(--color-warning); }
.runway-bar.danger .runway-fill { background: var(--color-danger); }

.runway-days {
    font-size: 12px;
    font-weight: 600;
    min-width: 40px;
    text-align: right;
}

.runway-bar.danger .runway-days { color: var(--color-danger); }
.runway-bar.warning .runway-days { color: var(--color-warning); }

/* SLA Bars */
.sla-bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.sla-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.sla-bar-label {
    font-size: 11px;
    min-width: 60px;
}

.sla-bar-track {
    flex: 1;
    height: 8px;
    background: var(--color-bg);
    border-radius: 4px;
    overflow: hidden;
}

.sla-bar-fill {
    height: 100%;
    border-radius: 4px;
}

.sla-bar-fill.success { background: var(--color-success); }
.sla-bar-fill.warning { background: var(--color-warning); }
.sla-bar-fill.danger { background: var(--color-danger); }

.sla-bar-value {
    font-size: 11px;
    font-weight: 600;
    min-width: 35px;
    text-align: right;
}

/* Tech Grid */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--spacing-md);
}

.tech-card {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    text-align: center;
    border: 2px solid transparent;
}

.tech-card.outdated { border-color: var(--color-danger); }

.tech-icon { font-size: 32px; margin-bottom: var(--spacing-xs); }
.tech-name { font-weight: 600; font-size: 14px; }
.tech-version { font-size: 12px; color: var(--color-text-secondary); font-family: monospace; }
.tech-count { font-size: 11px; color: var(--color-text-tertiary); }

/* Tube Map (Integration Flow) */
.tube-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    flex-wrap: wrap;
}

.tube-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.tube-node.central {
    background: var(--color-accent);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    color: white;
}

.tube-icon { font-size: 32px; }
.tube-label { font-size: 12px; font-weight: 600; }

.tube-connection {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.tube-line {
    width: 40px;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
}

.tube-line.pulse {
    background: var(--color-success);
    animation: pulse-line 1.5s ease-in-out infinite;
}

@keyframes pulse-line {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.tube-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.active { background: var(--color-success); }
.status-dot.error { background: var(--color-danger); }

/* Connector Health */
.connector-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

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

.connector-name { font-weight: 500; }

.connector-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.status-light {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.status-light.green { background: #34c759; box-shadow: 0 0 8px rgba(52,199,89,0.5); }
.status-light.yellow { background: #ffcc00; box-shadow: 0 0 8px rgba(255,204,0,0.5); }
.status-light.red { background: #ff3b30; box-shadow: 0 0 8px rgba(255,59,48,0.5); }

/* Mini Histogram */
.mini-histogram {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 80px;
    padding: 0 var(--spacing-sm);
}

.histogram-bar {
    flex: 1;
    margin: 0 2px;
    background: var(--color-accent);
    border-radius: 2px 2px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.histogram-bar:hover {
    background: var(--color-accent-hover);
}

.histogram-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-xs);
}

/* Alert Banner */
.alert-banner {
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 13px;
}

.alert-banner.warning {
    background: rgba(255,204,0,0.15);
    color: #b38600;
}

.dark .alert-banner.warning {
    background: rgba(255,204,0,0.1);
    color: #ffcc00;
}

/* Drift Timeline */
.drift-timeline {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 120px;
    padding: var(--spacing-md) 0;
}

.timeline-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.timeline-bar-container {
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.timeline-bar {
    width: 24px;
    background: var(--color-border);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.timeline-bar.success { background: var(--color-success); }
.timeline-bar.danger { background: var(--color-danger); }
.timeline-bar.warning { background: var(--color-warning); }

.timeline-count {
    position: absolute;
    top: -18px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.timeline-label {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-xs);
}

/* Legend */
.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.legend-dot.success { background: var(--color-success); }
.legend-dot.danger { background: var(--color-danger); }
.legend-dot.warning { background: var(--color-warning); }

/* Compliance Radar (placeholder) */
.radar-chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

/* Settings Slider */
.intensity-slider {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.slider-track {
    position: relative;
    height: 40px;
    background: linear-gradient(90deg, var(--color-success) 0%, var(--color-warning) 50%, var(--color-danger) 100%);
    border-radius: var(--radius-md);
    padding: 0 var(--spacing-md);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Quota Gauge */
.quota-gauge {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.quota-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        var(--color-accent) calc(var(--quota-percent, 0) * 3.6deg),
        var(--color-border-light) calc(var(--quota-percent, 0) * 3.6deg)
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.quota-inner {
    width: 80%;
    height: 80%;
    background: var(--color-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.quota-value {
    font-size: 24px;
    font-weight: 700;
}

.quota-label {
    font-size: 11px;
    color: var(--color-text-secondary);
}

/* Audit Timeline */
.audit-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.audit-entry {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

.audit-time {
    font-size: 11px;
    color: var(--color-text-tertiary);
    min-width: 80px;
}

.audit-user {
    font-weight: 500;
    min-width: 100px;
}

.audit-action {
    flex: 1;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Comparison Grid (Reports) */
.comparison-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.comparison-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
}

.comparison-label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.comparison-values {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
}

.comparison-old {
    color: var(--color-text-tertiary);
}

.comparison-arrow {
    color: var(--color-text-tertiary);
}

.comparison-new {
    font-weight: 600;
}

.comparison-change {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.comparison-change.positive {
    background: rgba(52,199,89,0.15);
    color: #34c759;
}

.comparison-change.negative {
    background: rgba(255,59,48,0.15);
    color: #ff3b30;
}

/* Vendor Row */
.vendor-row {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

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

.vendor-name {
    flex: 1;
    font-weight: 500;
}

.vendor-vulns {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-right: var(--spacing-md);
}

/* =============================================================================
   ASK AQUILA - AI Command Bar (Spotlight Style)
   ============================================================================= */

.ask-aquila-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 200px;
}

.ask-aquila-trigger:hover {
    background: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0,113,227,0.1);
}

.ask-icon {
    font-size: 18px;
}

.ask-placeholder {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-tertiary);
}

.ask-shortcut {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--color-border-light);
    border-radius: 4px;
    color: var(--color-text-tertiary);
    font-family: monospace;
}

.ask-aquila-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    padding-top: 15vh;
    z-index: 1000;
}

.ask-aquila-modal {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 640px;
    max-height: 70vh;
    overflow: hidden;
    box-shadow: var(--shadow-xl), 0 0 60px rgba(0,113,227,0.2);
    display: flex;
    flex-direction: column;
}

.ask-aquila-input-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
}

.ask-aquila-icon {
    font-size: 28px;
    animation: pulse-glow 2s ease-in-out infinite;
}

.ask-aquila-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 18px;
    color: var(--color-text-primary);
    outline: none;
}

.ask-aquila-input::placeholder {
    color: var(--color-text-tertiary);
}

.ask-aquila-loading {
    width: 24px;
    height: 24px;
}

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

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

.ask-aquila-suggestions {
    max-height: 300px;
    overflow-y: auto;
    border-bottom: 1px solid var(--color-border-light);
}

.ask-suggestion {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.ask-suggestion:hover {
    background: var(--color-bg);
}

.suggestion-icon {
    font-size: 20px;
    width: 32px;
    text-align: center;
}

.suggestion-content {
    flex: 1;
}

.suggestion-text {
    font-weight: 500;
}

.suggestion-hint {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.suggestion-type {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
}

.ask-aquila-quick {
    padding: var(--spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.quick-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.quick-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    transition: all var(--transition-fast);
}

.quick-action:hover {
    background: var(--color-accent);
    color: white;
}

.quick-icon {
    font-size: 16px;
}

.example-queries {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.example-query {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-style: italic;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.example-query:hover {
    background: var(--color-accent);
    color: white;
    font-style: normal;
}

.ask-aquila-results {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg);
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.results-count {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.results-preview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.result-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}

.result-title {
    flex: 1;
    font-size: 13px;
}

.result-meta {
    font-size: 12px;
    color: var(--color-text-tertiary);
    font-family: monospace;
}

.ask-aquila-footer {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-light);
    text-align: center;
}

.footer-hint {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.footer-hint kbd {
    padding: 2px 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
}

/* =============================================================================
   TIME MACHINE - Visual Replay
   ============================================================================= */

.time-machine-container {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.time-machine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: white;
}

.tm-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.tm-icon {
    font-size: 32px;
}

.tm-title h2 {
    margin: 0;
    font-size: 20px;
}

.tm-title p {
    margin: 0;
    opacity: 0.7;
    font-size: 13px;
}

.tm-controls {
    display: flex;
    gap: var(--spacing-xs);
}

.tm-controls .btn.active {
    background: var(--color-accent);
    color: white;
}

.tm-visualization {
    display: flex;
    height: 400px;
}

.tm-canvas {
    flex: 1;
    background: linear-gradient(180deg, #0a0a12 0%, #1a1a2e 100%);
    position: relative;
    overflow: hidden;
}

.tm-network-graph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.tm-center-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0071e3 0%, #5e5ce6 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    box-shadow: 0 0 40px rgba(0,113,227,0.5);
    z-index: 10;
}

.tm-node-label {
    font-size: 10px;
    margin-top: 4px;
}

.tm-node {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.5s ease;
    z-index: 5;
}

.tm-node-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
}

.tm-node.new .tm-node-dot {
    background: var(--color-success);
    animation: node-appear 0.5s ease;
}

.tm-node.removed .tm-node-dot {
    background: var(--color-danger);
    opacity: 0.5;
}

.tm-node.changed .tm-node-dot {
    background: var(--color-warning);
    animation: node-pulse 1s infinite;
}

@keyframes node-appear {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes node-pulse {
    0%, 100% { box-shadow: 0 0 10px currentColor; }
    50% { box-shadow: 0 0 25px currentColor; }
}

.tm-node-pulse {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-success);
    border-radius: 50%;
    left: -7px;
    animation: ripple 1.5s infinite;
}

@keyframes ripple {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

.tm-node-info {
    background: rgba(0,0,0,0.7);
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-size: 11px;
    white-space: nowrap;
}

.tm-node-type {
    display: block;
    font-size: 9px;
    color: var(--color-text-tertiary);
}

.tm-connections {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.tm-connections line {
    stroke: rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.tm-connections line.active {
    stroke: rgba(0,113,227,0.6);
    stroke-width: 3;
}

.tm-connections line.new {
    stroke: var(--color-success);
    stroke-dasharray: 5,5;
    animation: dash 1s linear infinite;
}

@keyframes dash {
    to { stroke-dashoffset: -10; }
}

.tm-date-display {
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-lg);
    background: rgba(0,0,0,0.6);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
}

.tm-current-date {
    color: white;
    font-size: 18px;
    font-weight: 600;
    font-family: monospace;
}

.tm-changes-panel {
    width: 280px;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border-light);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.tm-changes-panel h4 {
    margin: 0;
    font-size: 14px;
}

.tm-changes-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.tm-change-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-border);
}

.tm-change-item.add { border-left-color: var(--color-success); }
.tm-change-item.remove { border-left-color: var(--color-danger); }
.tm-change-item.change { border-left-color: var(--color-warning); }

.tm-change-icon {
    font-size: 14px;
}

.tm-change-title {
    font-size: 13px;
    font-weight: 500;
}

.tm-change-meta {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.tm-no-changes {
    text-align: center;
    color: var(--color-text-tertiary);
    padding: var(--spacing-lg);
}

.tm-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

.tm-stat {
    text-align: center;
}

.tm-stat-value {
    font-size: 24px;
    font-weight: 700;
    display: block;
}

.tm-stat-label {
    font-size: 11px;
    color: var(--color-text-tertiary);
}

.tm-timeline {
    background: var(--color-bg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.tm-timeline-controls {
    display: flex;
    align-items: center;
}

.tm-play-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0071e3 0%, #5e5ce6 100%);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.tm-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0,113,227,0.5);
}

.tm-play-btn.playing {
    animation: pulse-glow 1s infinite;
}

.tm-slider-container {
    flex: 1;
}

.tm-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-bottom: 4px;
}

.tm-slider {
    width: 100%;
    -webkit-appearance: none;
    height: 8px;
    border-radius: 4px;
    background: transparent;
    position: relative;
    z-index: 2;
}

.tm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.tm-slider-track {
    position: relative;
    height: 8px;
    background: var(--color-border);
    border-radius: 4px;
    margin-top: -12px;
}

.tm-slider-fill {
    height: 100%;
    background: linear-gradient(90deg, #0071e3 0%, #5e5ce6 100%);
    border-radius: 4px;
    transition: width 0.1s ease;
}

.tm-timeline-event {
    position: absolute;
    top: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translateX(-50%);
    border: 2px solid var(--color-surface);
    cursor: pointer;
}

.tm-timeline-event.add { background: var(--color-success); }
.tm-timeline-event.remove { background: var(--color-danger); }
.tm-timeline-event.port { background: var(--color-warning); }
.tm-timeline-event.alert { background: var(--color-critical); }

.tm-timeline-legend {
    display: flex;
    gap: var(--spacing-md);
    font-size: 11px;
    color: var(--color-text-secondary);
}

.tm-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tm-legend-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tm-legend-item .dot.add { background: var(--color-success); }
.tm-legend-item .dot.remove { background: var(--color-danger); }
.tm-legend-item .dot.port { background: var(--color-warning); }
.tm-legend-item .dot.alert { background: var(--color-critical); }

/* =============================================================================
   ENHANCED SCAN UI - Pipeline, Screenshots, Secrets
   ============================================================================= */

/* Compact stat mini for extended stats row */
.stat-mini-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-xs);
    background: var(--color-surface-elevated);
    border-radius: var(--radius-sm);
    min-width: 70px;
}

.stat-mini-compact .stat-icon {
    font-size: 16px;
    margin-bottom: 2px;
}

.stat-mini-compact .stat-value {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.stat-mini-compact .stat-label {
    font-size: 10px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Scan Pipeline Visualization */
.scan-pipeline {
    display: flex;
    gap: 2px;
    overflow: hidden;
}

.pipeline-phase {
    flex: 1;
    padding: 6px 4px;
    text-align: center;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.pipeline-phase.phase-completed {
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    color: white;
}

.pipeline-phase.phase-active {
    background: linear-gradient(135deg, #0071e3 0%, #5e5ce6 100%);
    color: white;
    animation: pipeline-pulse 1.5s infinite;
}

.pipeline-phase.phase-pending {
    background: var(--color-border-light);
    color: var(--color-text-tertiary);
}

@keyframes pipeline-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

/* Technology Tags */
.tech-tag {
    display: inline-block;
    padding: 3px 8px;
    background: linear-gradient(135deg, rgba(94,92,230,0.15) 0%, rgba(0,113,227,0.15) 100%);
    border: 1px solid rgba(94,92,230,0.3);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-accent);
}

/* OAST Canary Panel */
.canary-panel {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.canary-panel code {
    font-family: 'SF Mono', 'Menlo', monospace;
}

/* Screenshot Gallery */
.screenshot-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.screenshot-card {
    background: var(--color-surface-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid var(--color-border-light);
}

.screenshot-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

.screenshot-preview {
    width: 100%;
    height: 140px;
    background-size: cover;
    background-position: top center;
    background-color: var(--color-bg);
    position: relative;
}

.screenshot-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.screenshot-card:hover .screenshot-overlay {
    opacity: 1;
}

.screenshot-expand {
    font-size: 28px;
    color: white;
}

.screenshot-info {
    padding: var(--spacing-sm);
}

.screenshot-url {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.screenshot-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Secrets Table */
.secret-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-mono);
    word-break: break-all;
}

.secret-value.secret-masked span {
    filter: blur(4px);
}

.secret-value.secret-masked:hover span {
    filter: blur(2px);
}

/* Tab Bar for Evidence View */
.tab-bar {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}

.tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

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

.tab-btn.active {
    background: linear-gradient(135deg, #0071e3 0%, #5e5ce6 100%);
    color: white;
}

/* Stat card colors */
.stat-card-mini.danger .stat-value-mini { color: var(--color-danger); }
.stat-card-mini.accent .stat-value-mini { color: var(--color-accent); }
.stat-card-mini.secondary .stat-value-mini { color: var(--color-text-secondary); }

/* Grid 6 columns */
.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-md);
}

@media (max-width: 1200px) {
    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Clickable table row */
.clickable-row:hover {
    background: var(--color-bg);
}

/* Alert box */
.alert {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.alert-danger {
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: var(--color-danger);
}

.alert-warning {
    background: rgba(255, 159, 10, 0.1);
    border: 1px solid rgba(255, 159, 10, 0.3);
    color: var(--color-warning);
}

.alert-success {
    background: rgba(52, 199, 89, 0.1);
    border: 1px solid rgba(52, 199, 89, 0.3);
    color: var(--color-success);
}

.alert-info {
    background: rgba(90, 200, 250, 0.1);
    border: 1px solid rgba(90, 200, 250, 0.3);
    color: var(--color-info);
}

/* Button sizes */
.btn-xs {
    padding: 2px 6px;
    font-size: 11px;
}

.btn-icon.btn-xs {
    width: 24px;
    height: 24px;
}

/* Severity text colors */
.text-critical { color: var(--color-critical); }
.text-high { color: var(--color-high); }
.text-medium { color: var(--color-medium); }
.text-low { color: var(--color-low); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }

/* Pulse dot animation for active scan */
.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    display: inline-block;
    animation: pulse-scan 1.5s infinite;
}

@keyframes pulse-scan {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Typing indicator */
.typing-indicator {
    animation: typing-blink 0.8s infinite;
}

@keyframes typing-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}