<?php
session_start();

if (!isset($_SESSION['student_id'])) {
    header("Location: login.php");
    exit();
}
$eid = (int) $_SESSION['student_id'];

require 'vendor/autoload.php';
use Dotenv\Dotenv;
$dotenv = Dotenv::createImmutable(__DIR__);
$dotenv->load();

$school_name = $_ENV['SCHOOL_NAME'] ?? 'School Portal';
$logo = $_ENV['WEBSITE_LOGO'] ?? 'assets/logo.png';

$sql = "SELECT studentName, studentno, studentImage FROM students WHERE id = :id LIMIT 1";
$stmt = $dbh->prepare($sql);
$stmt->bindParam(':id', $eid, PDO::PARAM_INT);
$stmt->execute();
$student = $stmt->fetch(PDO::FETCH_OBJ);

if (!$student) {
    session_destroy();
    header("Location: login.php");
    exit();
}

$currentPage = basename($_SERVER['PHP_SELF']);
$profileImg = !empty($student->studentImage)
    ? "studentimages/" . htmlspecialchars($student->studentImage)
    : "assets/default-avatar.png";
$searchRole = 'newstdboard';
?>

<aside class="main-sidebar" id="kiroSidebar">

    <div class="ks-brand">
        <a href="newstdboard.php" class="ks-brand-link">
            <div class="ks-logo-ring">
                <img src="<?= htmlspecialchars($logo) ?>" alt="Logo" class="ks-logo">
            </div>
            <span class="ks-school-name"><?= htmlspecialchars($school_name) ?></span>
            <span class="ks-portal-label">Student Portal</span>
        </a>
    </div>

    <div class="ks-user-panel">
        <a href="stdprofilenewboard.php" class="ks-user-link">
            <div class="ks-avatar-wrap">
                <img src="<?= $profileImg ?>" class="ks-avatar" alt="Student">
                <span class="ks-online-dot"></span>
            </div>
            <div class="ks-user-info">
                <span class="ks-user-name"><?= htmlspecialchars($student->studentName) ?></span>
                <span class="ks-user-role">Student &bull; <?= htmlspecialchars($student->studentno) ?></span>
            </div>
            <i class="fas fa-chevron-right ks-user-arrow"></i>
        </a>
    </div>

    <div class="ks-search-wrap">
        <i class="fas fa-search ks-search-icon"></i>
        <input type="search" id="sidebarSearch" class="ks-search-input" placeholder="Search modules...">
        <kbd class="ks-search-kbd">⌘K</kbd>
    </div>

    <nav class="ks-nav" id="ksNav">

        <a href="newstdboard.php" class="ks-nav-item <?= $currentPage === 'newstdboard.php' ? 'active' : '' ?>">
            <span class="ks-nav-icon"><i class="fas fa-tachometer-alt"></i></span>
            <span class="ks-nav-label">Dashboard</span>
            <?php if ($currentPage === 'newstdboard.php'): ?><span class="ks-active-bar"></span><?php endif; ?>
        </a>

        <?php
        $groups = [
            [
                'label' => 'Payment Management',
                'icon' => 'fas fa-credit-card',
                'items' => [
                    ['href' => 'payschoolfeesnewb.php', 'icon' => 'fas fa-money-check', 'label' => 'Pay School Fees'],
                    ['href' => 'recentnewboard2.php', 'icon' => 'fas fa-list', 'label' => 'Payment Log'],
                    ['href' => 'recentnewboard.php', 'icon' => 'fas fa-receipt', 'label' => 'Payment Receipt'],
                ],
            ],
            [
                'label' => 'Documents',
                'icon' => 'fas fa-folder-open',
                'items' => [
                    ['href' => 'downloaddocumentnewboard.php', 'icon' => 'fas fa-download', 'label' => 'Download Document'],
                ],
            ],
        ];
        foreach ($groups as $group):
            $groupPages = array_column($group['items'], 'href');
            $isOpen = in_array($currentPage, $groupPages);
            $groupId = 'ksGroup_' . preg_replace('/\W+/', '', $group['label']);
            ?>
            <div class="ks-group <?= $isOpen ? 'open' : '' ?>" id="<?= $groupId ?>">
                <button class="ks-group-toggle accNum" onclick="ksToggleGroup('<?= $groupId ?>')">
                    <span class="ks-nav-icon"><i class="<?= $group['icon'] ?>"></i></span>
                    <span class="ks-nav-label"><?= htmlspecialchars($group['label']) ?></span>
                    <i class="fas fa-chevron-down ks-chevron"></i>
                </button>
                <div class="ks-group-body">
                    <?php foreach ($group['items'] as $item): ?>
                        <a href="<?= $item['href'] ?>"
                            class="ks-sub-item <?= $currentPage === $item['href'] ? 'active' : '' ?>">
                            <span class="ks-sub-icon"><i class="<?= $item['icon'] ?>"></i></span>
                            <span><?= htmlspecialchars($item['label']) ?></span>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endforeach; ?>

        <div class="ks-divider"><span>Security &amp; Settings</span></div>
        <a href="stdprofilenewboard.php"
            class="ks-nav-item <?= $currentPage === 'stdprofilenewboard.php' ? 'active' : '' ?>">
            <span class="ks-nav-icon"><i class="fas fa-user"></i></span>
            <span class="ks-nav-label">Profile</span>
        </a>
        <div class="ks-logout-wrap">
            <a href="logoutstd.php" class="ks-logout-btn">
                <i class="fas fa-sign-out-alt"></i>
                <span>Log Out</span>
            </a>
        </div>
    </nav>
