/* Sidebar collapse/expand styles */

/* Expanded state (default) */
#main-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 16rem; /* 256px - w-64 */
  z-index: 40;
  transition: transform 300ms ease-in-out, width 300ms ease-in-out;
}

/* Collapsed state */
#main-sidebar.collapsed {
  width: 4.5rem; /* 72px - just enough for icons and padding */
}

/* Hide text elements when collapsed */
#main-sidebar.collapsed .sidebar-text {
  display: none;
}

/* Hide section headers when collapsed */
#main-sidebar.collapsed .sidebar-section {
  display: none;
}

/* Center icons when collapsed */
#main-sidebar.collapsed a,
#main-sidebar.collapsed button {
  justify-content: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Hide toggle button text/icon when collapsed - show only hamburger */
#main-sidebar.collapsed .sidebar-toggle {
  margin: 0 auto;
}

/* Adjust brand area when collapsed */
#main-sidebar.collapsed .sidebar-brand {
  justify-content: center;
}

/* Main content area adjustment */
#main-content {
  margin-left: 16rem; /* 256px - matches expanded sidebar */
  min-height: 100vh;
  transition: margin-left 300ms ease-in-out;
}

#main-content.sidebar-collapsed {
  margin-left: 4.5rem; /* 72px - matches collapsed sidebar */
}

/* Smooth transitions */
#main-sidebar,
#main-sidebar * {
  transition: all 300ms ease-in-out;
}

#sidebar-toggle {
  transition: all 300ms ease-in-out;
}

#main-sidebar.collapsed #sidebar-toggle {
  margin-left: 0;
  margin-right: 0;
}

/* Prevent text from wrapping during collapse animation */
#main-sidebar .sidebar-text {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 300ms ease-in-out;
}

#main-sidebar.collapsed .sidebar-text {
  opacity: 0;
}

#main-sidebar.collapsed .px-4 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Tooltip for collapsed sidebar items (optional enhancement) */
#main-sidebar.collapsed [title]:hover::after {
  content: attr(title);
  position: absolute;
  left: 100%;
  margin-left: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #1f2937; /* gray-800 */
  color: white;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  white-space: nowrap;
  z-index: 1000;
}

/* Mobile styles */
@media (max-width: 768px) {
  #main-sidebar {
    transform: translateX(-100%);
    width: 16rem;
    z-index: 50;
  }

  #main-sidebar.mobile-open {
    transform: translateX(0);
  }

  #main-sidebar.collapsed {
    width: 16rem;
  }

  #main-content,
  #main-content.sidebar-collapsed {
    margin-left: 0;
  }

  #sidebar-toggle {
    display: none;
  }

  #sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 45;
  }

  #sidebar-overlay.active {
    display: block;
  }
}

/* Show mobile hamburger only on mobile */
#mobile-menu-button {
  display: none;
}

@media (max-width: 768px) {
  #mobile-menu-button {
    display: flex;
  }
}
/*
 * 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.
 *


 */

/* Custom responsive classes for admin dashboard layout */
@media (min-width: 1024px) {
  .lg\:pl-64 {
    padding-left: 16rem;
  }

  .lg\:w-64 {
    width: 16rem;
  }

  .lg\:fixed {
    position: fixed;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:inset-y-0 {
    top: 0;
    bottom: 0;
  }

  .lg\:hidden {
    display: none;
  }
}