/*
 * Task #1450299 — PURGE: Kill all dark pills/badges, fix contrast, centering
 *
 * This file owns: Converting ALL dark-background elements to white/light variants
 * per the CEO design directive: ALL-WHITE backgrounds, typography-led, Fortune 500 grade.
 *
 * Does NOT own: Layout structure, JS behavior, database queries.
 */

/* ═══════════════════════════════════════════════════════════
   1. HP UNCLAIMED SECTION — Dark (#0a0f0a) → White
   The "Left on the Table" counter section was a dark noir theme.
   Converting to white background with dark text per design directive.
   ═══════════════════════════════════════════════════════════ */

.hp-unclaimed {
  background: #FFFFFF !important;
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}

/* Kill the dark pseudo-element overlays (glow + scanlines) */
.hp-unclaimed::before,
.hp-unclaimed::after {
  display: none !important;
}

/* Eyebrow text — was green-on-dark, now green-on-white (fine as-is) */

/* Money number — was white-on-dark, now dark-on-white */
.hp-unclaimed__number {
  color: #0A0A0A !important;
  text-shadow: none !important;
}

/* Label text — was rgba white-on-dark, now dark text on white */
.hp-unclaimed__label {
  color: #374151 !important;
}

.hp-unclaimed__label strong {
  color: #111827 !important;
}

/* Category breakdown pills — was translucent white-on-dark, now light tint pills */
.hp-unclaimed__pill {
  background: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════
   2. BOUNTY BOARD HOMEPAGE CARDS — Dark (#0d0d12) → White
   The 3 homepage bounty teaser cards were noir-themed dark cards.
   Converting to white cards with borders.
   ═══════════════════════════════════════════════════════════ */

/* Card backgrounds */
.hp-bounty-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}

.hp-bounty-card:hover {
  background: #FFFFFF !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

/* Rank labels — keep gold/silver/bronze but ensure dark readability */
.hp-bounty-card__rank {
  color: #6B7280 !important;
}

.hp-bounty-card__rank--1 {
  color: #92400E !important; /* dark amber — WCAG AA on white */
}

.hp-bounty-card__rank--2 {
  color: #6B7280 !important; /* gray */
}

.hp-bounty-card__rank--3 {
  color: #92400E !important; /* bronze-ish */
}

/* Company name — was gray-on-dark, now gray-on-white */
.hp-bounty-card__company {
  color: #6B7280 !important;
}

/* Title — was light-on-dark, now dark-on-white */
.hp-bounty-card__title {
  color: #111827 !important;
}

/* Payout amount — was gold-on-dark, now emerald-on-white */
.hp-bounty-card__payout {
  color: #00875A !important;
}

/* Deadline pills — convert from dark translucent to light tint */
.hp-bounty-card__deadline--urgent {
  background: #FEF3C7 !important;
  color: #92400E !important;
}

.hp-bounty-card__deadline--ok {
  background: #DCFCE7 !important;
  color: #166534 !important;
}

/* CTA button at bottom — was dark (#0d0d12), convert to emerald */
.hp-bounty__cta {
  background: #FFFFFF !important;
  color: #00875A !important;
  border: 1.5px solid #00875A !important;
}

.hp-bounty__cta:hover {
  background: #00875A !important;
  color: #FFFFFF !important;
  border-color: #00875A !important;
}

/* ═══════════════════════════════════════════════════════════
   3. HOW IT WORKS STEP CIRCLES — Solid dark green → Light green
   Step number circles (1, 2, 3) had solid #00875A backgrounds.
   Converting to light emerald tint with dark text.
   ═══════════════════════════════════════════════════════════ */

.hp-step__num {
  background: #DCFCE7 !important;
  color: #166534 !important;
}

/* ═══════════════════════════════════════════════════════════
   4. PAYOUT CARD AVATARS — Near-black → Light emerald
   User avatar circles had #0A0A0A backgrounds.
   Converting to light emerald tint with dark green text.
   ═══════════════════════════════════════════════════════════ */

.hp-payout-card__avatar {
  background: #DCFCE7 !important;
  color: #166534 !important;
}

/* ═══════════════════════════════════════════════════════════
   5. COTD STAT PILLS — Ensure light backgrounds only
   These should already be light but reinforcing to prevent
   any dark overrides.
   ═══════════════════════════════════════════════════════════ */

.hp-cotd__stat {
  background: #F9FAFB !important;
  color: #374151 !important;
}

.hp-cotd__stat--payout {
  background: #DCFCE7 !important;
  color: #166534 !important;
}

.hp-cotd__stat--deadline-urgent {
  background: #FEF2F2 !important;
  color: #991B1B !important;
}

.hp-cotd__stat--deadline-ok {
  background: #DCFCE7 !important;
  color: #166534 !important;
}

/* ═══════════════════════════════════════════════════════════
   6. SETTLEMENT OF THE DAY — Badges and pills
   Ensure all badge/category/trending pills use light backgrounds.
   ═══════════════════════════════════════════════════════════ */

.hp-sotd__badge {
  background: #DCFCE7 !important;
  color: #166534 !important;
}

.hp-sotd__category {
  background: #F3F4F6 !important;
  color: #374151 !important;
  border: 1px solid #E5E7EB;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   7. GENERIC BADGE SYSTEM — Kill any remaining dark badges
   Force all badge/pill/tag elements to use light backgrounds.
   ═══════════════════════════════════════════════════════════ */

/* Override the dark-background badge/pill classes from design-system.css */
.badge-navy,
.badge-dark,
.pill-navy,
.pill-dark,
.bg-navy {
  background: #F3F4F6 !important;
  color: #111827 !important;
}

/* badge-accent was solid dark emerald (#00875A) — convert to light green tint */
.badge-accent {
  background: #DCFCE7 !important;
  color: #166534 !important;
}

/* badge-navy was solid near-black (#0A0A0A) — convert to light gray */
.badge-navy {
  background: #F3F4F6 !important;
  color: #111827 !important;
}

/* bg-primary on non-button elements — was #0A0A0A, convert to light */
.bg-primary:not(button):not(.btn):not([type="submit"]):not(a) {
  background: #F3F4F6 !important;
  color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════
   8. CENTERING FIXES
   ═══════════════════════════════════════════════════════════ */

/* Ensure step cards are centered within their grid cells */
.hp-step {
  text-align: center;
}

.hp-step__num {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Payout cards scroll container — center when fewer than viewport width */
.hp-payout-scroll {
  justify-content: center;
}

/* COTD footer — ensure elements are properly aligned */
.hp-cotd__footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Final CTA trust signals — center properly */
.hp-final-cta__note {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Email capture row — prevent overflow */
.hp-email-capture__row {
  max-width: 520px;
  margin: 0 auto;
}

/* Section headers — ensure centered */
.hp-section-header.center {
  text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════
   9. SETTLEMENT DETAIL PAGE — Login band & dark inline styles
   Fix the dark notification bands on settlement detail pages.
   ═══════════════════════════════════════════════════════════ */

/* Override inline background:#0f172a on login prompts */
[style*="background:#0f172a"],
[style*="background: #0f172a"] {
  background: #F3F4F6 !important;
  color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════
   10. FOMO BADGE — Closes Today (solid red) → Light red tint
   ═══════════════════════════════════════════════════════════ */

.fomo-badge-closes-today {
  background: #FEF2F2 !important;
  color: #991B1B !important;
}