.dashboard {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
    gap: 2rem;
}
.dashboard-header {
    margin: 1rem 0;
    background: var(--accent-bg);
    text-align: center;
    padding: 0.4rem 1rem;
    border-radius: 4px;
}

.dashboard .chart {
    margin-top: 1rem;
    margin-bottom: -6px;
}

.dashboard .chart canvas {
    width: 100% !important;
}

.dashboard table {
    margin-top: 0;
}

.dashboard table tbody {
    width: 100%;
    display: table;
    box-sizing: border-box;
}

.dashboard table a[data-online=true]::after {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--success);
    border-radius: 100%;
    margin-left: 0.25rem;
}

.dashboard table td a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
    display: block;
}

.dashboard h2 {
    margin-top: 0rem;
    text-align: left;
    font-size: 1.35rem;
    padding: 0 0 0.5rem;
    min-height: 2.4ex;
}

.dashboard h2 > small {
    margin-top: 0.85em;
    font-size: 0.5em;
}

.dashboard__recent {
    grid-column: 1 / -1;
    grid-row: 1 / span 1;
}

.dashboard__recent a {
    text-align: center;
}

.dashboard__recent__content turbo-frame {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.dashboard__recent__content turbo-frame > * {
    flex: 1 1 100px;
}

.dashboard__online {
    grid-column: 1 / span 1;
    grid-row: 2 / span 2;
    text-align: center;
}

.dashboard__online__content {
    font-size: 3.5rem;
    font-weight: bold;
    position: relative;
    display: inline-block;
}

.dashboard__online a,
.dashboard__online a:visited {
    color: var(--text);
}

.dashboard__online__content::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: var(--success);
    border-radius: 100%;
    margin-left: 0.25rem;
    position: absolute;
    top: 0.3rem;
}

.dashboard__total-updates {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
}

.dashboard__total-updates__content {
    font-size: 1.5rem;
    text-align: center;
    line-height: 2.6rem;
    margin: 2rem 0 1rem;
}

.dashboard__total-updates__content em {
    display: block;
    font-size: 3rem;
    font-weight: bold;
    font-style: normal;
}

.dashboard__newest-user {
    grid-column: 1 / span 1;
    grid-row: 6 / span 1;
}

.dashboard__newest-user__content {
    text-align: center;
    font-size: 1.75rem;
    position: relative;
}

.dashboard__newest-user__content a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.dashboard__leaderboard {
    grid-column: 2 / span 2;
    grid-row: 4 / span 2;
}

.dashboard__your-total-changes {
    grid-column: 1 / span 1;
    grid-row: 5 / span 1;
}

.dashboard__updates {
    grid-column: 2 / -1;
    grid-row: 3 / span 1;
    max-height: 360px;
    display: flex;
    flex-direction: column;
}

.news-room__panel {
    grid-column: 2 / -1;
    grid-row: 2 / span 1;

    h2 {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;

        & .WTN-logo {
            font-size: 1.3rem;
            padding: 5px 4px 0px;
            line-height: 18px;
        }

        & button {
            font-size: 0.75rem;
            padding: 4px 7px;
            margin: 0;
        }
    }
}

.dashboard__updates__content {
    overflow-y: auto;
    flex: 1 1 100%;
}

@media screen and (max-width: 590px) {
    .dashboard {
        grid-template-columns: 100%;
    }

    .dashboard__updates {
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        overflow: initial;
        max-height: initial;
    }

    .news-room__panel {
        grid-column: 1 / span 1;
        grid-row: 4 / span 1;
    }

    .dashboard__updates__content {
        max-height: 300px;
    }

    .dashboard__online {
        grid-row: 3 / span 1;
    }

    .dashboard__total-updates {
        grid-row: 6 / span 1;
    }

    .dashboard__newest-user {
        grid-row: 8 / span 1;
    }

    .dashboard__your-total-changes {
        grid-row: 5 / span 1;
    }

    .dashboard__leaderboard {
        grid-column: 1 / span 1;
        grid-row: 7 / span 1;
    }
}

.kofi-button ion-icon {
    font-size: 1.4em;
    margin: 0px 0 -6px 0;
}

.dashboard__users-viewing-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.5rem 0 0;
}

.dashboard__users-viewing-links em {
    text-align: center;
    display: block;
    flex: 1 1 100%;
    font-size: 0.8rem;
}

turbo-frame#users_viewing_links {
    width: 100%;
}

turbo-frame#users_viewing_links strong {
    color: var(--border);
}

.explainer_graphic {
    padding: 2rem 0 0;
    color: var(--text-light);
}