/* ══════════════════════════════════════════════════════════════
   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: white, thin border, color only on icon + value ── */
.fxpp .fxpp-stat {
  background: #fff !important;
  border: 1px solid #e5e7eb;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fxpp .fxpp-stat:hover { border-color: #d1d5db; box-shadow: 0 4px 14px -6px rgba(17, 24, 39, .12) !important; }
.fxpp .fxpp-stat > div:first-child > span { color: #6b7280; opacity: 1 !important; }
.fxpp .fxpp-stat > div:first-child > svg { opacity: 1 !important; }
.fxpp .fxpp-stat > div:nth-child(3) { color: #9ca3af; opacity: 1 !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; }