// ==============================================================================
// SECTION 3: UNIFIED INTERACTIVE GRID ENGINE & MASTER MODAL DISPATCHER
// ==============================================================================
{
  const all_hist = transpose(ojs_hist).map(d => ({ ...d, date: new Date(d.date + "T12:00:00") }));
  const all_fcst = transpose(ojs_forecast).map(d => ({ ...d, date: new Date(d.date + "T12:00:00") }));
  const all_metrics = typeof ojs_metrics !== 'undefined' ? transpose(ojs_metrics) : [];
  
  const t_ago = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
  const t_fut = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);

  // Structural pricing calculator
  function getMedianAndCount(listings) {
      if(listings.length === 0) return { median: null, count: 0 };
      let max_date_str = listings.reduce((max, p) => p.date_pulled > max ? p.date_pulled : max, listings[0].date_pulled);
      let max_date_ms = new Date(max_date_str).getTime();
      let recent_listings = listings.filter(e => (max_date_ms - new Date(e.date_pulled).getTime()) <= (7 * 24 * 60 * 60 * 1000));
      let unique_ids = new Set(recent_listings.map(e => e.item_id));
      let count = unique_ids.size;
      let prices = recent_listings.map(e => e.clean_price).sort((a,b) => a - b);
      if (prices.length === 0) return { median: null, count: 0 };
      if (prices.length < 4) {
         let mid = Math.floor(prices.length/2);
         return { median: prices.length % 2 !== 0 ? prices[mid] : (prices[mid-1] + prices[mid])/2, count: count };
      }
      let q1 = prices[Math.floor(prices.length * 0.25)], q3 = prices[Math.floor(prices.length * 0.75)];
      let filtered = prices.filter(p => p >= q1 && p <= q3);
      if(filtered.length === 0) return { median: null, count: count };
      let mid = Math.floor(filtered.length/2);
      return { median: filtered.length % 2 !== 0 ? filtered[mid] : (filtered[mid-1] + filtered[mid])/2, count: count };
  }

  // Construct Primary Master Core table rows data mapping
  let unified_data = transpose(ojs_info).map(d => {
    const c_fcst = all_fcst.filter(f => f.cardname === d.cardname);
    const cur_price = d.current_price || 0;
    const live_c = c_fcst.filter(f => f.model === "Chronos").sort((a,b)=>a.date-b.date);
    const live_g = c_fcst.filter(f => f.model === "GRU").sort((a,b)=>a.date-b.date);
    const c_pred = live_c.length > 0 ? live_c[live_c.length - 1].price : null;
    const g_pred = live_g.length > 0 ? live_g[live_g.length - 1].price : null;
    const c_pct = (c_pred !== null && cur_price > 0) ? ((c_pred - cur_price) / cur_price) * 100 : null;
    const g_pct = (g_pred !== null && cur_price > 0) ? ((g_pred - cur_price) / cur_price) * 100 : null;
    
    const card_metrics = all_metrics.filter(m => m.tcgplayer_id === d.tcgplayer_id && m.horizon === 30);
    const c_err = card_metrics.find(m => m.model === "Chronos");
    const g_err = card_metrics.find(m => m.model === "GRU");

    let card_ebay_raw = clean_ebay_master.filter(e => e.cardname === d.cardname && e.label === "Ungraded");
    let raw_stats = getMedianAndCount(card_ebay_raw);
    let psa_stats = getMedianAndCount(clean_ebay_master.filter(e => e.cardname === d.cardname && e.label === "PSA 10"));
    let delta = (raw_stats.median !== null && d.current_price) ? Math.abs(raw_stats.median - d.current_price) : null;
    
    return {
      ...d, c_pred_30d: c_pred, c_pct_30d: c_pct, g_pred_30d: g_pred, g_pct_30d: g_pct,
      c_err_30d: c_err ? c_err.mdape * 100 : null, g_err_30d: g_err ? g_err.mdape * 100 : null,
      recent_ebay_med: raw_stats.median, totalCount: raw_stats.count, psa_10_med: psa_stats.median, delta: delta
    };
  });

  // Inject Master Modal to body
  let existingModal = document.getElementById('unified-master-modal');
  if(existingModal) existingModal.remove();

  const initialModal = document.createElement("div");
  initialModal.id = "unified-master-modal";
  initialModal.className = "modal-overlay";
  initialModal.innerHTML = `
    <div class="modal-content">
      <span class="close-btn" onclick="document.getElementById('unified-master-modal').style.display='none'">&times;</span>
      <div id="modal-header" style="margin-bottom: 20px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 15px;"></div>
      
      <div class="modal-top-grid">
         <div class="modal-panel">
            <h4 class="panel-title">Price Forecast & Market Context</h4>
            <div id="modal-graph-target" class="modal-graph-main"></div>
         </div>
         <div class="modal-panel">
            <h4 class="panel-title">Model Diagnostics (30D Error)</h4>
            <div style="font-size: 11px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4;">
               Lower bars = Higher Accuracy. Shaded background represents Naive Market Baseline (Guessing 0% change).
            </div>
            <div id="modal-error-target" class="modal-graph-err"></div>
         </div>
      </div>

      <div class="modal-panel" style="margin-top: 10px;">
         <h4 class="panel-title">eBay Inventory Explorer</h4>
         <div class="modal-controls-grid" id="modal-filter-anchor"></div>
         <div id="ebay-modal-bin-target" class="modal-graph-ebay"></div>
         <div id="ebay-modal-listings-target" style="width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding-top: 15px; border-top: 1px solid var(--border-subtle);"></div>
      </div>
    </div>
  `;
  document.body.appendChild(initialModal);
  initialModal.addEventListener("click", (e) => { if (e.target === initialModal) initialModal.style.display = "none"; });

  const page_wrapper = document.createElement("div");
  page_wrapper.style.width = "100%"; page_wrapper.style.display = "flex"; page_wrapper.style.flexDirection = "column";

  const banner = document.createElement("div");
  banner.className = "momentum-box"; banner.style.marginTop = "20px";
  banner.innerHTML = "<strong>Unified Market Explorer</strong><p style='font-size: 14px; color: var(--text-muted); margin-top:5px; margin-bottom:0;'>Click any row below to open the complete deep dive containing forecasts, eBay volumes, and listings.</p>";
  page_wrapper.appendChild(banner);

  const filter_bar = document.createElement("div");
  filter_bar.style.cssText = "display: flex; gap: 15px; margin-bottom: 20px; background: var(--bg-card); padding: 15px; border-radius: 12px; border: 1px solid var(--border-subtle); align-items: center; flex-wrap: wrap;";
  
  const search_input = document.createElement("input");
  search_input.type = "text"; search_input.placeholder = "🔍 Search by name...";
  search_input.style.cssText = "flex: 1; min-width: 180px; padding: 10px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-main); font-size: 14px; font-family: Inter;";
  
  const set_select = document.createElement("select"); 
  set_select.style.cssText = "padding: 10px; border-radius: 8px; border: 1px solid var(--border-subtle); background: var(--bg-base); color: var(--text-main); font-size: 14px; cursor: pointer; font-family: Inter; min-width: 150px;";
  const u_sets = ["All Sets", ...new Set(unified_data.map(d => d.set_name).filter(Boolean))].sort();
  u_sets.forEach(r => { let opt = document.createElement("option"); opt.value = r; opt.text = r; set_select.appendChild(opt); });

  filter_bar.appendChild(search_input); filter_bar.appendChild(set_select);
  page_wrapper.appendChild(filter_bar);

  const container = document.createElement("div");
  container.style.cssText = "max-height: 800px; overflow-y: auto; overflow-x: hidden; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-subtle); width: 100%; flex: 1;";
  page_wrapper.appendChild(container);

  let current_sort = "current_price"; let is_asc = false;

  const formatPct = (val, price) => {
    if (val === null || val === undefined) return '<span style="color:var(--text-muted);">N/A</span>';
    const color = val >= 0 ? 'var(--accent-green)' : 'var(--accent-red)';
    const sign = val >= 0 ? '+' : '';
    return `<span style="color:${color}; font-weight:700;">${sign}${val.toFixed(1)}%</span> <span style="color:var(--text-muted); font-size:12px; font-weight:400; margin-left:4px;">($${price.toFixed(2)})</span>`;
  };
  const formatErr = (val) => val !== null && val !== undefined ? `<span style="color:var(--accent-blue); font-weight:600;">±${val.toFixed(1)}%</span>` : '<span style="color:var(--text-muted);">N/A</span>';

  function renderTable() {
    const q = search_input.value.toLowerCase(); const r = set_select.value;
    let filtered_data = unified_data.filter(d => d.cardname.toLowerCase().includes(q) && (r === "All Sets" || d.set_name === r));
    let sorted_data = filtered_data.sort((a, b) => {
      let valA = a[current_sort] !== null && a[current_sort] !== undefined ? a[current_sort] : -9999;
      let valB = b[current_sort] !== null && b[current_sort] !== undefined ? b[current_sort] : -9999;
      if (typeof valA === "string") return is_asc ? valA.localeCompare(valB) : valB.localeCompare(valA);
      return is_asc ? valA - valB : valB - valA;
    });

    const th = (key, label, cls="") => {
      let arrow = current_sort === key ? (is_asc ? " ↑" : " ↓") : "";
      return `<th class="${cls}" style="cursor:pointer;" onclick="this.dispatchEvent(new CustomEvent('do_sort', {detail:'${key}', bubbles:true}))">${label}${arrow}</th>`;
    };

    container.innerHTML = `
      <div class="table-responsive-wrapper">
        <table class="hover-table" style="width: 100%; min-width: 900px;">
          <thead>
            <tr>
              ${th('cardname', 'Card Identifier', 'sticky-card-col')}
              ${th('c_pct_30d', 'Chronos (30D)')}
              ${th('g_pct_30d', 'GRU (30D)')}
              ${th('delta', 'Market Spread', 'hide-on-mobile')}
              ${th('totalCount', 'eBay 7D Vol', 'hide-on-mobile')}
              ${th('psa_10_med', 'PSA 10 (7D)', 'hide-on-mobile')}
              ${th('c_err_30d', 'Chronos Acc', 'hide-on-mobile')}
            </tr>
          </thead>
          <tbody>
            ${sorted_data.map(d => {
              let escaped_name = d.cardname.replace(/"/g, '&quot;');
              let t_price = d.current_price ? `$${d.current_price.toFixed(2)}` : 'N/A';
              let e_price = d.recent_ebay_med ? `$${d.recent_ebay_med.toFixed(2)}` : 'N/A';
              let psa_txt = d.psa_10_med ? `$${d.psa_10_med.toFixed(2)}` : '<span style="color:var(--text-muted)">N/A</span>';
              let diff_txt = d.delta !== null ? `<span style="color:var(--accent-purple); font-weight:700;">$${d.delta.toFixed(2)}</span>` : '<span style="color:var(--text-muted)">N/A</span>';
              
              return `
              <tr class="card-row" data-cardname="${escaped_name}">
                <td class="sticky-card-col">
                  <div class="card-id-wrapper">
                    <img src="${d.image_path}" style="width: 50px; flex-shrink: 0; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.5);">
                    <div class="card-text-col">
                       <span class="card-name-text">${d.cardname}</span>
                       <div style="font-size: 11px; white-space: normal; line-height: 1.3;">
                          <span style="color:var(--text-muted);">TCG:</span> <span style="color:var(--accent-yellow); font-weight:700;">${t_price}</span> |
                          <span style="color:var(--text-muted);">eBay Ungraded:</span> <span style="color:var(--accent-blue); font-weight:700;">${e_price}</span>
                       </div>
                    </div>
                  </div>
                </td>
                <td>${formatPct(d.c_pct_30d, d.c_pred_30d)}</td><td>${formatPct(d.g_pct_30d, d.g_pred_30d)}</td>
                <td class="hide-on-mobile">${diff_txt}</td>
                <td class="hide-on-mobile"><span style="background: var(--bg-base); padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border-subtle); color: var(--accent-cyan); font-weight: 700;">${d.totalCount}</span></td>
                <td class="hide-on-mobile">${psa_txt}</td>
                <td class="hide-on-mobile">${formatErr(d.c_err_30d)}</td>
              </tr>
              `;
            }).join('')}
          </tbody>
        </table>
      </div>
    `;
  }

  search_input.addEventListener("input", renderTable);
  set_select.addEventListener("change", renderTable);
  container.addEventListener("do_sort", (e) => {
    if(current_sort === e.detail) { is_asc = !is_asc; } else { current_sort = e.detail; is_asc = current_sort === 'cardname'; }
    renderTable();
  });

  // ====== MASTER MODAL CLICK INTERACTION ENGINE ======
  container.addEventListener("click", (e) => {
    const tr = e.target.closest("tr.card-row");
    if(!tr) return;

    const isMobile = window.innerWidth <= 768;
    const cardname = tr.dataset.cardname;
    const card_info = unified_data.find(d => d.cardname === cardname);
    
    // FIX: Extract historical arrays immediately at opening execution so they are fully initialized before lookup math routines execute!
    const c_hist = all_hist.filter(d => d.cardname === cardname && d.date >= t_ago && d.date <= t_fut).sort((a,b)=>a.date-b.date);
    const c_fcst = all_fcst.filter(d => d.cardname === cardname && d.date >= t_ago && d.date <= t_fut).sort((a,b)=>a.date-b.date);
    const live_c = c_fcst.filter(d => d.model === "Chronos");
    const live_g = c_fcst.filter(d => d.model === "GRU");

    // Calculate TCGplayer rolling 30D baseline shift values
    let tcg_pct_30d = null;
    if (c_hist.length > 0 && card_info.current_price) {
      const current_tcg = card_info.current_price;
      const latest_date_ms = c_hist[c_hist.length - 1].date.getTime();
      const target_past_ms = latest_date_ms - (30 * 24 * 60 * 60 * 1000);
      let closest_past_record = c_hist.reduce((closest, curr) => {
        return Math.abs(curr.date.getTime() - target_past_ms) < Math.abs(closest.date.getTime() - target_past_ms) ? curr : closest;
      });
      if (closest_past_record && Math.abs(closest_past_record.date.getTime() - target_past_ms) < (4 * 24 * 60 * 60 * 1000)) {
        tcg_pct_30d = ((current_tcg - closest_past_record.price) / closest_past_record.price) * 100;
      }
    }

    // Calculate historical rolling 30D eBay data splits
    let masterCardListings = clean_ebay_master.filter(d => d.cardname === cardname);
    let raw_dates = masterCardListings.map(d => new Date(d.date_pulled + "T12:00:00").getTime());
    let cur_eb_ungraded = card_info.recent_ebay_med;
    let cur_eb_psa10 = card_info.psa_10_med;
    let eb_ung_pct = null, eb_psa_pct = null;

    if (raw_dates.length > 0) {
      const current_end = Math.max(...raw_dates);
      const past_end = current_end - (30 * 24 * 60 * 60 * 1000);
      
      function get7DayMedianAtTime(listings, end_timestamp) {
         const start_timestamp = end_timestamp - (7 * 24 * 60 * 60 * 1000);
         let window_listings = listings.filter(e => {
            const d_ms = new Date(e.date_pulled + "T12:00:00").getTime();
            return d_ms >= start_timestamp && d_ms <= end_timestamp;
         });
         let prices = window_listings.map(e => e.clean_price).sort((a,b) => a - b);
         if (prices.length === 0) return null;
         if (prices.length < 4) return prices[Math.floor(prices.length/2)];
         let q1 = prices[Math.floor(prices.length * 0.25)], q3 = prices[Math.floor(prices.length * 0.75)];
         let filtered = prices.filter(p => p >= q1 && p <= q3);
         return filtered.length > 0 ? filtered[Math.floor(filtered.length/2)] : prices[Math.floor(prices.length/2)];
      }
      
      const past_eb_ungraded = get7DayMedianAtTime(masterCardListings.filter(d => d.label === "Ungraded"), past_end);
      const past_eb_psa10 = get7DayMedianAtTime(masterCardListings.filter(d => d.label === "PSA 10"), past_end);
      
      if (cur_eb_ungraded && past_eb_ungraded) eb_ung_pct = ((cur_eb_ungraded - past_eb_ungraded) / past_eb_ungraded) * 100;
      if (cur_eb_psa10 && past_eb_psa10) eb_psa_pct = ((cur_eb_psa10 - past_eb_psa10) / past_eb_psa10) * 100;
    }

    const formatHeaderIndicator = (pct) => {
       if (pct === null || pct === undefined || isNaN(pct)) return '<span style="font-size:11px; color:var(--text-muted); font-weight:400; margin-left:4px;">(--)</span>';
       const color = pct >= 0 ? 'var(--accent-green)' : 'var(--accent-red)';
       const sign = pct >= 0 ? '▲ +' : '▼ ';
       return `<span style="font-size:11px; color:${color}; font-weight:700; margin-left:4px;">${sign}${pct.toFixed(1)}%</span>`;
    };

    const t_p = card_info.current_price ? `$${card_info.current_price.toFixed(2)}` : 'N/A';
    const e_p = cur_eb_ungraded ? `$${cur_eb_ungraded.toFixed(2)}` : 'N/A';
    const p_p = cur_eb_psa10 ? `$${cur_eb_psa10.toFixed(2)}` : 'N/A';

    // Inject Summary Metrics Header UI Elements Natively
    document.getElementById('modal-header').innerHTML = `
      <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
        <div style="display: flex; align-items: center; gap: 20px; flex-wrap: wrap; width: 100%;">
          <img src="${card_info.image_path}" style="height: 140px; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5);">
          <div style="flex: 1; min-width: 280px;">
            <div style="font-size: 22px; font-weight: 800; color: var(--text-main); margin-bottom: 2px;">${cardname}</div>
            <div style="font-size: 13px; color: var(--text-muted); margin-bottom: 12px;">Set: <span style="color:var(--text-main);">${card_info.set_name}</span> | Rarity: <span style="color:var(--accent-cyan);">${card_info.rarity}</span></div>
            
            <div class="modal-metrics-summary-row">
               <div class="modal-metric-card">
                  <div class="modal-metric-card-label">TCG Market</div>
                  <div class="modal-metric-card-value"><span style="color:var(--accent-yellow);">${t_p}</span>${formatHeaderIndicator(tcg_pct_30d)}</div>
               </div>
               <div class="modal-metric-card">
                  <div class="modal-metric-card-label">eBay Ungraded (7D)</div>
                  <div class="modal-metric-card-value"><span style="color:var(--accent-blue);">${e_p}</span>${formatHeaderIndicator(eb_ung_pct)}</div>
               </div>
               <div class="modal-metric-card">
                  <div class="modal-metric-card-label">PSA 10 Median (7D)</div>
                  <div class="modal-metric-card-value"><span style="color:var(--text-main);">${p_p}</span>${formatHeaderIndicator(eb_psa_pct)}</div>
               </div>
            </div>
          </div>
        </div>
      </div>
    `;

    const trace_hist = { x: c_hist.map(d => d.date), y: c_hist.map(d => d.price), mode: 'lines', name: 'TCGplayer', line: {color: '#f8fafc', width: 3}, hovertemplate: 'TCG: $%{y:.2f}<extra></extra>' };
    const trace_c = { x: live_c.map(d => d.date), y: live_c.map(d => d.price), mode: 'lines', name: 'Chronos', line: {color: '#fbbf24', width: 3, dash: 'dash'}, hovertemplate: 'Chronos: $%{y:.2f}<extra></extra>' };
    const trace_g = { x: live_g.map(d => d.date), y: live_g.map(d => d.price), mode: 'lines', name: 'GRU', line: {color: '#22d3ee', width: 3, dash: 'dash'}, hovertemplate: 'GRU: $%{y:.2f}<extra></extra>' };
    
    // Extract inline historical trendlines for main composite plot
    let raw_ungraded = masterCardListings.filter(d => d.label === "Ungraded");
    let grouped = {};
    raw_ungraded.forEach(d => { if(!grouped[d.date_pulled]) grouped[d.date_pulled] = []; grouped[d.date_pulled].push(d.clean_price); });
    let eb_dates = Object.keys(grouped).sort();
    let eb_meds = eb_dates.map(date => {
       let prices = grouped[date].sort((a,b)=>a-b);
       return prices.length % 2 !== 0 ? prices[Math.floor(prices.length/2)] : (prices[prices.length/2 - 1] + prices[prices.length/2])/2;
    });
    let eb_vols = eb_dates.map(date => grouped[date].length);

    const trace_ebay_med = { x: eb_dates, y: eb_meds, mode: 'lines+markers', name: 'eBay Median', line: {color: '#c084fc', width: 2}, marker: {size: 6}, hovertemplate: 'eBay Med: $%{y:.2f}<extra></extra>' };
    const trace_ebay_vol = { x: eb_dates, y: eb_vols, type: 'bar', name: 'eBay Vol', yaxis: 'y2', opacity: 0.15, marker: {color: '#c084fc'}, hovertemplate: 'Vol: %{y}<extra></extra>', showlegend: false };

    const all_traces = [trace_ebay_vol, trace_hist, trace_ebay_med, trace_c, trace_g];

    const layout_graph = {
      dragmode: false, paper_bgcolor: 'transparent', plot_bgcolor: 'transparent', font: { color: '#f8fafc', family: 'Inter', size: isMobile ? 9 : 12 },
      xaxis: { title: '', gridcolor: '#334155', linecolor: '#334155', hoverformat: '%b %d', fixedrange: true, tickfont: {size: isMobile ? 9 : 12} },
      yaxis: { title: {text: isMobile ? '' : 'Price ($)', font: {size: isMobile ? 10 : 13}}, gridcolor: '#334155', tickprefix: '$', rangemode: 'tozero', fixedrange: true, tickfont: {size: isMobile ? 9 : 12} },
      yaxis2: { title: '', overlaying: 'y', side: 'right', showgrid: false, fixedrange: true, tickfont: {size: isMobile ? 9 : 12} },
      margin: { l: 50, r: 40, t: 20, b: 80 },
      hovermode: 'x unified',
      hoverlabel: { bgcolor: '#0f172a', bordercolor: '#475569', font: { color: '#f8fafc', size: isMobile ? 11 : 14 } },
      legend: { orientation: 'h', y: isMobile ? -0.3 : 1.15, x: 0.5, xanchor: 'center', font: {size: isMobile ? 9 : 12}, itemwidth: 30 }
    };

    // Error Diagnostics Chart
    const metrics_data = all_metrics.filter(d => d.tcgplayer_id === card_info.tcgplayer_id);
    let err_c = metrics_data.filter(d => d.model === "Chronos").sort((a,b)=>a.horizon - b.horizon);
    let err_g = metrics_data.filter(d => d.model === "GRU").sort((a,b)=>a.horizon - b.horizon);
    
    const trace_base = err_c.length > 0 ? { x: err_c.map(d => d.horizon), y: err_c.map(d => d.naive_mdape), type: 'scatter', mode: 'none', fill: 'tozeroy', fillcolor: 'rgba(255, 255, 255, 0.15)', name: 'Naive Baseline', hovertemplate: 'Baseline: %{y:.1%}<extra></extra>' } : null;
    const trace_err_c = { x: err_c.map(d => d.horizon), y: err_c.map(d => d.mdape), type: 'bar', name: 'Chronos Err', marker: {color: '#fbbf24'} };
    const trace_err_g = { x: err_g.map(d => d.horizon), y: err_g.map(d => d.mdape), type: 'bar', name: 'GRU Err', marker: {color: '#22d3ee'} };

    const layout_err = { 
      dragmode: false, paper_bgcolor: 'transparent', plot_bgcolor: 'transparent', font: {color: '#f8fafc', family:'Inter', size: isMobile ? 9 : 12}, 
      xaxis: {title: {text:'Days (Horizon)', font:{size: isMobile ? 10 : 14}}, gridcolor: '#334155', fixedrange: true, tickfont: {size: isMobile ? 9 : 12}}, 
      yaxis: {title: {text: isMobile ? '' : 'MdAPE Error', font:{size: isMobile ? 10 : 14}}, gridcolor: '#334155', tickformat: '.0%', fixedrange: true, tickfont: {size: isMobile ? 9 : 12}}, 
      margin: {l: isMobile ? 35 : 50, r: isMobile ? 15 : 20, t: isMobile ? 10 : 10, b: isMobile ? 70 : 40}, barmode: 'group', showlegend: true, 
      legend: {orientation: 'h', y: isMobile ? -0.3 : 1.15, x: 0.5, xanchor: 'center', font: {size: isMobile ? 9 : 12}, itemwidth: 30}
    };

    // Extract dynamic dropdown criteria unique to specific selected card
    let modalLanguages = ["All", ...new Set(masterCardListings.map(d => d.card_language))].sort();
    let modalCompanies = ["All", ...new Set(masterCardListings.map(d => d.grading_company))].sort();

    // Re-inject updated inline input form handles
    const filterAnchor = document.getElementById('modal-filter-anchor');
    filterAnchor.innerHTML = `
      <div class="modal-filter-box"><label>Language</label><select id="m-lang">${modalLanguages.map(l => '<option value="'+l+'" '+(l==='English'?'selected':'')+'>'+l+'</option>').join('')}</select></div>
      <div class="modal-filter-box"><label>Grading Service</label><select id="m-comp">${modalCompanies.map(c => '<option value="'+c+'" '+(c==='All'?'selected':'')+'>'+c+'</option>').join('')}</select></div>
    `;

    // ====== RENDER HIGH THROUGHPUT EBAY SUPPLY PLOTS ======
    function renderEbayDetails() {
      const selLang = filterAnchor.querySelector('#m-lang').value;
      const selComp = filterAnchor.querySelector('#m-comp').value;

      // Scoped execution pass matching drop down rules
      let scopedListings = masterCardListings.filter(d => 
        (selLang === "All" || d.card_language === selLang) && 
        (selComp === "All" || d.grading_company === selComp)
      );

      const bin_target = document.getElementById('ebay-modal-bin-target');
      if(scopedListings.length === 0) {
        bin_target.innerHTML = "<div style='padding:40px; text-align:center; color:var(--text-muted);'>No inventory matches filters.</div>";
      } else {
        bin_target.innerHTML = "";
        
        // Isolate precise dates and distinct grading firms
        let uniqueDates = [...new Set(scopedListings.map(d => d.date_pulled))].sort();
        let activeCompanies = [...new Set(scopedListings.map(d => d.grading_company))].sort();
        
        // Deterministic hexadecimal colors for grading services mapping
        const color_map = { 'UNG': '#38bdf8', 'PSA': '#c084fc', 'CGC': '#34d399', 'BGS': '#fbbf24', 'SGC': '#a78bfa' };
        
        // Group and map item supply parameters by corporate metrics
        let barTraces = activeCompanies.map(company => {
           let dailyCounts = uniqueDates.map(date => scopedListings.filter(d => d.date_pulled === date && d.grading_company === company).length);
           return {
              x: uniqueDates, y: dailyCounts, type: 'bar',
              name: company === 'UNG' ? 'Ungraded' : company,
              marker: { color: color_map[company] || '#475569' },
              hovertemplate: `<b>${company === 'UNG' ? 'Ungraded' : company}</b><br>Date: %{x}<br>Active Supply: %{y}<extra></extra>`
           };
        });

        // Fire rendering pipeline with strict locked boundaries
        Plotly.newPlot(bin_target, barTraces, { 
          dragmode: false, barmode: 'stack',
          title: {text: 'Active Supply Volume (7-Day Rolling Inventory)', font: {color: '#f8fafc', family:'Inter', size: isMobile ? 11 : 14}, x: 0.02, y: 0.98}, 
          paper_bgcolor: 'transparent', plot_bgcolor: 'transparent', font: {color: '#f8fafc', family:'Inter', size: isMobile ? 9 : 12}, 
          xaxis: {gridcolor: '#334155', fixedrange: true, tickfont: {size: isMobile ? 9 : 12}}, 
          yaxis: {title: {text: isMobile ? '' : 'Available Items Count', font: {size: isMobile ? 10 : 13}}, gridcolor: '#334155', fixedrange: true, tickfont: {size: isMobile ? 9 : 12}}, 
          margin: {l: isMobile ? 30 : 50, r: isMobile ? 15 : 20, t: isMobile ? 40 : 40, b: isMobile ? 70 : 30}, 
          legend: {orientation: 'h', y: isMobile ? -0.3 : -0.2, x: 0.5, xanchor: 'center', font: {size: isMobile ? 9 : 12}, itemwidth: 30} 
        }, {responsive: true, displayModeBar: false});
      }

      // Live 7-Day Component Titles Listing Generation
      let max_date_ms = new Date(scopedListings.reduce((max, p) => p.date_pulled > max ? p.date_pulled : max, "2000-01-01")).getTime();
      let r_7d = scopedListings.filter(e => (max_date_ms - new Date(e.date_pulled).getTime()) <= (7*24*60*60*1000));
      
      const buildListHTML = (title, lbl) => {
         let subset = r_7d.filter(d => d.label === lbl);
         let map = new Map(); subset.forEach(i => { if(!map.has(i.item_id) || i.date_pulled > map.get(i.item_id).date_pulled) map.set(i.item_id, i); });
         let unique = Array.from(map.values()).sort((a,b) => a.clean_price - b.clean_price);
         if(unique.length === 0) return '';
         
         let lis = unique.map(item => {
             let act = ebay_title_map.get(String(item.item_id).trim()) || "Unknown Title";
             return `<div style="display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px;"><span style="color: var(--text-main); white-space: normal; line-height: 1.4; padding-right: 15px;">${act}</span><span style="color: var(--accent-yellow); font-weight: 700; flex-shrink: 0;">$${item.clean_price.toFixed(2)}</span></div>`;
         }).join('');
         return `<div style="background: var(--bg-base); padding: 15px; border-radius: 8px; border: 1px solid var(--border-subtle); max-height: 350px; overflow-y: auto;"><div style="position: sticky; top: -15px; background: var(--bg-base); z-index: 5; padding-bottom: 10px; margin-bottom: 5px; border-bottom: 1px solid var(--border-subtle);"><h4 style="color:var(--accent-blue); margin:0; font-size:14px; text-transform:uppercase;">${title}</h4><div style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">Sample Size: ${unique.length} Unique Listings</div></div>${lis}</div>`;
      };
      
      document.getElementById('ebay-modal-listings-target').innerHTML = buildListHTML("Ungraded 7-Day Titles", "Ungraded") + buildListHTML("PSA 10 7-Day Titles", "PSA 10");
    }

    // Bind event hooks directly to input filters inside modal framework
    filterAnchor.querySelector('#m-lang').addEventListener("change", renderEbayDetails);
    filterAnchor.querySelector('#m-comp').addEventListener("change", renderEbayDetails);

    // FIX: Grab element explicitly via native DOM token selector rather than variable closure handles to protect reactive pipelines
    const targetModal = document.getElementById('unified-master-modal');
    targetModal.style.display = "block"; 
    
    setTimeout(() => {
      Plotly.newPlot(document.getElementById('modal-graph-target'), all_traces, layout_graph, {responsive: true, displayModeBar: false});
      Plotly.newPlot(document.getElementById('modal-error-target'), [trace_base, trace_err_c, trace_err_g].filter(Boolean), layout_err, {responsive: true, displayModeBar: false});
      renderEbayDetails();
    }, 50); 
  });

  renderTable();
  return page_wrapper; 
}