/*
        * CSS to create a sticky footer. The body is a flex container
        * with a minimum height of 100% of the viewport. The main content
        * area is set to grow and take up all available space, pushing the
        * footer to the bottom.
        */
        body {
            background-color: #f5f5f5; /* Light grey background for a clean look */
            font-family: 'Inter', sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Make body at least as tall as the viewport */
        }

        /* Custom styles for Material Design feel */
        .card {
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .navbar {
            background-color: #ffffff; /* White navbar background */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .sidebar {
            background-color: #212529; /* Dark background for sidebar */
            color: #ffffff;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            padding-top: 56px; /* Offset for the fixed top navbar */
        }

        .sidebar .nav-link {
            color: #ccc;
            padding: 1rem;
            border-left: 4px solid transparent;
            transition: background-color 0.3s, border-left-color 0.3s;
        }

        .sidebar .nav-link.active {
            color: #ffffff;
            background-color: #343a40;
            border-left-color: #0d6efd; /* Accent color for active link */
        }
        .sidebar .nav-link:hover {
            color: #ffffff;
            background-color: #495057;
        }

        .main-content {
            padding-top: 70px; /* Offset for the fixed top navbar */
            margin-left: 250px; /* Offset for the fixed sidebar */
        }

        /* Small screen adjustments */
        @media (max-width: 768px) {
            .sidebar {
                position: relative;
                height: auto;
                padding-top: 0;
                width: 100%;
            }
            .main-content {
                margin-left: 0;
            }
        }