/* AITradePro V58 — premium-layout.css
 * Workspace layout, top bar, grid
 * Generated by V58 Modularization Sprint
 */

/* ===== WORKSPACE LAYOUT ===== */
#workspace{display:flex;flex-direction:column;height:100vh;overflow:hidden}
/* Top bar */
#ws-topbar{height:44px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:12px;flex-shrink:0;z-index:100}
#ws-topbar .ws-logo{font-weight:700;font-size:14px;color:var(--accent);white-space:nowrap;margin-right:4px}
#ws-topbar .ws-logo span{color:var(--text2);font-size:10px;font-weight:400;margin-left:4px}
#ws-topbar .tb-sym{font-size:15px;font-weight:700;color:var(--text)}
#ws-topbar .tb-price{font-size:18px;font-weight:700;color:var(--green);margin-left:4px}
#ws-topbar .tb-change{font-size:11px;margin-left:4px}
#ws-topbar .tb-change.pos{color:var(--green)}
#ws-topbar .tb-change.neg{color:var(--red)}
#ws-topbar .tb-spacer{flex:1}
#ws-topbar .tb-session{font-size:11px;color:var(--text2);background:var(--bg3);padding:3px 8px;border-radius:4px;border:1px solid var(--border)}
#ws-topbar .tb-score{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;background:var(--bg3);border:1px solid var(--border)}
#ws-topbar .tb-score.good{color:var(--green);border-color:var(--green)}
#ws-topbar .tb-score.fair{color:var(--yellow);border-color:var(--yellow)}
#ws-topbar .tb-score.poor{color:var(--red);border-color:var(--red)}
#broker-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0}
#broker-dot.connected{background:var(--green);box-shadow:0 0 5px var(--green)}
#broker-dot.degraded{background:var(--yellow)}
#ws-topbar .tb-user{font-size:11px;color:var(--text2);white-space:nowrap}
/* Index bar */
#ws-indexbar{height:38px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 8px;gap:4px;flex-shrink:0;overflow-x:auto}
.idx-btn{padding:4px 10px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--text2);cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap}
.idx-btn:hover{background:var(--bg3);color:var(--text)}
.idx-btn.active{background:var(--bg3);border-color:var(--border);color:var(--text);font-weight:600}
.idx-sep{width:1px;height:20px;background:var(--border);margin:0 2px;flex-shrink:0}
.tf-btn{padding:3px 8px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-size:11px}
.tf-btn:hover{background:var(--bg3)}
.tf-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* Main workspace grid */
#ws-main{flex:1;display:grid;grid-template-columns:1fr 280px;grid-template-rows:1fr auto;min-height:0;overflow:hidden}
#ws-left{display:flex;flex-direction:column;border-right:1px solid var(--border);min-height:0;overflow:hidden}
#ws-right{display:flex;flex-direction:column;overflow-y:auto;background:var(--bg);min-height:0}
/* Chart area */
#ws-chart-wrap{flex:1;position:relative;min-height:0;background:var(--bg)}
#multi-chart-wrap{flex:1;min-height:0;background:var(--bg)}
#tvChart{width:100%;height:100%}
#chart-ohlc{position:absolute;top:4px;left:8px;font-size:11px;color:var(--text2);pointer-events:none;z-index:10;background:rgba(13,17,23,.7);padding:2px 6px;border-radius:3px}
#chart-price-label{position:absolute;top:4px;right:8px;font-size:11px;z-index:10}
/* Click toolbar */
#click-toolbar{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0}
.ct-btn{padding:4px 10px;border-radius:4px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:11px}
.ct-btn:hover,.ct-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.click-hint{font-size:11px;color:var(--text2);margin-left:4px}
/* Bottom panel (tabs) */
#ws-bottom{height:160px;border-top:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;background:var(--bg)}
.tab-bar{display:flex;gap:0;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.tab-btn{padding:6px 14px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--text2);cursor:pointer;font-size:12px}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--text);border-bottom-color:var(--accent)}
.tab-content{display:none;flex:1;overflow-y:auto}
.tab-content.active{display:block}
/* ===== RIGHT PANEL COMPONENTS ===== */
.rp-section{border-bottom:1px solid var(--border);padding:8px 10px}
.rp-section:last-child{border-bottom:none}
.rp-title{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);font-weight:600;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
/* AI Decision Card */
#ai-decision-card{background:var(--bg2);padding:10px}
.ai-direction-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ai-dir-badge{padding:5px 18px;border-radius:5px;font-size:15px;font-weight:700;letter-spacing:.5px;flex-shrink:0}
.ai-dir-badge.BUY{background:rgba(0,200,83,.15);color:var(--green);border:1px solid var(--green)}
.ai-dir-badge.SELL{background:rgba(255,82,82,.15);color:var(--red);border:1px solid var(--red)}
.ai-dir-badge.WAIT{background:rgba(255,193,7,.1);color:var(--yellow);border:1px solid var(--yellow)}
.ai-dir-badge.NO_TRADE{background:rgba(158,158,158,.1);color:var(--notrade);border:1px solid var(--notrade)}
.ai-conf-bar-wrap{margin-bottom:6px}
.ai-conf-label{font-size:11px;color:var(--text2);display:flex;justify-content:space-between;gap:6px;margin-bottom:3px}
.ai-conf-bar{height:5px;border-radius:3px;background:var(--bg3);overflow:hidden}
.ai-conf-fill{height:100%;border-radius:3px;background:var(--green);transition:width .4s}
.ai-conf-fill.med{background:var(--yellow)}
.ai-conf-fill.low{background:var(--red)}
.ai-metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:6px}
.ai-met{background:var(--bg);padding:4px 6px}
.ai-met .mk{font-size:10px;color:var(--text2);display:block}
.ai-met .mv{font-size:12px;font-weight:600;color:var(--text)}
.ai-met .mv.pos{color:var(--green)}
.ai-met .mv.neg{color:var(--red)}
.ai-met .mv.neutral{color:var(--yellow)}
/* Reliability row */
.reliability-row{display:flex;gap:4px;margin-bottom:6px;flex-wrap:wrap}
.rel-chip{padding:2px 7px;border-radius:3px;font-size:10px;font-weight:600;border:1px solid var(--border)}
.rel-chip.SAFE,.rel-chip.CONNECTED,.rel-chip.VALID,.rel-chip.EXCELLENT,.rel-chip.FAST,.rel-chip.LIVE,.rel-chip.GOOD{background:rgba(0,200,83,.1);color:var(--green);border-color:var(--green)}
.rel-chip.CAUTION,.rel-chip.DEGRADED,.rel-chip.WARNING,.rel-chip.NORMAL,.rel-chip.DELAYED,.rel-chip.FAIR{background:rgba(255,152,0,.1);color:var(--orange);border-color:var(--orange)}
.rel-chip.BLOCK,.rel-chip.DISCONNECTED,.rel-chip.INVALID,.rel-chip.OFFLINE,.rel-chip.SLOW,.rel-chip.STALE,.rel-chip.POOR{background:rgba(211,47,47,.1);color:var(--red);border-color:var(--block)}
.rel-chip.UNKNOWN,.rel-chip.READY{background:rgba(139,148,158,.1);color:var(--text2);border-color:var(--border)}
.rel-chip.READY{background:rgba(33,150,243,.1);color:var(--blue);border-color:var(--blue)}
/* AI reasoning */
.ai-reasoning{font-size:10px;color:var(--text2);line-height:1.5;padding:5px 6px;background:var(--bg3);border-radius:3px;border:1px solid var(--border)}
/* Trade Setup */
#trade-setup-card{padding:8px 10px}
.ts-signal-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:6px}
.ts-price{background:var(--bg3);border-radius:4px;padding:4px 6px;border:1px solid var(--border)}
.ts-price.entry-price{border-color:var(--blue)}
.ts-price.sl-price{border-color:var(--red)}
.ts-price.t1-price{border-color:rgba(0,200,83,.5)}
.ts-price.t2-price{border-color:rgba(0,200,83,.7)}
.ts-price.t3-price{border-color:var(--green)}
.ts-price .tsp-label{font-size:9px;color:var(--text2);margin-bottom:2px;text-transform:uppercase;letter-spacing:.3px}
.ts-price .tsp-val{font-size:12px;font-weight:700;color:var(--text)}
.ts-rr-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.ts-rr-item{font-size:11px;color:var(--text2)}
.ts-rr-item span{color:var(--text);font-weight:600;margin-left:3px}
/* Trade panel form */
.trade-form-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:5px}
.trade-form-field label{font-size:10px;color:var(--text2);display:block;margin-bottom:2px}
.trade-form-field input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:5px 7px;border-radius:4px;font-size:12px;outline:none}
.trade-form-field input:focus{border-color:var(--accent)}
.dir-row{display:flex;gap:5px;margin-bottom:5px}
.dir-btn{flex:1;padding:6px;border-radius:5px;border:none;cursor:pointer;font-size:12px;font-weight:700;background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.dir-btn.buy.active{background:rgba(0,200,83,.15);color:var(--green);border-color:var(--green)}
.dir-btn.sell.active{background:rgba(255,82,82,.15);color:var(--red);border-color:var(--red)}
.place-btn{width:100%;padding:8px;border:none;border-radius:5px;cursor:pointer;font-size:13px;font-weight:700;color:#fff;transition:opacity .2s}
.place-btn.buy-btn{background:var(--green)}
.place-btn.sell-btn{background:var(--red)}
.place-btn:hover{opacity:.85}
/* Risk Manager */
#risk-manager{padding:8px 10px}
.rm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.rm-item{background:var(--bg3);border-radius:4px;padding:5px 7px;border:1px solid var(--border)}
.rm-item .rm-label{font-size:9px;color:var(--text2);margin-bottom:2px;text-transform:uppercase;letter-spacing:.3px}
.rm-item .rm-val{font-size:12px;font-weight:700;color:var(--text)}
.rm-item .rm-val.pos{color:var(--green)}
.rm-item .rm-val.neg{color:var(--red)}
.rm-item .rm-val.warn{color:var(--yellow)}
/* AI Timeline */
#ai-timeline{padding:8px 10px}
.tl-row{display:flex;align-items:center;gap:6px;padding:3px 0;border-bottom:1px solid var(--bg3)}
.tl-row:last-child{border-bottom:none}
.tl-step{width:14px;height:14px;border-radius:50%;flex-shrink:0;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:700}
.tl-step.pass{background:rgba(0,200,83,.2);color:var(--green);border:1px solid var(--green)}
.tl-step.fail{background:rgba(255,82,82,.2);color:var(--red);border:1px solid var(--red)}
.tl-step.warn{background:rgba(255,193,7,.2);color:var(--yellow);border:1px solid var(--yellow)}
.tl-label{font-size:10px;color:var(--text2);flex:1}
.tl-val{font-size:10px;font-weight:600;color:var(--text)}
/* Market Summary strip */
#ws-market-strip{display:flex;gap:8px;padding:5px 8px;background:var(--bg2);border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0}
.ms-item{display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:60px}
.ms-item .ms-label{font-size:9px;color:var(--text2);text-transform:uppercase;letter-spacing:.3px}
.ms-item .ms-val{font-size:11px;font-weight:600;color:var(--text)}
.ms-item .ms-val.pos{color:var(--green)}
.ms-item .ms-val.neg{color:var(--red)}
/* Status bar */
#ws-statusbar{height:26px;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 10px;gap:12px;flex-shrink:0}
.sb-item{font-size:10px;display:flex;align-items:center;gap:4px;color:var(--text2)}
.sb-item .sb-badge{padding:1px 6px;border-radius:3px;font-weight:600;font-size:10px}
.sb-badge.SAFE,.sb-badge.CONNECTED,.sb-badge.LIVE{background:rgba(0,200,83,.1);color:var(--green)}
.sb-badge.CAUTION,.sb-badge.DEGRADED,.sb-badge.DELAYED{background:rgba(255,152,0,.1);color:var(--orange)}
.sb-badge.BLOCK,.sb-badge.DISCONNECTED,.sb-badge.STALE,.sb-badge.OFFLINE{background:rgba(211,47,47,.1);color:var(--red)}
.sb-badge.UNKNOWN{background:rgba(139,148,158,.1);color:var(--text2)}
/* Auto-trade row */
.auto-trade-row{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--bg2);border-bottom:1px solid var(--border)}
.auto-label{font-size:11px;color:var(--text2);flex:1}
.toggle-switch{position:relative;display:inline-block;width:34px;height:18px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--bg3);border-radius:18px;border:1px solid var(--border)}
.toggle-slider:before{position:absolute;content:"";height:12px;width:12px;left:2px;bottom:2px;background:var(--text2);border-radius:50%;transition:.3s}
input:checked + .toggle-slider{background:var(--green);border-color:var(--green)}
input:checked + .toggle-slider:before{transform:translateX(16px);background:#fff}
.auto-conf-mini{font-size:10px;color:var(--text2);display:flex;align-items:center;gap:4px}
#auto-conf-slider{width:70px;accent-color:var(--accent)}
/* Portfolio compact */
.pf-strip{display:flex;gap:6px;padding:5px 10px;background:var(--bg3);flex-shrink:0}
.pf-item{flex:1;min-width:0}
.pf-item .pf-label{font-size:9px;color:var(--text2);text-transform:uppercase}
.pf-item .pf-value{font-size:12px;font-weight:700;color:var(--text)}
.pf-item .pf-value.pos{color:var(--green)}
.pf-item .pf-value.neg{color:var(--red)}
/* Sections */
#trading-section,#fyers-section,#portfolio-section,#journal-section{display:none}
#trading-section.active,#fyers-section.active,#portfolio-section.active,#journal-section.active{display:flex;flex-direction:column;height:100%}
/* Positions compact */
#positions-compact{padding:5px 10px;flex-shrink:0}
.pos-compact-item{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--bg3);font-size:11px}
.pos-compact-item:last-child{border-bottom:none}
.no-items{font-size:11px;color:var(--text2);padding:6px 0;text-align:center}
/* FYERS panel */
#fyers-panel,#portfolio-panel,#journal-panel{padding:10px;flex:1;overflow-y:auto}
.section-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.badge{background:var(--accent);color:#fff;font-size:10px;padding:1px 5px;border-radius:10px;margin-left:4px}
.fyers-btn{padding:5px 10px;border-radius:4px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-size:12px}
.fyers-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.fyers-btn:hover{opacity:.85}
.fyers-connect-row{display:flex;gap:5px;margin-bottom:8px}
.fyers-status-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:6px 8px;background:var(--bg3);border-radius:4px;font-size:11px}
.fdt-btn{padding:4px 10px;border:1px solid transparent;border-bottom:2px solid transparent;background:transparent;color:var(--text2);cursor:pointer;font-size:11px}
.fdt-btn.active{color:var(--text);border-bottom-color:var(--accent)}
.fyers-data-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:6px}
.fyers-empty{font-size:11px;color:var(--text2);padding:10px 0;text-align:center}
.fyers-funds-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.fyers-fund-item{background:var(--bg3);border-radius:4px;padding:6px 8px}
.fyers-fund-item .ff-label{font-size:10px;color:var(--text2)}
.fyers-fund-item .ff-val{font-size:13px;font-weight:600;color:var(--text)}
/* Journal table */
.journal-table-wrap{overflow-x:auto}
.journal-table{width:100%;border-collapse:collapse;font-size:11px}
.journal-table th{background:var(--bg3);padding:5px 8px;text-align:left;color:var(--text2);font-weight:600;border-bottom:1px solid var(--border)}
.journal-table td{padding:5px 8px;border-bottom:1px solid var(--bg3);color:var(--text)}
.journal-table .pos{color:var(--green)}
.journal-table .neg{color:var(--red)}
/* Stats */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.pf-card{background:var(--bg3);border-radius:5px;padding:6px 8px}
.pf-label{font-size:10px;color:var(--text2);margin-bottom:2px}
.pf-value{font-size:13px;font-weight:700;color:var(--text)}
.pf-value.pos{color:var(--green)}
.pf-value.neg{color:var(--red)}
/* Modals */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:20px;width:340px;max-width:95vw}
.modal-box h3{font-size:15px;font-weight:700;margin-bottom:14px}
.modal-field{margin-bottom:10px}
.modal-field label{display:block;font-size:12px;color:var(--text2);margin-bottom:4px}
.modal-field input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:7px 10px;border-radius:5px;font-size:13px;outline:none}
.modal-field input:focus{border-color:var(--accent)}
.modal-btns{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.modal-btn{padding:7px 14px;border-radius:5px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-size:12px}
.modal-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.modal-btn:hover{opacity:.85}
/* Toast */
#toast{position:fixed;top:50px;right:12px;z-index:300;display:flex;flex-direction:column;gap:6px}
.toast-item{padding:8px 14px;border-radius:6px;font-size:12px;border:1px solid;animation:slideIn .2s}
.toast-item.success{background:#1a3a1f;border-color:var(--green);color:var(--green)}
.toast-item.error{background:#3a1a1a;border-color:var(--red);color:var(--red)}
.toast-item.info{background:#1a2a3a;border-color:var(--blue);color:var(--blue)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
/* Sidebar sections nav (hidden but preserved for JS) */
#sidebar-nav-section{display:none}
/* RR info row */
.rr-info{display:flex;justify-content:space-between;font-size:11px;color:var(--text2);margin-bottom:5px}
.rr-val,.risk-val{color:var(--text);font-weight:600}
/* MTM bar compat */
#mtm-bar{display:none}
#mtm-running,#mtm-today,#mtm-total,#mtm-balance,#mtm-openpos{color:var(--text)}
/* Session expire */
#session-expire-top{font-size:10px;color:var(--yellow)}
/* Wallet & index bars compat */
.mtm-item{padding:4px 8px;background:var(--bg3);border-radius:4px;border:1px solid var(--border)}
.mtm-label{font-size:9px;color:var(--text2);text-transform:uppercase}
.mtm-value{font-size:12px;font-weight:700;color:var(--text)}
/* Alert dot */
.alert-dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);display:inline-block}
/* Responsive */