/* ============================================================
   Miracle HR — Skeleton loaders
   Generic shimmer placeholders to replace blank loading states.

   USAGE EXAMPLES
   --------------
   Inline line:
     <div class="mhr-skel mhr-skel-line"></div>

   Full table row (recommended for DataTables):
     <tr ng-if="vm.loading">
       <td colspan="N"><div class="mhr-skel mhr-skel-row"></div></td>
     </tr>

   Card placeholder for the home grid:
     <div class="mhr-skel mhr-skel-card"></div>

   Notes:
   - The .mhr-skel base class provides the shimmer animation.
   - Modifier classes only set sizing.
   - All classes are namespaced to prevent collisions with AdminLTE.
   ============================================================ */

.mhr-skel {
  display: block;
  background-color: #ecf0f6;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: -150% 0;
  border-radius: 6px;
  animation: mhr-skel-shimmer 1.2s ease-in-out infinite;
}

[dir="rtl"] .mhr-skel {
  background-position: 150% 0;
  animation-name: mhr-skel-shimmer-rtl;
}

@keyframes mhr-skel-shimmer {
  0% {
    background-position: -150% 0;
  }
  100% {
    background-position: 150% 0;
  }
}
@keyframes mhr-skel-shimmer-rtl {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -150% 0;
  }
}

.mhr-skel-line {
  height: 12px;
  margin: 8px 0;
  width: 100%;
}

.mhr-skel-line.sm {
  height: 8px;
}
.mhr-skel-line.lg {
  height: 18px;
}

.mhr-skel-line.w-25 {
  width: 25%;
}
.mhr-skel-line.w-50 {
  width: 50%;
}
.mhr-skel-line.w-75 {
  width: 75%;
}

.mhr-skel-row {
  height: 22px;
  width: 100%;
  margin: 4px 0;
}

.mhr-skel-card {
  height: 170px;
  width: 100%;
  border-radius: 14px;
  margin: 8px 0;
}

.mhr-skel-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mhr-skel {
    animation: none;
  }
}