/* 年度重点工作展板：展板页与统一登录入口共用。类名一律 bd- 前缀，避免与宿主页冲突。 */
.bd {
  --bd-ink: #1f2430; --bd-ink2: #4a5163; --bd-muted: #7a8295; --bd-line: #e3e7ee;
  --bd-track: #edf0f5; --bd-surface: #fff; --bd-soft: #f6f8fb; --bd-brand: #3b6fd8;
  --bd-ok: #0ca30c; --bd-good: #3b6fd8; --bd-warn: #fab219; --bd-bad: #d03b3b; --bd-idle: #b7bdc9;
  color: var(--bd-ink); font: 14px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei",
        "Noto Sans CJK SC", sans-serif;
}
.bd * { box-sizing: border-box; }
.bd-panel { background: var(--bd-surface); border-radius: 14px; padding: 24px; }
.bd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 18px; }
.bd-head h2 { font-size: 20px; margin: 0; }
.bd-meta { color: var(--bd-muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bd-meta b { color: var(--bd-ink2); font-weight: 600; }
.bd-head select { margin-left: auto; font: inherit; padding: 3px 8px; border: 1px solid var(--bd-line);
                  border-radius: 6px; background: #fff; color: var(--bd-ink); }
.bd-sec { margin-top: 26px; }
.bd-sec > h3 { font-size: 16px; margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.bd-sec > h3 small { font-size: 12px; font-weight: 400; color: var(--bd-muted); }

/* 公司整体：大数字卡 */
.bd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.bd-tile { background: var(--bd-soft); border-radius: 10px; padding: 16px 18px; }
.bd-tile .lbl { color: var(--bd-ink2); font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.bd-tile .big { font-size: 28px; font-weight: 700; letter-spacing: .3px; margin: 4px 0 2px;
                font-variant-numeric: tabular-nums; }
.bd-tile .big small { font-size: 13px; font-weight: 400; color: var(--bd-muted); margin-left: 4px; }
.bd-tile .sub { color: var(--bd-muted); font-size: 12px; }

/* 进度条：填充 = 完成率，竖线 = 时间进度 */
.bd-bar { position: relative; height: 8px; background: var(--bd-track); border-radius: 4px; margin: 8px 0 4px; }
.bd-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--bd-idle); }
.bd-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
             background: var(--bd-ink); border-radius: 1px; }
.bd-bar.sm { height: 6px; margin: 5px 0 2px; }
.bd-f-ok { background: var(--bd-ok) !important; } .bd-f-good { background: var(--bd-good) !important; }
.bd-f-warn { background: var(--bd-warn) !important; } .bd-f-bad { background: var(--bd-bad) !important; }
.bd-f-idle { background: var(--bd-idle) !important; }

/* 状态标签：色点 + 文字，颜色不单独表意 */
.bd-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--bd-ink2);
           white-space: nowrap; }
