/**
 * Skeleton Loading (Phase 8.2).
 * Logic: Shimmer placeholder cho catalog grid, PDP gallery, cart drawer khi load AJAX.
 *
 * Cách dùng:
 *   - Phase 8.2: inject skeleton HTML trước khi AJAX load, ẩn khi data ready.
 *   - .skeleton-card: card placeholder cho product card (width/height match).
 *   - .skeleton-line: text line placeholder.
 *   - .skeleton-image: image placeholder.
 *
 * Shimmer animation: gradient di chuyển trái → phải lặp lại.
 */

/* Skeleton base */
.skeleton-card,
.skeleton-line,
.skeleton-image,
.skeleton-block {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}
html[data-theme="dark"] .skeleton-card,
html[data-theme="dark"] .skeleton-line,
html[data-theme="dark"] .skeleton-image,
html[data-theme="dark"] .skeleton-block {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 100%);
    background-size: 200% 100%;
}

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

/* Product card skeleton — match .product-card dimensions */
.skeleton-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    padding: 0;
}
.skeleton-card .sk-image {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
html[data-theme="dark"] .skeleton-card .sk-image {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 100%);
    background-size: 200% 100%;
}
.skeleton-card .sk-body {
    padding: 14px;
}
.skeleton-card .sk-line {
    height: 12px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}
html[data-theme="dark"] .skeleton-card .sk-line {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.05) 100%);
    background-size: 200% 100%;
}
.skeleton-card .sk-line.short { width: 60%; }
.skeleton-card .sk-line.medium { width: 80%; }
.skeleton-card .sk-line.price { height: 18px; width: 40%; margin-top: 12px; }

/* Generic skeleton line */
.skeleton-line {
    height: 14px;
    margin-bottom: 10px;
}
.skeleton-line.w-25 { width: 25%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-75 { width: 75%; }
.skeleton-line.w-100 { width: 100%; }

/* Skeleton image block */
.skeleton-image {
    width: 100%;
    aspect-ratio: 1;
}

/* Skeleton grid wrapper — match .products-grid */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

/* Hide skeleton when content loaded */
.skeleton-hidden { display: none !important; }

/* Generic loading placeholders — thay cho text "Đang tải..." toàn hệ thống */
.skeleton-rows {
    display: grid;
    gap: 12px;
    padding: 10px 4px;
}
.skeleton-rows .skeleton-line { margin-bottom: 0; }

/* Skeleton dòng trong <table>: dùng <tr class="skeleton-row"><td colspan=N>...</td></tr> */
.skeleton-row td { padding: 16px 14px !important; }
.skeleton-row .skeleton-line { margin-bottom: 10px; }
.skeleton-row .skeleton-line:last-child { margin-bottom: 0; }

/* Skeleton dãy thẻ thống kê (summary stats) */
.skeleton-stat-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.skeleton-stat {
    flex: 1;
    min-width: 120px;
    height: 64px;
    border-radius: 8px;
}


/* Reduced motion — tắt shimmer cho accessibility */
@media (prefers-reduced-motion: reduce) {
    .skeleton-card,
    .skeleton-line,
    .skeleton-image,
    .skeleton-block,
    .skeleton-card .sk-image,
    .skeleton-card .sk-line {
        animation: none;
        background: #f1f5f9;
    }
    html[data-theme="dark"] .skeleton-card,
    html[data-theme="dark"] .skeleton-line,
    html[data-theme="dark"] .skeleton-image,
    html[data-theme="dark"] .skeleton-block,
    html[data-theme="dark"] .skeleton-card .sk-image,
    html[data-theme="dark"] .skeleton-card .sk-line {
        background: rgba(255,255,255,.05);
    }
}