</aside>
<style>
    :root {
        --ks-bg: #0d1117;
        --ks-surface: rgba(255, 255, 255, 0.06);
        --ks-border: rgba(255, 255, 255, 0.12);
        --ks-accent: #93c5fd;
        --ks-text: #f0f6ff;
        --ks-muted: rgba(255, 255, 255, 0.45);
        --ks-hover: rgba(255, 255, 255, 0.08);
        --ks-active-bg: rgba(255, 255, 255, 0.14);
        --ks-width: 260px;
        --ks-radius: 10px;
        --ks-transition: 0.22s cubic-bezier(.4, 0, .2, 1);
    }

    .main-sidebar {
        width: var(--ks-width);
        height: 100vh;
        background: linear-gradient(180deg, var(--dark), var(--primary)) !important;
        border-right: 1px solid var(--ks-border);
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        overflow: hidden;
        transition: margin-left var(--ks-transition);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }

    .sidebar-collapse .main-sidebar {
        margin-left: calc(-1 * var(--ks-width));
    }

    .ks-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 16px 18px;
        border-bottom: 1px solid var(--ks-border);
        flex-shrink: 0;
    }

    .ks-brand-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-decoration: none !important;
        width: 100%;
    }

    .ks-logo-ring {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.12);
        border: 2px solid rgba(255, 255, 255, 0.2);
        padding: 3px;
        flex-shrink: 0;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    }

    .ks-logo {
        width: 100%;
        height: 100%;
        border-radius: 14px;
        object-fit: cover;
        display: block;
    }

    .ks-school-name {
        color: #fff;
        font-weight: 700;
        font-size: 0.88rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .ks-portal-label {
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.62rem;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        margin-top: -6px;
    }

    .ks-user-panel {
        padding: 12px 14px;
        border-bottom: 1px solid var(--ks-border);
        flex-shrink: 0;
    }

    .ks-user-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: var(--ks-radius);
        text-decoration: none !important;
        transition: background var(--ks-transition);
        overflow: hidden;
    }

    .ks-user-link:hover {
        background: var(--ks-hover);
    }

    .ks-avatar-wrap {
        position: relative;
        flex-shrink: 0;
    }

    .ks-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--ks-accent);
    }

    .ks-online-dot {
        position: absolute;
        bottom: 1px;
        right: 1px;
        width: 9px;
        height: 9px;
        background: #22c55e;
        border-radius: 50%;
        border: 2px solid transparent;
    }

    .ks-user-info {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 1;
    }

    .ks-user-name {
        color: var(--ks-text);
        font-size: 0.82rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ks-user-role {
        color: var(--ks-accent);
        font-size: 0.68rem;
        font-weight: 500;
    }

    .ks-user-arrow {
        color: var(--ks-muted);
        font-size: 0.65rem;
        flex-shrink: 0;
    }

    .ks-search-wrap {
        position: relative;
        padding: 12px 14px;
        border-bottom: 1px solid var(--ks-border);
        flex-shrink: 0;
    }

    .ks-search-icon {
        position: absolute;
        left: 26px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ks-muted);
        font-size: 0.75rem;
        pointer-events: none;
    }

    .ks-search-input {
        width: 100%;
        background: var(--ks-surface);
        border: 1px solid var(--ks-border);
        border-radius: 8px;
        color: var(--ks-text);
        font-size: 0.82rem;
        padding: 7px 36px 7px 32px;
        outline: none;
        transition: border-color var(--ks-transition);
    }

    .ks-search-input::placeholder {
        color: var(--ks-muted);
    }

    .ks-search-input:focus {
        border-color: var(--ks-accent);
    }

    .ks-search-kbd {
        position: absolute;
        right: 22px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--ks-border);
        border-radius: 5px;
        color: var(--ks-muted);
        font-size: 0.62rem;
        padding: 1px 5px;
        font-family: monospace;
    }

    .ks-nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px 10px 20px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    }

    .ks-nav::-webkit-scrollbar {
        width: 4px;
    }

    .ks-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }

    .ks-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: var(--ks-radius);
        color: var(--ks-text);
        text-decoration: none !important;
        font-size: 0.84rem;
        font-weight: 500;
        position: relative;
        transition: background var(--ks-transition), color var(--ks-transition);
        margin-bottom: 2px;
        overflow: hidden;
    }

    .ks-nav-item:hover {
        background: var(--ks-hover);
        color: #fff;
    }

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

    .ks-active-bar {
        position: absolute;
        right: 0;
        top: 20%;
        bottom: 20%;
        width: 3px;
        background: var(--ks-accent);
        border-radius: 3px 0 0 3px;
    }

    .ks-nav-icon {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.05);
        font-size: 0.78rem;
        flex-shrink: 0;
        transition: background var(--ks-transition);
    }

    .ks-nav-item.active .ks-nav-icon,
    .ks-group-toggle:hover .ks-nav-icon {
        background: rgba(59, 130, 246, 0.2);
        color: var(--ks-accent);
    }

    .ks-group {
        margin-bottom: 2px;
    }

    .ks-group-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: var(--ks-radius);
        background: transparent;
        border: none;
        color: var(--ks-text);
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        text-align: left;
        transition: background var(--ks-transition);
    }

    .ks-group-toggle:hover {
        background: var(--ks-hover);
    }

    .ks-group.open .ks-group-toggle {
        color: #fff;
    }

    .ks-chevron {
        margin-left: auto;
        font-size: 0.65rem;
        color: var(--ks-muted);
        transition: transform var(--ks-transition);
    }

    .ks-group.open .ks-chevron {
        transform: rotate(180deg);
    }

    .ks-group-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(.4, 0, .2, 1);
        padding-left: 14px;
    }

    .ks-group.open .ks-group-body {
        max-height: 600px;
    }

    .ks-sub-item {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 7px 10px;
        border-radius: 8px;
        color: #ffffff;
        text-decoration: none !important;
        font-size: 0.81rem;
        font-weight: 400;
        transition: background var(--ks-transition), color var(--ks-transition);
        margin-bottom: 1px;
        border-left: 2px solid transparent;
    }

    .ks-sub-item:hover {
        background: var(--ks-hover);
        color: #fff;
    }

    .ks-sub-item.active {
        color: var(--ks-accent);
        background: var(--ks-active-bg);
        border-left-color: var(--ks-accent);
    }

    .ks-sub-icon {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        flex-shrink: 0;
        opacity: 0.7;
    }

    .ks-sub-item.active .ks-sub-icon {
        opacity: 1;
    }

    .ks-divider {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 12px 6px;
        color: var(--ks-muted);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

    .ks-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--ks-border);
    }

    .ks-logout-wrap {
        padding: 10px 0 4px;
    }

    .ks-logout-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: var(--ks-radius);
        color: #f87171;
        text-decoration: none !important;
        font-size: 0.84rem;
        font-weight: 500;
        transition: background var(--ks-transition);
    }

    .ks-logout-btn:hover {
        background: rgba(248, 113, 113, 0.1);
        color: #fca5a5;
    }

    .ks-search-hidden {
        display: none !important;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-header {
        margin-left: var(--ks-width) !important;
    }

    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .main-header {
        margin-left: 0 !important;
    }
</style>

<script>
    (function () {
        window.ksToggleGroup = function (id) { const el = document.getElementById(id); if (el) el.classList.toggle('open'); };
        const searchInput = document.getElementById('sidebarSearch');
        if (searchInput) {
            searchInput.addEventListener('input', function () {
                const q = this.value.trim().toLowerCase();
                const groups = document.querySelectorAll('.ks-group');
                const standalones = document.querySelectorAll('.ks-nav-item');
                if (!q) { groups.forEach(g => g.classList.remove('ks-search-hidden')); standalones.forEach(i => i.classList.remove('ks-search-hidden')); return; }
                groups.forEach(function (group) {
                    const items = group.querySelectorAll('.ks-sub-item');
                    let anyMatch = false;
                    items.forEach(function (item) { const match = item.textContent.toLowerCase().includes(q); item.classList.toggle('ks-search-hidden', !match); if (match) anyMatch = true; });
                    const groupLabel = group.querySelector('.ks-nav-label');
                    if (groupLabel && groupLabel.textContent.toLowerCase().includes(q)) { items.forEach(i => i.classList.remove('ks-search-hidden')); anyMatch = true; }
                    group.classList.toggle('ks-search-hidden', !anyMatch);
                    if (anyMatch) group.classList.add('open');
                });
                standalones.forEach(function (item) { item.classList.toggle('ks-search-hidden', !item.textContent.toLowerCase().includes(q)); });
            });
            document.addEventListener('keydown', function (e) { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); searchInput.focus(); } });
        }
    })();
