/* Analytics page: calm workspace canvas, with a distinctive chart-first layout. */ body:has(#statsPanel.analytics-page.active) { background: linear-gradient(135deg, #dce9ff 0%, #eff5ff 52%, #e2edff 100%) !important; overflow-x: hidden; } body:has(#statsPanel.analytics-page.active) .content { background: transparent !important; } #statsPanel.analytics-page { --a-ink: #23334b; --a-muted: #586a82; --a-faint: #79889c; --a-line: #e3eaf3; --a-blue: #5268df; --a-green: #22a889; --a-violet: #8760d5; --a-amber: #d98a35; display: none; width: 100%; height: 100%; min-height: 0; overflow: auto; padding: clamp(16px, 2.3vw, 32px); color: var(--a-ink); background: transparent; font-size: 15px; font-weight: 400 !important; scrollbar-gutter: stable; } #statsPanel.analytics-page.active { display: block; } #statsPanel.analytics-page * { box-sizing: border-box; font-weight: 400 !important; } #statsPanel.analytics-page :is(h1, h2, h3, strong, b, button.active) { font-weight: 500 !important; } #statsPanel.analytics-page .analytics-layout { width: min(1480px, 100%); margin: 0 auto; } /* Page heading and scope selector */ #statsPanel.analytics-page .analytics-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; } #statsPanel.analytics-page .analytics-heading { min-width: 0; } #statsPanel.analytics-page .analytics-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--a-muted); font-size: 13px; } #statsPanel.analytics-page .analytics-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--a-green); box-shadow: 0 0 0 4px #22a88920; } #statsPanel.analytics-page .analytics-heading h1 { margin: 5px 0 2px; color: #1e2e46; font-size: clamp(29px, 3vw, 38px); letter-spacing: -.7px; } #statsPanel.analytics-page .analytics-heading h1 span { color: var(--a-blue); } #statsPanel.analytics-page .analytics-heading p { margin: 0; color: var(--a-muted); font-size: 15px; } #statsPanel.analytics-page .analytics-scope { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border: 1px solid #dbe4f1; border-radius: 13px; background: #ffffffb8; } #statsPanel.analytics-page .analytics-scope button { min-height: 37px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--a-muted); font-size: 13px; cursor: pointer; } #statsPanel.analytics-page .analytics-scope button.active { color: #3449b5; background: #fff; box-shadow: 0 2px 8px #263e6820; } /* Four compact metric tiles */ #statsPanel.analytics-page .analytics-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; } #statsPanel.analytics-page .analytics-metric { --metric-color: var(--a-blue); --metric-tint: #eef0ff; display: grid; grid-template-columns: 43px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 4px; min-width: 0; min-height: 108px; padding: 16px 17px; border: 1px solid #e1e8f2; border-radius: 17px; background: #fff; box-shadow: 0 8px 26px #344d7510; } #statsPanel.analytics-page .analytics-metric--green { --metric-color: var(--a-green); --metric-tint: #e9f8f3; } #statsPanel.analytics-page .analytics-metric--violet { --metric-color: var(--a-violet); --metric-tint: #f2edfb; } #statsPanel.analytics-page .analytics-metric--amber { --metric-color: var(--a-amber); --metric-tint: #fff3e5; } #statsPanel.analytics-page .analytics-metric-symbol { display: grid; grid-row: 1 / 3; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: var(--metric-color); background: var(--metric-tint); } #statsPanel.analytics-page .analytics-metric-symbol svg { width: 22px; height: 22px; } #statsPanel.analytics-page .analytics-metric > div { display: grid; gap: 3px; min-width: 0; } #statsPanel.analytics-page .analytics-metric > div > span { color: var(--a-muted); font-size: 13px; } #statsPanel.analytics-page .analytics-metric strong { overflow: hidden; color: #263750; font-size: clamp(18px, 1.6vw, 23px); text-overflow: ellipsis; white-space: nowrap; } #statsPanel.analytics-page .analytics-metric > small { grid-column: 2; color: var(--a-faint); font-size: 11px; } /* Main chart panel */ #statsPanel.analytics-page .analytics-feature, #statsPanel.analytics-page .analytics-trend-card, #statsPanel.analytics-page .analytics-project-card { min-width: 0; border: 1px solid #e0e8f2; border-radius: 19px; background: #fff; box-shadow: 0 10px 30px #344d7510; } #statsPanel.analytics-page .analytics-feature { position: relative; padding: 21px 22px 13px; } #statsPanel.analytics-page .analytics-feature-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 17px; border-bottom: 1px solid #edf1f6; } #statsPanel.analytics-page .analytics-section-title { display: flex; align-items: center; gap: 12px; min-width: 185px; } #statsPanel.analytics-page .analytics-chart-mark { display: grid; place-items: center; flex: 0 0 43px; width: 43px; height: 43px; border-radius: 13px; color: var(--a-blue); background: #eef0ff; } #statsPanel.analytics-page .analytics-chart-mark svg { width: 23px; height: 23px; } #statsPanel.analytics-page .analytics-section-title > div > span, #statsPanel.analytics-page .analytics-trend-card header > div > div > span { color: var(--a-muted); font-size: 12px; } #statsPanel.analytics-page .analytics-section-title h2 { margin: 2px 0; color: #293a53; font-size: 18px; } #statsPanel.analytics-page .analytics-section-title p { margin: 0; color: var(--a-muted); font-size: 12px; } #statsPanel.analytics-page .analytics-range { display: grid; grid-template-columns: auto auto auto auto; align-items: center; justify-content: end; gap: 8px; min-width: 0; margin: 0; } #statsPanel.analytics-page .stats-range-presets { display: flex; grid-column: 1 / -1; flex-wrap: wrap; justify-content: flex-end; gap: 3px; padding: 3px; border: 1px solid var(--a-line); border-radius: 10px; background: #f7f9fc; } #statsPanel.analytics-page .stats-range-presets button, #statsPanel.analytics-page .analytics-apply { min-height: 33px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--a-muted); font-size: 12px; cursor: pointer; } #statsPanel.analytics-page .stats-range-presets button.active { color: #364bb7; background: #fff; box-shadow: 0 1px 5px #24344c18; } #statsPanel.analytics-page .analytics-date-field { display: flex; align-items: center; gap: 5px; color: var(--a-muted); font-size: 12px; } #statsPanel.analytics-page .analytics-date-field .task-date-field { min-width: 0; } #statsPanel.analytics-page .analytics-date-field input { width: 112px; min-height: 34px; padding: 0 8px; border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-ink); background: #fff; font-size: 12px; } #statsPanel.analytics-page .analytics-apply { color: #fff; background: var(--a-blue); } #statsPanel.analytics-page #statsRangeMessage { grid-column: 1 / -1; color: var(--a-muted); font-size: 11px; text-align: left; } #statsPanel.analytics-page .stats-jalali-picker { z-index: 40; } #statsPanel.analytics-page .analytics-week-chart { min-width: 0; min-height: 300px; overflow: hidden; padding: 17px 0 3px; } #statsPanel.analytics-page .analytics-week-chart .stats-y-axis { width: 38px; color: var(--a-muted); font-size: 11px; } #statsPanel.analytics-page .stats-day-bars { min-width: 0 !important; grid-template-columns: repeat(var(--stats-day-count, 7), minmax(0, 1fr)); gap: clamp(5px, 1.3vw, 16px); } #statsPanel.analytics-page .stats-day-column { width: auto !important; min-width: 0; } #statsPanel.analytics-page .stats-day-column b { color: #455872; font-size: 11px; } #statsPanel.analytics-page .stats-day-column small { color: var(--a-muted); font-size: 12px; } #statsPanel.analytics-page .stats-stack-bar { border-radius: 8px 8px 3px 3px; } #statsPanel.analytics-page .analytics-chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 9px; border-top: 1px solid #edf1f6; color: var(--a-muted); font-size: 11px; } #statsPanel.analytics-page .analytics-chart-foot span:first-child { display: inline-flex; align-items: center; gap: 7px; } #statsPanel.analytics-page .analytics-chart-foot i { width: 8px; height: 8px; border-radius: 50%; background: var(--a-blue); } /* Monthly trends and project comparisons */ #statsPanel.analytics-page .analytics-subhead { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 25px 2px 11px; } #statsPanel.analytics-page .analytics-subhead > div > span { color: var(--a-blue); font-size: 12px; } #statsPanel.analytics-page .analytics-subhead h2 { margin: 2px 0 0; color: #263750; font-size: 19px; } #statsPanel.analytics-page .analytics-subhead small { color: var(--a-muted); font-size: 12px; } #statsPanel.analytics-page .analytics-trends, #statsPanel.analytics-page .analytics-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } #statsPanel.analytics-page .analytics-trend-card { padding: 17px 18px 12px; } #statsPanel.analytics-page .analytics-trend-card header { display: flex; align-items: center; justify-content: space-between; gap: 14px; } #statsPanel.analytics-page .analytics-trend-card header > div { display: flex; align-items: center; gap: 10px; } #statsPanel.analytics-page .analytics-trend-card header > div > div { display: grid; gap: 2px; } #statsPanel.analytics-page .analytics-trend-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 12px; color: var(--a-green); background: #eaf8f3; font-size: 19px; } #statsPanel.analytics-page .analytics-trend-icon--blue { color: var(--a-blue); background: #eef0ff; } #statsPanel.analytics-page .analytics-trend-card h3 { margin: 0; color: #2a3a52; font-size: 16px; } #statsPanel.analytics-page .analytics-trend-card header > strong { color: #3148b4; font-size: 17px; } #statsPanel.analytics-page .analytics-trend-card > p { margin: 7px 0 2px; color: var(--a-muted); font-size: 12px; } #statsPanel.analytics-page .weekly-line-chart { min-width: 0; max-width: 100%; overflow: hidden; } #statsPanel.analytics-page .weekly-y-axis, #statsPanel.analytics-page .weekly-x-axis { color: var(--a-muted); font-size: 11px; } #statsPanel.analytics-page .analytics-project-card { padding: 18px; } #statsPanel.analytics-page .analytics-project-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; } #statsPanel.analytics-page .analytics-project-card > header > div > span { color: var(--a-blue); font-size: 12px; } #statsPanel.analytics-page .analytics-project-card h3 { margin: 2px 0 0; color: #293a53; font-size: 16px; } #statsPanel.analytics-page .analytics-total-label { padding: 6px 9px; border: 1px solid var(--a-line); border-radius: 8px; color: var(--a-muted); font-size: 11px; white-space: nowrap; } #statsPanel.analytics-page .stats-breakdown-grid { display: grid; grid-template-columns: minmax(135px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 16px; } #statsPanel.analytics-page .stats-project-donut { width: min(100%, 180px); aspect-ratio: 1; justify-self: center; } #statsPanel.analytics-page .stats-project-donut::before { inset: 24%; } #statsPanel.analytics-page .stats-project-donut strong { color: var(--a-ink); font-size: 16px; } #statsPanel.analytics-page .stats-project-share-list { min-width: 0; } #statsPanel.analytics-page .stats-project-share-row { grid-template-columns: 9px minmax(60px, .8fr) 64px minmax(50px, 1fr) 38px; gap: 6px; color: var(--a-muted); font-size: 11px; } #statsPanel.analytics-page .stats-project-share-row strong, #statsPanel.analytics-page .stats-project-share-row b { color: #31425b; font-size: 11px; } #statsPanel.analytics-page .stats-project-share-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1080px) { #statsPanel.analytics-page .analytics-header { align-items: flex-start; flex-direction: column; } #statsPanel.analytics-page .analytics-feature-head { flex-direction: column; } #statsPanel.analytics-page .analytics-range { width: 100%; justify-content: start; } #statsPanel.analytics-page .stats-range-presets { justify-content: flex-start; } } @media (max-width: 760px) { #statsPanel.analytics-page { padding: 15px 12px 25px; } #statsPanel.analytics-page .analytics-header { gap: 14px; margin-bottom: 17px; } #statsPanel.analytics-page .analytics-heading p { max-width: 36ch; font-size: 14px; } #statsPanel.analytics-page .analytics-scope { display: flex; width: 100%; } #statsPanel.analytics-page .analytics-scope button { flex: 1 1 auto; min-height: 38px; padding: 0 7px; font-size: 12px; } #statsPanel.analytics-page .analytics-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #statsPanel.analytics-page .analytics-metric { grid-template-columns: 35px minmax(0, 1fr); column-gap: 8px; min-height: 91px; padding: 11px 10px; border-radius: 14px; } #statsPanel.analytics-page .analytics-metric-symbol { width: 35px; height: 35px; border-radius: 11px; } #statsPanel.analytics-page .analytics-metric-symbol svg { width: 19px; height: 19px; } #statsPanel.analytics-page .analytics-metric > div > span { font-size: 11px; } #statsPanel.analytics-page .analytics-metric strong { font-size: 16px; } #statsPanel.analytics-page .analytics-metric > small { font-size: 10px; } #statsPanel.analytics-page .analytics-feature { padding: 14px 13px 11px; border-radius: 16px; } #statsPanel.analytics-page .analytics-feature-head { gap: 14px; padding-bottom: 13px; } #statsPanel.analytics-page .analytics-section-title { min-width: 0; } #statsPanel.analytics-page .analytics-range { grid-template-columns: 1fr 1fr auto; gap: 7px; } #statsPanel.analytics-page .stats-range-presets { grid-column: 1 / -1; justify-content: stretch; } #statsPanel.analytics-page .stats-range-presets button { flex: 1 1 auto; min-height: 34px; padding: 0 6px; } #statsPanel.analytics-page .analytics-date-field { min-width: 0; } #statsPanel.analytics-page .analytics-date-field .task-date-field { flex: 1; } #statsPanel.analytics-page .analytics-date-field input { width: 100%; min-width: 0; } #statsPanel.analytics-page .analytics-week-chart { min-height: 280px; padding-top: 13px; } #statsPanel.analytics-page .analytics-week-chart .stats-y-axis { width: 29px; font-size: 10px; } #statsPanel.analytics-page .stats-day-bars { gap: 4px; } #statsPanel.analytics-page .stats-day-column b { font-size: 9px; } #statsPanel.analytics-page .stats-day-column small { font-size: 10px; } #statsPanel.analytics-page .analytics-chart-foot { align-items: flex-start; flex-direction: column; gap: 5px; } #statsPanel.analytics-page .analytics-subhead { align-items: flex-start; flex-direction: column; gap: 3px; margin-top: 20px; } #statsPanel.analytics-page .analytics-subhead h2 { font-size: 18px; } #statsPanel.analytics-page .analytics-trends, #statsPanel.analytics-page .analytics-projects { grid-template-columns: minmax(0, 1fr); gap: 9px; } #statsPanel.analytics-page .analytics-trend-card { padding: 14px 13px 10px; } #statsPanel.analytics-page .analytics-project-card { padding: 14px 13px; } #statsPanel.analytics-page .stats-breakdown-grid { grid-template-columns: minmax(115px, .72fr) minmax(0, 1.28fr); gap: 11px; } #statsPanel.analytics-page .stats-project-donut { width: min(100%, 148px); } #statsPanel.analytics-page .stats-project-share-row { grid-template-columns: 8px minmax(45px, .8fr) 52px minmax(35px, 1fr) 31px; gap: 4px; font-size: 10px; } #statsPanel.analytics-page .stats-project-share-row strong, #statsPanel.analytics-page .stats-project-share-row b { font-size: 10px; } } @media (max-width: 390px) { #statsPanel.analytics-page .analytics-metric { grid-template-columns: 30px minmax(0, 1fr); column-gap: 6px; } #statsPanel.analytics-page .analytics-metric-symbol { width: 30px; height: 30px; } #statsPanel.analytics-page .analytics-metric strong { font-size: 15px; } #statsPanel.analytics-page .stats-breakdown-grid { grid-template-columns: 1fr; } #statsPanel.analytics-page .stats-project-donut { width: 138px; } }