<?php
/**
 * YARA Deep Scan Page - Premium Feature
 * Manually scan files with 1000+ enterprise YARA rules
 *
 * @package VMPFence
 * @since 2.1.0
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Check if user is premium
$license_type = VMPFence_License::get_license_type();
$api_key = VMPFence_Config::get('central_api_key', '');

if ($license_type !== VMPFence_Constants::LICENSE_PREMIUM) {
    ?>
    <div class="wrap">
        <h1>🔬 YARA Deep Scan</h1>
        <div class="notice notice-error">
            <p><strong>Premium Feature Required</strong></p>
            <p>YARA Deep Scan requires a Premium license. Please upgrade to access this feature.</p>
        </div>
    </div>
    <?php
    return;
}

// Enqueue styles and scripts
wp_enqueue_style('vmpfence-yara-scanner', VMPFENCE_PLUGIN_URL . 'admin/assets/css/yara-scanner.css', array(), VMPFENCE_VERSION);

// Enqueue toast notification system
wp_enqueue_style('vmpfence-toast-notifications', VMPFENCE_PLUGIN_URL . 'admin/assets/css/toast-notifications.css', array(), VMPFENCE_VERSION);
wp_enqueue_script('vmpfence-toast-notifications', VMPFENCE_PLUGIN_URL . 'admin/assets/js/toast-notifications.js', array('jquery'), VMPFENCE_VERSION, true);

wp_enqueue_script('vmpfence-yara-scanner', VMPFENCE_PLUGIN_URL . 'admin/assets/js/yara-scanner.js', array('jquery', 'vmpfence-toast-notifications'), VMPFENCE_VERSION, true);

// Enqueue background cache processor
wp_enqueue_script('vmpfence-cache-processor', VMPFENCE_PLUGIN_URL . 'admin/assets/js/background-cache-processor.js', array('jquery', 'vmpfence-yara-scanner'), VMPFENCE_VERSION, true);

// Localize script
wp_localize_script('vmpfence-yara-scanner', 'vmpfence_yara', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('vmpfence_yara_scan'),
    'api_key' => $api_key
));
?>

<div class="wrap vmpfence-yara-wrap" id="vmpfence-yara-scanner">
    <h1 class="vmpfence-yara-title">
        <span class="dashicons dashicons-search" style="font-size: 32px; width: 32px; height: 32px;"></span>
        YARA Deep Scan
        <span class="vmpfence-premium-badge">PREMIUM</span>
    </h1>
    
    <!-- Background Cache Progress Notice -->
    <div id="vmpfence-cache-progress" class="notice notice-info" style="display:none; position: relative;">
        <div style="padding: 12px 15px;">
            <p id="vmpfence-cache-status-text" style="margin: 0 0 10px 0; font-weight: 600;">
                <span class="dashicons dashicons-update" style="animation: rotation 2s infinite linear;"></span>
                Building plugin checksum cache...
            </p>
            <div style="background: #f0f0f1; border-radius: 12px; height: 24px; overflow: hidden; position: relative; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);">
                <div id="vmpfence-cache-progress-bar" style="background: linear-gradient(135deg, #2A2669 0%, #20409A 100%); height: 100%; width: 0%; transition: width 0.3s ease;"></div>
                <div id="vmpfence-cache-progress-text" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #1d2327; font-size: 12px; font-weight: 600; text-shadow: 0 1px 1px rgba(255,255,255,0.5);">0%</div>
            </div>
        </div>
    </div>
    
    <p class="vmpfence-yara-description">
        Enterprise-grade malware detection using 996+ active YARA rules. Upload files or scan existing WordPress files for deep threat analysis.
    </p>

    <!-- Stats Cards -->
    <div class="vmpfence-yara-stats">
        <div class="vmpfence-stat-card">
            <div class="stat-icon">📊</div>
            <div class="stat-content">
                <div class="stat-value" id="total-scans">0</div>
                <div class="stat-label">Total Scans</div>
            </div>
        </div>
        <div class="vmpfence-stat-card">
            <div class="stat-icon">⚠️</div>
            <div class="stat-content">
                <div class="stat-value" id="threats-found">0</div>
                <div class="stat-label">Threats Found</div>
            </div>
        </div>
        <div class="vmpfence-stat-card">
            <div class="stat-icon">✅</div>
            <div class="stat-content">
                <div class="stat-value" id="clean-files">0</div>
                <div class="stat-label">Clean Files</div>
            </div>
        </div>
        <div class="vmpfence-stat-card">
            <div class="stat-icon">🔒</div>
            <div class="stat-content">
                <div class="stat-value" id="whitelisted-files">0</div>
                <div class="stat-label">Whitelisted Files</div>
            </div>
        </div>
        <div class="vmpfence-stat-card" id="yara-rules-stat" title="996 active rules (1,423 inactive) - Loading from server...">
            <div class="stat-icon">🛡️</div>
            <div class="stat-content">
                <div class="stat-value" id="yara-rules-count">996</div>
                <div class="stat-label">YARA Rules Active</div>
            </div>
        </div>
    </div>

    <!-- Sync YARA Rules Button -->
    <div style="margin: 15px 0; text-align: center;">
        <button type="button" id="sync-yara-rules-btn" class="button button-primary">
            <span class="dashicons dashicons-update" style="margin-top: 3px;"></span>
            Sync YARA Rules from Server
        </button>
        <span id="yara-sync-status" style="margin-left: 10px; color: #666;"></span>
    </div>

    <!-- Scan Options Tabs -->
    <div class="vmpfence-yara-tabs">
        <button class="vmpfence-tab active" data-tab="upload">
            <span class="dashicons dashicons-upload"></span>
            Upload File
        </button>
        <button class="vmpfence-tab" data-tab="wordpress">
            <span class="dashicons dashicons-wordpress"></span>
            Scan WordPress Files
        </button>
        <button class="vmpfence-tab" data-tab="history">
            <span class="dashicons dashicons-clock"></span>
            Scan History
        </button>
        <button class="vmpfence-tab" data-tab="whitelisted">
            <span class="dashicons dashicons-shield"></span>
            Whitelisted Files
        </button>
    </div>

    <!-- Tab Content -->
    <div class="vmpfence-yara-content">
        
        <!-- Upload File Tab -->
        <div class="vmpfence-tab-content active" id="upload-tab">
            <div class="vmpfence-upload-box">
                <div class="upload-area" id="upload-area">
                    <div style="margin-bottom: 15px;">
                        <span class="dashicons dashicons-cloud-upload" style="font-size: 64px; color: #191970; display: block;"></span>
                    </div>
                    <h3>Drop files here or click to upload</h3>
                    <p>Maximum file size: 10MB</p>
                    <input type="file" id="file-input" style="display: none;" />
                    <button class="button button-primary" id="select-file-btn">Select File</button>
                </div>
                
                <div class="selected-file-info" id="file-info" style="display: none;">
                    <div class="file-details">
                        <span class="dashicons dashicons-media-document"></span>
                        <div class="file-meta">
                            <strong id="file-name"></strong>
                            <span id="file-size"></span>
                        </div>
                        <button class="button" id="remove-file">×</button>
                    </div>
                    <button class="button button-primary button-large" id="scan-file-btn">
                        <span class="dashicons dashicons-search"></span>
                        Scan with YARA
                    </button>
                </div>
            </div>
        </div>

        <!-- WordPress Files Tab -->
        <div class="vmpfence-tab-content" id="wordpress-tab">
            
            <!-- Batch Scanning Feature Notice -->
            <div style="background: linear-gradient(135deg, #2A2669 0%, #20409A 100%); color: white; padding: 12px 20px; border-radius: 12px; margin-bottom: 20px;">
                <strong>⚡ Intelligent Batch Scanning:</strong> Scan multiple files simultaneously with 28x performance improvement! 
                Features file hash caching, queue management, and real-time progress tracking. 
                <span style="opacity: 0.9;">Average 70% cache hit rate on repeat scans.</span>
            </div>
            
            <p class="tab-description" style="margin-bottom: 15px; color: #666;">
                Browse and scan WordPress core files, plugins, and themes using optimized batch processing. 
                <strong>Select any number of files</strong> - they will be automatically processed in batches of 100 for optimal performance. 
                <span style="color: #191970; font-weight: 600;">Intelligent caching detects unchanged files automatically.</span>
            </p>
            
            <div class="vmpfence-file-browser">
                <div class="browser-header">
                    <h3>Select WordPress Files to Scan</h3>
                    <div class="browser-path" id="current-path">/</div>
                </div>
                
                <div class="file-filters">
                    <label style="font-weight: bold; color: #667eea;">
                        <input type="checkbox" id="select-all-files" /> Select All
                    </label>
                    <span style="border-left: 2px solid #ddd; height: 20px; margin: 0 10px;"></span>
                    <label>
                        <input type="checkbox" id="filter-plugins" /> Plugins
                    </label>
                    <label>
                        <input type="checkbox" id="filter-themes" /> Themes
                    </label>
                    <label>
                        <input type="checkbox" id="filter-core" /> WordPress Core
                    </label>
                    <label>
                        <input type="checkbox" id="filter-uploads" /> Uploads
                    </label>
                    <label>
                        <input type="checkbox" id="filter-custom" checked /> Custom
                    </label>
                    <p style="margin: 0; width: 100%; color: #666; font-size: 12px; font-style: italic;">
                        Scans PHP, JS, CSS, HTML, and other text-based files (excludes images, fonts, archives)
                    </p>
                </div>
                
                <div class="file-list-container">
                    <div class="file-list" id="file-list">
                        <div class="loading-spinner">
                            <span class="spinner is-active"></span>
                            <p>Loading WordPress files...</p>
                        </div>
                    </div>
                </div>
                
                <div class="selected-files-summary" id="selected-summary">
                    <div>
                        <span class="dashicons dashicons-yes-alt" style="font-size: 20px; margin-right: 10px;"></span>
                        <span id="selected-count">0</span> files selected
                        <span id="batch-size-warning" style="color: #2271b1; margin-left: 10px; font-weight: normal; font-style: italic; display: none;">
                        </span>
                    </div>
                    <div style="display: flex; gap: 10px;">
                        <button class="button button-primary button-large" id="scan-selected-btn" disabled>
                            <span class="dashicons dashicons-update"></span>
                            Scan Selected Files
                        </button>
                        <button class="button button-secondary button-large" id="cancel-scan-btn" style="display: none;">
                            <span class="dashicons dashicons-no"></span>
                            Cancel Scan
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- History Tab -->
        <div class="vmpfence-tab-content" id="history-tab">
            <div class="vmpfence-scan-history">
                <div class="history-header">
                    <h3>Scan History</h3>
                    <button class="button" id="refresh-history">
                        <span class="dashicons dashicons-update"></span>
                        Refresh
                    </button>
                </div>
                
                <div class="history-filters">
                    <select id="history-filter">
                        <option value="all">All Scans</option>
                        <option value="threats">Threats Only</option>
                        <option value="clean">Clean Only</option>
                    </select>
                    <input type="text" id="history-search" placeholder="Search files..." />
                </div>
                
                <table class="wp-list-table widefat fixed striped" id="history-table">
                    <thead>
                        <tr>
                            <th>Scan Date</th>
                            <th>Files Scanned</th>
                            <th>Status</th>
                            <th>Threats</th>
                            <th>Batches</th>
                            <th>Duration</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="history-tbody">
                        <tr>
                            <td colspan="7" class="no-results">
                                <span class="spinner is-active"></span>
                                Loading scan history...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- Whitelisted Files Tab -->
        <div class="vmpfence-tab-content" id="whitelisted-tab">
            <div class="vmpfence-scan-history">
                <div class="history-header">
                    <h3><span class="dashicons dashicons-shield"></span> Whitelisted Files</h3>
                    <p style="margin: 10px 0; color: #666;">Files marked as safe and excluded from YARA scanning.</p>
                    <button class="button" id="refresh-whitelist">
                        <span class="dashicons dashicons-update"></span>
                        Refresh
                    </button>
                </div>
                
                <table class="wp-list-table widefat fixed striped" id="whitelist-table">
                    <thead>
                        <tr>
                            <th style="width: 35%;">File Path</th>
                            <th style="width: 30%;">Original Threat</th>
                            <th style="width: 15%;">Whitelisted Date</th>
                            <th style="width: 10%;">By User</th>
                            <th style="width: 10%;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="whitelist-tbody">
                        <tr>
                            <td colspan="5" class="no-results">
                                <span class="spinner is-active"></span>
                                Loading whitelisted files...
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Scan Results Modal -->
    <div class="vmpfence-modal" id="results-modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>YARA Scan Results</h2>
                <button class="modal-close" id="close-modal">×</button>
            </div>
            <div class="modal-body" id="modal-body">
                <!-- Results will be inserted here -->
            </div>
            <div class="modal-footer">
                <button class="button" id="close-modal-btn">Close</button>
                <button class="button button-primary" id="download-report">Download Report</button>
            </div>
        </div>
    </div>

    <!-- Progress Overlay -->
    <div class="vmpfence-progress-overlay" id="progress-overlay" style="display: none;">
        <div class="progress-content">
            <div class="progress-spinner">
                <span class="spinner is-active"></span>
            </div>
            <h3 id="progress-title">Scanning with YARA...</h3>
            <p id="progress-message">Analyzing files with 996 malware detection rules</p>
            <div class="progress-bar-container">
                <div class="progress-bar" id="progress-bar"></div>
            </div>
            <p class="progress-detail" id="progress-detail">0%</p>
            <div class="progress-file-name" id="progress-file-name"></div>
            <button class="button button-secondary" id="cancel-scan-btn-modal" style="margin-top: 20px;">
                <span class="dashicons dashicons-no"></span>
                Cancel Scan
            </button>
        </div>
    </div>
</div>

<style>
.vmpfence-yara-wrap {
    max-width: 1400px;
    margin: 20px;
}

.vmpfence-yara-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.vmpfence-premium-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.vmpfence-yara-description {
    font-size: 15px;
    color: #555;
    margin-bottom: 30px;
}

.vmpfence-yara-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.vmpfence-stat-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.stat-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #191970;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 13px;
    color: #646970;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.vmpfence-yara-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #ddd;
}

.vmpfence-tab {
    background: none;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #646970;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vmpfence-tab:hover {
    color: #191970;
}

.vmpfence-tab.active {
    color: #191970;
    border-bottom-color: #191970;
}

.vmpfence-tab-content {
    display: none;
    background: white;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 30px;
    min-height: 400px;
}

.vmpfence-tab-content.active {
    display: block;
}

.vmpfence-upload-box {
    max-width: 800px;
    margin: 0 auto;
}

.upload-area {
    border: 2px dashed #191970;
    border-radius: 12px;
    padding: 60px;
    text-align: center;
    background: #f8f9ff;
    cursor: pointer;
    transition: all 0.3s;
}

.upload-area:hover {
    border-color: #131450;
    background: #f0f2ff;
}

.upload-area .dashicons-cloud-upload {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
}

.upload-area h3 {
    margin: 15px 0 5px;
    color: #191970;
    font-weight: 600;
}

.upload-area p {
    color: #646970;
    margin-bottom: 20px;
}

.selected-file-info {
    margin-top: 20px;
}

.file-details {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 20px;
}

.file-meta {
    flex: 1;
}

.file-meta strong {
    display: block;
    margin-bottom: 5px;
}

.file-meta span {
    color: #646970;
    font-size: 13px;
}

.vmpfence-file-browser {
    max-width: 100%;
}

.browser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.browser-path {
    font-family: monospace;
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 12px;
    color: #191970;
    font-weight: 600;
}

.file-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px 12px 0 0;
    border-bottom: none;
}

.file-list-container {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 12px 12px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 15px;
}

/* Scrollbar styling for better UX */
.file-list-container::-webkit-scrollbar {
    width: 12px;
}

