/*
 * Dashboard — the personal OVERVIEW HUB (the authenticated landing).
 *
 * A greeting hero, a quick-action row, and a responsive grid of teaser widgets
 * (TecXCord servers, messages, friends, Minecraft instances, TecXtagram feed).
 * Tokens only, theme-aware via the semantic variables; built on the shared
 * gtx-card / gtx-avatar / gtx-badge / gtx-btn primitives.
 *
 * Class schema: gtx-hub-hero, gtx-hub-actions/-action, gtx-hub-grid,
 * gtx-hub-widget, gtx-hub-servers/-server, gtx-hub-list, gtx-hub-row,
 * gtx-hub-friends/-friend, gtx-hub-feed/-tile, gtx-hub-empty, gtx-hub-note.
 */

/* --- Greeting hero ------------------------------------------------------- */
.gtx-hub-hero {
    display: flex;
    align-items: center;
    gap: var(--gtx-s4);
    padding: var(--gtx-s5) 0 var(--gtx-s4);
}

.gtx-hub-hero__text {
    min-width: 0;
}

.gtx-hub-hero__title {
    margin: 0;
    font-family: var(--gtx-font-display);
    font-size: var(--gtx-fs-h1);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gtx-text);
    line-height: 1.15;
}

.gtx-hub-hero__sub {
    margin: var(--gtx-s1) 0 0;
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-ui);
}

/* --- Quick actions ------------------------------------------------------- */
.gtx-hub-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gtx-s3);
    margin-bottom: var(--gtx-s5);
}

.gtx-hub-action {
    display: flex;
    align-items: center;
    gap: var(--gtx-s3);
    padding: var(--gtx-s3) var(--gtx-s4);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    background: var(--gtx-surface);
    color: var(--gtx-text);
    font-size: var(--gtx-fs-ui);
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--gtx-t-fast) var(--gtx-ease),
        background var(--gtx-t-fast) var(--gtx-ease),
        transform var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-hub-action:hover {
    border-color: var(--gtx-line-strong);
    background: var(--gtx-surface-hover);
    transform: translateY(-1px);
}

.gtx-hub-action__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--gtx-accent);
}

/* --- Widget grid --------------------------------------------------------- */
.gtx-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gtx-s4);
    align-items: start;
}

.gtx-hub-widget {
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s3);
    min-width: 0;
}

/* Wide widgets (servers, feed) span the full row. */
.gtx-hub-widget--wide {
    grid-column: 1 / -1;
}

.gtx-hub-widget__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gtx-s3);
}

.gtx-hub-widget__title {
    display: inline-flex;
    align-items: center;
    gap: var(--gtx-s2);
    margin: 0;
    font-family: var(--gtx-font-display);
    font-size: var(--gtx-fs-h3);
    font-weight: 600;
    color: var(--gtx-text);
}

.gtx-hub-widget__icon {
    width: 20px;
    height: 20px;
    color: var(--gtx-accent);
}

.gtx-hub-widget__more {
    display: inline-flex;
    align-items: center;
    gap: var(--gtx-s1);
    font-size: var(--gtx-fs-ui);
    font-weight: 500;
    color: var(--gtx-accent-text);
    text-decoration: none;
    white-space: nowrap;
}

.gtx-hub-widget__more:hover {
    text-decoration: underline;
}

.gtx-hub-widget__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--gtx-r-full);
    background: var(--gtx-accent-fill);
    color: var(--gtx-on-accent);
    font-size: var(--gtx-fs-meta);
    font-weight: 700;
    line-height: 1;
}

/* --- Empty states + notes ------------------------------------------------ */
.gtx-hub-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gtx-s3);
    padding: var(--gtx-s4) 0;
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-ui);
}

.gtx-hub-empty p {
    margin: 0;
}

