<?php
require_once '../config.php';
require_once '../app/classes/AdminAuth.php';
require_once '../app/classes/AccountStatusManager.php';

$adminAuth = new AdminAuth($conn);

// Check if admin is authenticated
if (!$adminAuth->isAuthenticated()) {
    header('Location: admin_login.php');
    exit();
}

// Initialize account status manager
$accountManager = new AccountStatusManager($conn);

// Handle form submissions
$message = '';
$message_type = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action'])) {
        switch ($_POST['action']) {
            case 'update_status':
                $userId = intval($_POST['user_id']);
                $newStatus = $_POST['new_status'];
                $reason = trim($_POST['reason']);
                
                $result = $accountManager->updateAccountStatus($userId, $newStatus, $reason);
                if ($result['success']) {
                    $message = 'Account status updated successfully';
                    $message_type = 'success';
                } else {
                    $message = $result['message'];
                    $message_type = 'error';
                }
                break;
                
            case 'bulk_update':
                $userIds = $_POST['user_ids'] ?? [];
                $newStatus = $_POST['bulk_status'];
                $reason = trim($_POST['bulk_reason']);
                
                if (!empty($userIds)) {
                    $result = $accountManager->bulkUpdateAccountStatus($userIds, $newStatus, $reason);
                    $message = "Bulk update completed: {$result['success_count']} successful, {$result['error_count']} failed";
                    $message_type = $result['error_count'] > 0 ? 'warning' : 'success';
                } else {
                    $message = 'No users selected for bulk update';
                    $message_type = 'error';
                }
                break;
        }
    }
}

// Get filter parameters
$status = isset($_GET['status']) ? $_GET['status'] : null;
$role = isset($_GET['role']) ? $_GET['role'] : null;
$page = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$perPage = 500;

// Get users with status
$users = $accountManager->getAllUsersWithStatus($status, $role, $perPage, ($page - 1) * $perPage);

// Get account status statistics
$statusStats = $accountManager->getAccountStatusStats();
$statusSummary = $accountManager->getAccountStatusSummary();

// Get recent status changes
$statusHistory = $accountManager->getAccountStatusHistory(null, 10);

// Available statuses and roles
$statuses = ['active', 'inactive', 'suspended'];
$roles = ['agent'];

// Set page variables for header
$page_title = 'Account Management';
$page_description = 'Manage user account status and access control across your platform';
?>

<!-- Page Header -->
<div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-2xl p-8 mb-8 border border-slate-600 shadow-2xl">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-4xl font-bold text-white mb-2 flex items-center">
                <i class="fas fa-user-cog mr-4 text-blue-400"></i>Account Management
            </h1>
            <p class="text-slate-300 text-lg">Manage user account status and access control across your platform</p>
        </div>
        <div class="text-right">
            <p class="text-sm text-slate-300">Total Users</p>
            <p class="text-lg font-semibold text-white"><?= number_format($statusSummary['total_users']) ?></p>
        </div>
    </div>
