/* Sidebar collapse styles */

/* Default sidebar width */
.sidebar {
  width: 16rem; /* 64 * 0.25rem = 16rem = 256px */
}

/* Collapsed sidebar width */
.sidebar.collapsed {
  width: 5rem; /* 20 * 0.25rem = 5rem = 80px */
}

/* Hide text when collapsed */
.sidebar.collapsed .sidebar-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* Hide logo when collapsed */
.sidebar.collapsed .sidebar-logo {
  display: none;
}

/* Show text when expanded */
.sidebar:not(.collapsed) .sidebar-text {
  opacity: 1;
  width: auto;
  transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* Center nav items when collapsed */
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Rotate collapse button icon when collapsed */
.sidebar.collapsed .collapse-btn svg {
  transform: rotate(180deg);
  transition: transform 0.3s ease-in-out;
}

.sidebar:not(.collapsed) .collapse-btn svg {
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

/* Center collapse button when sidebar is collapsed */
.sidebar.collapsed .logo-header {
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Center user profile avatar when collapsed */
.sidebar.collapsed .user-profile {
  justify-content: center;
}

/* Make Back to Admin button smaller when collapsed */
.sidebar.collapsed .bg-yellow-500 {
  padding: 0.125rem 0.25rem;
  width: auto;
  min-width: 0;
  font-size: 0.625rem;
  line-height: 1;
}

.sidebar.collapsed .bg-yellow-500 svg {
  width: 0.75rem;
  height: 0.75rem;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */