/* ==========================================================================
   infostock v2 - PORTFOLIO
   Loaded by /screens/portfolio/portfolio-head.jsp together with
   base.css + markets.css + datepicker.css, on every /control/portfolio/*
   screen and (in the popup variants) on its own.

   Contracts that must not be broken - these nodes are rewritten by JS
   seconds after load, so they are styled BY ID, never by class:
     #portfolioHeader_dailyChange / _dailyPercentChange   ajax_refresh.js
        sets .className = 'price11 change_X bold'
     #portfolioSize / #dailyChange / #dailyPercentChange  ajax_refresh.js
        sets .className = 'price18 change_X bold'
     #opened_positions  rows + cells are rebuilt from XML by
        portfolio_opened_positions_ajax_refresh.js (classes on <tr> only:
        oddrow / evenrow / *_tagged / *_tagged_green / *_tagged_red)
     #trans / #offersbuy / #offerssell (popup) inner tables are replaced
        wholesale by ajax_refresh.js
   ========================================================================== */

/* ==========================================================================
   1. PORTFOLIO HEADER BAR (portfolio-header.jsp)
   ========================================================================== */
body.v2 div.portfolio_header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
    background: #fff; border: 1px solid #dfe7f0; border-radius: 8px;
    box-shadow: 0 1px 3px rgba(30, 66, 128, .06);
    padding: 14px 18px; margin-bottom: 16px;
}
body.v2 div.portfolio_header div.portfolio {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 20px; color: #1e4280; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body.v2 div.portfolio_header div.portfolio b { font-weight: 700; }
body.v2 div.portfolio_header div.portfolio img { width: 9px; height: auto; }
/* by id - the ajax refresh overwrites className on these two spans */
body.v2 #portfolioHeader_dailyChange,
body.v2 #portfolioHeader_dailyPercentChange { font-size: 15px; font-weight: 600; }

body.v2 div.portfolio_header form { margin-left: auto; }
body.v2 .pf_picker_row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
body.v2 .pf_picker {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
    min-width: 200px; max-width: 100%;
    padding: 8px 30px 8px 12px; border: 1px solid #cdd6e2; border-radius: 6px;
    background: #fff; color: #1e4280; font-size: 14px; cursor: pointer;
    position: relative; float: none;
}
body.v2 .pf_picker::after {
    content: ""; position: absolute; right: 11px; top: 50%; width: 8px; height: 8px;
    margin-top: -5px; border-right: 2px solid #1e4280; border-bottom: 2px solid #1e4280;
    transform: rotate(45deg);
}
body.v2 .pf_picker:hover, body.v2 .pf_picker.DDover { border-color: #1e4280; background: #f0f3f6; }

/* the three actions next to the picker: one segmented group of equal,
   40px-square buttons drawn with inline SVG, so they line up with the
   picker instead of leaning on the legacy .gif sprites. */
body.v2 .pf_actions { display: inline-flex; align-items: center; gap: 6px; }
body.v2 a.pf_iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
    border: 1px solid #cdd6e2; border-radius: 6px; background: #fff;
    color: #1e4280; text-decoration: none; cursor: pointer;
}
body.v2 a.pf_iconbtn:hover,
body.v2 a.pf_iconbtn:focus-visible {
    background: #f0f3f6; border-color: #1e4280; text-decoration: none;
}
body.v2 a.pf_iconbtn svg { width: 18px; height: 18px; display: block; }
body.v2 a.pf_iconbtn.pf_iconbtn_danger { color: #ca0000; }
body.v2 a.pf_iconbtn.pf_iconbtn_danger:hover,
body.v2 a.pf_iconbtn.pf_iconbtn_danger:focus-visible {
    background: #fdeceb; border-color: #ca0000;
}

/* "add transaction" is the primary action of the whole section, so it sits in
   the header card with the picker and the icon buttons - not adrift under the
   tab strip, which is navigation. */
body.v2 button.pf_add_trade {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    flex: 0 0 auto; height: 40px; margin-left: 8px; padding: 0 16px;
    border: 1px solid #1e4280; white-space: nowrap;
}
body.v2 button.pf_add_trade svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* the tab strip is a single scrolling row on a phone; .scroll_hint draws the
   "more to the right" arrow and needs the scroller as its direct child, so the
   strip's own margins move up onto the wrapper. */
body.v2 .pf_tabs_wrap { margin: -8px 0 16px; }
body.v2 .pf_tabs_wrap > div.pinternal_menu { margin: 0; }

/* ==========================================================================
   2. MESSAGES (correctmessage.jsp / errormessage.jsp)
   ========================================================================== */
body.v2 .pf_msg {
    border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px;
    line-height: 1.5;
}
body.v2 .pf_msg.pf_errormsg { background: #fdeceb; border: 1px solid #f3c4bf; }
body.v2 .pf_msg.pf_correctmsg { background: #e7f6ec; border: 1px solid #b9e0c6; }
body.v2 .pf_msg .errormsg { color: #ca0000; background: none; }
body.v2 .pf_msg .correctmsg { color: #00723f; background: none; }
body.v2 .pf_msg .pf_msg_attr { padding-left: 14px; font-size: 13px; }

/* ==========================================================================
   3. PAGE HEADINGS - the portfolio pages use bare div.heading (no card)
   ========================================================================== */
body.v2 .market_card > .heading h2 {
    font-family: var(--font-text);
    font-size: 17px; font-weight: 700; color: #1e4280; flex: 0 0 auto;
    white-space: nowrap; margin: 0;
}

/* ==========================================================================
   4. STAT TILES (view.jsp summary)
   ========================================================================== */
body.v2 .pf_stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
body.v2 .pf_stat {
    flex: 1 1 150px; min-width: 0;
    background: #f6f8fb; border: 1px solid #e4ebf4; border-radius: 8px;
    padding: 12px 14px;
}
body.v2 .pf_stat_label {
    display: block; font-size: 12px; color: #5b6675; text-transform: uppercase;
    letter-spacing: .3px; margin-bottom: 6px;
}
body.v2 .pf_stat_value {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    font-size: 20px; font-weight: 700; color: #1e4280;
    font-variant-numeric: tabular-nums;
}
body.v2 .pf_stat_value img { width: 9px; height: auto; }
/* by id - ajax_refresh.js rewrites className on these three */
body.v2 #portfolioSize, body.v2 #dailyChange, body.v2 #dailyPercentChange {
    font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
}
body.v2 #lastTradeTime { font-size: 15px; font-weight: 600; color: #1f2733; }

/* two-column "label / value" fact lists (result, beta, sharpe ...) */
body.v2 .pf_facts { display: flex; flex-wrap: wrap; gap: 16px; }
body.v2 .pf_facts_col { flex: 1 1 280px; min-width: 0; }
body.v2 table.pf_facts_table { width: 100%; border-collapse: collapse; font-size: 14px; }
body.v2 table.pf_facts_table td {
    padding: 9px 6px; border-bottom: 1px solid #e8edf4; color: #1f2733;
    vertical-align: middle;
}
body.v2 table.pf_facts_table tr:last-child td { border-bottom: 0; }
/* PortfolioSummaryTag injects the "cash" row as raw HTML and marks its value
   cell with .pf_fact_v, the same marker every hand-written row of view.jsp
   uses, so one rule covers both.  (It used to emit .bb / .bbl; those are gone
   from the tag, and the rules that hung off them went with them.) */
body.v2 table.pf_facts_table td.pf_fact_v {
    text-align: right; white-space: nowrap; font-weight: 600; color: #1e4280;
    font-variant-numeric: tabular-nums;
}
body.v2 table.pf_facts_table td.pf_fact_v img { width: 9px; height: auto; vertical-align: middle; }
body.v2 table.pf_facts_table .fright { float: none; }

/* intraday chart card - a live uPlot chart since the PNG was dropped, so the
   box only has to give it a width; #divloader went with the PNG. */
body.v2 .pf_chart { margin-bottom: 16px; }
body.v2 .pf_chart_periods {
    display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px;
}
body.v2 .pf_chart_periods a {
    padding: 8px 10px; border-radius: 6px; font-size: 13px; color: #1e4280;
}
body.v2 .pf_chart_periods a:hover { background: #f0f3f6; text-decoration: none; }
body.v2 .pf_chart_periods a.is_on {
    background: #1e4280; color: #fff; font-weight: 600;
}
body.v2 .pf_chart_box { position: relative; min-width: 0; }
body.v2 .pf_chart_box img { display: block; max-width: 100%; height: auto; }

/* ==========================================================================
   5. TABLES
   ========================================================================== */

body.v2 table.qt th[rowspan],
body.v2 table.qt th[colspan] { vertical-align: middle; }

/* opened positions - rebuilt by JS, so everything is addressed by id */
body.v2 #opened_positions { width: 100%; min-width: 980px; border-collapse: collapse; }
body.v2 #opened_positions th {
    background: #eef2f8; color: #1e4280; font-size: 12px; font-weight: 700;
    padding: 8px 6px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid #dfe7f0;
}
/* Every column but the first (the code, or the kind of a trade) is a figure,
   so the cells read right by POSITION, not by .num: the live refresh rebuilds
   the rows with bare <td align="right">, which a "td { text-align: left }"
   under this id overruled - a few seconds after load the whole table read
   left.  The two group headers ("За деня", "От покупката") sit centred over
   their three columns, as on the old site. */
body.v2 #opened_positions td {
    font-size: 13px; padding: 9px 6px; text-align: right; white-space: nowrap;
    border-bottom: 1px solid #eef1f6; color: #1f2733;
    font-variant-numeric: tabular-nums;
}
/* the id beats the shared table.qt .num rule, so repeat it here */
body.v2 #opened_positions th.num,
body.v2 #opened_positions td.num { text-align: right; }
body.v2 #opened_positions th[colspan] { text-align: center; }
body.v2 #opened_positions td:first-child { text-align: left; padding-left: 10px; }
body.v2 #opened_positions tr[class*="evenrow"] td { background: #f6f8fb; }
body.v2 #opened_positions tr:hover td { background: #eef4fc; }
body.v2 #opened_positions tr[class$="_tagged"] td { background: #fdfbe2; }
body.v2 #opened_positions tr[class$="_tagged_green"] td { background: #dff5e4; }
body.v2 #opened_positions tr[class$="_tagged_red"] td { background: #fde6e0; }
body.v2 #opened_positions tr.SummaryRow td {
    background: #e6ecf4; font-weight: 700; color: #1e4280;
    border-top: 2px solid #cdd6e2;
}
body.v2 #opened_positions td .fright { float: none; display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; }
body.v2 #opened_positions td .fright img { width: 9px; height: auto; }
body.v2 #opened_positions td.grey { color: #5b6675; }
body.v2 #opened_positions td a { color: #1e4280; }
/* the "+" / "-" in front of a position with several trades (tog() in
   portfolio.js); it had no cursor, so nothing said it could be clicked */
body.v2 #opened_positions svg.pf_row_toggle {
    cursor: pointer; vertical-align: middle; fill: #1e4280;
}

/* news list under the positions table */
body.v2 table.pf_news { width: 100%; border-collapse: collapse; font-size: 14px; }
body.v2 table.pf_news td {
    padding: 8px 6px; border-bottom: 1px solid #eef1f6; vertical-align: top;
    color: #5b6675;
}
body.v2 table.pf_news td a { color: #1e4280; }
body.v2 table.pf_news td:first-child { white-space: nowrap; }

/* distribution: chart next to its table */
body.v2 .pf_dist { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
body.v2 .pf_dist_chart { flex: 0 1 460px; min-width: 0; }
body.v2 .pf_dist_chart img { display: block; max-width: 100%; height: auto; }
body.v2 .pf_dist_table { flex: 1 1 300px; min-width: 0; }

/* distribution donut (charts.js drawDistribution). The table next to it is
   the legend: its first cell carries the colour chip and the row lights up
   with the slice, so nothing is printed twice. */
body.v2 .v2pie { position: relative; width: 100%; }
body.v2 .v2pie canvas { display: block; width: 100%; }
body.v2 .v2pie_center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 46%; text-align: center; pointer-events: none; line-height: 1.35;
}
body.v2 .v2pie_capt { display: block; font-size: 12px; color: #5b6675; }
body.v2 .v2pie_val {
    display: block; font-size: 17px; font-weight: 600; color: #1e4280;
    font-variant-numeric: tabular-nums;
}
body.v2 .v2pie_dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
    margin-right: 8px; vertical-align: middle; flex: none;
}
body.v2 .market_card table.qt tr.v2pie_row.is_on td { background: #eef3fb; }
/* only reached when the pie is used away from its table */
body.v2 .v2pie_legend {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px;
}
body.v2 .v2pie_legend li { display: flex; align-items: center; }
body.v2 .v2pie_legend li.is_on { font-weight: 600; }

/* ratios: two/three column grid of small cards */
body.v2 .pf_ratio_grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
body.v2 .pf_ratio_col { flex: 1 1 300px; min-width: 0; }
body.v2 .pf_ratio_note { font-size: 13px; color: #5b6675; line-height: 1.6; margin-top: 4px; }
body.v2 .market_card table.qt td.pf_ratio_name { text-align: left; white-space: normal; }
body.v2 .market_card table.qt td.pf_ratio_name .speclnk { cursor: pointer; }

/* ==========================================================================
   6. FORMS
   ========================================================================== */
body.v2 .pf_form { max-width: 560px; }
body.v2 .pf_field { margin-bottom: 16px; }
body.v2 .pf_field > label,
body.v2 .pf_label {
    display: block; font-size: 13px; color: #5b6675; font-weight: 600;
    margin-bottom: 6px;
}
body.v2 .pf_form input.editbox,
body.v2 .market_toolbar input.editbox,
body.v2 .pf_field input[type="text"],
body.v2 .pf_field input[type="password"] {
    width: 100%; max-width: 340px; min-height: 44px;
    padding: 10px 12px; border: 1px solid #cdd6e2; border-radius: 6px;
    background: #fff; color: #1f2733; font-size: 15px; font-family: inherit;
}
body.v2 .pf_form input.editbox:focus,
body.v2 .pf_field input:focus { outline: none; border-color: #1e4280; }
body.v2 input.errorbox { border-color: #ca0000 !important; background: #fdeceb; }
body.v2 .pf_check {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    font-size: 14px; color: #1f2733;
}
body.v2 .pf_check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; }
body.v2 .pf_fieldset {
    border: 1px solid #dfe7f0; border-radius: 8px; padding: 14px 16px;
    margin-bottom: 16px; background: #f9fbfd;
}
/* the first checkbox of a fieldset is not one more option, it is the switch
   for everything below it - so it reads as the head of the group */
body.v2 .pf_fieldset > .pf_check:first-child {
    font-weight: 600; margin-bottom: 12px; padding-bottom: 10px;
    border-bottom: 1px solid #e8edf4;
}
body.v2 .pf_fieldset > .pf_check:first-child + .pf_row > .pf_field:last-child,
body.v2 .pf_fieldset > .pf_field:last-child { margin-bottom: 0; }
/* switched off has to look switched off: the cash and commission fields load
   disabled and used to be indistinguishable from the ones you can type in */
body.v2 .pf_form input:disabled,
body.v2 .pf_field input:disabled {
    background: #f1f4f8; color: #8894a6; border-color: #e4e9f1; cursor: not-allowed;
}
body.v2 .pf_field .dp_trigger:disabled { opacity: .45; cursor: not-allowed; }
/* amount and date are one statement, not two questions */
body.v2 .pf_row { display: flex; flex-wrap: wrap; gap: 0 16px; }
body.v2 .pf_row > .pf_field { flex: 1 1 190px; min-width: 0; }
body.v2 .pf_row > .pf_field input[type="text"] { max-width: 100%; }
/* site-wide rule: form buttons sit on the right, the primary action last */
body.v2 .pf_form_actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid #e8edf4;
}
/* the same row used for a link list (register / lost password) is not an
   action row - it keeps reading from the left */
body.v2 .pf_form_actions.pf_form_links { justify-content: flex-start; }
body.v2 .pf_form_actions .btn_action,
body.v2 .pf_toolbar .btn_action { min-height: 44px; }
body.v2 .btn_ghost { background: #fff; color: #1e4280; border: 1px solid #cdd6e2; }
body.v2 .btn_ghost:hover { background: #f0f3f6; color: #1e4280; }

/* filter toolbars (result / transactions view) */
body.v2 .pf_toolbar { align-items: flex-end; justify-content: flex-start; gap: 12px 18px; }
body.v2 .pf_toolbar .market_toolbar_field { position: relative; align-items: flex-end; }
body.v2 .pf_toolbar .market_toolbar_field > label.market_toolbar_label {
    align-self: center; font-size: 14px;
}
/* the v2 date picker inside a portfolio toolbar - .dp_field is 42px tall,
   so the neighbouring input and the submit button match that, not 44. */
body.v2 .pf_toolbar .dp_field { flex: 0 0 auto; }
body.v2 .pf_toolbar input.editbox { max-width: 200px; min-height: 42px; height: 42px; }
body.v2 .pf_toolbar .btn_action { min-height: 42px; }
body.v2 .pf_toolbar .searchSuggest { top: 100%; left: 0; margin-top: 0 !important; }
body.v2 .calContainer { position: absolute; z-index: 300; top: 100%; left: 0; }

/* transaction-entry grids (add trade / split / cash / ...) */
body.v2 table.pf_entry { width: 100%; border-collapse: collapse; min-width: 780px; }
body.v2 table.pf_entry.pf_entry_narrow { min-width: 520px; }
/* the entry screens took the full width (they are forms, and the wide trade
   grid was scrolling sideways inside two thirds of the page).  A four-column
   form must not stretch with them, so the narrow grids size to content. */
body.v2 .left-col.full table.pf_entry.pf_entry_narrow { width: auto; max-width: 100%; }
body.v2 table.pf_entry th {
    background: #eef2f8; color: #1e4280; font-size: 12px; font-weight: 700;
    padding: 8px 6px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid #dfe7f0;
}
/* text left, figures right - header and field alike, as in every data table:
   amount, price, commission, value, coefficient and the read-only total */
body.v2 table.pf_entry th.num { text-align: right; }
body.v2 table.pf_entry input[id^="count_"],
body.v2 table.pf_entry input[id^="price_"],
body.v2 table.pf_entry input[id^="commission_"],
body.v2 table.pf_entry input[id^="transaction_"],
body.v2 .pf_entry_row input[id^="count_"],
body.v2 .pf_entry_row input[id^="price_"],
body.v2 .pf_entry_row input[id^="commission_"],
body.v2 .pf_entry_row input[id^="transaction_"] {
    text-align: right; font-variant-numeric: tabular-nums;
}
body.v2 table.pf_entry td {
    padding: 6px; border-bottom: 1px solid #eef1f6; vertical-align: top;
}
body.v2 table.pf_entry input[type="text"],
body.v2 table.pf_entry input.editbox {
    min-height: 40px; padding: 8px 10px; border: 1px solid #cdd6e2;
    border-radius: 6px; font-size: 14px; font-family: inherit; width: 100%;
}
body.v2 table.pf_entry td > div { position: relative; }
/* the date cells hold a v2 picker.  The field still carries <%= dateClass %>
   (editbox / errorbox) for the validators, so the rules above would draw a
   second border inside the one .dp_field already has - out-rank them. */
body.v2 table.pf_entry .dp_field { vertical-align: top; }
body.v2 table.pf_entry .dp_field input.dp_input {
    width: 112px; min-width: 0; height: 40px; min-height: 0; line-height: 40px;
    padding: 0 2px 0 10px; border: 0; border-radius: 0; background: transparent;
}
body.v2 table.pf_entry .dp_field input.dp_input.errorbox {
    background: #fdeceb; border-radius: 7px 0 0 7px;
}
body.v2 table.pf_entry .dp_field button.dp_trigger { width: 34px; height: 40px; }
body.v2 table.pf_entry .popup_menu {
    display: inline-flex; align-items: center; min-height: 40px; float: none;
    padding: 8px 26px 8px 10px; border: 1px solid #cdd6e2; border-radius: 6px;
    background: #fff; color: #1e4280; font-size: 14px; cursor: pointer;
    position: relative; white-space: nowrap;
}
body.v2 table.pf_entry .popup_menu::after {
    content: ""; position: absolute; right: 9px; top: 50%; width: 7px; height: 7px;
    margin-top: -5px; border-right: 2px solid #1e4280; border-bottom: 2px solid #1e4280;
    transform: rotate(45deg);
}
body.v2 table.pf_entry .searchSuggest { top: 100%; left: 0; margin-top: 0 !important; }
/* The issue suggest of a row.  It is a td > div, so the "td > div" rule above
   made it position:relative - in the flow of the cell: the Код column grew to
   the longest name of every answer and all rows below jumped down.  It is
   absolute now, and with top/left auto it stays at its static place, right
   under the input, while its containing block is outside the .table_wrap
   scroller - so it is not clipped by the scroller either and lies over the
   rows below.  A td-anchored box would be cut off at the bottom of the grid.
   The column gets a width of its own, independent of any answer. */
body.v2 table.pf_entry td > div.searchSuggest {
    position: absolute; top: auto; left: auto; margin-top: 4px !important;
    width: 320px; max-width: calc(100vw - 32px); z-index: 60;
}
body.v2 table.pf_entry th.pf_c_issue,
body.v2 table.pf_entry td.pf_c_issue { width: 180px; min-width: 180px; }
body.v2 .pf_note {
    border-top: 1px solid #e8edf4; margin-top: 12px; padding-top: 12px;
    font-size: 13px; color: #5b6675; line-height: 1.6;
}

/* transaction-type selector above the entry grid */
body.v2 .pf_tradetype { margin-bottom: 14px; }
body.v2 .pf_tradetype .popup_menu {
    display: inline-flex; align-items: center; min-height: 44px; float: none;
    min-width: 260px; max-width: 100%;
    padding: 10px 30px 10px 12px; border: 1px solid #cdd6e2; border-radius: 6px;
    background: #fff; color: #1e4280; font-size: 15px; cursor: pointer;
    position: relative;
}
body.v2 .pf_tradetype .popup_menu::after {
    content: ""; position: absolute; right: 11px; top: 50%; width: 8px; height: 8px;
    margin-top: -5px; border-right: 2px solid #1e4280; border-bottom: 2px solid #1e4280;
    transform: rotate(45deg);
}

/* transactions history table + inline edit row.
   The table also carries .qt, so the shared contract applies: td.num is right
   aligned with tabular figures, td.first is left aligned.  Only the columns
   that are neither a figure nor a name are pinned to a width here - the rest
   are sized by their content, which is what keeps the nine columns readable
   while .table_wrap does the scrolling on a phone. */
body.v2 table.pf_trans { width: 100%; border-collapse: collapse; min-width: 900px; }
/* a date is a figure too - right aligned, header included, as on the old
   site (transactions history and realized result alike) */
body.v2 table.pf_trans th.pf_c_date, body.v2 table.pf_trans td.pf_c_date { width: 110px; text-align: right; }
body.v2 table.pf_trans th.pf_c_cur, body.v2 table.pf_trans td.pf_c_cur { width: 60px; }
body.v2 table.pf_trans th.pf_c_act, body.v2 table.pf_trans td.pf_c_act { width: 76px; }
body.v2 table.pf_trans td.pf_c_act a { margin: 0 3px; }
/* the ticker cell holds "CODE&nbsp;Company name" - the one column allowed to
   wrap, so a long name does not push the figures off the screen. */
body.v2 table.pf_trans td.first { white-space: normal; min-width: 150px; }
body.v2 table.pf_trans th {
    background: #eef2f8; color: #1e4280; font-size: 12px; font-weight: 700;
    padding: 8px 6px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid #dfe7f0;
}
body.v2 table.pf_trans td {
    font-size: 13px; padding: 8px 6px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid #eef1f6; color: #1f2733;
    font-variant-numeric: tabular-nums;
}
body.v2 table.pf_trans tr[class*="evenrow"] td { background: #f6f8fb; }
body.v2 table.pf_trans tr:hover td { background: #eef4fc; }
body.v2 table.pf_trans tr.SummaryRow td {
    background: #e6ecf4; font-weight: 700; color: #1e4280; border-top: 2px solid #cdd6e2;
}
body.v2 table.pf_trans #editedRow td { padding: 6px 4px; }
body.v2 table.pf_trans #editedRow input[type="text"],
body.v2 table.pf_trans #editedRow input.editbox {
    min-height: 38px; padding: 6px 8px; border: 1px solid #cdd6e2;
    border-radius: 6px; font-size: 13px; font-family: inherit; width: 100%;
}
/* count / price / commission / total type in from the right, under their
   right-aligned headers */
body.v2 table.pf_trans #editedRow td.num input { text-align: right; }
body.v2 table.pf_trans #editedRow .popup_menu {
    display: inline-flex; align-items: center; min-height: 38px; float: none;
    padding: 6px 24px 6px 8px; border: 1px solid #cdd6e2; border-radius: 6px;
    background: #fff; color: #1e4280; font-size: 13px; cursor: pointer;
    position: relative; white-space: nowrap;
}
body.v2 table.pf_trans #editedRow td > div { position: relative; }
/* the v2 date picker has to fit a table cell, so it drops to the 38px the
   other inputs in this row use and lets the text field take what is left. */
body.v2 table.pf_trans #editedRow .dp_field { display: flex; width: 100%; height: 38px; }
/* cancelEdit() in transactions_view_header.jsp re-adds .editbox to every input
   of the row, so the picker's own field has to out-rank that rule or it draws
   a second border inside the one .dp_field already has. */
body.v2 table.pf_trans #editedRow .dp_field input.dp_input {
    width: 100%; min-width: 0; height: 36px; min-height: 0; line-height: 36px;
    padding: 0 2px 0 8px; font-size: 13px;
    border: 0; border-radius: 0; background: transparent;
}
body.v2 table.pf_trans #editedRow .dp_field input.dp_input.errorbox {
    background: #fdeceb; border-radius: 7px 0 0 7px;
}
body.v2 table.pf_trans #editedRow .dp_field button.dp_trigger { width: 32px; height: 36px; }
body.v2 table.pf_trans td a img { vertical-align: middle; }
body.v2 table.pf_trans .searchSuggest { top: 100%; left: 0; margin-top: 0 !important; }
/* the edit row's issue suggest is a td > div as well - same fix as the one
   of table.pf_entry: out of the flow, at its static place under the input */
body.v2 table.pf_trans #editedRow td > div.searchSuggest {
    position: absolute; top: auto; left: auto; margin-top: 4px !important;
    width: 320px; max-width: calc(100vw - 32px); z-index: 60;
}

/* A section heading INSIDE a card, so the .market_card > .heading rules in
   markets.css cannot reach it (the ajax fragment nests it in #table_data_holder).
   Same shape, one step quieter than the card's own h1.  No position and no
   overflow here: is_popup.js places the column menu with document coordinates,
   so a positioned or scrolling ancestor would misplace it. */
body.v2 .pf_section_head {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 14px; padding: 0; background: none; border: 0; float: none;
}
body.v2 .pf_section_head h2 {
    flex: 0 1 auto; min-width: 0; margin: 0; padding: 0;
    color: #1e4280; font-family: var(--font-text);
    font-size: 17px; line-height: 24px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.v2 .pf_section_head .rule {
    flex: 1 1 auto; height: 2px; min-width: 12px; background: #1e4280; opacity: .85;
}
body.v2 a.pf_cols_btn {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    height: 34px; padding: 0 12px; border: 1px solid #cdd6e2; border-radius: 6px;
    background: #fff; color: #1e4280; font-size: 14px; text-decoration: none;
    white-space: nowrap;
}
body.v2 a.pf_cols_btn:hover, body.v2 a.pf_cols_btn:focus-visible {
    background: #f0f3f6; border-color: #1e4280; text-decoration: none;
}
body.v2 a.pf_cols_btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* my view - the opened-positions table is swapped in by portfoliofilters.js
   (portfolio_issues_table_internal.jsp).  It is a table.qt like every other
   data table: text reads left by default and the numeric columns carry .num
   (the column tag emits "right", the header cells "num"), so there is
   nothing left to correct here by position. */

/* my view - column picker overlay */
body.v2 #more_columns_window {
    background: #fff; border: 1px solid #dfe7f0; border-radius: 8px;
    box-shadow: 0 6px 24px rgba(30, 66, 128, .18); padding: 14px 16px;
    max-width: 100%; z-index: 300;
}
body.v2 #more_columns_window table { width: 100%; }
body.v2 #more_columns_window th {
    font-size: 12px; color: #1e4280; padding: 6px 4px; vertical-align: top;
}
/* The dimmer behind the "change columns" overlay.  It is toggled by
   Utils.blockSite() / Utils.clearSite() in js/general.js, which only ever
   sets style.display - the *hidden* state has to come from css.  The legacy
   rule that provided it lives in css/newstyle.css, which v2 pages do not
   load, so without display:none here the layer covers the whole page from
   first paint and /portfolio/my is unusable. */
body.v2 .shadow_layer {
    display: none;
    position: fixed; inset: 0; background: rgba(15, 27, 46, .45); z-index: 250;
}
body.v2 #table_data_holder { float: none; width: 100%; }

/* help page */
body.v2 .pf_help { font-size: 14px; line-height: 1.7; color: #1f2733; }
body.v2 .pf_help ol { margin: 0 0 0 22px; padding: 0; list-style: decimal; }
body.v2 .pf_help ul { margin: 8px 0 8px 22px; padding: 0; list-style: disc; }
body.v2 .pf_help li { margin-bottom: 8px; }
body.v2 .pf_help b { color: #1e4280; }

/* login / advantages block on the anonymous portfolio page */
body.v2 .pf_login_form { max-width: 420px; }
body.v2 .pf_advantages {
    border-top: 1px solid #e8edf4; margin-top: 20px; padding-top: 16px;
    font-size: 14px; line-height: 1.7; color: #1f2733;
}
body.v2 .pf_advantages a { color: #1e4280; }

/* summary window (after adding transactions) */
body.v2 .pf_summary_block { margin-bottom: 16px; font-size: 14px; line-height: 1.6; }
body.v2 .pf_summary_block .correctmsg { color: #00723f; background: none; }
body.v2 .pf_summary_note { color: #1e4280; font-size: 14px; padding: 8px 0 12px; }

/* ==========================================================================
   7. POPUP (transactions_add_popup_*) - standalone window, no site chrome
   ========================================================================== */
body.v2.pf_popup { background: #fff; padding: 20px 22px 24px; }
body.v2.pf_popup div.middle { background: none; padding: 0; }
/* A popup can be stretched to any width, and everything in this one - a five
   field form and two three-column tables - is content with a natural size.
   Without a ceiling the entry row spread its inputs across the whole window
   and the trade rows stopped reading as rows, with the values metres apart.
   The cap sits on the wrapper, so it holds for every block in the window at
   once, and the spare width stays at the side where it belongs. */
body.v2 .pf_popup_wrap { max-width: 780px; }
body.v2 .pf_popup_issue {
    font-family: var(--font-text);
    font-size: 17px; font-weight: 700; color: #1e4280; margin: 10px 0;
}
/* live tables: the inner <table> is replaced by ajax_refresh.js, so style
   through the wrapper ids that survive */
body.v2 #trans_header table, body.v2 #trans table,
body.v2 #offersbuy_header table, body.v2 #offersbuy table,
body.v2 #offerssell_header table, body.v2 #offerssell table {
    width: 100%; border-collapse: collapse; table-layout: fixed;
}
body.v2 #trans_header th, body.v2 #offersbuy_header th, body.v2 #offerssell_header th {
    background: #f6f8fb; color: #5b6675; font-size: 11px; font-weight: 700;
    padding: 6px 4px; text-align: center; border-bottom: 1px solid #e4ebf4;
}
body.v2 #trans table td, body.v2 #offersbuy table td, body.v2 #offerssell table td {
    font-size: 12px; padding: 4px; border-bottom: 1px solid #f1f4f9;
    font-variant-numeric: tabular-nums; color: #1f2733;
}
body.v2 #trans table tr[class*="evenrow"] td,
body.v2 #offersbuy table tr[class*="evenrow"] td,
body.v2 #offerssell table tr[class*="evenrow"] td { background: #f6f8fb; }
body.v2 #trans table td.left, body.v2 #offersbuy table td.left, body.v2 #offerssell table td.left { text-align: left; }
body.v2 #trans table td.right, body.v2 #offersbuy table td.right, body.v2 #offerssell table td.right { text-align: right; }
body.v2 #trans_summary, body.v2 #offersbuy_summary, body.v2 #offerssell_summary {
    font-size: 11px; color: #5b6675; padding: 6px 8px 8px;
}
body.v2 #trans_summary hr, body.v2 #offersbuy_summary hr, body.v2 #offerssell_summary hr {
    height: 1px; background: #e4ebf4; border: 0; margin: 0 0 6px;
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
    body.v2 div.portfolio_header form { margin-left: 0; width: 100%; }
    body.v2 .pf_picker { min-width: 0; flex: 1 1 180px; }
}
@media (max-width: 640px) {
    /* the tab strip's negative gutters live on the .scroll_hint wrapper, or the
       arrow would be measured against a box the strip has already escaped. */
    body.v2 .pf_tabs_wrap { margin: -12px -12px 16px; }
    body.v2 button.pf_add_trade { margin-left: 0; flex: 1 1 100%; height: 44px; }
    body.v2 div.portfolio_header { padding: 12px 14px; gap: 10px; }
    body.v2 div.portfolio_header div.portfolio { font-size: 18px; }
    body.v2 .pf_stat { flex: 1 1 100%; }
    body.v2 .pf_form input.editbox,
    body.v2 .pf_field input[type="text"],
    body.v2 .pf_field input[type="password"] { max-width: 100%; }
    body.v2 .pf_chart_box { max-width: 100%; }
    /* stacked on narrow screens - the primary action goes on top */
    body.v2 .pf_form_actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }
    body.v2 .pf_form_actions.pf_form_links { flex-direction: row; align-items: center; }
    body.v2 .pf_form_actions > .btn_action { width: 100%; }
}

/* legacy .ibutton buttons that still come out of Java tag files
   (PortfolioTransactionsSummaryButtonsTag, IssuesFilter) */
body.v2 .ibutton, body.v2 .ibutton110 {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 18px; border-radius: 6px;
    background: #1e4280; color: #fff; font-size: 14px; font-weight: 600;
    font-family: inherit; cursor: pointer; float: none !important;
}
body.v2 .ibutton:hover, body.v2 .ibutton110:hover { background: #2a539b; }

/* submit row inside an entry grid */
body.v2 table.pf_entry tr.pf_entry_actions td {
    border-bottom: 0; padding-top: 16px; text-align: right;
}
body.v2 table.pf_entry tr.pf_entry_actions .btn_action { min-height: 44px; }

/* ==========================================================================
   POPUP PANELS - the offers / last-trades boxes keep their wrapper <table>
   (only the inner tables are swapped by ajax_refresh.js)
   ========================================================================== */
body.v2 table.pf_popup_panel {
    border-collapse: separate; border-spacing: 0; width: 100%;
    border: 1px solid #dfe7f0; border-radius: 8px; background: #fff;
    margin-bottom: 12px; overflow: hidden;
}
body.v2 table.pf_popup_panel_trans { float: right; width: 185px; max-width: 100%; margin-left: 12px; }
body.v2 td.pf_popup_panel_head {
    background: #f0f3f6; border-bottom: 1px solid #dfe7f0; padding: 8px 10px;
}
body.v2 td.pf_popup_panel_head h2 {
    display: flex; align-items: center; gap: 6px; margin: 0;
    font-family: var(--font-text);
    font-size: 13px; font-weight: 700; color: #1e4280;
}
body.v2 td.pf_popup_panel_head h2 img { width: auto; height: auto; }
body.v2 td.pf_popup_panel_body { vertical-align: top; padding: 0; }
body.v2 td.greenbg { background: #00935d; }
body.v2 td.redbg { background: #ca0000; }

/* the popup shows the SHORT opened-positions table in a 486px window */
body.v2.pf_popup #opened_positions { min-width: 0; }
body.v2.pf_popup #opened_positions th { font-size: 11px; padding: 6px 4px; }
body.v2.pf_popup #opened_positions td { font-size: 12px; padding: 6px 4px; }
body.v2.pf_popup .pf_entry { min-width: 0; }
body.v2.pf_popup .pf_entry td { padding: 4px; }
body.v2.pf_popup .searchSuggest { top: auto; }
/* the ticker box of the popup holds its own suggest and anchors it - it used
   to be a sibling placed by hand (left:2px; margin-top:20px) relative to the
   window, so the list opened 20px left of the field and over it.  The box
   holds only the input, so no is_popup menu gets a positioned ancestor. */
body.v2.pf_popup .pf_ticker_box { position: relative; }
body.v2.pf_popup .pf_ticker_box .searchSuggest {
    top: calc(100% + 4px); left: 0; margin-top: 0;
    max-width: calc(100vw - 44px);
}
body.v2.pf_popup .pf_picker { min-width: 0; width: 100%; }

/* baseline for every legacy .editbox/.errorbox input on a portfolio screen
   (the tag files emit class="<%= xxxClass %>", i.e. editbox or errorbox, on
   inputs that live outside .pf_form / .pf_entry - e.g. the popup ticker box) */
body.v2 input.editbox,
body.v2 input.errorbox {
    min-height: 40px; padding: 8px 10px; border: 1px solid #cdd6e2;
    border-radius: 6px; background: #fff; color: #1f2733;
    font-size: 14px; font-family: inherit; max-width: 100%;
}
body.v2 input.editbox:focus, body.v2 input.errorbox:focus { outline: none; border-color: #1e4280; }
body.v2 input.editbox[readonly] { background: #f6f8fb; color: #5b6675; }
body.v2.pf_popup input.editbox, body.v2.pf_popup input.errorbox { min-height: 38px; }

/* ==========================================================================
   7b. POPUP TRANSACTION ENTRY ROW (transactions_add_popup_*)
   --------------------------------------------------------------------------
   The entry row used to be <table class="pf_entry pf_entry_narrow"> inside a
   .table_wrap. That wrapper is the project's convention for a wide DATA table,
   and it is the wrong one for a form: at the size the window opens itself
   (486px) the grid's 520px min-width pushed the primary "add" button past the
   right edge, so the user got a horizontal scrollbar and had to stretch the
   window by hand to reach the main action.
   It is a wrapping field row now, built from the same .pf_row / .pf_field /
   .pf_form_actions vocabulary as every other v2 form: the fields reflow onto a
   second line instead of scrolling sideways, and the primary action always
   stays in view.
   ========================================================================== */
body.v2 .pf_entry_row { gap: 0 14px; align-items: flex-start; }
body.v2 .pf_entry_row > .pf_field {
    flex: 1 1 130px; min-width: 0; margin-bottom: 12px; position: relative;
}
body.v2 .pf_entry_row > .pf_field input[type="text"],
body.v2 .pf_entry_row > .pf_field input.editbox,
body.v2 .pf_entry_row > .pf_field input.errorbox {
    width: 100%; max-width: 100%; min-height: 40px; padding: 8px 10px;
    border: 1px solid #cdd6e2; border-radius: 6px;
    font-size: 14px; font-family: inherit;
}
/* "Вид" is a scripted dropdown, not an input - same look as in table.pf_entry */
body.v2 .pf_entry_row .popup_menu {
    display: flex; align-items: center; width: 100%; min-height: 40px; float: none;
    padding: 8px 26px 8px 10px; border: 1px solid #cdd6e2; border-radius: 6px;
    background: #fff; color: #1e4280; font-size: 14px; cursor: pointer;
    position: relative; white-space: nowrap;
}
body.v2 .pf_entry_row .popup_menu::after {
    content: ""; position: absolute; right: 9px; top: 50%; width: 7px; height: 7px;
    margin-top: -5px; border-right: 2px solid #1e4280; border-bottom: 2px solid #1e4280;
    transform: rotate(45deg);
}
body.v2 .pf_entry_row .searchSuggest { top: 100%; left: 0; margin-top: 0 !important; }
/* "Изчисли цена" fills in one input; it is a helper for the price field, not a
   second action on the form, so it sits under that field and not in the action
   row - which stays reserved for the one primary action, on the right. */
body.v2 .pf_calc {
    margin-top: 8px; width: 100%; min-height: 38px;
    font-size: 13px; white-space: nowrap;
}
body.v2 .pf_entry_actions { margin-top: 4px; padding-top: 14px; }
body.v2.pf_popup .pf_entry_actions .btn_action { min-height: 42px; }

/* the trades panel: three columns of fixed, predictable length. Left to the
   default equal thirds the clock - the one value whose width is known in
   advance - was the column that got clipped to "1...". */
body.v2 table.pf_popup_panel_trans { width: 230px; }
body.v2.pf_popup #trans_header th:nth-child(1),
body.v2.pf_popup #trans td:nth-child(1) { width: 40%; text-align: left; }
body.v2.pf_popup #trans_header th:nth-child(2),
body.v2.pf_popup #trans td:nth-child(2) { width: 28%; text-align: right; }
body.v2.pf_popup #trans_header th:nth-child(3),
body.v2.pf_popup #trans td:nth-child(3) { width: 32%; text-align: right; }
@media (max-width: 640px) {
    body.v2 table.pf_popup_panel_trans { float: none; width: 100%; margin-left: 0; }
}

/* the unit of the price field for a compensatory instrument - a percent of the
   nominal since 14.04.2026 - and what the typed trade is worth; written under
   the row by js/portfolio.js (pctQuotedSync). A row of its own in the entry
   tables, a line under the fields in the popup. */
body.v2 .pf_pct_hint {
    padding: 6px 10px; margin: 2px 0 8px; text-align: left;
    font-size: 13px; line-height: 1.4; color: #1e4280;
    background: #eef3fa; border-left: 3px solid #1e4280; border-radius: 3px;
}
body.v2 table td.pf_pct_hint { white-space: normal; }
body.v2 tr.pf_pct_hint_row td { border-top: 0; }