/*
- 开发时间：2026-07-03
- 更新时间：2026-07-13（新建任务对话框增加时长快捷按钮样式 .wl-duration-row + .wl-duration-btn）
- 补充说明：需求3 工作流拖拽排序样式（.wl-lane-grip 手柄 + .dragging 拖拽中 + .wl-lane-placeholder 占位符）
- 文件作用：cloudPrompt「工作清单」并发工作流展示页面专属样式（chrome://tracing 风格）
- 实现原理：多页签（日/年/定时）切换——日=时间轴，年=热力图，定时=定时任务管理；
            P0: body touch-action:pan-x pan-y 全局禁用原生缩放（双指缩放由 worklist_touch.js 劫持转发时间轴）；
            可缩放时间轴容器 .wl-trace-container（overflow:hidden + position:relative）；
            顶部刻度尺 .wl-trace-ruler 拆分 spacer+body：PC 端 spacer 隐藏 body 撑满；移动端 spacer 对齐 lane-header、body 对齐 lane-track；
            工作流泳道池 .wl-trace-pool（移动端 touch-action:pan-x 显式声明允许横向滚动，避免层级歧义）；
            任务卡片 .wl-task-card（position:absolute；P0: PC min-width:60px + 移动端 min-height:58px 双向保底；JS renderTaskCard 也计算 minPct 保证像素下限）；
            任务卡片只展示标题+时间不再有编辑按钮区（已删除 .wl-task-actions 死样式）；
            选中态 .wl-task-card.selected 橙色 box-shadow 自适应宽高；完成态 .wl-task-done 文字灰色+划线；未完成=HSL 黄金角鲜艳色；
            需求1：当前时间标记线 .wl-current-time-line 红色 #dc3545 + 发光阴影 + 时间标签气泡，z-index:30 高于任务卡片，显眼标识当前时刻；
            手机端时间轴垂直方向（刻度尺垂直左侧，泳道横向排列可滚动）；移动端适配：form-input font-size:16px 防 iOS Safari 自动缩放；按钮 padding 增大；
            模态对话框自包含（worklist.html 不引入 tasks.css）
- 如何调用：由 worklist.html 通过 <link rel="stylesheet" href="worklist.css"> 引入
- 所属流程：cloudPrompt 工作清单并发工作流管理流程
*/

/* P0: 全局禁用页面原生缩放（双指缩放由 worklist_touch.js 劫持转发时间轴，页面布局始终固定不变） */
body { touch-action: pan-x pan-y; }

/* 页签栏：日/周/月/年/定时（标准 tabs） */
.wl-tabs {
    display: flex;
    gap: 4px;
    background-color: #f0f0f0;
    padding: 4px 8px 0 8px;
}
.wl-tab {
    padding: 8px 18px;
    border: none;
    background-color: transparent;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    border-radius: 6px 6px 0 0;
}
.wl-tab.active {
    color: #1a237e;
    font-weight: bold;
    background-color: #fff;
}
.wl-tab:hover:not(.active) {
    color: #333;
    background-color: #e8e8e8;
}
/* 需求6：【年】页签 hover 时与点击（active）效果一致（白底蓝字粗体） */
.wl-tab[data-tab="year"]:hover:not(.active) {
    color: #1a237e;
    font-weight: bold;
    background-color: #fff;
}

/* 工具栏：日期切换 + 新建按钮 + 统计 + 操作按钮 */
.wl-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    flex-wrap: wrap;
}
.wl-stat {
    font-size: 12px;
    color: #555;
}
/* 日期显示（美术修正：PC 端原为裸文本，等宽+加粗+主色，与刻度尺时间标签风格统一） */
.wl-date-display {
    font: bold 14px 'Menlo', 'Consolas', monospace;
    color: #1a237e;
    white-space: nowrap;
}
.wl-zoom-controls {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.wl-zoom-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #1a237e;
    border-radius: 4px;
    background-color: #fff;
    color: #1a237e;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wl-zoom-btn:hover {
    background-color: #1a237e;
    color: #fff;
}
.wl-zoom-btn:active {
    background-color: #0d1452;
    color: #fff;
}

/* 可缩放时间轴容器（chrome://tracing 风格核心） */
.wl-trace-container {
    position: relative;
    overflow: hidden;
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
    margin: 12px;
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.wl-trace-container:active {
    cursor: grabbing;
}

/* 顶部时间刻度尺 */
.wl-trace-ruler {
    position: relative;
    height: 32px;
    background-color: #1a237e;
    color: #fff;
    border-bottom: 2px solid #0d1452;
    overflow: hidden;
}
/* ruler 拆分 spacer+body：PC 端 spacer 隐藏 body 撑满 ruler；移动端 spacer 对齐 lane-header、body 对齐 lane-track（见 @media） */
.wl-ruler-spacer { display: none; }
.wl-ruler-body { position: relative; width: 100%; height: 100%; }
/* 刻度标记：竖线 + 时间标签 */
.wl-ruler-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    pointer-events: none;
}
.wl-ruler-tick::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}
.wl-ruler-tick span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 4px;
    font-size: 11px;
    white-space: nowrap;
    color: #c5cae9;
    font-family: 'Menlo', 'Consolas', monospace;
}

/* 工作流泳道池 */
.wl-trace-pool {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 空状态提示 */
.wl-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 40px 12px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px dashed #ddd;
}

/* 单条工作流泳道 */
.wl-lane {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}
/* 泳道头部：标题 + 任务数（无删除按钮，双击标题服务端重命名） */
.wl-lane-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
}
.wl-lane-title {
    font-weight: bold;
    color: #1a237e;
    cursor: pointer;
}
.wl-lane-title-input {
    font-weight: bold;
    color: #1a237e;
    border: 1px solid #1a237e;
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 12px;
}
.wl-lane-meta {
    color: #888;
}

