/* CSS Grid Layout for Sidebar and Main Content */

/* Create a grid container for the body */
body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "sidebar main";
  min-height: 100vh;
  overflow-x: hidden;
}

/* Sidebar styles */
.sidebar {
  grid-area: sidebar;
  position: relative; /* Change from fixed to relative for grid layout */
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 15.625rem;
  height: 100vh;
  background-color: #334096;
  z-index: 3;
  transition: width 0.3s ease;
}

@media (min-width: 1200px) {
  .sidebar {
    width: 13.75rem;
  }
}

@media (min-width: 1400px) {
  .sidebar {
    width: 17.1875rem;
  }
}

@media (min-width: 1650px) {
  .sidebar {
    width: 19.5rem;
  }
}

/* Collapsed sidebar */
.sidebar.active {
  width: 60px;
}

/* Dashboard main styles */
.dashboard-main {
  grid-area: main;
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  min-height: 100vh;
  transition: all 0.3s;
  width: 100%;
  margin-inline-start: 0; /* Remove margin, grid will handle spacing */
}

/* Mobile styles (sidebar overlay) */
@media (max-width: 1199px) {
  body {
    grid-template-columns: 0 1fr; /* Collapse sidebar column by default on mobile */
    grid-template-areas: "sidebar main";
  }

  .sidebar {
    position: fixed; /* Fixed position for overlay on mobile */
    inset-inline-start: -100%; /* Hide sidebar by default */
    width: 15.625rem;
    transition: inset-inline-start 0.3s ease;
  }

  .sidebar.sidebar-open {
    inset-inline-start: 0; /* Show sidebar when open */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  }

  .dashboard-main {
    margin-inline-start: 0;
  }
}

/* Hover behavior for collapsed sidebar */
.sidebar.active:hover {
  width: auto;
}

@media (min-width: 1200px) {
  .sidebar.active:hover {
    width: 13.75rem;
  }
}

@media (min-width: 1400px) {
  .sidebar.active:hover {
    width: 17.1875rem;
  }
}

@media (min-width: 1650px) {
  .sidebar.active:hover {
    width: 19.5rem;
  }
}

/* Ensure content in sidebar behaves correctly */
.sidebar-menu-area {
  width: 100%;
  overflow-y: auto;
  height: calc(100vh - 60px); /* Adjust based on header height */
}

/* Add overlay for mobile when sidebar is open */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

@media (max-width: 1199px) {
  body.overlay-active .sidebar-overlay {
    display: block;
  }
}