/* =========================================================
   TradeApes Brand Styles (single source of truth)
   ========================================================= */

/* Tokens */
:root{
  --bg-900:#0B0F24; --bg-800:#0F1535; --bg-700:#111A40;
  --surface-800:#151C45; --surface-700:#1B2357; --surface-glow:rgba(124,58,237,.25);

  --text-100:#E7E9F4; --text-200:#C6CBE3; --text-300:#9AA3C7; --text-muted:#7380AD;

  --primary:#7C3AED; --primary-hi:#A855F7;
  --magenta:#FF3D9A; --cyan:#22D3EE; --green:#22E58C; --red:#F43F5E; --amber:#F59E0B;

  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --space-xs:4px; --space-sm:8px; --space-md:12px; --space-lg:16px; --space-xl:24px; --space-xxl:32px;

  --shadow-soft:0 8px 24px rgba(0,0,0,.35);
  --glow-primary:0 0 0 2px rgba(124,58,237,.35), 0 16px 40px rgba(124,58,237,.25);
  --glow-cyan:0 0 0 2px rgba(34,211,238,.35), 0 16px 40px rgba(34,211,238,.25);

  --font-sans:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New";

  /* Chart palette */
  --series-1:#22D3EE; --series-2:#FF4DB8; --series-3:#8B5CF6; --series-4:#22E58C; --series-5:#F59E0B;
}

/* Base */
html,body{height:100%}
body{
  background:var(--bg-900);
  color:var(--text-100);
  font-family:var(--font-sans);
  margin:0;
}
a{color:var(--cyan); text-decoration:none}
a:hover{opacity:.9; text-decoration:none}

/* Layout */
.container{ max-width:1100px; margin:0 auto; padding:24px; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 0; }
.brand{ font-weight:400; letter-spacing:.2px; font-size:18px; display:flex; align-items:center; }
.footer{ margin-top:40px; padding:16px 0; color:var(--text-muted); font-size:13px; border-top:1px solid rgba(255,255,255,.08); }

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)), var(--surface-800);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  backdrop-filter: blur(6px);
  padding:22px;
}
.card--glow{ box-shadow: var(--glow-primary); }

.mktg-box,
.card .mktg-box {
  background: rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-lg) !important;
  display: block !important;
  color: var(--text-100) !important;
  line-height: 1.6 !important;
  font-size: 15px !important;
  backdrop-filter: blur(2px);
}
.mktg-box * { color: var(--text-100) !important; margin: 0; }
@media (max-width: 640px){
  .mktg-box { padding: var(--space-md) !important; font-size: 14.5px !important; }
}

/* Headings & text */
.headline { color: var(--text-100) !important; }
h1, h2, h3 { color: var(--text-100); }

/* Headings & text */
.h1{font-size:34px;font-weight:800;letter-spacing:.2px}
.h2{font-size:24px;font-weight:700}
.h3{font-size:18px;font-weight:700;color:var(--text-200)}
.muted{color:var(--text-muted)}

/* Hero */
.hero{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:32px; align-items:center; padding:40px 0 24px; }
@media (max-width: 900px){ .hero{ grid-template-columns: 1fr; } }