.gtx-hub-note {
    display: block;
    padding: var(--gtx-s2) var(--gtx-s3);
    border-radius: var(--gtx-r-s);
    background: var(--gtx-accent-soft);
    color: var(--gtx-text);
    font-size: var(--gtx-fs-ui);
    text-decoration: none;
}

.gtx-hub-note:hover {
    text-decoration: underline;
}

/* --- Servers (icon tiles) ------------------------------------------------ */
.gtx-hub-servers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--gtx-s3);
}

.gtx-hub-server {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gtx-s2);
    padding: var(--gtx-s3);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    background: var(--gtx-surface-2);
    text-align: center;
    text-decoration: none;
    color: var(--gtx-text);
    transition: border-color var(--gtx-t-fast) var(--gtx-ease),
        transform var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-hub-server:hover {
    border-color: var(--gtx-accent);
    transform: translateY(-2px);
}

.gtx-hub-server__name {
    max-width: 100%;
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtx-hub-server__meta {
    max-width: 100%;
    font-size: var(--gtx-fs-meta);
    color: var(--gtx-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtx-hub-server--add {
    justify-content: center;
    border-style: dashed;
    color: var(--gtx-text-dim);
}

.gtx-hub-server__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--gtx-r-full);
    background: var(--gtx-surface-hover);
    color: var(--gtx-accent);
}

.gtx-hub-server__plus svg {
    width: 22px;
    height: 22px;
}

/* --- Generic list rows (messages, instances) ----------------------------- */
.gtx-hub-list {
    display: flex;
    flex-direction: column;
    gap: var(--gtx-s1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gtx-hub-row {
    display: flex;
    align-items: center;
    gap: var(--gtx-s3);
    padding: var(--gtx-s2) var(--gtx-s3);
    border-radius: var(--gtx-r-s);
    text-decoration: none;
    color: var(--gtx-text);
    transition: background var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-hub-row:hover {
    background: var(--gtx-surface-hover);
}

.gtx-hub-row__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.gtx-hub-row__name {
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtx-hub-row__preview {
    font-size: var(--gtx-fs-meta);
    color: var(--gtx-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtx-hub-row__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--gtx-r-full);
    background: var(--gtx-accent-fill);
    color: var(--gtx-on-accent);
    font-size: var(--gtx-fs-meta);
    font-weight: 700;
    line-height: 1;
}

/* --- Friends (avatar chips) ---------------------------------------------- */
.gtx-hub-friends {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gtx-hub-friend {
    display: flex;
    align-items: center;
    gap: var(--gtx-s2);
    padding: var(--gtx-s1) var(--gtx-s3) var(--gtx-s1) var(--gtx-s1);
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-full);
    background: var(--gtx-surface-2);
    text-decoration: none;
    color: var(--gtx-text);
    max-width: 100%;
    transition: border-color var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-hub-friend:hover {
    border-color: var(--gtx-accent);
}

.gtx-hub-friend__name {
    font-size: var(--gtx-fs-ui);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- TecXtagram feed tiles ----------------------------------------------- */
.gtx-hub-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--gtx-s3);
}

.gtx-hub-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
    overflow: hidden;
    background: var(--gtx-surface-2);
    text-decoration: none;
    color: var(--gtx-text);
    transition: border-color var(--gtx-t-fast) var(--gtx-ease),
        transform var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-hub-tile:hover {
    border-color: var(--gtx-accent);
    transform: translateY(-2px);
}

.gtx-hub-tile__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: var(--gtx-surface-hover);
}

.gtx-hub-tile__img--ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gtx-text-dim);
}

.gtx-hub-tile__img--ph svg {
    width: 32px;
    height: 32px;
}

.gtx-hub-tile__cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--gtx-s2) var(--gtx-s3);
    min-width: 0;
}

.gtx-hub-tile__title {
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gtx-hub-tile__author {
    font-size: var(--gtx-fs-meta);
    color: var(--gtx-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
    .gtx-hub-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .gtx-hub-hero__title {
        font-size: var(--gtx-fs-h2);
    }
}