/**
 * 全局显示效果与动画优化
 */
html {
    scroll-behavior: smooth;
}
:root {
    --anim-duration: 0.3s;
    --anim-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --hover-lift: -4px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
}

/* 卡片：悬停上浮 + 阴影 */
.card {
    transition: transform var(--anim-duration) var(--anim-ease),
                box-shadow var(--anim-duration) var(--anim-ease),
                opacity var(--anim-duration) var(--anim-ease);
    border-radius: 10px;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.card.border-primary:hover { box-shadow: 0 4px 16px rgba(52, 152, 219, 0.2); }
.card.border-info:hover { box-shadow: 0 4px 16px rgba(23, 162, 184, 0.2); }
.card.border-success:hover { box-shadow: 0 4px 16px rgba(40, 167, 69, 0.2); }
.card.border-warning:hover { box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2); }

/* 卡片内小统计块 */
.card .border.rounded,
.card .p-3.border.rounded,
.stat-pill {
    transition: transform 0.2s var(--anim-ease), box-shadow 0.2s var(--anim-ease);
}
.card .border.rounded:hover,
.card .p-3.border.rounded:hover,
.stat-pill:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* 进度条：宽度过渡动画 */
.progress {
    overflow: hidden;
    border-radius: 8px;
}
.progress-bar {
    transition: width 0.8s var(--anim-ease);
}
.progress[style*="height: 24px"] .progress-bar,
.progress[style*="height: 20px"] .progress-bar {
    transition: width 1s var(--anim-ease);
}

/* 列表项：背景与左边框过渡 */
.list-group-item {
    transition: background-color 0.2s var(--anim-ease),
                border-left-color 0.2s var(--anim-ease),
                padding-left 0.2s var(--anim-ease);
    border-left: 3px solid transparent;
}
.list-group-item:hover {
    padding-left: 0.75rem;
    border-left-color: rgba(52, 152, 219, 0.4);
}
.list-group-item-action:hover {
    background-color: rgba(52, 152, 219, 0.06);
}
.list-group-flush .list-group-item { border-left-width: 3px; }

/* 表格行 */
.table-hover tbody tr {
    transition: background-color 0.2s var(--anim-ease);
}
.table tbody tr {
    transition: opacity 0.2s var(--anim-ease);
}

/* 徽章：已达成等轻微脉冲（仅对“已达成”类徽章做轻微呼吸效果） */
.badge.bg-success:not(.bg-danger) {
    animation: badge-pulse 2.5s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.92; transform: scale(1.02); }
}

/* 提示框 / 警告框 */
.alert {
    animation: alert-in 0.35s var(--anim-ease);
}
@keyframes alert-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 按钮 */
.btn {
    transition: transform 0.15s var(--anim-ease),
                box-shadow 0.2s var(--anim-ease),
                background-color 0.2s var(--anim-ease),
                border-color 0.2s var(--anim-ease);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.btn:active {
    transform: translateY(0);
}
.btn-sm:hover {
    transform: translateY(-1px);
}

/* 学习报告 / 统计卡片行：依次淡入 */
.report-cards-row .card,
.row.mb-4.report-cards-row .card {
    animation: card-fade-in 0.4s var(--anim-ease) backwards;
}
.report-cards-row .col-md-4:nth-child(1) .card { animation-delay: 0.05s; }
.report-cards-row .col-md-4:nth-child(2) .card { animation-delay: 0.1s; }
.report-cards-row .col-md-4:nth-child(3) .card { animation-delay: 0.15s; }
.report-cards-row .col-md-4:nth-child(4) .card { animation-delay: 0.2s; }
.report-cards-row .col-md-4:nth-child(5) .card { animation-delay: 0.25s; }
/* 通用卡片依次淡入（用于首页等） */
.stagger-cards .card {
    animation: card-fade-in 0.45s var(--anim-ease) backwards;
}
.stagger-cards .col-md-6:nth-child(1) .card { animation-delay: 0.05s; }
.stagger-cards .col-md-6:nth-child(2) .card { animation-delay: 0.12s; }
.stagger-cards .col-md-8 .card { animation-delay: 0.05s; }
.stagger-cards .col-md-4 .card { animation-delay: 0.12s; }
@keyframes card-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 图表容器 */
canvas[id$="Chart"],
canvas[id$="Chart"] {
    animation: chart-fade-in 0.5s var(--anim-ease);
}
@keyframes chart-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 热力图格子 */
.heatmap-table td {
    transition: transform 0.15s var(--anim-ease), opacity 0.2s var(--anim-ease), filter 0.2s var(--anim-ease);
}
.heatmap-table tbody td:hover {
    transform: scale(1.12);
    opacity: 0.9;
    filter: brightness(1.1);
}

/* 首页今日复习进度数字 */
.home-hero .border.rounded.p-3,
.card .border.rounded.p-3 {
    transition: transform 0.2s var(--anim-ease), box-shadow 0.2s var(--anim-ease);
}
.home-hero .border.rounded.p-3:hover,
.card .border.rounded.p-3:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* 星级按钮 */
.star-btn {
    transition: transform 0.15s var(--anim-ease), color 0.2s var(--anim-ease);
}
.star-btn:hover {
    transform: scale(1.2);
}

/* 筛选表单 */
.form-control,
.form-select {
    transition: border-color 0.2s var(--anim-ease), box-shadow 0.2s var(--anim-ease);
}

/* 分页 */
.pagination .page-link {
    transition: background-color 0.2s var(--anim-ease), transform 0.15s var(--anim-ease);
}
.pagination .page-link:hover {
    transform: translateY(-1px);
}

/* 题目详情复习时间线：悬停高亮 */
.list-group-flush .list-group-item:hover {
    border-left-color: var(--primary-color, #3498db);
}

/* 逾期按分类 / 薄弱分类 链接 */
.list-group-item a[href*="all_questions"] {
    transition: color 0.2s var(--anim-ease), padding-left 0.2s var(--anim-ease);
}
.list-group-item:hover a[href*="all_questions"] {
    color: var(--primary-color, #3498db);
}

/* 今日复习时段 徽章 */
.list-group-item .badge.bg-secondary {
    transition: transform 0.2s var(--anim-ease);
}
.list-group-item:hover .badge.bg-secondary {
    transform: scale(1.05);
}

/* 统计页：复习耗时列表 */
.list-group-flush li.list-group-item.d-flex {
    transition: background-color 0.2s var(--anim-ease);
}

/* 深色模式下的动画覆盖（保持可读性） */
body.dark-mode .card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
body.dark-mode .list-group-item:hover {
    background-color: rgba(255,255,255,0.05);
}