Update app.py

app.py

@@ -32,7 +32,7 @@ def sb_get(endpoint: str, params: dict = None):
         return r.json()
     except Exception as e:
         print(f"DB Error GET ({endpoint}): {e}")
-        return []
+        return[]
 
 def sb_rpc(func_name: str, params: dict = None):
     if params is None:
@@ -44,7 +44,7 @@ def sb_rpc(func_name: str, params: dict = None):
         return r.json()
     except Exception as e:
         print(f"DB Error RPC ({func_name}): {e}")
-        return []
+        return[]
 
 # ==========================================
 # 3. API ROUTES - METADATA
@@ -74,7 +74,7 @@ def get_auto_config(date: str, root: str):
     exps_data = sb_rpc("get_expiries_for_root", {"p_date": date, "p_root": root})
     all_expiries = [row['expiry_date'] for row in exps_data if row['expiry_date'] != 'MARKET']
 
-    valid_expiries = [e for e in all_expiries if e >= date]
+    valid_expiries =[e for e in all_expiries if e >= date]
     if not valid_expiries:
         valid_expiries = all_expiries
 
@@ -111,7 +111,7 @@ def get_instruments(date: str, root: str, expiry: str):
     instruments = [row['instrument_name'] for row in data]
 
     spot_fut = []
-    options = []
+    options =[]
     for i in instruments:
         if i.endswith('CE') or i.endswith('PE'):
             options.append(i)
