/* =====================================================
   ANIMATIONS - Microinteractions & Transitions
   ===================================================== */

/* =====================================================
   FADE IN UP (page content entrance)
   ===================================================== */

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

.fade-in-up {
  animation: fadeInUp 0.35s ease-out;
}

/* =====================================================
   SKELETON LOADING
   ===================================================== */

@keyframes skeletonLoading {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--bs-tertiary-bg, #f0f0f0) 25%,
    var(--bs-secondary-bg, #e0e0e0) 50%,
    var(--bs-tertiary-bg, #f0f0f0) 75%
  );
  background-size: 200px 100%;
  animation: skeletonLoading 1.5s infinite;
  border-radius: 4px;
}

.skeleton-row td {
  position: relative;
  height: 48px;
}

.skeleton-row td::after {
  content: '';
  display: block;
  width: 70%;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--bs-tertiary-bg, #f0f0f0) 25%,
    var(--bs-secondary-bg, #e0e0e0) 50%,
    var(--bs-tertiary-bg, #f0f0f0) 75%
  );
  background-size: 200px 100%;
  animation: skeletonLoading 1.5s infinite;
}

/* =====================================================
   SPINNER (button loading state)
   ===================================================== */

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
}

/* =====================================================
   COUNTER ANIMATION (stat cards)
   ===================================================== */

.animate-number {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* =====================================================
   PULSE (status indicators)
   ===================================================== */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* =====================================================
   DROPDOWN ANIMATIONS
   ===================================================== */

.dropdown-menu.show {
  animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
   NAVBAR ENHANCEMENTS
   ===================================================== */

.navbar {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar-brand:hover .brand-icon {
  transform: scale(1.1);
}

.brand-icon {
  transition: transform 0.25s ease;
}

/* =====================================================
   TABLE ROW ENTRANCE
   ===================================================== */

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

.table tbody tr {
  animation: fadeIn 0.3s ease;
}

/* =====================================================
   TOAST NOTIFICATIONS
   ===================================================== */

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toast-item {
  animation: slideInRight 0.3s ease;
  min-width: 300px;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bs-body-bg, #fff);
  border-left: 4px solid var(--bs-primary);
}

.toast-item--success { border-left-color: #10b981; }
.toast-item--error   { border-left-color: #ef4444; }
.toast-item--warning { border-left-color: #f59e0b; }
.toast-item--info    { border-left-color: #3b82f6; }

.toast-item.removing {
  animation: slideOutRight 0.3s ease forwards;
}

/* =====================================================
   SMOOTH THEME TRANSITION
   ===================================================== */

html[data-bs-theme] body,
html[data-bs-theme] .navbar,
html[data-bs-theme] .card,
html[data-bs-theme] .app-footer,
html[data-bs-theme] .table,
html[data-bs-theme] .dropdown-menu {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* =====================================================
   HOVER LIFT (generic utility)
   ===================================================== */

.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}