/* ==========================================================================
   任务日历：案件节点 + 个人待办
   左侧月历、右侧当日详情；窄屏由 mobile.css 折成上下单列。
   配色全部走设计令牌，跟随站点装修主题。
   ========================================================================== */

/* align-items 用默认的 stretch：右侧「当日清单」要跟左侧月历卡片等高，
   底边才对得齐。用 start 时右侧只按自身内容撑高，当天条目少就会明显矮一截。 */
.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:16px;align-items:stretch}

/* 条目配色集中定义：格子里的色条、底部图例、右侧清单的左侧竖线共用同一套，
   避免出现「图例和格子对不上」这类只有细看才发现的问题。 */
.cal-main,.cal-side{
  --c-overdue:var(--danger);
  --c-critical:var(--warn);
  --c-warning:var(--gold);
  --c-normal:var(--info);
  --c-task:var(--brand);
  --c-ctask:#7C5CF0;
  --c-done:var(--ok);
  --c-muted:var(--ink-300);
}

/* ------------------------------ 月历 ------------------------------ */
.cal-main{padding:0;overflow:hidden}

/* 顶部工具条：月份 + 翻页。
   这里必须用「看得见」的品牌色 —— brand-50 已经淡到接近白，
   整块仍然是一片白，起不到给日历立「头」的作用。 */
.cal-bar{
  display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--brand-100);
  background:linear-gradient(135deg,var(--brand-100),var(--brand-50) 68%);
}
.cal-title{font-size:var(--t-18);font-weight:700;letter-spacing:-.015em;color:var(--ink-900)}
.cal-nav{
  display:flex;align-items:center;gap:2px;padding:3px;
  border:1px solid var(--brand-200);border-radius:var(--r-full);background:#fff;
}
.cal-nav .btn{height:28px;border:none;background:transparent;box-shadow:none}
.cal-nav .btn:hover{background:var(--ink-100)}
/* 同一个 chevron 图标，上一月靠整体旋转 180° 复用 */
.cal-prev svg{transform:rotate(180deg)}

/* 星期表头：与顶栏同一色系、浅一档，两行连成一片「日历的头」 */
.cal-week{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;
  padding:12px 16px 9px;
  border-bottom:1px solid var(--brand-100);
  background:var(--brand-50);
}
.cal-week span{
  text-align:center;font-size:var(--t-11);font-weight:700;
  color:var(--brand-700);letter-spacing:.08em;
}

.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:12px 16px 14px}

.cal-cell{
  position:relative;display:flex;flex-direction:column;gap:6px;
  min-height:76px;padding:7px 8px 8px;
  border:1px solid transparent;border-radius:10px;background:var(--ink-50);
  font:inherit;text-align:left;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);
}
/* 有内容的格子给白底 + 描边。
   原来空白格用 ink-25(#FCFDFE)、有内容用 #fff，两者差不到看不出来，
   整片网格就糊成一块白 —— 这里把空白格压到 ink-50，白卡才浮得起来。 */
