@charset "UTF-8";
/* ==========================================================================
   css/v2/trading-indexes.css
   --------------------------------------------------------------------------
   Page-specific layer for /control/trading/{indexes|sectors|segments}
   (screen "trading_in", body.v2.page-trading-in).

   Loaded on top of base.css + markets.css.  Everything generic lives there:
   .market_card, .table_wrap, .scroll_hint, table.qt / .qt-wide, .periods,
   .idx_layout / .idx_chart / .idx_table, .ratio / .ratio_lbl and
   div.left-col.full all come from those two files and are only tuned here.

   The page has no right column, so the content column is the full width and
   the two cards stack:
     1. .ti_overview  h1 + period pills + index chart beside the index table
     2. .ti_data      the breadth table (also served alone as "trading_ajax")
   ========================================================================== */

body.v2.page-trading-in div.col-holder { padding-top: 4px; }

/* ---------- 1. overview card ---------------------------------------------
   The shared 7/5 split from markets.css is what we want here: any wider a
   chart and the five-column index table beside it starts clipping its
   "Обем" column. */
body.v2.page-trading-in .ti_overview .idx_chart { min-width: 0; }
body.v2.page-trading-in .ti_overview .idx_table { min-width: 0; }
body.v2.page-trading-in .ti_overview .chart_hint { margin-top: 10px; }

/* the period pills sit in a .scroll_hint; kill the stray bottom gap the
   shared .periods margin leaves inside the wrapper */
body.v2.page-trading-in .ti_overview > .scroll_hint > .periods { margin-bottom: 18px; }

/* ---------- 2. breadth table ---------------------------------------------
   Eight columns.  It scrolls horizontally inside .table_wrap rather than
   squeezing, and the two proportion columns get a floor width so the bars
   stay readable. */
body.v2 table.qt.ti_table { min-width: 900px; }
body.v2 table.qt.ti_table th { white-space: normal; line-height: 1.3; }
body.v2 table.qt.ti_table td.first { min-width: 160px; }
body.v2 table.qt.ti_table th.ratio_cell,
body.v2 table.qt.ti_table td.ratio_cell {
    width: 16%;
    min-width: 150px;
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
}
body.v2 table.qt.ti_table td.ratio_cell .ratio { height: 9px; }
body.v2 table.qt.ti_table td.ratio_cell .ratio_lbl {
    font-size: 11px;
    gap: 8px;
}
body.v2 table.qt.ti_table td.ratio_cell .ratio_lbl span { white-space: nowrap; }

/* an index with no quote yet renders empty proportion bars - keep the row
   height stable instead of collapsing the cell */
body.v2 table.qt.ti_table td.ratio_cell .ratio:empty { background: #e8edf4; }

@media (max-width: 860px) {
    /* markets.css already collapses .idx_layout to a single column here */
    body.v2.page-trading-in .ti_overview .idx_layout {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 640px) {
    body.v2 table.qt.ti_table { min-width: 780px; }
    body.v2 table.qt.ti_table td.ratio_cell,
    body.v2 table.qt.ti_table th.ratio_cell { min-width: 130px; }
    body.v2 table.qt.ti_table td.first { min-width: 130px; }
}