/*
 * 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.
 *


 */

/* Sidebar Collapse Styles */
[data-sidebar-target="sidebar"].collapsed .sidebar-tooltip {
  display: block !important;
}

[data-sidebar-target="sidebar"]:not(.collapsed) .sidebar-tooltip {
  display: none !important;
}

/* Tooltip hover behavior - handled by JavaScript */

/* Remove hover effects from logo link and remove artifacts */
.sidebar-logo-link.no-hover:hover {
  background: transparent !important;
  transform: none !important;
}

/* Remove text glow artifact from logo */
[data-sidebar-target="sidebar"] .text-glow-light {
  text-shadow: none !important;
  filter: none !important;
}

/* Fix hover effects - consistent for both collapsed and expanded */
/* Only apply hover to direct nav links/buttons, not nested elements */
[data-sidebar-target="sidebar"] nav > a:hover,
[data-sidebar-target="sidebar"] nav > button:hover,
[data-sidebar-target="sidebar"] nav .ml-4 > a:hover {
  transform: translateX(1px);
}

[data-sidebar-target="sidebar"].collapsed nav > a:hover,
[data-sidebar-target="sidebar"].collapsed nav > button:hover,
[data-sidebar-target="sidebar"].collapsed nav .ml-4 > a:hover {
  transform: none;
}


[data-sidebar-target="sidebar"] nav a:active,
[data-sidebar-target="sidebar"] nav button:active {
  transform: translateX(0);
}

/* Prevent hover artifacts - ensure clean transitions and rendering */
[data-sidebar-target="sidebar"] nav a,
[data-sidebar-target="sidebar"] nav button {
  will-change: auto;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
  isolation: isolate;
  overflow: hidden;
}

/* Clean up gradient backgrounds on hover/active states - prevent artifacts */
[data-sidebar-target="sidebar"] nav a,
[data-sidebar-target="sidebar"] nav button {
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}

[data-sidebar-target="sidebar"] nav a.bg-gradient-to-r {
  background-origin: padding-box;
  -webkit-background-origin: padding-box;
  box-shadow: 0 2px 4px -1px rgba(99, 102, 241, 0.2), 0 4px 6px -1px rgba(99, 102, 241, 0.15), 0 1px 2px 0 rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.15);
  position: relative;
}

[data-sidebar-target="sidebar"] nav a.bg-gradient-to-r::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

[data-sidebar-target="sidebar"].collapsed nav a.bg-gradient-to-r {
  box-shadow: 0 2px 4px -1px rgba(99, 102, 241, 0.25), 0 3px 5px -1px rgba(99, 102, 241, 0.2);
}