.cal-cell.has-ev{background:#fff;border-color:var(--ink-150)}
/* 含逾期节点：只做很淡的红色倾向，主要靠条目色条与数字底圈去醒目，
   整格刷成粉色会让一个月里好几格都变红，反而看不出重点 */
.cal-cell.danger{background:#fffafa;border-color:#F7D9DB}
.cal-cell:hover{background:var(--brand-50);border-color:var(--brand-200)}
/* 上/下月的补位格 */
.cal-cell.out{opacity:.34}
/* 选中态放最后：同权重下后写者胜，保证它压过 has-ev / danger / hover */
.cal-cell.on{
  border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 2px var(--brand-100),var(--sh-xs);
}

.cd-row{display:flex;align-items:center;gap:6px}
.cal-d{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:8px;
  font-size:var(--t-13);font-weight:600;color:var(--ink-700);
}
/* 今天：数字换成实心圆底，格子再铺一层极浅品牌底，双重提示才够醒目 */
.cal-cell.today{background:var(--brand-50)}
.cal-cell.today .cal-d{background:var(--brand);color:#fff;font-weight:700}
/* 超出 3 条的收纳角标 */
.cal-more{
  margin-left:auto;padding:1px 6px;border-radius:var(--r-full);
  background:var(--ink-100);color:var(--ink-500);
  font-size:10px;font-weight:600;line-height:1.5;
}

/* 格内条目行：色条 + 标题。桌面读得出「今天要干什么」，
   窄屏由 mobile.css 把标题隐掉、色条拉通，退化成强度条 */
.cal-evs{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0}
.ev{display:flex;align-items:center;gap:6px;min-width:0}
.ev i{flex:none;width:7px;height:7px;border-radius:2.5px;background:var(--c-muted)}
.ev em{
  flex:1;min-width:0;font-style:normal;font-size:11px;line-height:1.5;
  color:var(--ink-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 期限节点由法院给定、不可协商，文字压深一档以示区别 */
.ev.dl em{font-weight:500;color:var(--ink-700)}
.ev.dl.overdue i{background:var(--c-overdue)}
.ev.dl.critical i{background:var(--c-critical)}
.ev.dl.warning i{background:var(--c-warning)}
.ev.dl.normal i{background:var(--c-normal)}
/* 案件阶段任务用紫色，与「法院定的节点」区分开 */
.ev.ct.overdue i{background:var(--c-overdue)}
.ev.ct.critical i{background:var(--c-critical)}
.ev.ct.warning i{background:var(--c-warning)}
.ev.ct.normal i{background:var(--c-ctask)}
.ev.tk.high i{background:var(--c-overdue)}
.ev.tk.normal i{background:var(--c-task)}
.ev.tk.low i{background:var(--c-muted)}
.ev.done i{background:var(--c-done)}
.ev.done em{color:var(--ink-400);text-decoration:line-through}

.cal-legend{
  display:flex;flex-wrap:wrap;gap:9px 18px;padding:12px 18px;
  border-top:1px solid var(--ink-150);background:var(--ink-50);
}
.cal-legend span{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-11);color:var(--ink-500)}
.lg-d{width:8px;height:8px;border-radius:3px;background:var(--c-muted)}
.lg-d.dl-overdue{background:var(--c-overdue)}
.lg-d.dl-normal{background:var(--c-normal)}
.lg-d.ct{background:var(--c-ctask)}
.lg-d.tk{background:var(--c-task)}
.lg-d.done{background:var(--c-done)}

/* ------------------------------ 当日详情 ------------------------------ */
.cal-side{padding:0;overflow:hidden;display:flex;flex-direction:column}
.cal-sidehead{
  display:flex;align-items:center;gap:9px;padding:15px 16px;
  border-bottom:1px solid var(--brand-100);
  background:linear-gradient(135deg,var(--brand-100),var(--brand-50) 68%);
}
.cal-sidehead b{font-size:var(--t-17);font-weight:700;letter-spacing:-.015em}
.cal-sidehead .wd{font-size:var(--t-12);color:var(--ink-400)}
.cal-side .empty{padding:34px 16px;margin:auto}

.cal-sec{padding:13px 14px 5px}
.cal-sec-t{
  display:flex;align-items:center;gap:7px;padding:0 2px 9px;
  font-size:var(--t-11);font-weight:700;letter-spacing:.05em;color:var(--ink-400);
}
.cal-sec-t span{
  padding:1px 7px;border-radius:var(--r-full);
  background:var(--ink-100);font-size:10px;font-weight:600;color:var(--ink-500);
}

/* 条目卡：左侧一道竖线标识类型，扫一眼就能分出「法院节点 / 阶段任务 / 我的待办」 */
.cal-item{
  position:relative;display:flex;align-items:flex-start;gap:9px;
  margin-bottom:8px;padding:10px 11px 10px 13px;
  border:1px solid var(--ink-150);border-radius:var(--r-sm);background:#fff;
  transition:.15s var(--ease);
}
.cal-item::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--c-task);
}
.cal-item:hover{border-color:var(--brand-200);box-shadow:var(--sh-xs)}
.cal-item.is-dl{cursor:pointer;background:var(--ink-25)}
.cal-item.is-dl::before{background:var(--c-normal)}
.cal-item.is-ct{cursor:pointer;background:rgba(124,92,240,.05)}
.cal-item.is-ct::before{background:var(--c-ctask)}
.cal-item.is-done{opacity:.55}
.cal-item.is-done::before{background:var(--c-done)}
.cal-item.is-done .cal-tx b{text-decoration:line-through}

.cal-chk{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-top:1px;padding:0;
  border:1.5px solid var(--ink-300);border-radius:6px;background:#fff;
  color:#fff;cursor:pointer;transition:.15s var(--ease);
}
.cal-chk:hover{border-color:var(--brand)}
.cal-item.is-done .cal-chk{background:var(--ok);border-color:var(--ok)}

.cal-tx{flex:1;min-width:0}
.cal-tx b{display:block;font-size:var(--t-13);line-height:1.5;word-break:break-word}
.cal-meta{display:block;margin-top:3px;font-size:var(--t-11);color:var(--ink-500);line-height:1.6}

/* 触屏没有 hover，操作按钮常态半透明而非隐藏，否则手机上点不到 */
.cal-acts{flex:none;display:flex;gap:2px;opacity:.45;transition:opacity .15s var(--ease)}
.cal-item:hover .cal-acts{opacity:1}

.cal-dot{flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;background:var(--c-normal)}
.cal-dot.overdue{background:var(--c-overdue)}
.cal-dot.critical{background:var(--c-critical)}
.cal-dot.warning{background:var(--c-warning)}