/* ============================================================
   app.css — QuantumYield Global Styles
   Variables, reset, typography, shared components
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');
@import url('polish.css');

/* ── CSS Custom Properties ─────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:        #080c18;
  --bg2:       #0d1226;
  --sidebar:   #0b0f1e;
  --card:      #111827;
  --card2:     #151e2e;
  --border:    rgba(255,255,255,0.07);
  --gold:      #f0b429;
  --gold2:     #ffd166;
  --teal:      #00d4b4;
  --teal2:     #00f5d4;
  --red:       #ff5e6c;
  --green:     #22c55e;
  --purple:    #a78bfa;
  --blue:      #60a5fa;
  --text:      #e8eaf6;
  --text2:     #8b93a8;
  --text3:     #4a5568;
  --nav-bg:    rgba(8,12,24,0.85);
  --glow-gold: 0 0 30px rgba(240,180,41,0.2);
  --glow-teal: 0 0 30px rgba(0,212,180,0.2);
  --shadow:    rgba(0,0,0,0.4);
}

:root[data-theme="light"] {
  --bg:        #eef2ff;
  --bg2:       #e2e8f8;
  --sidebar:   #ffffff;
  --card:      #ffffff;
  --card2:     #f8faff;
  --border:    rgba(0,0,0,0.08);
  --gold:      #d4920c;
  --gold2:     #f0b429;
  --teal:      #009e87;
  --teal2:     #00c4a7;
  --red:       #e03e4e;
  --green:     #16a34a;
  --purple:    #7c3aed;
  --blue:      #2563eb;
  --text:      #111827;
  --text2:     #4b5563;
  --text3:     #9ca3af;
  --nav-bg:    rgba(240,244,255,0.9);
  --glow-gold: 0 4px 20px rgba(212,146,12,0.12);
  --glow-teal: 0 4px 20px rgba(0,158,135,0.12);
  --shadow:    rgba(0,0,0,0.1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background 0.4s, color 0.4s;
}

/* ── Shared Alert / Flash ──────────────────────────────────── */
.alert {
  padding: .75rem 1rem;
  border-radius: 9px;
  font-size: .85rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.alert-success { background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.25);  color: var(--green); }
.alert-danger   { background: rgba(255,94,108,.1); border-color: rgba(255,94,108,.25); color: var(--red);   }
.alert-warning  { background: rgba(240,180,41,.1); border-color: rgba(240,180,41,.25); color: var(--gold);  }
.alert-info     { background: rgba(96,165,250,.1); border-color: rgba(96,165,250,.25); color: var(--blue);  }

/* ── Badge ─────────────────────────────────────────────────── */
.badge { font-size: .67rem; font-weight: 700; padding: .18rem .5rem; border-radius: 5px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.badge-success { background: rgba(34,197,94,.1);   color: var(--green);  }
.badge-danger   { background: rgba(255,94,108,.1);  color: var(--red);    }
.badge-warning  { background: rgba(240,180,41,.12); color: var(--gold);   }
.badge-info     { background: rgba(96,165,250,.1);  color: var(--blue);   }
.badge-muted    { background: var(--bg2);           color: var(--text3);  }

/* ── Shared Buttons ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.3rem; border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600; font-size: .875rem;
  cursor: pointer; transition: all .2s;
  text-decoration: none; border: none; white-space: nowrap;
}
.btn-gold   { background: var(--gold);  color: #0a0a0a; box-shadow: var(--glow-gold); }
.btn-gold:hover { background: var(--gold2); transform: translateY(-1px); }
.btn-teal   { background: var(--teal);  color: #0a0a0a; box-shadow: var(--glow-teal); }
.btn-teal:hover { background: var(--teal2); transform: translateY(-1px); }
.btn-ghost  { background: transparent; color: var(--text2); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm     { padding: .35rem .85rem; font-size: .8rem; }
.btn-red    { background: rgba(255,94,108,.1); color: var(--red); border: 1px solid rgba(255,94,108,.2); }

/* ── Theme Toggle ──────────────────────────────────────────── */
.theme-toggle {
  width: 44px; height: 24px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  cursor: pointer; position: relative; transition: background .3s; flex-shrink: 0;
}
.theme-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); transition: transform .3s;
}
[data-theme="light"] .theme-toggle::after { transform: translateX(20px); }

