please change the design codes color and make it better layout design (<?php
// /public/workspace/business_development/index.php

// Enable comprehensive error reporting for debugging purposes (Disable in production)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Start output buffering to prevent "headers already sent" errors
ob_start();

// Include authentication, database connection, and utility functions
require_once __DIR__ . '/../../../includes/auth.php';
require_once __DIR__ . '/../../../includes/db_connect.php';
require_once __DIR__ . '/includes/functions.php'; // Contains sanitize_input(), generate_csrf_token(), verify_csrf_token(), log_action()

// Ensure the user is authenticated
ensure_authenticated();

// Initialize variables
$errors = [];
$influencers = [];
$search = '';
$page = 1;
$limit = 10;
$offset = 0;
$total = 0;
$total_pages = 1;

// Handle search query
if (isset($_GET['search'])) {
    $search = sanitize_input($_GET['search']);
}

// Handle pagination
if (isset($_GET['page']) && is_numeric($_GET['page'])) {
    $page = (int) $_GET['page'];
    if ($page < 1) {
        $page = 1;
    }
}

$offset = ($page - 1) * $limit;

// Handle deletion feedback
$success = '';
$delete_errors = [];

if (isset($_SESSION['delete_success'])) {
    $success = $_SESSION['delete_success'];
    unset($_SESSION['delete_success']);
}

if (isset($_SESSION['delete_errors'])) {
    $delete_errors = $_SESSION['delete_errors'];
    unset($_SESSION['delete_errors']);
}

try {
    // Count total influencers for pagination
    if (!empty($search)) {
        $count_sql = "SELECT COUNT(*) as total FROM influencers WHERE 
            name LIKE ? OR 
            contact_number LIKE ? OR 
            address LIKE ? OR 
            contact_info LIKE ? OR 
            social_media LIKE ? OR 
            delivery_datetime LIKE ?";
        $stmt = $conn->prepare($count_sql);
        $like_search = "%" . $search . "%";
        $stmt->bind_param("ssssss", $like_search, $like_search, $like_search, $like_search, $like_search, $like_search);
    } else {
        $count_sql = "SELECT COUNT(*) as total FROM influencers";
        $stmt = $conn->prepare($count_sql);
    }

    if ($stmt) {
        $stmt->execute();
        $result = $stmt->get_result();
        $row = $result->fetch_assoc();
        $total = $row['total'];
        $total_pages = ceil($total / $limit);
        $stmt->close();
    } else {
        throw new Exception("Prepare statement failed: " . $conn->error);
    }

    // Fetch influencers with search and pagination
    if (!empty($search)) {
        $sql = "SELECT * FROM influencers WHERE 
            name LIKE ? OR 
            contact_number LIKE ? OR 
            address LIKE ? OR 
            contact_info LIKE ? OR 
            social_media LIKE ? OR 
            delivery_datetime LIKE ? 
            ORDER BY delivery_datetime DESC 
            LIMIT ? OFFSET ?";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("ssssssii", $like_search, $like_search, $like_search, $like_search, $like_search, $like_search, $limit, $offset);
    } else {
        $sql = "SELECT * FROM influencers ORDER BY delivery_datetime DESC LIMIT ? OFFSET ?";
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("ii", $limit, $offset);
    }

    if ($stmt) {
        $stmt->execute();
        $result = $stmt->get_result();
        while ($row = $result->fetch_assoc()) {
            $influencers[] = $row;
        }
        $stmt->close();
    } else {
        throw new Exception("Prepare statement failed: " . $conn->error);
    }
} catch (Exception $e) {
    $errors[] = "An error occurred while fetching influencers.";
    // Optionally log the detailed error
    log_action($_SESSION['user_id'], 'Fetch Influencers Error', $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Business Development - Influencers</title>
    <!-- Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
    <!-- Custom Styles -->
    <style>
        body {
            font-family: 'Cairo', sans-serif;
        }
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 220px;
            background-color: #4B5563; /* Tailwind's gray-700 */
            color: #fff;
            text-align: left;
            border-radius: 4px;
            padding: 8px;
            position: absolute;
            z-index: 10;
            bottom: 125%; /* Position above the icon */
            left: 50%;
            margin-left: -110px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        /* Responsive Table */
        @media (max-width: 1024px) {
            table {
                min-width: 900px;
            }
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900">

    <!-- Include header.php from the shared includes directory -->
    <?php include __DIR__ . '/../../../includes/header.php'; ?>

    <!-- Main Content -->
    <main class="container mx-auto p-6 mt-4 mb-20">
        <!-- Page Title -->
        <h1 class="text-3xl font-bold mb-6 flex items-center text-teal-600">
            <i class="bi bi-people-fill text-teal-500 mr-2"></i> Business Development - Influencers
        </h1>

        <!-- Display Success Message -->
        <?php if (!empty($success)): ?>
            <div class="mb-6">
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
                    <?= htmlspecialchars($success) ?>
                </div>
            </div>
        <?php endif; ?>

        <!-- Display Delete Errors -->
        <?php if (!empty($delete_errors)): ?>
            <div class="mb-6">
                <?php foreach ($delete_errors as $del_error): ?>
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-2">
                        <?= htmlspecialchars($del_error) ?>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Display General Errors -->
        <?php if (!empty($errors)): ?>
            <div class="mb-6">
                <?php foreach ($errors as $error): ?>
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-2">
                        <?= htmlspecialchars($error) ?>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Search and Add Influencer -->
        <div class="flex flex-col md:flex-row md:justify-between mb-4">
            <!-- Search Form -->
            <form method="GET" action="index.php" class="mb-4 md:mb-0">
                <div class="flex items-center">
                    <input type="text" name="search" value="<?= htmlspecialchars($search) ?>"
                           class="shadow appearance-none border rounded-l w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none focus:shadow-outline"
                           placeholder="Search by Name, Contact, Address, etc.">
                    <button type="submit"
                            class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded-r">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </form>

            <!-- Add Influencer Button -->
            <div>
                <a href="add_influencer.php"
                   class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded flex items-center">
                    <i class="bi bi-plus-circle mr-2"></i> Add New Influencer
                </a>
            </div>
        </div>

        <!-- Influencers Table -->
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
            <?php if (!empty($influencers)): ?>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact Number</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact Info</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Social Media</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Delivery Date-Time</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Notes</th>
                                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            <?php foreach ($influencers as $influencer): ?>
                                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700 transition">
                                    <td class="px-6 py-4 whitespace-nowrap"><?= htmlspecialchars($influencer['name']) ?></td>
                                    <td class="px-6 py-4 whitespace-nowrap"><?= htmlspecialchars($influencer['contact_number']) ?></td>
                                    <td class="px-6 py-4 whitespace-nowrap"><?= nl2br(htmlspecialchars($influencer['address'])) ?></td>
                                    <td class="px-6 py-4 whitespace-nowrap"><?= htmlspecialchars($influencer['contact_info']) ?></td>
                                    <td class="px-6 py-4 whitespace-nowrap"><?= htmlspecialchars($influencer['social_media']) ?></td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <?= $influencer['delivery_datetime'] ? htmlspecialchars(date("Y-m-d H:i", strtotime($influencer['delivery_datetime']))) : 'N/A' ?>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <?= nl2br(htmlspecialchars($influencer['notes'])) ?>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right">
                                        <a href="edit_influencer.php?id=<?= urlencode($influencer['id']) ?>"
                                           class="text-blue-500 hover:text-blue-700 mr-4" title="Edit Influencer">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>
                                        <form action="delete_influencer.php" method="POST" class="inline-block">
                                            <input type="hidden" name="id" value="<?= htmlspecialchars($influencer['id']) ?>">
                                            <input type="hidden" name="csrf_token" value="<?= htmlspecialchars(generate_csrf_token()) ?>">
                                            <button type="submit"
                                                    class="text-red-500 hover:text-red-700"
                                                    title="Delete Influencer"
                                                    onclick="return confirm('Are you sure you want to delete this influencer?');">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="mt-4 flex justify-between items-center">
                    <div>
                        <p class="text-sm text-gray-700 dark:text-gray-300">
                            Showing
                            <span class="font-medium"><?= $offset + 1 ?></span>
                            to
                            <span class="font-medium"><?= min($offset + $limit, $total) ?></span>
                            of
                            <span class="font-medium"><?= $total ?></span>
                            results
                        </p>
                    </div>
                    <div class="flex space-x-2">
                        <?php if ($page > 1): ?>
                            <a href="?page=<?= $page - 1 ?>&search=<?= urlencode($search) ?>"
                               class="px-3 py-2 bg-teal-500 text-white rounded-md hover:bg-teal-600">
                                Previous
                            </a>
                        <?php endif; ?>

                        <?php if ($page < $total_pages): ?>
                            <a href="?page=<?= $page + 1 ?>&search=<?= urlencode($search) ?>"
                               class="px-3 py-2 bg-teal-500 text-white rounded-md hover:bg-teal-600">
                                Next
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            <?php else: ?>
                <p class="text-gray-500">No influencers found. Click "Add New Influencer" to get started.</p>
            <?php endif; ?>
        </div>
    </main>

    <!-- Include footer.php from the shared includes directory -->
    <?php include __DIR__ . '/../../../includes/footer.php'; ?>

    <!-- Tailwind JS (Optional for interactive components) -->
    <script src="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.js"></script>
    
    <!-- Optional: Add any additional JS here -->
    <script>
        // Initialize any additional scripts if necessary
    </script>
</body>
</html>

<?php
// Flush the output buffer
ob_end_flush();
// No closing PHP tag to prevent unwanted output
?>) and type full codes