/* ==========================================================================
   Fxprocapital — User dashboard page interiors (Phase 3)
   Additive overlay. Loaded AFTER css/style.css and fxpro-shell.css.

   Covers the per-page interiors of all 15 dashboard pages. No markup changes:
   everything here overrides existing rules or neutralises inline style=""
   attributes that carry the wrong values.

   Loaded via user/include/header.php so every dashboard page inherits it.
   Delete this file to revert. Brand: indigo #3C39AB.

   Contents
     1. Tokens
     2. Inline-style neutralisers (black cards/buttons -> theme)
     3. Balance / exchange panels
     4. Stat cards (.card-box) + their decorative SVG
     5. Trading pages: shared structure
     6. buy.php unique block (.custom-card etc.)
     7. profile.php
     8. transaction / trade_history
     9. Register / reset / forgot (auth shells)
    10. Reduce motion + small screens
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --fxp-primary: #3c39ab;
  --fxp-primary-hover: #2f2c85;
  --fxp-primary-dark: #141338;
  --fxp-primary-soft: rgba(60, 57, 171, 0.08);
  --fxp-accent: #2696fd;

  --fxp-ink: #131629;
  --fxp-ink-2: #424562;
  --fxp-muted: #7a7995;

  --fxp-surface: #ffffff;
  --fxp-canvas: #f3f5fb;
  --fxp-border: #e6e8f0;

  --fxp-success: #28be9d;
  --fxp-danger: #fd5353;
  --fxp-warning: #ffab2d;

  --fxp-radius: 14px;
  --fxp-radius-sm: 10px;
  --fxp-shadow-sm: 0 1px 2px rgba(19, 22, 41, 0.06);
  --fxp-shadow: 0 8px 24px -6px rgba(19, 22, 41, 0.12), 0 2px 6px rgba(19, 22, 41, 0.05);
}

/* --------------------------------------------------------------------------
   2. Inline-style neutralisers
   The pages hardcode `background-color:black` on 32 elements. Because inline
   styles out-rank a stylesheet, these need !important to take effect.
   Grouped by the four patterns that actually occur.
   -------------------------------------------------------------------------- */

/* 2a. Cards forced black. On a light theme these read as an unfinished
   dark-mode experiment; restore the themed surface. */
body[data-layout="vertical"] .card[style*="background-color:black"],
body[data-layout="vertical"] .card[style*="background-color: black"] {
  background: var(--fxp-surface) !important;
  border: 1px solid var(--fxp-border) !important;
}

/* 2b. Balance sub-panels forced black. Give them a subtle tinted surface so the
   figure still reads as a highlighted block rather than vanishing into the card. */
