/* ══════════════════════════════════════════════════════════════
   Unified Settlement Card Design System — Task #977882
   One look. Every card. Everywhere.

   Reference design: .dir-card / sr2-* from settlement-card-redesign-918982.css
   Applied to: .la-card, .tw-card, .sl-card, .lb-card, .expiring-card
   ══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --uc-bg:           #ffffff;
  --uc-border:       rgba(226, 232, 240, 0.85);
  --uc-border-hover: rgba(80, 200, 120, 0.40);
  --uc-radius:       16px;
  --uc-shadow:       0 1px 3px rgba(0,0,0,0.04), 0 4px 18px rgba(0,0,0,0.055);
  --uc-shadow-hover: 0 0 0 2px rgba(80,200,120,0.09), 0 8px 30px rgba(0,0,0,0.09);
  --uc-transition:   transform 0.25s cubic-bezier(0.19,1,0.22,1),
                     box-shadow 0.25s cubic-bezier(0.19,1,0.22,1),
                     border-color 0.2s;
  --uc-payout-color: #15803d;
  --uc-payout-na-color: #9ca3af;
  --uc-category-color: #6b7280;
  --uc-title-color:  #1a1d21;
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE — Latest Additions Cards (.la-card)
   Using #main-content specificity to beat home-sections.css overrides
   ════════════════════════════════════════════════════════════ */
.la-card,
#main-content .la-card {
  background: var(--uc-bg) !important;
  border: 1px solid rgba(226,232,240,0.85) !important;
  border-radius: var(--uc-radius) !important;
  box-shadow: var(--uc-shadow) !important;
  transition: var(--uc-transition) !important;
}
.la-card:hover,
#main-content .la-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--uc-border-hover) !important;
  box-shadow: var(--uc-shadow-hover) !important;
  background: var(--uc-bg) !important;
}
.la-card:active,
#main-content .la-card:active {
  transform: translateY(-1px) !important;
}

/* Category: consistent gray uppercase
   Use #main-content specificity to override home-sections.css green override */
.la-card-category,
#main-content .la-card-category {
  color: var(--uc-category-color) !important;
  -webkit-text-fill-color: var(--uc-category-color) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Title: dark, bold, 2-line clamp */
