// StatsGrid 统计卡片网格 - 紧凑布局 v3.9
// 遵循全局样式规范，使用全局变量

@import '@/styles/variables.scss';

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacing-4;  // 16px - 紧凑间距
    margin-bottom: $spacing-4;  // 16px - 紧凑间距

    // 平板及以下：2 列
    @media (max-width: $screen-lg) {
        grid-template-columns: repeat(2, 1fr);
    }

    // 移动端：保持 2 列（不变成 1 列）
    @media (max-width: $screen-md) {
        grid-template-columns: repeat(2, 1fr);
        gap: $spacing-3;  // 12px - 更紧凑
    }
}

.stat-card {
    background: $bg-secondary;
    padding: $spacing-4;  // 16px - 紧凑内边距
    border-radius: $radius-xl;  // 12px
    border: 1px solid $border-light;
    transition: $transition-base;

    &:hover {
        box-shadow: $shadow-md;
        transform: translateY(-$spacing-1);
    }
}

.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: $spacing-2;  // 8px - 紧凑间距
}

.stat-card-icon {
    width: $icon-2xl;  // 40px
    height: $icon-2xl;
    border-radius: $radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;

    &.bg-blue {
        background: $icon-bg-blue;
    }
    &.bg-indigo {
        background: $icon-bg-indigo;
    }
    &.bg-orange {
        background: $icon-bg-amber;
    }
    &.bg-green {
        background: $success-light;
    }

    svg {
        width: 20px;
        height: 20px;

        // 使用 fill 风格 - 移除描边，使用实心填充
        &[fill="none"] {
            fill: currentColor;
            stroke: none;
        }
    }

    .icon-blue { color: $primary-color; }
    .icon-indigo { color: $info-dark; }
    .icon-orange { color: $warning-color; }
    .icon-green { color: $success-color; }
}

.stat-card-trend {
    font-size: $font-xs;  // 8px - 紧凑文字
    font-weight: $font-weight-semibold;
    line-height: $line-height-tight;

    &.text-green { color: $success-color; }
    &.text-blue { color: $info-color; }
    &.text-orange { color: $warning-dark; }
    &.text-gray { color: $text-hint; }
}

.stat-card-label {
    font-size: $font-sm;  // 11px - 紧凑文字
    color: $text-secondary;
    margin-bottom: $spacing-1;  // 4px
    line-height: $line-height-tight;
}

.stat-card-value {
    font-size: $font-2xl;  // 16px - 紧凑数值
    font-weight: $font-weight-bold;
    color: $text-primary;
    margin: 0;
    line-height: $line-height-tight;

    small {
        font-size: $font-sm;  // 11px
        font-weight: $font-weight-normal;
        color: $text-hint;
        margin-left: $spacing-1;
    }
}

// ===== 移动端优化（≤768px）=====
@media (max-width: $screen-md) {
    .stat-card {
        padding: $spacing-3;  // 12px - 更紧凑

        .stat-card-icon {
            width: $icon-xl;  // 36px - 更小图标
            height: $icon-xl;
            border-radius: $radius-md;  // 6px

            svg {
                width: 18px;
                height: 18px;
            }
        }

        .stat-card-trend {
            font-size: $font-xs;  // 8px
        }

        .stat-card-label {
            font-size: $font-xs;  // 8px
        }

        .stat-card-value {
            font-size: $font-xl;  // 15px
        }
    }
}