.file-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 0 12px 0;
}

.file-list-container::-webkit-scrollbar-thumb {
    background: #191970;
    border-radius: 12px;
}

.file-list-container::-webkit-scrollbar-thumb:hover {
    background: #131450;
}

.file-list {
    padding: 10px 15px 10px 10px;
    min-height: 200px;
}

.file-item {
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.file-item:hover {
    background: #f8f9ff;
}

.file-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}

.file-item input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

.file-name {
    flex: 1;
    font-family: monospace;
    font-size: 13px;
}

.file-size {
    color: #999;
    font-size: 12px;
    flex-shrink: 0;
}

.selected-files-summary {
    margin-top: 20px;
    padding: 15px 20px;
    background: #f8f9fa;
    color: #333;
    border: 2px solid #667eea;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.selected-files-summary #selected-count {
    font-size: 18px;
    font-weight: bold;
}

.selected-files-summary button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.selected-files-summary button:not(:disabled) {
    background: #667eea;
    color: white;
    border-color: #667eea;
    font-weight: 600;
}

.selected-files-summary button:not(:disabled):hover {
    background: #5568d3;
    border-color: #5568d3;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.vmpfence-scan-history {
    max-width: 100%;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.history-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.history-filters select,
.history-filters input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.history-filters input {
    flex: 1;
    max-width: 300px;
}

/* Session Details Rows */
.session-details-row {
    background: #f8f9fa !important;
}

.session-details-content {
    padding: 20px;
    border-left: 4px solid #667eea;
}

.session-details-content p {
    margin: 10px 0;
    font-size: 14px;
}

.session-details-content ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.session-details-content ul li {
    padding: 8px 12px;
    background: #fff;
    margin: 5px 0;
    border-radius: 4px;
    border-left: 3px solid #f44336;
}

.threat-count {
    color: #f44336;
    font-weight: bold;
}

.scan-session-row:hover {
    background: #f0f0f0;
    cursor: pointer;
}

.view-threats {
    background: #f44336 !important;
    border-color: #d32f2f !important;
    color: white !important;
}

.view-threats:hover {
    background: #d32f2f !important;
}

.vmpfence-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.modal-close {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #999;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.vmpfence-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.95);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-content {
    text-align: center;
    width: 600px;
    min-height: 300px;
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.progress-spinner {
    margin-bottom: 20px;
}

#progress-title {
    font-size: 22px;
    margin-bottom: 10px;
    color: #191970;
    font-weight: 600;
    min-height: 30px;
}

#progress-message {
    font-size: 14px;
    color: #646970;
    margin-bottom: 20px;
    min-height: 20px;
}

#progress-detail {
    font-size: 18px;
    font-weight: 600;
    color: #191970;
    margin-top: 15px;
    margin-bottom: 5px;
    min-height: 28px;
}

.progress-file-name {
    font-size: 11px;
    color: #999;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 20px;
    min-height: 20px;
    line-height: 20px;
}

.progress-bar-container {
    background: #f0f0f0;
    border-radius: 12px;
    height: 12px;
    margin: 25px 0;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.progress-bar {
    background: linear-gradient(90deg, #2A2669, #20409A);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 12px;
}

.loading-spinner {
    text-align: center;
    padding: 60px;
}

.no-results {
    text-align: center;
    padding: 40px;
    color: #999;
}

/* Background Cache Processor Styles */
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

#vmpfence-cache-progress .dashicons-update {
    display: inline-block;
}

.dashicons.spin {
    animation: rotation 1s infinite linear;
    display: inline-block;
}
</style>
