/*
- 开发时间：2026-07-04
- 更新时间：2026-07-06
- 文件作用：cloudPrompt「工作清单」年度热力图专属样式（GitHub 风格贡献图，仅年视图）
- 实现原理：
  PC 端=GitHub 横向布局：深色背景容器 #0d1117，7行(周一→周日)×N列(周)，
    顶部月份标签(.wl-heatmap-month-row)，左侧M/W/F星期标签(.wl-heatmap-day-labels)，
    底部Less/More图例；
  手机端=竖向布局：7列(周一→周日)×N行(周)，最近周在顶部，整体竖向滚动；
  需求1布局重设计：格子统一16×16px方形（原11px过密，放大提升舒适度），间隙5px（原3px增加呼吸感），
    容器padding 28px 24px（原20px 16px利用更多空白区域）；
  需求3铺满宽度：PC端格子使用 aspect-ratio:1 保持方形，width:100% 填满列宽，每周 flex:1 平均分配宽度，
    整个热力图区域铺满浏览器宽度，格子最小宽度14px保证可读性；
  无任务/未来日期=#ebedf0浅灰；有任务按效率梯度着色；
  需求2交互重设计：hover与点击选中态样式一致（蓝色描边#0366d6+发光效果）；
    hover即显示泡泡，点击保留选中直到点击其他格子或空白；
  图例.wl-heatmap-legend(Less/More+颜色梯度)
- 如何调用：由 worklist.html 通过 <link rel="stylesheet" href="worklist_heatmap.css"> 引入
- 所属流程：cloudPrompt 工作清单热力图统计流程
*/

/* ============================================================
   热力图容器（深色背景，GitHub 风格）
   需求3：减小padding铺满浏览器宽度，margin改为6px充分利用空间
   ============================================================ */
.wl-heatmap-container {
    margin: 6px;
    padding: 28px 8px;
    background-color: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    min-height: 280px;
    overflow: visible;
}
.wl-heatmap-title {
    font-size: 14px;
    font-weight: bold;
    color: #c9d1d9;
    margin-bottom: 16px;
}
.wl-heatmap-grid {
    margin-bottom: 16px;
    min-height: 140px;
}

/* ============================================================
   PC 端 GitHub 横向布局
   需求3：格子铺满宽度+保持方形，aspect-ratio:1，min-width:14px
   ============================================================ */
.wl-heatmap-desktop {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wl-heatmap-month-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.wl-heatmap-corner {
    width: 36px;
    flex-shrink: 0;
}
.wl-heatmap-months {
    flex: 1;
    position: relative;
    font-size: 11px;
    color: #8b949e;
    height: 16px;
}
.wl-heatmap-month {
    position: absolute;
    white-space: nowrap;
}
.wl-heatmap-body {
    display: flex;
    gap: 6px;
}
.wl-heatmap-day-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 36px;
    flex-shrink: 0;
    font-size: 10px;
    color: #8b949e;
    padding: 2.5px 0;
}
.wl-heatmap-day-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    height: 1fr;
}
.wl-heatmap-weeks {
    flex: 1;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 130px;
}
.wl-heatmap-week {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 14px;
}

/* ============================================================
   格子通用样式（需求3：铺满宽度+保持方形，aspect-ratio:1，width:100%，min-width:14px）
   ============================================================ */
.wl-heatmap-cell {
    width: 100%;
    min-width: 14px;
    aspect-ratio: 1;
    border-radius: 2px;
    cursor: pointer;
    transition: box-shadow 0.1s, border-color 0.1s;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}
/* 需求：hover与点击选中态样式一致（蓝色描边+发光） */
.wl-heatmap-cell:hover,
.wl-heatmap-cell.selected {
    box-shadow: 0 0 0 2px #0366d6, 0 0 6px rgba(3, 102, 214, 0.6);
    z-index: 10;
}
.wl-year-cell-empty {
    width: 100%;
    min-width: 14px;
    aspect-ratio: 1;
    border-radius: 2px;
    background-color: #ebedf0;
}
.wl-heatmap-cell-gap {
    width: 100%;
    min-width: 14px;
    aspect-ratio: 1;
}

/* ============================================================
   泡泡（需求2：单击格子弹出并保留显示，不再3秒自动消失）
   ============================================================ */
.wl-heatmap-bubble {
    position: fixed;
    background-color: rgba(33, 33, 33, 0.92);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.8;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 220px;
    pointer-events: none;
}
.wl-heatmap-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(33, 33, 33, 0.92);
    border-bottom: none;
}
.wl-bubble-below::after {
    bottom: auto;
    top: -6px;
    border-top: none;
    border-bottom: 6px solid rgba(33, 33, 33, 0.92);
}
.wl-bubble-date {
    font-weight: bold;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 4px;
}
.wl-bubble-row {
    white-space: nowrap;
}

/* ============================================================
   图例（Less / More，GitHub 风格）
   ============================================================ */
.wl-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #8b949e;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #30363d;
}
.wl-legend-label {
    font-weight: bold;
    color: #c9d1d9;
}
.wl-legend-cell {
    width: 16px;
    aspect-ratio: 1;
    border-radius: 2px;
    display: inline-block;
}
.wl-legend-tip {
    margin-left: 8px;
    color: #6e7681;
}

/* ============================================================
   手机端竖向布局（7列×N行，最近周在顶部）
   需求1：间隙5px与PC端一致，方形格子aspect-ratio:1自适应
   ============================================================ */
.wl-heatmap-mobile {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.wl-heatmap-mobile-header {
    display: flex;
    gap: 6px;
}
.wl-heatmap-mobile-corner {
    width: 36px;
    flex-shrink: 0;
}
.wl-heatmap-mobile-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    flex: 1;
    font-size: 10px;
    color: #8b949e;
}
.wl-heatmap-mobile-day {
    text-align: center;
}
.wl-heatmap-mobile-scroll {
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.wl-heatmap-mobile-week {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wl-heatmap-mobile-month {
    width: 36px;
    flex-shrink: 0;
    font-size: 10px;
    color: #8b949e;
    text-align: right;
}
.wl-heatmap-mobile-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    flex: 1;
}

/* ============================================================
   响应式适配：手机端格子自适应尺寸（填满列宽）
   ============================================================ */
@media (max-width: 768px) {
    .wl-heatmap-container {
        margin: 6px;
        padding: 12px 8px;
    }
    .wl-heatmap-bubble {
        max-width: 180px;
        font-size: 11px;
    }
    .wl-heatmap-mobile-cells .wl-heatmap-cell,
    .wl-heatmap-mobile-cells .wl-year-cell-empty,
    .wl-heatmap-mobile-cells .wl-heatmap-cell-gap {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
}