/* Hide tooltips when not collapsed to prevent artifacts - completely remove from DOM flow */
[data-sidebar-target="sidebar"]:not(.collapsed) .sidebar-tooltip {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

/* Ensure tooltips don't create artifacts when collapsed */
[data-sidebar-target="sidebar"].collapsed .sidebar-tooltip {
  pointer-events: none;
  will-change: opacity;
  clip: auto;
  position: absolute;
  width: auto;
  height: auto;
  margin: 0;
}

[data-sidebar-target="sidebar"].collapsed a:hover .sidebar-tooltip,
[data-sidebar-target="sidebar"].collapsed button:hover .sidebar-tooltip {
  pointer-events: auto;
}

/* Tooltips - no arrows, clean design */
[data-sidebar-target="sidebar"] .sidebar-tooltip {
  border-radius: 0.5rem;
}

/* Collapsed state adjustments */
[data-sidebar-target="sidebar"].collapsed .sidebar-logo-container {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  justify-content: center;
  position: relative;
  min-height: 3.5rem;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-logo-link {
  flex: none;
  justify-content: center;
  width: 100%;
  margin: 0;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-nav {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-section-header {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-section-header p {
  font-size: 0px;
  line-height: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-user-section {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-user-content {
  justify-content: center;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-user-content > div:first-child {
  margin: 0 auto;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-user-content > div:last-child {
  margin: 0 auto;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-toggle-btn {
  display: none !important;
}

[data-sidebar-target="sidebar"]:not(.collapsed) .sidebar-toggle-collapsed-wrapper {
  display: none !important;
}

/* Show collapse toggle button on hover when sidebar is expanded */
[data-sidebar-target="sidebar"]:not(.collapsed) .sidebar-logo-container:hover .sidebar-toggle-btn {
  opacity: 1 !important;
}

[data-sidebar-target="sidebar"]:not(.collapsed) .sidebar-toggle-btn:hover {
  opacity: 1 !important;
}

[data-sidebar-target="sidebar"].collapsed .sidebar-toggle-collapsed-wrapper {
  display: block !important;
}

/* Center items when collapsed - same hover effects */
[data-sidebar-target="sidebar"].collapsed nav a,
[data-sidebar-target="sidebar"].collapsed nav button {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: 100%;
}

[data-sidebar-target="sidebar"].collapsed nav > a:hover,
[data-sidebar-target="sidebar"].collapsed nav > button:hover,
[data-sidebar-target="sidebar"].collapsed nav .ml-4 > a:hover {
  background-color: rgba(241, 245, 249, 0.8);
}

[data-sidebar-target="sidebar"]:not(.collapsed) nav > a:hover,
[data-sidebar-target="sidebar"]:not(.collapsed) nav > button:hover,
[data-sidebar-target="sidebar"]:not(.collapsed) nav .ml-4 > a:hover {
  background-color: rgba(241, 245, 249, 0.8);
}

[data-sidebar-target="sidebar"].collapsed nav a > svg,
[data-sidebar-target="sidebar"].collapsed nav button > svg,
[data-sidebar-target="sidebar"].collapsed nav a > img,
[data-sidebar-target="sidebar"].collapsed nav button > img {
  margin-right: 0 !important;
  margin-left: 0 !important;
  display: block;
  margin: 0 auto;
}

[data-sidebar-target="sidebar"].collapsed nav a > span,
[data-sidebar-target="sidebar"].collapsed nav button > span {
  display: none;
}

/* Center list items when collapsed */
[data-sidebar-target="sidebar"].collapsed nav a > div {
  justify-content: center;
  width: 100%;
}

[data-sidebar-target="sidebar"].collapsed nav a > div > svg {
  margin-right: 0 !important;
}

[data-sidebar-target="sidebar"].collapsed nav a > div > span {
  display: none;
}

[data-sidebar-target="sidebar"].collapsed nav a > span:last-child {
  display: none;
}

/* Campaigns and Lists sub-items - show in collapsed state */
[data-sidebar-target="sidebar"].collapsed nav .ml-4 {
  margin-left: 0;
  margin-top: 0.25rem;
}

[data-sidebar-target="sidebar"].collapsed nav .ml-4 a {
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: 100%;
}

[data-sidebar-target="sidebar"].collapsed nav .ml-4 a > div {
  justify-content: center;
  width: 100%;
}

[data-sidebar-target="sidebar"].collapsed nav .ml-4 a > div > svg {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

[data-sidebar-target="sidebar"].collapsed nav .ml-4 a > div > span {
  display: none;
}

[data-sidebar-target="sidebar"].collapsed nav .ml-4 a > span:last-child {
  display: none;
}

/* Smooth transitions for sidebar items */
[data-sidebar-target="sidebar"] a,
[data-sidebar-target="sidebar"] button {
  position: relative;
}

/* Campaigns and Lists sections - always visible */
[data-sidebar-target="sidebar"] .mb-1 {
  margin-bottom: 0.25rem;
}

/* Loading Skeleton Shimmer Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Apply shimmer to all skeleton elements */
[data-search-loading-target="skeleton"] .bg-slate-200 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #e2e8f0 0%,
    #e2e8f0 40%,
    #f1f5f9 50%,
    #e2e8f0 60%,
    #e2e8f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 4.5s ease-in-out infinite;
}

/* Alternative: Pulse animation for variety */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Apply pulse to skeleton rows for breathing effect */
[data-search-loading-target="skeleton"] > div {
  animation: pulse 4.5s ease-in-out infinite;
}

/* Stagger the pulse animation for each row */
[data-search-loading-target="skeleton"] > div:nth-child(1) {
  animation-delay: 0s;
}

[data-search-loading-target="skeleton"] > div:nth-child(2) {
  animation-delay: 0.6s;
}

[data-search-loading-target="skeleton"] > div:nth-child(3) {
  animation-delay: 1.2s;
}

[data-search-loading-target="skeleton"] > div:nth-child(4) {
  animation-delay: 1.8s;
}

[data-search-loading-target="skeleton"] > div:nth-child(5) {
  animation-delay: 2.4s;
}

/* Smooth transitions for loading states */
[data-search-loading-target="message"] {
  transition: opacity 150ms ease-in-out;
}

[data-search-loading-target="skeleton"] {
  transition: opacity 200ms ease-in-out;
}

/* Hide results container content when loading */
#creators-list.loading {
  display: none;
}