/**
 * Finecharted Portal — Dark Gold Theme
 * ====================================
 * Override file. Loads LAST so it wins specificity wars.
 *
 * Background: #0d0d10 (deep warm-charcoal)
 * Surface:    #16161b (cards / panels)
 * Border:     #2a2a31
 * Text:       #f3f1ec → #a8a299 → #6c6862
 * Accent:     #C2A56D (gold) · hover #d6bd86 · pressed #a88d57
 * Profit:     #6cd58a   Loss: #ef5350   Warn: #e8b251
 *
 * No JS or HTML changes — pure visual override.
 * Originally Stonegate macOS-light, retargeted to dark + gold.
 */

/* ──────────────────────────────────────────────────────────
   1. Re-skin the design tokens at :root
   ────────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --bg: #0d0d10 !important;
  --bg-secondary: #16161b !important;
  --bg-tertiary: #1a1a20 !important;
  --surface: rgba(22,22,27,0.92) !important;
  --surface-raised: rgba(28,28,34,0.98) !important;
  --surface-hover: rgba(194,165,109,0.07) !important;
  --surface-pressed: rgba(194,165,109,0.12) !important;

  /* text */
  --text-primary: #f3f1ec !important;
  --text-secondary: #c7c2b8 !important;
  --text-tertiary: #8e8a82 !important;
  --text-quaternary: #5e5b54 !important;

  /* accents — every "colored" thing now reads as gold */
  --blue: #C2A56D !important;
  --indigo: #C2A56D !important;
  --purple: #C2A56D !important;
  --teal: #C2A56D !important;
  --orange: #e8b251 !important;
  --yellow: #d6bd86 !important;

  /* profit / loss kept readable on dark */
  --green: #6cd58a !important;
  --red: #ef5350 !important;
  --profit: #6cd58a !important;
  --loss: #ef5350 !important;
  --neutral: #8e8a82 !important;

  /* borders & separators */
  --border: rgba(255,255,255,0.08) !important;
  --border-strong: rgba(255,255,255,0.18) !important;
  --separator: rgba(255,255,255,0.06) !important;

  /* shadows softer in dark */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4) !important;
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5) !important;
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.55) !important;
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(194,165,109,0.08) !important;
}

/* Custom convenience tokens for this theme */
:root {
  --gold: #C2A56D;
  --gold-soft: #d6bd86;
  --gold-deep: #a88d57;
  --gold-glow: rgba(194,165,109,0.18);
}

/* ──────────────────────────────────────────────────────────
   2. Body / html
   ────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
}

a, a:visited { color: var(--gold) !important; }
a:hover { color: var(--gold-soft) !important; }

::selection { background: var(--gold-glow); color: var(--text-primary); }

/* Scrollbars */
::-webkit-scrollbar-thumb {
  background: rgba(194,165,109,0.25) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(194,165,109,0.45) !important;
}

/* ──────────────────────────────────────────────────────────
   3. Login / Register / Reset screens
   ────────────────────────────────────────────────────────── */
