/* ============================================================
 * Skeleton & Optimistic State CSS - 众泰云 Design System
 *
 * 通用骨架屏加载态 + 乐观更新态
 * 依赖：variables.css (CSS变量系统)
 *
 * Classes:
 *   .skeleton            - 基础骨架块（带shimmer动画）
 *   .skeleton-line       - 骨架线条（文本行）
 *   .skeleton-card       - 骨架卡片容器
 *   .skeleton-avatar     - 骨架头像（圆形）
 *   .skeleton-thumbnail  - 骨架缩略图
 *   .skeleton-table      - 骨架表格
 *   .optimistic-update   - 乐观更新态（半透明+脉冲）
 *   .empty-state         - 空状态容器
 *
 * Animation:
 *   @keyframes shimmer   - 闪烁扫光效果
 *   @keyframes pulse-soft - 柔和脉冲动画
 * ============================================================ */

/* ============================================================
   1. Shimmer 动画关键帧
   ============================================================ */
@keyframes skeleton-shimmer {
    0% {
        background-position: -400px 0;
    }
    100% {
        background-position: 400px 0;
    }
}

@keyframes skeleton-pulse-soft {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

@keyframes optimistic-pulse {
    0%, 100% {
        opacity: 0.7;
        box-shadow: 0 0 0 0 var(--primary-100);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 0 6px transparent;
    }
}

/* ============================================================
   2. 基础骨架样式
   ============================================================ */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--gray-200);
    border-radius: var(--radius-sm);
    /* Shimmer gradient overlay */
    background-image: linear-gradient(
        90deg,
        var(--gray-200) 0%,
        var(--gray-100) 50%,
        var(--gray-200) 100%
    );
    background-size: 800px 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer var(--duration-1600) ease-in-out infinite;
}

/* 暗色模式适配 */
[data-theme="dark"] .skeleton {
    background-color: var(--gray-700);
    background-image: linear-gradient(
        90deg,
        var(--gray-700) 0%,
        var(--gray-600) 50%,
        var(--gray-700) 100%
    );
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skeleton {
        background-color: var(--gray-700);
        background-image: linear-gradient(
            90deg,
            var(--gray-700) 0%,
            var(--gray-600) 50%,
            var(--gray-700) 100%
        );
    }
}

/* ============================================================
   3. 骨架线条（模拟文本行）
   ============================================================ */
.skeleton-line {
    height: 14px;
    width: 100%;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-sm);
    background-color: var(--gray-200);
    background-image: linear-gradient(
        90deg,
        var(--gray-200) 0%,
        var(--gray-100) 50%,
        var(--gray-200) 100%
    );
    background-size: 800px 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer var(--duration-1600) ease-in-out infinite;
}

[data-theme="dark"] .skeleton-line {
    background-color: var(--gray-700);
    background-image: linear-gradient(
        90deg,
        var(--gray-700) 0%,
        var(--gray-600) 50%,
        var(--gray-700) 100%
    );
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skeleton-line {
        background-color: var(--gray-700);
        background-image: linear-gradient(
            90deg,
            var(--gray-700) 0%,
            var(--gray-600) 50%,
            var(--gray-700) 100%
        );
    }
}

/* 不同长度的线条变体 */
.skeleton-line--short {
    width: 40%;
}

.skeleton-line--medium {
    width: 70%;
}

.skeleton-line--long {
    width: 90%;
}

/* 不同高度的线条变体 */
.skeleton-line--sm {
    height: 10px;
}

.skeleton-line--lg {
    height: 18px;
}

.skeleton-line--xl {
    height: 24px;
}

/* ============================================================
   3.1 加载骨架容器（loading-skeleton）
   ------------------------------------------------------------
   通用加载态容器，配合 role="status" aria-live="polite" 使用，
   供模板在数据未就绪时展示骨架占位。
   内部复用 .skeleton-line / .skeleton-card 等基础骨架元素，
   .sr-only 屏幕阅读器文本由 accessibility.css 提供。
   ============================================================ */
