/* Orbit.performance-sheet — 月度绩效评分表的版式样式（员工信息块 / 考评人摘要 / 分节考核点卡 / 最终结果块）。
   与 apps/web/modules/hr/performance/styles.css 的同一段规则同源：两个页面共用这一份，
   主站看板「我的绩效考核」与 HR 模块的评分表才会长得一模一样。改样式只改这个文件。 */
.performance-template-preview { margin: 14px 16px 16px; padding: 16px; border: 1px solid #fecaca; border-radius: 12px; background: #fffafa; }
.performance-template-preview h4 { margin: 0 0 6px; color: #991b1b; }
.performance-template-preview > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.performance-template-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff; }
.performance-template-meta div { padding: 8px 10px; border-right: 1px solid var(--line); font-size: 12px; }
.performance-template-meta div:last-child { border-right: 0; }
.performance-template-meta strong { display: block; color: var(--ink); }
.performance-template-table { width: 100%; margin-top: 12px; border-collapse: collapse; background: #fff; font-size: 12px; }
.performance-template-table th, .performance-template-table td { padding: 8px; border: 1px solid var(--line); vertical-align: top; text-align: left; line-height: 1.5; }
.performance-template-table .template-section td { background: #4b5563; color: #fff; font-weight: 700; }
.performance-template-table .template-score { text-align: center; white-space: nowrap; font-weight: 700; }
.performance-template-rule { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #fff1f2; color: #9f1239; font-size: 13px; line-height: 1.6; }
.performance-template-score-sheet { margin: 0 16px 16px; }
.performance-template-library-controls { display: grid; grid-template-columns: minmax(220px, 320px) minmax(280px, 380px) minmax(0, 1fr); gap: 12px; align-items: end; margin: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.performance-template-library-controls label { display: grid; gap: 6px; color: #475467; font-size: 13px; font-weight: 700; }
.performance-template-library-controls select { min-height: 38px; font: inherit; }
.performance-template-profile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: #475467; font-size: 13px; }
.performance-template-profile strong { color: var(--ink); }
.performance-template-profile small { flex-basis: 100%; color: var(--muted); line-height: 1.5; }
.performance-template-score-sheet h4 { margin: 0; color: #991b1b; }
.performance-template-score-sheet .template-score-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px 0; }
.performance-template-score-sheet select, .performance-template-score-sheet textarea, .my-perf-sheet select, .my-perf-sheet textarea { width: 100%; min-width: 92px; font: inherit; }
.performance-template-score-sheet textarea, .my-perf-sheet textarea { min-height: 58px; resize: vertical; }
.performance-template-score-sheet .template-final { text-align: center; font-weight: 700; color: #991b1b; }
.performance-template-score-sheet .template-total, .template-total { display: flex; justify-content: flex-end; gap: 8px; align-items: baseline; margin: 12px 0; font-size: 14px; }
.performance-template-score-sheet .template-total strong, .my-perf-sheet .template-total strong { color: #991b1b; font-size: 24px; }
.template-score-block { margin-top: 16px; }
.template-score-block h5 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 9px 12px; border-radius: 8px 8px 0 0; background: linear-gradient(135deg, #d5000d, #b42318); color: #fff; font-size: 14px; }
.performance-section-title { min-width: 0; flex: 1 1 auto; }
.performance-section-header-actions, .template-criterion-actions { display: inline-flex; align-items: center; gap: 6px; }
.performance-section-fold { display: grid; width: 30px; min-width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: rgba(255,255,255,.82); box-shadow: none; }
.performance-section-fold:hover, .performance-section-fold:focus-visible { border-color: transparent; background: rgba(255,255,255,.16); color: #fff; transform: none; }
.performance-section-fold svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.template-score-block.is-collapsed .performance-section-fold svg { transform: rotate(-90deg); }
.template-score-block.is-collapsed > :not(h5) { display: none; }
.template-criterion-add { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(255,255,255,.52); border-radius: 6px; background: rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 600; }
.template-criterion-add:hover { border-color: #fff; background: rgba(255,255,255,.22); }
.template-criterion-remove { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(255,220,220,.7); border-radius: 6px; background: rgba(166,22,22,.42); color: #fff; font-size: 12px; font-weight: 600; }
.template-criterion-remove:hover { border-color: #fff; background: rgba(166,22,22,.72); }
.template-score-block .performance-template-meta { border-radius: 0 0 9px 9px; }
.template-score-block .performance-template-table th:first-child { min-width: 300px; }
.template-score-card-list { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 9px 9px; background: #fff; }
.template-score-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(16, 24, 40, .07); }
.template-score-card.is-selected { border-color: #d92d20; box-shadow: 0 0 0 2px rgba(217, 45, 32, .14), 0 3px 10px rgba(16, 24, 40, .09); }
.template-score-card > header { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 30px; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.template-score-index { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #fde8e8; color: #b42318; font-size: 12px; font-weight: 700; }
.template-score-card > header strong { display: block; color: var(--ink); font-size: 15px; }
.template-score-card > header small { display: block; margin-top: 2px; color: #667085; font-size: 12px; }
.template-score-card > header b { color: #b42318; font-size: 20px; }
.template-score-card > header em { margin-left: 2px; font-size: 12px; font-style: normal; font-weight: 400; }
.performance-criterion-fold { display: grid; width: 30px; min-width: 30px; height: 30px; min-height: 30px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--icon-gray); box-shadow: none; }
.performance-criterion-fold:hover, .performance-criterion-fold:focus-visible { border-color: transparent; background: var(--hover-bg); color: var(--nav-muted); transform: none; }
.performance-criterion-fold svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.template-score-card.is-collapsed > header { border-bottom: 0; }
.template-score-card.is-collapsed > :not(header) { display: none; }
.template-score-card.is-collapsed .performance-criterion-fold svg { transform: rotate(-90deg); }
.template-score-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.template-score-detail-grid div { min-height: 58px; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.template-score-detail-grid div:nth-child(2n) { border-right: 0; }
.template-score-detail-grid div:last-child { grid-column: 1 / -1; border-bottom: 0; }
.template-score-detail-grid dt, .template-score-detail-grid dd { margin: 0; }
.template-score-detail-grid dt { color: #667085; font-size: 12px; }
.template-score-detail-grid dd { margin-top: 4px; color: var(--ink); font-size: 13px; line-height: 1.55; }
.template-score-standard { display: block; border-top: 1px solid var(--line); background: #fffaf0; }
.template-score-standard div { padding: 10px 12px; }
.template-score-standard div + div { border-left: 1px solid var(--line); }
.template-score-standard span { color: #92400e; font-size: 12px; font-weight: 700; }
.template-score-standard p { margin: 4px 0 0; color: #78350f; font-size: 12px; line-height: 1.55; }
.template-score-custom-standard { padding: 10px 12px 12px; border-top: 1px solid var(--line); background: #fff; }
.template-score-custom-standard > span { display: block; margin-bottom: 7px; color: #475467; font-size: 12px; font-weight: 700; }
.template-score-custom-standard table { width: 100%; border-collapse: collapse; font-size: 12px; }
.template-score-custom-standard th, .template-score-custom-standard td { padding: 7px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.template-score-custom-standard th { background: #f8fafc; color: #475467; }
.template-score-custom-standard td:first-child, .template-score-custom-standard td:nth-child(2) { white-space: nowrap; }
.template-score-input-stack { display: grid; padding: 12px; background: #fffafa; }
.template-score-role-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 112px; gap: 14px; align-items: start; padding: 5px 0; border-bottom: 1px solid #f1d4d4; }
.template-score-role-row:last-child { border-bottom: 0; }
.template-score-role-row label { color: #475467; font-size: 12px; font-weight: 600; }
.template-score-role-row label > span, .template-hr-score-row label > span { display: block; }
.template-score-role-row select, .template-score-role-row textarea { margin-top: 5px; background: #fff; }
.template-score-role-row label > select, .template-hr-score-row label > select { width: 100%; box-sizing: border-box; }
.template-score-role-row textarea { min-height: 52px; }
.template-hr-score-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 112px; gap: 14px; align-items: start; padding: 12px; background: #f8fafc; }
.template-hr-score-row label { color: #475467; font-size: 12px; font-weight: 600; }
.template-hr-score-row select, .template-hr-score-row textarea { margin-top: 5px; background: #fff; }
.template-hr-score-row textarea { min-height: 52px; }
.template-hr-score-note { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.template-attendance-link { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; box-sizing: border-box; margin-top: 19px; padding: 8px 10px; border: 1px solid #f2b8b5; border-radius: 7px; background: #fff5f5; color: #b42318; font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; white-space: nowrap; }
.template-attendance-link:hover, .template-attendance-link:focus-visible { border-color: #d92d20; background: #fde8e8; color: #912018; }
.template-score-note-field { min-width: 0; color: #475467; font-size: 12px; font-weight: 600; }
.template-score-note-field > span { display: block; line-height: 14px; }
.template-score-note-input { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 6px; margin-top: 5px; }
.template-score-note-input.is-note-only { grid-template-columns: minmax(0, 1fr); }
.template-score-note-input textarea { min-width: 0; min-height: 52px; margin-top: 0 !important; }
.template-score-attachment { display: grid; min-height: 52px; place-items: center; padding: 0; border: 1px solid #d0d5dd; border-radius: 7px; background: #fff; color: #475467; line-height: 1; }
.template-score-attachment svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.template-score-attachment:hover:not(:disabled), .template-score-attachment:focus-visible { border-color: #d92d20; background: #fff5f5; color: #b42318; }
.template-score-attachment:disabled { opacity: .45; cursor: not-allowed; }
.template-score-note-field small { display: block; margin-top: 4px; color: #667085; font-size: 11px; font-weight: 400; line-height: 1.4; }
.template-attachment-card { width: min(640px, calc(100vw - 32px)); max-width: 640px; }
.template-attachment-dialog-body { padding: 4px 2px 2px; }
.template-attachment-dialog-body > .muted { margin: 0 0 14px; font-size: 13px; line-height: 1.55; }
.template-attachment-upload { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid #d92d20; border-radius: 8px; background: #d92d20; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.template-attachment-upload:hover { background: #b42318; border-color: #b42318; }
.template-attachment-upload:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.template-attachment-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.template-attachment-upload-icon { display: grid; place-items: center; }
.template-attachment-upload svg, .template-attachment-file-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.template-attachment-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.template-attachment-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.template-attachment-file-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: #fff1f2; color: #b42318; }
.template-attachment-item strong, .template-attachment-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-attachment-item strong { color: var(--ink); font-size: 13px; }
.template-attachment-item small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.template-attachment-item-actions { display: inline-flex; gap: 6px; }
.template-attachment-item-actions button { min-height: 32px; padding: 5px 9px; font-size: 12px; }
.template-attachment-item-actions .danger { border-color: #f2b8b5; color: #b42318; }
.template-attachment-empty { padding: 18px; border: 1px dashed #d0d5dd; border-radius: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.template-attachment-notice { margin: 14px 0 0; padding: 9px 10px; border-radius: 7px; background: #fffaf0; color: #7a4b00; font-size: 12px; line-height: 1.55; }
.template-score-card-final { display: flex; flex-direction: column; justify-content: center; align-items: center; color: #475467; font-size: 12px; }
.template-score-card-final strong { margin-top: 6px; color: #991b1b; font-size: 22px; }
.template-point-title { display: block; color: var(--ink); margin-bottom: 6px; }
.template-point-detail { color: var(--muted); font-size: 12px; line-height: 1.55; }
.template-point-detail p { margin: 2px 0; }
.template-hr-note { margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-top: 0; background: #fffbeb; color: #92400e; font-size: 12px; line-height: 1.5; }
.template-result-block { padding: 0 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.template-result-block h5 { margin: 0 -12px; border-radius: 7px 7px 0 0; background: linear-gradient(135deg, #b42318, #8f1313); }
.template-personnel-block { margin-top: 16px; }
.template-personnel-summary { display: grid; grid-template-columns: minmax(170px, .9fr) minmax(0, 3.1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.template-personnel-identity { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 18px; border-right: 1px solid var(--line); background: #f8fafc; }
.template-personnel-identity span, .template-personnel-grid dt { color: #667085; font-size: 12px; }
.template-personnel-identity strong { color: var(--ink); font-size: 22px; line-height: 1.2; }
.template-personnel-identity small { color: #475467; font-size: 12px; }
.template-personnel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.template-personnel-grid div { min-height: 58px; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.template-personnel-grid div:nth-child(4n) { border-right: 0; }
.template-personnel-grid div:nth-child(n + 5) { border-bottom: 0; }
.template-personnel-grid dt, .template-personnel-grid dd { margin: 0; }
.template-personnel-grid dd { margin-top: 4px; color: var(--ink); font-size: 14px; font-weight: 600; }
.template-reviewer-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 0; overflow: hidden; border: 1px solid #f2b8b5; border-radius: 8px; background: #fff5f5; }
.template-reviewer-summary div { padding: 9px 12px; border-right: 1px solid #f2b8b5; }
.template-reviewer-summary div:last-child { border-right: 0; }
.template-reviewer-summary span { display: block; color: #991b1b; font-size: 12px; font-weight: 600; }
.template-reviewer-summary strong { display: block; margin-top: 4px; color: var(--ink); font-size: 14px; }
/* 窄屏（≤760px）的评分表重排。原来留在 HR 模块的 styles.css 里，HR 换了样式表来源后
   主站看板就拿不到这层响应式，窄屏下表会横向溢出，所以跟版式一起搬到这里。 */
@media (max-width: 760px) { .performance-template-meta { grid-template-columns: 1fr 1fr; } .performance-template-meta div:nth-child(2) { border-right: 0; } .performance-template-table { min-width: 760px; } .performance-template-preview { margin-top: 12px; } .template-personnel-summary { grid-template-columns: 1fr; } .template-personnel-identity { border-right: 0; border-bottom: 1px solid var(--line); } .template-personnel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .template-personnel-grid div:nth-child(4n) { border-right: 1px solid var(--line); } .template-personnel-grid div:nth-child(2n) { border-right: 0; } .template-personnel-grid div:nth-child(n + 5) { border-bottom: 1px solid var(--line); } .template-personnel-grid div:nth-last-child(-n + 1) { border-bottom: 0; } .template-reviewer-summary { grid-template-columns: 1fr; } .template-reviewer-summary div { border-right: 0; border-bottom: 1px solid var(--line); } .template-reviewer-summary div:last-child { border-bottom: 0; } .template-score-detail-grid { grid-template-columns: 1fr; } .template-score-detail-grid div, .template-score-detail-grid div:nth-child(2n) { border-right: 0; } .template-score-detail-grid div:last-child { grid-column: auto; } .template-score-standard { grid-template-columns: 1fr; } .template-score-standard div + div { border-top: 1px solid var(--line); border-left: 0; } .template-score-role-row, .template-hr-score-row { grid-template-columns: 1fr 1fr; } .template-score-role-row > strong, .template-hr-score-row > strong { grid-column: 1 / -1; padding-top: 0; } .template-score-role-row .template-score-note-field, .template-hr-score-note, .template-score-card-final { grid-column: 1 / -1; } .template-hr-score-note { grid-template-columns: 1fr; } .template-attendance-link { margin-top: 0; } .template-score-card-final { min-height: 72px; border-top: 1px solid var(--line); } .template-attachment-card { width: calc(100vw - 20px); } .template-attachment-item { grid-template-columns: 34px minmax(0, 1fr); } .template-attachment-item-actions { grid-column: 1 / -1; justify-content: flex-end; } }

/* —— 评分表的「全屏 / 导出长图」：看板与 HR 模块共用（脚本在 platform/performance-sheet-tools.js）—— */
.sheet-tools { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sheet-tool { display: inline-flex; width: 30px; min-width: 30px; height: 30px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--panel); color: var(--icon-gray); cursor: pointer; }
.sheet-tool:hover, .sheet-tool:focus-visible { border-color: var(--line-strong); background: var(--hover-bg); color: var(--nav-muted); }
.sheet-tool:disabled { opacity: .5; cursor: progress; }
.sheet-tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* HR 只读评分表的关闭按钮是浮在右上角的圆形按钮，工具条跟着浮在它左边。 */
.historical-detail-dialog.performance-template-preview > .sheet-tools.is-float { position: fixed; top: 28px; z-index: 30; right: calc(max(18px, calc((100vw - 1100px) / 2 - 96px)) + 58px); }
@media (max-width: 760px) { .historical-detail-dialog.performance-template-preview > .sheet-tools.is-float { top: 22px; right: 70px; } }

/* 全屏：真 Fullscreen API 走 :fullscreen，浏览器拒绝时由脚本挂 .is-fallback-fullscreen 铺满视口。 */
.my-perf-sheet:fullscreen,
.my-perf-sheet.is-fallback-fullscreen,
.historical-detail-dialog.performance-template-preview:fullscreen,
.historical-detail-dialog.performance-template-preview.is-fallback-fullscreen {
  width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; border: 0; border-radius: 0; overflow: auto; background: #fff;
}
.my-perf-sheet:fullscreen,
.historical-detail-dialog.performance-template-preview:fullscreen { padding: 0; }
.my-perf-sheet.is-fallback-fullscreen,
.historical-detail-dialog.performance-template-preview.is-fallback-fullscreen { position: fixed; z-index: 90; inset: 0; }
.historical-detail-dialog.performance-template-preview::backdrop { background: #fff; }
body.sheet-fullscreen-open { overflow: hidden; }

/* 导出长图时的容器：不裁剪、不滚动，让评分表按完整内容排版。样式表会被一起塞进 SVG，
   这几条在「先量高度」那一步就要生效，所以放在共享样式表里而不是临时注入。 */
.sheet-export-root { box-sizing: border-box; }
.sheet-export-root > .my-perf-sheet,
.sheet-export-root > .historical-detail-dialog.performance-template-preview { width: 100%; max-width: none; height: auto; max-height: none; margin: 0; border-radius: 0; overflow: visible; }
.sheet-export-root .my-perf-rows { height: auto; max-height: none; overflow: visible; }
.sheet-export-root .sheet-export-control.is-placeholder { color: #98a2b3; }