/* OneFlow Market Terminal – style.css */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#000000;--amber:#FFA028;--white:#FFFFFF;--green:#00CC00;--red:#FF433D;
--blue:#0068FF;--cyan:#4AF6C3;--gray:#808080;--border:#2a2a2a;
--panel-hdr:#2D0000;--row-hover:#0f0800;--row-alt:#050300;
--font:'IBM Plex Mono',monospace;
}
html,body{height:100%;background:var(--bg);color:var(--amber);font-family:var(--font);font-size:12px;overflow-x:hidden}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* TOPBAR */
#topbar{display:flex;align-items:center;justify-content:space-between;height:36px;background:#0a0a0a;border-bottom:1px solid var(--border);padding:0 12px}
#topbar-left{display:flex;align-items:center;gap:8px}
.logo{color:var(--amber);font-weight:700;font-size:14px;letter-spacing:2px}
.logo-sub{color:var(--gray);font-size:10px;letter-spacing:1px}
#market-status{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--gray);margin-left:12px}
#market-dot{width:7px;height:7px;display:inline-block}
#topbar-center{flex:1;max-width:500px;margin:0 20px}
#command-input{width:100%;background:#111;border:1px solid var(--border);color:var(--amber);font-family:var(--font);font-size:12px;padding:4px 10px;outline:none}
#command-input:focus{border-color:var(--amber)}
#command-input::placeholder{color:var(--gray)}
#topbar-right{display:flex;gap:14px;font-size:11px;color:var(--gray)}
#refresh-countdown{color:var(--cyan);min-width:30px;text-align:right}

