/* =============================================
   AniVerse — Stats page and its modules.
   Figures are set in mono; the overview reads as a ledger, not a dashboard.
   ============================================= */

.stats-page {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-5);
}

.stats-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--av-space-3);
    padding: var(--av-space-8) 0;
    color: var(--av-text-3);
}

/* --- Module interior (every Stats module) --- */
.stats-global,
.stats-card,
.stats-top,
.stats-genres,
.stats-monthly,
.stats-recent {
    display: flex;
    flex-direction: column;
    gap: var(--av-space-3);
    height: 100%;
    padding: var(--av-space-4);
}

.stats-global > h2,
.stats-card > h3,
.stats-top > h2,
.stats-genres > h2,
.stats-monthly > h2,
.stats-recent > h2 {
    margin: calc(-1 * var(--av-space-4)) calc(-1 * var(--av-space-4)) var(--av-space-1);
    padding: 12px var(--av-space-4);
    border-bottom: 1px solid var(--av-line);
    font-family: var(--av-font-mono);
    font-size: var(--av-fs-label);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-text-2);
}

/* Arrange mode: the module header already names the module */
.widget-container.edit-mode :is(.stats-global > h2, .stats-card > h3, .stats-top > h2, .stats-genres > h2, .stats-monthly > h2, .stats-recent > h2) {
    display: none;
}

/* --- Overview: four figures in a ledger --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--av-line);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius-panel);
    overflow: hidden;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: var(--av-space-4);
    background: var(--av-surface-1);
}

.stat-number {
    font-family: var(--av-font-serif);
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--av-text-1);
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: var(--av-fs-small);
    color: var(--av-text-3);
}

@media (min-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .stat-number {
        font-size: 56px;
    }
}

/* --- Figure cards --- */
.stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--av-space-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--av-line);
    font-size: var(--av-fs-small);
    color: var(--av-text-2);
}

.stat-row:last-of-type {
    border-bottom: none;
}

.stat-value {
    font-family: var(--av-font-mono);
    font-size: 15px;
    color: var(--av-text-1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stat-value.highlight {
    font-family: var(--av-font-serif);
    font-size: 30px;
    line-height: 1;
}

.stat-unit {
    margin-left: 2px;
    font-family: var(--av-font-mono);
    font-size: 12px;
    color: var(--av-text-3);
}

.stats-todo-link {
    align-self: flex-start;
    margin-top: var(--av-space-1);
}

/* --- Ranked lists (Top 10, Most reread) --- */
.top-titles-list {
    display: flex;
    flex-direction: column;
}

.top-title-item {
    display: flex;
    align-items: center;
    gap: var(--av-space-3);
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--av-line);
}

.top-title-item:last-child {
    border-bottom: none;
}

.top-rank {
    flex-shrink: 0;
    width: 3ch;
    font-size: 12px;
    color: var(--av-text-3);
    text-align: right;
}

.top-title-item:first-child .top-rank {
    color: var(--av-text-1);
}

.top-cover {
    flex-shrink: 0;
    width: 32px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 2px;
    background: var(--av-surface-2);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.top-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.top-name {
    overflow: hidden;
    font-size: var(--av-fs-small);
    font-weight: 500;
    color: var(--av-text-1);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--av-space-3);
    font-size: 11px;
    color: var(--av-text-3);
}

/* --- Genres: horizontal bars --- */
.genre-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.genre-bar-item {
    display: grid;
    grid-template-columns: minmax(80px, 30%) minmax(0, 1fr) 4ch;
    align-items: center;
    gap: var(--av-space-3);
}

.genre-name {
    overflow: hidden;
    font-size: var(--av-fs-small);
    color: var(--av-text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.genre-bar {
    height: 4px;
    background: var(--av-track);
    border-radius: 2px;
    overflow: hidden;
}

.genre-bar-fill {
    height: 100%;
    background: var(--av-text-1);
    border-radius: 2px;
}

.genre-count {
    font-size: 12px;
    color: var(--av-text-3);
    text-align: right;
}

/* --- Monthly activity: vertical bars --- */
.monthly-bars {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    align-items: end;
    gap: 6px;
    padding-top: var(--av-space-2);
}

.monthly-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.monthly-bar {
    display: flex;
    align-items: flex-end;
    width: 100%;
    max-width: 28px;
    height: 140px;
    background: var(--av-surface-2);
    border-radius: 2px;
    overflow: hidden;
}

.monthly-bar-fill {
    width: 100%;
    min-height: 2px;
    background: var(--av-text-1);
    border-radius: 2px 2px 0 0;
}

.monthly-bar-item:last-child .monthly-bar-fill {
    background: var(--av-seal);
}

.monthly-label,
.monthly-value {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    color: var(--av-text-3);
    text-overflow: clip;
    white-space: nowrap;
}

.monthly-value {
    order: -1;
    color: var(--av-text-2);
}

@media (max-width: 479px) {
    .monthly-bars {
        gap: 3px;
    }

    .monthly-value {
        display: none;
    }
}

/* --- Recent activity: a dated log --- */
.recent-list {
    display: flex;
    flex-direction: column;
}

.recent-item {
    display: grid;
    grid-template-columns: 6ch minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--av-space-3);
    padding: 9px 0;
    border-bottom: 1px solid var(--av-line);
}

.recent-item:last-child {
    border-bottom: none;
}

.recent-date {
    font-size: 12px;
    color: var(--av-text-3);
}

.recent-title {
    overflow: hidden;
    font-size: var(--av-fs-small);
    color: var(--av-text-1);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-detail {
    display: flex;
    gap: var(--av-space-2);
    font-size: 12px;
    color: var(--av-text-2);
    white-space: nowrap;
}