/* ── Table Utilities ───────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tx-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.tx-table th {
  font-size: .67rem; font-weight: 600; text-transform: uppercase; letter-spacing: .8px;
  color: var(--text3); padding: .6rem .85rem; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tx-table td { padding: .75rem .85rem; font-size: .82rem; border-bottom: 1px solid var(--border); }
.tx-table tr:last-child td { border-bottom: none; }
.tx-table tr:hover td { background: rgba(255,255,255,.02); }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .85rem; }
.pagination-info { font-size: .75rem; color: var(--text3); }
.pagination-btns { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ── Form Shared ────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .78rem; color: var(--text2); margin-bottom: .35rem; font-weight: 500; }
.form-control {
  width: 100%; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: .6rem .9rem; font-size: .875rem;
  color: var(--text); outline: none; font-family: 'DM Sans', sans-serif;
  transition: border-color .2s;
}
.form-control:focus { border-color: var(--gold); }
.form-control::placeholder { color: var(--text3); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 100px; }
.form-hint { font-size: .72rem; color: var(--text3); margin-top: .3rem; }
.form-error { font-size: .72rem; color: var(--red); margin-top: .3rem; }

/* ── Utility ─────────────────────────────────────────────────── */
.text-gold   { color: var(--gold);   }
.text-teal   { color: var(--teal);   }
.text-red    { color: var(--red);    }
.text-green  { color: var(--green);  }
.text-muted  { color: var(--text3);  }
.text-sm     { font-size: .8rem;     }
.text-xs     { font-size: .72rem;    }
.font-syne   { font-family: 'Syne', sans-serif; }
.fw-700      { font-weight: 700; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }

/* ── Noise overlay ───────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: .5;
}

/* ── Responsive Layout Utilities ────────────────────────────── */
/* Two-column content + fixed aside — deposit.php & withdraw.php */
.layout-aside    { display:grid; grid-template-columns:1fr 360px; gap:1.25rem; align-items:start; }
.layout-aside-sm { display:grid; grid-template-columns:1fr 340px; gap:1.25rem; align-items:start; }

/* Three-column stat row — referral.php */
.grid-3-col { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.25rem; }

/* Two-column form+info split — profile.php KYC section */
.grid-2-col-form { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; }

/* Two-column mini stat boxes — investments.php plan items */
.inv-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; text-align:center; flex-shrink:0; }

@media(max-width:900px) {
  .layout-aside,
  .layout-aside-sm { grid-template-columns:1fr; }
}

@media(max-width:640px) {
  .grid-3-col      { grid-template-columns:repeat(2,1fr); gap:.65rem; }
  .grid-2-col-form { grid-template-columns:1fr; }
  .inv-stat-grid   { flex-shrink:1; width:100%; }
}

@media(max-width:420px) {
  .grid-3-col { grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════
   TRADINGVIEW WIDGET BLENDING
   Ensures all TV widgets feel native to the app's design system
   ══════════════════════════════════════════════════════════════ */

/* Suppress the TradingView copyright footer on all widgets */
.tv-widget-wrap .tradingview-widget-copyright,
.tradingview-widget-copyright {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Base widget wrapper */
.tv-widget-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: transparent;
}

.tv-widget-wrap iframe {
  display: block;
  border: none !important;
  background: transparent;
}

/* ── Public pages: full-width ticker tape below nav ── */
.tv-public-ticker {
  height: 46px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg3, var(--bg2));
  position: relative;
  z-index: 101;
}
.tv-public-ticker .tv-widget-wrap {
  height: 46px;
}

/* ── Dashboard: compact ticker below welcome banner ── */
.tv-dash-ticker {
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  margin-bottom: 1.25rem;
}
.tv-dash-ticker .tv-widget-wrap {
  height: 46px;
}

/* ── Public pages: widget inside a card-style container ── */
.tv-public-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
}

/* Fix mobile nav top offset when ticker is hidden at <=700px */
@media(max-width: 700px) {
  .tv-public-ticker { display: none; }
}

/* Ensure widgets don't overflow on mobile */
@media(max-width: 640px) {
  .tv-public-card { border-radius: 12px; }
  .tv-dash-ticker { margin-bottom: 1rem; }
}