</div>

        <!-- Success/Error Messages -->
        <?php if (!empty($message)): ?>
        <div class="mb-6 p-4 rounded-xl border flex items-center gap-3 <?= $message_type === 'success' ? 'bg-green-900/20 border-green-500/30 text-green-300' : ($message_type === 'warning' ? 'bg-yellow-900/20 border-yellow-500/30 text-yellow-300' : 'bg-red-900/20 border-red-500/30 text-red-300') ?>">
            <i class="fas fa-<?= $message_type === 'success' ? 'check-circle' : ($message_type === 'warning' ? 'exclamation-triangle' : 'exclamation-circle') ?> text-lg"></i>
            <span class="font-medium"><?= htmlspecialchars($message) ?></span>
        </div>
        <?php endif; ?>

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl p-6 border border-slate-600 shadow-lg hover:shadow-xl transition-all duration-300">
                <div class="flex items-center">
                    <div class="p-3 bg-blue-500/20 rounded-lg">
                        <i class="fas fa-users text-blue-400 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-slate-300 text-sm font-medium">Total Users</p>
                        <p class="text-2xl font-bold text-white"><?= number_format($statusSummary['total_users']) ?></p>
                    </div>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl p-6 border border-slate-600 shadow-lg hover:shadow-xl transition-all duration-300">
                <div class="flex items-center">
                    <div class="p-3 bg-green-500/20 rounded-lg">
                        <i class="fas fa-check-circle text-green-400 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-slate-300 text-sm font-medium">Active Users</p>
                        <p class="text-2xl font-bold text-white"><?= number_format($statusSummary['active_users']) ?></p>
                    </div>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl p-6 border border-slate-600 shadow-lg hover:shadow-xl transition-all duration-300">
                <div class="flex items-center">
                    <div class="p-3 bg-yellow-500/20 rounded-lg">
                        <i class="fas fa-pause-circle text-yellow-400 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-slate-300 text-sm font-medium">Inactive Users</p>
                        <p class="text-2xl font-bold text-white"><?= number_format($statusSummary['inactive_users']) ?></p>
                    </div>
                </div>
            </div>
            
            <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl p-6 border border-slate-600 shadow-lg hover:shadow-xl transition-all duration-300">
                <div class="flex items-center">
                    <div class="p-3 bg-red-500/20 rounded-lg">
                        <i class="fas fa-ban text-red-400 text-xl"></i>
                    </div>
                    <div class="ml-4">
                        <p class="text-slate-300 text-sm font-medium">Suspended Users</p>
                        <p class="text-2xl font-bold text-white"><?= number_format($statusSummary['suspended_users']) ?></p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Status Distribution -->
        <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl mb-8 border border-slate-600 shadow-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-600">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <i class="fas fa-chart-pie mr-3 text-purple-400"></i>Account Status Distribution
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <?php foreach ($statuses as $statusType): ?>
                    <div class="text-center">
                        <h3 class="text-lg font-semibold text-white mb-4"><?= ucfirst($statusType) ?> Users</h3>
                        <div class="space-y-3">
                            <?php 
                            $statusData = array_filter($statusStats, function($stat) use ($statusType) {
                                return $stat['account_status'] === $statusType;
                            });
                            foreach ($statusData as $stat): 
                            ?>
                            <div class="flex justify-between items-center bg-slate-700/50 rounded-lg p-3">
                                <span class="text-sm text-slate-300"><?= ucfirst($stat['role']) ?>s</span>
                                <span class="text-sm font-bold text-white bg-slate-600 px-3 py-1 rounded-full"><?= $stat['count'] ?></span>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <!-- Filters and Bulk Actions -->
        <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl mb-8 border border-slate-600 shadow-lg">
            <div class="px-6 py-4 border-b border-slate-600">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <i class="fas fa-filter mr-3 text-blue-400"></i>Filters & Bulk Actions
                </h2>
            </div>
            <div class="p-6">
                <form method="GET" action="index.php" class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <input type="hidden" name="page" value="account_management">
                    <div>
                        <label for="status" class="block text-sm font-medium text-slate-300 mb-2">Account Status</label>
                        <select id="status" name="status" class="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                            <option value="">All Statuses</option>
                            <?php foreach ($statuses as $statusType): ?>
                            <option value="<?= $statusType ?>" <?= $status === $statusType ? 'selected' : '' ?>><?= ucfirst($statusType) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div>
                        <label for="role" class="block text-sm font-medium text-slate-300 mb-2">User Role</label>
                        <select id="role" name="role" class="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                            <option value="">All Roles</option>
                            <?php foreach ($roles as $roleType): ?>
                            <option value="<?= $roleType ?>" <?= $role === $roleType ? 'selected' : '' ?>><?= ucfirst($roleType) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div class="flex items-end">
                        <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-105 shadow-lg flex items-center justify-center">
                            <i class="fas fa-search mr-2"></i>Apply Filters
                        </button>
                    </div>
                    
                    <div class="flex items-end">
                        <a href="index.php?page=account_management" class="w-full bg-gradient-to-r from-gray-600 to-gray-700 hover:from-gray-700 hover:to-gray-800 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-105 shadow-lg text-center flex items-center justify-center">
                            <i class="fas fa-times mr-2"></i>Clear Filters
                        </a>
                    </div>
                </form>
                
                <!-- Bulk Actions -->
                <form method="POST" id="bulkForm" onsubmit="return confirm('Are you sure you want to update the selected accounts?')">
                    <input type="hidden" name="action" value="bulk_update">
                    <div class="flex items-center space-x-4">
                        <div class="flex-1">
                            <label for="bulk_status" class="block text-sm font-medium text-slate-300 mb-2">Bulk Status Update</label>
                            <select id="bulk_status" name="bulk_status" class="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                <option value="">Select Status</option>
                                <?php foreach ($statuses as $statusType): ?>
                                <option value="<?= $statusType ?>"><?= ucfirst($statusType) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        
                        <div class="flex-1">
                            <label for="bulk_reason" class="block text-sm font-medium text-slate-300 mb-2">Reason</label>
                            <input type="text" id="bulk_reason" name="bulk_reason" placeholder="Reason for status change"
                                   class="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                        </div>
                        
                        <div class="flex items-end">
                            <button type="submit" class="bg-gradient-to-r from-orange-600 to-red-600 hover:from-orange-700 hover:to-red-700 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-105 shadow-lg flex items-center">
                                <i class="fas fa-users mr-2"></i>Bulk Update
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Users List -->
        <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl border border-slate-600 shadow-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-600">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <i class="fas fa-list mr-3 text-green-400"></i>User Accounts
                </h2>
            </div>
            <div class="overflow-x-auto">
                <?php if (empty($users)): ?>
                <div class="p-8 text-center text-slate-300">
                    <i class="fas fa-users text-5xl mb-4 text-slate-400"></i>
                    <p class="text-lg">No users found matching the selected filters.</p>
                </div>
                <?php else: ?>
                <table class="w-full">
                    <thead class="bg-slate-700/50">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">
                                <input type="checkbox" id="selectAll" onchange="toggleSelectAll()" class="rounded border-slate-600 bg-slate-700 text-blue-500 focus:ring-blue-500">
                            </th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">User</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Role</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Status</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Last Updated</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-600">
                        <?php foreach ($users as $user): ?>
                        <tr class="hover:bg-slate-700/50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" name="user_ids[]" value="<?= $user['id'] ?>" class="user-checkbox rounded border-slate-600 bg-slate-700 text-blue-500 focus:ring-blue-500">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div>
                                    <div class="text-sm font-medium text-white"><?= htmlspecialchars($user['username']) ?></div>
                                    <div class="text-sm text-slate-300"><?= htmlspecialchars($user['email']) ?></div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-900/30 text-blue-300 border border-blue-500/30">
                                    <?= ucfirst($user['role']) ?>
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium <?= $user['account_status'] === 'active' ? 'bg-green-900/30 text-green-300 border border-green-500/30' : ($user['account_status'] === 'inactive' ? 'bg-yellow-900/30 text-yellow-300 border border-yellow-500/30' : 'bg-red-900/30 text-red-300 border border-red-500/30') ?>">
                                    <?= ucfirst($user['account_status']) ?>
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">
                                <?= $user['account_status_updated_at'] ? date('M j, Y g:i A', strtotime($user['account_status_updated_at'])) : 'Never' ?>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button onclick="editAccountStatus(<?= htmlspecialchars(json_encode($user)) ?>)" 
                                        class="text-blue-400 hover:text-blue-300 transition-colors font-medium">Edit</button>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <?php endif; ?>
            </div>
        </div>

        <!-- Recent Status Changes -->
        <?php if (!empty($statusHistory)): ?>
        <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl mt-8 border border-slate-600 shadow-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-600">
                <h2 class="text-xl font-bold text-white flex items-center">
                    <i class="fas fa-history mr-3 text-purple-400"></i>Recent Status Changes
                </h2>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-slate-700/50">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">User</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Status Change</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Reason</th>
                            <th class="px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-600">
                        <?php foreach ($statusHistory as $change): ?>
                        <tr class="hover:bg-slate-700/50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-white"><?= htmlspecialchars($change['user_username']) ?></div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center space-x-2">
                                    <?php if ($change['old_status']): ?>
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-slate-600 text-slate-300">
                                        <?= ucfirst($change['old_status']) ?>
                                    </span>
                                    <i class="fas fa-arrow-right text-slate-400"></i>
                                    <?php endif; ?>
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium <?= $change['new_status'] === 'active' ? 'bg-green-900/30 text-green-300 border border-green-500/30' : ($change['new_status'] === 'inactive' ? 'bg-yellow-900/30 text-yellow-300 border border-yellow-500/30' : 'bg-red-900/30 text-red-300 border border-red-500/30') ?>">
                                        <?= ucfirst($change['new_status']) ?>
                                    </span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">
                                <?= htmlspecialchars($change['reason']) ?>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-300">
                                <?= date('M j, Y g:i A', strtotime($change['changed_at'])) ?>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <?php endif; ?>
    </div>

    <!-- Edit Account Status Modal -->
    <div id="editModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="bg-gradient-to-br from-slate-800 to-slate-700 rounded-xl shadow-2xl max-w-md w-full border border-slate-600">
                <div class="px-6 py-4 border-b border-slate-600">
                    <h3 class="text-xl font-bold text-white flex items-center">
                        <i class="fas fa-edit mr-3 text-blue-400"></i>Edit Account Status
                    </h3>
                </div>
                <form method="POST" id="editForm">
                    <input type="hidden" name="action" value="update_status">
                    <input type="hidden" name="user_id" id="edit_user_id">
                    
                    <div class="p-6 space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">User</label>
                            <p id="edit_username" class="text-sm text-white bg-slate-700 p-3 rounded-lg"></p>
                        </div>
                        
                        <div>
                            <label for="edit_new_status" class="block text-sm font-medium text-slate-300 mb-2">New Status</label>
                            <select id="edit_new_status" name="new_status" required
                                    class="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                                <?php foreach ($statuses as $statusType): ?>
                                <option value="<?= $statusType ?>"><?= ucfirst($statusType) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        
                        <div>
                            <label for="edit_reason" class="block text-sm font-medium text-slate-300 mb-2">Reason</label>
                            <textarea id="edit_reason" name="reason" rows="3"
                                      class="w-full px-4 py-3 bg-slate-700 border border-slate-600 rounded-lg text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                                      placeholder="Reason for status change..."></textarea>
                        </div>
                    </div>
                    
                    <div class="px-6 py-4 border-t border-slate-600 flex justify-end space-x-3">
                        <button type="button" onclick="closeEditModal()" 
                                class="px-6 py-3 text-slate-300 bg-slate-700 border border-slate-600 rounded-lg hover:bg-slate-600 transition-colors font-medium">
                            Cancel
                        </button>
                        <button type="submit" 
                                class="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-lg transition-all transform hover:scale-105 shadow-lg font-medium">
                            Update Status
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        function toggleSelectAll() {
            const selectAll = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('.user-checkbox');
            
            checkboxes.forEach(checkbox => {
                checkbox.checked = selectAll.checked;
            });
        }
        
        function editAccountStatus(user) {
            document.getElementById('edit_user_id').value = user.id;
            document.getElementById('edit_username').textContent = user.username + ' (' + user.role + ')';
            document.getElementById('edit_new_status').value = user.account_status;
            document.getElementById('edit_reason').value = '';
            
            document.getElementById('editModal').classList.remove('hidden');
        }
        
        function closeEditModal() {
            document.getElementById('editModal').classList.add('hidden');
        }
        
        // Close modal when clicking outside
        document.getElementById('editModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeEditModal();
            }
        });
    </script>

