/* Foldable Sidebar Styles */

/* Smooth label transitions */
[data-sidebar-target="label"] {
  transition: opacity 200ms ease-in-out, width 200ms ease-in-out;
  overflow: hidden;
  white-space: nowrap;
}

/* Allow dropdowns to overflow sidebar when collapsed (88px width) */
[data-sidebar-target="sidebar"].w-\[88px\] [data-dropdown-target="menu"] {
  left: 100%;
  right: auto;
  margin-left: 0.5rem;
  min-width: 16rem;
}

/* Maintain consistent icon positioning */
[data-sidebar-target="sidebar"].w-\[88px\] > div {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

[data-sidebar-target="sidebar"].w-\[88px\] li .group {
  padding-left: 0.75rem;
  padding-right: 0.5rem;
}

/* Keep avatar/profile image in same position */
[data-sidebar-target="sidebar"].w-\[88px\] li.mt-auto .group {
  padding-left: 0.75rem;
}

[data-sidebar-target="sidebar"].w-\[88px\] li.mt-auto img,
[data-sidebar-target="sidebar"].w-\[88px\] li.mt-auto > button > div:first-child {
  margin-right: 0;
}

/* Prevent sidebar flicker on page load */
/* Hide sidebar initially if collapsed in localStorage */
/* Supports both html (initial load) and body (Turbo navigations) */
html.sidebar-init-collapsed [data-sidebar-target="sidebar"],
body.sidebar-init-collapsed [data-sidebar-target="sidebar"] {
  width: 88px !important;
}

html.sidebar-init-collapsed [data-sidebar-target="main"],
body.sidebar-init-collapsed [data-sidebar-target="main"] {
  padding-left: 88px !important;
}

html.sidebar-init-collapsed [data-sidebar-target="editor"],
body.sidebar-init-collapsed [data-sidebar-target="editor"] {
  left: 88px !important;
}

html.sidebar-init-collapsed [data-sidebar-target="label"],
body.sidebar-init-collapsed [data-sidebar-target="label"] {
  opacity: 0 !important;
  width: 0 !important;
}

html.sidebar-init-collapsed [data-sidebar-target="toggle"],
body.sidebar-init-collapsed [data-sidebar-target="toggle"] {
  transform: rotate(180deg) !important;
}