/* ==========================================================
   Community Goals — Detail + History pages
   ========================================================== */

/* --- Shared: Status badges --- */

.cg-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  flex-shrink: 0;
}

.cg-badge-active {
  background: rgba(0, 122, 255, 0.1);
  color: var(--tg-theme-accent-text-color);
}

.cg-badge-completed {
  background: rgba(52, 199, 89, 0.1);
  color: #34C759;
}

.cg-badge-failed {
  background: rgba(255, 59, 48, 0.1);
  color: var(--tg-theme-destructive-text-color);
}

/* --- Detail page header --- */

.cg-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
}

.cg-detail-back {
  font-size: var(--font-xl);
  color: var(--tg-theme-accent-text-color);
  background: none;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  flex-shrink: 0;
}

.cg-detail-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  flex: 1;
}

.cg-detail-desc {
  font-size: var(--font-sm);
  color: var(--tg-theme-hint-color);
  padding: 0 0 var(--space-sm);
}

/* --- Hero stat boxes --- */

.cg-stat-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cg-stat-box {
  flex: 1;
  background: var(--tg-theme-secondary-bg-color);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  text-align: center;
}

.cg-stat-value {
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
}

.cg-stat-value.cg-accent {
  color: var(--tg-theme-accent-text-color);
}

.cg-stat-label {
  font-size: var(--font-xs);
  color: var(--tg-theme-hint-color);
  margin-top: 2px;
}

/* --- Big progress bar --- */

.cg-big-bar {
  height: 14px;
  border-radius: 7px;
}

.cg-big-bar .progress-bar-fill {
  border-radius: 7px;
}

.cg-bar-info {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xs);
  font-size: var(--font-xs);
  color: var(--tg-theme-hint-color);
}

/* --- My contribution card --- */

.cg-my-card {
  border-left: 3px solid var(--tg-theme-accent-text-color);
}

.cg-my-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cg-my-left,
.cg-my-right {
  display: flex;
  flex-direction: column;
}

.cg-my-right {
  text-align: right;
}

.cg-my-label {
  font-size: var(--font-sm);
  color: var(--tg-theme-hint-color);
}

.cg-my-value {
  font-size: 24px;
  font-weight: var(--weight-bold);
}

.cg-my-unit {
  font-size: var(--font-sm);
  color: var(--tg-theme-hint-color);
}

.cg-my-pct {
  font-size: var(--font-xl);
  font-weight: var(--weight-bold);
  color: var(--tg-theme-accent-text-color);
}

.cg-my-hp {
  font-size: var(--font-md);
  color: #34C759;
  font-weight: var(--weight-semibold);
  text-align: center;
  margin-top: var(--space-sm);
}

/* --- Contributor board --- */

.cg-contrib-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  font-size: var(--font-sm);
}

.cg-contrib-item + .cg-contrib-item {
  border-top: 1px solid var(--tg-theme-section-separator-color);
}

.cg-contrib-me {
  background: rgba(0, 122, 255, 0.06);
  margin: 0 calc(-1 * var(--space-lg));
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm);
}

.cg-contrib-rank {
  width: 24px;
  text-align: center;
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.cg-contrib-name {
  flex: 1;
  font-weight: var(--weight-medium);
}

.cg-contrib-me .cg-contrib-name {
  color: var(--tg-theme-accent-text-color);
}

.cg-contrib-value {
  color: var(--tg-theme-hint-color);
}

.cg-contrib-pct {
  width: 48px;
  text-align: right;
  font-weight: var(--weight-semibold);
  color: var(--tg-theme-accent-text-color);
}

.cg-contrib-empty {
  text-align: center;
  padding: var(--space-lg);
  color: var(--tg-theme-hint-color);
}

/* --- Footer explanation --- */

.cg-footer-card {
  background: var(--tg-theme-secondary-bg-color);
  border: none;
}

.cg-footer-card .card-body {
  font-size: var(--font-xs);
  color: var(--tg-theme-hint-color);
  text-align: center;
}

/* --- History page --- */

.cg-month-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.cg-month-btn {
  font-size: var(--font-xl);
  color: var(--tg-theme-hint-color);
  background: none;
  border: none;
  padding: var(--space-sm);
  cursor: pointer;
}

.cg-month-label {
  font-weight: var(--weight-semibold);
  font-size: var(--font-md);
}

.cg-history-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--tg-theme-hint-color);
}

.cg-history-title-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: var(--space-sm);
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
}

.cg-history-desc {
  font-size: var(--font-xs);
  color: var(--tg-theme-hint-color);
  margin-top: 2px;
}

.cg-history-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.cg-history-bar-wrap .progress-bar {
  flex: 1;
}

.cg-history-hp-won {
  font-size: var(--font-md);
  color: #34C759;
  font-weight: var(--weight-semibold);
  text-align: center;
  margin-top: var(--space-sm);
}

.cg-history-hp-lost {
  font-size: var(--font-xs);
  color: var(--tg-theme-hint-color);
  text-align: center;
  margin-top: var(--space-sm);
}

/* --- Card borders for status --- */

.cg-card-completed {
  border: 1px solid #34C759;
}

.cg-card-failed {
  border: 1px solid var(--tg-theme-destructive-text-color);
}

/* --- Home page overrides --- */

.cg-home-title-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: var(--space-sm);
}

.cg-home-desc {
  font-size: var(--font-xs);
  color: var(--tg-theme-hint-color);
  margin-top: 2px;
}

.cg-history-btn {
  margin-top: var(--space-sm);
  font-size: var(--font-sm);
  color: var(--tg-theme-accent-text-color);
  background: var(--tg-theme-secondary-bg-color);
}

/* --- Failed progress bar --- */

.progress-bar-fill.failed {
  background: var(--tg-theme-destructive-text-color);
}