/* Skeleton Loading States
 * Usage: Add class "skeleton" to any element to show a shimmer loading effect.
 * Combine with sizing classes like skeleton-text, skeleton-heading, etc.
 * Wrap in a skeleton-container to auto-remove when content loads.
 */

.skeleton {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
    border-radius: 4px;
}

.skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Text line skeletons */
.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-text.tiny { width: 30%; height: 0.75rem; }

/* Heading skeleton */
.skeleton-heading {
    height: 1.5rem;
    width: 40%;
    margin-bottom: 1rem;
}

/* Avatar skeleton */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-avatar.large {
    width: 64px;
    height: 64px;
}

.skeleton-avatar.small {
    width: 28px;
    height: 28px;
}

/* Card skeleton */
.skeleton-card {
    padding: 1.25rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

/* Stat number skeleton */
.skeleton-stat {
    height: 3rem;
    width: 5rem;
    margin-bottom: 0.5rem;
}

/* Table row skeletons */
.skeleton-table-row {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.skeleton-table-cell {
    height: 1rem;
    flex: 1;
}

/* Button skeleton */
.skeleton-button {
    height: 2.5rem;
    width: 8rem;
    border-radius: 6px;
}

/* Image placeholder skeleton */
.skeleton-image {
    width: 100%;
    height: 12rem;
    border-radius: 8px;
}

/* Page skeleton templates */
.skeleton-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Inline skeleton for text within a paragraph */
.skeleton-inline {
    display: inline-block;
    height: 0.875rem;
    width: 6rem;
    vertical-align: middle;
    border-radius: 3px;
}

/* Dark theme support — gated behind Hangout dark mode attribute only.
   CRM is light-only; using [data-theme="dark"] prevents OS dark mode from
   bleeding into the CRM skeleton loaders. */
.hangout-app[data-theme="dark"] .skeleton {
    background: #374151;
}

.hangout-app[data-theme="dark"] .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.hangout-app[data-theme="dark"] .skeleton-card {
    border-color: #374151;
}

.hangout-app[data-theme="dark"] .skeleton-table-row {
    border-bottom-color: #1f2937;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .skeleton::after {
        animation: none;
    }
}