/*
 * animations.css
 * Subtle animations and microinteractions for Le Sims Salary Management Application
 * Include this file after enhanced-styles.css for maximum impact
 */

/* ====== Animation Keyframes ====== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideInUp {
    from { 
      transform: translateY(30px);
      opacity: 0;
    }
    to { 
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInLeft {
    from { 
      transform: translateX(-30px);
      opacity: 0;
    }
    to { 
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes slideInRight {
    from { 
      transform: translateX(30px);
      opacity: 0;
    }
    to { 
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }
  
  @keyframes ripple {
    0% {
      box-shadow: 0 0 0 0 rgba(98, 0, 234, 0.3);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(98, 0, 234, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(98, 0, 234, 0);
    }
  }
  
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  
  /* ====== Page Transitions ====== */
  .page {
    animation: fadeIn 0.4s ease-out;
  }
  
  .page-header h1 {
    animation: slideInLeft 0.5s ease-out;
  }
  
  .page-actions {
    animation: slideInRight 0.5s ease-out;
  }
  
  /* Staggered card animations */
  .stats-cards .stat-card:nth-child(1) { animation: slideInUp 0.4s ease-out 0.1s both; }
  .stats-cards .stat-card:nth-child(2) { animation: slideInUp 0.4s ease-out 0.2s both; }
  .stats-cards .stat-card:nth-child(3) { animation: slideInUp 0.4s ease-out 0.3s both; }
  .stats-cards .stat-card:nth-child(4) { animation: slideInUp 0.4s ease-out 0.4s both; }
  
  /* ====== Interactive Elements ====== */
  
  /* Button ripple effect */
  .btn {
    position: relative;
    overflow: hidden;
  }
  
  .btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.8s;
  }
  
  .btn:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
  }
  
  .btn-primary:hover {
    animation: pulse 1s infinite;
  }
  
  /* Card hover effects */
  .card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  .dashboard-stats .stat-card .stat-icon i,
  .stats-cards .stat-card .stat-icon i {
    transition: transform 0.3s ease-in-out;
  }
  
  .dashboard-stats .stat-card:hover .stat-icon i,
  .stats-cards .stat-card:hover .stat-icon i {
    animation: float 2s ease-in-out infinite;
  }
  
  /* Table row animations */
  .table tbody tr {
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
  }
  
  .table tbody tr:hover {
    transform: translateX(5px);
  }
  
  /* Avatar shine effect */
  .avatar {
    position: relative;
    overflow: hidden;
  }
  
  .avatar::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shimmer 3s infinite;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  
  .avatar:hover::after {
    opacity: 1;
  }
  
  /* Action button animations */
  .action-btn {
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  
  .action-btn:hover {
    animation: pulse 1s infinite;
  }
  
  .action-btn:active {
    transform: scale(0.9);
  }
  
  /* Badge animations */
  .badge {
    transition: transform 0.2s ease-in-out;
  }
  
  .badge:hover {
    transform: scale(1.1);
  }
  
  /* Input focus animations */
  .form-control:focus {
    animation: ripple 1s infinite;
  }
  
  /* Modal animations */
  .modal-container.active .modal {
    animation: fadeIn 0.3s ease-out, slideInUp 0.4s ease-out;
  }
  
  .modal-close {
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }
  
  .modal-close:hover {
    transform: rotate(90deg);
  }
  
  /* Sidebar menu animations - with mobile fix */
  .sidebar-menu ul li {
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  .sidebar-menu ul li:hover i {
    animation: pulse 1s infinite;
  }
  
  /* Make sure sidebar has solid background in mobile view */
  @media (max-width: 992px) {
    .sidebar {
      background: linear-gradient(135deg, var(--dark-light), var(--dark));
      opacity: 1 !important;
      z-index: 100; /* Ensure high z-index for mobile */
      backdrop-filter: none; /* Remove any backdrop filters */
    }
    
    /* Prevent any animations that could cause transparency */
    .sidebar, .sidebar-menu, .sidebar-menu ul li {
      animation: none !important;
    }
    
    /* Ensure solid background for menu items */
    .sidebar-menu ul li.active,
    .sidebar-menu ul li:hover {
      background-color: rgba(255, 255, 255, 0.2) !important;
    }
  }
  
  /* Sync status animations */
  #sync-indicator.syncing::before {
    animation: spin 1s linear infinite;
  }
  
  #pending-changes-count {
    transition: transform 0.2s ease-in-out;
  }
  
  #pending-changes-count:hover {
    transform: scale(1.1);
    animation: pulse 1s infinite;
  }
  
  /* Activity item animations */
  .activity-item {
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }
  
  .activity-item:hover {
    transform: translateX(5px);
  }
  
  .activity-icon i {
    transition: transform 0.3s ease-in-out;
  }
  
  .activity-item:hover .activity-icon i {
    animation: pulse 1s infinite;
  }
  
  /* Search box animation */
  .search-box input {
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }
  
  .search-box input:focus {
    width: calc(100% + 50px); /* Expand slightly when focused */
  }
  
  /* Chart placeholder animation */
  .chart-placeholder i {
    animation: float 3s ease-in-out infinite;
  }
  
  /* Progress bar animation */
  .progress-bar {
    transition: width 0.8s ease-in-out;
  }
  
  .progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 2s infinite linear;
    background-size: 200% 100%;
  }
  
  /* Loading animation enhancements */
  .app-loader .loader-spinner {
    animation: spin 1s linear infinite;
  }
  
  .app-loader .loader-text {
    animation: pulse 2s infinite;
  }
  
  /* Additional fix for sidebar in mobile view */
  @media (max-width: 992px) {
    /* Fix for sidebar transparency on mobile */
    .sidebar {
      background-color: var(--dark-light) !important;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Ensure sidebar header is also solid */
    .sidebar-header {
      background-color: var(--dark-light) !important;
    }
    
    /* Ensure sidebar menu has solid background */
    .sidebar-menu {
      background-color: var(--dark-light) !important;
    }
    
    /* Add a solid background to menu items */
    .sidebar-menu ul li {
      background-color: transparent;
    }
    
    /* Ensure no transparency for active menu items */
    .sidebar-menu ul li.active {
      background-color: rgba(255, 255, 255, 0.2) !important;
    }
  }
  
  /* Disable animations for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* Only apply hover animations on devices that support hover */
  @media (hover: hover) {
    .btn-primary:hover,
    .stats-cards .stat-card:hover .stat-icon i,
    .action-btn:hover,
    #pending-changes-count:hover,
    .activity-item:hover .activity-icon i {
      animation: pulse 1s infinite;
    }
  }