/* 需求3：工作流拖拽手柄（PC cursor:grab + 移动端触摸反馈） */
.wl-lane-grip {
    cursor: grab;
    color: #aaa;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;  /* 手柄不参与浏览器滚动，由 worklist_touch.js 处理 drag */
}
.wl-lane-grip:active {
    cursor: grabbing;
    color: #666;
}

/* 需求3：拖拽中的工作流样式（半透明+阴影+置顶） */
.wl-lane.dragging {
    opacity: 0.85;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    background-color: #fffde7;
}

/* 需求3：拖拽占位符（虚线边框，标识目标插入位置） */
.wl-lane-placeholder {
    border: 2px dashed #1a237e;
    background-color: rgba(26, 35, 126, 0.08);
    border-radius: 4px;
    margin: 2px 0;
}

/* 泳道轨道：relative 定位，容纳绝对定位的任务卡片 */
.wl-lane-track {
    position: relative;
    height: 72px;
    background-color: #fcfcfc;
    background-image: linear-gradient(to right, #eee 1px, transparent 1px);
    background-size: 25% 100%;
}

/* 任务卡片（chrome://tracing 风格） */
.wl-task-card {
    position: absolute;
    top: 6px;
    bottom: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 8px;
    border-radius: 4px;
    overflow: hidden;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-width: 60px;
    transition: box-shadow 0.15s, transform 0.15s;
}
.wl-task-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
    z-index: 10;
}
/* 需求3：选中态样式——box-shadow 不影响布局，自适应宽高 */
.wl-task-card.selected {
    box-shadow: 0 0 0 3px #ff6f00, 0 2px 8px rgba(0, 0, 0, 0.35);
    z-index: 20;
}
/* 任务标题 */
.wl-task-title {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
/* 任务时间 */
.wl-task-time {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
    font-family: 'Menlo', 'Consolas', monospace;
}
/* 完成态：文字灰色 + 划线（背景色 #d0d0d0 由 JS inline 控制） */
.wl-task-done .wl-task-title {
    color: #666;
    text-decoration: line-through;
}
.wl-task-done .wl-task-time {
    color: #999;
}

/* 需求1：当前时间标记线——红色显眼标识当前时刻（z-index:30 高于任务卡片 10/20，pointer-events:none 不阻挡交互） */
.wl-current-time-line {
    position: absolute;
    background-color: #dc3545;
    z-index: 30;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(220, 53, 69, 0.8);
}
/* 当前时间标签气泡：红底白字，显眼标识当前 HH:MM */
.wl-current-time-label {
    position: absolute;
    background-color: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    font-family: 'Menlo', 'Consolas', monospace;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
}

/* 表单提示 */
.form-tip { font-size: 11px; color: #f57c00; margin-top: 4px; }

/* 模态对话框（worklist.html 不引入 tasks.css，故在此自包含定义） */
.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.modal-header {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: bold;
    color: #1a237e;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-close { cursor: pointer; font-size: 20px; color: #999; line-height: 1; }
.modal-close:hover { color: #dc3545; }
.modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* 模态对话框底部按钮栏：align-items:center 防止按钮高度拉伸，flex-wrap:wrap 允许窄屏换行 */
.modal-footer {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.form-label {
    font-size: 12px;
    color: #555;
    margin-top: 6px;
}
.form-input, .form-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 13px;
    box-sizing: border-box;
    font-family: inherit;
}
.form-textarea {
    min-height: 80px;
    resize: vertical;
}

/* 编辑对话框：开始/结束时间同一行布局（需求1）
   .wl-time-row 横向排列两个时间字段，窄屏自动换行
   .wl-time-input-wrap 让 input 自适应填满 + 按钮固定宽度紧跟右侧 */
.wl-time-row {
    display: flex;
    gap: 10px;
}
.wl-time-field {
    flex: 1;
    min-width: 0;
}
.wl-time-input-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}
.wl-time-input-wrap .form-input {
    flex: 1;
    min-width: 0;
}
/* 「现在」按钮：小尺寸，蓝色系（btn-read 风格）+ 紧凑 padding */
.wl-now-btn {
    padding: 8px 10px;
    border: 1px solid #1976d2;
    border-radius: 5px;
    background-color: #fff;
    color: #1976d2;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.wl-now-btn:hover {
    background-color: #1976d2;
    color: #fff;
}

/* 新建任务对话框：时长快捷按钮组（30分钟/1小时/1.5小时/2小时/4小时）
   横向排列+自动换行，点击基于开始时间自动计算结束时间
   配色与 .wl-now-btn 一致（蓝系 btn-read 风格），hover 反转填充 */
.wl-duration-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.wl-duration-label {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}
.wl-duration-btn {
    padding: 6px 10px;
    border: 1px solid #1976d2;
    border-radius: 5px;
    background-color: #fff;
    color: #1976d2;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}
.wl-duration-btn:hover {
    background-color: #1976d2;
    color: #fff;
}

/* 编辑对话框：状态单选组（需求2），横向排列，可点击区域放大 */
.wl-radio-group {
    display: flex;
    gap: 16px;
    padding: 4px 0;
}
.wl-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}
.wl-radio-label input[type="radio"] {
    margin: 0;
    cursor: pointer;
}
.btn-cancel {
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    cursor: pointer;
    font-size: 13px;
}
.btn-cancel:hover { background-color: #e0e0e0; }
/* Toast：覆盖 style.css opacity:0，配合 worklist.js display 控制显隐 */
.toast { opacity: 1; display: none; }
/* 响应式适配：手机端样式已拆分到 worklist_mobile.css（@media max-width:768px） */