/* Mkenya FMS — Animations
================================================================ */

@keyframes fms-spin {
  to { transform: rotate(360deg); }
}
@keyframes fms-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.85; }
}
@keyframes fms-load-bar {
  0%   { width: 0; margin-left: 0; }
  50%  { width: 70%; margin-left: 0; }
  100% { width: 0; margin-left: 100%; }
}
@keyframes fms-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fms-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fms-slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fms-count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fms-skeleton-wave {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* Skeleton Loading */
.fms-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400px 100%;
  animation: fms-skeleton-wave 1.4s ease infinite;
  border-radius: 4px;
  display: block;
}
.fms-skeleton-text { height: 14px; margin-bottom: 8px; }
.fms-skeleton-text.wide  { width: 80%; }
.fms-skeleton-text.med   { width: 55%; }
.fms-skeleton-text.short { width: 35%; }
.fms-skeleton-stat  { height: 48px; border-radius: var(--fms-radius); }
.fms-skeleton-row   { height: 42px; border-radius: 4px; margin-bottom: 6px; }
.fms-skeleton-chart { height: 200px; border-radius: var(--fms-radius); }

/* Page Transitions */
.fms-page-enter { animation: fms-fade-in 0.25s ease; }
.fms-card-enter { animation: fms-slide-up 0.3s ease; }

/* Notification Bell Shake */
@keyframes fms-bell-shake {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-15deg); }
  40%       { transform: rotate(12deg); }
  60%       { transform: rotate(-8deg); }
  80%       { transform: rotate(5deg); }
}
.fms-bell-shake { animation: fms-bell-shake 0.6s ease; }

/* Progress Bar */
.fms-progress { height: 6px; background: var(--fms-border); border-radius: 3px; overflow: hidden; }
.fms-progress-fill {
  height: 100%; border-radius: 3px; background: var(--fms-primary);
  transition: width 0.6s ease;
}
.fms-progress-fill.amber { background: var(--fms-accent); }
.fms-progress-fill.red   { background: var(--fms-danger-light); }

/* Ripple Effect on Buttons */
.fms-btn { position: relative; overflow: hidden; }
.fms-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: fms-ripple-out 0.5s ease;
  pointer-events: none;
}
@keyframes fms-ripple-out {
  to { transform: scale(4); opacity: 0; }
}

/* Tooltip */
.fms-tooltip-wrap { position: relative; display: inline-flex; }
.fms-tooltip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #333; color: #fff; font-size: 0.72rem; padding: 4px 10px;
  border-radius: 4px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.15s ease; z-index: 200;
}
.fms-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #333;
}
.fms-tooltip-wrap:hover .fms-tooltip { opacity: 1; }

/* Toast Notifications */
.fms-toast-container {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column-reverse; gap: 10px;
  z-index: 2000; pointer-events: none;
}
.fms-toast {
  pointer-events: all; min-width: 260px; max-width: 380px;
  padding: 12px 16px; border-radius: var(--fms-radius);
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  display: flex; align-items: flex-start; gap: 10px;
  animation: fms-slide-up 0.25s ease;
  font-size: 0.875rem;
}
.fms-toast-success { background: #1b5e20; color: #fff; }
.fms-toast-error   { background: #7f0000; color: #fff; }
.fms-toast-warning { background: #bf360c; color: #fff; }
.fms-toast-info    { background: #01579b; color: #fff; }
.fms-toast-close   { margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 1rem; padding: 0; }