/* ==========================================================================
   v2 - /control/announcement (BSE corporate announcements list)
   --------------------------------------------------------------------------
   Loaded on top of base.css + markets.css + norms.css + datepicker.css.

   What lives here and why:
     1. .ann_filter    the filter toolbar. It reuses .norms_filter_toolbar for
                       layout, but the topic picker is a legacy
                       div.popup_menu + ul.DropDown pair driven by
                       js/is_popup.js, and .popup_menu is styled nowhere in v2
                       (newstyle.css is not loaded on v2 pages), so it has to
                       be given a control look here.
     2. .ann_table     the list itself. This is a TEXT table (company name and
                       a long announcement title), not a numeric one, so it
                       must wrap inside the column instead of inheriting the
                       680px min-width of .qt-wide and scrolling sideways.
   ========================================================================== */

/* ==========================================================================
   1. filter toolbar
   ========================================================================== */
body.v2 .ann_filter .filter_inputs {
    gap: 10px;
}

/* the free-text issue search; was an inline width:120px, too narrow for
   "Име/Код/ISIN" and unable to grow on a wide column */
body.v2 .ann_filter .ann_ticker {
    position: relative;
    flex: 1 1 190px;
    min-width: 150px;
    max-width: 260px;
}

body.v2 .ann_filter .ann_ticker input.editbox {
    width: 100%;
    height: 38px;
}

body.v2 .ann_filter .ann_ticker .searchSuggest {
    width: 100%;
    min-width: 240px;
}

/* ---------- topic picker ----------
   js/is_popup.js positions ul.DropDown with absolute DOCUMENT coordinates and
   writes an inline width on it, so the trigger may be position:relative (the
   menu is a sibling, not a child) but no ancestor may scroll or be positioned. */
body.v2 .ann_filter .ann_topics {
    position: relative;
    flex: 1 1 220px;
    min-width: 170px;
    max-width: 300px;
    height: 38px;
    padding: 0 30px 0 12px;
    border: 1px solid #cdd6e2;
    border-radius: 6px;
    background: #fff;
    color: #1e4280;
    font-size: 14px;
    line-height: 36px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

body.v2 .ann_filter .ann_topics::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid #6b7686;
    border-bottom: 2px solid #6b7686;
    transform: rotate(45deg);
}

body.v2 .ann_filter .ann_topics:hover,
body.v2 .ann_filter .ann_topics.DDover {
    border-color: #1e4280;
    background: #f0f3f6;
}

/* Some topic names are a full sentence ("Информация за сделки на лицата,
   изпълняващи ръководни функции..."). base.css keeps ul.DropDown items on one
   line, which on a phone pushes the popup past the viewport and gives the
   whole document a horizontal scrollbar. Cap it and let those items wrap. */
body.v2.page-announcements ul.DropDown {
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}

body.v2.page-announcements ul.DropDown li a {
    white-space: normal;
    line-height: 1.35;
}

body.v2 .ann_filter .filter_buttons {
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    body.v2 .ann_filter .ann_ticker,
    body.v2 .ann_filter .ann_topics {
        flex: 1 1 100%;
        max-width: none;
    }
    body.v2 .ann_filter .filter_buttons {
        width: 100%;
    }
    body.v2 .ann_filter .filter_buttons input {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   2. the announcements table
   ========================================================================== */
body.v2 .market_card table.ann_table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

body.v2 .market_card table.ann_table th,
body.v2 .market_card table.ann_table td {
    padding: 9px 10px;
    vertical-align: top;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

body.v2 .market_card table.ann_table td.first {
    white-space: nowrap;
    font-weight: 600;
    color: #5b6675;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

body.v2 .market_card table.ann_table col.ann_c_date { width: 90px; }
body.v2 .market_card table.ann_table col.ann_c_issuer { width: 30%; }

body.v2 .market_card table.ann_table td a.speclnk {
    display: block;
    color: #1e4280;
    font-weight: 600;
    line-height: 1.4;
}

body.v2 .market_card table.ann_table td a.speclnk:hover {
    color: #4673b6;
}

/* issuer codes under the company name */
body.v2 .ann_codes {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
}

/* announcement subject under the topic name */
body.v2 .ann_desc {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #475569;
}

body.v2 .ann_desc strong { font-weight: 400; }

body.v2 .ann_pager {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

/* Below the tablet break the three columns cannot all keep a share of 375px,
   so the date moves onto its own line above the row content. */
@media (max-width: 620px) {
    body.v2 .market_card table.ann_table,
    body.v2 .market_card table.ann_table tbody,
    body.v2 .market_card table.ann_table tr,
    body.v2 .market_card table.ann_table td {
        display: block;
        width: auto;
    }
    body.v2 .market_card table.ann_table thead,
    body.v2 .market_card table.ann_table colgroup {
        display: none;
    }
    body.v2 .market_card table.ann_table tr {
        padding: 10px 0;
        border-bottom: 1px solid #eef1f6;
    }
    body.v2 .market_card table.ann_table tr:hover td {
        background: transparent;
    }
    body.v2 .market_card table.ann_table td {
        padding: 0 2px 4px;
        border: 0;
    }
    body.v2 .ann_pager {
        justify-content: center;
    }
}