/* ==========================================================================
   infostock.bg - "price statistics" tab of the single issue cluster (v2)
   --------------------------------------------------------------------------
   Loaded, after css/v2/base.css + css/v2/markets.css + css/v2/issue.css + the
   shared css/v2/datepicker.css, by

     screens/bse/issues/price_stats.jsp        body.page-price-stats-shares
     screens/bse/issues/price_stats_bonds.jsp  body.page-price-stats-bonds
     screens/bse/issues/price_stats_df.jsp     body.page-price-stats-df

   The three screens are one page with a different number of columns in the
   history table, so they share every rule below (scoped on the common
   .page-price-stats class) and differ only in that table's min-width.

   All three run full width - no sidebar - because the change table is eight
   columns and the history table up to nine, and they only stop needing a
   scrollbar once they get the whole 1120px content wrapper.
   ========================================================================== */

/* ==========================================================================
   1. form controls
   --------------------------------------------------------------------------
   v2 pages do not load newstyle.css, so the two controls that come out of the
   Java tag files - the period buttons of PriceStatsTimePeriodsTag and the
   is_popup dropdown trigger - arrive with no styling at all. The date fields
   are the shared v2 picker and are already styled by css/v2/datepicker.css.
   ========================================================================== */
body.v2.page-price-stats input.periodbut,
body.v2.page-price-stats input.periodbutsel {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #dfe7f0;
    border-radius: 999px;
    background: #fff;
    color: #1e4280;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

body.v2.page-price-stats input.periodbut:hover {
    background: #f0f3f6;
    border-color: #b9c9de;
}

body.v2.page-price-stats input.periodbutsel {
    background: #1e4280;
    border-color: #1e4280;
    color: #fff;
    cursor: default;
}

/* is_popup.js trigger for the history period menu. position:relative here is
   safe - the popup itself (ul.DropDown, styled in base.css) is a sibling, not
   a child, and is_popup places it in absolute document coordinates. */
body.v2.page-price-stats .popup_menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    float: none;
    min-height: 42px;
    min-width: 170px;
    max-width: 100%;
    padding: 8px 32px 8px 12px !important;
    border: 1px solid #cdd6e2;
    border-radius: 8px;
    background: #fff;
    color: #1e4280;
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
}

body.v2.page-price-stats .popup_menu::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -2px;
    width: 8px;
    height: 5px;
    background: #1e4280;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

body.v2.page-price-stats .popup_menu:hover,
body.v2.page-price-stats .popup_menu.DDover {
    border-color: #1e4280;
    background: #f0f3f6;
}

/* ==========================================================================
   2. price statistics - filter card
   ========================================================================== */
body.v2.page-price-stats .stats_toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e7edf4;
    border-radius: 8px;
}

body.v2.page-price-stats form.stats_form { margin: 0; padding: 0; }

body.v2.page-price-stats .stats_periods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

body.v2.page-price-stats .stats_dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

body.v2.page-price-stats .stats_date {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.v2.page-price-stats .stats_date_lbl {
    font-size: 15px;
    font-weight: 600;
    color: #5b6675;
    white-space: nowrap;
}

body.v2.page-price-stats .stats_dates .btn_action { min-height: 40px; }

/* ==========================================================================
   3. price statistics - tables
   --------------------------------------------------------------------------
   Both tables are table.qt (base.css) + .qt-wide (markets.css) inside a
   .table_wrap, so they scroll inside the card and never the page.
   ========================================================================== */

/* absolute / percent switch above the change table */
body.v2.page-price-stats .stats_switch {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 14px;
    padding: 3px;
    background: #f0f3f6;
    border-radius: 999px;
}

body.v2.page-price-stats a.stats_switch_btn {
    padding: 7px 14px;
    border-radius: 999px;
    color: #5b6675;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

body.v2.page-price-stats a.stats_switch_btn:hover { text-decoration: none; color: #1e4280; }

body.v2.page-price-stats a.stats_switch_btn.active {
    background: #fff;
    color: #1e4280;
    box-shadow: 0 1px 2px rgba(30, 66, 128, .14);
}

/* eight columns, two of them a rowspan-2 label pair */
body.v2 table.stats_change { min-width: 700px; }

/* the sub-header of the change table sits under a shared "change against"
   caption, so only the outer row carries the strong rule */
body.v2 .market_card table.stats_change th.group {
    text-align: center;
    border-bottom: 1px solid #cdd6e2;
    font-weight: 700;
    color: #1e4280;
}

body.v2 .market_card table.stats_change th.spacer { border-bottom: 0; }

body.v2 table.stats_history { min-width: 800px; }
body.v2.page-price-stats-df table.stats_history { min-width: 640px; }

/* arrows come in two sizes in the legacy markup (images/arrow_*.jpg and
   images/small/arrow_*.jpg); normalise them */
body.v2 .market_card table.qt img[src*="arrow_"] {
    width: 9px;
    height: auto;
    margin-right: 3px;
    vertical-align: baseline;
}

body.v2 .market_card table.qt td .change_up,
body.v2 .market_card table.qt td .change_down { white-space: nowrap; }

/* the history period picker sits on its own line above the table */
body.v2.page-price-stats .stats_picker_row { margin: 0 0 14px; }

/* ==========================================================================
   4. responsive
   ========================================================================== */
@media (max-width: 860px) {
    body.v2.page-price-stats .stats_dates { margin-left: 0; }
}

@media (max-width: 640px) {
    body.v2.page-price-stats .stats_toolbar { padding: 12px; gap: 10px 12px; }
    body.v2.page-price-stats .stats_dates { width: 100%; }
    body.v2.page-price-stats .stats_date { flex: 1 1 100%; }
    body.v2.page-price-stats .stats_date .dp_field { flex: 1 1 auto; min-width: 0; }
    body.v2.page-price-stats .stats_date .dp_field input.dp_input { width: 100%; min-width: 0; }
    body.v2.page-price-stats .stats_dates .btn_action { flex: 1 1 100%; min-height: 44px; }
    body.v2.page-price-stats input.periodbut,
    body.v2.page-price-stats input.periodbutsel { min-height: 40px; }
    body.v2.page-price-stats .popup_menu { width: 100%; }
}