/* ══════════════════════════════════════════════════════════════
   FOX CRM — Player Profile (v3): clean floating drawer
   Cover banner + overlapping avatar, white surfaces, dashed separators,
   FOX orange as the accent. Scoped to .fxpp. Font inherited from the app.
   ══════════════════════════════════════════════════════════════ */

/* ── Floating drawer ── */
@media (min-width: 640px) {
  .fxpp {
    margin: 12px auto 12px 12px !important; /* keep it docked to the left like before */
    height: calc(100% - 24px) !important;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
  }
}
.fxpp {
  background: #fff !important;
  box-shadow: 0 24px 64px -16px rgba(17, 24, 39, .28) !important;
}

/* ── Header with cover banner ── */
.fxpp .fxpp-head {
  position: relative !important;   /* scrolls away; tabs become the sticky bar */
  background: #fff !important;
  padding-top: 68px !important;
  padding-bottom: 18px !important;
}
.fxpp .fxpp-head::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  height: 96px;
  border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 96' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fdba74'/%3E%3Cstop offset='.55' stop-color='%23fb923c'/%3E%3Cstop offset='1' stop-color='%23f472b6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f97316'/%3E%3Cstop offset='1' stop-color='%23fb7185'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 70 C80 40 150 38 230 52 C310 66 360 30 440 34 C510 38 560 58 600 50 L600 96 L0 96Z' fill='url(%23a)' opacity='.55'/%3E%3Cpath d='M0 84 C90 66 170 72 250 78 C340 86 400 60 480 62 C540 64 575 76 600 72 L600 96 L0 96Z' fill='url(%23b)' opacity='.45'/%3E%3C/svg%3E") bottom / 100% 70% no-repeat,
    linear-gradient(180deg, #fbf7f4 0%, #fdf1e7 100%);
  pointer-events: none;
}
.fxpp .fxpp-head > *:not(.fxpp-close) { position: relative; z-index: 1; }

