/* App Statistics Section Styles */
/* Matches other sections: about_section, version_section, etc. */
.app_statistics_section,
.app_rankings_section {
    border: 1px solid rgb(243 244 246);
    border-radius: 0.75rem;
    padding: 1rem;
}

@media (min-width: 640px) {

    .app_statistics_section,
    .app_rankings_section {
        padding: 1.25rem;
    }
}

.dark .app_statistics_section,
.dark .app_rankings_section {
    border-color: rgb(31 41 55);
}

.app_statistics_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.app_statistics_controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.app_statistics_period_filter {
    display: flex;
    gap: 0.25rem;
    background: rgb(243 244 246);
    padding: 0.125rem;
    border-radius: 0.375rem;
}

.dark .app_statistics_period_filter {
    background: rgb(31 41 55);
}

.app_statistics_period_btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgb(107 114 128);
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.app_statistics_period_btn:hover {
    color: rgb(55 65 81);
}

.dark .app_statistics_period_btn {
    color: rgb(156 163 175);
}

.dark .app_statistics_period_btn:hover {
    color: rgb(209 213 219);
}

.app_statistics_period_btn.active {
    background: white;
    color: rgb(17 24 39);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .app_statistics_period_btn.active {
    background: rgb(55 65 81);
    color: white;
}

.app_statistics_title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: rgb(17 24 39);
    margin: 0;
}

.dark .app_statistics_title {
    color: white;
}

.app_statistics_icon {
    width: 1rem;
    height: 1rem;
    color: rgb(156 163 175);
}

.app_statistics_badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    background: rgb(243 244 246);
    color: rgb(107 114 128);
    border-radius: 9999px;
    font-weight: 500;
}

.dark .app_statistics_badge {
    background: rgb(31 41 55);
    color: rgb(156 163 175);
}

/* Loading State */
.app_statistics_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: rgb(107 114 128);
    font-size: 0.8125rem;
}

.dark .app_statistics_loading {
    color: rgb(156 163 175);
}

.app_statistics_spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgb(229 231 235);
    border-top-color: rgb(59 130 246);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.dark .app_statistics_spinner {
    border-color: rgb(55 65 81);
    border-top-color: rgb(59 130 246);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Grid Layout */
.app_statistics_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
    .app_statistics_grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Cards - No background, minimal styling */
.app_statistics_card {
    padding: 0;
}

.app_statistics_card_full {
    grid-column: 1 / -1;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(243 244 246);
}

.dark .app_statistics_card_full {
    border-top-color: rgb(55 65 81);
}

.app_statistics_card_title {
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 600;
    color: rgb(107 114 128);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.dark .app_statistics_card_title {
    color: rgb(156 163 175);
}

/* Chart Containers */
.app_statistics_chart_container {
    position: relative;
    height: 160px;
    margin-bottom: 0.5rem;
}

.app_statistics_chart_large {
    height: 200px;
}

/* Download Summary Text */
.app_statistics_download_summary {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(75 85 99);
    margin: 0.5rem 0;
}

.dark .app_statistics_download_summary {
    color: rgb(156 163 175);
}

.app_statistics_download_summary strong {
    color: rgb(17 24 39);
    font-weight: 600;
}

.dark .app_statistics_download_summary strong {
    color: white;
}

/* Summary Stats */
.app_statistics_summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgb(243 244 246);
}

.dark .app_statistics_summary {
    border-top-color: rgb(55 65 81);
}

.app_statistics_stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.app_statistics_stat_label {
    font-size: 0.625rem;
    color: rgb(107 114 128);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.dark .app_statistics_stat_label {
    color: rgb(156 163 175);
}

/* Estimated Badge */
.app_statistics_estimated_badge {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.0625rem 0.25rem;
    font-size: 0.5rem;
    font-weight: 600;
    background: rgb(254 243 199);
    color: rgb(146 64 14);
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    cursor: help;
    vertical-align: middle;
}

.dark .app_statistics_estimated_badge {
    background: rgb(66 32 6);
    color: rgb(252 211 77);
}

.app_statistics_stat_value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(17 24 39);
}

.dark .app_statistics_stat_value {
    color: white;
}

.app_statistics_stat_large {
    font-size: 1rem;
}

/* Histogram */
.app_histogram_container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.app_histogram_row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.app_histogram_stars {
    width: 1.5rem;
    font-size: 0.625rem;
    color: rgb(107 114 128);
    text-align: right;
}

.dark .app_histogram_stars {
    color: rgb(156 163 175);
}

.app_histogram_bar_bg {
    flex: 1;
    height: 0.625rem;
    background: rgb(243 244 246);
    border-radius: 0.25rem;
    overflow: hidden;
}

.dark .app_histogram_bar_bg {
    background: rgb(55 65 81);
}

.app_histogram_bar {
    height: 100%;
    border-radius: 0.25rem;
    transition: width 0.5s ease;
}

.app_histogram_bar_5 {
    background: #22c55e;
}

.app_histogram_bar_4 {
    background: #84cc16;
}

.app_histogram_bar_3 {
    background: #eab308;
}

.app_histogram_bar_2 {
    background: #f97316;
}

.app_histogram_bar_1 {
    background: #ef4444;
}

.app_histogram_count {
    min-width: 5rem;
    font-size: 0.625rem;
    color: rgb(107 114 128);
    text-align: right;
    flex-shrink: 0;
}

.dark .app_histogram_count {
    color: rgb(156 163 175);
}

.app_histogram_total {
    display: flex;
    justify-content: space-between;
    padding-top: 0.375rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgb(243 244 246);
    font-size: 0.6875rem;
    color: rgb(107 114 128);
}

.dark .app_histogram_total {
    border-top-color: rgb(55 65 81);
    color: rgb(156 163 175);
}

.app_histogram_total strong {
    color: rgb(17 24 39);
}

.dark .app_histogram_total strong {
    color: white;
}

/* Notices */
.app_statistics_notice,
.app_statistics_prediction_note {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: rgb(254 243 199);
    color: rgb(146 64 14);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    line-height: 1.4;
}

.dark .app_statistics_notice {
    background: rgb(66 32 6);
    color: rgb(252 211 77);
}

.app_statistics_prediction_note {
    background: rgb(219 234 254);
    color: rgb(30 64 175);
}

.dark .app_statistics_prediction_note {
    background: rgb(30 58 95);
    color: rgb(147 197 253);
}

.app_statistics_notice svg,
.app_statistics_prediction_note svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

/* Content area */
.app_statistics_content {
    color: rgb(55 65 81);
}

.dark .app_statistics_content {
    color: rgb(209 213 219);
}

/* Minimal App Achievements (Global Style) */
.app_achievements_minimal_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(243 244 246);
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .app_achievements_minimal_grid {
        grid-template-columns: 1fr 1fr;
    }
}

