/* General skeleton placeholder styles */
.skeleton {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
    background-size: 1000px 100%;/* Large size for the gradient to sweep across */
    border-radius: 4px;
}

.skeleton-text {
    height: 1em;/* Default height, can be overridden */
    margin-bottom: 0.5em;/* Space below text lines */
    border-radius: 4px;
}

.skeleton-text-sm {
    height: 0.8em;/* Smaller text lines */
    margin-bottom: 0.4em;
}

.skeleton-title {
    height: 1.5em;/* Larger height for titles */
    margin-bottom: 0.75em;
    width: 40%;/* Titles are often shorter than full width */
}

.skeleton-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;/* Circular icons */
    margin-right: 10px;
}

.skeleton-card {
    padding: 10px;
    border: 1px solid #e0e0e0;/* Optional: if cards should have borders */
    border-radius: 8px;
    margin-bottom: 15px;/* Space between cards */
}

.skeleton-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.skeleton-card-header .skeleton-text {
    flex-grow: 1;/* Text takes remaining space */
}

.skeleton-card-body .skeleton-text {
    width: 90%;/* Default width for text lines in body */
}

.skeleton-card-body .skeleton-text:last-child {
    margin-bottom: 0;/* No margin for the last line of text */
}

/* Shimmer animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;/* Start far left */
    }

    100% {
        background-position: 1000px 0;/* End far right */
    }
}

/* Apply to specific elements in skeleton views if needed */
/* For example, if your skeleton-thai.blade.php has a title like this: */
/* <div class="skeleton skeleton-title"></div> */

/* You can also create utility classes for width if needed */
.skeleton-w-50 { width: 50%; }
.skeleton-w-75 { width: 75%; }
.skeleton-w-100 { width: 100%; }

/* Ensure the containers in skeleton files have appropriate classes for these to apply */
/* Example structure within a skeleton card: */
/*
<div class="skeleton-card">
    <div class="skeleton-card-header">
        <div class="skeleton skeleton-icon"></div>
        <div class="skeleton skeleton-text skeleton-title" style="width: 60%;"></div>
    </div>
    <div class="skeleton-card-body">
        <div class="skeleton skeleton-text"></div>
        <div class="skeleton skeleton-text skeleton-w-75"></div>
    </div>
</div>
*/