/* 节假日表、任务模板、燃尽线。颜色都用变量，不写死。 */

/* ---------- 节假日表 ---------- */
.holiday-years { padding: 0 2px 8px; }
.section-title .section-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.holiday-row { display: grid; grid-template-columns: auto 104px minmax(0, 1fr) auto; gap: 10px; }
.holiday-dates { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.holiday-dates .input.inline-date { width: 128px; text-align: left; font-variant-numeric: tabular-nums; }
/* 一页几十个日期框，日历图标平时淡一点，鼠标放上去再显出来 */
.holiday-dates .input.inline-date::-webkit-calendar-picker-indicator { opacity: .3; }
.holiday-dates .input.inline-date:hover::-webkit-calendar-picker-indicator, .holiday-dates .input.inline-date:focus::-webkit-calendar-picker-indicator { opacity: .8; }
.holiday-name { width: 100%; min-width: 0; }
.holiday-row .select.form { width: 100%; }
.holiday-add .btn.small { justify-self: end; }
.holiday-paste { width: 100%; font-variant-numeric: tabular-nums; }
.holiday-problems { color: var(--red); }

/* ---------- 任务模板 ---------- */
.template-row { align-items: center; }
.template-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.template-main .type-name { width: 100%; min-height: 26px; }
.template-main .type-name:disabled { color: var(--label); opacity: 1; }
.template-meta { padding-left: 4px; overflow-wrap: anywhere; }

/* ---------- 燃尽线 ---------- */
.burn-summary { font-size: 13px; color: var(--label-2); padding-bottom: 8px; }
.burn-summary.alert { color: var(--red); }
.burn-chart svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* 理想线只是参照：灰色、虚线，有图例。用 label-2：深色下 label-3 和蓝线太接近（校验过，正常视力 ΔE 不到 15） */
.chart .series.burn-ideal { stroke: var(--label-2); stroke-dasharray: 5 4; }
.chart .dot.burn-ideal { fill: var(--label-2); }
.line-key.burn-ideal { background: repeating-linear-gradient(90deg, var(--label-2) 0 4px, transparent 4px 7px); }

@media (max-width: 720px) {
  /* 手机上一段占两行：日期一行，放假还是上班、名称、“…”一行 */
  .holiday-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
  .holiday-dates { grid-column: 1 / -1; }
  .holiday-dates .input.inline-date { flex: 1; width: auto; min-width: 0; }
  .holiday-row .select.form { width: auto; }
  .vd-actions { flex-wrap: wrap; }
}