/* ============================================================
 * 🏷️ 待报事项徽标可点击 + 明细展开（v2.49.1）
 * ------------------------------------------------------------
 * 问题：顶栏执照切换面板里「待报 4 项」是个纯 span，
 *      看到的人第一反应是点它看是哪 4 项，但点了没反应
 *      ——而在单主体下整行是「点击即关闭」，连去处都没有。
 *
 * 独立成文件而不是塞进 design.css 的原因同 filing-fields.css：
 * design.css 是并行会话频繁改动的主样式文件，追加段落会被整段覆盖
 * （已实际发生多次）。依赖 design.css 的设计令牌，
 * 在 index.html 里排在 design.css 之后加载。
 * ============================================================ */

/* ---- 徽标：现在是 button，要给出「可点」的视觉暗示 ---- */
button.cw-st {
  cursor: pointer;
  transition: filter .15s, box-shadow .15s;
  /* 继承 .cw-st 的字号/内边距/配色，这里只补可点特征 */
  font-family: inherit;
  line-height: inherit;
}
button.cw-st:hover {
  filter: brightness(.96);
  /* 加一圈同色描边：颜色本身就提示"这是能点的"，不只靠光标形状 */
  box-shadow: 0 0 0 1px currentColor inset;
}
button.cw-st:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
/* 已点开时压暗，表示"当前是展开状态，再点收起" */
button.cw-st.cw-open {
  filter: brightness(.94);
  box-shadow: 0 0 0 1px currentColor inset;
}

/* ---- 展开的待报明细 ---- */
.cw-sub {
  margin: 2px 0 8px 10px;
  padding: 6px;
  border-left: 2px solid var(--line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--panel-2, #fafbfc);
}

.cw-sub-hd {
  font-size: 11px;
  color: var(--txt-3, #8b93a1);
  padding: 2px 6px 6px;
  font-weight: 600;
}

.cw-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm, 6px);
  background: var(--panel, #fff);
  border: 1px solid var(--line-2, #e8eaef);
  margin-bottom: 4px;
}
.cw-sub-item:last-child { margin-bottom: 0; }
/* 逾期项左侧红条：扫一眼就知道哪几条最急 */
.cw-sub-item.od { border-left: 3px solid #e5484d; }
.cw-sub-item.nr { border-left: 3px solid #e0a215; }

.cw-sub-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.cw-sub-n {
  font-size: 12px;
  color: var(--txt, #1c2430);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-sub-d {
  font-size: 10.5px;
  color: var(--txt-3, #8b93a1);
  font-variant-numeric: tabular-nums;
}
/* 逾期/临期的文字跟着变色，与左侧色条呼应 */
.cw-sub-item.od .cw-sub-d { color: #b3261e; }
.cw-sub-item.nr .cw-sub-d { color: #8a5b00; }

.cw-sub-go {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: var(--panel-2, #f2f4f7);
  border: 1px solid var(--line-2, #e8eaef);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cw-sub-go:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.cw-sub-empty {
  font-size: 12px;
  color: #1d7a46;
  padding: 8px 6px;
}

/* ---- 跳转定位高亮：日历里对应那一行 ---- */
/* 从「待报明细」点「去办理」跳过来时高亮 2.6 秒后自动淡出。
   用左侧竖条 + 背景色而不是只改边框色：border-color 在 .filerow 上
   容易被其它状态样式覆盖，而 background + box-shadow 不参与那套状态色。 */
.calendar .filerow.cal-flash,
.filerow.cal-flash {
  background: #fff8e6;
  box-shadow: inset 3px 0 0 #e0a215;
  border-radius: var(--r-sm, 6px);
  animation: ff-flash-in .28s ease-out;
}
/* 逾期的那一条用红色竖条，和明细里的配色规则保持一致 */
.filerow.cal-flash.past {
  background: #fdf0f0;
  box-shadow: inset 3px 0 0 #e5484d;
}
@keyframes ff-flash-in {
  from { background: #ffe9b8; }
  to   { background: #fff8e6; }
}

/* 高亮期间不要有 hover 效果抢视觉（2.6 秒内保持稳定） */
.filerow.cal-flash:hover { background: #fff8e6; }
.filerow.cal-flash.past:hover { background: #fdf0f0; }

/* ---- 窄屏：明细项堆叠，别把「去办理」挤掉 ---- */
@media (max-width: 560px) {
  .cw-sub-item { flex-wrap: wrap; }
  .cw-sub-go { margin-left: auto; }
}

/* ---- 打印：顶栏交互件不打印 ---- */
@media print {
  .cw-sub { display: none !important; }
}