/* Pills & badges */
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  background: rgba(255,255,255,.06); color: var(--text-100); border:1px solid rgba(255,255,255,.08);
}
.badge{ padding:6px 10px;border-radius:999px;font-weight:600;font-size:12px }
.badge--up{ background: rgba(34,229,140,.15); color:#22E58C }
.badge--down{ background: rgba(244,63,94,.15); color:#F43F5E }
.badge--muted{ background: rgba(255,255,255,.07); color:var(--text-300) }

/* Buttons */
.btn{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px; border:1px solid transparent;
  font-weight:600; transition:.2s; cursor:pointer; text-decoration:none;
  color: var(--text-100);
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{
  background: linear-gradient(135deg, var(--primary), var(--primary-hi));
  color:white; box-shadow: var(--glow-primary);
}
.btn-primary:hover{ transform:translateY(-1px) }
.btn-outline{
  background: transparent; color: var(--primary-hi); border:1px solid var(--primary);
}
.btn-outline:hover{
  background: rgba(124,58,237,.12); color:#fff; border-color: var(--primary-hi);
}
.btn-link{
  background: transparent; color: var(--primary-hi); border: 0; padding: 8px 2px;
}
.btn-link:hover{ color: var(--primary); opacity: .95; }
.btn-secondary{ background: rgba(255,255,255,.06); color:var(--text-100); border-color: rgba(255,255,255,.08); }
.btn-success{ background: linear-gradient(135deg, #1ad67d, #10b981); color:black }
.btn-danger{  background: linear-gradient(135deg, #ff5a87, #F43F5E); color:white }
.btn-sm { padding:8px 12px; border-radius:12px; font-size: 0.95rem; }

/* Forms */
.form{ display:flex; flex-direction:column; gap:12px; }
.field label, .form-label{ display:block; font-weight:600; margin-bottom:6px; color: var(--text-300); }
.input, .select,
.form-control, .form-select,
input[type="text"], input[type="number"], input[type="date"], select, textarea{
  width:100%; padding:12px 14px; color:var(--text-100);
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:12px; outline:none;
}
.input::placeholder, .form-control::placeholder{ color: rgba(231,233,244,.55); }
.input:focus, .select:focus,
.form-control:focus, .form-select:focus,
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus{
  box-shadow: var(--glow-primary); border-color: transparent;
}
.form-text{ color:var(--text-muted); font-size:.93rem; margin-top:6px; }

/* Flash */
.flash-wrap{ margin:8px 0 16px; display:grid; gap:8px; }
.flash{
  border-radius:12px; padding:10px 12px; font-weight:600;
  border:1px solid rgba(255,255,255,.14);
}
.flash.notice,.flash.success{ background: rgba(16,185,129,.12); color:#b7f7dd; border-color: rgba(16,185,129,.25); }
.flash.alert,.flash.error{ background: rgba(244,63,94,.12); color:#fecaca; border-color: rgba(244,63,94,.25); }

/* HR & tables */
hr{ height:1px; border:0; background: rgba(255,255,255,.08); }
.table{ width:100%; border-collapse:separate; border-spacing:0; background:transparent; color:#fff; }
.table th, .table td{ border-bottom:1px solid rgba(255,255,255,.08); }
.table th{ text-align:left; font-weight:600; color:#9CA3AF; background:transparent; }
.table td{ background:transparent; }

/* Rows */
.row{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)
}

/* Portfolio helpers */
.value-up{ color:#10b981; }
.value-down{ color:#ef4444; }

/* Toggle/roll rows */
.ticker-toggle{ display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none; }
.ticker-toggle .chev{ transition: transform .15s ease; display:inline-block; }
.lots-row{ background:transparent; }
.rule-top{ border-top:1px solid rgba(255,255,255,.08); }

/* Charts */
.chartjs-tooltip{
  background:var(--surface-700); color:var(--text-100);
  border:1px solid rgba(255,255,255,.08); padding:8px 10px;border-radius:10px;
}

/* =========================================================
   Portfolio components (mini-cards + table helpers)
   ========================================================= */

.portfolio-dark { color: var(--text-100); }

/* Force white headings */
.portfolio-table thead th{
  color: var(--text-100);
  border-bottom: 1px solid rgba(255,255,255,.22) !important;
}

/* Main body borders */
.portfolio-table tbody td{
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

/* Explicit white text helper for main-row cells */
.ta-text{ color: var(--text-100) !important; }

/* Brand-tokened gain/neutral helpers (used on live values) */
.ta-pos  { color: var(--green) !important; }  /* up */
.ta-neg  { color: var(--red)   !important; }  /* down */
.ta-zero { color: var(--text-300) !important; }

/* IMPORTANT: don’t force ALL descendants of .ta-text to white.
   Narrow the scope so dynamic cells (price/day/P&L) can show green/red. */
.portfolio-table tbody td.ta-text{ color: var(--text-100) !important; }
/* Keep default white for most descendants EXCEPT the dynamic value classes below */
.portfolio-table tbody td.ta-text :not(.ta-pos):not(.ta-neg):not(.ta-zero):not(.js-day-gain):not(.js-price):not(.js-pnl):not(.js-pnl-pct):not(.js-price-delta):not(.js-price-delta-pct){
  color: var(--text-100) !important;
}

/* Hard overrides for key dynamic cells so they always show direction colors */
.portfolio-table td .js-day-gain.ta-pos,
.portfolio-table td .js-price.ta-pos,
.portfolio-table td .js-pnl.ta-pos,
.portfolio-table td .js-pnl-pct.ta-pos { color: var(--green) !important; }

.portfolio-table td .js-day-gain.ta-neg,
.portfolio-table td .js-price.ta-neg,
.portfolio-table td .js-pnl.ta-neg,
.portfolio-table td .js-pnl-pct.ta-neg { color: var(--red) !important; }

.portfolio-table td .js-day-gain.ta-zero,
.portfolio-table td .js-price.ta-zero,
.portfolio-table td .js-pnl.ta-zero,
.portfolio-table td .js-pnl-pct.ta-zero { color: var(--text-300) !important; }

/* Row hovers + summary */
.hoverable:hover{ background: rgba(255,255,255,.06); }
.summary-row{ background: rgba(0,0,0,.35); }

/* Mini cards */
.mini-card{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background: rgba(255,255,255,.05);
  color: var(--text-100);
}
.mini-card .muted{
  font-size:12px;
  text-transform:uppercase;
  color: var(--text-300);
}
.mini-card .mini-value{ font-weight:700; }

/* CTA to lots */
.lots-link{
  padding:6px 10px;
  font-size:13px;
  border:1px solid rgba(255,255,255,.45);
  color: var(--text-100);
  border-radius:12px;
}
.lots-link:hover{
  border-color:#ffffff;
  color:#ffffff;
  background: rgba(255,255,255,.10);
}

/* Reusable white headline utility */
.ta-headline { 
  color: var(--text-100) !important; 
  font-weight: 800; 
  letter-spacing: .2px; 
}

/* ——— Compact / softer text utilities ——— */
.ta-90     { font-size: 0.9em !important; }
.ta-soft   { font-weight: 500 !important; }
.ta-normal { font-weight: 400 !important; }

/* Table variants */
.table--compact th,
.table--compact td { font-size: 0.9em; }

.table--soft th { font-weight: 500; }
.table--soft td { font-weight: 400; }