/***************************************************************************************/
/**********************Sidebar************************************************/
/***************************************************************************************/        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        :root {
            --sidebar-full-width: 260px;
            --sidebar-collapsed-width: 80px; /* Width when only icons are shown */
            --primary-purple: #773697;
            --secondary-purple: #a156cc;
            --accent-yellow: #fdeb3d;
            --text-light: #e0e0e0;
            --text-dark: #333;
            --bg-dark: #2c2f33; /* Darker background for sidebar */
            --transition-speed: 0.3s;
        }

        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            background-color: #f4f7f6; /* Light background for main content */
            overflow-x: hidden; /* Prevent horizontal scroll */
        }

        /* Main content area */
        .main-content {
            transition: margin-left var(--transition-speed) ease;
            margin-left: var(--sidebar-collapsed-width); /* Default: Pushed by collapsed sidebar */
            padding: 20px; /* Add some padding to your main content */
            box-sizing: border-box; /* Include padding in height calculation */
        }

        /* Toggle Button */
        .toggle-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1001; /* Above sidebar */
            background-color: var(--primary-purple);
            color: #fff;
            border: none;
            border-radius: 50%; /* Circular button */
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease;
            transform: rotate(0deg); /* Initial state */
        }
        .toggle-btn:hover {
            background-color: var(--secondary-purple);
            transform: scale(1.05);
        }

        /* Sidebar Styles */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: var(--sidebar-collapsed-width); /* Default: collapsed state */
            background: linear-gradient(180deg, var(--primary-purple), var(--secondary-purple)); /* Gradient background */
            padding-top: 70px; /* Space for toggle button */
            overflow-y: auto; /* Enable scrolling for long content */
            overflow-x: hidden; /* Hide horizontal overflow when collapsed */
            transition: width var(--transition-speed) ease, padding var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            z-index: 1000; /* Below toggle button */
            box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            -webkit-overflow-scrolling: touch;
        }

        /* Sidebar hover state (Desktop only) */
        @media (min-width: 993px) {
            .sidebar:hover {
                width: var(--sidebar-full-width); /* Expand on hover */
            }

            /* Main content adjusts on sidebar hover */
            .main-content {
                margin-left: var(--sidebar-collapsed-width); /* Default collapsed state */
            }
            .sidebar:hover ~ .main-content { /* Selects main-content if it's a sibling of hovered sidebar */
                margin-left: var(--sidebar-full-width); /* Push content when sidebar is hovered */
            }

             /* Hide toggle button on desktop, as hover controls sidebar */
            .toggle-btn {
                display: none;
            }
        }


        /* User Profile Section (always visible, but details hidden when collapsed) */
        .nav-item.nav-profile {
            padding: 20px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
            text-align: center;
            display: flex; /* Ensure it's a flex container for alignment */
            justify-content: center; /* Center horizontally */
        }

        .nav-profile .nav-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0;
            width: 100%; /* Ensure link takes full available width */
        }

        .nav-profile .profile-image img {
            width: 60px; /* Slightly smaller for icon-only mode */
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid rgba(255, 255, 255, 0.4);
            margin-bottom: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            transition: width var(--transition-speed) ease, height var(--transition-speed) ease;
        }

        /* When sidebar is full, expand profile image */
        .sidebar:hover .nav-profile .profile-image img {
            width: 80px;
            height: 80px;
        }


        .nav-profile .text-wrapper,
        .nav-profile .d-flex.justify-content-between.wrap {
            opacity: 0; /* Hidden by default */
            visibility: hidden;
            height: 0; /* Collapse height to prevent layout shift */
            overflow: hidden;
            transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease, height var(--transition-speed) ease;
        }

        /* Show profile details on sidebar hover */
        .sidebar:hover .nav-profile .text-wrapper,
        .sidebar:hover .nav-profile .d-flex.justify-content-between.wrap {
            opacity: 1;
            visibility: visible;
            height: auto; /* Restore height */
        }

        .nav-profile .profile-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 5px;
            letter-spacing: 0.5px;
        }

        .nav-profile .designation {
            font-size: 0.8rem;
            color: var(--text-light);
            text-transform: capitalize;
            margin-right: 10px;
        }

        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #28a745;
            border-radius: 50%;
            border: 1px solid #fff;
        }

        .nav-profile .d-flex.justify-content-between.wrap {
            margin-top: 15px;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .nav-profile .btn {
            background-color: var(--accent-yellow);
            color: var(--text-dark);
            font-size: 0.8rem;
            padding: 8px 12px;
            border-radius: 20px;
            font-weight: 500;
            transition: all var(--transition-speed) ease;
            white-space: nowrap;
        }

        .nav-profile .btn:hover {
            background-color: #ffe600;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* Menu Items */
        .nav-item {
            margin-bottom: 8px;
        }

        .nav-item .nav-link {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            color: var(--text-light);
            text-decoration: none;
            border-radius: 8px;
            transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
            justify-content: center; /* Center icons when collapsed */
        }

        .sidebar:hover .nav-item .nav-link {
            justify-content: flex-start; /* Align left when expanded */
        }

        .nav-item .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .nav-item .nav-link.active {
            background-color: rgba(255, 255, 255, 0.25);
            color: #fff;
            font-weight: 600;
        }

        .nav-item .nav-link i {
            font-size: 1.3rem;
            width: var(--sidebar-collapsed-width); /* Fixed width for icon block */
            text-align: center;
            margin-right: 0; /* Remove margin when collapsed */
            color: rgba(255, 255, 255, 0.8);
            transition: margin-right var(--transition-speed) ease;
        }

        .sidebar:hover .nav-item .nav-link i {
            width: 30px; /* Smaller fixed width for icon when expanded */
            margin-right: 15px; /* Add margin when expanded */
        }

        .nav-item .menu-title {
            opacity: 0; /* Hidden by default */
            visibility: hidden;
            width: 0; /* Collapse width to prevent overflow */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            transition: opacity var(--transition-speed) ease, width var(--transition-speed) ease, visibility var(--transition-speed) ease;
        }

        /* Show menu title on sidebar hover */
        .sidebar:hover .nav-item .menu-title {
            opacity: 1;
            visibility: visible;
            width: auto; /* Restore width */
        }

        /* Sub-menu (Collapse) */
        .nav-item .collapse .sub-menu {
            list-style: none;
            padding: 0;
            background-color: rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin-top: 5px;
            margin-left: 15px; /* Indent sub-menu */
        }

        .nav-item .collapse .sub-menu .nav-item {
            margin-bottom: 0;
        }

        .nav-item .collapse .sub-menu .nav-link {
            padding: 10px 20px;
            font-size: 0.9rem;
            color: var(--text-light);
            opacity: 0.9;
            justify-content: flex-start; /* Always left-align sub-menu items */
        }

        .nav-item .collapse .sub-menu .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
            opacity: 1;
        }

        .nav-item .collapse .sub-menu .nav-link i {
            font-size: 1rem;
            width: 20px;
            margin-right: 10px;
        }

        .menu-arrow {
            margin-left: auto;
            transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
            opacity: 0; /* Hidden by default */
            visibility: hidden;
        }
        .sidebar:hover .menu-arrow {
            opacity: 1; /* Show arrow when expanded */
            visibility: visible;
        }

        .nav-item .nav-link[aria-expanded="true"] .menu-arrow {
            transform: rotate(90deg);
        }

        /* Responsive Adjustments (for Mobile/Tablet where hover is not practical) */
        @media (max-width: 992px) {
            .toggle-btn {
                display: flex; /* Show toggle button on mobile */
                left: 20px; /* Keep fixed position */
                top: 20px;
                transition: left var(--transition-speed) ease, transform var(--transition-speed) ease; /* Add transition for left property */
            }

            .sidebar {
                left: -100%; /* Hide sidebar completely by default on smaller screens */
                width: var(--sidebar-full-width); /* Full width when active */
                box-shadow: none; /* Remove shadow when hidden off-screen */
                transition: left var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
            }

            /* Sidebar active state (when toggle button is clicked) */
            .sidebar.active {
                left: 0; /* Slide in from left */
                box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2); /* Add shadow when visible */
            }

            /* Toggle button adjusts when sidebar is active */
            .toggle-btn.active {
                left: calc(var(--sidebar-full-width) + 20px); /* Move when sidebar is open */
                transform: rotate(180deg); /* Rotate when active */
            }

            /* Main content always full width on smaller screens, sidebar overlays it */
            .main-content {
                margin-left: 0;
            }

            /* Show all sidebar content when active on mobile */
            .sidebar.active .nav-profile .text-wrapper,
            .sidebar.active .nav-profile .d-flex.justify-content-between.wrap,
            .sidebar.active .nav-item .menu-title,
            .sidebar.active .menu-arrow {
                opacity: 1;
                visibility: visible;
                height: auto;
                width: auto;
            }
            .sidebar.active .nav-profile .profile-image img {
                width: 80px;
                height: 80px;
            }
            .sidebar.active .nav-item .nav-link {
                justify-content: flex-start;
            }
            .sidebar.active .nav-item .nav-link i {
                width: 30px;
                margin-right: 15px;
            }


            /* Overlay when sidebar is open on small screens */
            body.sidebar-open::after {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5); /* Dim overlay */
                z-index: 999; /* Below sidebar, above content */
            }
        }

        @media (max-width: 768px) { /* Mobile */
            .toggle-btn {
                width: 40px;
                height: 40px;
                font-size: 1.3rem;
            }
            .sidebar {
                padding-top: 60px;
            }
            .nav-profile .profile-image img {
                width: 70px;
                height: 70px;
            }
            .nav-profile .profile-name {
                font-size: 1rem;
            }
            .nav-profile .designation {
                font-size: 0.75rem;
            }
            .nav-profile .btn {
                font-size: 0.75rem;
                padding: 6px 10px;
            }
        }



/***************************************************************************************/
/**********************Registration************************************************/
/***************************************************************************************/