/* NAVBAR */
#navbar{display:flex;border-bottom:2px solid #600000;background:#050000}
.nav-btn{background:none;border:none;border-right:1px solid #1a0000;color:var(--gray);font-family:var(--font);font-size:11px;padding:5px 14px;cursor:pointer;transition:background .12s}
.nav-btn:hover{background:#1a0000;color:var(--amber)}
.nav-btn.active{background:var(--panel-hdr);color:var(--amber);border-bottom:2px solid var(--amber)}
.nav-key{color:var(--blue);font-size:10px;margin-right:4px}

/* LOADING */
#loading{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--amber)}
#loading.show{display:flex}
.loader{width:30px;height:30px;border:2px solid var(--border);border-top-color:var(--amber);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* VIEWS */
.view{display:none;padding:8px}
.view.active{display:block}

/* PANELS */
.panel{border:1px solid #2a0000;margin-bottom:6px;background:#000}
.panel-header{background:var(--panel-hdr);padding:4px 10px;font-size:10px;font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:1.2px;border-bottom:1px solid #600000}
.panel-body{padding:0}

/* TABLES */
.bt-table{width:100%;border-collapse:collapse}
.bt-table th{background:#1a0000;color:var(--gray);font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;text-align:left;border-bottom:1px solid #400000;font-weight:600;position:sticky;top:0}
.bt-table td{padding:3px 8px;font-size:11px;border-bottom:1px solid #0d0000}
.bt-table tr:nth-child(even) td{background:var(--row-alt)}
.bt-table tr:hover td{background:var(--row-hover)}
.bt-table .num{text-align:right;font-variant-numeric:tabular-nums}
.pos{color:var(--green)}
.neg{color:var(--red)}
.neutral{color:var(--gray)}

/* GRID LAYOUTS */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grid-1-2{display:grid;grid-template-columns:1fr 2fr;gap:8px}
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:8px}

/* STOCK DETAIL */
.stock-header{display:flex;align-items:baseline;gap:16px;padding:10px;border-bottom:1px solid var(--border)}
.stock-ticker{font-size:24px;font-weight:700;color:var(--white)}
.stock-name{font-size:13px;color:var(--gray)}
.stock-exchange{font-size:10px;color:var(--blue)}
.stock-price{font-size:28px;font-weight:700;color:var(--amber)}
.stock-change{font-size:14px;margin-left:8px}

/* CHART AREA */
.chart-container{position:relative;width:100%;height:350px;background:#000}
.chart-controls{display:flex;gap:4px;padding:6px 10px;background:#050505;border-bottom:1px solid var(--border)}
.chart-btn{background:none;border:1px solid var(--border);color:var(--gray);font-family:var(--font);font-size:10px;padding:3px 10px;cursor:pointer}
.chart-btn:hover,.chart-btn.active{background:var(--amber);color:#000;border-color:var(--amber)}

/* METRICS */
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.metric-row{display:flex;justify-content:space-between;padding:4px 10px;border-bottom:1px solid #111}
.metric-row:nth-child(even){background:var(--row-alt)}
.metric-label{color:var(--gray);font-size:10px;text-transform:uppercase}
.metric-value{color:var(--amber);font-size:11px}

/* FINANCIALS */
.fin-section{margin-bottom:8px}
.fin-title{background:var(--panel-hdr);padding:4px 10px;font-size:10px;color:var(--cyan);text-transform:uppercase;border-bottom:1px solid var(--border)}
.fin-row{display:flex;justify-content:space-between;padding:3px 10px;font-size:11px;border-bottom:1px solid #0a0a0a}
.fin-row:nth-child(even){background:var(--row-alt)}
.fin-label{color:var(--gray)}
.fin-value{color:var(--amber)}

/* SEARCH */
.search-bar{display:flex;gap:6px;padding:8px;background:#050505;border-bottom:1px solid var(--border)}
.search-bar input{flex:1;background:#111;border:1px solid var(--border);color:var(--amber);font-family:var(--font);font-size:12px;padding:6px 10px;outline:none}
.search-bar input:focus{border-color:var(--amber)}
.search-bar button,.wl-add button{background:var(--amber);color:#000;border:none;font-family:var(--font);font-size:11px;font-weight:600;padding:6px 16px;cursor:pointer}
.search-bar button:hover,.wl-add button:hover{background:#e68a00}

/* WATCHLIST ADD */
.wl-add{display:flex;gap:6px;padding:8px;background:#050505;border-bottom:1px solid var(--border)}
.wl-add input{width:200px;background:#111;border:1px solid var(--border);color:var(--amber);font-family:var(--font);font-size:12px;padding:6px 10px;outline:none}
.wl-add input:focus{border-color:var(--amber)}
.wl-remove{background:none;border:1px solid var(--red);color:var(--red);font-family:var(--font);font-size:10px;padding:2px 8px;cursor:pointer}
.wl-remove:hover{background:var(--red);color:#000}

/* NEWS */
.news-item{padding:8px 10px;border-bottom:1px solid #111}
.news-item:nth-child(even){background:var(--row-alt)}
.news-item:hover{background:var(--row-hover)}
.news-meta{display:flex;gap:10px;margin-bottom:3px}
.news-source{color:var(--cyan);font-size:10px;font-weight:600;text-transform:uppercase}
.news-time{color:var(--gray);font-size:10px}
.news-title{color:var(--amber);font-size:12px;font-weight:500}
.news-title a{color:var(--amber)}
.news-title a:hover{color:var(--white)}
.news-summary{color:var(--gray);font-size:11px;margin-top:3px;line-height:1.4}

/* YIELD CURVE */
.yield-curve-container{padding:10px;height:250px;position:relative}
.yield-curve-container svg{width:100%;height:100%}

/* MACRO */
.cb-direction{font-size:14px;font-weight:700}

/* FOOTER */
#footer{position:fixed;bottom:0;left:0;right:0;height:20px;background:#050000;border-top:1px solid #400000;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:10px;color:var(--gray)}
#footer-status{color:var(--green)}

/* SCROLLABLE PANELS */
.scroll-panel{max-height:calc(100vh - 150px);overflow-y:auto}
.scroll-panel::-webkit-scrollbar{width:4px}
.scroll-panel::-webkit-scrollbar-track{background:#000}
.scroll-panel::-webkit-scrollbar-thumb{background:var(--border)}

/* Responsive body padding for footer */
body{padding-bottom:24px}

@media(max-width:1200px){
.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.grid-4,.grid-2,.grid-3,.grid-1-2,.grid-2-1{grid-template-columns:1fr}
}

/* MACRO STRIP */
#macro-strip{display:flex;gap:0;overflow-x:auto;background:#030000;border-bottom:1px solid #400000;padding:0;min-height:26px;scrollbar-width:none}
#macro-strip::-webkit-scrollbar{display:none}
.strip-item{display:flex;align-items:center;gap:8px;padding:4px 14px;border-right:1px solid var(--border);white-space:nowrap;cursor:default;flex-shrink:0}
.strip-item:hover{background:#0a0a0a}
.strip-sym{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:.3px}
.strip-price{font-size:11px;font-weight:600;color:var(--amber)}
.strip-chg{font-size:10px}

/* SEARCH DROPDOWN */
#search-wrapper{position:relative;flex:1}
#search-dropdown{position:absolute;top:100%;left:0;right:0;background:#111;border:1px solid var(--amber);z-index:1000;max-height:300px;overflow-y:auto;display:none}
#search-dropdown.open{display:block}
.search-result{display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer;border-bottom:1px solid #1a1a1a}
.search-result:hover,.search-result.active{background:#1a1a0a}
.sr-sym{color:var(--amber);font-size:12px;font-weight:700;min-width:60px}
.sr-name{color:var(--gray);font-size:11px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-type{font-size:9px;color:#555;background:#1a1a1a;padding:1px 5px;border-radius:2px;text-transform:uppercase}

/* PERIOD SELECTORS */
.period-selector{display:flex;gap:2px;padding:5px 10px;background:#050505;border-bottom:1px solid var(--border)}
.period-btn{background:none;border:1px solid var(--border);color:var(--gray);font-family:var(--font);font-size:10px;padding:2px 8px;cursor:pointer}
.period-btn:hover{color:var(--amber);border-color:var(--amber)}
.period-btn.active{background:var(--amber);color:#000;border-color:var(--amber)}

/* SPREADS */
.spread-table{width:100%;border-collapse:collapse}
.spread-table td{padding:4px 8px;font-size:11px;border-bottom:1px solid #111}
.spread-table tr:nth-child(even) td{background:var(--row-alt)}
.spread-normal{color:var(--gray)}
.spread-inverted{color:var(--red)}
.spread-steep{color:var(--green)}

/* CRYPTO */
.crypto-header{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;background:#050505;border-bottom:1px solid var(--border)}
.crypto-select{display:flex;gap:6px;flex-wrap:wrap;padding:6px 10px;background:#050505;border-bottom:1px solid var(--border)}
.crypto-btn{background:none;border:1px solid var(--border);color:var(--gray);font-family:var(--font);font-size:10px;padding:3px 10px;cursor:pointer}
.crypto-btn:hover,.crypto-btn.active{background:var(--amber);color:#000;border-color:var(--amber)}

/* BOND CHART */
.bond-chart-select{display:flex;gap:6px;flex-wrap:wrap;padding:6px 10px;background:#050505;border-bottom:1px solid var(--border)}
.bond-chart-btn{background:none;border:1px solid var(--border);color:var(--gray);font-family:var(--font);font-size:10px;padding:3px 10px;cursor:pointer}
.bond-chart-btn:hover,.bond-chart-btn.active{background:var(--amber);color:#000;border-color:var(--amber)}

/* LOADING SKELETON */
.skeleton{background:linear-gradient(90deg,#111 25%,#1a1a1a 50%,#111 75%);background-size:200% 100%;animation:skeleton-shine 1.2s ease infinite}
@keyframes skeleton-shine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================================================
   OneFlow Market Terminal v4.0 — Style Additions
   ============================================================ */

/* FUNCTION KEY BAR */
#fkey-bar{display:flex;align-items:center;background:#060000;border-bottom:2px solid #400000;padding:2px 8px;gap:2px;overflow-x:auto;scrollbar-width:none;min-height:24px}
#fkey-bar::-webkit-scrollbar{display:none}
.fkey{font-size:9px;font-weight:700;padding:2px 8px;cursor:pointer;letter-spacing:0.4px;border:1px solid #333;user-select:none;transition:all .1s;white-space:nowrap}
.fkey-yellow{background:#3a2800;color:#FFA028;border-color:#6b4800}
.fkey-yellow:hover{background:#6b4800;color:#FFD070;border-color:#FFA028}
.fkey-green{background:#002200;color:#00CC00;border-color:#004400}
.fkey-green:hover{background:#004400;color:#00FF00;border-color:#00CC00}
.fkey-red{background:#2D0000;color:#FF433D;border-color:#600000}
.fkey-red:hover{background:#600000;color:#FF6666;border-color:#FF433D}
.fkey-blue{background:#000f2a;color:#0068FF;border-color:#002266}
.fkey-blue:hover{background:#002266;color:#4488FF;border-color:#0068FF}
.fkey-sep{color:#333;padding:0 4px;cursor:default;background:none;border:none}
#fkey-command-display{margin-left:auto;color:var(--cyan);font-size:9px;font-weight:700;letter-spacing:1px;white-space:nowrap}

/* PANEL HEADER FUNCTION CODE */
.ph-fn{color:#444;font-size:9px;font-weight:400;letter-spacing:0.5px;margin-left:6px}

/* MARKET SESSIONS */
#market-sessions{display:flex;align-items:center;gap:6px}
.mkt-session{display:flex;align-items:center;gap:2px;font-size:9px;letter-spacing:0.3px;font-weight:600}
.mkt-dot{font-size:8px}

/* 52-WEEK RANGE BAR */
.w52-wrap{padding:6px 12px;background:#050505;border-bottom:1px solid var(--border)}
.w52-bar{position:relative;height:4px;background:#1a1a1a;border-radius:2px;margin-bottom:4px}
.w52-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#FF433D,#FF9900,#3BB94B);border-radius:2px}
.w52-dot{position:absolute;top:-4px;width:12px;height:12px;background:var(--amber);border-radius:50%;transform:translateX(-50%);border:2px solid #000}
.w52-labels{display:flex;justify-content:space-between;font-size:10px}
.w52-low{color:var(--red)}
.w52-high{color:var(--green)}
.w52-label{color:var(--gray)}

/* BID/ASK */
.bid-ask{font-size:11px;color:var(--gray);padding:4px 12px;border-bottom:1px solid var(--border);background:#030308;display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.bid-ask .bv{color:#4af;font-weight:700}
.bid-ask .av{color:#fa0;font-weight:700}
.ba-label{color:var(--gray);font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.ba-sz{color:#444;font-size:10px;margin-left:1px}
.ba-sep{color:#333}
.ba-spread{color:#555;font-size:10px;letter-spacing:.3px}

/* ANALYST BAR */
.analyst-bar{display:flex;align-items:center;gap:10px;padding:5px 12px;background:#030308;border-bottom:1px solid var(--border);font-size:10px}
.analyst-label{color:var(--gray);text-transform:uppercase;letter-spacing:0.5px}
.analyst-value{color:var(--cyan);font-weight:700;font-size:12px}
.analyst-count{color:#555}

/* SECTOR HEATMAP */
.sector-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:2px;padding:6px}
.sector-cell{padding:8px 4px;text-align:center;cursor:pointer;border:1px solid #111;transition:all .15s}
.sector-cell:hover{border-color:var(--amber)}
.sector-name{font-size:9px;color:#ccc;font-weight:600;text-transform:uppercase;line-height:1.2;margin-bottom:3px}
.sector-sym{font-size:8px;margin-bottom:2px}
.sector-pct{font-size:11px;font-weight:700}
@media(max-width:1200px){.sector-grid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:768px){.sector-grid{grid-template-columns:repeat(3,1fr)}}

/* FOREX CROSS MATRIX */
.fx-matrix td,.fx-matrix th{padding:3px 6px;font-size:10px}
.fx-matrix .num{text-align:right;font-variant-numeric:tabular-nums}

/* TOP MOVERS */
#movers-gainers-content tr:hover td,#movers-losers-content tr:hover td{background:var(--row-hover);cursor:pointer}

/* ECONOMIC CALENDAR */
.econ-high{color:var(--red)}
.econ-med{color:var(--amber)}
.econ-low{color:#555}

/* COMMAND INPUT BLINK */
#command-input{caret-color:var(--amber)}
@keyframes cursor-blink{0%,100%{caret-color:var(--amber)}50%{caret-color:transparent}}
#command-input:focus{animation:cursor-blink 1s step-end infinite;border-color:var(--amber)}

/* TOPBAR ENHANCEMENTS — override base */
#topbar{height:38px !important}
.logo{font-size:15px !important;letter-spacing:3px !important}

/* CLICKABLE ROWS */
.bt-table tbody tr{cursor:default}
.bt-table tbody tr.clickrow,.bt-table tbody tr[onclick]{cursor:pointer}
.bt-table tbody tr.clickrow:hover td,.bt-table tbody tr[onclick]:hover td{background:var(--row-hover)}

/* OVERVIEW skeleton */
.ov-skeleton{padding:8px}

/* STOCK DESCRIPTION */
.stock-desc{padding:10px;font-size:11px;color:var(--gray);line-height:1.6;border-bottom:1px solid var(--border)}

/* BLOOMBERG AUTHENTICITY ENHANCEMENTS */
/* Tighter table rows for density */
.bt-table td{padding:3px 8px;font-size:11px}
.bt-table th{padding:3px 8px;font-size:10px}

/* Stock header refinements */
.stock-header{flex-wrap:wrap;padding:8px 12px;gap:12px;background:#030308;border-bottom:2px solid var(--border)}
.stock-ticker{font-size:22px;letter-spacing:1px}
.stock-price{font-size:26px}
.stock-change{font-size:13px}

/* Panel header — Bloomberg red menu bar signature */
.panel-header{padding:4px 10px;font-size:10px;letter-spacing:1.2px;border-left:none;border-bottom:1px solid #600000}

/* News title links — more visible */
.news-title a{color:var(--white)}
.news-title a:hover{color:var(--amber)}

/* Movers table — tighter */
#movers-gainers .bt-table td,#movers-losers .bt-table td{padding:3px 8px}

/* Sector cell — more readable */
.sector-cell{padding:6px 2px}
.sector-name{font-size:8px}
.sector-pct{font-size:10px}

/* Bond chart buttons */
.bond-chart-btn{font-size:9px;padding:2px 8px}

/* Period selector tighter */
.period-selector{padding:4px 8px;gap:2px}
.period-btn{padding:2px 7px;font-size:10px}

/* Yield curve container */
.yield-curve-container{padding:6px;height:200px}

/* Economic data value */
.ec-val{color:var(--amber);font-variant-numeric:tabular-nums}

/* Analyst bar refinements */
.analyst-bar{padding:4px 12px;gap:8px}

/* Chart controls tighter */
.chart-controls{padding:4px 8px;gap:3px}
.chart-btn{padding:2px 8px;font-size:10px}

/* Macro strip tighter */
.strip-item{padding:4px 12px;gap:6px}

/* Grid gap tighter */
.grid-4,.grid-2,.grid-3,.grid-1-2,.grid-2-1{gap:6px}

/* View padding */
.view{padding:6px}