/* ═══════════════════════════════════════════════════
   Snap Day Trader v1.2.0 — Terminal Dark UI
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --sdt-bg:       #060c14;
  --sdt-panel:    #0b1520;
  --sdt-card:     #0f1b28;
  --sdt-card-hi:  #132233;
  --sdt-border:   #1a2d44;
  --sdt-green:    #00e676;
  --sdt-red:      #ff1744;
  --sdt-blue:     #2979ff;
  --sdt-gold:     #ffc400;
  --sdt-cyan:     #00e5ff;
  --sdt-muted:    #4a6080;
  --sdt-text:     #c8d8e8;
  --sdt-bright:   #eaf3ff;
  --sdt-mono:     'JetBrains Mono', 'Cascadia Code', monospace;
  --sdt-sans:     'Space Grotesk', system-ui, sans-serif;
  --sdt-radius:   10px;
  --sdt-glass:    rgba(15,27,40,.65);
  --sdt-shadow:   0 4px 24px rgba(0,0,0,.4);
}

#sdt-root * { box-sizing: border-box; margin: 0; padding: 0; }
#sdt-root { background: var(--sdt-bg); color: var(--sdt-text); font-family: var(--sdt-sans); min-height: 100vh; }

/* ── Layout ───────────────────────────────────────── */
.sdt-wrap { display: grid; grid-template-rows: 56px 1fr; grid-template-columns: 230px 1fr; grid-template-areas: "topbar topbar" "sidebar main"; min-height: 100vh; }

/* ── Topbar ───────────────────────────────────────── */
.sdt-topbar { grid-area: topbar; background: var(--sdt-panel); border-bottom: 1px solid var(--sdt-border); display: flex; align-items: center; padding: 0 20px; gap: 14px; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); }
.sdt-logo { font-family: var(--sdt-mono); font-size: 13px; font-weight: 700; color: var(--sdt-cyan); letter-spacing: .1em; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sdt-logo-dot { width: 7px; height: 7px; background: var(--sdt-green); border-radius: 50%; animation: pulse 2s infinite; box-shadow: 0 0 6px var(--sdt-green); }
.sdt-ver { font-size: 9px; color: var(--sdt-muted); font-weight: 400; margin-left: 4px; }
@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 6px var(--sdt-green)}50%{opacity:.4;box-shadow:none} }

.sdt-topbar-mid { flex: 1; display: flex; align-items: center; gap: 10px; }
.sdt-search-wrap { position: relative; }
.sdt-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sdt-muted); font-size: 14px; pointer-events: none; }
.sdt-search { background: var(--sdt-card); border: 1px solid var(--sdt-border); border-radius: var(--sdt-radius); color: var(--sdt-bright); font-family: var(--sdt-mono); font-size: 12px; padding: 8px 12px 8px 30px; width: 220px; outline: none; transition: all .2s; }
.sdt-search:focus { border-color: var(--sdt-blue); box-shadow: 0 0 0 2px rgba(41,121,255,.15); }
.sdt-search::placeholder { color: var(--sdt-muted); }

.sdt-add-btn { background: var(--sdt-blue); border: none; border-radius: var(--sdt-radius); color: #fff !important; cursor: pointer; font-family: var(--sdt-sans); font-size: 12px; font-weight: 600; padding: 8px 16px; transition: all .2s; white-space: nowrap; }
.sdt-add-btn:hover { opacity: .85; box-shadow: 0 0 16px rgba(41,121,255,.3); transform: translateY(-1px); }

.sdt-clock { font-family: var(--sdt-mono); font-size: 12px; color: var(--sdt-muted); margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sdt-market-dot { font-size: 8px; }
.sdt-market-label { font-size: 9px; font-weight: 700; letter-spacing: .08em; opacity: .7; }

.sdt-api-badge { font-family: var(--sdt-mono); font-size: 9px; padding: 3px 8px; border-radius: 4px; background: rgba(255,196,0,.12); color: var(--sdt-gold); border: 1px solid rgba(255,196,0,.25); letter-spacing: .06em; font-weight: 600; }

/* ── Sidebar ──────────────────────────────────────── */
.sdt-sidebar { grid-area: sidebar; background: var(--sdt-panel); border-right: 1px solid var(--sdt-border); display: flex; flex-direction: column; padding: 14px 0; overflow-y: auto; }
.sdt-nav-label { font-family: var(--sdt-mono); font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--sdt-muted); padding: 0 18px 6px; text-transform: uppercase; }
.sdt-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--sdt-muted); border-left: 3px solid transparent; transition: all .15s; user-select: none; }
.sdt-nav-item:hover { color: var(--sdt-text); background: rgba(255,255,255,.03); }
.sdt-nav-item.active { color: var(--sdt-cyan) !important; border-left-color: var(--sdt-cyan); background: rgba(0,229,255,.06); }
.sdt-nav-icon { font-size: 15px; width: 20px; text-align: center; }
.sdt-nav-divider { height: 1px; background: var(--sdt-border); margin: 10px 18px; }

