/**
 * PowerReader - Profile Page Styles (Phase 4)
 *
 * Separated from main.css to keep files under 800 lines.
 * Uses CSS custom properties defined in main.css :root.
 */

/* ==============================================
   Profile Login Prompt
   ============================================== */
.profile-login {
  text-align: center;
  padding: var(--spacing-xl) 0;
}

.profile-login__prompt {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
  font-size: var(--text-body);
}

.profile-login__google {
  width: 100%;
  max-width: 320px;
  margin-bottom: var(--spacing-md);
}

/* ==============================================
   Profile Header (Avatar + Name)
   ============================================== */
.profile-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border-radius: 12px;
}

.profile-header__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-h2);
  font-weight: 700;
  flex-shrink: 0;
}

.profile-header__info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.profile-header__name {
  font-size: var(--text-h3);
  font-weight: 700;
}

.profile-header__role {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ==============================================
   Points Summary Card
   ============================================== */
.profile-points {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background-color: var(--color-bg-secondary);
  border-radius: 12px;
}

.profile-points__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.profile-points__kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-sm);
  background-color: var(--color-bg);
  border-radius: 8px;
}

.profile-points__kpi-value {
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-primary);
}

.profile-points__kpi-label {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

.profile-points__hint {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  text-align: center;
}

.profile-points__last {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--spacing-sm);
}

.profile-points--error {
  border: 1px solid var(--color-controversy-very-high);
}

/* ==============================================
   30-day Trend Sparkline
   ============================================== */
.profile-trend {
  margin-bottom: var(--spacing-lg);
}

.profile-trend__chart {
  width: 100%;
  padding: var(--spacing-md) 0;
}

.sparkline {
  width: 100%;
  height: 60px;
}

/* ==============================================
   Contribution History
   ============================================== */
.profile-contributions {
  margin-bottom: var(--spacing-lg);
}

.profile-contributions__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.profile-contributions__item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--text-caption);
}

.profile-contributions__date {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  white-space: nowrap;
}

.profile-contributions__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.profile-contributions__title:hover {
  color: var(--color-primary);
}

.profile-contributions__status {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-small);
  font-weight: 700;
  border-radius: 4px;
  white-space: nowrap;
}

.profile-contributions__status--pending {
  background-color: #FFF3CD;
  color: #856404;
}

.profile-contributions__status--earned {
  background-color: #D4EDDA;
  color: #155724;
}

.profile-contributions__status--rejected {
  background-color: #F8D7DA;
  color: #721C24;
}

.profile-contributions__status--claimed {
  background-color: #E8F0FE;
  color: var(--color-primary);
}

.profile-contributions__points {
  font-weight: 700;
  color: var(--color-controversy-low);
  font-size: var(--text-small);
  white-space: nowrap;
}

/* ==============================================
   Account Actions
   ============================================== */
.profile-actions {
  margin-bottom: var(--spacing-lg);
}

.profile-actions__btn {
  width: 100%;
  margin-bottom: var(--spacing-sm);
}

.profile-actions__btn--danger {
  color: var(--color-controversy-very-high);
}

.profile-actions__btn--danger:hover {
  background-color: #FFF5F5;
}

/* ==============================================
   Responsive: 2-col KPI on wider screens
   ============================================== */
@media (min-width: 480px) {
  .profile-points__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}