/*
  Shell-specific styles: sidebar + header interactivity states for
  whichever shell design this deployment uses (see shell-*.html).
  Paired with js/shell.js.
*/

/* --- Sidebar Width --- */
/* Sets the width for the collapsed state (icons only) */
.menu-collapsed {
  width: 4rem; /* 64px */
}
/* Sets the width for the expanded state (icons and text) */
.menu-expanded {
  width: 16rem; /* 256px */
}

/* --- Main Content Margin --- */
/* Sets the left margin for the content when the sidebar is collapsed */
.content-expanded {
  margin-left: 4rem; /* 64px */
}
/* Sets the left margin for the content when the sidebar is expanded */
.content-collapsed {
  margin-left: 16rem; /* 256px */
}

/* --- Icon Rotation --- */
/* Utility class to rotate an element 180 degrees, used for submenu arrows */
.rotate-180 {
  transform: rotate(180deg);
}

/* --- Selected / Active Nav Item --- */
/* Reserved highlight color for whichever sidebar item is currently selected. */
#sidebar a.active {
  background: #ede9fe;
  color: #4c1d95;
  font-weight: 600;
}
#sidebar a.active svg {
  color: #6d28d9;
}