.sdt-sidebar-watch { flex: 1; overflow-y: auto; }
.sdt-sidebar-watch::-webkit-scrollbar { width: 3px; }
.sdt-sidebar-watch::-webkit-scrollbar-thumb { background: var(--sdt-border); border-radius: 3px; }
.sdt-sidebar-empty { padding: 16px; text-align: center; }
.sdt-seed-btn { background: linear-gradient(135deg,var(--sdt-blue),var(--sdt-cyan)); border: none; border-radius: var(--sdt-radius); color: #000 !important; cursor: pointer; font-family: var(--sdt-mono); font-size: 11px; font-weight: 700; padding: 10px 16px; transition: all .2s; width: 100%; }
.sdt-seed-btn:hover { opacity: .85; transform: translateY(-1px); }

.sdt-watch-item { display: flex; align-items: center; padding: 7px 18px; cursor: pointer; transition: all .15s; gap: 6px; border-left: 3px solid transparent; }
.sdt-watch-item:hover { background: rgba(255,255,255,.03); }
.sdt-watch-item.selected { background: rgba(41,121,255,.08); border-left-color: var(--sdt-blue); }
.sdt-watch-sym { font-family: var(--sdt-mono); font-size: 12px; font-weight: 700; color: var(--sdt-bright); flex: 1; }
.sdt-watch-price { font-family: var(--sdt-mono); font-size: 11px; color: var(--sdt-text); }
.sdt-watch-chg { font-family: var(--sdt-mono); font-size: 10px; font-weight: 600; min-width: 42px; text-align: right; }
.sdt-watch-chg.up { color: var(--sdt-green); }
.sdt-watch-chg.down { color: var(--sdt-red); }
.sdt-watch-del { background: none; border: none; color: var(--sdt-muted); cursor: pointer; font-size: 13px; padding: 2px 4px; opacity: 0; transition: all .15s; }
.sdt-watch-item:hover .sdt-watch-del { opacity: 1 !important; }
.sdt-watch-del:hover { color: var(--sdt-red) !important; }

/* ── Main ─────────────────────────────────────────── */
.sdt-main { grid-area: main; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }

/* ── Panels ───────────────────────────────────────── */
.sdt-panel-title { font-family: var(--sdt-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sdt-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.sdt-panel-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg,var(--sdt-border),transparent); }

/* ── Welcome card ─────────────────────────────────── */
.sdt-welcome { text-align: center; padding: 60px 40px; background: linear-gradient(135deg,rgba(41,121,255,.06),rgba(0,229,255,.04)); border: 1px solid var(--sdt-border); border-radius: var(--sdt-radius); }
.sdt-welcome-ico { font-size: 48px; margin-bottom: 16px; filter: drop-shadow(0 0 12px rgba(0,229,255,.3)); }
.sdt-welcome h2 { font-family: var(--sdt-sans); font-size: 22px; font-weight: 700; color: var(--sdt-bright); margin-bottom: 8px; }
.sdt-welcome p { color: var(--sdt-muted); font-size: 14px; max-width: 480px; margin: 0 auto; line-height: 1.6; }

/* ── Stat cards ───────────────────────────────────── */
.sdt-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sdt-stat-card { background: var(--sdt-card); border: 1px solid var(--sdt-border); border-radius: var(--sdt-radius); padding: 14px 16px; position: relative; overflow: hidden; transition: border-color .2s; }
.sdt-stat-card:hover { border-color: rgba(255,255,255,.08); }
.sdt-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--sdt-blue); }
.sdt-stat-card.green::before { background: var(--sdt-green); }
.sdt-stat-card.red::before { background: var(--sdt-red); }
.sdt-stat-card.gold::before { background: var(--sdt-gold); }
.sdt-stat-label { font-family: var(--sdt-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sdt-muted); margin-bottom: 4px; }
.sdt-stat-value { font-family: var(--sdt-mono); font-size: 20px; font-weight: 700; color: var(--sdt-bright); }
.sdt-stat-value.green { color: var(--sdt-green); }
.sdt-stat-value.red { color: var(--sdt-red); }
.sdt-stat-sub { font-family: var(--sdt-mono); font-size: 10px; color: var(--sdt-muted); margin-top: 2px; }

