/* ============================================================
   pages.css — Page-specific styles
   TSTP World | Phase 1c Layout
   ============================================================ */

/* ============================================================
   § PAGE HEADER
   ============================================================ */
.tw-page-header {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.tw-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.tw-page-subtitle {
    font-size: .875rem;
    color: var(--tw-text-muted);
    margin-top: .25rem;
}

/* ============================================================
   § WIDGET GRID
   ============================================================ */
.tw-widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ============================================================
   § SECTIONS
   ============================================================ */
.tw-section {
    margin-bottom: 2rem;
}

.tw-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--tw-border);
}

/* ============================================================
   § STAT ROWS
   ============================================================ */
.tw-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.tw-stat-label {
    font-size: .8rem;
    color: var(--tw-text-muted);
}

.tw-stat-value {
    font-weight: 600;
}

/* ============================================================
   § ACTIVITY FEED
   ============================================================ */
.tw-activity-item {
    display: flex;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    font-size: .875rem;
    align-items: flex-start;
}

.tw-activity-time {
    font-size: .75rem;
    color: var(--tw-text-muted);
    min-width: 80px;
    flex-shrink: 0;
    padding-top: .1rem;
}

/* ============================================================
   § EMPTY STATE
   ============================================================ */
.tw-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--tw-text-muted);
}

.tw-empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: .75rem;
    opacity: .5;
}

.tw-empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tw-text-muted);
    margin-bottom: .4rem;
}

/* ============================================================
   § AUTH PAGES (login / register)
   ============================================================ */
.tw-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tw-bg);
    padding: 1rem;
}

.tw-auth-card {
    background-color: var(--tw-surface);
    border: 1px solid var(--tw-border);
    border-radius: 8px;
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
}

.tw-auth-card .tw-logo {
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.tw-auth-title {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.tw-auth-subtitle {
    text-align: center;
    font-size: .875rem;
    color: var(--tw-text-muted);
    margin-bottom: 1.5rem;
}

.tw-auth-footer {
    text-align: center;
    font-size: .8rem;
    color: var(--tw-text-muted);
    margin-top: 1.25rem;
}

/* ============================================================
   § LEADERBOARD
   ============================================================ */
.tw-leaderboard-rank {
    font-weight: 700;
    font-size: .9rem;
    width: 2rem;
    text-align: center;
}

.tw-leaderboard-rank.gold-rank   { color: var(--tw-gold);     }
.tw-leaderboard-rank.silver-rank { color: #b0b0b0;            }
.tw-leaderboard-rank.bronze-rank { color: #cd7f32;            }

/* ============================================================
   § UTILITY
   ============================================================ */
.tw-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-text-right { text-align: right; }
.tw-text-center { text-align: center; }
.tw-text-muted { color: var(--tw-text-muted); }
.tw-text-positive { color: var(--tw-positive); }
.tw-text-negative { color: var(--tw-negative); }
.tw-text-gold { color: var(--tw-gold); }
.tw-text-warning { color: var(--tw-warning); }

.tw-mt-1 { margin-top: .5rem; }
.tw-mt-2 { margin-top: 1rem; }
.tw-mt-3 { margin-top: 1.5rem; }
.tw-mb-1 { margin-bottom: .5rem; }
.tw-mb-2 { margin-bottom: 1rem; }
.tw-mb-3 { margin-bottom: 1.5rem; }

.tw-flex { display: flex; }
.tw-flex-col { flex-direction: column; }
.tw-align-center { align-items: center; }
.tw-justify-between { justify-content: space-between; }
.tw-gap-1 { gap: .5rem; }
.tw-gap-2 { gap: 1rem; }
.tw-w-full { width: 100%; }