.edu-admin-grid {
  display: grid;
  grid-template-columns: 295px 1fr; /* Fixed side panel width and flexible main content */
  grid-template-areas: 
    "sidePanel mainPanel"; /* Define named grid areas for easier control */
  grid-auto-rows: auto;
  height: auto;
  gap: var(--margin-xs);
  margin-left: var(--margin-xl);
  margin-top: var(--margin-xl);
}

.edu-admin-side-panel {
  grid-area: sidePanel; /* Assign this element to the 'sidePanel' area */
  position: sticky; 
  top:0;
  width: 300px;                /* Fixed width for the side panel */
  height: calc(100vh - 60px);  /* Full height minus header */
  overflow-y: hidden;          /* Hide vertical scrollbar by default */
  overflow-x: hidden;          /* Prevents horizontal scrolling */
  padding-right: 10px;         /* Padding for readability */
  box-sizing: border-box;
  transition: all 0.3s ease;   /* Smooth transition for all changes */
  border-radius: 10px;
  background: #F5F5F3;
  margin-bottom: 20px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.edu-admin-main-panel {
    grid-area: mainPanel; /* Assign to named grid area 'mainPanel' */
	border-radius: 10px;
	height: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; /* Smooth transition for resizing */
    box-sizing: border-box; /* Ensure padding is included in width calculations */
	padding-bottom: 40px; /* Add extra space inside at the bottom */
	margin-bottom: 20px; /* Add extra space outside at the bottom */
	overflow-y: auto;
}

.edu-admin-panel-sections{
display: flex;
flex-grow: 1;
flex-direction: column;
align-items: flex-start; /* Vertically centers content within each section */
justify-content: flex-start;
margin-left:var(--margin-xs);
gap:var(--margin-xs);
margin-bottom:16px;
}

.edu-admin-section-name { 
color: var(--pure-black); 
font-size: var(--font-size-h5); 
font-weight:var(--font-weight-semibold); 
font-family: var(--font-family-montserrat);
}

.edu-admin-panel-sections a {
color: var(--pure-black-less-opacity); 
text-decoration: none;
width:90%;
font-size: var(--font-size-h6); 
font-weight:var(--font-weight-medium); 
font-family: var(--font-family-base);
margin-left:var(--margin-lg);
padding:4px;
}


.edu-admin-panel-sections a:hover{
width: 90%;
text-decoration: none;
background-color: #f0f0f0;
border-radius: 8px;
}

.admin-side-panel-active-link {
width: 90%;
text-decoration: none;
background-color: var(--gmail-next-more-light-blue);
border-radius: 8px;
    /* Optionally, you can add more styling to match your hover state */
}

.top-margin {
margin-top:var(--margin-xxl);
}

.default-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Ensures both text and image start at the same left position */
  justify-content: flex-start;
  width: 100%; /* Full width */
  max-width: 800px; /* Ensures both elements are aligned */
  margin-left: auto;
  margin-right: auto;
}

