/**
 * team.contactgain.xyz/assets/css/pr-theme.css
 * PR & Referrals design system. Loaded ON TOP of the shared admin.css/main.css
 * (which the whole team portal borrowed as-is from the generic admin panel —
 * that's why it read as dilapidated/generic). This file gives the PR section
 * its own identity while staying inside the existing brand green so it
 * doesn't feel like a different product from the rest of the platform.
 *
 * DESIGN PLAN
 * Color   — --pr-ink (near-black, green-tinted, for headings/dark surfaces),
 *           --pr-primary/--pr-deep (existing brand green, kept for continuity),
 *           --pr-gold (a warm commission/payout accent — the one color in
 *           this system that ISN'T green, reserved only for money figures
 *           and earned-state indicators so it stays meaningful, not decorative),
 *           --pr-paper (soft green-tinted page background instead of stark
 *           white), --pr-line (hairline border / perforation color).
 * Type    — Sora (700/800) for headings and big numbers — a geometric,
 *           confident display face distinct from the Inter used everywhere
 *           else in the app for body/data. Money figures use tabular-nums
 *           so digits don't jitter as they update.
 * Layout  — Signature element: the "payout stub" card. A PR partner's
 *           relationship with this whole section is "this represents money
 *           you will be paid" — so every stat/commission card is treated
 *           like a receipt/payout stub: an eyebrow strip, a dashed
 *           perforation line with circular notches cut into the edges (pure
 *           CSS, no images), then the figure below. Used for stat cards on
 *           the dashboard, wallet, and landing page alike, so the motif
 *           reads as one coherent idea across the whole section rather than
 *           a one-off hero decoration.
 */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap');

:root {
  --pr-ink:          #0b1f16;
  --pr-primary:       #16a34a;
  --pr-primary-light: #22c55e;
  --pr-deep:          #0f5132;
  --pr-gold:          #eab308;
  --pr-gold-deep:     #a16207;
  --pr-paper:         #f6f9f7;
  --pr-line:          #dbe6df;
  --pr-shadow:        0 1px 2px rgba(11,31,22,.04), 0 8px 24px -12px rgba(11,31,22,.12);
}

.pr-scope, body.admin-page:has(.pr-scope) { background: var(--pr-paper); }

.pr-scope h1, .pr-scope h2, .pr-scope h3, .pr-scope h4, .pr-scope h5, .pr-scope h6,
.pr-hero h1, .pr-hero h2 {
  font-family: 'Sora', 'Inter', sans-serif;
  color: var(--pr-ink);
  letter-spacing: -0.01em;
}

.pr-scope .money, .pr-hero .money {
  font-family: 'Sora', 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

/* Signature: the payout-stub card
   Eyebrow strip, then a dashed perforation with two notches punched out of
   its ends, then the body. The notches are two radial-gradient "bites" —
   pure CSS, no image assets. */
.pr-stub {
  position: relative;
  background: #fff;
  border: 1px solid var(--pr-line);
  border-radius: 14px;
  box-shadow: var(--pr-shadow);
  overflow: visible;
}
.pr-stub__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .85rem 1.1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pr-deep);
}
.pr-stub__perforation {
  position: relative;
  height: 0;
  border-top: 1.5px dashed var(--pr-line);
  margin: 0 1.1rem;
}
.pr-stub__perforation::before,
.pr-stub__perforation::after {
  content: '';
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pr-paper);
  border: 1px solid var(--pr-line);
}
.pr-stub__perforation::before { left: calc(-1.1rem - 7px); }
.pr-stub__perforation::after  { right: calc(-1.1rem - 7px); }
.pr-stub__body {
  padding: 1.1rem 1.1rem 1.3rem;
}
.pr-stub__figure {
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--pr-ink);
}
.pr-stub__figure.gold { color: var(--pr-gold-deep); }
.pr-stub__caption {
  font-size: .82rem;
  color: #5b6b62;
  margin-top: .25rem;
}
.pr-stub--accent .pr-stub__eyebrow { background: linear-gradient(135deg, var(--pr-deep), var(--pr-primary)); color: #fff; border-radius: 14px 14px 0 0; }
.pr-stub--accent .pr-stub__perforation { border-top-color: rgba(255,255,255,.5); margin-top: -1px; }
/* The eyebrow strip alone was gold-on-white — fine — but the figure/caption
   below it are set to white text in the markup while the body kept the
   default white .pr-stub background, making them invisible in EVERY theme,
   not just dark mode. Carrying the gradient down through the whole card
   fixes that and keeps the white text (and its dark-mode override) legible. */
.pr-stub--accent .pr-stub__body {
  background: linear-gradient(160deg, var(--pr-deep), var(--pr-primary) 85%);
}
.pr-stub--accent .pr-stub__perforation::before,
.pr-stub--accent .pr-stub__perforation::after {
  background: var(--pr-paper);
}

.pr-scope .card, .pr-card {
  border: 1px solid var(--pr-line);
  border-radius: 14px;
  box-shadow: var(--pr-shadow);
}
.pr-scope .card-header, .pr-card-header {
  background: transparent;
  border-bottom: 1px solid var(--pr-line);
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--pr-ink);
}
.pr-scope .table thead th {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5b6b62;
  border-bottom: 1.5px solid var(--pr-line);
}
.pr-scope .badge.bg-success, .badge-pr-earned {
  background: #ecfdf3 !important;
  color: var(--pr-deep) !important;
  font-weight: 700;
  border: 1px solid #bbf0d0;
}
.pr-scope .badge-pr-gold {
  background: #fef9e7 !important;
  color: var(--pr-gold-deep) !important;
  font-weight: 700;
  border: 1px solid #fde68a;
}

