/* Sidebar collapse/expand styles */

/* Expanded state (default) */
#main-sidebar {
  width: 16rem; /* 256px - w-64 */
}

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

/* Prevent text from wrapping during collapse animation */
#main-sidebar .sidebar-text {
  white-space: nowrap;
  overflow: hidden;
}

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

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

  .lg\:fixed {
    position: fixed !important;
  }

  .lg\:flex {
    display: flex !important;
  }

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

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

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