.login-screen {
  background: radial-gradient(120% 80% at 50% 0%, #1a1a22 0%, #0d0d10 55%, #08080b 100%) !important;
}

.login-box {
  background: rgba(22,22,27,0.96) !important;
  border: 1px solid rgba(194,165,109,0.18) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(20px);
}

.login-logo .brand-logo {
  background: linear-gradient(145deg, #1f1f26, #0d0d10) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(194,165,109,0.25);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(194,165,109,0.15);
}
.login-logo h1,
.login-logo h1 * {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background: none !important;
}
.login-logo p { color: var(--text-tertiary) !important; }

/* ──────────────────────────────────────────────────────────
   4. Inputs (login fields, deposit, kyc, settings)
   ────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="date"], select, textarea, .form-input, .form-control {
  background: #0d0d10 !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  caret-color: var(--gold);
}

input::placeholder, textarea::placeholder { color: var(--text-quaternary) !important; }

input:focus, select:focus, textarea:focus,
.form-input:focus, .form-control:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-glow) !important;
}

/* select arrow */
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right: 30px !important;
}

/* ──────────────────────────────────────────────────────────
   5. Buttons — primary becomes gold
   ────────────────────────────────────────────────────────── */
.btn, button.btn, .button, .btn-primary,
button[type="submit"]:not(.btn-secondary):not(.btn-danger):not(.btn-ghost),
.login-btn, .register-btn, .submit-btn, .deposit-btn,
.action-btn, .primary-btn {
  background: linear-gradient(145deg, var(--gold-soft), var(--gold)) !important;
  color: #1a1410 !important;
  border: 1px solid var(--gold-deep) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: transform .15s, box-shadow .15s, filter .15s;
  box-shadow:
    0 4px 14px rgba(194,165,109,0.25),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.btn:hover, button.btn:hover, .button:hover, .btn-primary:hover,
button[type="submit"]:not(.btn-secondary):not(.btn-danger):not(.btn-ghost):hover,
.login-btn:hover, .register-btn:hover, .submit-btn:hover, .deposit-btn:hover,
.action-btn:hover, .primary-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px rgba(194,165,109,0.35),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.btn:active, .button:active, .btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* secondary / ghost */
.btn-secondary, .btn-ghost, .secondary-btn {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
}
.btn-secondary:hover, .btn-ghost:hover, .secondary-btn:hover {
  background: var(--surface-hover) !important;
  border-color: var(--gold) !important;
  color: var(--gold-soft) !important;
}

/* danger stays red but tuned */
.btn-danger, .danger-btn {
  background: linear-gradient(145deg, #f56560, #ef5350) !important;
  color: #fff !important;
  border-color: #c62828 !important;
}

/* Buy / Sell on trading page — keep semantic colors */
.buy-btn, .btn-buy, .order-buy {
  background: linear-gradient(145deg, #7ee2a0, #6cd58a) !important;
  color: #0d0d10 !important;
  border: 1px solid #4caf50 !important;
}
.sell-btn, .btn-sell, .order-sell {
  background: linear-gradient(145deg, #f56560, #ef5350) !important;
  color: #fff !important;
  border: 1px solid #c62828 !important;
}

/* ──────────────────────────────────────────────────────────
   6. App layout — header, panels, cards, tabs
   ────────────────────────────────────────────────────────── */
.app-header,
.panel,
.balance-card,
.assets-panel, .chart-section, .order-panel,
.account-stats-panel, .promo-section,
.deposit-section, .withdrawal-section, .transactions-section,
.kyc-section, .settings-section {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text-primary) !important;
}

.panel-header, .chart-header, .section-header {
  background: transparent !important;
  border-bottom: 1px solid var(--separator) !important;
  color: var(--text-primary) !important;
}

.panel-title, .section-title, .chart-symbol, .chart-price,
h1, h2, h3, h4, h5, .balance-value, .user-name {
  color: var(--text-primary) !important;
}

.balance-label, .user-account, .text-secondary {
  color: var(--text-tertiary) !important;
}

/* Brand mark in header */
.brand-logo {
  background: linear-gradient(145deg, #1f1f26, #0d0d10) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(194,165,109,0.25);
}
.brand-text h1 {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background: none !important;
}

/* Balance card top accents → gold/gradient instead of green/blue/etc */
.balance-card { border-top: 3px solid var(--gold) !important; }
.balance-card.cyan,
.balance-card.violet,
.balance-card.yellow { border-top-color: var(--gold) !important; }
.balance-card.cyan .balance-value,
.balance-card.violet .balance-value,
.balance-card.yellow .balance-value { color: var(--gold) !important; }

/* Nav tabs */
.nav-tabs {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
}
.nav-tab {
  color: var(--text-tertiary) !important;
  background: transparent !important;
}
.nav-tab:hover {
  color: var(--text-primary) !important;
  background: var(--surface-hover) !important;
}
.nav-tab.active {
  background: rgba(194,165,109,0.12) !important;
  color: var(--gold-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(194,165,109,0.35) !important;
  font-weight: 600 !important;
}

/* ──────────────────────────────────────────────────────────
   7. Tables (transactions, deposits, withdrawals, kyc list)
   ────────────────────────────────────────────────────────── */
table { background: transparent !important; color: var(--text-primary) !important; }
table th {
  background: rgba(255,255,255,0.02) !important;
  color: var(--text-tertiary) !important;
  border-bottom: 1px solid var(--border) !important;
}
table td { border-bottom: 1px solid var(--separator) !important; }
table tr:hover td { background: var(--surface-hover) !important; }

/* Status badges */
.badge, .status-badge, .pill {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}
.badge.approved, .status-badge.approved, .badge.completed, .status-badge.completed,
.badge.active, .status-badge.active {
  background: rgba(108,213,138,0.12) !important;
  color: #87e1a4 !important;
  border-color: rgba(108,213,138,0.3) !important;
}
.badge.rejected, .status-badge.rejected, .badge.cancelled, .status-badge.cancelled,
.badge.failed, .status-badge.failed {
  background: rgba(239,83,80,0.12) !important;
  color: #f5807e !important;
  border-color: rgba(239,83,80,0.3) !important;
}
.badge.pending, .status-badge.pending, .badge.under_review, .status-badge.under_review {
  background: rgba(232,178,81,0.12) !important;
  color: #f0c879 !important;
  border-color: rgba(232,178,81,0.3) !important;
}

/* ──────────────────────────────────────────────────────────
   8. Modals
   ────────────────────────────────────────────────────────── */
.modal, .modal-content, .modal-body, .modal-dialog {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}
.modal-header, .modal-footer {
  border-color: var(--separator) !important;
  background: transparent !important;
}
.modal-overlay, .modal-backdrop {
  background: rgba(0,0,0,0.7) !important;
  backdrop-filter: blur(6px);
}

/* ──────────────────────────────────────────────────────────
   9. KYC Wizard
   ────────────────────────────────────────────────────────── */
.kyc-wizard, .wizard-step, .upload-zone {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.upload-zone { border-style: dashed !important; border-color: var(--border-strong) !important; }
.upload-zone.dragover, .upload-zone:hover {
  border-color: var(--gold) !important;
  background: rgba(194,165,109,0.05) !important;
}
.wizard-step.active .step-indicator,
.step-indicator.active {
  background: var(--gold) !important;
  color: #1a1410 !important;
  box-shadow: 0 0 0 4px var(--gold-glow);
}

/* ──────────────────────────────────────────────────────────
   10. Trading chart wrapper
   (overrides the previously-shipped portal-light-override.css)
   ────────────────────────────────────────────────────────── */
.chart-section {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.chart-header {
  background: transparent !important;
  border-bottom: 1px solid var(--separator) !important;
}
.chart-symbol, .chart-price {
  color: var(--text-primary) !important;
}
.chart-container {
  background: #0d0d10 !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.chart-change.positive { color: #87e1a4 !important; background: rgba(108,213,138,0.12) !important; }
.chart-change.negative { color: #f5807e !important; background: rgba(239,83,80,0.12) !important; }
.live-indicator { color: #87e1a4 !important; }
.live-indicator .pulse { background: #6cd58a !important; }

/* Assets panel */
.assets-panel { background: var(--bg-secondary) !important; border-color: var(--border) !important; }
.asset-row { border-bottom: 1px solid var(--separator) !important; color: var(--text-primary) !important; }
.asset-row:hover { background: var(--surface-hover) !important; }
.asset-row.active {
  background: rgba(194,165,109,0.10) !important;
  border-left: 3px solid var(--gold) !important;
}

/* ──────────────────────────────────────────────────────────
   11. Misc visual cleanup
   ────────────────────────────────────────────────────────── */
hr, .divider { border-color: var(--separator) !important; }

code, pre, .mono { color: var(--gold-soft) !important; }

/* Toast notifications */
.toast, .notification {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}
.toast.success, .notification.success { border-left: 3px solid #6cd58a !important; }
.toast.error, .notification.error { border-left: 3px solid #ef5350 !important; }
.toast.info, .notification.info { border-left: 3px solid var(--gold) !important; }

/* spinners / loading */
.spinner, .loading-spinner {
  border-color: rgba(194,165,109,0.15) !important;
  border-top-color: var(--gold) !important;
}

/* SUPPLEMENTAL: markets + sessions hardening
   Higher-specificity overrides to win over portal-light-override.css
   even if it's still loaded somehow. */

body .assets-panel,
body .order-panel,
body .market-sessions-panel,
body .account-stats-panel,
body .promo-section,
body .positions-section {
  background: #16161b !important;
  border-color: #2a2a31 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  color: #f3f1ec !important;
}

body .assets-header,
body .order-header,
body .positions-header,
body .session-header,
body .market-sessions-panel h4,
body .account-stats-panel h4 {
  background: transparent !important;
  border-bottom-color: #1f1f26 !important;
  color: #f3f1ec !important;
}

body .asset-search {
  background: #0d0d10 !important;
  border: 1px solid #2a2a31 !important;
  color: #f3f1ec !important;
}
body .asset-search::placeholder { color: #5e5b54 !important; }
body .asset-search:focus {
  border-color: #C2A56D !important;
  box-shadow: 0 0 0 3px rgba(194,165,109,0.18) !important;
}

body .asset-item {
  background: transparent !important;
  border-bottom: 1px solid #1f1f26 !important;
  color: #f3f1ec !important;
}
body .asset-item:hover {
  background: rgba(194,165,109,0.06) !important;
}
body .asset-item.selected {
  background: rgba(194,165,109,0.12) !important;
  border-left: 3px solid #C2A56D !important;
  box-shadow: inset 0 0 0 1px rgba(194,165,109,0.25) !important;
}

body .asset-name { color: #f3f1ec !important; }
body .asset-icon { filter: none !important; }
body .asset-price .price { color: #f3f1ec !important; }
body .asset-price .change.positive { color: #87e1a4 !important; }
body .asset-price .change.negative { color: #f5807e !important; }

/* Category sub-headers (forex / crypto / metals / indices) inside .assets-list */
body .assets-list .category-label,
body .assets-list .group-header,
body .assets-list h5,
body .assets-list h6 {
  background: rgba(255,255,255,0.02) !important;
  color: #8e8a82 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  padding: 6px 10px !important;
}

/* Market Sessions panel children */
body .market-sessions-panel .session-item {
  border-bottom: 1px solid #1f1f26 !important;
  color: #f3f1ec !important;
}
body .market-sessions-panel .session-item span {
  color: inherit !important;
}

/* "Contact account manager" notice in order panel */
body .order-form .order-buttons > div[style*="rgba(0,122,255"] {
  background: rgba(194,165,109,0.10) !important;
  border-color: rgba(194,165,109,0.3) !important;
  color: #C2A56D !important;
}

/* Scrollbar inside assets list */
body .assets-list::-webkit-scrollbar-track { background: transparent !important; }
body .assets-list::-webkit-scrollbar-thumb {
  background: rgba(194,165,109,0.25) !important;
}