<style>
/* Professional Dark Theme for Account Management */
body {
    background-color: #0a0a0a !important;
    color: #e5e5e5 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Professional Card Styling */
.bg-gradient-to-br {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
}

.from-slate-800 {
    --tw-gradient-from: #1a1a1a !important;
}

.to-slate-700 {
    --tw-gradient-to: #2a2a2a !important;
}

.border-slate-600 {
    border-color: #2a2a2a !important;
}

/* Professional Text Colors */
.text-white {
    color: #ffffff !important;
}

.text-slate-300 {
    color: #b0b0b0 !important;
}

.text-slate-400 {
    color: #808080 !important;
}

.text-slate-600 {
    color: #606060 !important;
}

.text-slate-700 {
    color: #404040 !important;
}

.text-slate-900 {
    color: #ffffff !important;
}

/* Professional Form Inputs */
.bg-slate-700 {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
    color: #e5e5e5 !important;
}

.bg-slate-700:focus {
    border-color: #606060 !important;
    box-shadow: 0 0 0 2px rgba(96, 96, 96, 0.2) !important;
    outline: none !important;
}

.border-slate-600 {
    border-color: #404040 !important;
}

/* Professional Buttons */
.bg-blue-600 {
    background-color: #404040 !important;
    border: 1px solid #505050 !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.bg-blue-600:hover {
    background-color: #505050 !important;
    border-color: #606060 !important;
}

.bg-blue-700 {
    background-color: #505050 !important;
}

.bg-blue-700:hover {
    background-color: #606060 !important;
}

.bg-orange-600 {
    background-color: #2a2410 !important;
    border: 1px solid #3a3410 !important;
    color: #d0c060 !important;
}

.bg-orange-600:hover {
    background-color: #3a3410 !important;
    border-color: #4a4410 !important;
}

.bg-orange-700 {
    background-color: #3a3410 !important;
}

.bg-orange-700:hover {
    background-color: #4a4410 !important;
}

/* Professional Table Styling */
.bg-slate-700 {
    background-color: #2a2a2a !important;
}

.divide-slate-600 {
    border-color: #2a2a2a !important;
}

.hover\:bg-slate-700\/50:hover {
    background-color: rgba(42, 42, 42, 0.5) !important;
}

/* Professional Status Badges */
.bg-green-500\/20 {
    background-color: rgba(16, 42, 16, 0.8) !important;
    color: #60d060 !important;
    border: 1px solid rgba(42, 74, 42, 0.5) !important;
}

.bg-yellow-500\/20 {
    background-color: rgba(42, 36, 16, 0.8) !important;
    color: #d0c060 !important;
    border: 1px solid rgba(58, 52, 16, 0.5) !important;
}

.bg-red-500\/20 {
    background-color: rgba(42, 16, 16, 0.8) !important;
    color: #d06060 !important;
    border: 1px solid rgba(58, 32, 32, 0.5) !important;
}

.bg-blue-500\/20 {
    background-color: rgba(26, 35, 50, 0.8) !important;
    color: #80a0c0 !important;
    border: 1px solid rgba(42, 58, 74, 0.5) !important;
}

/* Professional Modal Styling */
.bg-slate-800 {
    background-color: #1a1a1a !important;
}

.bg-slate-700 {
    background-color: #2a2a2a !important;
}

/* Professional Icon Colors */
.text-green-400 {
    color: #60d060 !important;
}

.text-blue-400 {
    color: #80a0c0 !important;
}

.text-purple-400 {
    color: #c080d0 !important;
}

.text-yellow-400 {
    color: #d0c060 !important;
}

.text-red-400 {
    color: #d06060 !important;
}

/* Professional Shadows */
.shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Professional Hover Effects */
.hover\:-translate-y-1:hover {
    transform: translateY(-4px) !important;
}

.hover\:-translate-y-0\.5:hover {
    transform: translateY(-2px) !important;
}

/* Professional Transitions */
* {
    transition: all 0.2s ease !important;
}

/* Professional Typography */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.text-4xl {
    font-size: 2.25rem !important;
    line-height: 2.5rem !important;
}

.text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

.text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

/* Professional Focus States */
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: #606060 !important;
    box-shadow: 0 0 0 2px rgba(96, 96, 96, 0.2) !important;
}