/* ── Chart ────────────────────────────────────────── */
.sdt-chart-card { background: var(--sdt-card); border: 1px solid var(--sdt-border); border-radius: var(--sdt-radius); padding: 18px; }
.sdt-chart-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.sdt-chart-sym { font-family: var(--sdt-mono); font-size: 24px; font-weight: 700; color: var(--sdt-bright); }
.sdt-chart-company { font-family: var(--sdt-mono); font-size: 11px; color: var(--sdt-muted); margin-top: 2px; }
.sdt-chart-price { font-family: var(--sdt-mono); font-size: 22px; font-weight: 700; color: var(--sdt-bright); }
.sdt-chart-change { font-family: var(--sdt-mono); font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 4px; margin-top: 4px; display: inline-block; }
.sdt-chart-change.up { background: rgba(0,230,118,.12); color: var(--sdt-green); }
.sdt-chart-change.down { background: rgba(255,23,68,.12); color: var(--sdt-red); }
.sdt-chart-meta { display: flex; gap: 18px; margin-left: auto; }
.sdt-cmeta { text-align: right; }
.sdt-cmeta-l { font-family: var(--sdt-mono); font-size: 9px; color: var(--sdt-muted); letter-spacing: .08em; }
.sdt-cmeta-v { font-family: var(--sdt-mono); font-size: 12px; color: var(--sdt-text); font-weight: 600; }
.sdt-chart-intervals { display: flex; gap: 4px; margin-bottom: 10px; }
.sdt-interval-btn { background: none; border: 1px solid var(--sdt-border); border-radius: 4px; color: var(--sdt-muted); cursor: pointer; font-family: var(--sdt-mono); font-size: 10px; font-weight: 600; padding: 4px 10px; transition: all .15s; }
.sdt-interval-btn:hover, .sdt-interval-btn.active { color: var(--sdt-cyan) !important; border-color: var(--sdt-cyan); background: rgba(0,229,255,.06); }
.sdt-chart-canvas-wrap { position: relative; height: 220px; }