.loading-skeleton {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* 加载容器内的卡片占位（用于网格/列表场景） */
.loading-skeleton .skeleton-card {
    margin: 0;
}

/* 居中型加载骨架（如整页占位） */
.loading-skeleton--centered {
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* ============================================================
   4. 骨架卡片
   ============================================================ */
.skeleton-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.skeleton-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.skeleton-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   5. 骨架头像
   ============================================================ */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--gray-200);
    background-image: linear-gradient(
        90deg,
        var(--gray-200) 0%,
        var(--gray-100) 50%,
        var(--gray-200) 100%
    );
    background-size: 400px 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer var(--duration-1600) ease-in-out infinite;
}

[data-theme="dark"] .skeleton-avatar {
    background-color: var(--gray-700);
    background-image: linear-gradient(
        90deg,
        var(--gray-700) 0%,
        var(--gray-600) 50%,
        var(--gray-700) 100%
    );
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skeleton-avatar {
        background-color: var(--gray-700);
        background-image: linear-gradient(
            90deg,
            var(--gray-700) 0%,
            var(--gray-600) 50%,
            var(--gray-700) 100%
        );
    }
}

/* 头像尺寸变体 */
.skeleton-avatar--sm {
    width: 28px;
    height: 28px;
}

.skeleton-avatar--lg {
    width: 56px;
    height: 56px;
}

.skeleton-avatar--xl {
    width: 80px;
    height: 80px;
}

/* ============================================================
   6. 骨架缩略图
   ============================================================ */
.skeleton-thumbnail {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    background-color: var(--gray-200);
    background-image: linear-gradient(
        90deg,
        var(--gray-200) 0%,
        var(--gray-100) 50%,
        var(--gray-200) 100%
    );
    background-size: 800px 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer var(--duration-1600) ease-in-out infinite;
}

[data-theme="dark"] .skeleton-thumbnail {
    background-color: var(--gray-700);
    background-image: linear-gradient(
        90deg,
        var(--gray-700) 0%,
        var(--gray-600) 50%,
        var(--gray-700) 100%
    );
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skeleton-thumbnail {
        background-color: var(--gray-700);
        background-image: linear-gradient(
            90deg,
            var(--gray-700) 0%,
            var(--gray-600) 50%,
            var(--gray-700) 100%
        );
    }
}

/* ============================================================
   7. 骨架列表项
   ============================================================ */
.skeleton-list {
    display: flex;
    flex-direction: column;
}

.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
}

.skeleton-list-item:last-child {
    border-bottom: none;
}

.skeleton-list-item__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ============================================================
   8. 骨架表格
   ============================================================ */
.skeleton-table {
    width: 100%;
    border-collapse: collapse;
}

.skeleton-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-surface-alt);
    border-bottom: 2px solid var(--border-color);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--font-medium);
}

.skeleton-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

/* ============================================================
   9. 骨架仪表盘统计卡片
   ============================================================ */
.skeleton-stat {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.skeleton-stat__label {
    height: 12px;
    width: 60%;
    border-radius: var(--radius-sm);
    background-color: var(--gray-200);
    background-image: linear-gradient(
        90deg,
        var(--gray-200) 0%,
        var(--gray-100) 50%,
        var(--gray-200) 100%
    );
    background-size: 400px 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer var(--duration-1600) ease-in-out infinite;
}

.skeleton-stat__value {
    height: 32px;
    width: 50%;
    border-radius: var(--radius-sm);
    background-color: var(--gray-200);
    background-image: linear-gradient(
        90deg,
        var(--gray-200) 0%,
        var(--gray-100) 50%,
        var(--gray-200) 100%
    );
    background-size: 400px 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer var(--duration-1600) ease-in-out infinite;
    animation-delay: var(--duration-fast);
}

[data-theme="dark"] .skeleton-stat__label,
[data-theme="dark"] .skeleton-stat__value {
    background-color: var(--gray-700);
    background-image: linear-gradient(
        90deg,
        var(--gray-700) 0%,
        var(--gray-600) 50%,
        var(--gray-700) 100%
    );
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .skeleton-stat__label,
    :root:not([data-theme="light"]) .skeleton-stat__value {
        background-color: var(--gray-700);
        background-image: linear-gradient(
            90deg,
            var(--gray-700) 0%,
            var(--gray-600) 50%,
            var(--gray-700) 100%
        );
    }
}

/* ============================================================
   10. 乐观更新态 (Optimistic Update)
   ============================================================ */
.optimistic-update {
    position: relative;
    opacity: 0.75;
    transition: opacity var(--transition-base);
    animation: optimistic-pulse var(--duration-1800) ease-in-out infinite;
}

.optimistic-update::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    pointer-events: none;
    border: 2px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--primary), transparent) 1;
    animation: skeleton-shimmer var(--duration-2000) linear infinite;
}

