:root {
            --primary: #0d6efd;
            --secondary: #6c757d;
            --success: #198754;
            --light: #f8f9fa;
            --dark: #212529;
        }

        body {
            background-color: #f5f7fb;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* Allow full-width content on large displays */
        .container, .container-lg, .container-xl, .container-xxl {
            max-width: 100% !important;
        }

        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }

        .sidebar {
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,.1);
            height: calc(100vh - 56px);
            position: sticky;
            top: 56px;
        }

        @media (min-width: 992px) {
            .desktop-sidebar {
                overflow: visible;
                z-index: 20;
            }

            .sidebar-collapse-toggle {
                position: fixed;
                top: 50vh;
                left: 8.33333333%;
                transform: translateY(-50%);
                width: 34px;
                height: 52px;
                padding: 0;
                border: 1px solid #d8dee8;
                border-radius: 0 10px 10px 0;
                background: #fff;
                color: #5c6778;
                box-shadow: 3px 0 8px rgba(30, 42, 60, .12);
                font-size: 1.05rem;
                line-height: 1;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                z-index: 1040;
                transition: color .15s ease, background-color .15s ease, left .2s ease, box-shadow .15s ease;
            }

            .sidebar-collapse-toggle:hover,
            .sidebar-collapse-toggle:focus-visible {
                color: var(--primary);
                background: #f4f7fb;
                outline: none;
                box-shadow: 0 0 0 3px rgba(13, 110, 253, .14), 3px 0 8px rgba(30, 42, 60, .12);
            }

            body.sidebar-collapsed .desktop-sidebar {
                display: none !important;
            }

            body.sidebar-collapsed .sidebar-collapse-toggle {
                left: 0;
            }

            body.sidebar-collapsed .main-content {
                flex: 0 0 100%;
                width: 100%;
                max-width: 100%;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .desktop-sidebar,
            .desktop-sidebar-inner,
            .sidebar-collapse-toggle {
                transition: none !important;
            }
        }

        .sidebar .nav-link {
            color: #495057;
            border-radius: 0;
            padding: 0.75rem 0.75rem;
            transition: all 0.2s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .sidebar .nav-link:hover {
            background-color: #e9ecef;
        }

        .sidebar .nav-link.active {
            background-color: var(--primary);
            color: white;
        }

        .offcanvas-sidebar .nav-link {
            color: #495057;
            border-radius: 0;
            padding: 0.75rem 1.25rem;
        }

        .offcanvas-sidebar .nav-link.active {
            background-color: var(--primary);
            color: white;
        }

        .offcanvas-sidebar {
            width: 80vw;
            max-width: 320px;
        }

        .main-content {
            padding: 2rem;
            flex: 1;
            padding-bottom: 120px;
        }

        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            margin-bottom: 1.5rem;
        }

        .card-header {
            background-color: white;
            border-bottom: 1px solid rgba(0,0,0,.125);
            font-weight: 600;
        }

        .footer {
            background-color: white;
            padding: 1.5rem 0;
            /* margin-top: auto; */
            border-top: 1px solid rgba(0,0,0,.1);
            position: relative;
            z-index: 0;
        }