select {
  appearance: none;
  background-repeat: no-repeat;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center;
  padding-right: 40px;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Smooth Toggle & Expand/Collapse Animations */
@keyframes slideDownSmooth {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
}

@keyframes slideUpSmooth {
  from {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    max-height: 0;
    transform: translateY(-8px);
  }
}

@keyframes itemFadeInUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animations to expandable content */
[ng-show] {
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Category items animation */
.space-y-2 > button {
  animation: itemFadeInUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.space-y-2 > button:nth-child(1) { animation-delay: 0ms; }
.space-y-2 > button:nth-child(2) { animation-delay: 50ms; }
.space-y-2 > button:nth-child(3) { animation-delay: 100ms; }
.space-y-2 > button:nth-child(4) { animation-delay: 150ms; }
.space-y-2 > button:nth-child(5) { animation-delay: 200ms; }

/* Button hover effect with smooth scale */
button[ng-click="selectProyek(item)"] {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button[ng-click="selectProyek(item)"]:hover {
  transform: translateX(4px);
}

/* Smooth chevron rotation */
span[ng-style*="transform"] {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   SIDEBAR SMOOTH ANIMATIONS
   ======================================== */

/* Sidebar smooth toggle animation */
#sidebar {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
              opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.5s ease-out !important;
}

/* Overlay smooth fade */
#slide-overlay {
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#slide-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

#slide-overlay:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Smooth menu item hover effect */
#sidebar a.group {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#sidebar a.group:hover {
  transform: translateX(2px);
}

/* Close button smooth effect */
#sidebar button[ng-click="closeSidebar()"] {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#sidebar button[ng-click="closeSidebar()"]:hover i {
  transform: rotate(90deg);
}

/* Toggle button smooth effect */
button[ng-click="toggleSidebar()"] {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button[ng-click="toggleSidebar()"]:hover {
  transform: scale(1.08);
}

/* ========================================
   PASSWORD VISIBILITY TOGGLE ANIMATION
   ======================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Password toggle button icon animation */
button[ng-click="togglePasswordVisibility()"] span {
  animation: fadeIn 0.3s ease-in-out;
}

button[ng-click="togglePasswordVisibility()"] svg {
  stroke-width: 2;
  transition: all 0.3s ease-in-out;
}

button[ng-click="togglePasswordVisibility()"]:hover svg {
  stroke: currentColor;
}