/**
 * LQS指数介绍模态框样式
 * 版本: v2.1 (2025-12-22)
 * 用途: 供 ChangoBibVis 和 ChangoLQS 页面共用
 */

/* 模态框头部渐变 */
.lqs-intro-modal .lqs-intro-header {
    background: linear-gradient(135deg, #17a2b8 0%, #1e88e5 100%) !important;
    color: white;
}

.lqs-intro-modal .modal-content {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.lqs-intro-modal .modal-header {
    border-bottom: none;
    border-radius: 0.75rem 0.75rem 0 0;
}

.lqs-intro-modal .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: #f8f9fa;
    border-radius: 0 0 0.75rem 0.75rem;
}

/* 章节样式 */
.lqs-intro-section {
    padding: 0.5rem 0;
}

.lqs-intro-section .lead {
    font-size: 1.1rem;
    color: #333;
}

/* 公式框 */
.lqs-intro-modal .formula-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-left: 4px solid #007bff;
    font-family: 'Courier New', Courier, monospace;
}

.lqs-intro-modal .formula-box code {
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
}

/* 维度卡片样式 */
.lqs-intro-modal .dimension-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lqs-intro-modal .dimension-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.lqs-intro-modal .dimension-card .card-header {
    padding: 0.6rem 1rem;
}

.lqs-intro-modal .dimension-card .card-header h6 {
    font-size: 0.9rem;
    margin: 0;
}

.lqs-intro-modal .dimension-card .card-body {
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
}

.lqs-intro-modal .dimension-card ul {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

.lqs-intro-modal .dimension-card ul ul {
    padding-left: 1rem;
}

.lqs-intro-modal .dimension-card li {
    margin-bottom: 0.2rem;
}

/* 质量等级徽章 */
.lqs-intro-modal .grade-badge {
    color: white;
    transition: transform 0.2s ease;
}

.lqs-intro-modal .grade-badge:hover {
    transform: scale(1.05);
}

.lqs-intro-modal .grade-badge.grade-s {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
}

.lqs-intro-modal .grade-badge.grade-a {
    background: linear-gradient(135deg, #00C853 0%, #69F0AE 100%);
    box-shadow: 0 2px 10px rgba(0, 200, 83, 0.4);
}

.lqs-intro-modal .grade-badge.grade-b {
    background: linear-gradient(135deg, #2196F3 0%, #64B5F6 100%);
    box-shadow: 0 2px 10px rgba(33, 150, 243, 0.4);
}

.lqs-intro-modal .grade-badge.grade-c {
    background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
    box-shadow: 0 2px 10px rgba(255, 152, 0, 0.4);
}

.lqs-intro-modal .grade-badge.grade-d {
    background: linear-gradient(135deg, #9E9E9E 0%, #BDBDBD 100%);
    box-shadow: 0 2px 10px rgba(158, 158, 158, 0.4);
}

/* 示例框 */
.lqs-intro-modal .example-box {
    border-left: 4px solid #28a745;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
}

.lqs-intro-modal .example-box h6 {
    font-weight: 600;
}

.lqs-intro-modal .calculation-step {
    background: rgba(0, 123, 255, 0.05);
    padding: 0.8rem;
    border-radius: 0.3rem;
    margin-top: 0.5rem;
}

/* 提示框样式 */
.lqs-intro-modal .alert-info {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .lqs-intro-modal .formula-box code {
        font-size: 0.85rem;
    }
    
    .lqs-intro-modal .dimension-card .card-body {
        font-size: 0.8rem;
    }
    
    .lqs-intro-modal .grade-badge {
        padding: 0.5rem !important;
    }
    
    .lqs-intro-modal .grade-badge .fs-5 {
        font-size: 1rem !important;
    }
}

/* LQS介绍按钮样式 - 通用 */
.btn-lqs-intro {
    background: linear-gradient(135deg, #17a2b8 0%, #1e88e5 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-lqs-intro:hover {
    background: linear-gradient(135deg, #138496 0%, #1976d2 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
}

.btn-lqs-intro:active {
    transform: translateY(0);
}

/* ChangoLQS 页面的按钮样式适配 */
.lqs-header .btn-lqs-intro {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.lqs-header .btn-lqs-intro:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}