<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

if (!isset($_SESSION["user_id"]) || !isset($_SESSION["role"]) || $_SESSION["role"] !== "admin") {
    header("Location: index.php");
    exit();
}

$page = $_GET['page'] ?? 'dashboard';
$showDashboardRightPanel = ($page === 'dashboard');

require_once __DIR__ . "/../php/db_connect.php";

$current_user_id = (int)$_SESSION["user_id"];
$unreadMessages = 0;

if (isset($conn) && $conn) {
    $unreadStmt = $conn->prepare("
        SELECT COUNT(*) AS total
        FROM messages
        WHERE receiver_user_id = ?
          AND is_read = 0
    ");

    if ($unreadStmt) {
        $unreadStmt->bind_param("i", $current_user_id);
        $unreadStmt->execute();
        $unreadResult = $unreadStmt->get_result();

        if ($unreadResult) {
            $unreadMessages = (int)($unreadResult->fetch_assoc()["total"] ?? 0);
        }
    }
}

$shopName = $_SESSION["shop_name"] ?? "Admin";

function isActive($currentPage, $pageName) {
    return $currentPage === $pageName ? "active" : "";
}

function pageTitle($page) {
    $titles = [
        "dashboard" => "Dashboard",
        "users" => "User Management",
        "services" => "Service Management",
        "archived-services" => "Archived Services",
        "add-service" => "Add Service",
        "edit-service" => "Edit Service",
        "service-types" => "Service Types",
        "orders" => "Order Management",
        "order-details" => "Order Details",
        "outsourcing-requests" => "Outsourcing Requests",
        "outsourcing-hub" => "Outsourcing Hub",
        "outsourced-jobs" => "Outsourced Jobs",
        "job-tracking" => "Job Tracking",
        "reports" => "Reports",
        "profile" => "Profile",
       "commission" => "Commission",
"payment" => "Payment",
"feedback-monitoring" => "Feedback Monitoring",
"messages" => "Messages"

        
    ];

    return $titles[$page] ?? "Dashboard";
}

function renderMenu($page) {
?>
    <ul class="sidebar-menu">

        <li class="sidebar-item <?php echo isActive($page, 'dashboard'); ?>">
            <a href="admin.php">
                <span class="icon"><i class="fa-solid fa-house"></i></span>
                <span class="menu-text">Dashboard</span>
            </a>
        </li>

        <li class="sidebar-item <?php echo isActive($page, 'users'); ?>">
            <a href="admin.php?page=users">
                <span class="icon"><i class="fa-solid fa-users"></i></span>
                <span class="menu-text">User Management</span>
            </a>
        </li>

        <li class="sidebar-item <?php echo isActive($page, 'services'); ?>">
            <a href="admin.php?page=services">
                <span class="icon"><i class="fa-solid fa-scissors"></i></span>
                <span class="menu-text">Service Management</span>
            </a>
        </li>

        <li class="sidebar-item <?php echo isActive($page, 'orders'); ?>">
            <a href="admin.php?page=orders">
                <span class="icon"><i class="fa-solid fa-receipt"></i></span>
                <span class="menu-text">Order Management</span>
            </a>
        </li>

        <li class="sidebar-item <?php echo isActive($page, 'outsourcing-requests'); ?>">
            <a href="admin.php?page=outsourcing-requests">
                <span class="icon"><i class="fa-solid fa-share-from-square"></i></span>
                <span class="menu-text">Outsourcing Requests</span>
            </a>
        </li>

        <li class="sidebar-item <?php echo isActive($page, 'outsourced-jobs'); ?>">
            <a href="admin.php?page=outsourced-jobs">
                <span class="icon"><i class="fa-solid fa-box"></i></span>
                <span class="menu-text">Outsourced Jobs</span>
            </a>
        </li>

        <li class="sidebar-item <?php echo isActive($page, 'job-tracking'); ?>">
    <a href="admin.php?page=job-tracking">
        <span class="icon"><i class="fa-solid fa-timeline"></i></span>
        <span class="menu-text">Job Tracking</span>
    </a>
</li>

       <li class="sidebar-item">
    <a href="admin.php?page=commission" class="<?php echo isActive($page, 'commission'); ?>">
        <span class="icon"><i class="fa-solid fa-coins"></i></span>
        <span class="menu-text">Commission</span>
    </a>
</li>
       <li class="sidebar-item <?php echo isActive($page, 'payment'); ?>">
    <a href="admin.php?page=payment">
        <span class="icon"><i class="fa-solid fa-peso-sign"></i></span>
        <span class="menu-text">Payment</span>
    </a>
</li>

       <li class="sidebar-item">
    <a href="admin.php?page=feedback-monitoring" class="<?php echo isActive($page, 'feedback-monitoring'); ?>">
        <span class="icon"><i class="fa-solid fa-star"></i></span>
        <span class="menu-text">Feedback Monitoring</span>
    </a>
</li>

       <li class="sidebar-item <?php echo isActive($page, 'reports'); ?>">
    <a href="admin.php?page=reports">
        <span class="icon"><i class="fa-solid fa-chart-column"></i></span>
        <span class="menu-text">Reports</span>
    </a>
</li>

    </ul>
<?php
}

function includePage($page) {
    global $conn;
    if ($page === 'users') {
        include 'user-management.php';
    } elseif ($page === 'services') {
        include 'service-management.php';
        } elseif ($page === 'archived-services') {
    include 'archived-services.php';
    } elseif ($page === 'add-service') {
        include 'add-service.php';
    } elseif ($page === 'edit-service') {
        include 'edit-services.php';
    } elseif ($page === 'sub-types') {
        include 'get-subtypes.php';
    } elseif ($page === 'service-types') {
        include 'service-types.php';
    } elseif ($page === 'orders') {
        include 'order-management.php';
    } elseif ($page === 'order-details') {
        include __DIR__ . '/order-details.php';
    } elseif ($page === 'outsourcing-requests') {
        include __DIR__ . '/outsourcing_requests.php';
    } elseif ($page === 'outsourcing-hub') {
        include __DIR__ . '/outsourcing_hub.php';
    } elseif ($page === 'submit-outsourcing-request') {
        include __DIR__ . '/submit_outsourcing_request.php';
    } elseif ($page === 'save-outsourcing-request') {
        include __DIR__ . '/save_outsourcing_request.php';
    } elseif ($page === 'view-outsourcing-request') {
        include __DIR__ . '/view_outsourcing_request.php';
    } elseif ($page === 'view-incoming-outsourcing-request') {
        include __DIR__ . '/view_incoming_outsourcing_request.php';
    } elseif ($page === 'save-outsourcing-response') {
        include __DIR__ . '/save_outsourcing_response.php';
    } elseif ($page === 'accept-outsourcing-contract') {
        include __DIR__ . '/accept_outsourcing_contract.php';
    } elseif ($page === 'save-outsourcing-decision') {
        include __DIR__ . '/save_outsourcing_decision.php';
    } elseif ($page === 'outsourced-jobs') {
        include __DIR__ . '/outsourced_jobs.php';
    } elseif ($page === 'profile') {
        include 'profile.php';
        } elseif ($page === 'job-tracking') {
    include 'job_tracking.php';
    } elseif ($page === "reports") {
    include "reports.php";
    } elseif ($page === 'messages') {
    include 'messages.php';
   } elseif ($page === "commission") {
    include __DIR__ . "/commission.php";
} elseif ($page === "payment") {
    include __DIR__ . "/admin-payments.php";
} elseif ($page === "feedback-monitoring") {
    include __DIR__ . "/feedback-monitoring.php";

    
    
    } else {
        include 'dashboard.php';
    }
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars(pageTitle($page)); ?></title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <link rel="stylesheet" href="../css/user-management.css?v=1">
    <link rel="stylesheet" href="../css/order-management.css?v=2">
    <link rel="stylesheet" href="../css/outsourcing-request.css?v=1">
    <link rel="stylesheet" href="../css/service-management.css?v=1">
    <link rel="stylesheet" href="../css/add-service.css?v=1">
    <link rel="stylesheet" href="../css/edit-services.css?v=2">

    <script src="../javascript/admin.js" defer></script>
</head>

<body class="<?php echo $page === 'dashboard' ? 'dashboard-page' : 'inner-page'; ?>">

<!-- MOBILE TOP BAR -->
<!-- MOBILE TOP BAR -->
<nav class="mobile-topbar d-xl-none">
    <button 
        class="mobile-menu-btn" 
        type="button" 
        data-bs-toggle="offcanvas" 
        data-bs-target="#mobileSidebar"
    >
        <i class="fa-solid fa-bars"></i>
    </button>

    <a href="admin.php?page=profile" class="mobile-brand mobile-brand-link">
        <span><?php echo htmlspecialchars($shopName); ?></span>
    </a>

    <div class="mobile-top-actions">
        <a href="admin.php?page=messages" class="mobile-top-icon" title="Messages">
            <i class="fa-regular fa-envelope"></i>

            <?php if ($unreadMessages > 0): ?>
                <span class="mobile-icon-badge">
                    <?php echo $unreadMessages; ?>
                </span>
            <?php endif; ?>
        </a>

        <a href="#" class="mobile-top-icon" title="Notifications">
            <i class="fa-regular fa-bell"></i>
            <span class="mobile-icon-badge">25</span>
        </a>
    </div>
</nav>

<!-- MOBILE OFFCANVAS SIDEBAR -->
<div class="offcanvas offcanvas-start mobile-sidebar" tabindex="-1" id="mobileSidebar">
    <div class="offcanvas-header">
        <div class="mobile-sidebar-logo">
            <img src="images/logo1.png" alt="Logo">
        </div>

        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body d-flex flex-column justify-content-between">
        <div>
            <?php renderMenu($page); ?>
        </div>

        <a href="logout.php" class="logout-btn" onclick="return confirm('Are you sure you want to logout?')">
            <span class="icon"><i class="fa-solid fa-right-from-bracket"></i></span>
            <span>Logout</span>
        </a>
    </div>
</div>

<div class="admin-shell">

    <!-- DESKTOP SIDEBAR -->
    <aside class="desktop-sidebar d-none d-xl-flex">
        <div class="sidebar-top">
            <div class="sidebar-logo">
                <img src="images/logo1.png" alt="Logo">
            </div>

            <?php renderMenu($page); ?>
        </div>

        <div class="sidebar-bottom">
            <a href="logout.php" class="logout-btn" onclick="return confirm('Are you sure you want to logout?')">
                <span class="icon"><i class="fa-solid fa-right-from-bracket"></i></span>
                <span>Logout</span>
            </a>
        </div>
    </aside>

    <!-- MAIN AREA -->
    <section class="admin-main">

        <!-- DESKTOP TOP BAR -->
   

        <div class="admin-content-wrap">

            <main class="admin-content <?php echo $page === 'dashboard' ? 'with-right-panel' : ''; ?>">
                <?php includePage($page); ?>
            </main>

            <?php if ($page === 'dashboard'): ?>
                <aside class="dashboard-right-panel">
                    <div class="profile-card-mini dashboard-actions-card">

    <div class="dashboard-action-icons">
        <a href="admin.php?page=messages" class="dashboard-action-icon" title="Messages">
            <i class="fa-brands fa-facebook-messenger"></i>

            <?php if ($unreadMessages > 0): ?>
                <span class="dashboard-icon-badge">
                    <?php echo $unreadMessages; ?>
                </span>
            <?php endif; ?>
        </a>

        <a href="#" class="dashboard-action-icon" title="Notifications">
            <i class="fa-regular fa-bell"></i>
            <span class="dashboard-icon-badge">25</span>
        </a>
    </div>

    <a href="admin.php?page=profile" class="dashboard-profile-link">
        <span class="dashboard-profile-name">
            <?php echo htmlspecialchars($shopName); ?>
        </span>

        <div class="profile-avatar">
            <i class="fa-solid fa-user"></i>
        </div>
    </a>

</div>

                    <div class="calendar-container">
                        <div class="calendar-header">
                            <h5 class="fw-bold mb-0">Calendar</h5>
                            <span class="today-text">Today</span>
                        </div>

                        <div class="calendar-month">
                            <span id="calendarYear"></span>
                            <span id="calendarMonth"></span>
                        </div>

                        <div class="calendar-weekdays">
                            <span>SUN</span>
                            <span>MON</span>
                            <span>TUE</span>
                            <span>WED</span>
                            <span>THU</span>
                            <span>FRI</span>
                            <span>SAT</span>
                        </div>

                        <div class="calendar-days" id="calendarDays"></div>
                        

                    </div>

     
                    <?php
$deadlineStmt = $conn->prepare("
    SELECT 
        order_code,
        customer_name,
        item_name,
        quantity,
        due_date
    FROM orders
    WHERE due_date IS NOT NULL
      AND due_date != '0000-00-00'
      AND due_date >= CURDATE()
    ORDER BY due_date ASC
    LIMIT 3
");

$deadlineStmt->execute();
$deadlines = $deadlineStmt->get_result();
?>
<div class="deadline-container">
    <h5 class="deadline-title">
        <i class="fa-solid fa-calendar-check me-2 text-primary"></i>
        Deadlines
    </h5>

    <?php if ($deadlines && $deadlines->num_rows > 0): ?>
        <?php while ($deadline = $deadlines->fetch_assoc()): ?>
            <div class="deadline-card">
                <div class="d-flex justify-content-between align-items-start gap-2">
                    <div class="customer-name">
                        <?php echo htmlspecialchars($deadline["customer_name"] ?? "Customer"); ?>
                    </div>

                    <div class="deadline-time">
                        <?php echo date("h:i A", strtotime($deadline["due_date"])); ?>
                    </div>
                </div>

                <div class="deadline-details">
                    <?php echo htmlspecialchars($deadline["quantity"] ?? 0); ?> pcs,
                    <?php echo htmlspecialchars($deadline["item_name"] ?? "Item"); ?>
                </div>

                <div class="deadline-date">
                    <?php echo date("m/d/Y", strtotime($deadline["due_date"])); ?>
                </div>
            </div>
        <?php endwhile; ?>
    <?php else: ?>
        <div class="no-deadline">
            <i class="fa-regular fa-calendar-xmark d-block mb-2"></i>
            No upcoming deadlines.
        </div>
    <?php endif; ?>
</div>


                </aside>
            <?php endif; ?>

        </div>

    </section>

</div>

<style>
* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background: #f4f6f9;
    color: #111827;
    overflow: hidden;
}

/* =========================
   MOBILE TOPBAR
========================= */
.mobile-topbar {
    height: 66px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.mobile-menu-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: #111827;
    font-size: 22px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.mobile-brand {
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #111827;
}

.mobile-brand-link {
    text-decoration: none;
}

.mobile-brand span {
    max-width: 210px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.mobile-top-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #111827;
    text-decoration: none;
    display: grid;
    place-items: center;
    position: relative;
    font-size: 18px;
}

.mobile-top-icon:hover {
    background: #eef2f7;
    color: #111827;
}

.mobile-icon-badge {
    position: absolute;
    top: -4px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    background: #0ea5e9;
    color: #ffffff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* =========================
   MAIN SHELL
========================= */
.admin-shell {
    display: flex;
    width: 100%;
    height: 100vh;
    padding: 14px;
    gap: 18px;
    overflow: hidden;
}

/* =========================
   SIDEBAR
========================= */
.desktop-sidebar,
.mobile-sidebar {
    background: #384054;
    color: #fff;
}

.desktop-sidebar {
    width: 300px;
    min-width: 300px;
    height: calc(100vh - 28px);
    border-radius: 18px;
    padding: 16px 0;
    position: sticky;
    top: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overflow-x: hidden;
}

.mobile-sidebar {
    width: 300px !important;
}

.mobile-sidebar .offcanvas-header {
    background: #384054;
}

.mobile-sidebar-logo img,
.sidebar-logo img {
    width: 150px;
    height: auto;
}

.sidebar-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0 24px;
}

.sidebar-menu {
    list-style: none;
    padding: 0 12px;
    margin: 0;
}

.sidebar-item {
    margin-bottom: 6px;
}

.sidebar-item a,
.logout-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    padding: 11px 14px;
    border-radius: 28px;
    font-size: 15px;
    transition: 0.2s ease;
}

.sidebar-item a:hover,
.logout-btn:hover {
    background: rgba(255,255,255,0.10);
    color: #fff;
}

.sidebar-item.active a {
    background: #fff;
    color: #111827;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.sidebar-item.active .icon {
    color: #111827;
}

.icon {
    width: 22px;
    min-width: 22px;
    text-align: center;
    color: inherit;
}

.sidebar-bottom {
    padding: 0 14px;
}

/* =========================
   MAIN CONTENT AREA
========================= */
.admin-main {
    flex: 1;
    min-width: 0;
    height: calc(100vh - 28px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-content-wrap {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    overflow: hidden;
    align-items: stretch;
}

.dashboard-page .admin-content-wrap {
    grid-template-columns: minmax(0, 1fr) 330px;
}

.admin-content {
    min-width: 0;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.admin-content > .container,
.admin-content > .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
}

/* =========================
   SCROLLBARS
========================= */
.admin-content::-webkit-scrollbar,
.desktop-sidebar::-webkit-scrollbar,
.deadline-container::-webkit-scrollbar {
    width: 8px;
}

.admin-content::-webkit-scrollbar-thumb,
.desktop-sidebar::-webkit-scrollbar-thumb,
.deadline-container::-webkit-scrollbar-thumb {
    background: #c7cbd1;
    border-radius: 20px;
}

.admin-content::-webkit-scrollbar-track,
.desktop-sidebar::-webkit-scrollbar-track,
.deadline-container::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================
   DASHBOARD RIGHT PANEL
========================= */
.dashboard-right-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 0;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    padding-bottom: 0;
}

.profile-card-mini,
.calendar-container,
.deadline-container {
    background: #fff;
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}

.profile-card-mini,
.calendar-container {
    flex-shrink: 0;
}

.deadline-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* =========================
   DASHBOARD ACTION CARD
========================= */
.dashboard-actions-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
}

.dashboard-action-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dashboard-action-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f8fafc;
    color: #111827;
    display: grid;
    place-items: center;
    position: relative;
    text-decoration: none;
    font-size: 18px;
}

.dashboard-action-icon:hover {
    background: #eef2ff;
    color: #0ea5e9;
}

.dashboard-action-icon .fa-facebook-messenger {
    color: #0084ff;
}

.dashboard-icon-badge {
    position: absolute;
    top: -5px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #0ea5e9;
    color: #ffffff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid #ffffff;
}

.dashboard-profile-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    color: #111827;
    text-decoration: none;
    font-weight: 700;
}

