.skeleton-loader {
    margin-top: 0.75em;
    margin-bottom: 1.25em;
    overflow: hidden;
  }

.skeleton-header {
    height: 1.2em;
    background-color: #e0e0e0;
    margin-bottom: 10px;
}

.dark .skeleton-header {
  background-color: #111827;
}

.skeleton-line {
    height: 1em;
    background-color: #e0e0e0;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    width: 90%;
}

.dark .skeleton-line {
    background-color: #111827;
}

/* Shimmer effect */
@keyframes shimmer {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
}

.skeleton-loader div {
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shimmer;
    animation-timing-function: linear;
    background: darkgray;
    background: linear-gradient(to right, #111827 8%, #e0e0e0 18%, #111827 33%);
    position: relative;
}

.dark .skeleton-loader div {
    background: linear-gradient(to right, #0F172A 8%, #1E293B 18%, #0F172A 33%);
}