/**
 * styles.css
 *
 * Main stylesheet for Hyperview charting application
 *
 * Extracted from index.html as part of modularization effort (Nov 30, 2025)
 */

:root { --bg:#0b1020; --fg:#e5e7eb; --muted:#94a3b8; --border:#1e293b; }
html, body { height:100%; margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif; display:flex; flex-direction:column; }
body { display:flex; flex-direction:row; }
#mainContent { flex:1; display:flex; flex-direction:column; min-width:0; }
header { padding:8px 16px; display:flex; flex-direction:column; gap:8px; border-bottom:1px solid var(--border); }
.header-top { display:flex; gap:12px; align-items:center; min-height:32px; flex-wrap:nowrap; }
.header-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
header h1 { font-size:16px; margin:0; color:var(--fg); flex-shrink:0; }
#status { flex-shrink:0; white-space:nowrap; }
.pill { padding:2px 8px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted); }
label { color:var(--muted); font-size:12px; display:block; margin-bottom:4px; }
select, input, button { background:#0a1222; color:var(--fg); border:1px solid #253249; border-radius:8px; padding:6px 8px; }
button { background:#0ea5e9; border:0; cursor:pointer; }
#chart { flex:1; position:relative; margin:12px; min-height:460px; }
#rightPanel { width: 360px; flex: 0 0 360px; border-left: 1px solid var(--border); background:rgba(10,18,34,0.95); padding:12px; display:flex; flex-direction:column; gap:12px; position:relative; z-index:200; overflow-y: auto; overflow-x: visible; }
.panel-title { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#94a3b8; margin-bottom:4px; }
.tog { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid #253249; border-radius:10px; background:#0b1224; }
.tog label { margin:0; font-size:13px; color:#e5e7eb; }
.tog input[type="checkbox"] { width:18px; height:18px; }
.panel-box { border:1px dashed #253249; border-radius:10px; padding:10px; min-height:140px; color:#94a3b8; font-size:12px; }

/* Strategy grid and items */
.strat-grid { display:flex; flex-direction:column; gap:4px; }
.strat-item { display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:6px; font-size:12px; cursor:pointer; transition:background 0.15s ease; }
.strat-item:hover { background:rgba(148,163,184,0.08); }
.strat-item input[type="checkbox"] { margin:0; }
.strat-item input[type="checkbox"]:checked + .strat-name { color:#22c55e; font-weight:600; }
.strat-item:has(input[type="checkbox"]:checked) { background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.3); }

/* Rank badges */
.rank-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}
.rank-regular { background: #3b82f6; color: white; } /* Blue for REGULAR */
.rank-stinkbid { background: #f59e0b; color: white; } /* Amber for STINK_BID */

/* Bucket section headers */
.bucket-header {
  font-weight: 600;
  margin: 12px 0 6px 0;
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bucket-header:first-child { margin-top: 8px; }
.bucket-count {
  background: rgba(148,163,184,0.2);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  color: #94a3b8;
}

/* Stats tabs */
.stats-tab:hover { background:#475569 !important; color:#e5e7eb !important; }
.stats-tab.active { background:rgba(34,197,94,0.15) !important; color:#22c55e !important; border-color:#22c55e !important; font-weight:600; }

.row { display:flex; gap:12px; align-items:center; }
.row > div { display:flex; flex-direction:column; }

/* Four permanent rows (gutters) */
.perm-row { position:absolute; left:0; right:0; height:16px; pointer-events:none; z-index:10; font-size:11px; line-height:16px; }
#perm-top-sweep { top: 26px; }
#perm-top-chop { top: 46px; }
#perm-bot-chop { bottom: 58px; }
#perm-bot-sweep { bottom: 38px; }
.perm-x { position:absolute; transform:translateX(-50%); opacity:0.95; }
.perm-x.red { color:#ef4444; }
.perm-x.orange { color:#f59e0b; }
.perm-x.green { color:#22c55e; }

/* Simulation bands (high z-index to ensure visibility) */
.sim-band{ position:absolute; left:0; right:0; height:14px; pointer-events:none; z-index:100; }
#sim-top { top: 6px; }
#sim-bot { bottom: 18px; }
.sim-seg{ position:absolute; top:0; bottom:0; border-radius:2px; opacity:.9; }
.sim-seg.dim{ background:#374151; }
.sim-seg.green{ background:#16a34a; }
.sim-seg.red{ background:#ef4444; }
.sim-seg.cond{ background:#f59e0b; }
.sim-seg.orange{ background:#f59e0b; }

/* Right-side fib labels (above chart canvas) */
.fib-labels { position:absolute; top:0; bottom:0; right:80px; pointer-events:none; z-index: 10; font-size:11px; }
.fib-label { position:absolute; right:0; transform:translateY(-50%); background:rgba(8,12,24,0.85); color:var(--fg); border:1px solid var(--border); border-radius:4px; padding:1px 6px; white-space:nowrap; display:flex; align-items:center; gap:4px; }
.fib-dot { width:7px; height:7px; border-radius:999px; display:inline-block; }

/* SIM markers (high z-index to ensure visibility) */
.sim-markers{ position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none; z-index:101; }
.sim-marker{ position:absolute; transform:translate(-50%,-50%); font:600 11px/1 system-ui; color:#e5e7eb; padding:1px 4px; border-radius:4px; background:rgba(0,0,0,.65); white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.sim-marker.long{ background:rgba(16,185,129,.85); }
.sim-marker.short{ background:rgba(239,68,68,.85); }
.sim-marker.tp{ background:rgba(16,185,129,.85); }
.sim-marker.sl{ background:rgba(239,68,68,.85); }
.sim-marker.tip-up::after, .sim-marker.tip-down::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; }
.sim-marker.tip-up::after{ bottom:-6px; border-top:6px solid rgba(0,0,0,.65); }
.sim-marker.tip-down::after{ top:-6px; border-bottom:6px solid rgba(0,0,0,.65); }

/* Asset picker */
.asset-picker { min-width: 180px; position: relative; }
.asset-btn { display:flex; align-items:right; gap:10px; width:100%; padding:10px 12px; border-radius:10px; background:#0a1222; border:1px solid #253249; font-size:15px; }
.asset-logo { width:22px; height:22px; border-radius:999px; display:inline-grid; place-items:center; background:#1f2937; font-weight:700; font-size:13px; }
.asset-menu { position:absolute; z-index:50; top:68px; left:0; width:700px; max-height:500px; background:#0a1222; border:1px solid #253249; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden; }
.asset-tabs { display:flex; gap:4px; padding:8px 8px 0; border-bottom:1px solid #1e293b; flex-shrink:0; background:#0a1222; border-radius:12px 12px 0 0; }
.asset-tab { flex:1; padding:8px 12px; border:none; background:transparent; color:#94a3b8; cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; font-weight:500; }
.asset-tab:hover { background:#0f1830; color:var(--fg); }
.asset-tab.active { color:var(--fg); border-bottom-color:#3b82f6; }
.asset-search { padding:8px; border-bottom:1px solid #1e293b; flex-shrink:0; background:#0a1222; }
.asset-search input { width:100%; padding:8px 10px; border-radius:8px; border:1px solid #253249; background:#0b1224; color:var(--fg); }
.asset-list-wrapper { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
.asset-list { /* No overflow, just content */ }
.asset-row { display:grid; grid-template-columns: 28px 1fr auto auto auto; gap:10px; align-items:center; padding:10px 12px; cursor:pointer; }
.asset-row:hover { background:#0f1830; }
.asset-sym { font-weight:600; }
.asset-sub { font-size:12px; color:#94a3b8; }
.badge { font-size:12px; padding:2px 6px; border-radius:6px; background:#0f2d28; color:#34d399; }

/* Interval picker (custom dropdown to match asset picker) */
.interval-picker { min-width: 120px; position: relative; }
.interval-btn { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 12px; border-radius:10px; background:#0a1222; border:1px solid #253249; font-size:15px; cursor:pointer; }
.interval-menu { position:absolute; z-index:50; top:68px; left:0; min-width:120px; background:#0a1222; border:1px solid #253249; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35); pointer-events:none; opacity:0; transform:scaleY(.96); transform-origin:top; transition:opacity .14s ease, transform .14s ease; }
.interval-picker.open .interval-menu { pointer-events:auto; opacity:1; transform:scaleY(1); }
.interval-picker.open .interval-btn svg { transform:rotate(180deg); }
.interval-option { padding:10px 12px; cursor:pointer; }
.interval-option:hover { background:#0f1830; }
.interval-option.selected { background:#0f2d28; color:#34d399; font-weight:600; }

/* --- Button + chevron micro-interaction --- */
.asset-btn { transition: box-shadow .15s ease, background .15s ease; }
.asset-btn:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
.asset-btn svg { transition: transform .18s ease; transform-origin: 50% 50%; }

/* rotate chevron when open */
.asset-picker.open .asset-btn svg { transform: rotate(180deg); }

/* --- Menu: fade + scale from top, with blur & shadow --- */
.asset-menu {
  pointer-events: none;
  opacity: 0;
  transform: scaleY(.96);
  transform-origin: top;
  transition: opacity .14s ease, transform .14s ease;
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  border: 1px solid rgba(148,163,184,.18); /* softer border */
  overflow: hidden; /* for rounded corners during scale */
}

/* visible state */
.asset-picker.open .asset-menu {
  pointer-events: auto;
  opacity: 1;
  transform: scaleY(1);
}

/* sticky search bar so it stays while scrolling */
.asset-search { position: sticky; top: 0; background: #0a1222; z-index: 1; }

/* list rows */
.asset-row {
  grid-template-columns: 28px 1fr auto auto auto;
  border-bottom: 1px solid rgba(148,163,184,.06);
  transition: background .12s ease, transform .06s ease;
}
.asset-row:hover { background: #0c162c; }
.asset-row:active { transform: translateY(1px); }

/* subtle selected highlight (optional) */
.asset-row.is-current { background: rgba(56,189,248,.08); }

/* nicer scrollbar (WebKit) */
.asset-list::-webkit-scrollbar { width: 10px; }
.asset-list::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.28);
  border-radius: 999px;
  border: 2px solid #0a1222;
}

/* optional: rotate chevron when open */
.asset-btn svg{ transition: transform .18s ease; }
.asset-btn[aria-expanded="true"] svg{ transform: rotate(180deg); }

/* Only the menu floats when open */
.asset-menu.floating{
  position: fixed;
  z-index: 1000;
  max-height: 420px;
  overflow: auto;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);

  /* ensure visible even without .asset-picker.open */
  opacity: 1;                 /* ← add */
  transform: scaleY(1);       /* ← add */
  pointer-events: auto;       /* ← add */
}

#rightPanel { display: flex; flex-direction: column; }
#rightPanel .strat-group {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}
#rightPanel .strat-group::-webkit-scrollbar { width: 8px; }
#rightPanel .strat-group::-webkit-scrollbar-thumb {
  border-radius: 8px; background: #d1d5db;
}
#rightPanel .strat-group::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Confirmations & Filters section - green styling like auto-select */
#rightPanel .conf-filter-group {
  background: rgba(34,197,94,0.05);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* TA Multi-Select Dropdown */
.ta-picker { position: relative; min-width: 180px; }
.ta-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 10px; border-radius: 8px;
  background: #0a1222; border: 1px solid #253249;
  font-size: 13px; color: var(--fg); cursor: pointer;
  transition: box-shadow .15s ease, background .15s ease;
}
.ta-btn:hover { background: #0f1830; }
.ta-btn svg { transition: transform .18s ease; margin-left: auto; }
.ta-picker.open .ta-btn svg { transform: rotate(180deg); }
.ta-btn .ta-count {
  background: #3b82f6; color: white; font-size: 10px;
  padding: 2px 6px; border-radius: 10px; font-weight: 600;
}
.ta-menu {
  position: absolute; z-index: 1000; top: 100%; left: 0;
  margin-top: 4px; background: #0a1222; border: 1px solid #253249;
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45);
  max-height: 600px; overflow-y: auto; display: none;
  min-width: 500px; width: 500px;
}
.ta-picker.open .ta-menu { display: block; }
.ta-menu::-webkit-scrollbar { width: 8px; }
.ta-menu::-webkit-scrollbar-thumb { background: rgba(148,163,184,.28); border-radius: 8px; }
.ta-group { padding: 8px 10px; }
.ta-group-header {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #64748b; margin-bottom: 6px; font-weight: 600;
}
.ta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.ta-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 4px; font-size: 11px;
  cursor: pointer; transition: background 0.12s ease;
}
.ta-item:hover { background: rgba(148,163,184,0.1); }
.ta-item input { margin: 0; width: 14px; height: 14px; }
.ta-item input:checked + span { color: #22c55e; font-weight: 600; }
.ta-divider { height: 1px; background: #1e293b; margin: 4px 0; }

/* Pulse animation for highlighting elements */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}