src/app/dashboard/dashboard.component.html

<div class="wrap">

  <!-- Market Overview ticker (right-to-left auto scroll) -->
  <div class="section market-overview" id="section-market-overview">
    <div class="mo-header" style="display:flex; justify-content:space-between; align-items:flex-start;">
      <h2>Market Overview</h2>
      <div class="tag" style="font-size:0.85rem; opacity:0.9;">Last updated: {{ lastUpdated }}</div>
    </div>
    <div class="ticker" aria-hidden="false">
      <div class="ticker-track" #tickerTrack>
        <div class="mcard" *ngFor="let m of marketCardsRepeat">
          <h3>{{ m.title }}</h3>
          <div class="mval">{{ m.value }} <span class="chg" [ngClass]="{ up: m.dir === 'up', down: m.dir === 'down', neutral: m.dir === 'neutral' }">({{ m.chg }})</span></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Header bar: show country pills here (removed 'Market / Dashboard' text) -->
  <div class="header">
    <div class="country-row" style="padding:10px 12px; display:flex; align-items:center; gap:8px;">
      <div class="country-list">
        <ng-container *ngFor="let country of countries">
            <button class="tab" *ngIf="country !== 'All'" [class.active]="(selectedCountry || '').toLowerCase() === (country || '').toLowerCase()" (click)="selectCountry(country)">
            {{ country }}
          </button>
        </ng-container>
      </div>
    </div>
  </div>

  <!-- 1) Important Indices -->
            <div class="section" id="section-indices">
              <h2>Global Market Indices (Live)</h2>
              <div>
                <!-- Country filter moved to header; removed duplicate here -->
              </div>

              <!-- Cards grid for indices of selected country -->
              <div class="indices-grid" style="margin-top:12px;">
                <!-- When India selected, show nine simple index cards (name + placeholder price) -->
                <ng-container *ngIf="(selectedCountry || '').toLowerCase() === 'india'; else otherIndices">
                  <ng-container *ngFor="let g of displayIndices">
                    <div class="index-card">
                      <div class="ic-header">
                        <div class="ic-name">{{ formatIndexName(g.name) }}</div>
                        <div class="ic-price">{{ g.price | number:'1.2-2' }}</div>
                      </div>
                      <div class="ic-row">
                        <div class="ic-change" [ngClass]="{ up: g.isUp, down: !g.isUp }">
                          {{ g.changePct !== null && g.changePct !== undefined ? (g.changePct >= 0 ? '+' : '') + (g.changePct | number:'1.2-2') + '%' : (g.change !== null && g.change !== undefined ? (g.change >= 0 ? '+' : '') + (g.change | number:'1.2-2') : '—') }}
                        </div>
                      </div>
                      <svg *ngIf="g.miniPath" preserveAspectRatio="none" viewBox="0 0 240 28" aria-hidden="true" class="ic-spark">
                        <path [attr.d]="g.miniPath" fill="none" [attr.stroke]="g.isUp ? 'var(--up)' : 'var(--down)'" stroke-width="2"></path>
                      </svg>
                    </div>
                  </ng-container>
                </ng-container>

                <ng-template #otherIndices>
                  <ng-container *ngFor="let g of displayIndices">
                    <div class="index-card">
                      <div class="ic-header">
                        <div class="ic-name">{{ formatIndexName(g.name) }}</div>
                        <div class="ic-price">{{ g.price | number:'1.2-2' }}</div>
                      </div>
                      <div class="ic-row">
                        <div class="ic-change" [ngClass]="{ up: g.isUp, down: !g.isUp }">
                          {{ g.changePct !== null && g.changePct !== undefined ? (g.changePct >= 0 ? '+' : '') + (g.changePct | number:'1.2-2') + '%' : (g.change !== null && g.change !== undefined ? (g.change >= 0 ? '+' : '') + (g.change | number:'1.2-2') : '—') }}
                        </div>
                      </div>
                      <svg *ngIf="g.miniPath" preserveAspectRatio="none" viewBox="0 0 240 28" aria-hidden="true" class="ic-spark">
                        <path [attr.d]="g.miniPath" fill="none" [attr.stroke]="g.isUp ? 'var(--up)' : 'var(--down)'" stroke-width="2"></path>
                      </svg>
                    </div>
                  </ng-container>
                </ng-template>
              </div>
            </div>

            <!-- 2) Companies under each Index (with Buy/Sell) + 3) Today Chart -->
            <div class="section">
              <h2>Companies by Index (Live Price &amp; Actions)</h2>
              <div class="tabs">
                <button class="tab"
                        *ngFor="let code of indexCodes"
                        [class.active]="code === activeIndex"
                        (click)="setActiveIndex(code)">
                  {{ code }}
                </button>
              </div>

              <div class="cols">
                <div>
                  <div class="table-wrap" style="position:relative">
                    <div *ngIf="quotesLoading" style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); z-index:5; border-radius:8px;">
                      <svg width="48" height="48" viewBox="0 0 50 50" aria-hidden="true">
                        <circle cx="25" cy="25" r="20" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-dasharray="31.4 31.4">
                          <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
                        </circle>
                      </svg>
                    </div>

                    <!-- New: scrollable companies list -->
                    <div class="companies-scroll" style="max-height:360px; overflow:auto; padding-right:8px;">
                      <table aria-label="Companies">
                        <thead>
                          <tr>
                            <th>Company</th>
                            <th>LTP</th>
                            <th>% Chg</th>
                            <th>High</th>
                            <th>Low</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let c of companiesByIndex[activeIndex]; let i = index" [class.selected]="c.sym === selectedCompany" (click)="onCompanyClick($event, c)">
                            <td>
                              <button class="co" type="button" (click)="onCompanyClick($event, c)">{{ c.sym }}</button>
                            </td>
                            <td>{{ fmt(c.ltp) }}</td>
                            <td [class.uptext]="c.chg >= 0" [class.downtext]="c.chg < 0">
                              {{ c.chg >= 0 ? '+' : '' }}{{ c.chg.toFixed(2) }}%
                            </td>
                            <td>{{ fmt(c.high) }}</td>
                            <td>{{ fmt(c.low) }}</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>

                    <!-- Removed load-all button and helper text as requested -->

                  </div>
                </div>

                <div>
                  <div class="chart-card">
                    <div class="chart-header">
                      <div class="chart-title">Today Chart: {{ chartSymbol || '—' }}</div>
                      <div class="legend">1-minute simulated intraday</div>
                    </div>
                    <div #chartContainer class="chart-svg" aria-label="Intraday chart" role="img"></div>
                  </div>
                  <div class="note">Click a company to update the chart.</div>
                </div>
              </div>
            </div>

            <!-- 4) Sector-based important companies -->
            <div class="section">
              <h2>Sector-based Important Companies</h2>
              <div class="sector-grid">
                <div class="sector" *ngFor="let s of sectors">
                  <h3>{{ s.name }}</h3>
                  <span class="pill"
                        *ngFor="let co of s.picks"
                        [title]="'Open ' + co + ' chart'"
                        (click)="drawTodayChart(co, 100 + random() * 2000)">
                    {{ co }}
                  </span>
                </div>
              </div>
            </div>

            <!-- 5) Today Toppers & Losers -->
            <div class="section">
              <h2>Today Toppers &amp; Today Losers</h2>
              <div class="dual">
                <div>
                  <h3 class="uptext">Today Toppers</h3>
                  <div class="table-wrap">
                    <table>
                      <thead>
                        <tr>
                          <th>Company</th>
                          <th>LTP</th>
                          <th>% Chg</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let g of gainers" (click)="drawTodayChart(g.sym, g.ltp)">
                          <td>{{ g.sym }}</td>
                          <td>{{ fmt(g.ltp) }}</td>
                          <td class="uptext">+{{ g.chg.toFixed(2) }}%</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

                <div>
                  <h3 class="downtext">Today Losers</h3>
                  <div class="table-wrap">
                    <table>
                      <thead>
                        <tr>
                          <th>Company</th>
                          <th>LTP</th>
                          <th>% Chg</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let l of losers" (click)="drawTodayChart(l.sym, l.ltp)">
                          <td>{{ l.sym }}</td>
                          <td>{{ fmt(l.ltp) }}</td>
                          <td class="downtext">{{ l.chg.toFixed(2) }}%</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

              </div>

            </div>
</div>