:root {
        --header-height: 60px;
        --sidebar-width: 220px;
        --sidebar-bg: #2c3e50;
        --main-bg: #f4f7f9;
        --accent: #1abc9c;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Segoe UI', sans-serif;
        background-color: var(--main-bg);
        height: 100vh;
        overflow: hidden;
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--header-height);
        background-color: var(--sidebar-bg);
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        z-index: 1000;
    }

    header h1 {
        font-size: 20px;
    }

    #menuToggle {
        display: inline-block;
        font-size: 24px;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
    }

    .container {
        display: flex;
        height: 100vh;
        padding-top: var(--header-height);
        transition: margin-left 0.3s ease;
    }

    .sidebar {
        width: var(--sidebar-width);
        background-color: var(--sidebar-bg);
        color: white;
        position: fixed;
        top: var(--header-height);
        bottom: 0;
        left: 0;
        padding-top: 20px;
        transform: translateX(0);
        transition: transform 0.3s ease;
        z-index: 999;

        overflow-y: auto;
        /* Enables vertical scrolling */
    }

    .sidebar::-webkit-scrollbar {
        display: none;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
    }


    .sidebar.hide {
        transform: translateX(-100%);
    }

    .sidebar ul {
        list-style: none;
        padding: 0;
    }

    .sidebar ul li {
        padding: 15px 20px;
        border-bottom: 1px solid #34495e;
    }

    .sidebar ul li a {
        color: white;
        text-decoration: none;
        display: block;
        transition: transform 0.2s, color 0.2s;
    }

    .sidebar ul li a:hover {
        color: var(--accent);
        transform: translateX(5px);
    }

    .main-content {
        flex: 1;
        margin-left: var(--sidebar-width);
        transition: margin-left 0.3s ease;
    }

    .container.open .main-content {
        margin-left: 0;
    }

    .sidebar.show {
        transform: translateX(-100%);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        #menuToggle {
            display: inline-block;
            font-size: 24px;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
        }

        .sidebar {
            position: fixed;
            width: 200px;
            transform: translateX(-100%);

        }

        .main-content {
            margin-left: 0;
        }

        .container.open .main-content {
            filter: blur(2px);
            pointer-events: none;
        }

        .sidebar.show {
            transform: translateX(0);
        }
    }