/* ==========================================================================
   css/v2/index-detail.css - the five "one index" screens:

     /control/trading/index/quotes/<ticker>      indexQuotes
     /control/trading/index/graphics/<ticker>    indexGraphics_new
     /control/trading/index/pricestats/<ticker>  index_price_stats
     /control/trading/index/ratios/<ticker>      indexRatios
     /control/trading/index/profile/<ticker>     indexProfile

   The chrome (.issue_head, .issue_tabs, .quote_kpis, .issue_facts,
   .issue_periods) comes from css/v2/issue.css, the cards and tables from
   css/v2/markets.css + the table.qt contract in css/v2/base.css. This file only
   adds what those five pages need on top, and nothing here is used anywhere
   else.

   All five run on div.left-col.full - the whole cluster is full width, so the
   tables below are sized for ~1120px rather than for the 740px main column of
   a page with a sidebar.
   ========================================================================== */

/* ==========================================================================
   1. quotes - snapshot + intraday chart
   ========================================================================== */

/* The two fact tables sit side by side at full width; below the tablet break
   .issue_facts (issue.css) already collapses them onto one column. */
body.v2.page-index .idx_snapshot .issue_facts { gap: 8px 48px; }

body.v2.page-index .idx_graph > .heading { margin-bottom: 14px; }

/* uPlot sizes itself from the box width; the floor stops an empty series from
   collapsing the card to nothing. */
body.v2.page-index .idx_graph .v2chart { min-height: 180px; }
body.v2.page-index .idx_graph .v2chart.v2chart_empty { min-height: 110px; }

body.v2.page-index .idx_periods_wrap { margin-top: 14px; }

/* The period pills scroll sideways on a phone instead of wrapping into three
   ragged rows. .scroll_hint (base.css) paints the arrow over them. */
@media (max-width: 700px) {
    body.v2.page-index .idx_periods_wrap > .issue_periods {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    body.v2.page-index .idx_periods_wrap > .issue_periods::-webkit-scrollbar { display: none; }
}

/* quote_period_change.jsp is shared with the pre-v2 issue pages and renders a
   .infobox, which css/v2/issue.css already styles. At full width the card just
   needs to stop being a floated 660px block. */
body.v2.page-index .infobox { width: auto; float: none; }

/* ==========================================================================
   2. profile - description + index components
   ========================================================================== */
body.v2.page-index .idx_desc {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.6;
    color: #3d4757;
}

body.v2.page-index table.idx_components { min-width: 720px; }
body.v2.page-index table.idx_components td.first { min-width: 90px; }
body.v2.page-index table.idx_components td.name { text-align: left; white-space: normal; }
body.v2.page-index table.idx_components th.name { text-align: left; }

/* ==========================================================================
   3. ratios - six group cards, two per row at full width
   ========================================================================== */
body.v2.page-index .idx_ratio_cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    align-items: start;
}

/* .market_card:last-child (markets.css) drops the bottom margin, which inside a
   grid would leave the two columns ending at different rhythms. */
body.v2.page-index .idx_ratio_cols > .market_card { margin-bottom: 24px; }

body.v2.page-index table.idx_ratios { min-width: 0; }
body.v2.page-index .market_card table.idx_ratios td.first {
    text-align: left;
    white-space: normal;
    line-height: 1.35;
    color: #5b6675;
}
body.v2.page-index .market_card table.idx_ratios td.last { font-weight: 600; }

/* menu.properties spells ratios_liquidity with a hard <br /> in it, which would
   make one of the six headings two lines tall and misalign the grid. */
body.v2.page-index .idx_ratio_cols > .market_card > .heading > span br { display: none; }

@media (max-width: 860px) {
    body.v2.page-index .idx_ratio_cols { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   4. price stats
   --------------------------------------------------------------------------
   The body also carries .page-price-stats so css/v2/issue-stats.css styles the
   filter toolbar, the period buttons, the absolute/percent switch and the two
   wide tables exactly as on /control/pricestats/<ticker>. Only the index
   specific widths are here: the change table has no "average" column, and the
   history table has no currency suffix in its last header.
   ========================================================================== */
body.v2.page-index table.stats_change { min-width: 620px; }
body.v2.page-index table.stats_history { min-width: 760px; }

/* ==========================================================================
   5. indexes popup - /control/trading/indexes/popup
   --------------------------------------------------------------------------
   A 300px wide window with no navigation and no footer by design (same shape as
   /screens/bse/transactions/transactions_popup.jsp), so it gets .popup_card /
   .popup_head from css/v2/markets.css and only the chart box from here.
   ========================================================================== */
body.v2.page-popup .idx_popup_chart { margin-bottom: 14px; }
body.v2.page-popup .idx_popup_chart .v2chart { min-height: 150px; }
body.v2.page-popup table.idx_popup_table { min-width: 0; }
body.v2.page-popup .market_card table.idx_popup_table td { height: 34px; font-size: 14px; padding: 0 6px; }
body.v2.page-popup .market_card table.idx_popup_table td.first { padding-left: 0; }
body.v2.page-popup .market_card table.idx_popup_table td.last { padding-right: 0; }

/* ==========================================================================
   6. phone
   --------------------------------------------------------------------------
   .issue_live (issue.css) is a nowrap flex badge sized "flex: 0 0 auto". An
   index value is four digits next to a full timestamp, which is wider than a
   phone viewport, so across this cluster it is allowed to take its own row and
   wrap. css/v2/graphics.css already does exactly this for .page-graphics; the
   rule is repeated here because the other four tabs carry the same header and
   graphics.css is not loaded on them.
   ========================================================================== */
@media (max-width: 640px) {
    body.v2.page-index .issue_live {
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 6px 10px;
    }
}