/* ========================================
   Inline State 内联状态提示组件
   
   用于页面内的状态展示：
   - 错误状态（网络失败、加载失败等）
   - 空数据状态
   - 加载中状态
   - 信息/警告提示
   
   可嵌入表格 <td> 或普通容器中
   ======================================== */

/* 基础容器 */
.inline-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-6);
    text-align: center;
    animation: inlineStateFadeIn 0.35s var(--easing-decelerate);
}

/* 紧凑模式（用于表格内） */
.inline-state--compact {
    padding: var(--space-6) var(--space-4);
}

/* 图标容器 */
.inline-state__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    transition: transform 0.3s var(--easing-standard);
}

.inline-state:hover .inline-state__icon {
    transform: scale(1.05);
}

.inline-state__icon svg {
    width: 28px;
    height: 28px;
}

/* 紧凑模式图标 */
.inline-state--compact .inline-state__icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-3);
}

.inline-state--compact .inline-state__icon svg {
    width: 22px;
    height: 22px;
}

/* 标题 */
.inline-state__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--on-surface);
    margin: 0 0 var(--space-2);
    line-height: 1.4;
}

.inline-state--compact .inline-state__title {
    font-size: 0.9375rem;
}

/* 描述 */
.inline-state__message {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    margin: 0 0 var(--space-5);
    line-height: 1.6;
    max-width: 360px;
}

.inline-state--compact .inline-state__message {
    font-size: 0.8125rem;
    margin-bottom: var(--space-4);
}

/* 操作区域 */
.inline-state__actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* ========================================
   错误状态 (error)
   ======================================== */

.inline-state--error .inline-state__icon {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.inline-state--error .inline-state__title {
    color: var(--color-error);
}

/* 重试按钮 */
.inline-state__retry-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    height: 34px;
    border: 1px solid var(--color-error);
    background: transparent;
    color: var(--color-error);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family);
    cursor: pointer;
    transition: all 0.2s var(--easing-standard);
    outline: none;
}

.inline-state__retry-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s var(--easing-standard);
}

.inline-state__retry-btn:hover {
    background: var(--color-error);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.inline-state__retry-btn:hover svg {
    transform: rotate(180deg);
}

.inline-state__retry-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ========================================
   空数据状态 (empty)
   ======================================== */

.inline-state--empty .inline-state__icon {
    background: var(--surface-variant);
    color: var(--on-surface-variant);
}

/* ========================================
   加载中状态 (loading)
   ======================================== */

.inline-state--loading .inline-state__icon {
    background: var(--color-info-bg);
    color: var(--color-info);
    animation: inlineStatePulse 1.8s ease-in-out infinite;
}

.inline-state--loading .inline-state__title {
    color: var(--color-info);
}

/* 旋转加载图标 */
.inline-state--loading .inline-state__icon svg {
    animation: inlineStateSpin 1.2s linear infinite;
}

/* ========================================
   警告状态 (warning)
   ======================================== */

.inline-state--warning .inline-state__icon {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.inline-state--warning .inline-state__title {
    color: var(--color-warning);
}

/* ========================================
   信息状态 (info)
   ======================================== */

.inline-state--info .inline-state__icon {
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* ========================================
   成功状态 (success)
   ======================================== */

.inline-state--success .inline-state__icon {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.inline-state--success .inline-state__title {
    color: var(--color-success);
}

/* ========================================
   动画
   ======================================== */

@keyframes inlineStateFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes inlineStatePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@keyframes inlineStateSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   深色主题适配
   ======================================== */

[data-theme="dark"] .inline-state__retry-btn:hover {
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.35);
}

/* ========================================
   响应式
   ======================================== */

@media (max-width: 480px) {
    .inline-state {
        padding: var(--space-6) var(--space-4);
    }

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

    .inline-state__icon svg {
        width: 24px;
        height: 24px;
    }

    .inline-state__title {
        font-size: 0.9375rem;
    }

    .inline-state__message {
        font-size: 0.8125rem;
    }
}

/* ========================================
   减少动画偏好
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .inline-state {
        animation: none;
    }

    .inline-state--loading .inline-state__icon {
        animation: none;
    }

    .inline-state--loading .inline-state__icon svg {
        animation: none;
    }

    .inline-state__retry-btn:hover svg {
        transform: none;
    }

    .inline-state:hover .inline-state__icon {
        transform: none;
    }
}