.default-message {
  font-size: 1.2rem; /* Slightly larger text for better readability */
  color: var(--strong-blue, #2c3e50); /* Use a strong color (fallback: dark blue) */
  font-weight: 600; /* Slightly bold for emphasis */
  margin-bottom: 16px; /* Space between text and image */
  background-color: var(--light-gray, #f8f9fa); /* Background only covers text width */
  border-radius: 8px; /* Rounded corners */
  display: inline-block; /* Background color only covers text width */
  max-width: 800px; /* Ensures it does not exceed 800px */
  text-align: left; /* Align text to the left */
  padding: 5px 10px; /* Add spacing inside the box */
  box-sizing: border-box; /* Ensures padding is included within width */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
  white-space: nowrap; /* Prevents breaking text into multiple lines */
}


.default-image {
  width: 100%;  /* Make it responsive within the parent container */
  max-width: 600px; /* Ensure it does not exceed 800px width */
  height: auto;  /* Maintain aspect ratio */
  max-height: 600px; /* Ensure it does not exceed 800px height */
  display: block; /* Remove extra spacing below the image */
  margin-top: 10px; /* Spacing between text and image */
  object-fit: contain; /* Ensures the image is fully visible within constraints */
  border-radius: 15px; 
}

.edu-admin-side-panel:hover {
  overflow-y: auto;            /* Show vertical scrollbar on hover */
}

/* Custom Scrollbar Styling */
.edu-admin-side-panel::-webkit-scrollbar {
  width: 8px;                  /* Width of the scrollbar */
  opacity: 0;                  /* Hide scrollbar visually when not in use */
}

.edu-admin-side-panel:hover::-webkit-scrollbar {
  opacity: 1;                  /* Show scrollbar when hovered */
}

.edu-admin-side-panel::-webkit-scrollbar-thumb {
  background: #D3D3D3;            /* Color of the scrollbar thumb */
  border-radius: 5px;          /* Rounded edges for better aesthetics */
}

.edu-admin-side-panel::-webkit-scrollbar-thumb:hover {
  background: #555;            /* Darker color on hover for better UX */
}


.gicon {
  width: 24px;            /* Set the size */
  height: 24px;
  fill: #007bff;          /* Set the color */
  vertical-align: middle; /* Align icon with text */    /* Add space between the icon and the text */
}

.toggle-panel-button {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.toggle-panel-button:hover {
  background-color: #0056b3;
}

/* ======================= Large Desktops (1920px and above) ======================= */
@media (min-width: 1920px) {
  .edu-admin-grid {
    grid-template-columns: 360px 1fr;
    margin-left: var(--margin-xxl);
    margin-top: var(--margin-xxl);
    gap: calc(var(--margin-xs) + 8px);
  }

  .edu-admin-side-panel {
    width: 360px;
    padding-right: 6px;
  }

  .edu-admin-section-name {
    font-size: 22px;
  }

  .edu-admin-panel-sections a {
    font-size: 20px;
    margin-left: 8px;
  }

  .default-message {
    font-size: 20px;
    padding: 8px 12px;
  }
  
  .default-image {
    width: 100%;  /* Make it responsive within the parent container */
    max-width: 800px; /* Ensure it does not exceed 800px width */
    max-height: 800px; /* Ensure it does not exceed 800px height */
  }

  .gicon {
    width: 28px;
    height: 28px;
  }
}

/* ======================= Standard Laptops (max-width: 1280px) ======================= */
@media (max-width: 1280px) {
  .edu-admin-grid {
    grid-template-columns: 280px 1fr;
    margin-left: var(--margin-lg);
    margin-top: var(--margin-lg);
    gap: var(--margin-sm);
  }

  .edu-admin-side-panel {
    width: 280px;
    padding-right: 6px;
  }

  .edu-admin-section-name {
    font-size: 17px;
  }

  .edu-admin-panel-sections a {
    font-size: 15px;
    margin-left: 6px;
  }

  .default-content-wrapper {
    align-items: center;
    justify-content: center;
    transform: none; /* Remove any translateX if previously added */
  }

  .default-message {
    font-size: 16px;
    padding: 8px 12px;
  }

  .default-image {
    width: 100%;  /* Make it responsive within the parent container */
    max-width: 500px; /* Ensure it does not exceed 800px width */
    max-height: 500px; /* Ensure it does not exceed 800px height */
  }

  .edu-admin-side-panel::-webkit-scrollbar {
    width: 6px;                  /* Width of the scrollbar */
  }
 
  .gicon {
    width: 20px;
    height: 20px;
  }
}

/* ======================= Small Laptops (max-width: 1024px) ======================= */
@media (max-width: 1024px) {
  .edu-admin-grid {
    grid-template-columns: 255px 1fr;
    margin-left: var(--margin-md);
    margin-top: var(--margin-md);
    gap: var(--margin-xs);
  }

  .edu-admin-side-panel {
    width: 255px;
    padding-right: 4px;
  }

  .edu-admin-section-name {
    font-size: 15px;
  }

  .edu-admin-panel-sections a {
    font-size: 14px;
    margin-left: 4px;
  }

  .default-content-wrapper {
    align-items: center;
    justify-content: center;
    transform: none; /* Remove any translateX if previously added */
  }

  .default-message {
    font-size: 15px;
    padding: 4px 8px;
  }

  .default-image {
    width: 100%;  /* Make it responsive within the parent container */
    max-width: 450px; /* Ensure it does not exceed 800px width */
    max-height: 450px; /* Ensure it does not exceed 800px height */
  }

  .edu-admin-side-panel::-webkit-scrollbar {
    width: 5px;                  /* Width of the scrollbar */
  }

  .gicon {
    width: 18px;
    height: 18px;
  }
}