.dashboard-profile-link:hover {
    color: #111827;
}

.dashboard-profile-name {
    max-width: 145px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-avatar {
    width: 48px;
    height: 48px;
    background: #11a6b5;
    color: #fff;
    display: grid;
    place-items: center;
    border-radius: 50%;
    flex-shrink: 0;
}

/* =========================
   CALENDAR
========================= */
.calendar-header,
.calendar-month {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-month {
    margin: 14px 0 10px;
    font-weight: 700;
}

.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

.calendar-weekdays {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.calendar-days {
    font-size: 14px;
}

.today {
    background: #0ea5e9;
    color: #fff;
    border-radius: 50%;
    padding: 5px;
}

/* =========================
   DEADLINES
========================= */
.deadline-title {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 16px;
}

.deadline-card {
    background: linear-gradient(135deg, #12b7e8, #0ea5e9);
    border: 0;
    border-radius: 16px;
    padding: 14px;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(14,165,233,0.25);
    margin-bottom: 12px;
}

.deadline-card .customer-name {
    font-size: 15px;
    font-weight: 800;
}

.deadline-card .deadline-time {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.22);
    padding: 4px 8px;
    border-radius: 999px;
}

.deadline-card .deadline-details {
    font-size: 12px;
    opacity: 0.95;
    margin-top: 6px;
}

.deadline-card .deadline-date {
    font-size: 12px;
    font-weight: 700;
    margin-top: 4px;
}

.no-deadline {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
    font-size: 13px;
}

/* =========================
   GLOBAL RESPONSIVE HELPERS
========================= */
input,
select,
textarea {
    max-width: 100%;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
}

table {
    width: 100%;
}

.card {
    max-width: 100%;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1399px) {
    .desktop-sidebar {
        width: 270px;
        min-width: 270px;
    }

    .dashboard-page .admin-content-wrap {
        grid-template-columns: minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1199px) {
    html,
    body {
        height: auto;
        overflow-y: auto;
    }

    body {
        overflow: auto;
    }

    .admin-shell {
        height: auto;
        min-height: 100vh;
        padding: 0;
        display: block;
        overflow: visible;
    }

    .admin-main {
        width: 100%;
        height: auto;
        overflow: visible;
        display: block;
    }

    .admin-content-wrap,
    .dashboard-page .admin-content-wrap {
        display: block;
        overflow: visible;
    }

    .admin-content {
        padding: 18px;
        overflow: visible;
        height: auto;
    }

    .dashboard-right-panel {
        position: static;
        height: auto;
        min-height: 0;
        padding: 0 18px 18px;
        max-height: none;
        overflow: visible;
    }

    .dashboard-right-panel > .profile-card-mini:first-child {
        display: none !important;
    }

    .deadline-container {
        flex: unset;
        overflow: visible;
    }
}

@media (max-width: 768px) {
    .admin-content {
        padding: 14px;
    }

    .mobile-brand span {
        max-width: 170px;
    }

    .mobile-sidebar {
        width: 285px !important;
    }

    .sidebar-item a,
    .logout-btn {
        font-size: 14px;
        padding: 10px 12px;
    }
}
</style>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>