/**
 * 用户中心 - 118项全息健康报告集成样式
 * 文件：css/user-center-holistic-report.css
 * 创建时间：2025-12-09
 * 版本：v1.0
 */

/* ==================== 查看完整报告按钮样式 ==================== */

/* 基础按钮样式 */
.btn-view-holistic-report {
    /* 布局 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    /* 尺寸 */
    padding: 10px 20px;
    min-width: 140px;
    height: 40px;

    /* 字体 */
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 1.5;

    /* 背景 - 紫色渐变主题（与全息报告查看器一致）*/
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;

    /* 交互 */
    cursor: pointer;
    transition: all 0.3s ease;

    /* 阴影 */
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);

    /* 文字不换行 */
    white-space: nowrap;
}

/* SVG图标样式 */
.btn-view-holistic-report svg {
    flex-shrink: 0; /* 防止图标被压缩 */
    stroke-width: 2;
}

/* 悬停效果 */
.btn-view-holistic-report:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 激活效果 */
.btn-view-holistic-report:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

/* 禁用状态 */
.btn-view-holistic-report:disabled {
    background: linear-gradient(135deg, #cccccc 0%, #999999 100%);
    color: #666666;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-view-holistic-report:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ==================== 健康档案卡片中的按钮组样式优化 ==================== */

/* 按钮组容器 */
.medical-record-card .record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* 确保所有按钮高度一致 */
.medical-record-card .record-actions button {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==================== 响应式设计 ==================== */

/* 平板设备 */
@media (max-width: 768px) {
    .btn-view-holistic-report {
        /* 缩小按钮尺寸 */
        padding: 8px 16px;
        min-width: 120px;
        height: 36px;
        font-size: 13px;
    }

    .medical-record-card .record-actions {
        /* 按钮堆叠 */
        flex-direction: column;
        width: 100%;
    }

    .medical-record-card .record-actions button {
        width: 100%;
        height: 36px;
    }
}

/* 手机设备 */
@media (max-width: 480px) {
    .btn-view-holistic-report {
        /* 进一步缩小 */
        padding: 8px 12px;
        min-width: 100px;
        height: 34px;
        font-size: 12px;
        gap: 4px;
    }

    .btn-view-holistic-report svg {
        width: 14px;
        height: 14px;
    }

    .medical-record-card .record-actions {
        gap: 8px;
    }

    .medical-record-card .record-actions button {
        height: 34px;
    }
}

/* ==================== 按钮变体（可选）==================== */

/* 边框样式变体（如果需要与其他按钮风格统一）*/
.btn-view-holistic-report.outline {
    background: transparent;
    border: 2px solid #667eea;
    color: #667eea;
    box-shadow: none;
}

.btn-view-holistic-report.outline:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border-color: transparent;
}

/* 小号按钮变体 */
.btn-view-holistic-report.btn-sm {
    padding: 6px 12px;
    min-width: 100px;
    height: 32px;
    font-size: 12px;
}

/* 大号按钮变体 */
.btn-view-holistic-report.btn-lg {
    padding: 12px 24px;
    min-width: 160px;
    height: 44px;
    font-size: 15px;
}

/* ==================== 加载状态 ==================== */

.btn-view-holistic-report.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-view-holistic-report.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== 提示气泡（可选）==================== */

/* 如果按钮有tooltip提示 */
.btn-view-holistic-report[data-tooltip] {
    position: relative;
}

.btn-view-holistic-report[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;
    z-index: 1000;
    pointer-events: none;
}

.btn-view-holistic-report[data-tooltip]:hover::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    pointer-events: none;
}

/* ==================== 动画效果 ==================== */

/* 按钮出现动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-view-holistic-report.animate-in {
    animation: fadeInUp 0.4s ease forwards;
}

/* 成功反馈动画（点击后）*/
@keyframes successPulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
    }
    50% {
        box-shadow: 0 4px 20px rgba(102, 126, 234, 0.6);
    }
}

.btn-view-holistic-report.success-feedback {
    animation: successPulse 0.6s ease;
}

/* ==================== 深色模式支持（可选）==================== */

@media (prefers-color-scheme: dark) {
    .btn-view-holistic-report {
        /* 深色模式下的渐变 */
        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
    }

    .btn-view-holistic-report:hover {
        background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
        box-shadow: 0 4px 12px rgba(124, 58, 237, 0.5);
    }

    .btn-view-holistic-report:disabled {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        color: #9ca3af;
    }
}

/* ==================== 打印样式 ==================== */

@media print {
    .btn-view-holistic-report {
        display: none; /* 打印时隐藏按钮 */
    }
}