</script>
<style>
    :root {
        --ks-bg: #0d1117;
        --ks-surface: rgba(255, 255, 255, 0.06);
        --ks-border: rgba(255, 255, 255, 0.12);
        --ks-accent: #93c5fd;
        --ks-text: #f0f6ff;
        --ks-muted: rgba(255, 255, 255, 0.45);
        --ks-hover: rgba(255, 255, 255, 0.08);
        --ks-active-bg: rgba(255, 255, 255, 0.14);
        --ks-width: 260px;
        --ks-radius: 10px;
        --ks-transition: 0.22s cubic-bezier(.4, 0, .2, 1);
    }

    .main-sidebar {
        width: var(--ks-width);
        height: 100vh;
        background: linear-gradient(180deg, var(--dark), var(--primary)) !important;
        border-right: 1px solid var(--ks-border);
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        overflow: hidden;
        transition: margin-left var(--ks-transition);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }

    .sidebar-collapse .main-sidebar {
        margin-left: calc(-1 * var(--ks-width));
    }

    .ks-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 16px 18px;
        border-bottom: 1px solid var(--ks-border);
        flex-shrink: 0;
    }

    .ks-brand-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-decoration: none !important;
        width: 100%;
    }

    .ks-logo-ring {
        width: 62px;
        height: 62px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.12);
        border: 2px solid rgba(255, 255, 255, 0.2);
        padding: 3px;
        flex-shrink: 0;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    }

    .ks-logo {
        width: 100%;
        height: 100%;
        border-radius: 14px;
        object-fit: cover;
        display: block;
    }

    .ks-school-name {
        color: #fff;
        font-weight: 700;
        font-size: 0.88rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .ks-portal-label {
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.62rem;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        margin-top: -6px;
    }

    .ks-user-panel {
        padding: 12px 14px;
        border-bottom: 1px solid var(--ks-border);
        flex-shrink: 0;
    }

    .ks-user-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: var(--ks-radius);
        text-decoration: none !important;
        transition: background var(--ks-transition);
        overflow: hidden;
    }

    .ks-user-link:hover {
        background: var(--ks-hover);
    }

    .ks-avatar-wrap {
        position: relative;
        flex-shrink: 0;
    }

    .ks-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--ks-accent);
    }

    .ks-online-dot {
        position: absolute;
        bottom: 1px;
        right: 1px;
        width: 9px;
        height: 9px;
        background: #22c55e;
        border-radius: 50%;
        border: 2px solid transparent;
    }

    .ks-user-info {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 1;
    }

    .ks-user-name {
        color: var(--ks-text);
        font-size: 0.82rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ks-user-role {
        color: var(--ks-accent);
        font-size: 0.68rem;
        font-weight: 500;
    }

    .ks-user-arrow {
        color: var(--ks-muted);
        font-size: 0.65rem;
        flex-shrink: 0;
    }

    .ks-search-wrap {
        position: relative;
        padding: 12px 14px;
        border-bottom: 1px solid var(--ks-border);
        flex-shrink: 0;
    }

    .ks-search-icon {
        position: absolute;
        left: 26px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ks-muted);
        font-size: 0.75rem;
        pointer-events: none;
    }

    .ks-search-input {
        width: 100%;
        background: var(--ks-surface);
        border: 1px solid var(--ks-border);
        border-radius: 8px;
        color: var(--ks-text);
        font-size: 0.82rem;
        padding: 7px 36px 7px 32px;
        outline: none;
        transition: border-color var(--ks-transition);
    }

    .ks-search-input::placeholder {
        color: var(--ks-muted);
    }

    .ks-search-input:focus {
        border-color: var(--ks-accent);
    }

    .ks-search-kbd {
        position: absolute;
        right: 22px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--ks-border);
        border-radius: 5px;
        color: var(--ks-muted);
        font-size: 0.62rem;
        padding: 1px 5px;
        font-family: monospace;
    }

    .ks-nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px 10px 20px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    }

    .ks-nav::-webkit-scrollbar {
        width: 4px;
    }

    .ks-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }

    .ks-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: var(--ks-radius);
        color: var(--ks-text);
        text-decoration: none !important;
        font-size: 0.84rem;
        font-weight: 500;
        position: relative;
        transition: background var(--ks-transition), color var(--ks-transition);
        margin-bottom: 2px;
        overflow: hidden;
    }

    .ks-nav-item:hover {
        background: var(--ks-hover);
        color: #fff;
    }

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

    .ks-active-bar {
        position: absolute;
        right: 0;
        top: 20%;
        bottom: 20%;
        width: 3px;
        background: var(--ks-accent);
        border-radius: 3px 0 0 3px;
    }

    .ks-nav-icon {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.05);
        font-size: 0.78rem;
        flex-shrink: 0;
        transition: background var(--ks-transition);
    }

    .ks-nav-item.active .ks-nav-icon,
    .ks-group-toggle:hover .ks-nav-icon {
        background: rgba(59, 130, 246, 0.2);
        color: var(--ks-accent);
    }

    .ks-group {
        margin-bottom: 2px;
    }

    .ks-group-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: var(--ks-radius);
        background: transparent;
        border: none;
        color: var(--ks-text);
        font-size: 0.84rem;
        font-weight: 700;
        cursor: pointer;
        text-align: left;
        transition: background var(--ks-transition);
    }

    .ks-group-toggle:hover {
        background: var(--ks-hover);
    }

    .ks-group.open .ks-group-toggle {
        color: #fff;
    }

    .ks-chevron {
        margin-left: auto;
        font-size: 0.65rem;
        color: var(--ks-muted);
        transition: transform var(--ks-transition);
    }

    .ks-group.open .ks-chevron {
        transform: rotate(180deg);
    }

    .ks-group-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(.4, 0, .2, 1);
        padding-left: 14px;
    }

    .ks-group.open .ks-group-body {
        max-height: 600px;
    }

    .ks-sub-item {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 7px 10px;
        border-radius: 8px;
        color: #ffffff;
        text-decoration: none !important;
        font-size: 0.81rem;
        font-weight: 400;
        transition: background var(--ks-transition), color var(--ks-transition);
        margin-bottom: 1px;
        border-left: 2px solid transparent;
    }

    .ks-sub-item:hover {
        background: var(--ks-hover);
        color: #fff;
    }

    .ks-sub-item.active {
        color: var(--ks-accent);
        background: var(--ks-active-bg);
        border-left-color: var(--ks-accent);
    }

    .ks-sub-icon {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        flex-shrink: 0;
        opacity: 0.7;
    }

    .ks-sub-item.active .ks-sub-icon {
        opacity: 1;
    }

    .ks-divider {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 12px 6px;
        color: var(--ks-muted);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

    .ks-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--ks-border);
    }

    .ks-logout-wrap {
        padding: 10px 0 4px;
    }

    .ks-logout-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: var(--ks-radius);
        color: #f87171;
        text-decoration: none !important;
        font-size: 0.84rem;
        font-weight: 500;
        transition: background var(--ks-transition);
    }

    .ks-logout-btn:hover {
        background: rgba(248, 113, 113, 0.1);
        color: #fca5a5;
    }

    .ks-search-hidden {
        display: none !important;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-header {
        margin-left: var(--ks-width) !important;
    }

    body.sidebar-collapse .content-wrapper,
    body.sidebar-collapse .main-header {
        margin-left: 0 !important;
    }
</style>

<script>
    (function () {
        window.ksToggleGroup = function (id) { const el = document.getElementById(id); if (el) el.classList.toggle('open'); };
        const searchInput = document.getElementById('sidebarSearch');
        if (searchInput) {
            searchInput.addEventListener('input', function () {
                const q = this.value.trim().toLowerCase();
                const groups = document.querySelectorAll('.ks-group');
                const standalones = document.querySelectorAll('.ks-nav-item');
                if (!q) { groups.forEach(g => g.classList.remove('ks-search-hidden')); standalones.forEach(i => i.classList.remove('ks-search-hidden')); return; }
                groups.forEach(function (group) {
                    const items = group.querySelectorAll('.ks-sub-item');
                    let anyMatch = false;
                    items.forEach(function (item) { const match = item.textContent.toLowerCase().includes(q); item.classList.toggle('ks-search-hidden', !match); if (match) anyMatch = true; });
                    const groupLabel = group.querySelector('.ks-nav-label');
                    if (groupLabel && groupLabel.textContent.toLowerCase().includes(q)) { items.forEach(i => i.classList.remove('ks-search-hidden')); anyMatch = true; }
                    group.classList.toggle('ks-search-hidden', !anyMatch);
                    if (anyMatch) group.classList.add('open');
                });
                standalones.forEach(function (item) { item.classList.toggle('ks-search-hidden', !item.textContent.toLowerCase().includes(q)); });
            });
            document.addEventListener('keydown', function (e) { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); searchInput.focus(); } });
        }
    })();
</script>