.dark .app_achievements_minimal_grid {
    border-top-color: rgb(55 65 81);
}

.achievement_minimal_group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.achievement_minimal_title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgb(17 24 39);
    margin: 0;
}

.dark .achievement_minimal_title {
    color: white;
}

.achievement_star_icon {
    width: 1rem;
    height: 1rem;
    color: rgb(75 85 99);
    /* Grey star for minimal look, or use yellow #eab308 if preferred */
}

.dark .achievement_star_icon {
    color: rgb(156 163 175);
}

.achievement_minimal_list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Small gap for separation */
}

.achievement_minimal_row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: rgb(249 250 251);
    /* Light grey background */
    text-decoration: none;
    color: inherit;
    border-radius: 0.375rem;
    transition: background-color 0.15s;
}

.dark .achievement_minimal_row {
    background-color: rgb(31 41 55 / 24%);
}

.achievement_minimal_row:hover {
    background-color: rgb(243 244 246);
}

.dark .achievement_minimal_row:hover {
    background-color: rgb(55 65 81);
}

/* Current App Highlight */
.achievement_minimal_row_current {
    background-color: white;
    border: 1px solid rgb(229 231 235);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

.dark .achievement_minimal_row_current {
    background-color: rgb(17 24 39);
    border-color: rgb(55 65 81);
}

.achievement_minimal_rank {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(107 114 128);
    min-width: 1.5rem;
}

.dark .achievement_minimal_rank {
    color: rgb(156 163 175);
}

.achievement_minimal_icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    object-fit: cover;
}

.achievement_minimal_name {
    font-size: 0.8125rem;
    color: rgb(55 65 81);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .achievement_minimal_name {
    color: rgb(209 213 219);
}

.achievement_minimal_row_current .achievement_minimal_name {
    color: rgb(17 24 39);
    font-weight: 700;
}

.dark .achievement_minimal_row_current .achievement_minimal_name {
    color: white;
}

.achievement_minimal_row:not(.achievement_minimal_row_current) .achievement_minimal_name {
    color: rgb(37 99 235);
    /* Link blue for neighbors */
}

.dark .achievement_minimal_row:not(.achievement_minimal_row_current) .achievement_minimal_name {
    color: rgb(96 165 250);
}