/* placeholders.css - minimal standalone placeholder styles */

/* Basic placeholder block */
.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  background-color: #e9ecef; /* light grey */
  border-radius: .25rem;
  color: transparent;       /* hide text if any */
  line-height: 1;
}

/* Width helpers when used together with .placeholder (so not global .col-*) */
.placeholder.col-1  { width: 8.333333%;  }
.placeholder.col-2  { width: 16.666667%; }
.placeholder.col-3  { width: 25%;        }
.placeholder.col-4  { width: 33.333333%; }
.placeholder.col-5  { width: 41.666667%; }
.placeholder.col-6  { width: 50%;        }
.placeholder.col-7  { width: 58.333333%; }
.placeholder.col-8  { width: 66.666667%; }
.placeholder.col-9  { width: 75%;        }
.placeholder.col-10 { width: 83.333333%; }
.placeholder.col-11 { width: 91.666667%; }
.placeholder.col-12 { width: 100%;       }

/* Make placeholders block-level variants easier */
.placeholder.block { display: block; }

/* Glow animation */
@keyframes placeholder-glow {
  0%   { opacity: .8; }
  50%  { opacity: .2; }
  100% { opacity: .8; }
}
.placeholder-glow .placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}

/* Wave animation */
@keyframes placeholder-wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.placeholder-wave .placeholder {
  position: relative;
  overflow: hidden;
  background-color: #e9ecef;
}
.placeholder-wave .placeholder::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  height: 100%;
  width: 150%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
  animation: placeholder-wave 1.6s linear infinite;
}

/* small utility to create placeholder shapes for avatars/icons */
.placeholder-circle { border-radius: 50%; }

/* optional sizing helpers */
.placeholder-sm { height: .75rem; }
.placeholder-lg { height: 1.5rem; }