/* ── Alerts ───────────────────────────────────────── */
.sdt-alert-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; background: var(--sdt-card); border: 1px solid var(--sdt-border); border-radius: var(--sdt-radius); padding: 14px 18px; }
.sdt-alert-form label { display: flex; flex-direction: column; gap: 3px; font-family: var(--sdt-mono); font-size: 9px; color: var(--sdt-muted); letter-spacing: .08em; text-transform: uppercase; }
.sdt-alert-form input { background: var(--sdt-bg); border: 1px solid var(--sdt-border); border-radius: 4px; color: var(--sdt-bright); font-family: var(--sdt-mono); font-size: 12px; padding: 7px 10px; width: 120px; outline: none; }
.sdt-alert-form input:focus { border-color: var(--sdt-blue); }
.sdt-alert-save { background: var(--sdt-green); border: none; border-radius: var(--sdt-radius); color: #000 !important; cursor: pointer; font-family: var(--sdt-sans); font-size: 11px; font-weight: 700; padding: 9px 16px; transition: opacity .2s; }
.sdt-alert-save:hover { opacity: .8; }

/* ── Trade Journal ────────────────────────────────── */
.sdt-trade-form-card { background: var(--sdt-card); border: 1px solid var(--sdt-border); border-radius: var(--sdt-radius); padding: 18px; }
.sdt-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sdt-form-field { display: flex; flex-direction: column; gap: 4px; }
.sdt-form-field label { font-family: var(--sdt-mono); font-size: 9px; color: var(--sdt-muted); letter-spacing: .08em; text-transform: uppercase; }
.sdt-form-field input, .sdt-form-field select { background: var(--sdt-bg); border: 1px solid var(--sdt-border); border-radius: 4px; color: var(--sdt-bright); font-family: var(--sdt-mono); font-size: 12px; padding: 7px 10px; outline: none; transition: border-color .2s; }
.sdt-form-field input:focus, .sdt-form-field select:focus { border-color: var(--sdt-blue); }
.sdt-form-field select option { background: var(--sdt-card); }
.sdt-form-field.wide { grid-column: span 2; }
.sdt-trade-type-buy { border-left: 3px solid var(--sdt-green) !important; }
.sdt-trade-type-sell { border-left: 3px solid var(--sdt-red) !important; }
.sdt-submit-trade { background: var(--sdt-blue); border: none; border-radius: var(--sdt-radius); color: #fff !important; cursor: pointer; font-family: var(--sdt-sans); font-size: 12px; font-weight: 700; padding: 9px 22px; transition: all .2s; }
.sdt-submit-trade:hover { opacity: .85; box-shadow: 0 0 16px rgba(41,121,255,.3); }

/* ── Tables ───────────────────────────────────────── */
.sdt-table-wrap { background: var(--sdt-card); border: 1px solid var(--sdt-border); border-radius: var(--sdt-radius); overflow: hidden; overflow-x: auto; }
.sdt-table { width: 100%; border-collapse: collapse; font-family: var(--sdt-mono); font-size: 11px; }
.sdt-table th { background: var(--sdt-panel); color: var(--sdt-muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; padding: 8px 12px; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--sdt-border); white-space: nowrap; }
.sdt-table td { color: var(--sdt-text); padding: 8px 12px; border-bottom: 1px solid rgba(30,48,72,.4); white-space: nowrap; }
.sdt-table tr:last-child td { border-bottom: none; }
.sdt-table tr:hover td { background: rgba(255,255,255,.015); }
.sdt-td-sym { font-weight: 700 !important; color: var(--sdt-bright) !important; }
.sdt-td-notes { max-width: 140px; overflow: hidden; text-overflow: ellipsis; color: var(--sdt-muted) !important; font-size: 10px !important; }
.sdt-badge { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; letter-spacing: .05em; }
.sdt-badge-buy { background: rgba(0,230,118,.12); color: var(--sdt-green); }
.sdt-badge-sell { background: rgba(255,23,68,.12); color: var(--sdt-red); }
.sdt-del-trade { background: none; border: none; color: var(--sdt-muted); cursor: pointer; font-size: 13px; padding: 2px 5px; transition: color .15s; }
.sdt-del-trade:hover { color: var(--sdt-red) !important; }

/* ── P&L ──────────────────────────────────────────── */
.sdt-pnl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.sdt-pnl-card { background: var(--sdt-card); border: 1px solid var(--sdt-border); border-radius: var(--sdt-radius); padding: 14px 16px; }
.sdt-pnl-label { font-family: var(--sdt-mono); font-size: 9px; color: var(--sdt-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.sdt-pnl-value { font-family: var(--sdt-mono); font-size: 18px; font-weight: 700; }

/* ── Toast ─────────────────────────────────────────── */
.sdt-toast-wrap { position: fixed; top: 64px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.sdt-toast { background: var(--sdt-card-hi); border: 1px solid var(--sdt-border); border-radius: var(--sdt-radius); color: var(--sdt-text); font-family: var(--sdt-mono); font-size: 11px; padding: 10px 14px; min-width: 260px; box-shadow: var(--sdt-shadow); animation: slideIn .3s ease; pointer-events: all; border-left: 3px solid var(--sdt-blue); backdrop-filter: blur(10px); transition: opacity .3s, transform .3s; }
.sdt-toast.success { border-left-color: var(--sdt-green); }
.sdt-toast.error { border-left-color: var(--sdt-red); }
.sdt-toast.alert { border-left-color: var(--sdt-gold); }
.sdt-toast-out { opacity: 0; transform: translateX(30px); }
@keyframes slideIn { from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1} }

/* ── Demo banner ──────────────────────────────────── */
.sdt-demo-banner { background: linear-gradient(90deg,rgba(255,196,0,.08),rgba(255,196,0,.03)); border: 1px solid rgba(255,196,0,.2); border-radius: var(--sdt-radius); color: var(--sdt-gold); font-family: var(--sdt-mono); font-size: 11px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.sdt-demo-banner strong { color: var(--sdt-bright); }
.sdt-demo-dot { display: inline-block; width: 6px; height: 6px; background: var(--sdt-gold); border-radius: 50%; animation: pulse 2s infinite; flex-shrink: 0; }

/* ── Empty / Loading ──────────────────────────────── */
.sdt-empty { text-align: center; padding: 36px; color: var(--sdt-muted); font-family: var(--sdt-mono); font-size: 12px; }
.sdt-empty-icon { font-size: 36px; display: block; margin-bottom: 10px; opacity: .35; }
.sdt-loading { display: flex; align-items: center; gap: 8px; color: var(--sdt-muted); font-family: var(--sdt-mono); font-size: 11px; padding: 18px; }
.sdt-spinner { width: 14px; height: 14px; border: 2px solid var(--sdt-border); border-top-color: var(--sdt-cyan); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Filter input (shared) ────────────────────────── */
.sdt-filter-input { background: var(--sdt-card); border: 1px solid var(--sdt-border); border-radius: 4px; color: var(--sdt-bright); font-family: var(--sdt-mono); font-size: 11px; padding: 6px 10px; outline: none; text-transform: uppercase; }
.sdt-filter-input:focus { border-color: var(--sdt-blue); }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .sdt-wrap { grid-template-areas: "topbar" "main"; grid-template-columns: 1fr; }
  .sdt-sidebar { display: none; }
  .sdt-stats-row { grid-template-columns: repeat(2, 1fr); }
  .sdt-pnl-cards { grid-template-columns: 1fr; }
  .sdt-chart-header { flex-direction: column; }
  .sdt-chart-meta { margin-left: 0; }
}
@media (max-width: 600px) {
  .sdt-stats-row { grid-template-columns: 1fr; }
  .sdt-topbar { padding: 0 12px; gap: 8px; }
  .sdt-search { width: 140px; font-size: 11px; }
  .sdt-main { padding: 12px; }
}