/* Apple-inspired treatment scoped to the employee data center. */ #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) { --dc-blue: #007aff; --dc-ink: #1d1d1f; --dc-secondary: #6e6e73; --dc-line: #e5e5ea; --dc-surface: #fff; --dc-canvas: #f5f5f7; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--dc-ink); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-sidebar { width: 228px; background: rgba(238, 240, 245, .86); border-right: 1px solid rgba(255, 255, 255, .7); box-shadow: inset -1px 0 rgba(30, 35, 50, .04); backdrop-filter: blur(30px) saturate(145%); -webkit-backdrop-filter: blur(30px) saturate(145%); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-workspace-content { width: calc(100% - 228px); margin-left: 228px; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-brand { border-bottom-color: rgba(60, 60, 67, .1); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-brand strong, #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-role-card strong { color: var(--dc-ink); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-brand small, #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-role-card small, #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav > small { color: #777983; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-role-card { background: rgba(255, 255, 255, .64); border-color: rgba(255, 255, 255, .82); border-radius: 14px; box-shadow: 0 3px 12px rgba(27, 32, 50, .035); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav button, #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-group summary, #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-logout { color: #555963; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav button:hover, #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-group summary:hover { color: var(--dc-ink); background: rgba(255, 255, 255, .55); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav button.active { color: var(--dc-blue); background: rgba(255, 255, 255, .9); box-shadow: 0 3px 14px rgba(20, 50, 100, .07); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav button.active span { color: var(--dc-blue); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-group:has(button.active) summary { color: var(--dc-ink); background: rgba(255,255,255,.56); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-submenu button span::before { background: #a3a7b2; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-submenu button.active span::before { background: var(--dc-blue); box-shadow: 0 0 0 3px rgba(0,122,255,.12); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-bottom { border-top-color: rgba(60, 60, 67, .1); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-logout { border-color: rgba(60, 60, 67, .14); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-logout:hover { color: var(--dc-ink); background: rgba(255,255,255,.7); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .main { background: var(--dc-canvas); } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .topbar { border-bottom-color: var(--dc-line); } #employeeDataCenterPanel { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(310px, .85fr); gap: 18px; padding: 26px 0 56px; color: var(--dc-ink); font-size: 14px; line-height: 1.5; } #employeeDataCenterPanel[hidden] { display: none; } #employeeDataCenterPanel > * { min-width: 0; } #employeeDataCenterPanel > .data-center-intro, #employeeDataCenterPanel > .data-center-toolbar, #employeeDataCenterPanel > .data-center-conclusion, #employeeDataCenterPanel > .data-center-section, #employeeDataCenterPanel > .data-center-accounts, #employeeDataCenterPanel > .data-center-leader-summary, #employeeDataCenterPanel > .data-center-rules, #employeeDataCenterPanel > .data-center-insights { grid-column: 1 / -1; } #employeeDataCenterPanel > .data-center-intro { order: 1; } #employeeDataCenterPanel > .data-center-toolbar { order: 2; } #employeeDataCenterPanel > .data-center-conclusion { order: 3; } #employeeDataCenterPanel > .data-center-section { order: 4; } #employeeDataCenterPanel > .data-center-accounts { order: 5; } #employeeDataCenterPanel > .data-center-daily-grid, #employeeDataCenterPanel > .data-center-main-grid { display: contents; } #employeeDataCenterPanel .data-center-daily-grid > .data-center-mini-card:first-child { order: 6; grid-column: 1; } #employeeDataCenterPanel .data-center-main-grid > .data-center-goal-card { order: 7; grid-column: 2; } #employeeDataCenterPanel .data-center-main-grid > .data-center-chart-card { order: 8; grid-column: 1 / -1; } #employeeDataCenterPanel .data-center-daily-grid > .data-center-mini-card:last-child { order: 9; grid-column: 1 / -1; } #employeeDataCenterPanel > .data-center-leader-summary { order: 10; } #employeeDataCenterPanel > .data-center-rules { order: 11; } #employeeDataCenterPanel > .data-center-insights { order: 12; } #employeeDataCenterPanel .data-center-intro, #employeeDataCenterPanel .data-center-toolbar, #employeeDataCenterPanel .data-center-conclusion, #employeeDataCenterPanel .data-center-section, #employeeDataCenterPanel .data-center-accounts, #employeeDataCenterPanel .data-center-mini-card, #employeeDataCenterPanel .data-center-chart-card, #employeeDataCenterPanel .data-center-goal-card, #employeeDataCenterPanel .data-center-leader-summary, #employeeDataCenterPanel .data-center-rules, #employeeDataCenterPanel .data-center-insights { min-width: 0; background: var(--dc-surface); border: 1px solid rgba(60, 60, 67, .08); border-radius: 22px; box-shadow: 0 5px 22px rgba(29, 29, 31, .035); } #employeeDataCenterPanel .data-center-intro { min-height: 154px; padding: 30px 34px; background: linear-gradient(120deg, #fff 55%, #f2f7ff); } #employeeDataCenterPanel .data-center-intro .eyebrow { margin-bottom: 7px; color: var(--dc-blue); font-size: 11px; letter-spacing: .13em; } #employeeDataCenterPanel .data-center-intro h2 { margin: 0 0 8px; color: var(--dc-ink); font-size: clamp(29px, 2.5vw, 40px); font-weight: 720; letter-spacing: -.035em; line-height: 1.12; } #employeeDataCenterPanel .data-center-intro p { color: var(--dc-secondary); font-size: 14px; } #employeeDataCenterPanel .data-center-sync { min-width: 220px; padding: 12px 15px; border: 1px solid rgba(0, 122, 255, .12); border-radius: 15px; color: var(--dc-ink); background: rgba(255, 255, 255, .78); } #employeeDataCenterPanel .data-center-sync > span { background: #30b873; box-shadow: 0 0 0 4px rgba(48, 184, 115, .12); } #employeeDataCenterPanel .data-center-sync small { color: var(--dc-secondary); } #employeeDataCenterPanel .data-center-sync button, #employeeDataCenterPanel .data-center-mini-actions > button, #employeeDataCenterPanel .data-center-goal-card header button { min-height: 36px; border: 1px solid rgba(0, 122, 255, .16); border-radius: 10px; color: var(--dc-blue); background: #f0f7ff; font-weight: 650; box-shadow: none; } #employeeDataCenterPanel .data-center-sync button:hover, #employeeDataCenterPanel .data-center-mini-actions > button:hover, #employeeDataCenterPanel .data-center-goal-card header button:hover { background: #e4f1ff; } #employeeDataCenterPanel .data-center-toolbar { align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); } #employeeDataCenterPanel .data-center-period-switch { gap: 2px; background: #ececf0; border-radius: 11px; } #employeeDataCenterPanel .data-center-period-switch button { min-height: 38px; padding: 8px 16px; color: #555962; font-weight: 600; border-radius: 8px; } #employeeDataCenterPanel .data-center-period-switch button.active { color: var(--dc-ink); background: #fff; box-shadow: 0 2px 6px rgba(29,29,31,.12); } #employeeDataCenterPanel .data-center-range { gap: 2px; } #employeeDataCenterPanel .data-center-range small { color: var(--dc-secondary); } #employeeDataCenterPanel .data-center-range strong { color: var(--dc-ink); font-weight: 650; } #employeeDataCenterPanel .data-range-trigger, #employeeDataCenterPanel .data-center-comparison-picker select, #employeeDataCenterPanel .data-center-user-switch select { border-color: var(--dc-line); border-radius: 10px; color: var(--dc-ink); background: #fff; font-weight: 600; } #employeeDataCenterPanel .data-range-trigger:hover, #employeeDataCenterPanel .data-range-trigger[aria-expanded="true"] { border-color: var(--dc-blue); box-shadow: 0 0 0 3px rgba(0,122,255,.1); } #employeeDataCenterPanel .data-range-popover { border-color: var(--dc-line); border-radius: 17px; box-shadow: 0 22px 60px rgba(29,29,31,.18); } #employeeDataCenterPanel .data-range-shortcuts { background: #f7f7f9; border-right-color: var(--dc-line); } #employeeDataCenterPanel .data-range-shortcuts button { border-radius: 8px; border-color: var(--dc-line); } #employeeDataCenterPanel .data-range-shortcuts button:hover, #employeeDataCenterPanel .data-range-shortcuts button.active { color: var(--dc-blue); border-color: rgba(0,122,255,.3); background: #edf6ff; } #employeeDataCenterPanel .data-range-days button.in-range { background: #eaf4ff; } #employeeDataCenterPanel .data-range-days button.range-start, #employeeDataCenterPanel .data-range-days button.range-end, #employeeDataCenterPanel .data-range-calendar-panel footer button { background: var(--dc-blue); } #employeeDataCenterPanel .data-center-conclusion { grid-template-columns: 34px minmax(0,1fr) auto; gap: 15px; padding: 19px 24px; } #employeeDataCenterPanel .data-center-conclusion > span { width: 34px; height: 34px; border-radius: 50%; background: #eaf4ff; color: var(--dc-blue); font-size: 15px; } #employeeDataCenterPanel .data-center-conclusion.attention { border-color: #f3dfba; background: #fffdf8; } #employeeDataCenterPanel .data-center-conclusion.healthy { border-color: #d5ecdf; background: #fcfffd; } #employeeDataCenterPanel .data-center-conclusion.attention > span { color: #b76700; background: #fff3df; } #employeeDataCenterPanel .data-center-conclusion.healthy > span { color: #168455; background: #e9f8f0; } #employeeDataCenterPanel .data-center-conclusion.empty > span { color: #78808d; background: #eff1f4; } #employeeDataCenterPanel .data-center-conclusion > div strong { color: var(--dc-ink); font-size: 16px; font-weight: 650; } #employeeDataCenterPanel .data-center-conclusion > p b { color: var(--dc-secondary); font-size: 12px; font-weight: 550; } #employeeDataCenterPanel .data-center-section, #employeeDataCenterPanel .data-center-accounts, #employeeDataCenterPanel .data-center-mini-card, #employeeDataCenterPanel .data-center-chart-card, #employeeDataCenterPanel .data-center-goal-card, #employeeDataCenterPanel .data-center-leader-summary, #employeeDataCenterPanel .data-center-rules, #employeeDataCenterPanel .data-center-insights { padding: 22px 24px; } #employeeDataCenterPanel h3 { color: var(--dc-ink); font-size: 20px; font-weight: 680; letter-spacing: -.018em; } #employeeDataCenterPanel header p { color: var(--dc-secondary); font-size: 13px; line-height: 1.45; } #employeeDataCenterPanel .data-center-section > header, #employeeDataCenterPanel .data-center-chart-card > header, #employeeDataCenterPanel .data-center-goal-card > header, #employeeDataCenterPanel .data-center-mini-card > header, #employeeDataCenterPanel .data-center-rules > header, #employeeDataCenterPanel .data-center-insights > header { gap: 18px; margin-bottom: 20px; } #employeeDataCenterPanel .data-center-metrics { gap: 10px; } #employeeDataCenterPanel .data-center-metric { min-height: 132px; padding: 17px 18px; border-color: var(--dc-line); border-radius: 16px; background: #fafafb; } #employeeDataCenterPanel .data-center-metric.primary { color: var(--dc-ink); background: #eef6ff; border: 1px solid #d8ebff; } #employeeDataCenterPanel .data-center-metric h4 { color: var(--dc-secondary); font-size: 12px; font-weight: 600; } #employeeDataCenterPanel .data-center-metric strong { margin: 17px 0 8px; color: var(--dc-ink); font-size: clamp(23px, 2vw, 30px); font-weight: 700; letter-spacing: -.025em; } #employeeDataCenterPanel .data-center-metric.primary strong { color: #0064d8; } #employeeDataCenterPanel .data-center-metric small, #employeeDataCenterPanel .data-center-metric.primary small { color: var(--dc-secondary); } #employeeDataCenterPanel .data-center-status { font-weight: 650; } #employeeDataCenterPanel .data-center-status.normal, #employeeDataCenterPanel .data-center-status.excellent { color: #168455; background: #e8f7ef; } #employeeDataCenterPanel .data-center-status.warning { color: #ae6b00; background: #fff2dc; } #employeeDataCenterPanel .data-center-status.danger, #employeeDataCenterPanel .data-center-status.crisis { color: #c93d38; background: #ffebe9; } #employeeDataCenterPanel .data-center-mini-card h3 { font-size: 20px; } #employeeDataCenterPanel .data-center-mini-actions, #employeeDataCenterPanel .data-center-chart-tools { gap: 9px; } #employeeDataCenterPanel .data-center-chart-legend { color: var(--dc-secondary); font-size: 12px; } #employeeDataCenterPanel .data-center-chart-legend .sales:before { background: var(--dc-blue); } #employeeDataCenterPanel .data-center-chart-legend .net:before { background: #af52de; } #employeeDataCenterPanel .data-center-seven-trend { min-height: 225px; } #employeeDataCenterPanel .data-center-seven-trend svg { height: 225px; } #employeeDataCenterPanel .trend-sales-bar { fill: var(--dc-blue); opacity: .55; } #employeeDataCenterPanel .trend-net-line { stroke: #af52de; stroke-width: 3; } #employeeDataCenterPanel .trend-net-point { fill: #af52de; } #employeeDataCenterPanel .data-center-goal-card { display: flex; flex-direction: column; } #employeeDataCenterPanel .data-center-goal-card[hidden] { display: none; } #employeeDataCenterPanel .data-center-goal-card > header { align-items: flex-start; } #employeeDataCenterPanel .data-center-goal-gauge { max-width: 220px; margin: auto auto 12px; } #employeeDataCenterPanel .data-center-goal-gauge .track { stroke: #ebedf1; } #employeeDataCenterPanel .data-center-goal-gauge .value { stroke: var(--dc-blue); } #employeeDataCenterPanel .data-center-goal-gauge strong { color: var(--dc-ink); font-size: 38px; font-weight: 700; letter-spacing: -.035em; } #employeeDataCenterPanel .data-center-goal-values > div { padding: 13px 14px; border-radius: 12px; background: #f6f6f8; } #employeeDataCenterPanel .data-center-goal-values small { color: var(--dc-secondary); } #employeeDataCenterPanel .data-center-goal-values strong { color: var(--dc-ink); font-size: 17px; } #employeeDataCenterPanel .data-center-goal-deviation { border-radius: 10px; } #employeeDataCenterPanel .data-center-chart-card { min-width: 0; } #employeeDataCenterPanel .data-center-chart { min-height: 350px; } #employeeDataCenterPanel .data-center-chart .grid { stroke: #e9e9ed; } #employeeDataCenterPanel .data-center-chart .sales-line { stroke: var(--dc-blue); stroke-width: 3; } #employeeDataCenterPanel .data-center-chart .net-line { stroke: #af52de; stroke-width: 3; } #employeeDataCenterPanel .data-center-chart .sales-point { fill: var(--dc-blue); } #employeeDataCenterPanel .data-center-chart .net-point { fill: #af52de; } #employeeDataCenterPanel .data-center-chart .axis-label { fill: #777982; } #employeeDataCenterPanel .data-center-anomaly-list { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); max-height: none; } #employeeDataCenterPanel .data-center-anomaly-list article { min-height: 70px; padding: 12px 14px; border-color: var(--dc-line); border-radius: 12px; background: #fafafb; } #employeeDataCenterPanel .data-center-all-clear { min-height: 70px; justify-content: flex-start; } #employeeDataCenterPanel .data-center-all-clear > span { color: #168455; } #employeeDataCenterPanel .data-center-accounts header > span, #employeeDataCenterPanel .data-center-section > header > span, #employeeDataCenterPanel .data-center-mini-card > header > span { color: #0064d8; background: #eaf4ff; border-radius: 9px; } #employeeDataCenterPanel .data-center-account-row { border-top-color: var(--dc-line); } #employeeDataCenterPanel .data-center-account-rank { color: #0064d8; background: #eaf4ff; } #employeeDataCenterPanel .data-center-account-name i { background: var(--dc-blue); } #employeeDataCenterPanel .data-center-rule-grid article { border-color: var(--dc-line); border-radius: 14px; background: #fafafb; } #employeeDataCenterPanel .data-center-rule-grid h4 { color: var(--dc-ink); } #employeeDataCenterPanel .data-center-insights article { border-color: var(--dc-line); } #employeeDataCenterPanel button, #employeeDataCenterPanel select { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } #employeeDataCenterPanel button:active { transform: scale(.98); } #employeeDataCenterPanel button:focus-visible, #employeeDataCenterPanel select:focus-visible { outline: 3px solid rgba(0, 122, 255, .32); outline-offset: 2px; } @media (max-width: 1200px) { #employeeDataCenterPanel { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr); } #employeeDataCenterPanel .data-center-mini-card > header { flex-wrap: wrap; } #employeeDataCenterPanel .data-center-mini-actions { justify-content: flex-start; } } @media (max-width: 940px) { #employeeDataCenterPanel { grid-template-columns: minmax(0, 1fr); } #employeeDataCenterPanel .data-center-daily-grid > .data-center-mini-card:first-child, #employeeDataCenterPanel .data-center-main-grid > .data-center-goal-card, #employeeDataCenterPanel .data-center-main-grid > .data-center-chart-card, #employeeDataCenterPanel .data-center-daily-grid > .data-center-mini-card:last-child { grid-column: 1; } #employeeDataCenterPanel .data-center-goal-gauge { margin: 12px auto; } #employeeDataCenterPanel .data-center-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } #employeeDataCenterPanel .data-center-metric.primary { grid-column: 1 / -1; } } @media (max-width: 720px) { #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-sidebar { position: relative; inset: auto; width: 100%; height: auto; flex-direction: column; align-items: stretch; gap: 8px; overflow: visible; padding: 8px 12px; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-brand, #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-role-card, #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav > small { display: none; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav button { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; width: auto; height: 38px; padding: 0 10px; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-bottom { margin: 0; padding: 0; border: 0; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-group { position: relative; flex: 0 0 auto; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-group[open] { flex-basis: 100%; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-group summary { height: 38px; padding: 0 10px; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-nav-submenu { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 0 5px 10px; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-logout { flex: 0 0 auto; margin: 0; padding: 0 10px; } #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-workspace-content { width: 100%; margin-left: 0; } #employeeDataCenterPanel { gap: 13px; padding: 15px 0 34px; } #employeeDataCenterPanel .data-center-intro { min-height: 0; gap: 16px; padding: 23px 20px; } #employeeDataCenterPanel .data-center-intro h2 { font-size: 29px; } #employeeDataCenterPanel .data-center-sync { min-width: 0; } #employeeDataCenterPanel .data-center-toolbar { padding: 12px; } #employeeDataCenterPanel .data-center-period-switch { width: 100%; } #employeeDataCenterPanel .data-center-period-switch button { padding: 8px 5px; } #employeeDataCenterPanel .data-center-conclusion { grid-template-columns: 34px minmax(0,1fr); padding: 16px; } #employeeDataCenterPanel .data-center-conclusion > p { grid-column: 2; text-align: left; } #employeeDataCenterPanel .data-center-section, #employeeDataCenterPanel .data-center-accounts, #employeeDataCenterPanel .data-center-mini-card, #employeeDataCenterPanel .data-center-chart-card, #employeeDataCenterPanel .data-center-goal-card, #employeeDataCenterPanel .data-center-leader-summary, #employeeDataCenterPanel .data-center-rules, #employeeDataCenterPanel .data-center-insights { padding: 18px; } #employeeDataCenterPanel .data-center-metrics { grid-template-columns: minmax(0,1fr); } #employeeDataCenterPanel .data-center-metric.primary { grid-column: auto; } #employeeDataCenterPanel .data-center-chart-card > header { align-items: flex-start; flex-direction: column; } #employeeDataCenterPanel .data-center-chart-tools { justify-content: flex-start; } #employeeDataCenterPanel .data-center-chart { overflow-x: auto; } #employeeDataCenterPanel .data-center-chart svg { min-width: 620px; } } @media (prefers-reduced-motion: reduce) { #employeeDataCenterPanel button, #employeeDataCenterPanel select, #employeeDataCenterPanel .data-center-goal-gauge .value { transition: none; } } @media (prefers-reduced-transparency: reduce) { #workspaceShell:has(#employeeDataCenterPanel:not([hidden])) .unified-sidebar, #employeeDataCenterPanel .data-center-toolbar { background: #f4f5f7; backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { #employeeDataCenterPanel .data-center-intro, #employeeDataCenterPanel .data-center-toolbar, #employeeDataCenterPanel .data-center-section, #employeeDataCenterPanel .data-center-mini-card, #employeeDataCenterPanel .data-center-chart-card, #employeeDataCenterPanel .data-center-goal-card { border-color: #85858d; } } /* Version 2: a visual hierarchy and chart language, not just a recolor. */ #employeeDataCenterPanel { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; } #employeeDataCenterPanel > .data-center-intro { order: 1; } #employeeDataCenterPanel > .data-center-toolbar { order: 2; } #employeeDataCenterPanel > .data-center-conclusion { order: 3; } #employeeDataCenterPanel > .data-center-section { order: 4; grid-column: 1 / span 8; } #employeeDataCenterPanel .data-center-main-grid > .data-center-goal-card { order: 5; grid-column: 9 / -1; } #employeeDataCenterPanel .data-center-daily-grid > .data-center-mini-card:first-child { order: 6; grid-column: 1 / -1; } #employeeDataCenterPanel .data-center-main-grid > .data-center-chart-card { order: 7; grid-column: 1 / -1; } #employeeDataCenterPanel > .data-center-accounts { order: 8; grid-column: 1 / -1; } #employeeDataCenterPanel .data-center-daily-grid > .data-center-mini-card:last-child { order: 9; grid-column: 1 / -1; } #employeeDataCenterPanel > .data-center-leader-summary { order: 10; } #employeeDataCenterPanel > .data-center-rules { order: 11; } #employeeDataCenterPanel > .data-center-insights { order: 12; } #employeeDataCenterPanel .data-center-intro { min-height: 205px; padding: 34px 38px; border: 0; color: #fff; background: radial-gradient(circle at 72% -80%, rgba(47, 143, 255, .55), transparent 57%), radial-gradient(circle at 100% 100%, rgba(68, 88, 150, .43), transparent 43%), linear-gradient(110deg, #171c28, #252e43); box-shadow: 0 18px 45px rgba(20, 31, 52, .16); } #employeeDataCenterPanel .data-center-intro .eyebrow { color: #83bfff; } #employeeDataCenterPanel .data-center-intro h2 { color: #fff; font-size: clamp(34px, 3vw, 48px); } #employeeDataCenterPanel .data-center-intro p { color: #d3ddeb; font-size: 15px; } #employeeDataCenterPanel .data-center-sync { min-width: 260px; border-color: rgba(255,255,255,.16); color: #fff; background: rgba(255,255,255,.11); backdrop-filter: blur(20px) saturate(140%); } #employeeDataCenterPanel .data-center-sync small { color: #c9d4e4; } #employeeDataCenterPanel .data-center-sync button { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.14); } #employeeDataCenterPanel .data-center-sync button:hover { background: rgba(255,255,255,.25); } #employeeDataCenterPanel .data-center-toolbar { margin-top: -32px; margin-inline: 26px; z-index: 2; box-shadow: 0 12px 28px rgba(23,33,52,.1); } #employeeDataCenterPanel .data-center-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } #employeeDataCenterPanel .data-center-metric { min-height: 119px; } #employeeDataCenterPanel .data-center-metric.primary { grid-column: 1 / span 2; } #employeeDataCenterPanel .data-center-goal-card { align-self: stretch; background: linear-gradient(150deg, #f4f9ff, #fff 55%); } #employeeDataCenterPanel .data-center-mini-card:first-child, #employeeDataCenterPanel .data-center-chart-card { padding: 28px 30px; } #employeeDataCenterPanel .data-center-mini-card:first-child > header, #employeeDataCenterPanel .data-center-chart-card > header { margin-bottom: 18px; } #employeeDataCenterPanel .data-center-chart-legend { display: none; } #employeeDataCenterPanel .data-center-mini-actions, #employeeDataCenterPanel .data-center-chart-tools { align-self: flex-start; } #employeeDataCenterPanel .data-center-mini-actions > button { order: 2; } #employeeDataCenterPanel .data-center-seven-trend { min-height: 0; } #employeeDataCenterPanel .data-center-chart { min-height: 0; } .dc-trend-overview, .dc-team-summary { display: flex; align-items: stretch; gap: 12px; } .dc-trend-overview > div, .dc-team-summary > div { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 14px 20px; border-radius: 15px; background: #f4f5f7; } .dc-trend-overview > div:first-child, .dc-team-summary > div:first-child { background: #eaf4ff; } .dc-trend-overview > div { flex: 1; } .dc-team-summary > div { min-width: 190px; } .dc-trend-overview small, .dc-team-summary small { color: #747b86; font-size: 12px; font-weight: 650; } .dc-trend-overview strong, .dc-team-summary strong { color: #1c2637; font-size: clamp(20px, 1.8vw, 28px); font-weight: 720; letter-spacing: -.035em; } .dc-trend-overview > div:first-child strong, .dc-team-summary > div:first-child strong { color: #0068d7; } .dc-team-summary em { color: #798390; font-size: 14px; font-style: normal; letter-spacing: 0; } .dc-trend-plot { position: relative; margin-top: 20px; padding: 24px 16px 0; border: 1px solid #edf0f4; border-radius: 18px; background: linear-gradient(#fbfcfe, #fff); } .dc-trend-axis-labels { position: absolute; z-index: 1; inset: 12px 24px auto; display: flex; justify-content: space-between; color: #687587; font-size: 11px; font-weight: 700; letter-spacing: .04em; pointer-events: none; } .dc-trend-plot svg { width: 100%; height: auto !important; max-height: 345px; overflow: visible; } .dc-trend-grid { stroke: #e5eaf0; stroke-width: 1; } .dc-trend-sales-line { fill: none; stroke: #007aff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .dc-trend-comparison-line { fill: none; stroke: #7256dd; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .dc-trend-sales-point { fill: #fff; stroke: #007aff; stroke-width: 3; } .dc-trend-comparison-point { fill: #fff; stroke: #7256dd; stroke-width: 2.5; } .dc-trend-plot .axis-label { fill: #7d8795; font-size: 12px; } .dc-trend-plot .trend-hover-zone:hover, .dc-trend-plot .trend-hover-zone:focus { fill: rgba(0,122,255,.07); outline: none; } #employeeDataCenterPanel .data-center-trend-tooltip, #dataCenterThirtyTrend .data-center-trend-tooltip { top: 74px; border-color: #d8e1ee; border-radius: 13px; } .dc-team-column-head, .dc-team-row { display: grid; grid-template-columns: 34px minmax(100px, .9fr) minmax(150px, 2fr) minmax(95px, .8fr) minmax(76px, .65fr); align-items: center; gap: 14px; } .dc-team-column-head { margin-top: 20px; padding: 0 14px 9px; color: #8a929e; font-size: 11px; font-weight: 700; letter-spacing: .03em; } .dc-team-column-head span:first-child { grid-column: 1 / 3; } .dc-team-column-head span:nth-child(2) { grid-column: 4; } .dc-team-column-head span:last-child { grid-column: 5; } .dc-team-list { display: grid; gap: 6px; } .dc-team-row { min-height: 55px; padding: 8px 14px; border: 1px solid transparent; border-radius: 12px; background: #f7f8fa; cursor: crosshair; } .dc-team-row:hover, .dc-team-row:focus-visible { border-color: #b8d8ff; background: #eef6ff; outline: none; } .dc-team-rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #687788; background: #fff; font-size: 12px; font-weight: 750; } .dc-team-row:nth-child(-n+3) .dc-team-rank { color: #0067d5; background: #dceeff; } .dc-team-name { overflow: hidden; color: #283343; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .dc-team-bar-track { height: 9px; overflow: hidden; border-radius: 99px; background: #e7ebf0; } .dc-team-bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #54b6ff, #007aff); } .dc-team-sales { color: #202b39; font-size: 14px; font-variant-numeric: tabular-nums; } .dc-team-compare { justify-self: start; min-width: 64px; padding: 5px 8px; border-radius: 8px; color: #6147b4; background: #efeafa; font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; } #employeeDataCenterPanel .data-center-chart-tooltip { z-index: 8; } @media (max-width: 1200px) { #employeeDataCenterPanel > .data-center-section, #employeeDataCenterPanel .data-center-main-grid > .data-center-goal-card { grid-column: 1 / -1; } #employeeDataCenterPanel .data-center-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); } #employeeDataCenterPanel .data-center-metric.primary { grid-column: auto; } } @media (max-width: 720px) { #employeeDataCenterPanel { grid-template-columns: minmax(0,1fr); } #employeeDataCenterPanel .data-center-intro { min-height: 0; padding: 25px 22px; } #employeeDataCenterPanel .data-center-toolbar { margin: -23px 8px 0; } #employeeDataCenterPanel .data-center-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } #employeeDataCenterPanel .data-center-metric.primary { grid-column: 1 / -1; } #employeeDataCenterPanel .data-center-mini-card:first-child, #employeeDataCenterPanel .data-center-chart-card { padding: 20px 17px; } .dc-trend-overview { flex-wrap: wrap; } .dc-trend-overview > div { flex: 1 1 42%; } .dc-trend-plot { overflow-x: auto; } .dc-trend-plot svg { min-width: 560px; } .dc-team-summary > div { min-width: 0; flex: 1; } .dc-team-column-head { display: none; } .dc-team-row { grid-template-columns: 30px minmax(80px,1fr) minmax(75px,auto); gap: 9px; } .dc-team-bar-track { grid-column: 2 / 4; grid-row: 2; } .dc-team-sales { grid-column: 3; grid-row: 1; font-size: 12px; } .dc-team-compare { grid-column: 2 / 4; grid-row: 3; } } @media (prefers-reduced-transparency: reduce) { #employeeDataCenterPanel .data-center-sync { background: #303c53; backdrop-filter: none; } }