.bd-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bd-idle); }
.bd-chip.ok::before { background: var(--bd-ok); } .bd-chip.good::before { background: var(--bd-good); }
.bd-chip.warn::before { background: var(--bd-warn); } .bd-chip.bad::before { background: var(--bd-bad); }
.bd-chip.bad { color: #a52a2a; font-weight: 600; }

/* 柱状图：细网格、轴文字用中性墨色，颜色只给数据标记 */
.bd-clegend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--bd-ink2); margin-bottom: 6px; }
.bd-clegend span { display: inline-flex; align-items: center; gap: 6px; }
.bd-clegend i { width: 10px; height: 10px; border-radius: 2px; }
.bd-clegend .ref { color: var(--bd-muted); }
.bd-clegend .ref em { width: 16px; height: 0; border-top: 1.5px solid var(--bd-ink2); }
.bd-clegend .ref em.tp { border-top: 1.5px dashed var(--bd-bad); }
.bd-clegend .ref b { font-weight: 400; color: var(--bd-ink2); }
.bd-chart { position: relative; width: 100%; min-height: 120px; }
.bd-chart svg { display: block; overflow: visible; }
.bd-grid { stroke: #eef1f5; stroke-width: 1; }
.bd-base { stroke: #b7bdc9; stroke-width: 1; }
.bd-axis { font-size: 11px; fill: var(--bd-muted); font-variant-numeric: tabular-nums; }
.bd-cat { font-size: 12px; fill: var(--bd-ink); font-weight: 600; }
.bd-val { font-size: 10px; fill: var(--bd-ink2); font-variant-numeric: tabular-nums; }
.bd-ref100 { stroke: var(--bd-ink2); stroke-width: 1.2; }
.bd-reftp { stroke: var(--bd-bad); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bd-reflbl { font-size: 11px; fill: var(--bd-muted); }
.bd-mk { transition: opacity .1s; }
.bd-chart svg:has(.bd-mk.on) .bd-mk:not(.on) { opacity: .35; }
.bd-mk.on { stroke: var(--bd-ink); stroke-width: 1.5; }
.bd-hit { fill: transparent; cursor: default; outline: none; }
.bd-hit:focus-visible { stroke: var(--bd-brand); stroke-width: 2; }
.bd-tip { position: absolute; z-index: 5; pointer-events: none; max-width: 260px; background: #fff;
          border: 1px solid var(--bd-line); border-radius: 8px; box-shadow: 0 4px 16px rgba(20, 30, 50, .14);
          padding: 8px 10px; font-size: 12px; line-height: 1.6; color: var(--bd-ink2); }
.bd-tip b { display: block; color: var(--bd-ink); font-size: 13px; margin-bottom: 2px; }
.bd-empty-msg { font-size: 13px; fill: var(--bd-muted); }
.bd-cnote { font-size: 12px; margin: 6px 0 0; }

/* 模块标题右侧「柱状图 / 明细表」切换；每个模块（.bd-mod）各自切换 */
.bd-seg { margin-left: auto; flex: none; display: inline-flex; border: 1px solid var(--bd-line); border-radius: 7px; overflow: hidden; }
.bd-seg button { white-space: nowrap; font: inherit; font-size: 12px; font-weight: 400; padding: 3px 12px; border: 0;
                 background: #fff; color: var(--bd-ink2); cursor: pointer; }
.bd-seg button + button { border-left: 1px solid var(--bd-line); }
.bd-seg button[aria-pressed="true"] { background: var(--bd-brand); color: #fff; }
.bd-seg button:focus-visible { outline: 2px solid var(--bd-brand); outline-offset: -2px; }
.bd-mod[data-view="chart"] .bd-view-table, .bd-mod[data-view="table"] .bd-view-chart,
.bd-mod:not([data-view]) .bd-view-table { display: none; }

/* 人效指标 */
.bd-ptitle { font-size: 13px; font-weight: 600; fill: var(--bd-ink); }
.bd-rowlbl { font-size: 12px; fill: var(--bd-ink); }
.bd-band { fill: #f6f8fb; }
.bd-hrt td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-hrsub { font-size: 11px; color: var(--bd-muted); margin-top: 2px; white-space: normal; }
.bd-matrix td.bd-hrmsg { white-space: normal; }
.bd-note a { color: var(--bd-brand); }

/* 经营性指标矩阵（明细表） */
.bd-scroll { overflow-x: auto; }
/* 经营性指标：按展板区域的实际宽度（而不是窗口宽度）切换，放不下六列时每个单元一张卡片、
   指标两列排开，保证任何宽度下都完整显示、不横向滚动 */
.bd-scroll { container-type: inline-size; }
@container (max-width: 700px) {
  .bd-matrix { min-width: 0; }
  .bd-matrix thead { display: none; }
  .bd-matrix, .bd-matrix tbody { display: block; }
  .bd-matrix tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; padding: 12px 0;
                  border-bottom: 1px solid var(--bd-line); }
  .bd-matrix tbody th, .bd-matrix td { display: block; padding: 0; border: 0; }
  .bd-matrix tbody th { grid-column: 1 / -1; }
  .bd-matrix tbody th small { display: inline; margin-left: 6px; }
  .bd-matrix td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--bd-muted); }
  .bd-matrix td.bd-empty { display: none; }
  .bd-matrix td.bd-hrmsg { grid-column: 1 / -1; }
}

.bd-matrix { width: 100%; border-collapse: collapse; }
.bd-matrix th, .bd-matrix td { padding: 10px 12px; border-bottom: 1px solid var(--bd-line); text-align: left;
                               vertical-align: top; }
.bd-matrix thead th { font-size: 12px; font-weight: 600; color: var(--bd-muted); background: var(--bd-soft); }
.bd-matrix tbody th { font-weight: 600; white-space: nowrap; }
.bd-matrix tbody th small { display: block; font-weight: 400; font-size: 12px; color: var(--bd-muted); }
.bd-cell { min-width: 0; }
.bd-cell .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-cell .v b { font-weight: 600; }
.bd-cell .v span { color: var(--bd-muted); font-size: 12px; }
.bd-cell .v .txt { font-style: normal; white-space: normal; }   /* 只有文字型目标（如「合同产品边际贡献>30%」）允许换行 */
.bd-cell .t { color: var(--bd-muted); font-size: 12px; }
.bd-cell .row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 6px; }
.bd-empty { color: var(--bd-idle); }

/* 事务性工作：整块默认折叠 */
.bd-fold > summary { list-style: none; cursor: pointer; border-radius: 8px; }
.bd-fold > summary::-webkit-details-marker { display: none; }
.bd-fold > summary:focus-visible { outline: 2px solid var(--bd-brand); outline-offset: 4px; }
.bd-fold > summary h3 { font-size: 16px; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
.bd-fold > summary h3 small { font-size: 12px; font-weight: 400; color: var(--bd-muted); }
.bd-toggle { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--bd-brand); white-space: nowrap; }
.bd-toggle::after { content: "展开各部门 ▾"; }
.bd-fold[open] .bd-toggle::after { content: "收起 ▴"; }
.bd-fold > summary:hover .bd-toggle { text-decoration: underline; }

/* 事务性工作 */
.bd-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 8px; }
.bd-stack { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--bd-track); }
.bd-stack i { display: block; height: 100%; }
.bd-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
.bd-unit { border: 1px solid var(--bd-line); border-radius: 10px; background: var(--bd-surface); }
.bd-unit > summary { list-style: none; cursor: pointer; padding: 14px 16px; }
.bd-unit > summary::-webkit-details-marker { display: none; }
.bd-unit > summary:focus-visible { outline: 2px solid var(--bd-brand); outline-offset: 2px; border-radius: 10px; }
.bd-unit .nm { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.bd-unit .nm .pre { display: block; margin-top: -2px; }
.bd-unit .nm small { font-weight: 400; color: var(--bd-muted); font-size: 12px; white-space: nowrap; }
.bd-unit .ct { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; }
.bd-unit[open] { grid-column: 1 / -1; }
.bd-unit[open] > summary { border-bottom: 1px solid var(--bd-line); }
.bd-domain { grid-column: 1 / -1; font-size: 13px; color: var(--bd-muted); margin: 6px 0 -4px; }
.bd-tasks { list-style: none; margin: 0; padding: 4px 16px 10px; }
.bd-tasks li { display: grid; grid-template-columns: 28px 1fr 150px; gap: 4px 12px; padding: 10px 0;
               border-bottom: 1px dashed var(--bd-line); }
.bd-tasks li:last-child { border-bottom: 0; }
.bd-tasks .no { color: var(--bd-muted); font-variant-numeric: tabular-nums; }
.bd-tasks .who { color: var(--bd-muted); font-size: 12px; }
.bd-tasks .pg { font-size: 13px; color: var(--bd-ink2); background: var(--bd-soft); border-radius: 6px;
                padding: 4px 8px; margin-top: 4px; }
.bd-tasks .st { font-size: 12px; color: var(--bd-muted); text-align: right; }
.bd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--bd-muted); margin-top: 16px; }
.bd-legend .tick { display: inline-block; width: 2px; height: 12px; background: var(--bd-ink); vertical-align: -2px; margin-right: 4px; }
.bd-note { color: var(--bd-muted); font-size: 13px; }

@media (max-width: 1100px) {
  .bd-matrix th, .bd-matrix td { padding: 10px 8px; }
}
@media (max-width: 640px) {
  .bd-panel { padding: 16px; border-radius: 12px; }
  .bd-head select { margin-left: 0; }
  .bd-tasks li { grid-template-columns: 24px 1fr; }
  .bd-tasks .st { grid-column: 2; text-align: left; }
}