/* ==========================================================================
   Skeleton Loading Utilities
   Shared shimmer animation and reusable placeholder classes.
   ========================================================================== */

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Base shimmer — apply to every skeleton element */
.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(226, 232, 240, 0.85) 25%,
        rgba(248, 250, 252, 1) 50%,
        rgba(226, 232, 240, 0.85) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 999px;
}

/* ---------- Line placeholders (text) ---------- */
.skeleton-line-xs {
    height: 0.75rem;
    width: min(6rem, 20%);
    margin-bottom: 0.5rem;
}

.skeleton-line-sm {
    height: 0.85rem;
    width: min(10rem, 30%);
    margin-bottom: 0.6rem;
}

.skeleton-line-md {
    height: 0.85rem;
    width: min(16rem, 50%);
    margin-bottom: 0.6rem;
}

.skeleton-line-lg {
    height: 1.1rem;
    width: min(24rem, 70%);
    margin-bottom: 0.75rem;
}

/* ---------- Circle placeholders (avatars / icons) ---------- */
.skeleton-circle-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-circle-lg {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- Chip / badge placeholder ---------- */
.skeleton-chip {
    height: 2rem;
    width: 5.5rem;
    border-radius: 999px;
}

/* ---------- Button placeholder ---------- */
.skeleton-btn {
    height: 2.25rem;
    width: 8rem;
    border-radius: 0.375rem;
}

.skeleton-btn-sm {
    height: 1.75rem;
    width: 5.5rem;
    border-radius: 0.375rem;
}

/* ---------- Image / rectangle placeholder ---------- */
.skeleton-rect {
    border-radius: 0.5rem;
}

/* ---------- Table row placeholder ---------- */
.skeleton-table-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 0;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.skeleton-table-row:first-child {
    border-top: 0;
    padding-top: 0.25rem;
}

.skeleton-table-row > .skeleton-shimmer {
    margin-bottom: 0;
}

/* ---------- Card container ---------- */
.skeleton-card-container {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* ---------- Toolbar placeholder ---------- */
.skeleton-toolbar {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ---------- Announcement / content card skeleton ---------- */
.skeleton-content-card {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
}

/* ---------- Product card skeleton ---------- */
.skeleton-product-card {
    background: var(--card-bg, #fff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.skeleton-product-image {
    width: 100%;
    height: 140px;
    border-radius: 0;
}

.skeleton-product-body {
    padding: 1rem;
}

/* ---------- GPU hints ---------- */
.skeleton-shimmer {
    will-change: background-position;
    backface-visibility: hidden;
}

/* ==========================================================================
   Dark mode
   ========================================================================== */

[data-theme="dark"] .skeleton-shimmer {
    background: linear-gradient(
        90deg,
        rgba(55, 65, 81, 0.85) 25%,
        rgba(75, 85, 99, 1) 50%,
        rgba(55, 65, 81, 0.85) 75%
    );
    background-size: 200% 100%;
}

[data-theme="dark"] .skeleton-card-container,
[data-theme="dark"] .skeleton-toolbar,
[data-theme="dark"] .skeleton-content-card,
[data-theme="dark"] .skeleton-product-card {
    background: var(--card-bg, #1f2937);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .skeleton-table-row {
    border-color: rgba(255, 255, 255, 0.06);
}