/* Sophisticated Reset (Optional for better baseline) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif; /* Sleek and modern font */
}

body {
    font-size: 16px; /* Base font size */
    background-color: #f8fafc; /* Subtle off-white background */
    color: #343a40; /* Dark, readable text color */
}

.container {
    display: flex;
    flex-direction: row;
    overflow: hidden; /* Maintain overflow control */
}

/* Refined Sidebar Styles */
.sidebar {
    background-color: #6c757d; /* Deep, sophisticated blue */
    color: #000; /* Black text color */
    width: 250px; /* Adjusted width for a balanced layout */
    height: 100vh;
    padding: 30px 20px; /* Added padding for better content spacing */
    position: fixed;
    top: 0;
    left: -250px; /* Initially hidden state */
    transition: left 0.3s ease-in-out; /* Smoother transition effect */
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Enhanced shadow effect */
}

.sidebar h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px; /* Slight font size adjustment */
    font-weight: 600; /* Semi-bold for a more prominent heading */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subdued text shadow */
}

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

.sidebar ul li a {
    display: block;
    padding: 15px 18px; /* Slightly increased padding for a more comfortable click area */
    text-decoration: none;
    color: #000000;
    font-size: 17px; /* Slightly larger font size for better readability */
    transition: background-color 0.2s ease, color 0.2s ease; /* Updated transition timings */
}

.sidebar ul li a:hover {
    background-color: #424956; /* Darker hover shade */
}

/* Content Styles with Enhanced Interaction */
.content {
    flex-grow: 1;
    padding: 20px;
    background-color: #fff;
    color: #343a40; /* Dark, readable text color */
    font-size: 16px; /* Consistent base font size */
    transition: margin-left 0.3s ease-in-out; /* Smoother transition effect */
}

.content header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; /* Reduced margin for a tighter layout */
}

.menu-toggle {
    cursor: pointer;
    color: #6c757d; /* Inherited sidebar color for better integration */
    font-size: 20px; /* Larger for emphasis and better visibility */
    transition: color 0.2s ease; /* Smoother hover effect */
}

.menu-toggle:hover {
    color: #424956; /* Darker hover shade for the toggle button */
}

.card {
    background-color: #fff; /* Lighter card background for better contrast */
    border-radius: 10px; /* Rounded corners for a softer look */
    padding: 20px; /* Consistent padding */
    margin-bottom: 20px; /* Increased margin for better separation */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle card shadow */
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.close-modal:hover {
    color: red;
}

#profileImg {
    width: 100px; /* Adjust as needed */
    height: 100px; /* Adjust as needed */
    border-radius: 50%; /* Ensures the image is circular */
    margin-bottom: 20px; /* Add space below the image */
}

/* Popup Container */
.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
    z-index: 1001; /* Ensure the popup is above other elements */
}

.popup {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.popup h2 {
    margin-bottom: 10px;
}

.popup p {
    margin-bottom: 20px;
}

.popup button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background-color: #00f7ff;
    color: #fff;
}