#performanceView { --sp-blue: #287dcc; --sp-green: #148d78; background: #fff; border: 1px solid #dbe5f0; border-radius: 4px; padding: 0 18px 10px; gap: 0; font-size: 13px; letter-spacing: 0; min-width: 0; }
.sp-shell-heading { color: inherit; font-size: 20px; font-weight: 700; white-space: nowrap; margin-right: auto; }
.sp-shell-heading[hidden] { display: none; }
#performanceView [hidden], .sp-dialog [hidden] { display: none !important; }
#performanceView *, .sp-dialog * { box-sizing: border-box; letter-spacing: 0; }
#performanceView button, #performanceView input, #performanceView select, .sp-dialog button, .sp-dialog input, .sp-dialog select, .sp-dialog textarea { font-family: inherit; font-size: 13px; }
#performanceView button, .sp-dialog button { cursor: pointer; box-shadow: none; }
#performanceView button:disabled, .sp-dialog button:disabled { cursor: default; opacity: .5; }
#performanceView button:focus-visible, #performanceView input:focus-visible, #performanceView select:focus-visible, .sp-dialog :focus-visible { outline: 2px solid #287dcc; outline-offset: 2px; }
#performanceView h2, .sp-dialog h2 { font-size: 16px; line-height: 1.4; margin: 0; }
#performanceView .sp-muted, #performanceView .sp-caption { color: #728198; font-size: 12px; font-weight: 400; }
#performanceView .sp-warning { color: #a7660b; }
#performanceView .sp-strong { font-weight: 650; }
.sp-toolbar, .sp-navigation, .sp-section-heading, .sp-filter-set, .sp-actions, .sp-ledger-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-toolbar { flex-wrap: wrap; justify-content: space-between; padding: 14px 0 12px; }
.sp-filter-set { flex-wrap: wrap; gap: 8px; }
.sp-filter-set label { display: flex; align-items: center; gap: 6px; color: #62748d; white-space: nowrap; }
#performanceView select { width: auto; min-width: 90px; min-height: 32px; height: 32px; padding: 3px 25px 3px 8px; border: 1px solid #d8e3ef; border-radius: 4px; color: #29425e; background-color: #fff; }
#performanceView #spPerson { max-width: 160px; }
#performanceView .ghost-button, #performanceView .primary-button { min-height: 32px; height: 32px; padding: 0 10px; gap: 5px; border-radius: 4px; white-space: nowrap; }
#performanceView .primary-button, .sp-dialog .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #176ff2; color: #fff; border: 1px solid #176ff2; border-radius: 4px; padding: 6px 12px; }
#performanceView .primary-button:hover, .sp-dialog .primary-button:hover { background: #115bce; border-color: #115bce; }
#performanceView .sp-ranking, #performanceView .sp-summary-section .sp-table-wrap { scrollbar-gutter: stable; scrollbar-width: thin; }
.sp-actions svg, #performanceView button svg { width: 15px; height: 15px; flex: 0 0 15px; }
.sp-actions { flex-wrap: wrap; }
.sp-segments { display: inline-flex; align-items: center; padding: 2px; border: 1px solid #dde6f0; background: #f6f8fb; border-radius: 4px; flex-shrink: 0; }
.sp-segments button { background: none; border: 0; border-radius: 3px; color: #687991; padding: 5px 10px; min-height: 26px; line-height: 16px; }
.sp-segments button[aria-pressed=true] { background: #e3efff; color: #1764c1; font-weight: 600; }
.sp-navigation { justify-content: space-between; border-bottom: 1px solid #dbe5ef; gap: 12px; }
.sp-tabs { display: flex; align-items: stretch; gap: 20px; }
.sp-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 10px 2px; color: #64758c; font-weight: 600; }
.sp-tabs button[aria-selected=true] { border-bottom-color: #2673ce; color: #1764c1; }
.sp-notice { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fffaef; color: #976814; font-size: 12px; border-left: 2px solid #d5a34a; margin-top: 10px; line-height: 1.5; }
.sp-notice svg { width: 15px; height: 15px; flex-shrink: 0; }
.sp-notice > span { flex: 1; }
#performanceView #performanceKpiGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 16px 0; margin: 0; border-bottom: 1px solid #e1e8f0; }
.sp-kpi { padding: 0 18px; border-right: 1px solid #e3eaf2; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sp-kpi:first-child { padding-left: 0; }
.sp-kpi:last-child { border: 0; padding-right: 0; }
.sp-kpi > span:first-child { color: #4d6480; font-size: 13px; }
.sp-kpi > span:last-child { color: #7a899c; font-size: 11px; line-height: 1.5; }
.sp-kpi > strong { font-size: 24px; font-weight: 650; line-height: 1.3; color: #1b3553; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sp-kpi > strong.blue { color: #2476c6; }
.sp-kpi > strong.green { color: #158776; }
.sp-kpi small { color: #79899e; font-size: 12px; font-weight: 400; margin-left: 5px; }
.sp-chart-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); border-bottom: 1px solid #e1e8f0; }
.sp-chart-section { min-width: 0; padding: 14px 18px 8px 0; }
.sp-chart-section + .sp-chart-section { border-left: 1px solid #e1e8f0; padding-left: 18px; padding-right: 0; }
.sp-section-heading { min-height: 34px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.sp-legend { display: flex; align-items: center; gap: 12px; font-size: 11px; color: #6e7e93; }
.sp-legend > span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.sp-swatch { width: 10px; height: 10px; display: inline-block; background: #287dcc; border-radius: 2px; }
.sp-line-key { width: 14px; display: inline-block; border-top: 2px solid #cf9227; }
.sp-canvas-wrap { position: relative; height: 260px; min-width: 0; }
.sp-trend-legend { flex-wrap: wrap; min-height: 22px; margin-bottom: 6px; gap: 6px 12px; }
.sp-trend-legend .sp-trend-unit { margin-left: auto; }
.sp-quarter-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #e5edf5; border-bottom: 1px solid #e5edf5; margin-top: 8px; }
.sp-quarter-summary > div { padding: 9px 12px; min-width: 0; border-right: 1px solid #e5edf5; }
.sp-quarter-summary > div:first-child { padding-left: 0; }
.sp-quarter-summary > div:last-child { border: 0; }
.sp-quarter-summary span, .sp-quarter-summary small { display: block; color: #718198; font-size: 11px; line-height: 1.6; }
.sp-quarter-summary strong { display: block; color: #294b68; font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-trend-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; }
.sp-trend-dialog { width: 660px; }
.sp-trend-dialog .sp-table { min-width: 0; }
.sp-month-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px 0; }
.sp-month-metrics span { display: block; color: #718198; font-size: 12px; margin-bottom: 6px; }
.sp-month-metrics strong { font-size: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-trend-dialog .sp-caption { color: #718198; font-size: 12px; }
.sp-canvas-wrap canvas { width: 100% !important; height: 100% !important; }
.sp-caption { margin: 8px 0 0; line-height: 1.5; }
.sp-ranking { height: 228px; overflow-y: auto; scrollbar-width: thin; }
.sp-rank-row { display: grid; grid-template-columns: 88px minmax(40px, 1fr) 90px; align-items: center; gap: 8px; width: 100%; min-height: 35px; padding: 6px 5px; border: 0; border-bottom: 1px solid #edf1f6; background: #fff; text-align: left; color: #35516f; }
.sp-rank-row:hover { background: #f4f8fe; }
.sp-rank-row > span:first-child { overflow-wrap: anywhere; }
.sp-rank-row > strong { text-align: right; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sp-bar-track { display: block; height: 7px; border-radius: 2px; background: #edf2f7; overflow: hidden; }
.sp-bar-track b { display: block; height: 100%; background: #287dcc; border-radius: 2px; }
.sp-bar-track b.green { background: #158b77; }
.sp-summary-section { padding-top: 12px; min-width: 0; }
.sp-inline-label { display: inline-flex; align-items: center; gap: 7px; color: #6b7d94; font-size: 12px; white-space: nowrap; }
.sp-table-wrap { max-width: 100%; overflow-x: auto; }
.sp-summary-section .sp-table-wrap { max-height: 435px; overflow-y: auto; }
.sp-table { width: 100%; min-width: 800px; border-collapse: separate; border-spacing: 0; font-size: 13px; color: #344e6d; table-layout: auto; }
.sp-table th { background: #f5f8fc; color: #6d7e95; font-size: 12px; font-weight: 500; text-align: left; padding: 10px 10px; border-bottom: 1px solid #dce5ef; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.sp-table td { padding: 10px; border-bottom: 1px solid #e8eef5; vertical-align: middle; line-height: 1.5; }
.sp-table tr:nth-child(even) td { background: #fbfcfe; }
.sp-table tbody tr:hover td { background: #f3f8ff; }
.sp-table .sp-number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-table td small { display: block; font-size: 11px; color: #8492a6; margin-top: 2px; }
.sp-table td strong { font-size: 13px; font-weight: 500; }
.sp-rate-cell { display: flex; align-items: center; gap: 8px; min-width: 116px; font-variant-numeric: tabular-nums; }
.sp-rate-cell .sp-bar-track { width: 58px; flex: 0 0 58px; }
.sp-text-button { border: 0; background: transparent; color: #2470c3; padding: 0; text-align: left; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.sp-text-button:hover { text-decoration: underline; }
.sp-icon-button { display: inline-flex; justify-content: center; align-items: center; width: 30px; height: 30px; padding: 5px; border: 1px solid #dce6f0; border-radius: 4px; background: #fff; color: #54769d; flex: 0 0 30px; }
.sp-icon-button svg { width: 16px; height: 16px; }
.sp-icon-button:hover { background: #eef5ff; color: #246bbd; }
#performanceView .panel { box-shadow: none; border: 0; border-radius: 0; margin: 0; padding: 0; background: transparent; min-width: 0; }
#performanceView .panel-heading { padding: 12px 0; border-bottom: 0; min-height: 50px; }
#performanceView #spTargetNote { margin: 0 0 12px; }
.sp-ledger-tools { margin-bottom: 12px; flex-wrap: wrap; }
.sp-search { position: relative; display: flex; align-items: center; min-width: 260px; width: 380px; max-width: 100%; }
#performanceView .sp-search input { width: 100%; min-height: 34px; padding: 6px 32px; border: 1px solid #d8e3ef; border-radius: 4px; }
.sp-search svg { width: 16px; height: 16px; position: absolute; left: 10px; color: #7e92ab; }
#performanceView input[type=checkbox] { width: 15px; height: 15px; accent-color: #2476ce; }
#recordsTable .sp-product { max-width: 240px; overflow-wrap: anywhere; }
.sp-stage { color: #147a69; white-space: nowrap; font-size: 12px; }
.sp-stage.is-pending { color: #a16e22; }
.sp-stage.is-cancelled { color: #b6514c; }
.sp-pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; color: #75869b; font-size: 12px; }
.sp-pagination > div { display: flex; gap: 12px; align-items: center; }
.sp-empty { text-align: center !important; padding: 36px 12px !important; color: #7f90a5; font-size: 13px; }
.sp-dialog { width: 820px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); border: 1px solid #d7e2ef; border-radius: 6px; padding: 0; color: #304b6b; background: #fff; }
.sp-dialog::backdrop { background: rgba(18, 40, 62, .4); }
.sp-dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 52px); }
.sp-dialog header, .sp-dialog footer { padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sp-dialog header { justify-content: space-between; border-bottom: 1px solid #e0e8f1; }
.sp-dialog footer { border-top: 1px solid #e0e8f1; }
.sp-dialog footer > span { flex: 1; }
.sp-dialog .sp-dialog-body { padding: 16px 20px; overflow-y: auto; }
.sp-dialog h3 { font-size: 13px; margin: 0 0 12px; }
.sp-dialog section + section { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e4eaf2; }
.sp-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.sp-form-grid label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-form-grid label > span { font-size: 12px; color: #6a7d95; }
.sp-form-grid .sp-form-wide { grid-column: span 2; }
.sp-dialog input, .sp-dialog select, .sp-dialog textarea { width: 100%; padding: 8px 9px; min-height: 34px; border: 1px solid #d3e0ee; border-radius: 4px; color: #355171; background: #fff; }
.sp-dialog :disabled { background-color: #f5f7fa; color: #6f8198; }
.sp-dialog textarea { resize: vertical; }
.sp-required, .sp-danger, .sp-form-error { color: #bd4a41; }
.sp-form-error { padding: 10px; background: #fff0ee; font-size: 13px; margin: 14px 0 0; }
.sp-record-dialog { width:620px; }
.sp-record-dialog .sp-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sp-form-more { margin-top:16px; border-top:1px solid #e0e8f1; }
.sp-form-more summary { cursor:pointer; padding:12px 0 0; color:#37628f; font-size:13px; font-weight:600; }
.sp-form-more summary span { font-size:12px; font-weight:400; color:#7a8ba0; margin-left:8px; }
.sp-more-body { padding-top:16px; }
.sp-record-dialog footer { flex-wrap:wrap; }
.sp-record-dialog footer .sp-form-error { flex:1 1 100%; margin:0; }
@media(max-width:520px) {
  .sp-record-dialog { max-width:calc(100vw - 20px); }
  .sp-record-dialog .sp-form-grid { grid-template-columns:1fr; }
  .sp-record-dialog .sp-form-wide { grid-column:auto; }
  .sp-record-dialog header,.sp-record-dialog footer { padding:12px 16px; }
  .sp-record-dialog .sp-dialog-body { padding:14px 16px; }
}
.sp-dialog footer button { min-height: 32px; font-size: 13px; }
.sp-dialog button svg { width: 16px; height: 16px; }
.sp-scope { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.sp-settings-dialog { width: 620px; }
.sp-settings-note { margin: 0 0 14px; color: #64758c; font-size: 12px; line-height: 1.7; }
.sp-settings-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; }
.sp-settings-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.sp-settings-table th { padding: 8px 10px; background: #f5f8fc; color: #6d7e95; text-align: left; font-weight: 500; }
.sp-settings-table td { padding: 10px; border-bottom: 1px solid #e5edf5; overflow-wrap: anywhere; }
.sp-settings-table th:first-child { width: 58px; }
.sp-settings-table th:nth-child(2) { width: 32%; }
.sp-settings-table input[type=checkbox] { width: 16px; height: 16px; min-height: 16px; margin: 0; accent-color: #2476ce; cursor: pointer; vertical-align: middle; }
.sp-settings-table td:last-child { color: #708199; font-size: 12px; }
@media (max-width: 1400px) { .sp-toolbar { gap: 10px; } .sp-filter-set { gap: 6px; } #performanceView { padding-left: 14px; padding-right: 14px; } .sp-kpi { padding: 0 12px; } .sp-kpi > strong { font-size: 22px; } .sp-rank-row { grid-template-columns: 70px minmax(30px, 1fr) 84px; } }
@media (max-width: 1000px) { .sp-chart-grid { grid-template-columns: 1fr; } .sp-chart-section + .sp-chart-section { border-left: 0; border-top: 1px solid #e1e8f0; padding-left: 0; } .sp-navigation { flex-wrap: wrap; padding-bottom: 6px; } #performanceView #performanceKpiGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .sp-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  #performanceView #performanceKpiGrid { grid-template-columns: 1fr; gap: 12px; }
  #performanceView .sp-kpi { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #e3eaf2; }
  #performanceView .sp-kpi > strong { font-size: 22px; overflow-wrap: normal; }
  .sp-actions { width: 100%; gap: 8px; }
}