/* 
  Custom styles for the application shell that complement Tailwind CSS.
*/

/* --- 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);
}

/* --- Modal - hidden when empty --- */
#modal:empty {
  display: none !important;
  pointer-events: none;
}
#modal {
  display: flex;
}