.btn-pr-primary {
  background: linear-gradient(135deg, var(--pr-primary), var(--pr-deep));
  color: #fff;
  border: none;
  font-weight: 700;
  border-radius: 10px;
}
.btn-pr-primary:hover { color: #fff; filter: brightness(1.06); }
.btn-pr-gold {
  background: var(--pr-gold);
  color: #422006;
  border: none;
  font-weight: 700;
  border-radius: 10px;
}
.btn-pr-gold:hover { color: #422006; filter: brightness(1.05); }

.pr-scope .dropdown-item:hover, .pr-scope .dropdown-item:focus {
  background: #ecfdf3;
  color: var(--pr-deep);
}

.pr-hero {
  position: relative;
  background: radial-gradient(1200px 480px at 15% -10%, rgba(34,197,94,.16), transparent 60%),
              linear-gradient(180deg, var(--pr-paper), #fff 65%);
  border-bottom: 1px solid var(--pr-line);
}
.pr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pr-deep);
  background: #ecfdf3;
  border: 1px solid #bbf0d0;
  padding: .35rem .75rem;
  border-radius: 99px;
}

/* .pr-stat-card / .pr-card family
   These classes are used throughout pr/dashboard.php, pr/wallet.php, etc.
   but had NO CSS definition anywhere in the codebase before this file —
   they were rendering as bare unstyled <div>s. This is very likely the
   real source of the "dilapidated" look, more than any color/font choice.
   Styled here to match the payout-stub system above. */
.pr-scope .pr-stat-card {
  background: #fff;
  border: 1px solid var(--pr-line);
  border-radius: 14px;
  box-shadow: var(--pr-shadow);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 100%;
}
.pr-scope .pr-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.pr-scope .pr-stat-label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5b6b62;
}
.pr-scope .pr-stat-value {
  font-family: 'Sora', 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1.55rem;
  color: var(--pr-ink);
  line-height: 1.15;
}
.pr-scope .pr-card {
  background: #fff;
  border: 1px solid var(--pr-line);
  border-radius: 14px;
  box-shadow: var(--pr-shadow);
  overflow: hidden;
}
.pr-scope .pr-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--pr-line);
  background: var(--pr-paper);
}
.pr-scope .pr-card-header h6, .pr-scope .pr-card-header h5 {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--pr-ink);
  margin: 0;
}
.pr-scope .pr-card .card-body,
.pr-scope .pr-card > *:not(.pr-card-header) {
  padding: 1.25rem;
}

@media (max-width: 767px) {
  .pr-scope .pr-stat-value { font-size: 1.25rem; }
}