.la-card-title {
  color: var(--uc-title-color) !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Company: gray, single line */
.la-card-company {
  color: #6b7280 !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Payout: green bold — "Varies" style handled by CSS below */
.la-card-payout {
  color: var(--uc-payout-color) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
}
/* "Varies" payout — make it clearly secondary, not green */
.la-card-payout:is([data-varies="true"]) {
  color: var(--uc-payout-na-color) !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* Date/Added label: consistent muted gray */
.la-card-date {
  color: #9ca3af !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* NEW badge: consistent pill style */
.la-card-new-tag {
  background: #16a34a !important;
  color: #ffffff !important;
  font-size: 0.63rem !important;
  font-weight: 800 !important;
  padding: 0.16rem 0.52rem !important;
  border-radius: 100px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ── Grid height consistency ─────────────────────────────── */
.latest-additions-grid {
  align-items: stretch !important;
}
.la-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}
.la-card-footer {
  margin-top: auto !important;
}


/* ════════════════════════════════════════════════════════════
   THIS-WEEK PAGE — Settlement Feed Cards (.tw-card)
   ════════════════════════════════════════════════════════════ */
.tw-card {
  background: var(--uc-bg) !important;
  border: 1px solid var(--uc-border) !important;
  border-top: 1px solid var(--uc-border) !important; /* kill accent top border */
  border-radius: var(--uc-radius) !important;
  box-shadow: var(--uc-shadow) !important;
  transition: var(--uc-transition) !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.tw-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--uc-border-hover) !important;
  box-shadow: var(--uc-shadow-hover) !important;
}
.tw-card:active {
  transform: translateY(-1px) !important;
}

/* Kill variant top border accents */
.tw-card.deadline-card {
  border-top: 1px solid var(--uc-border) !important;
}
.tw-card.deadline-card:hover {
  border-color: var(--uc-border-hover) !important;
}
.tw-card.payout-card {
  border-top: 1px solid var(--uc-border) !important;
}
.tw-card.payout-card:hover {
  border-color: var(--uc-border-hover) !important;
}

/* Category: consistent gray uppercase */
.tw-card-category {
  color: var(--uc-category-color) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
}

/* Title: consistent dark bold */
.tw-card-title {
  color: var(--uc-title-color) !important;
  font-size: 0.94rem !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Payout: match sr2 sizing */
.tw-card-payout {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--uc-payout-color) !important;
}

/* Deadline: urgency color coding */
.tw-card-deadline { color: #6b7280 !important; }
.tw-card-deadline.urgent { color: #dc2626 !important; }

/* Badge: consistent pill */
.tw-badge {
  border-radius: 100px !important;
  font-size: 0.63rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}
.tw-badge-new {
  background: #dcfce7 !important;
  color: #15803d !important;
}
.tw-badge-noproof {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}
.tw-badge-urgent {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

/* Grid height consistency */
.tw-grid {
  align-items: stretch !important;
}


/* ════════════════════════════════════════════════════════════
   LISTING PAGES — Settlement Listing Cards (.sl-card)
   expiring-soon, closing-this-week, no-proof, easiest
   ════════════════════════════════════════════════════════════ */
.sl-card {
  border: 1px solid var(--uc-border) !important;
  border-top: 1px solid var(--uc-border) !important; /* no accent top border */
  border-radius: var(--uc-radius) !important;
  box-shadow: var(--uc-shadow) !important;
  transition: var(--uc-transition) !important;
  background: var(--uc-bg) !important;
}
.sl-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--uc-border-hover) !important;
  box-shadow: var(--uc-shadow-hover) !important;
}
.sl-card:active {
  transform: translateY(-1px) !important;
}

/* Category: consistent gray */
.sl-card-category {
  color: var(--uc-category-color) !important;
  font-weight: 700 !important;
  font-size: 0.70rem !important;
}

/* Title: consistent dark bold */
.sl-card-title {
  color: var(--uc-title-color) !important;
  font-weight: 700 !important;
}

/* Payout stat: green consistent */
.sl-stat-payout { color: var(--uc-payout-color) !important; }

/* Badges: consistent pill style */
.sl-badge-noproof,
.sl-badge-urgent,
.sl-badge-warning,
.sl-badge-closed {
  border-radius: 100px !important;
}

/* Grid height consistency */
.sl-grid {
  align-items: stretch !important;
}
.sl-card-wrap {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.sl-card {
  flex: 1 !important;
}


/* ════════════════════════════════════════════════════════════
   LEADERBOARD PAGE — Ranked Settlement Cards (.lb-card)
   ════════════════════════════════════════════════════════════ */
.lb-card {
  border: 1px solid var(--uc-border) !important;
  border-radius: var(--uc-radius) !important;
  box-shadow: var(--uc-shadow) !important;
  transition: var(--uc-transition) !important;
  background: var(--uc-bg) !important;
}
.lb-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--uc-border-hover) !important;
  box-shadow: var(--uc-shadow-hover) !important;
}
.lb-card:active {
  transform: translateY(-1px) !important;
}

/* Rank-1 keep special gold tint but with unified borders */
.lb-card--rank-1 {
  border-color: rgba(245, 158, 11, 0.30) !important;
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 60%) !important;
  box-shadow: var(--uc-shadow) !important;
}
.lb-card--rank-1:hover {
  border-color: rgba(245, 158, 11, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.12), 0 8px 30px rgba(0,0,0,0.09) !important;
}

/* Rank-2 */
.lb-card--rank-2 {
  border-color: var(--uc-border) !important;
}

/* Rank-3 keep subtle warm tint */
.lb-card--rank-3 {
  background: linear-gradient(135deg, #fef9f5 0%, #ffffff 60%) !important;
  border-color: var(--uc-border) !important;
}

/* Payout: green consistent */
.lb-card-payout {
  color: var(--uc-payout-color) !important;
}


/* ════════════════════════════════════════════════════════════
   HOMEPAGE — Expiring Soon Cards (.expiring-card)
   ════════════════════════════════════════════════════════════ */
#main-content .expiring-card {
  background: var(--uc-bg) !important;
  border: 1px solid var(--uc-border) !important;
  border-radius: var(--uc-radius) !important;
  box-shadow: var(--uc-shadow) !important;
  transition: var(--uc-transition) !important;
  min-height: 0 !important; /* remove fixed min-height */
}
#main-content .expiring-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--uc-border-hover) !important;
  box-shadow: var(--uc-shadow-hover) !important;
}

/* Expiring grid height consistency */
.expiring-soon-grid {
  align-items: stretch !important;
}


/* ════════════════════════════════════════════════════════════
   GLOBAL — Consistent "Varies" payout display
   Any element with text "Varies" in a payout context
   ════════════════════════════════════════════════════════════ */

/* Consistent payout "Varies" display — used across all cards */
.la-card-payout,
.tw-card-payout,
.sl-stat-payout,
.lb-card-payout,
.expiring-payout,
.sr2-payout,
.sr2-payout-na {
  /* These are handled individually above;
     individual cards use their specific classes */
}


/* ════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Consistent on 375px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .la-card,
  .tw-card,
  .sl-card,
  .lb-card,
  #main-content .expiring-card {
    border-radius: 14px !important;
  }

  .la-card:hover,
  .tw-card:hover,
  .sl-card:hover,
  .lb-card:hover,
  #main-content .expiring-card:hover {
    transform: translateY(-2px) !important;
  }
}