/**
 * STONEGATE - macOS Light Override
 * Overrides dark theme from portal-trading-enhancement.css
 * and portal-deposit-enhancement.css
 * Upload to: /css/portal-light-override.css
 * Add LAST in app.php after all other CSS links
 */

/* ── Trading Section ─────────────────────────────────────── */

.chart-section {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.chart-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

.chart-symbol {
  color: #1c1c1e !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.chart-price {
  color: #1c1c1e !important;
}

.chart-container {
  background: #f9f9fb !important;
  height: 460px !important;
}

.chart-change.positive { color: #1a8a38 !important; background: rgba(52,199,89,.12) !important; }
.chart-change.negative { color: #d32f2f !important; background: rgba(255,59,48,.10) !important; }

.live-indicator { color: #1a8a38 !important; }
.live-indicator .pulse { background: #34c759 !important; }

/* ── Assets Panel ─────────────────────────────────────────── */

.assets-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.assets-header {
  background: #f9f9fb !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  color: #1c1c1e !important;
}

.asset-search {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 8px !important;
  color: #1c1c1e !important;
  font-size: 13px !important;
}

.asset-search::placeholder { color: #aeaeb2 !important; }

.asset-item:hover { background: rgba(0,0,0,0.04) !important; }

.asset-item.selected {
  background: rgba(0,122,255,.08) !important;
  border: 1px solid rgba(0,122,255,.2) !important;
}

.asset-name { color: #1c1c1e !important; }
.asset-price .price { color: #1c1c1e !important; }
.asset-price .change.positive { color: #1a8a38 !important; }
.asset-price .change.negative { color: #d32f2f !important; }

.assets-list::-webkit-scrollbar-track { background: #f2f2f7 !important; }
.assets-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18) !important; }

/* ── Order Panel ──────────────────────────────────────────── */

.order-panel {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.order-header { color: #1c1c1e !important; font-size: 15px !important; font-weight: 600 !important; }

.order-form label { color: #6d6d72 !important; font-size: 12px !important; font-weight: 500 !important; }

.order-form .form-control {
  background: #f9f9fb !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 10px !important;
  color: #1c1c1e !important;
}

.order-form .form-control:focus {
  border-color: #007aff !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,.15) !important;
  outline: none !important;
}

.btn-buy {
  background: linear-gradient(135deg, #34c759, #2db34e) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(52,199,89,.3) !important;
}

.btn-buy:hover {
  background: linear-gradient(135deg, #2db34e, #25943f) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(52,199,89,.4) !important;
}

.btn-sell {
  background: linear-gradient(135deg, #ff3b30, #d42b22) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(255,59,48,.3) !important;
}

.btn-sell:hover {
  background: linear-gradient(135deg, #d42b22, #b02018) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255,59,48,.4) !important;
}

/* ── Positions Section ────────────────────────────────────── */

.positions-section {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.positions-header {
  background: #f9f9fb !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  color: #1c1c1e !important;
}

.positions-count {
  background: rgba(0,122,255,.1) !important;
  color: #007aff !important;
}

.positions-tbl th {
  color: #6d6d72 !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  background: #f9f9fb !important;
}

.positions-tbl td {
  color: #1c1c1e !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

.positions-tbl .pl.positive { color: #1a8a38 !important; }
.positions-tbl .pl.negative { color: #d32f2f !important; }

.no-positions { color: #aeaeb2 !important; }

.btn-close-trade {
  background: rgba(255,59,48,.08) !important;
  border: 1px solid rgba(255,59,48,.2) !important;
  color: #ff3b30 !important;
  border-radius: 8px !important;
}

.btn-close-trade:hover {
  background: #ff3b30 !important;
  color: #fff !important;
}

/* ── Category Filters ────────────────────────────────────── */

.category-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #6d6d72 !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
}

.category-btn:hover {
  background: rgba(0,0,0,0.04) !important;
  color: #1c1c1e !important;
  border-color: rgba(0,0,0,0.2) !important;
}

.category-btn.active {
  background: #007aff !important;
  border-color: #007aff !important;
  color: #ffffff !important;
}

.category-btn .count {
  background: rgba(0,0,0,0.1) !important;
  color: inherit !important;
}

.category-btn.active .count {
  background: rgba(255,255,255,0.25) !important;
}

/* ── Deposit Section ─────────────────────────────────────── */

.deposit-header h2 { color: #1c1c1e !important; }
.deposit-header p  { color: #6d6d72 !important; }

.deposit-form-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
}

.deposit-form-card h3 {
  color: #1c1c1e !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

.payment-method-card {
  background: #ffffff !important;
  border: 2px solid rgba(0,0,0,0.1) !important;
}

.payment-method-card:hover {
  background: #f9f9fb !important;
  border-color: rgba(0,122,255,.3) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.payment-method-card.selected {
  background: rgba(0,122,255,.06) !important;
  border-color: #007aff !important;
}

.payment-method-card .method-icon {
  background: #f2f2f7 !important;
  border-radius: 12px !important;
}

.payment-method-card .method-name { color: #1c1c1e !important; }
.payment-method-card .method-time { color: #6d6d72 !important; }

.payment-method-card .method-check {
  background: #f2f2f7 !important;
  color: transparent !important;
}

.payment-method-card.selected .method-check {
  background: #007aff !important;
  color: #fff !important;
}

.instructions-box {
  background: rgba(0,122,255,.06) !important;
  border: 1px solid rgba(0,122,255,.2) !important;
  color: #1c1c1e !important;
  border-radius: 12px !important;
}

.wallet-address-box {
  background: #f9f9fb !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  border-radius: 12px !important;
}

.wallet-address-box code { color: #007aff !important; }

.copy-btn {
  background: #007aff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.copy-btn:hover { background: #0070e8 !important; }

.copy-btn-sm {
  background: rgba(0,122,255,.1) !important;
  color: #007aff !important;
  border-radius: 6px !important;
}

.bank-details {
  background: #f9f9fb !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

.bank-detail-row { border-bottom: 1px solid rgba(0,0,0,0.06) !important; }
.bank-detail-row .label { color: #6d6d72 !important; }
.bank-detail-row .value { color: #1c1c1e !important; }

.bank-detail-row .value code {
  background: rgba(0,122,255,.1) !important;
  color: #007aff !important;
}

.bank-detail-row.reference {
  background: rgba(255,204,0,.08) !important;
}

.bank-detail-row.reference .value { color: #a87a00 !important; }

.amount-input {
  background: #ffffff !important;
  border: 2px solid rgba(0,0,0,0.12) !important;
  border-radius: 12px !important;
  color: #1c1c1e !important;
}

.amount-input:focus {
  border-color: #007aff !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,.15) !important;
  outline: none !important;
}

.currency-symbol { color: #007aff !important; }

.amount-limits { color: #aeaeb2 !important; }

.quick-amount-btn {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #1c1c1e !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

.quick-amount-btn:hover {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.2) !important;
}

.quick-amount-btn.active {
  background: rgba(0,122,255,.08) !important;
  border-color: #007aff !important;
  color: #007aff !important;
}

.btn-deposit {
  background: linear-gradient(135deg, #007aff, #0055e0) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(0,122,255,.3) !important;
}

.btn-deposit:hover:not(:disabled) {
  background: linear-gradient(135deg, #0070e8, #004ac0) !important;
  box-shadow: 0 6px 20px rgba(0,122,255,.4) !important;
}

.deposit-note { color: #aeaeb2 !important; }

.file-upload-area {
  border: 2px dashed rgba(0,0,0,0.15) !important;
  border-radius: 12px !important;
  background: #f9f9fb !important;
}

.upload-placeholder:hover { background: rgba(0,0,0,0.03) !important; }
.upload-placeholder span  { color: #6d6d72 !important; }

.upload-preview { background: rgba(52,199,89,.08) !important; }
.file-info .file-name { color: #1a8a38 !important; }

.supported-cards span {
  background: #f2f2f7 !important;
  color: #1c1c1e !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

.network-warning { color: #a87a00 !important; }

/* ── KYC Wizard ──────────────────────────────────────────── */

.kyc-wizard, [class*="kyc-"] {
  color: #1c1c1e !important;
}

/* ── Global dark text overrides ──────────────────────────── */

[style*="color: #fff"],
[style*="color:#fff"],
[style*="color: white"],
[style*="color:white"] {
  color: #1c1c1e !important;
}

/* Fix any remaining dark backgrounds in panels */
.trading-sidebar > *,
.chart-section *:not(.btn-buy):not(.btn-sell):not(.live-indicator):not(.live-indicator *) {
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}

/* ── TradingView Chart Responsive Fix ───────────────────── */

#chartContainer,
.chart-container {
  height: calc(100vh - 340px) !important;
  min-height: 420px !important;
  max-height: 680px !important;
  width: 100% !important;
  position: relative !important;
}

#chartContainer iframe,
.chart-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

/* Make chart section fill available height */
.chart-section {
  display: flex !important;
  flex-direction: column !important;
}

.chart-section .chart-container {
  flex: 1 !important;
}

/* Trading layout — balance columns */
.trading-layout {
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 16px !important;
  align-items: start !important;
}

/* Sidebar sticks while chart scrolls */
.trading-sidebar {
  position: sticky !important;
  top: 20px !important;
}

@media (max-width: 1024px) {
  .trading-layout {
    grid-template-columns: 1fr !important;
  }
  .trading-sidebar {
    position: static !important;
  }
  #chartContainer,
  .chart-container {
    height: 380px !important;
  }
}