/* Professional Checkbox Styling */
input[type="checkbox"] {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
}

input[type="checkbox"]:checked {
    background-color: #606060 !important;
    border-color: #606060 !important;
}

/* Professional Responsive Design */
@media (max-width: 768px) {
    .grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Professional Message Styling */
.bg-green-900\/20 {
    background-color: rgba(16, 42, 16, 0.2) !important;
    border-color: rgba(96, 192, 96, 0.3) !important;
    color: #60d060 !important;
}

.bg-yellow-900\/20 {
    background-color: rgba(42, 36, 16, 0.2) !important;
    border-color: rgba(208, 192, 96, 0.3) !important;
    color: #d0c060 !important;
}

.bg-red-900\/20 {
    background-color: rgba(42, 16, 16, 0.2) !important;
    border-color: rgba(208, 96, 96, 0.3) !important;
    color: #d06060 !important;
}

/* Professional Grid and Spacing */
.space-y-6 > * + * {
    margin-top: 1.5rem !important;
}

.space-x-3 > * + * {
    margin-left: 0.75rem !important;
}

.space-x-4 > * + * {
    margin-left: 1rem !important;
}

/* Professional Border Radius */
.rounded-xl {
    border-radius: 0.75rem !important;
}

.rounded-lg {
    border-radius: 0.5rem !important;
}

/* Professional Padding */
.p-6 {
    padding: 1.5rem !important;
}

.p-8 {
    padding: 2rem !important;
}

.px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Professional Margin */
.mb-6 {
    margin-bottom: 1.5rem !important;
}

.mb-8 {
    margin-bottom: 2rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.mr-3 {
    margin-right: 0.75rem !important;
}

.mr-4 {
    margin-right: 1rem !important;
}
</style>