/* avatar stacked above the name, overlapping the banner */
.fxpp .fxpp-head > .flex.items-center.gap-4 {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 12px !important;
}
.fxpp .fxpp-avatar {
  width: 76px !important;
  height: 76px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #fff7ed, #ffedd5) !important;
  color: #ea580c !important;
  border: 4px solid #fff;
  box-shadow: 0 6px 18px -6px rgba(17, 24, 39, .22) !important;
  font-size: 1.75rem !important;
}
.fxpp .fxpp-head h2 { color: #111827 !important; line-height: 1.25; }
.fxpp .fxpp-head .text-white\/80 { color: #6b7280 !important; }

/* close: small white square, like the banner's corner button */
.fxpp .fxpp-close {
  top: 16px !important;
  left: 16px !important;
  z-index: 2 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #6b7280 !important;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
  transition: background .15s ease, color .15s ease;
}
.fxpp .fxpp-close:hover { background: #fff !important; color: #111827 !important; }

/* actions: primary (deposit) + outline buttons */
.fxpp .fxpp-actions { margin-top: 16px !important; }
.fxpp .fxpp-actions > button {
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .05) !important;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fxpp .fxpp-actions > button:hover { background: #f9fafb !important; }
.fxpp .fxpp-actions > button:first-child {
  background: #f19225 !important;
  border-color: #f19225 !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(241, 146, 37, .3), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
.fxpp .fxpp-actions > button:first-child:hover { background: #e7851a !important; border-color: #e7851a !important; }
.fxpp .fxpp-actions > button[class*="bg-red-500"] {
  background: #fff !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
}
.fxpp .fxpp-actions > button[class*="bg-red-500"]:hover { background: #fef2f2 !important; }
.fxpp .fxpp-actions > button[class*="bg-green-500"] {
  background: #fff !important;
  color: #16a34a !important;
  border-color: #bbf7d0 !important;
}
.fxpp .fxpp-actions > button[class*="bg-green-500"]:hover { background: #f0fdf4 !important; }

/* ── Tabs: sticky white bar ── */
.fxpp .fxpp-tabs {
  position: sticky;
  top: 0;
  z-index: 9;
  background: rgba(255, 255, 255, .96) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px dashed #e5e7eb;
  border-bottom: 1px solid #e5e7eb !important;
  scrollbar-width: none;
}
.fxpp .fxpp-tabs::-webkit-scrollbar { display: none; }
.fxpp .fxpp-tabs > button { color: #6b7280; }
.fxpp .fxpp-tabs > button[class*="border-[#f19225]"] { color: #111827 !important; }

/* ── Stat cards: dashboard style — white card, gradient icon chip, big value, soft tone pill ── */
.fxpp .fxpp-stat {
  --t1: #3b82f6; --t2: #2563eb; --tw: #eff6ff; --tw2: #f8fbff; --tp: #1d4ed8; --tb: #dbeafe; --tb2: #bfdbfe;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid var(--tb);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, var(--tw) 0%, var(--tw2) 100%) !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 8px 24px -14px rgba(17, 24, 39, .12) !important;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
  overflow: hidden;
}
.fxpp .fxpp-stat:hover {
  transform: translateY(-2px);
  border-color: var(--tb2);
  box-shadow: 0 2px 4px rgba(17, 24, 39, .04), 0 16px 32px -16px rgba(17, 24, 39, .2) !important;
}
.fxpp .fxpp-stat > div:first-child { display: contents; }

/* icon chip */
.fxpp .fxpp-stat > div:first-child > svg {
  order: 1;
  box-sizing: border-box;
  width: 38px !important;
  height: 38px !important;
  padding: 9px;
  margin-bottom: 14px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, var(--t1), var(--t2));
  box-shadow: 0 6px 14px -6px var(--t2), inset 0 1px 0 rgba(255,255,255,.25);
  opacity: 1 !important;
  flex: none;
}
/* value */
.fxpp .fxpp-stat > div:nth-child(2) {
  order: 2;
  color: #111827 !important;
  font-size: 1.6rem !important;
  line-height: 1.15;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* label */
.fxpp .fxpp-stat > div:first-child > span {
  order: 3;
  margin-top: 4px;
  color: #6b7280;
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}
/* sub → soft tone pill */
.fxpp .fxpp-stat > div:nth-child(3) {
  order: 4;
  margin-top: 12px !important;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--tb);
  color: var(--tp) !important;
  font-size: 11.5px !important;
  font-weight: 600;
  opacity: 1 !important;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}

/* tones */
.fxpp .fxpp-stat.text-blue-800   { --t1:#60a5fa; --t2:#2563eb; --tw:#eff6ff; --tw2:#f8fbff; --tb:#dbeafe; --tb2:#bfdbfe; --tp:#1d4ed8; }
.fxpp .fxpp-stat.text-purple-800 { --t1:#a78bfa; --t2:#7c3aed; --tw:#f5f3ff; --tw2:#fbfaff; --tb:#ede9fe; --tb2:#ddd6fe; --tp:#6d28d9; }
.fxpp .fxpp-stat.text-green-800  { --t1:#34d399; --t2:#059669; --tw:#ecfdf5; --tw2:#f7fefb; --tb:#d1fae5; --tb2:#a7f3d0; --tp:#047857; }
.fxpp .fxpp-stat.text-red-800    { --t1:#fb7185; --t2:#e11d48; --tw:#fff1f2; --tw2:#fff8f8; --tb:#ffe4e6; --tb2:#fecdd3; --tp:#be123c; }
.fxpp .fxpp-stat.text-indigo-800 { --t1:#818cf8; --t2:#4f46e5; --tw:#eef2ff; --tw2:#f8f9ff; --tb:#e0e7ff; --tb2:#c7d2fe; --tp:#4338ca; }
.fxpp .fxpp-stat.text-cyan-800   { --t1:#22d3ee; --t2:#0891b2; --tw:#ecfeff; --tw2:#f6ffff; --tb:#cffafe; --tb2:#a5f3fc; --tp:#0e7490; }
.fxpp .fxpp-stat.text-amber-800  { --t1:#fbbf24; --t2:#f59e0b; --tw:#fffbeb; --tw2:#fffdf6; --tb:#fef3c7; --tb2:#fde68a; --tp:#b45309; }

@media (max-width: 520px) {
  .fxpp .fxpp-stat { padding: 14px !important; }
  .fxpp .fxpp-stat > div:nth-child(2) { font-size: 1.3rem !important; }
}

/* ── Info boxes: clean rows with dashed separators ── */
.fxpp .fxpp-box {
  border-color: #e5e7eb !important;
  border-radius: 14px !important;
}
.fxpp .fxpp-box-head {
  background: #fff !important;
  border-bottom: 1px dashed #e5e7eb !important;
}
.fxpp .fxpp-box-head span { color: #111827 !important; }
.fxpp .fxpp-box .border-gray-50 {
  border-bottom-style: dashed !important;
  border-bottom-color: #e5e7eb !important;
}
.fxpp .fxpp-box .border-gray-50:last-child { border-bottom: 0 !important; }