.databi-header-left { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: 20px; } .view-mode-switch { display: inline-flex; flex: 0 0 auto; gap: 3px; padding: 3px; border: 1px solid rgba(61, 141, 190, 0.42); border-radius: 8px; background: rgba(7, 28, 47, 0.72); } .view-mode-switch button { height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: #9eb7ce; cursor: pointer; font: inherit; font-size: 13px; font-weight: 760; } .view-mode-switch button:hover, .view-mode-switch button.is-active { background: rgba(37, 216, 245, 0.18); color: #e9f6ff; box-shadow: inset 0 0 0 1px rgba(37, 216, 245, 0.38); } .databi-screen--report { display: grid; grid-template-rows: auto minmax(0, 1fr); } .databi-shell--report { min-width: 1180px; min-height: 100vh; padding: 0 24px 28px 0; background: #f5f7fb; color: #172033; } .databi-shell--report .databi-report-sidebar { border-right-color: #dfe8f2; background: #ffffff; box-shadow: 8px 0 26px rgba(15, 23, 42, 0.04); } .databi-shell--report .report-sidebar-brand { border-color: #b9dcf4; background: #eef8ff; box-shadow: inset 0 0 0 1px rgba(22, 136, 217, 0.04); } .databi-shell--report .report-sidebar-brand svg { color: #1688d9; filter: none; } .databi-shell--report .report-sidebar-item { color: #5f6f86; } .databi-shell--report .report-sidebar-item:hover, .databi-shell--report .report-sidebar-item.is-active { border-color: #d8e5f0; background: #eef7ff; color: #126fb2; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } .databi-shell--report .report-sidebar-item.is-active:hover { border-color: #1688d9; background: #e9f5ff; } .databi-shell--report .databi-header { height: auto; min-height: 72px; flex-wrap: wrap; align-content: center; row-gap: 10px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #e4ebf3; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05); } .databi-shell--report .header-controls { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } .databi-shell--report .brand-emblem { border-color: #b9dcf4; background: #eef8ff; box-shadow: inset 0 0 0 1px rgba(22, 136, 217, 0.04); } .databi-shell--report .brand-emblem svg { color: #1688d9; filter: none; } .databi-shell--report .brand-lockup h1 { color: #172033; } .databi-shell--report .view-mode-switch, .databi-shell--report .screen-switch, .databi-shell--report .game-switch { border-color: #d8e5f0; background: #eef4fa; } .databi-shell--report .view-mode-switch button, .databi-shell--report .screen-switch button, .databi-shell--report .game-switch button { color: #5f6f86; } .databi-shell--report .view-mode-switch button:hover, .databi-shell--report .view-mode-switch button.is-active, .databi-shell--report .screen-switch button:hover, .databi-shell--report .screen-switch button.is-active, .databi-shell--report .game-switch button:hover, .databi-shell--report .game-switch button.is-active { background: #ffffff; color: #126fb2; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); } .databi-shell--report .filter-trigger, .databi-shell--report .date-range-trigger { border-color: #d8e5f0; background: #ffffff; color: #172033; } .databi-shell--report .filter-trigger:hover, .databi-shell--report .filter-trigger[aria-expanded="true"], .databi-shell--report .date-range-trigger:hover, .databi-shell--report .date-range-trigger[aria-expanded="true"] { border-color: #1688d9; box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.1); } .databi-shell--report .filter-label, .databi-shell--report .date-range-label { background: #ffffff; color: #718198; } .databi-shell--report .filter-trigger:hover .filter-label, .databi-shell--report .filter-trigger[aria-expanded="true"] .filter-label, .databi-shell--report .date-range-trigger:hover .date-range-label, .databi-shell--report .date-range-trigger[aria-expanded="true"] .date-range-label, .databi-shell--report .control-glyph, .databi-shell--report .filter-label .filter-icon { color: #1688d9; } .databi-shell--report .filter-value, .databi-shell--report .date-range-values b { color: #172033; } .databi-shell--report .filter-icon, .databi-shell--report .filter-chevron, .databi-shell--report .date-range-chevron, .databi-shell--report .date-range-label svg { color: #718198; } .databi-shell--report .date-range-values i { color: #8c9aab; } .databi-shell--report .filter-popover, .databi-shell--report .date-time-popover { border-color: #d8e5f0; background: #ffffff; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14); } .databi-shell--report .filter-popover button, .databi-shell--report .date-time-shortcuts button, .databi-shell--report .date-time-fields button, .databi-shell--report .calendar-toolbar button, .databi-shell--report .calendar-day, .databi-shell--report .time-column button, .databi-shell--report .date-time-footer button { color: #34445a; } .databi-shell--report .filter-popover button:hover, .databi-shell--report .filter-popover button.is-active, .databi-shell--report .date-time-shortcuts button:hover, .databi-shell--report .date-time-shortcuts button.is-active, .databi-shell--report .calendar-day:hover, .databi-shell--report .time-column button:hover, .databi-shell--report .time-column button.is-active { background: #eef7ff; color: #126fb2; } .databi-shell--report .filter-empty, .databi-shell--report .filter-search span, .databi-shell--report .date-time-fields span, .databi-shell--report .date-time-footer span, .databi-shell--report .time-column > span, .databi-shell--report .calendar-weekday { color: #718198; } .databi-shell--report .filter-search input, .databi-shell--report .date-time-fields button { border-color: #d8e5f0; background: #ffffff; color: #172033; } .databi-shell--report .filter-search input:focus, .databi-shell--report .date-time-fields button.is-active { border-color: #1688d9; box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.1); } .databi-shell--report .calendar-toolbar, .databi-shell--report .calendar-pane, .databi-shell--report .date-time-fields, .databi-shell--report .date-time-footer, .databi-shell--report .time-column, .databi-shell--report .time-column > span { border-color: #e4ebf3; } .databi-shell--report .calendar-toolbar strong, .databi-shell--report .date-time-fields b { color: #172033; } .databi-shell--report .calendar-day.is-muted { color: #b5c0cd; } .databi-shell--report .calendar-day.is-start, .databi-shell--report .calendar-day.is-end, .databi-shell--report .calendar-day.is-active { background: #1688d9; color: #ffffff; } .databi-shell--report .calendar-day.is-between { background: #e9f5ff; } .databi-shell--report .date-time-footer button { border-color: #1688d9; background: #1688d9; color: #ffffff; } .databi-report { display: grid; align-content: start; gap: 16px; min-width: 0; } .databi-empty-report-section { min-height: calc(100vh - 28px); } .report-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .report-metric-card { display: grid; min-width: 0; min-height: 142px; align-content: start; gap: 8px; padding: 16px 18px; border: 1px solid #dfe8f2; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .report-metric-card--clickable { cursor: pointer; } .report-metric-card--clickable:hover, .report-metric-card--clickable:focus-visible { border-color: #1688d9; box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.08), 0 8px 20px rgba(15, 23, 42, 0.06); outline: none; } .report-metric-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; } .report-metric-head > span:first-child { overflow: hidden; color: #53647b; font-size: 13px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } .report-metric-card > strong { overflow: hidden; color: #172033; font-size: 28px; font-weight: 780; line-height: 1.14; text-overflow: ellipsis; white-space: nowrap; } .report-metric-primary-label { color: #7b8a9d; font-size: 12px; } .report-metric-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; } .report-metric-detail { display: grid; min-width: 0; gap: 2px; } .report-metric-detail small { overflow: hidden; color: #8a98aa; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .report-metric-detail b { overflow: hidden; color: #243044; font-size: 14px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } .report-workbench { min-width: 0; overflow: hidden; border: 1px solid #dfe8f2; border-radius: 8px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .report-tabs { display: flex; min-width: 0; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid #e4ebf3; overflow-x: auto; } .report-tabs button { height: 38px; flex: 0 0 auto; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #65748a; cursor: pointer; font: inherit; font-size: 13px; font-weight: 760; } .report-tabs button:hover, .report-tabs button.is-active { border-bottom-color: #1688d9; color: #126fb2; } .report-tab-panel { min-width: 0; } .report-panel { display: grid; min-width: 0; gap: 14px; padding: 16px; } .report-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .report-panel-head h2 { margin: 0; color: #172033; font-size: 18px; font-weight: 780; } .report-panel-action { height: 32px; padding: 0 14px; border: 1px solid #c7d7e7; border-radius: 8px; background: #ffffff; color: #126fb2; cursor: pointer; font: inherit; font-size: 13px; font-weight: 760; } .report-panel-action:hover { border-color: #1688d9; background: #eef7ff; } .report-panel-action:disabled { cursor: not-allowed; opacity: 0.48; } .report-metric-table-block { min-width: 0; } .report-table-wrap { min-width: 0; overflow: auto; border: 1px solid #e4ebf3; border-radius: 8px; } .report-table { width: 100%; min-width: 860px; border-collapse: collapse; background: #ffffff; } .report-table--wide { min-width: 2860px; } .report-table th, .report-table td { height: 38px; padding: 0 12px; border-bottom: 1px solid #edf2f7; color: #34445a; font-size: 13px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .report-table th { position: sticky; top: 0; z-index: 1; background: #f8fafc; color: #65748a; font-size: 12px; font-weight: 760; } .report-table th:first-child, .report-table td:first-child { width: 48px; color: #8a98aa; text-align: center; } .report-table td.is-left { text-align: left; } .report-table th.is-sticky-left, .report-table td.is-sticky-left { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 #dbe7f2, 16px 0 18px -20px rgba(27, 39, 56, 0.48); } .report-table th.is-sticky-left { z-index: 4; background: #f8fafc; } .report-table td.is-sticky-left { background: #ffffff; } .report-table tbody tr:hover td { background: #f7fbff; } .report-table tbody tr:hover td.is-sticky-left { background: #f7fbff; } .report-row-total td { background: #eef7ff; color: #172033; font-weight: 780; } .report-row-total td.is-sticky-left { background: #eef7ff; } .report-row-date-total td { background: #f7fafc; color: #243044; font-weight: 760; } .report-row-date-total td.is-sticky-left { background: #f7fafc; } .report-row-expandable { cursor: pointer; } .report-row-expandable:focus-visible td { background: #e9f5ff; outline: 2px solid #1688d9; outline-offset: -2px; } .report-row-total:hover td, .report-row-date-total:hover td { background: #e9f5ff; } .report-row-total:hover td.is-sticky-left, .report-row-date-total:hover td.is-sticky-left { background: #e9f5ff; } .report-sort-button { display: flex; width: 100%; height: 38px; align-items: center; justify-content: flex-end; gap: 6px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; } .report-sort-button--left { justify-content: flex-start; } .report-sort-button:hover, .report-sort-button.is-active { color: #126fb2; } .report-sort-button i { color: #9aa7b8; font-size: 11px; font-style: normal; } .report-link-button { display: inline-flex; max-width: 100%; min-width: 0; align-items: center; justify-content: flex-end; padding: 0; border: 0; background: transparent; color: #126fb2; cursor: pointer; font: inherit; font-weight: 780; text-align: inherit; } .report-link-button:hover { color: #075d99; text-decoration: underline; text-underline-offset: 3px; } .report-link-button:focus-visible { border-radius: 4px; outline: 2px solid #1688d9; outline-offset: 2px; } .report-link-button--left { justify-content: flex-start; text-align: left; } .report-country-cell { display: inline-flex; max-width: 220px; min-width: 0; align-items: center; gap: 8px; } .report-country-cell i { flex: 0 0 auto; font-style: normal; } .report-country-cell span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .report-date-cell { display: inline-flex; max-width: 180px; min-width: 0; align-items: center; gap: 6px; color: #53647b; font-weight: 700; } .report-date-cell > span:not(.report-expand-caret) { overflow: hidden; text-overflow: ellipsis; } .report-date-cell small { color: #8a98aa; font-size: 11px; font-weight: 700; } .report-expand-caret { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; align-items: center; justify-content: center; color: #7b8a9d; font-size: 17px; line-height: 1; transition: transform 160ms ease; } .report-expand-caret.is-open { transform: rotate(90deg); } .report-row-expanded-detail > td:first-child { width: auto; padding: 10px 12px 14px 74px; background: #fbfdff; text-align: left; } .report-row-expanded-detail:hover > td { background: #fbfdff; } .report-subtable-wrap { min-width: 0; overflow: auto; border: 1px solid #e2ebf5; border-radius: 8px; background: #ffffff; } .report-subtable { min-width: 2620px; } .report-subtable th { position: static; background: #f8fbff; } .report-subtable th:first-child, .report-subtable td:first-child { width: 48px; } .report-subtable-empty { display: grid; min-height: 72px; place-items: center; border: 1px dashed #d8e5f0; border-radius: 8px; background: #ffffff; color: #8a98aa; } .report-modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 28px; background: rgba(15, 23, 42, 0.28); } .report-modal { display: grid; width: min(960px, 100%); max-height: min(760px, calc(100vh - 56px)); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid #d8e5f0; border-radius: 8px; background: #ffffff; box-shadow: 0 20px 56px rgba(15, 23, 42, 0.22); } .report-modal-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #edf2f7; } .report-modal-head h2 { min-width: 0; margin: 0; overflow: hidden; color: #172033; font-size: 16px; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; } .report-modal-close, .report-pagination button { height: 30px; padding: 0 12px; border: 1px solid #c7d7e7; border-radius: 8px; background: #ffffff; color: #126fb2; cursor: pointer; font: inherit; font-size: 13px; font-weight: 760; } .report-modal-close:hover, .report-pagination button:hover:not(:disabled) { border-color: #1688d9; background: #eef7ff; } .report-pagination button:disabled { cursor: not-allowed; opacity: 0.48; } .report-modal-body { display: grid; min-height: 0; gap: 12px; padding: 14px 16px 16px; overflow: auto; } .report-modal-toolbar { align-items: center; display: flex; justify-content: flex-end; } .report-source-filter { align-items: center; color: #65748a; display: inline-flex; font-size: 13px; font-weight: 760; gap: 10px; } .report-source-filter select { appearance: none; background: #ffffff; border: 1px solid #c7d7e7; border-radius: 8px; color: #253047; cursor: pointer; font: inherit; min-width: 150px; padding: 7px 12px; } .report-source-filter select:focus { border-color: #1688d9; box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.12); outline: none; } .report-modal-table-wrap { min-width: 0; overflow: auto; border: 1px solid #e4ebf3; border-radius: 8px; } .report-modal-table { width: 100%; min-width: 640px; border-collapse: collapse; background: #ffffff; } .report-modal-table th, .report-modal-table td { height: 38px; padding: 0 12px; border-bottom: 1px solid #edf2f7; color: #34445a; font-size: 13px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .report-modal-table th { position: sticky; top: 0; z-index: 1; background: #f8fafc; color: #65748a; font-size: 12px; font-weight: 760; } .report-modal-table th:first-child, .report-modal-table td:first-child { text-align: left; } .report-modal-table tbody tr:hover td { background: #f7fbff; } .report-modal-table tbody tr.report-clickable-row { cursor: pointer; } .report-modal-table tbody tr.report-clickable-row:hover td { background: #eef7ff; } .report-modal-table tbody tr.report-clickable-row:focus-visible td { background: #e9f5ff; outline: 2px solid #1688d9; outline-offset: -2px; } .report-user-cell { display: inline-flex; max-width: 260px; min-width: 0; align-items: center; gap: 8px; } .report-user-cell img { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; } .report-user-cell > span { display: grid; min-width: 0; gap: 1px; } .report-user-cell b, .report-user-cell small, .report-event-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .report-user-cell b { color: #172033; font-weight: 780; } .report-user-cell small { color: #8a98aa; font-size: 11px; font-weight: 700; } .report-event-id { display: inline-block; max-width: 240px; vertical-align: bottom; } .report-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #65748a; font-size: 13px; } .report-pagination > div { display: inline-flex; align-items: center; gap: 10px; } .report-pagination b { color: #34445a; font-weight: 760; } .report-pair-cell { display: inline-flex; min-width: 118px; align-items: baseline; justify-content: flex-end; gap: 8px; } .report-pair-cell b { color: #243044; font-size: 13px; font-weight: 760; } .report-pair-cell small { color: #64748b; font-size: 12px; font-weight: 700; } .report-placeholder { color: #94a3b8; } .report-trend-up, .report-delta { color: #0f9b72; font-weight: 760; } .report-trend-down, .report-delta--down { color: #d97706; font-weight: 760; } .report-delta--empty { color: #94a3b8; } .report-table-skeleton-row td, .report-table-empty-row td { text-align: center; } .report-table-empty-row td { height: 96px; color: #8a98aa; } .report-empty { display: grid; min-height: 240px; place-items: center; border: 1px dashed #d8e5f0; border-radius: 8px; color: #8a98aa; } .report-revenue-chart { width: 100%; height: 300px; border: 1px solid #e4ebf3; border-radius: 8px; } .report-chart-skeleton { display: grid; gap: 14px; padding: 16px; border: 1px solid #e4ebf3; border-radius: 8px; } .report-skeleton-title { width: 112px; height: 14px; } .report-skeleton-value { width: 160px; height: 32px; } .report-skeleton-line { width: 100%; height: 16px; } .report-skeleton-line--short { width: 62%; } .report-skeleton-chart { width: 100%; height: 240px; } .databi-shell--report .databi-panel, .databi-shell--report .mini-stat, .databi-shell--report .metric-card { border-color: #dfe8f2; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .databi-shell--report .panel-title, .databi-shell--report .self-game-title strong, .databi-shell--report .metric-content strong, .databi-shell--report .risk-user-copy strong, .databi-shell--report .definition-row strong { color: #172033; } .databi-shell--report .panel-info { border-color: #c7d7e7; color: #6b7a90; } .databi-shell--report .metric-label-row, .databi-shell--report .mini-stat > span, .databi-shell--report .section-label, .databi-shell--report .rank-title, .databi-shell--report .self-game-title span, .databi-shell--report .definition-row span, .databi-shell--report .risk-user-copy small { color: #65748a; } .databi-shell--report .metric-title-icon, .databi-shell--report .metric-unit-icon { color: #1688d9; } .databi-shell--report .metric-delta { border-top-color: #e4ebf3; color: #7b8a9d; } .databi-shell--report .self-game-table th, .databi-shell--report .self-game-table td { border-bottom-color: #edf2f7; color: #34445a; } .databi-shell--report .self-game-table th { background: #f8fafc; color: #65748a; } .databi-shell--report .definition-row { border-color: #e4ebf3; background: #f8fafc; } .databi-shell--report .panel-empty { color: #8a98aa; }