/* =================================================================
 * 可视化配置公共样式（vis-* 命名空间）
 * 位置：static/css/visualization.css
 * 用途：4 个可视化页面（progress_view / progress_comparison / comparison / progress_dashboard）的共用样式
 * 设计：所有 class 用 .vis- 前缀，避免与现有 .stat-pill / .visual-stat 等冲突
 * 引用：在 base.html 或单独页面用 <link rel="stylesheet" href="{{ url_for('static', filename='css/visualization.css') }}">
 * ================================================================= */

/* ---------- 1. CSS 变量（统一色板/字号/圆角） ---------- */
:root {
    --vis-primary: #3370ff;
    --vis-success: #0d6832;
    --vis-warning: #e67700;
    --vis-danger: #dc3545;
    --vis-secondary: #6c757d;
    --vis-muted: #e9ecef;

    --vis-radius-sm: 4px;
    --vis-radius-md: 8px;
    --vis-radius-lg: 12px;

    --vis-font-size-sm: 0.75rem;
    --vis-font-size-md: 0.875rem;
    --vis-font-size-lg: 1rem;

    --vis-spacing-xs: 4px;
    --vis-spacing-sm: 8px;
    --vis-spacing-md: 12px;
    --vis-spacing-lg: 16px;
}

/* ---------- 2. 统计色块 vis-stat-pill ---------- */
/* 大白话：顶部"已完成 X / 进行中 Y / 未开始 Z"色块的统一样式 */
.vis-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--vis-spacing-sm);
    padding: var(--vis-spacing-sm) var(--vis-spacing-md);
    border-radius: var(--vis-radius-md);
    background: var(--vis-muted);
    color: #212529;
    font-size: var(--vis-font-size-md);
    line-height: 1.2;
    transition: all 0.2s ease;
}

.vis-stat-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.vis-stat-pill__icon {
    font-size: var(--vis-font-size-lg);
}

.vis-stat-pill__label {
    color: var(--vis-secondary);
}

.vis-stat-pill__value {
    font-size: var(--vis-font-size-lg);
    font-weight: 600;
}

/* 颜色变体（修饰符） */
.vis-stat-pill--primary {
    background: rgba(51, 112, 255, 0.1);
    color: var(--vis-primary);
}
.vis-stat-pill--primary .vis-stat-pill__value { color: var(--vis-primary); }

.vis-stat-pill--success {
    background: rgba(13, 104, 50, 0.1);
    color: var(--vis-success);
}
.vis-stat-pill--success .vis-stat-pill__value { color: var(--vis-success); }

.vis-stat-pill--warning {
    background: rgba(230, 119, 0, 0.1);
    color: var(--vis-warning);
}
.vis-stat-pill--warning .vis-stat-pill__value { color: var(--vis-warning); }

.vis-stat-pill--danger {
    background: rgba(220, 53, 69, 0.1);
    color: var(--vis-danger);
}
.vis-stat-pill--danger .vis-stat-pill__value { color: var(--vis-danger); }

.vis-stat-pill--secondary {
    background: var(--vis-muted);
    color: var(--vis-secondary);
}

/* ---------- 3. 筛选栏 vis-filter-bar ---------- */
/* 大白话：4 个页面顶部的"项目/楼栋/类别"筛选条，统一外观 */
.vis-filter-bar {
    border: 1px solid #e9ecef;
    border-radius: var(--vis-radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vis-filter-bar__select {
    font-size: var(--vis-font-size-md);
}

.vis-filter-bar__submit {
    width: 100%;
}

/* ---------- 4. 热力图单元格 vis-heatmap__cell ---------- */
/* 大白话：楼栋×工序×楼层矩阵的格子，按状态着色 */
.vis-heatmap__cell {
    text-align: center;
    padding: var(--vis-spacing-xs) var(--vis-spacing-sm);
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-size: var(--vis-font-size-sm);
    cursor: default;
    transition: opacity 0.15s ease;
}

.vis-heatmap__cell:hover {
    opacity: 0.85;
}

.vis-heatmap__cell-text {
    font-weight: 500;
}

/* 状态修饰符 */
.vis-heatmap__cell--completed {
    background: var(--vis-success);
    color: #fff;
}

.vis-heatmap__cell--in-progress {
    background: var(--vis-warning);
    color: #fff;
}

.vis-heatmap__cell--not-started {
    background: var(--vis-muted);
    color: var(--vis-secondary);
}

.vis-heatmap__cell--unqualified {
    background: var(--vis-danger);
    color: #fff;
}

.vis-heatmap__cell--unknown {
    background: #f8f9fa;
    color: #adb5bd;
}

/* ---------- 5. 看板/映射配置 Tab 切换条 ---------- */
/* 大白话：所有可视化页面顶部的统一切换 Tab 样式 */
.vis-dashboard-tabs,
.vis-mapping-tabs {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 4px;
    flex-wrap: wrap;
    gap: 4px;
}

.vis-dashboard-tabs__link,
.vis-mapping-tabs__link {
    font-size: var(--vis-font-size-md);
    padding: 6px 14px !important;
    color: var(--vis-secondary);
    border-radius: var(--vis-radius-sm) !important;
    transition: all 0.15s ease;
}

.vis-dashboard-tabs__link:hover,
.vis-mapping-tabs__link:hover {
    background: rgba(51, 112, 255, 0.06);
    color: var(--vis-primary);
}

.vis-dashboard-tabs__link.active,
.vis-mapping-tabs__link.active {
    background: var(--vis-primary) !important;
    color: #fff !important;
}

.vis-dashboard-tabs__link i,
.vis-mapping-tabs__link i {
    margin-right: 4px;
}