body[data-layout="vertical"] .balance[style*="background-color:black"],
body[data-layout="vertical"] .balance[style*="background-color: black"] {
  background: linear-gradient(135deg, var(--fxp-primary) 0%, #4d4ac4 100%) !important;
  border-radius: var(--fxp-radius-sm) !important;
  padding: 1.125rem 1.25rem !important;
}

body[data-layout="vertical"] .balance[style*="background-color:black"] h6,
body[data-layout="vertical"] .balance[style*="background-color:black"] .header-content h6,
body[data-layout="vertical"] .balance[style*="background-color:black"] .header-content span {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}

body[data-layout="vertical"] .balance[style*="background-color:black"] .count,
body[data-layout="vertical"] .balance[style*="background-color:black"] h4 {
  color: #fff !important;
  font-weight: 700;
  margin-bottom: 0;
}

/* 2c. <span class="btn"> used as a button with a black background and no
   .btn-primary class (so the shell overlay never matched it):
   "Place Trade" (crypto/stock/forex), "Transfer" (index), and similar. */
body[data-layout="vertical"] span.btn[style*="background-color:black"] {
  background: linear-gradient(135deg, var(--fxp-primary) 0%, #4d4ac4 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--fxp-radius-sm) !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.125rem !important;
  box-shadow: 0 4px 12px -3px rgba(60, 57, 171, 0.45);
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

body[data-layout="vertical"] span.btn[style*="background-color:black"]:hover {
  background: linear-gradient(135deg, var(--fxp-primary-hover) 0%, var(--fxp-primary) 100%) !important;
  box-shadow: 0 6px 16px -3px rgba(60, 57, 171, 0.55);
}

body[data-layout="vertical"] span.btn[style*="background-color:black"]:active {
  transform: translateY(1px);
}

/* 2d. Text forced black inside an otherwise light heading
   (e.g. index.php:758 `<span style="color:black;">...</span>` inside a
   .text-white h2 — currently invisible). Inherit the heading colour instead. */
body[data-layout="vertical"] h1 span[style*="color:black"],
body[data-layout="vertical"] h2 span[style*="color:black"],
body[data-layout="vertical"] h3 span[style*="color:black"],
body[data-layout="vertical"] .heading span[style*="color:black"] {
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   3. Exchange / balance header card (.card.exchange)
   -------------------------------------------------------------------------- */
body[data-layout="vertical"] .card.exchange .card-header {
  border-bottom: 0;
  padding: 1.5rem 1.25rem;
}

body[data-layout="vertical"] .card.exchange .heading {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fxp-ink) !important;
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   4. Stat cards (.card-box) + their decorative SVG
   These carry the light-blue #01A3FF line art drawn for a dark background.
   On the light surface it needs reduced presence, not full strength.
   -------------------------------------------------------------------------- */
body[data-layout="vertical"] .card.card-box {
  border: 1px solid var(--fxp-border);
  border-radius: var(--fxp-radius);
  box-shadow: var(--fxp-shadow-sm);
  overflow: hidden;
}

body[data-layout="vertical"] .card.card-box .back-image {
  opacity: 0.35;
  pointer-events: none;
}

body[data-layout="vertical"] .card.card-box .back-image svg g {
  opacity: 0.5;
}

body[data-layout="vertical"] .card.card-box h2,
body[data-layout="vertical"] .card.card-box h4,
body[data-layout="vertical"] .card.card-box .count {
  color: var(--fxp-ink) !important;
  font-weight: 700;
}

body[data-layout="vertical"] .card.card-box h6,
body[data-layout="vertical"] .card.card-box span {
  color: var(--fxp-muted) !important;
}

/* --------------------------------------------------------------------------
   5. Trading pages — shared structure
   crypto.php / stock.php / forex.php / copy_trade.php all use the same
   .card + form + .btn list layout. Keep spacing consistent.
   -------------------------------------------------------------------------- */
body[data-layout="vertical"] .card .card-header.d-block {
  border-bottom: 0;
}

body[data-layout="vertical"] .card .card-body > form .form-group:last-of-type {
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   6. buy.php — its only unique CSS block (.custom-card etc.)
   buy.php:766-872 defines these inline; we align them with the token set.
   -------------------------------------------------------------------------- */
body[data-layout="vertical"] .card.custom-card {
  background: var(--fxp-surface) !important;
  border: 1px solid var(--fxp-border) !important;
  border-radius: var(--fxp-radius) !important;
  box-shadow: var(--fxp-shadow-sm) !important;
}

body[data-layout="vertical"] .main-content-label {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--fxp-ink);
  letter-spacing: -0.01em;
}

body[data-layout="vertical"] .card-body p {
  font-size: 0.9375rem;
  color: var(--fxp-muted);
}

body[data-layout="vertical"] .btn-list a {
  border-radius: var(--fxp-radius-sm) !important;
  background: var(--fxp-canvas) !important;
  color: var(--fxp-primary) !important;
  font-weight: 600;
  padding: 0.75rem 1.125rem !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body[data-layout="vertical"] .btn-list a:hover,
body[data-layout="vertical"] .btn-list a:focus {
  background: var(--fxp-primary-soft) !important;
  color: var(--fxp-primary-hover) !important;
}

/* --------------------------------------------------------------------------
   7. profile.php — author/profile cards
   -------------------------------------------------------------------------- */
body[data-layout="vertical"] .profile-card.author-profile {
  border: 1px solid var(--fxp-border);
  border-radius: var(--fxp-radius);
  box-shadow: var(--fxp-shadow-sm);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. transaction.php / trade_history.php
   (These two files are byte-identical — a separate finding.)
   -------------------------------------------------------------------------- */
body[data-layout="vertical"] .card.lastest_trans.h-auto {
  border: 1px solid var(--fxp-border);
  border-radius: var(--fxp-radius);
  box-shadow: var(--fxp-shadow-sm);
}

/* --------------------------------------------------------------------------
   9. Auth shells (register / reset-pass / forgot_password)
   These share the .card.main-width > .card nested pattern already handled by
   fxpro-user.css for login.php; extend the same treatment here.
   -------------------------------------------------------------------------- */
body[data-layout="vertical"] .card.main-width {
  max-width: 460px;
  margin: 0 auto;
}

body[data-layout="vertical"] .card.main-width > .card {
  border: 0;
  border-radius: var(--fxp-radius);
  box-shadow: 0 24px 48px -12px rgba(19, 22, 41, 0.22);
  overflow: hidden;
}

body[data-layout="vertical"] .card.main-width > .card > .card-body {
  padding: 2rem;
}

/* --------------------------------------------------------------------------
   10. Reduce motion + small screens
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body[data-layout="vertical"] span.btn[style*="background-color:black"],
  body[data-layout="vertical"] .btn-list a {
    transition: none !important;
  }
}

@media (max-width: 767.98px) {
  body[data-layout="vertical"] .card.exchange .card-header {
    padding: 1.125rem 1rem;
  }

  body[data-layout="vertical"] .card.main-width > .card > .card-body {
    padding: 1.5rem 1.25rem;
  }

  body[data-layout="vertical"] .balance[style*="background-color:black"] {
    padding: 1rem 1.125rem !important;
  }
}