/**
 * VBM Design System — member.css
 *
 * Page layout styles for the authenticated member portal.
 * Covers the home dashboard (welcome header, up-next card, stats),
 * profile header, and empty states.
 *
 * DEPENDENCIES: tokens.css, components.css must be loaded before this file.
 *
 * Sections:
 *   01. Welcome Header      (.vbm-welcome)
 *   02. Up Next Card        (.vbm-up-next)
 *   03. Stats Grid          (.vbm-stats / .vbm-stat)
 *   04. Profile Header      (.vbm-profile-header)
 *   05. Empty State         (.vbm-empty)
 */


/* ==== 01. WELCOME HEADER ==== */

.vbm-welcome {
  background: var(--vbm-bg-surface);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--vbm-border);
}

.vbm-welcome__greeting {
  font-size: 12px;
  color: var(--vbm-text-secondary);
}

.vbm-welcome__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--vbm-text-primary);
  margin-top: 2px;
}


/* ==== 02. UP NEXT CARD ==== */

.vbm-up-next {
  background: linear-gradient(135deg,
    rgba(56, 189, 248, 0.15) 0%,
    rgba(129, 140, 248, 0.10) 100%);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--vbm-radius-lg);
  padding: 16px;
}

.vbm-up-next__label {
  font-size: 11px;
  color: var(--vbm-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.vbm-up-next__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--vbm-text-primary);
}

.vbm-up-next__meta {
  font-size: 13px;
  color: var(--vbm-text-secondary);
  margin-top: 4px;
}

.vbm-up-next__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}


/* ==== 03. STATS GRID ==== */

.vbm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.vbm-stat {
  background: var(--vbm-bg-surface);
  border-radius: var(--vbm-radius-md);
  padding: 14px;
}

.vbm-stat__label {
  font-size: 11px;
  color: var(--vbm-text-muted);
  text-transform: uppercase;
}

.vbm-stat__value {
  font-size: 24px;
  font-weight: 700;
  color: var(--vbm-text-primary);
  margin-top: 4px;
}

.vbm-stat__detail {
  font-size: 12px;
  color: var(--vbm-text-secondary);
}


/* ==== 04. PROFILE HEADER ==== */

.vbm-profile-header {
  background: var(--vbm-bg-surface);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--vbm-border);
}

.vbm-profile-header__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--vbm-text-primary);
}

.vbm-profile-header__email {
  font-size: 13px;
  color: var(--vbm-text-secondary);
}

.vbm-profile-header__since {
  font-size: 12px;
  color: var(--vbm-text-muted);
  margin-top: 2px;
}


/* ==== 05. EMPTY STATE ==== */

.vbm-empty {
  text-align: center;
  padding: 32px 16px;
}

.vbm-empty__icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.vbm-empty__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--vbm-text-primary);
  margin-bottom: 4px;
}

.vbm-empty__text {
  font-size: 13px;
  color: var(--vbm-text-secondary);
  margin-bottom: 16px;
}