@@ -141,11 +141,9 @@ async def fetch_series(
     t_start_dt = pd.to_datetime(f"{date} {start_time}:00")
     t_end_dt = pd.to_datetime(f"{date} {end_time}:59")
 
-    # Default: all variables if not specified
     if required_vars is None:
-        required_vars = ["P", "B", "S", "CB", "CS", "PB", "PS", "V", "OI"]
+        required_vars =["P", "B", "S", "CB", "CS", "PB", "PS", "V", "OI"]
 
-    # Always include P (price)
     required_vars = list(set(required_vars) | {"P"})
 
     if mode == "advanced":
@@ -153,22 +151,21 @@ async def fetch_series(
         instruments = [r['instrument_name'] for r in inst_data]
 
         if not instruments:
-            return JSONResponse({"error": f"No data found for expiry {expiry}", "labels": [], "P": []})
+            return JSONResponse({"error": f"No data found for expiry {expiry}", "labels": [], "P":[]})
 
         ref_instrument = instrument
         if not ref_instrument:
-            spot_keys = [k for k in instruments if k.endswith('-INDEX') or k.endswith('-EQ')]
+            spot_keys =[k for k in instruments if k.endswith('-INDEX') or k.endswith('-EQ')]
             fut_keys = [k for k in instruments if 'FUT' in k]
             if spot_keys:
                 ref_instrument = spot_keys[0]
             elif fut_keys:
                 ref_instrument = fut_keys[0]
             else:
-                others = [k for k in instruments if not k.endswith('CE') and not k.endswith('PE')]
+                others =[k for k in instruments if not k.endswith('CE') and not k.endswith('PE')]
                 ref_instrument = others[0] if others else instruments[0]
 
-        # Use the new function with breakdown
-        rpc_name = "get_advanced_chart_data_with_breakdown"
+        rpc_name = "get_advanced_chart_data"
         base_params = {
             "p_root": root,
             "p_expiry": expiry,
@@ -179,7 +176,7 @@ async def fetch_series(
 
     else:
         if not instrument:
-            return JSONResponse({"error": "No Instrument Selected.", "labels": [], "P": []})
+            return JSONResponse({"error": "No Instrument Selected.", "labels":[], "P":[]})
 
         rpc_name = "get_normal_chart_data"
         base_params = {
@@ -198,7 +195,7 @@ async def fetch_series(
         loop = asyncio.get_event_loop()
         return await loop.run_in_executor(None, sb_rpc, rpc_name, params)
 
-    tasks = []
+    tasks =[]
     curr = t_start_dt
     while curr <= t_end_dt:
         nxt = curr + timedelta(hours=2) - timedelta(seconds=1)
@@ -209,13 +206,13 @@ async def fetch_series(
 
     chunk_results = await asyncio.gather(*tasks)
 
-    all_records = []
+    all_records =[]
     for res in chunk_results:
         if isinstance(res, list):
             all_records.extend(res)
 
     if not all_records:
-        return JSONResponse({"error": "No valid data found in range.", "labels": [], "P": []})
+        return JSONResponse({"error": "No valid data found in range.", "labels": [], "P":[]})
 
     # =========================================================
     # DATA PROCESSING
@@ -247,94 +244,30 @@ async def fetch_series(
     }
     panda_tf = tf_map.get(timeframe, "1min")
 
-    # KEY FIX: Use 'last' for quantity fields — these are cumulative running totals.
-    # The LAST value in any period is the most current/accurate snapshot.
     agg_dict = {
-        "P": "last",
-        "V": "sum",    # Volume: summing new volume per candle makes sense
-        "OI": "last",  # OI: last value
-        "B": "last",   # Buy qty cumulative total → last value
-        "S": "last",   # Sell qty cumulative total → last value
-        "CB": "last",  # Call Buy → last value
-        "CS": "last",  # Call Sell → last value
-        "PB": "last",  # Put Buy → last value
-        "PS": "last",  # Put Sell → last value
+        "P": "last", "V": "sum", "OI": "last", "B": "last", "S": "last",
+        "CB": "last", "CS": "last", "PB": "last", "PS": "last",
+        "breakdown": "last" # Include the new JSON breakdown
     }
 
-    # Handle optional columns from advanced mode
-    if 'atm_strike' in df.columns:
-        agg_dict['atm_strike'] = 'last'
-    if 'strike_details' in df.columns:
-        agg_dict['strike_details'] = 'last'
-    if 'range_info' in df.columns:
-        agg_dict['range_info'] = 'last'
-
     existing_agg = {k: v for k, v in agg_dict.items() if k in df.columns}
     resampled = df.resample(panda_tf).agg(existing_agg).ffill().fillna(0)
 
-    # Build response: only include requested variables (reduces egress)
     response_data = {
         "labels": resampled.index.strftime('%H:%M').tolist()
     }
 
-    for var_key in ["P", "B", "S", "V", "OI", "CB", "CS", "PB", "PS"]:
+    for var_key in["P", "B", "S", "V", "OI", "CB", "CS", "PB", "PS"]:
         if var_key in required_vars and var_key in resampled.columns:
             response_data[var_key] = [round(float(v), 2) for v in resampled[var_key].tolist()]
-        # Omit entirely if not requested — JS handles missing keys gracefully
-
-    # Include breakdown data for advanced mode
-    if mode == "advanced":
-        # Add ATM strike for each bar
-        if 'atm_strike' in resampled.columns:
-            response_data['atm_strike'] = [round(float(v), 2) if v else 0 for v in resampled['atm_strike'].tolist()]
-
-        # Add per-bar breakdown data
-        if 'strike_details' in resampled.columns:
-            response_data['strike_details'] = resampled['strike_details'].tolist()
-
-        if 'range_info' in resampled.columns:
-            response_data['range_info'] = resampled['range_info'].tolist()
-
-        # Build comprehensive strike breakdown per minute
-        breakdown_per_minute = []
-        for idx, row in resampled.iterrows():
-            minute_data = {
-                "time": idx.strftime('%H:%M'),
-                "spot_price": round(float(row.get('P', 0)), 2) if row.get('P') else 0,
-                "atm_strike": round(float(row.get('atm_strike', 0)), 2) if row.get('atm_strike') else 0,
-                "cb": round(float(row.get('CB', 0)), 2) if row.get('CB') else 0,
-                "cs": round(float(row.get('CS', 0)), 2) if row.get('CS') else 0,
-                "pb": round(float(row.get('PB', 0)), 2) if row.get('PB') else 0,
-                "ps": round(float(row.get('PS', 0)), 2) if row.get('PS') else 0,
-                "strikes": []
-            }
 
-            # Process strike details if available
-            strike_details = row.get('strike_details')
-            if strike_details and isinstance(strike_details, list):
-                for sd in strike_details:
-                    if isinstance(sd, dict):
-                        minute_data["strikes"].append({
-                            "strike": sd.get('strike', 0),
-                            "type": sd.get('type', ''),
-                            "instrument": sd.get('instrument', ''),
-                            "buy": sd.get('buy', 0),
-                            "sell": sd.get('sell', 0),
-                            "vol": sd.get('vol', 0),
-                            "oi": sd.get('oi', 0),
-                            "ltp": sd.get('ltp', 0),
-                            "call_status": sd.get('call_status'),
-                            "put_status": sd.get('put_status')
-                        })
-
-            breakdown_per_minute.append(minute_data)
-
-        response_data['breakdown_per_minute'] = breakdown_per_minute
-
-        # Add range info if available (just the last one as it's constant)
-        range_info = resampled['range_info'].iloc[-1] if 'range_info' in resampled.columns and len(resampled) > 0 else None
-        if range_info:
-            response_data['atm_range_info'] = range_info
+    # Send the breakdown array strictly for UI sub-tables
+    if "breakdown" in resampled.columns:
+        cleaned_breakdown = []
+        for x in resampled["breakdown"]:
+            if isinstance(x, list): cleaned_breakdown.append(x)
+            else: cleaned_breakdown.append([])
+        response_data["breakdown"] = cleaned_breakdown
 
     return JSONResponse(response_data)
 
@@ -422,6 +355,7 @@ HTML_TEMPLATE = """
 
         .tool-btn { width: 24px; height: 24px; border: none; background: transparent; color: var(--text-secondary); border-radius: 4px; }
         .tool-btn:hover { background: var(--bg-panel); color: var(--text-primary); }
+        .tool-btn-small { font-size:10px; padding:2px 6px; height:auto; width:auto; border:1px solid var(--border); }
 
         .card-body { flex: 1; position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
         .empty-state {
@@ -442,7 +376,7 @@ HTML_TEMPLATE = """
             width: 560px; max-width: 95%; max-height: 88vh; display: flex; flex-direction: column;
             box-shadow: 0 20px 50px rgba(0,0,0,0.5);
         }
-        .modal.wide { width: 950px; }
+        .modal.wide { width: 880px; }
         .modal-head { padding: 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; font-weight: 700; }
         .modal-body { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
         .modal-foot { padding: 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--bg-card); }
@@ -461,7 +395,6 @@ HTML_TEMPLATE = """
         .custom-dd-opt:hover { background: var(--bg-input); color: var(--accent); }
         .custom-dd-group { padding: 6px 12px; font-size: 10px; font-weight: 700; color: var(--text-secondary); background: var(--bg-body); text-transform: uppercase; }
 
-        /* SERIES ROWS */
         .series-row {
             background: var(--bg-panel); padding: 12px; border-radius: 8px;
             border: 1px solid var(--border); margin-bottom: 10px;
@@ -482,10 +415,8 @@ HTML_TEMPLATE = """
         }
         .color-input::-webkit-color-swatch-wrapper { padding: 0; }
         .color-input::-webkit-color-swatch { border: none; }
-
         .cond-label { font-size: 10px; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
 
-        /* SEGMENTED */
         .segmented-control {
             display: flex; background: var(--bg-body); border: 1px solid var(--border);
             border-radius: 6px; padding: 2px; overflow: hidden; margin-bottom: 6px;
@@ -507,111 +438,26 @@ HTML_TEMPLATE = """
 
         /* BREAKDOWN TABLE */
         .breakdown-table {
-            width: 100%; border-collapse: collapse; font-family: var(--font-mono);
-            font-size: 11px;
+            width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px;
         }
         .breakdown-table th {
-            background: var(--bg-panel); color: var(--text-secondary); padding: 6px 10px;
+            background: var(--bg-panel); color: var(--text-secondary); padding: 8px 10px;
             border-bottom: 2px solid var(--border); text-align: right; white-space: nowrap; position: sticky; top: 0;
         }
         .breakdown-table th:first-child { text-align: left; }
-        .breakdown-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text-primary); }
+        .breakdown-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: right; color: var(--text-primary); }
         .breakdown-table td:first-child { text-align: left; color: var(--text-secondary); }
-        .breakdown-table tr:hover td { background: var(--bg-panel); }
+        .breakdown-table tr:hover > td { background: var(--bg-panel); }
         .val-pos { color: #3fb950; }
         .val-neg { color: #f85149; }
-        .breakdown-scroll { overflow-x: auto; overflow-y: auto; max-height: 55vh; }
-
-        /* STRIKE BREAKDOWN STYLES */
-        .strike-section {
-            margin-top: 10px;
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            overflow: hidden;
-        }
-        .strike-header {
-            background: var(--bg-panel);
-            padding: 8px 12px;
-            font-weight: 700;
-            font-size: 11px;
-            cursor: pointer;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 1px solid var(--border);
-        }
-        .strike-header:hover { background: var(--bg-input); }
-        .strike-header .arrow { transition: transform 0.2s; }
-        .strike-header.collapsed .arrow { transform: rotate(-90deg); }
-        .strike-content {
-            max-height: 400px;
-            overflow-y: auto;
-            transition: max-height 0.3s;
-        }
-        .strike-content.collapsed { max-height: 0; overflow: hidden; }
-        .strike-table {
-            width: 100%;
-            border-collapse: collapse;
-            font-family: var(--font-mono);
-            font-size: 10px;
-        }
-        .strike-table th {
-            background: var(--bg-body);
-            padding: 6px 8px;
-            text-align: right;
-            border-bottom: 1px solid var(--border);
-            color: var(--text-secondary);
-            font-weight: 600;
-        }
-        .strike-table th:first-child { text-align: left; }
-        .strike-table td {
-            padding: 5px 8px;
-            text-align: right;
-            border-bottom: 1px solid var(--border);
-        }
-        .strike-table td:first-child { text-align: left; }
-        .strike-table .ce-row { background: rgba(47,129,247,0.05); }
-        .strike-table .pe-row { background: rgba(218,54,51,0.05); }
-        .strike-table .atm-strike { background: rgba(210,153,34,0.15); font-weight: 700; }
-        .strike-table .itm { color: var(--success); }
-        .strike-table .otm { color: var(--text-secondary); }
-
-        .minute-accordion {
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            margin-bottom: 8px;
-            overflow: hidden;
-        }
-        .minute-header {
-            background: var(--bg-panel);
-            padding: 10px 12px;
-            cursor: pointer;
-            display: grid;
-            grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr;
-            gap: 10px;
-            align-items: center;
-            font-weight: 600;
-            font-size: 11px;
-        }
-        .minute-header:hover { background: var(--bg-input); }
-        .minute-detail {
-            background: var(--bg-card);
-            padding: 12px;
-            display: none;
-            border-top: 1px solid var(--border);
-        }
-        .minute-detail.show { display: block; }
-
-        .range-info-box {
-            background: var(--bg-panel);
-            border: 1px solid var(--accent);
-            border-radius: 6px;
-            padding: 10px 14px;
-            margin-bottom: 12px;
-            font-size: 11px;
-        }
-        .range-info-box .label { color: var(--text-secondary); }
-        .range-info-box .value { color: var(--accent); font-weight: 700; font-family: var(--font-mono); }
+        .breakdown-scroll { overflow-x: auto; overflow-y: auto; max-height: 60vh; border: 1px solid var(--border); border-radius: 6px; }
+
+        /* Sub Table specific styling */
+        .sub-table { margin: 10px 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
+        .sub-table th { background: var(--bg-body); border-bottom: 1px solid var(--border); padding: 6px 10px; font-size: 10px; }
+        .sub-table td { padding: 4px 10px; border-bottom: 1px solid var(--border); }
+        .sub-table tr:last-child td { border-bottom: none; }
+        .atm-row { background: rgba(47,129,247,0.12); border-left: 3px solid var(--accent); }
     </style>
 </head>
 <body>
@@ -684,7 +530,7 @@ HTML_TEMPLATE = """
                         <label>Chart Mode</label>
                         <div class="segmented-control" id="cfgModeToggle">
                             <button class="seg-btn active" onclick="Config.setMode('normal')">Normal Mode</button>
-                            <button class="seg-btn" onclick="Config.setMode('advanced')">Advanced Mode</button>
+                            <button class="seg-btn" onclick="Config.setMode('advanced')">Advanced Mode (2N)</button>
                         </div>
                     </div>
 
@@ -696,19 +542,16 @@ HTML_TEMPLATE = """
                             <div id="dd-cfgInst" class="custom-dd"></div>
                         </div>
                         <div id="advInstHint" style="display:none; font-size:10px; color:var(--text-secondary); margin-top:4px; line-height:1.4;">
-                            * Advanced Mode: select the Spot/Future as price reference. All CE/PE within ATM ± range will be aggregated.
+                            * Advanced Mode: select Spot/Future as reference. Aggregates CE/PE strictly N strikes above and N below Spot.
                         </div>
                     </div>
 
                     <div id="cfgAdvancedFields" style="display:none;">
                         <div class="form-section" style="margin-top:12px;">
-                            <label style="color:var(--accent);">ATM (+/-) Strike Range</label>
+                            <label style="color:var(--accent);">N Strikes (ITM/OTM Range)</label>
                             <input type="number" id="cfgAtmRange" value="5" min="1" max="50" style="width:100%;">
                             <div style="font-size:10px; color:var(--text-secondary); margin-top:4px;">
-                                <strong>Corrected Logic:</strong><br>
-                                • For Calls: N ITM (below ATM) + N OTM (ATM and above) = 2N strikes<br>
-                                • For Puts: N ITM (ATM and above) + N OTM (below ATM) = 2N strikes<br>
-                                • Both CE and PE at same strike are always included together.
+                                Grabs precisely N strikes below and N strikes above/equal to the reference price. (Total 2N strikes).
                             </div>
                         </div>
                     </div>
@@ -736,7 +579,6 @@ HTML_TEMPLATE = """
                     <div style="height:1px; background:var(--border); margin:12px 0 8px;"></div>
                 </div>
 
-                <!-- PRESET MANAGER -->
                 <div class="form-section" style="background:var(--bg-panel); padding:10px; border-radius:6px; border:1px solid var(--border); margin-bottom:12px;">
                     <label>Quick Models</label>
                     <div style="display:flex; gap:8px;">
@@ -746,7 +588,6 @@ HTML_TEMPLATE = """
                     </div>
                 </div>
 
-                <!-- SERIES CONFIG -->
                 <div class="form-section">
                     <div style="display:flex; align-items:center; margin-bottom:6px;">
                         <label style="margin:0;">Plot Lines</label>
@@ -773,24 +614,8 @@ HTML_TEMPLATE = """
         </div>
         <div class="modal-body" style="padding:12px;">
             <div style="font-size:11px; color:var(--text-secondary); margin-bottom:8px;" id="bdMeta"></div>
-            <div id="bdRangeInfo" style="display:none;"></div>
-
-            <!-- TABS -->
-            <div style="display:flex; gap:8px; margin-bottom:12px;">
-                <button id="tabSummary" class="primary" onclick="Breakdown.showTab('summary')">Summary</button>
-                <button id="tabStrikes" onclick="Breakdown.showTab('strikes')">Strike Breakdown</button>
-            </div>
-
-            <!-- SUMMARY TAB -->
-            <div id="bdSummaryTab">
-                <div class="breakdown-scroll">
-                    <table class="breakdown-table" id="bdTable"></table>
-                </div>
-            </div>
-
-            <!-- STRIKES TAB -->
-            <div id="bdStrikesTab" style="display:none;">
-                <div class="breakdown-scroll" id="bdStrikesContent"></div>
+            <div class="breakdown-scroll">
+                <table class="breakdown-table" id="bdTable"></table>
             </div>
         </div>
     </div>
@@ -819,16 +644,14 @@ function evalFormula(formula, vars) {
     try { return new Function('return ' + f)(); } catch { return null; }
 }
 
-// Extract which variables are used in a list of series formulas
 function extractRequiredVars(seriesList) {
-    const vars = new Set(['P']); // Always need price
+    const vars = new Set(['P']); 
     seriesList.forEach(s => {
         const f = s.formula || '';
         if (f.includes('$CB')) vars.add('CB');
         if (f.includes('$CS')) vars.add('CS');
         if (f.includes('$PB')) vars.add('PB');
         if (f.includes('$PS')) vars.add('PS');
-        // Check $B / $S but NOT $CB/$CS/$PB/$PS (already handled above)
         if (/\\$B(?!S)/.test(f) || f.includes('$B ') || f.endsWith('$B') || f.includes('$B-') || f.includes('$B+')) vars.add('B');
         if (/\\$S(?!$)/.test(f) || f.includes('$S ') || f.endsWith('$S') || f.includes('$S-') || f.includes('$S+')) vars.add('S');
         if (f.includes('$V')) vars.add('V');
@@ -841,30 +664,24 @@ function extractRequiredVars(seriesList) {
 // CUSTOM DROPDOWN
 // ===================================================
 const CustomDD = {
-    data: { cfgRoot: [], cfgExp: [], cfgInst: [] },
-    recent: { cfgRoot: [] },
+    data: { cfgRoot:[], cfgExp: [], cfgInst: [] },
+    recent: { cfgRoot:[] },
 
     init() {
         const saved = localStorage.getItem('dc_recent_symbols');
         if (saved) try { this.recent.cfgRoot = JSON.parse(saved); } catch(e){}
     },
-
-    clear(id) { this.data[id] = []; document.getElementById(id).value = ''; },
-
+    clear(id) { this.data[id] =[]; document.getElementById(id).value = ''; },
     set(id, items, groupName = null) {
-        if (!groupName)
-            this.data[id] = items.map(i => ({ val: i, group: null }));
-        else
-            this.data[id].push(...items.map(i => ({ val: i, group: groupName })));
+        if (!groupName) this.data[id] = items.map(i => ({ val: i, group: null }));
+        else this.data[id].push(...items.map(i => ({ val: i, group: groupName })));
     },
-
     async open(id) {
         document.querySelectorAll('.custom-dd').forEach(el => el.style.display = 'none');
         document.getElementById(id).select();
         this.render(id, '');
         document.getElementById(`dd-${id}`).style.display = 'block';
     },
-
     async filter(id) {
         const query = document.getElementById(id).value.toUpperCase();
         if (id === 'cfgRoot' && query.length >= 2) {
@@ -875,7 +692,6 @@ const CustomDD = {
         this.render(id, query);
         document.getElementById(`dd-${id}`).style.display = 'block';
     },
-
     render(id, query) {
         const el = document.getElementById(`dd-${id}`);
         const q = query.toLowerCase();
@@ -902,7 +718,6 @@ const CustomDD = {
         });
         el.innerHTML = html;
     },
-
     pick(id, val) {
         document.getElementById(id).value = val;
         document.getElementById(`dd-${id}`).style.display = 'none';
@@ -922,51 +737,47 @@ const CustomDD = {
 // APP STATE
 // ===================================================
 const App = {
-    state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [], []], charts: {}, refreshRate: 15 },
+    state: { date: null, mode: 'LIVE', columns: 3, layout: [[], [],[]], charts: {}, refreshRate: 15 },
 
-    // ---- DEFAULT PRESETS (organized by use case) ----
     presets: {
-        // --- Normal: Futures / Equity / Spot ---
-        "Basic Flow (Fut/Eq)": [
+        "Basic Flow (Fut/Eq)":[
             { formula: '$P',       label: 'Price',    axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$B',       label: 'Buy',      axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$S',       label: 'Sell',     axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Net Flow (Fut/Eq)": [
+        "Net Flow (Fut/Eq)":[
             { formula: '$P',       label: 'Price',    axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$B - $S',  label: 'Net Flow', axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BUY', labelFalse: 'SELL' }
         ],
-        // --- Normal: Options ---
-        "Call Flow (Options)": [
+        "Call Flow (Options)":[
             { formula: '$P',       label: 'Price',     axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB',      label: 'Call Buy',  axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$CS',      label: 'Call Sell', axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Put Flow (Options)": [
+        "Put Flow (Options)":[
             { formula: '$P',       label: 'Price',     axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$PB',      label: 'Put Buy',   axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$PS',      label: 'Put Sell',  axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Aggregated Flow (Options)": [
+        "Aggregated Flow (Options)":[
             { formula: '$P',            label: 'Price',      axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB + $PS',     label: 'Bull Side',  axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$PB + $CS',     label: 'Bear Side',  axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Net Flow (Options)": [
+        "Net Flow (Options)":[
             { formula: '$P',                        label: 'Price',    axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB + $PS - ($PB + $CS)',   label: 'Net Flow', axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
         ],
-        // --- Advanced: Options (aggregated across ATM range) ---
-        "Price & Flows (Advanced)": [
+        "Price & Flows (Advanced)":[
             { formula: '$P',            label: 'Spot Price', axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB + $PS',     label: 'Bull Side',  axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$PB + $CS',     label: 'Bear Side',  axis: 'right', color1: '#da3633', cond: 'none' }
         ],
-        "Net Flow (Advanced)": [
+        "Net Flow (Advanced)":[
             { formula: '$P',                        label: 'Spot Price', axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB + $PS - ($PB + $CS)',   label: 'Net Flow',   axis: 'right', color1: '#238636', cond: '>', thresh: '0', color2: '#da3633', labelTrue: 'BULLISH', labelFalse: 'BEARISH' }
         ],
-        "Components (Advanced)": [
+        "Components (Advanced)":[
             { formula: '$P',   label: 'Spot Price', axis: 'left',  color1: '#2f81f7', cond: 'none' },
             { formula: '$CB',  label: 'Call Buy',   axis: 'right', color1: '#238636', cond: 'none' },
             { formula: '$CS',  label: 'Call Sell',  axis: 'right', color1: '#3fb950', cond: 'none' },
@@ -1005,7 +816,7 @@ const App = {
 
     initDefault() {
         this.state.columns = 3;
-        this.state.layout = [[], [], []];
+        this.state.layout = [[], [],[]];
         this.state.refreshRate = 15;
         for (let i = 0; i < 3; i++) {
             this.addChartInternal(i);
@@ -1028,29 +839,20 @@ const App = {
         this.state.charts[id] = { config: {}, instance: null, lastData: null };
         return id;
     },
-
     save() {
         const cleanCharts = {};
-        for (let id in this.state.charts)
-            cleanCharts[id] = { config: this.state.charts[id].config };
+        for (let id in this.state.charts) cleanCharts[id] = { config: this.state.charts[id].config };
         localStorage.setItem('dc_pro_v4_state', JSON.stringify({
             date: this.state.date, mode: this.state.mode,
             columns: this.state.columns, layout: this.state.layout,
             refreshRate: this.state.refreshRate, charts: cleanCharts
         }));
     },
-
-    reset() {
-        if (confirm('Reset Workspace?')) {
-            localStorage.removeItem('dc_pro_v4_state');
-            location.reload();
-        }
-    },
-
+    reset() { if (confirm('Reset Workspace?')) { localStorage.removeItem('dc_pro_v4_state'); location.reload(); } },
     setLayout(n) {
         const all = this.state.layout.flat();
         this.state.columns = n;
-        this.state.layout = Array.from({ length: n }, () => []);
+        this.state.layout = Array.from({ length: n }, () =>[]);
         all.forEach((id, i) => this.state.layout[i % n].push(id));
         this.renderGrid(); this.save();
     },
@@ -1094,7 +896,7 @@ const App = {
         const cfg = this.state.charts[id]?.config || {};
         const isCfg = cfg && cfg.root;
         const modeTag = cfg.chartMode === 'advanced'
-            ? `<span class="inst-label">ATM ± ${cfg.atmRange || 5}</span>`
+            ? `<span class="inst-label">2N (±${cfg.atmRange || 5})</span>`
             : `<span class="inst-label">${cfg.instrument || ''}</span>`;
 
         div.innerHTML = `
@@ -1129,17 +931,9 @@ const App = {
         this.renderGrid(); this.save();
     },
 
-    onDateChange() {
-        this.state.date = document.getElementById('globalDate').value;
-        this.save(); this.refreshAll();
-    },
-    onModeChange() {
-        this.state.mode = document.getElementById('globalMode').value;
-        this.updateModeUI(); this.save(); this.refreshAll();
-    },
-    updateModeUI() {
-        document.getElementById('modeDot').className = `status-dot ${this.state.mode === 'LIVE' ? 'live' : 'hist'}`;
-    },
+    onDateChange() { this.state.date = document.getElementById('globalDate').value; this.save(); this.refreshAll(); },
+    onModeChange() { this.state.mode = document.getElementById('globalMode').value; this.updateModeUI(); this.save(); this.refreshAll(); },
+    updateModeUI() { document.getElementById('modeDot').className = `status-dot ${this.state.mode === 'LIVE' ? 'live' : 'hist'}`; },
     refreshAll() { Object.keys(this.state.charts).forEach(id => ChartLogic.plot(id)); },
 
     startLoop() {
@@ -1169,8 +963,7 @@ const ChartLogic = {
             endTime = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
         }
 
-        // Determine which variables are actually needed by the series formulas
-        const requiredVars = extractRequiredVars(cfg.series || []);
+        const requiredVars = extractRequiredVars(cfg.series ||[]);
 
         try {
             const res = await fetch('/api/fetch_series', {
@@ -1200,37 +993,25 @@ const ChartLogic = {
                 return;
             }
 
-            // Store data for breakdown table
             chart.lastData = data;
-
             const body = document.getElementById(`body-${id}`);
             if (body && !body.querySelector('canvas')) body.innerHTML = `<canvas id="canvas-${id}"></canvas>`;
             if (dot) dot.className = `status-dot ${App.state.mode === 'LIVE' ? 'live' : 'hist'}`;
 
-            const datasets = (cfg.series || []).map(s => {
+            const datasets = (cfg.series ||[]).map(s => {
                 const vals = data.labels.map((_, i) => {
                     const vars = {
-                        P:  safeVal(data, 'P',  i),
-                        B:  safeVal(data, 'B',  i),
-                        S:  safeVal(data, 'S',  i),
-                        CB: safeVal(data, 'CB', i),
-                        CS: safeVal(data, 'CS', i),
-                        PB: safeVal(data, 'PB', i),
-                        PS: safeVal(data, 'PS', i),
-                        V:  safeVal(data, 'V',  i),
-                        OI: safeVal(data, 'OI', i)
+                        P:  safeVal(data, 'P',  i), B:  safeVal(data, 'B',  i), S:  safeVal(data, 'S',  i),
+                        CB: safeVal(data, 'CB', i), CS: safeVal(data, 'CS', i),
+                        PB: safeVal(data, 'PB', i), PS: safeVal(data, 'PS', i),
+                        V:  safeVal(data, 'V',  i), OI: safeVal(data, 'OI', i)
                     };
                     return evalFormula(s.formula, vars);
                 });
 
                 const ds = {
-                    label: s.label,
-                    data: vals,
-                    borderWidth: 1.5,
-                    pointRadius: 0,
-                    hitRadius: 10,
-                    tension: 0.1,
-                    yAxisID: s.axis === 'left' ? 'y' : 'y1'
+                    label: s.label, data: vals, borderWidth: 1.5, pointRadius: 0,
+                    hitRadius: 10, tension: 0.1, yAxisID: s.axis === 'left' ? 'y' : 'y1'
                 };
 
                 if (s.cond && s.cond !== 'none') {
@@ -1239,24 +1020,18 @@ const ChartLogic = {
                     const cFalse = s.color2 || '#da3633';
                     const condFn = (v) => s.cond === '>' ? v > thresh : v < thresh;
 
-                    ds.segment = {
-                        borderColor: ctx => condFn(ctx.p1.parsed.y) ? cTrue : cFalse
-                    };
-                    ds.borderColor = cTrue;
-                    ds.backgroundColor = cTrue;
+                    ds.segment = { borderColor: ctx => condFn(ctx.p1.parsed.y) ? cTrue : cFalse };
+                    ds.borderColor = cTrue; ds.backgroundColor = cTrue;
                     ds.pointHoverBackgroundColor = ctx => condFn(ctx.raw) ? cTrue : cFalse;
                     ds.pointHoverBorderColor = ctx => condFn(ctx.raw) ? cTrue : cFalse;
                 } else {
-                    ds.borderColor = s.color1 || '#2f81f7';
-                    ds.backgroundColor = s.color1 || '#2f81f7';
-                    ds.pointHoverBackgroundColor = s.color1 || '#2f81f7';
-                    ds.pointHoverBorderColor = s.color1 || '#2f81f7';
+                    ds.borderColor = s.color1 || '#2f81f7'; ds.backgroundColor = s.color1 || '#2f81f7';
+                    ds.pointHoverBackgroundColor = s.color1 || '#2f81f7'; ds.pointHoverBorderColor = s.color1 || '#2f81f7';
                 }
-
                 return ds;
             });
 
-            this.render(id, data.labels, datasets, cfg.series || []);
+            this.render(id, data.labels, datasets, cfg.series ||[]);
 
         } catch(e) { console.error('ChartLogic.plot error:', e); }
     },
@@ -1264,12 +1039,10 @@ const ChartLogic = {
     render(id, labels, datasets, seriesConfig) {
         const ctx = document.getElementById(`canvas-${id}`);
         if (!ctx) return;
-
         const chart = App.state.charts[id];
 
         if (chart.instance && chart.instance.ctx?.canvas !== ctx) {
-            chart.instance.destroy();
-            chart.instance = null;
+            chart.instance.destroy(); chart.instance = null;
         }
 
         if (chart.instance) {
@@ -1279,8 +1052,7 @@ const ChartLogic = {
         } else {
             const hasRight = datasets.some(d => d.yAxisID === 'y1');
             chart.instance = new Chart(ctx.getContext('2d'), {
-                type: 'line',
-                data: { labels, datasets },
+                type: 'line', data: { labels, datasets },
                 options: {
                     responsive: true, maintainAspectRatio: false, animation: false,
                     interaction: { mode: 'index', intersect: false },
@@ -1289,8 +1061,7 @@ const ChartLogic = {
                         tooltip: {
                             backgroundColor: 'rgba(22,27,34,0.97)',
                             titleColor: '#e6edf3', bodyColor: '#8b949e',
-                            borderColor: '#30363d', borderWidth: 1,
-                            padding: 10,
+                            borderColor: '#30363d', borderWidth: 1, padding: 10,
                             callbacks: {
                                 label: function(context) {
                                     const s = seriesConfig[context.datasetIndex];
@@ -1313,8 +1084,7 @@ const ChartLogic = {
                                     if (s.cond && s.cond !== 'none') {
                                         const thresh = parseFloat(s.thresh) || 0;
                                         const v = context.parsed.y;
-                                        const isTrue = s.cond === '>' ? v > thresh : v < thresh;
-                                        c = isTrue ? (s.color1 || '#238636') : (s.color2 || '#da3633');
+                                        c = (s.cond === '>' ? v > thresh : v < thresh) ? (s.color1 || '#238636') : (s.color2 || '#da3633');
                                     }
                                     return { borderColor: c, backgroundColor: c };
                                 }
@@ -1322,20 +1092,9 @@ const ChartLogic = {
                         }
                     },
                     scales: {
-                        x: {
-                            grid: { color: '#30363d', tickLength: 0 },
-                            ticks: { color: '#8b949e', maxTicksLimit: 8, font: { size: 10 } }
-                        },
-                        y: {
-                            type: 'linear', display: true, position: 'left',
-                            grid: { color: '#30363d' },
-                            ticks: { color: '#8b949e', font: { size: 10 } }
-                        },
-                        y1: {
-                            type: 'linear', display: hasRight, position: 'right',
-                            grid: { display: false },
-                            ticks: { color: '#8b949e', font: { size: 10 } }
-                        }
+                        x: { grid: { color: '#30363d', tickLength: 0 }, ticks: { color: '#8b949e', maxTicksLimit: 8, font: { size: 10 } } },
+                        y: { type: 'linear', display: true, position: 'left', grid: { color: '#30363d' }, ticks: { color: '#8b949e', font: { size: 10 } } },
+                        y1: { type: 'linear', display: hasRight, position: 'right', grid: { display: false }, ticks: { color: '#8b949e', font: { size: 10 } } }
                     }
                 }
             });
@@ -1344,21 +1103,9 @@ const ChartLogic = {
 };
 
 // ===================================================
-// BREAKDOWN TABLE
+// BREAKDOWN TABLE WITH SUB-TABLES
 // ===================================================
 const Breakdown = {
-    currentTab: 'summary',
-
-    showTab(tab) {
-        this.currentTab = tab;
-        document.getElementById('tabSummary').classList.toggle('primary', tab === 'summary');
-        document.getElementById('tabStrikes').classList.toggle('primary', tab === 'strikes');
-        document.getElementById('tabSummary').classList.toggle('', tab !== 'summary');
-        document.getElementById('tabStrikes').classList.toggle('', tab !== 'strikes');
-        document.getElementById('bdSummaryTab').style.display = tab === 'summary' ? 'block' : 'none';
-        document.getElementById('bdStrikesTab').style.display = tab === 'strikes' ? 'block' : 'none';
-    },
-
     open(id) {
         const chart = App.state.charts[id];
         if (!chart || !chart.lastData || !chart.config.series) {
@@ -1369,53 +1116,46 @@ const Breakdown = {
         const data = chart.lastData;
         const cfg = chart.config;
         const series = cfg.series;
-        const isAdvanced = cfg.chartMode === 'advanced';
-
-        // Reset to summary tab
-        this.showTab('summary');
+        
+        // Check if breakdown JSON is present and populated
+        const hasBreakdown = data.breakdown && data.breakdown.some(b => b && b.length > 0);
 
-        // Determine which raw variables to show in table
-        const allVarKeys = ['P', 'CB', 'CS', 'PB', 'PS', 'B', 'S', 'V', 'OI'];
-        const presentVars = allVarKeys.filter(k =>
-            data[k] && data[k].some(v => v && v !== 0)
-        );
+        const allVarKeys =['P', 'CB', 'CS', 'PB', 'PS', 'B', 'S', 'V', 'OI'];
+        const presentVars = allVarKeys.filter(k => data[k] && data[k].some(v => v && v !== 0));
 
-        // Build header
+        // Header
         let thead = '<thead><tr><th>Time</th>';
-        if (isAdvanced && data.atm_strike) {
-            thead += '<th>ATM</th>';
-        }
+        if (hasBreakdown) thead += '<th style="text-align:center;">Details</th>';
         presentVars.forEach(v => { thead += `<th>${v}</th>`; });
         series.forEach(s => { thead += `<th>${s.label}</th>`; });
         thead += '</tr></thead>';
 
-        // Build rows
+        // Body
         let tbody = '<tbody>';
         data.labels.forEach((lbl, i) => {
             const vars = {
-                P:  safeVal(data, 'P',  i), B:  safeVal(data, 'B',  i),
-                S:  safeVal(data, 'S',  i), CB: safeVal(data, 'CB', i),
-                CS: safeVal(data, 'CS', i), PB: safeVal(data, 'PB', i),
-                PS: safeVal(data, 'PS', i), V:  safeVal(data, 'V',  i),
-                OI: safeVal(data, 'OI', i)
+                P:  safeVal(data, 'P',  i), B:  safeVal(data, 'B',  i), S:  safeVal(data, 'S',  i),
+                CB: safeVal(data, 'CB', i), CS: safeVal(data, 'CS', i), PB: safeVal(data, 'PB', i),
+                PS: safeVal(data, 'PS', i), V:  safeVal(data, 'V',  i), OI: safeVal(data, 'OI', i)
             };
 
             tbody += `<tr><td>${lbl}</td>`;
-
-            // Add ATM strike column for advanced mode
-            if (isAdvanced && data.atm_strike) {
-                const atm = data.atm_strike[i] || 0;
-                tbody += `<td style="color:var(--warning); font-weight:700;">${atm.toFixed(0)}</td>`;
+            
+            if (hasBreakdown) {
+                const bdArr = data.breakdown[i] ||[];
+                if (bdArr.length > 0) {
+                    tbody += `<td style="text-align:center;"><button class="tool-btn tool-btn-small" onclick="Breakdown.toggleSubRow('${id}', ${i})">▼ Strikes</button></td>`;
+                } else {
+                    tbody += `<td></td>`;
+                }
             }
 
-            // Raw variable values
             presentVars.forEach(k => {
                 const v = vars[k];
                 const cls = v > 0 ? 'val-pos' : (v < 0 ? 'val-neg' : '');
                 tbody += `<td class="${cls}">${v.toFixed(2)}</td>`;
             });
 
-            // Calculated formula values
             series.forEach(s => {
                 const result = evalFormula(s.formula, vars);
                 const rv = result !== null ? result : 0;
@@ -1430,151 +1170,62 @@ const Breakdown = {
                 }
                 tbody += `<td class="${cls}">${rv.toFixed(2)}${condLabel}</td>`;
             });
-
             tbody += '</tr>';
+
+            // Insert hidden Sub-Table if breakdown exists
+            if (hasBreakdown && (data.breakdown[i] || []).length > 0) {
+                const bd = data.breakdown[i];
+                const strikes = {};
+                bd.forEach(item => {
+                    if (!strikes[item.strike]) strikes[item.strike] = { CE_B: 0, CE_S: 0, PE_B: 0, PE_S: 0 };
+                    if (item.type === 'CE') { strikes[item.strike].CE_B = item.b; strikes[item.strike].CE_S = item.s; }
+                    if (item.type === 'PE') { strikes[item.strike].PE_B = item.b; strikes[item.strike].PE_S = item.s; }
+                });
+
+                // Find closest strike to Spot Price
+                const spotPrice = vars.P;
+                let closestStrike = null;
+                let minDiff = Infinity;
+                Object.keys(strikes).forEach(k => {
+                    const diff = Math.abs(parseFloat(k) - spotPrice);
+                    if (diff < minDiff) { minDiff = diff; closestStrike = k; }
+                });
+
+                let subHtml = `<div style="padding:4px 10px 14px 10px;">
+                    <div style="font-size:10px; color:var(--text-secondary); margin-bottom:4px;">STRIKES SELECTED FOR ${lbl} (Spot: ${spotPrice})</div>
+                    <table class="sub-table" style="width:100%;">
+                    <tr><th style="text-align:left;">Strike</th><th style="text-align:right;">CE Buy</th><th style="text-align:right;">CE Sell</th><th style="text-align:right;">PE Buy</th><th style="text-align:right;">PE Sell</th></tr>`;
+
+                Object.keys(strikes).sort((a,b)=>a-b).forEach(k => {
+                    const isAtm = (k === closestStrike);
+                    const rowCls = isAtm ? 'atm-row' : '';
+                    subHtml += `<tr class="${rowCls}">
+                        <td style="text-align:left; font-weight:bold; color:var(--text-primary);">${k} ${isAtm ? '<span style="font-size:9px; color:var(--accent); margin-left:4px;">(ATM)</span>' : ''}</td>
+                        <td class="val-pos" style="text-align:right;">${strikes[k].CE_B.toFixed(2)}</td>
+                        <td class="val-neg" style="text-align:right;">${strikes[k].CE_S.toFixed(2)}</td>
+                        <td class="val-pos" style="text-align:right;">${strikes[k].PE_B.toFixed(2)}</td>
+                        <td class="val-neg" style="text-align:right;">${strikes[k].PE_S.toFixed(2)}</td>
+                    </tr>`;
+                });
+                subHtml += `</table></div>`;
+
+                const colspan = 1 + 1 + presentVars.length + series.length;
+                tbody += `<tr id="subrow-${id}-${i}" style="display:none; background:var(--bg-header);"><td colspan="${colspan}" style="padding:0;">${subHtml}</td></tr>`;
+            }
         });
         tbody += '</tbody>';
 
-        document.getElementById('bdTitle').innerText = `Breakdown: ${cfg.root} ${cfg.expiry} — ${isAdvanced ? 'ATM ± ' + (cfg.atmRange || 5) : (cfg.instrument || '')}`;
+        document.getElementById('bdTitle').innerText = `Breakdown: ${cfg.root} ${cfg.expiry} — ${cfg.chartMode === 'advanced' ? '2N (±' + (cfg.atmRange || 5) + ')' : (cfg.instrument || '')}`;
         document.getElementById('bdMeta').innerText = `Timeframe: ${cfg.timeframe || '1min'} | Range: ${cfg.start} – ${cfg.end} | ${data.labels.length} bars`;
         document.getElementById('bdTable').innerHTML = thead + tbody;
-
-        // Build Strike Breakdown Tab (only for advanced mode with breakdown data)
-        if (isAdvanced && data.breakdown_per_minute) {
-            this.buildStrikeBreakdown(data, cfg);
-            document.getElementById('tabStrikes').style.display = 'inline-block';
-        } else {
-            document.getElementById('tabStrikes').style.display = 'none';
-        }
-
-        // Show range info if available
-        if (isAdvanced && data.atm_range_info) {
-            const info = data.atm_range_info;
-            document.getElementById('bdRangeInfo').innerHTML = `
-                <div class="range-info-box">
-                    <span class="label">ATM Strike:</span> <span class="value">${info.atm_strike || 'N/A'}</span> &nbsp;
-                    <span class="label">Spot Price:</span> <span class="value">${info.spot_price || 'N/A'}</span> &nbsp;
-                    <span class="label">Range:</span> <span class="value">±${info.atm_range || cfg.atmRange || 5}</span> &nbsp;
-                    <span class="label">Total Strikes:</span> <span class="value">${info.total_strikes_in_range || '2N'}</span>
-                </div>
-            `;
-            document.getElementById('bdRangeInfo').style.display = 'block';
-        } else {
-            document.getElementById('bdRangeInfo').style.display = 'none';
-        }
-
         document.getElementById('breakdownModal').style.display = 'flex';
     },
 
-    buildStrikeBreakdown(data, cfg) {
-        const breakdown = data.breakdown_per_minute;
-        if (!breakdown || !breakdown.length) {
-            document.getElementById('bdStrikesContent').innerHTML = '<div style="padding:20px; text-align:center; color:var(--text-secondary);">No strike breakdown data available</div>';
-            return;
+    toggleSubRow(chartId, index) {
+        const row = document.getElementById(`subrow-${chartId}-${index}`);
+        if (row) {
+            row.style.display = row.style.display === 'none' ? 'table-row' : 'none';
         }
-
-        let html = '';
-
-        breakdown.forEach((minuteData, idx) => {
-            const strikes = minuteData.strikes || [];
-            if (!strikes.length) return;
-
-            // Group strikes by strike price
-            const strikeGroups = {};
-            strikes.forEach(s => {
-                if (!strikeGroups[s.strike]) {
-                    strikeGroups[s.strike] = { strike: s.strike, ce: null, pe: null };
-                }
-                if (s.type === 'CE') strikeGroups[s.strike].ce = s;
-                else if (s.type === 'PE') strikeGroups[s.strike].pe = s;
-            });
-
-            const sortedStrikes = Object.values(strikeGroups).sort((a, b) => a.strike - b.strike);
-            const atmStrike = minuteData.atm_strike || 0;
-
-            html += `
-                <div class="minute-accordion">
-                    <div class="minute-header" onclick="Breakdown.toggleMinute(this)">
-                        <span style="font-weight:700; color:var(--accent);">${minuteData.time}</span>
-                        <span>ATM: <span style="color:var(--warning);">${atmStrike.toFixed(0)}</span></span>
-                        <span>CB: <span class="val-pos">${minuteData.cb.toFixed(0)}</span></span>
-                        <span>CS: <span class="val-neg">${minuteData.cs.toFixed(0)}</span></span>
-                        <span>PB: <span class="val-pos">${minuteData.pb.toFixed(0)}</span></span>
-                        <span>PS: <span class="val-neg">${minuteData.ps.toFixed(0)}</span></span>
-                    </div>
-                    <div class="minute-detail">
-                        <table class="strike-table">
-                            <thead>
-                                <tr>
-                                    <th>Strike</th>
-                                    <th colspan="4" style="text-align:center; background:rgba(47,129,247,0.2);">CALL (CE)</th>
-                                    <th colspan="4" style="text-align:center; background:rgba(218,54,51,0.2);">PUT (PE)</th>
-                                </tr>
-                                <tr>
-                                    <th></th>
-                                    <th style="background:rgba(47,129,247,0.1);">Buy</th>
-                                    <th style="background:rgba(47,129,247,0.1);">Sell</th>
-                                    <th style="background:rgba(47,129,247,0.1);">LTP</th>
-                                    <th style="background:rgba(47,129,247,0.1);">Status</th>
-                                    <th style="background:rgba(218,54,51,0.1);">Buy</th>
-                                    <th style="background:rgba(218,54,51,0.1);">Sell</th>
-                                    <th style="background:rgba(218,54,51,0.1);">LTP</th>
-                                    <th style="background:rgba(218,54,51,0.1);">Status</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-            `;
-
-            sortedStrikes.forEach(sg => {
-                const isAtm = Math.abs(sg.strike - atmStrike) < 1;
-                const rowClass = isAtm ? 'atm-strike' : '';
-
-                html += `<tr class="${rowClass}">`;
-                html += `<td style="font-weight:${isAtm ? '700' : '400'}; color:${isAtm ? 'var(--warning)' : 'var(--text-primary)'};">${sg.strike.toFixed(0)}</td>`;
-
-                // CE columns
-                if (sg.ce) {
-                    const ceItmClass = sg.ce.call_status === 'ITM' ? 'itm' : 'otm';
-                    html += `
-                        <td class="val-pos">${sg.ce.buy.toFixed(0)}</td>
-                        <td class="val-neg">${sg.ce.sell.toFixed(0)}</td>
-                        <td>${sg.ce.ltp.toFixed(2)}</td>
-                        <td class="${ceItmClass}">${sg.ce.call_status || '-'}</td>
-                    `;
-                } else {
-                    html += `<td>-</td><td>-</td><td>-</td><td>-</td>`;
-                }
-
-                // PE columns
-                if (sg.pe) {
-                    const peItmClass = sg.pe.put_status === 'ITM' ? 'itm' : 'otm';
-                    html += `
-                        <td class="val-pos">${sg.pe.buy.toFixed(0)}</td>
-                        <td class="val-neg">${sg.pe.sell.toFixed(0)}</td>
-                        <td>${sg.pe.ltp.toFixed(2)}</td>
-                        <td class="${peItmClass}">${sg.pe.put_status || '-'}</td>
-                    `;
-                } else {
-                    html += `<td>-</td><td>-</td><td>-</td><td>-</td>`;
-                }
-
-                html += '</tr>';
-            });
-
-            html += `
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            `;
-        });
-
-        document.getElementById('bdStrikesContent').innerHTML = html || '<div style="padding:20px; text-align:center; color:var(--text-secondary);">No strike breakdown data available</div>';
-    },
-
-    toggleMinute(header) {
-        const detail = header.nextElementSibling;
-        detail.classList.toggle('show');
     }
 };
 
@@ -1593,16 +1244,13 @@ const Config = {
         document.getElementById('lblInst').innerText = mode === 'normal' ? 'Instrument' : 'Reference Spot/Fut (ATM Ref Price)';
         document.getElementById('advInstHint').style.display = mode === 'advanced' ? 'block' : 'none';
         this.updatePresetsDropdown();
-        // Auto-load a relevant default preset when mode switches
         const defPreset = mode === 'advanced' ? 'Price & Flows (Advanced)' : 'Aggregated Flow (Options)';
         this.loadPreset(defPreset);
     },
-
     updatePresetsDropdown() {
         const sel = document.getElementById('cfgPresetsDropdown');
         sel.innerHTML = Object.keys(App.presets).map(k => `<option value="${k}">${k}</option>`).join('');
     },
-
     loadPreset(presetName = null) {
         const name = presetName || document.getElementById('cfgPresetsDropdown').value;
         if (name && App.presets[name]) {
@@ -1610,7 +1258,6 @@ const Config = {
             this.renderSeries(App.presets[name]);
         }
     },
-
     savePreset() {
         const name = prompt('Name for this model:', 'Custom Model');
         if (!name) return;
@@ -1619,10 +1266,9 @@ const Config = {
         this.updatePresetsDropdown();
         document.getElementById('cfgPresetsDropdown').value = name;
     },
-
     deletePreset() {
         const name = document.getElementById('cfgPresetsDropdown').value;
-        const locked = ['Basic Flow (Fut/Eq)', 'Net Flow (Fut/Eq)', 'Call Flow (Options)',
+        const locked =['Basic Flow (Fut/Eq)', 'Net Flow (Fut/Eq)', 'Call Flow (Options)',
                         'Put Flow (Options)', 'Aggregated Flow (Options)', 'Net Flow (Options)',
                         'Price & Flows (Advanced)', 'Net Flow (Advanced)', 'Components (Advanced)'];
         if (locked.includes(name)) return alert('Cannot delete default models.');
@@ -1688,7 +1334,6 @@ const Config = {
         document.getElementById('cfgRefresh').value = App.state.refreshRate || 15;
         this.updatePresetsDropdown();
     },
-
     close() { document.getElementById('configModal').style.display = 'none'; },
 
     async onRootChange(preExp, preInst) {
@@ -1771,16 +1416,13 @@ const Config = {
                 <input type="text" class="s-label-false" value="${s.labelFalse || ''}" placeholder="e.g. BEARISH" style="width:80px;">
             </div>
         `;
-        // Keep s-color1 in sync with the condition row color
         const solidColor = r.querySelector('.s-color1');
         const condTrueColor = r.querySelector('.s-color1-cond');
         solidColor.addEventListener('input', () => { if (condTrueColor) condTrueColor.value = solidColor.value; });
         container.appendChild(r);
     },
 
-    addSeriesRow() {
-        this._appendSeriesRow(document.getElementById('cfgSeries'));
-    },
+    addSeriesRow() { this._appendSeriesRow(document.getElementById('cfgSeries')); },
 
     extractSeriesFromDOM() {
         return Array.from(document.querySelectorAll('#cfgSeries .series-row')).map(r => {