/* 不同类型的乐观更新变体 */
.optimistic-update--success {
    animation: optimistic-pulse var(--duration-1800) ease-in-out infinite;
    box-shadow: 0 0 0 2px var(--success-50);
}

.optimistic-update--warning {
    animation: optimistic-pulse var(--duration-1800) ease-in-out infinite;
    box-shadow: 0 0 0 2px var(--warning-50);
}

/* ============================================================
   11. 空状态 (Empty State)
   ============================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-10) var(--space-6);
    color: var(--text-muted);
}

.empty-state__icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-4);
    opacity: 0.4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
}

.empty-state__title {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.empty-state__description {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-5);
    max-width: 360px;
    line-height: var(--leading-normal);
}

.empty-state__action {
    display: flex;
    gap: var(--space-3);
}

/* 空状态尺寸变体 */
.empty-state--sm {
    padding: var(--space-6) var(--space-4);
}

.empty-state--sm .empty-state__icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-3);
}

.empty-state--sm .empty-state__title {
    font-size: var(--text-base);
}

.empty-state--lg {
    padding: var(--space-10) var(--space-8);
}

.empty-state--lg .empty-state__icon {
    width: 96px;
    height: 96px;
    margin-bottom: var(--space-5);
}

/* ============================================================
   12. 骨架屏容器显示控制（JS控制）
   ============================================================ */
.skeleton-placeholder {
    display: none;
}

.skeleton-placeholder.is-loading {
    display: block;
}

.skeleton-placeholder.is-loading + .content-area {
    display: none;
}

/* ============================================================
   13. 无障碍：减少动画偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-line,
    .skeleton-avatar,
    .skeleton-thumbnail,
    .skeleton-stat__label,
    .skeleton-stat__value {
        animation: none;
        opacity: 0.7;
    }

    .optimistic-update {
        animation: none;
        opacity: 0.8;
    }

    .optimistic-update::after {
        animation: none;
        display: none;
    }
}

/* ============================================================
   14. 响应式：平板断点适配 (768px - 1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .skeleton-card {
        padding: var(--space-3);
    }

    .skeleton-avatar {
        width: 36px;
        height: 36px;
    }

    .skeleton-avatar--lg {
        width: 48px;
        height: 48px;
    }

    .empty-state {
        padding: var(--space-8) var(--space-5);
    }

    .empty-state__icon {
        width: 56px;
        height: 56px;
    }
}

/* ============================================================
   15. 响应式：移动端断点 (< 768px)
   ============================================================ */
@media (max-width: 767px) {
    .skeleton-card {
        padding: var(--space-3);
    }

    .skeleton-avatar {
        width: 32px;
        height: 32px;
    }

    .skeleton-avatar--lg {
        width: 40px;
        height: 40px;
    }

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

    .skeleton-line {
        height: 12px;
    }

    .skeleton-line--sm {
        height: 8px;
    }

    .skeleton-line--lg {
        height: 16px;
    }

    .empty-state {
        padding: var(--space-8) var(--space-4);
    }

    .empty-state__icon {
        width: 48px;
        height: 48px;
    }

    .empty-state--lg {
        padding: var(--space-8) var(--space-5);
    }

    .empty-state--lg .empty-state__icon {
        width: 64px;
        height: 64px;
    }

    .skeleton-stat {
        padding: var(--space-3);
    }

    .skeleton-stat__value {
        height: 28px;
    }
}

/* ============================================================
   16. 小屏手机适配 (<= 375px)
   ============================================================ */
@media (max-width: 375px) {
    .skeleton-card {
        padding: var(--space-2);
        gap: var(--space-2);
    }

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

    .skeleton-line {
        height: 10px;
        margin-bottom: 6px;
    }

    .empty-state {
        padding: var(--space-6) var(--space-3);
    }

    .empty-state__icon {
        width: 40px;
        height: 40px;
    }

    .empty-state__title {
        font-size: var(--text-base);
    }

    .empty-state__description {
        font-size: var(--text-sm);
    }
}