/* ==========================================================================
   infostock.bg - references & calendar pages (v2)
   Loaded on screens/references/: calendar.jsp, calendar_details.jsp, etc.
   Scoped under body.v2 so it cannot leak into legacy pages.
   ========================================================================== */

/* ---------- calendar / references card ---------- */
body.v2 .ref_card {
    background: #fff;
    border: 1px solid #dfe7f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(30, 66, 128, .06);
    padding: 28px 32px;
    margin-bottom: 24px;
}

body.v2 .ref_card > .heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

body.v2 .ref_card > .heading h1,
body.v2 .ref_card > .heading h2,
body.v2 .ref_card > .heading > span {
    color: #1e4280;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

body.v2 .ref_card > .heading .rule {
    flex: 1 1 auto;
    height: 2px;
    min-width: 12px;
    background: #1e4280;
    opacity: .85;
}

/* ---------- calendar events list ---------- */
body.v2 .calendar_events_list {
    margin: 16px 0;
}

body.v2 .event_item {
    padding: 14px 0;
    border-bottom: 1px solid #eef2f7;
}

body.v2 .event_item:last-child {
    border-bottom: 0;
}

body.v2 .event_date_badge {
    font-size: 13px;
    font-weight: 700;
    color: #1e4280;
    background: #eef4fc;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 6px;
}

body.v2 .event_title_link {
    font-size: 16px;
    font-weight: 700;
    color: #1e4280;
    text-decoration: none;
    line-height: 1.4;
}

body.v2 .event_title_link:hover {
    color: #153366;
    text-decoration: underline;
}

body.v2 .event_meta {
    font-size: 13px;
    color: #6b7686;
    margin-top: 4px;
}

body.v2 .event_ticker {
    font-weight: 600;
    color: #1a2740;
}

body.v2 .event_category {
    font-weight: 700;
    color: #6b7686;
}

/* ---------- event details page ---------- */
body.v2 .event_detail_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

body.v2 .event_detail_category {
    font-size: 14px;
    font-weight: 700;
    color: #5b7fb5;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body.v2 .event_detail_ticker {
    font-size: 16px;
    font-weight: 700;
    color: #1e4280;
    background: #eef4fc;
    padding: 4px 10px;
    border-radius: 4px;
}

body.v2 .event_detail_title {
    font-size: 20px;
    font-weight: 700;
    color: #1a2740;
    line-height: 1.4;
    margin: 12px 0 16px;
}

body.v2 .event_detail_body {
    font-size: 16px;
    line-height: 1.7;
    color: #1f2733;
    margin-bottom: 24px;
}

body.v2 .btn_back_events {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1e4280;
    text-decoration: none;
    padding: 8px 14px;
    background: #f0f3f6;
    border-radius: 6px;
    transition: background-color .15s ease;
}

body.v2 .btn_back_events:hover {
    background: #e2e8f0;
    color: #153366;
}

/* ---------- responsive breakpoints ---------- */
@media (max-width: 640px) {
    body.v2 .ref_card {
        padding: 18px 16px;
        border-radius: 6px;
    }
}

/* ---------- economic dictionary alphabet navigation ---------- */
body.v2 .dictionary_alphabet {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

body.v2 .dictionary_alphabet span.activedictionary a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    background: #1e4280;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .15s ease;
}

body.v2 .dictionary_alphabet span.activedictionary a:hover {
    background: #153366;
}

body.v2 .dictionary_alphabet span.current a {
    background: #153366;
    box-shadow: 0 0 0 2px rgba(30, 66, 128, .25);
}

body.v2 .dictionary_alphabet span.inactivedictionary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    background: #f0f3f6;
    color: #9aa5b5;
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
}

body.v2 .dictionary_terms_list {
    margin-top: 24px;
    border-top: 1px solid #eef2f7;
    padding-top: 16px;
}

body.v2 .dictionary_terms_list a.speclnk {
    display: block;
    padding: 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e4280;
    text-decoration: none;
    border-bottom: 1px solid #f6f8fb;
}

body.v2 .dictionary_terms_list a.speclnk:hover {
    color: #153366;
    text-decoration: underline;
}

body.v2 .dictionary_view_title {
    font-size: 22px;
    font-weight: 700;
    color: #1a2740;
    margin: 20px 0 12px;
}

body.v2 .dictionary_view_desc {
    font-size: 16px;
    line-height: 1.7;
    color: #1f2733;
}

/* ---------- inquiries / polls archive & results ---------- */
body.v2 .inquiries_list_items {
    margin-top: 14px;
}

body.v2 .inquiry_row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f7;
}

body.v2 .inquiry_date {
    font-size: 13px;
    font-weight: 600;
    color: #6b7686;
    min-width: 85px;
    font-variant-numeric: tabular-nums;
}

body.v2 .inquiry_title a.speclnk {
    font-size: 16px;
    font-weight: 600;
    color: #1e4280;
    text-decoration: none;
}

body.v2 .inquiry_title a.speclnk:hover {
    color: #153366;
    text-decoration: underline;
}

/* the poll question / results / bars reuse the .v2poll_* component in base.css
   so that this page and the sidebar poll look identical. Only the wider column
   needs a little more breathing room. */
body.v2 .page-inquiry-view .v2poll_q {
    font-size: 17px;
    margin-bottom: 16px;
}

body.v2 .page-inquiry-view .v2poll_res {
    margin-bottom: 16px;
}

body.v2 .page-inquiry-view .v2poll_bar {
    height: 10px;
    border-radius: 5px;
}

/* ---------- news archive list ---------- */
body.v2 .archive_news_item {
    padding: 16px 0;
    border-bottom: 1px solid #eef2f7;
}

body.v2 .archive_news_item:last-child {
    border-bottom: none;
}

body.v2 .archive_news_title {
    font-size: 17px;
    font-weight: 700;
    color: #1e4280;
    text-decoration: none;
    line-height: 1.4;
    display: block;
    margin-bottom: 4px;
}

body.v2 .archive_news_title:hover {
    color: #153366;
    text-decoration: underline;
}

body.v2 .archive_news_date {
    font-size: 13px;
    color: #6b7686;
    margin-bottom: 6px;
}

body.v2 .archive_news_desc {
    font-size: 15px;
    line-height: 1.55;
    color: #4a5568;
}

body.v2 .archive_news_desc:empty {
    display: none;
}

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

/* a single page is no navigation - PaginationTag emits nothing then */
body.v2 .archive_pager:empty {
    display: none;
}

/* ---------- pagination component (v2) ----------
   Three stylesheets style the ul.pagination emitted by infostock:pagination,
   all at the same specificity (body.v2 ul.pagination ... = 0,2,x):
     base.css     34px pills, gap 6px            (always loaded, always first)
     markets.css  44px pills, justify-content:end
     references.css  this block - 32px pills
   On eight of the nine screens that load references.css it is linked after
   base.css/markets.css and would win on source order alone.  The exception is
   screens/news/news_search.jsp, which links references.css BEFORE markets.css
   (verified in the served page: base, references, markets).  That single
   screen is what the old !important on every declaration here was fighting.

   Source order cannot be relied on, so the selectors instead repeat the class
   (ul.pagination.pagination = 0,3,x).  That beats base.css and markets.css on
   specificity on every screen, in either link order, and the result is
   identical to what the !important block produced - without taking the
   !important level away from anything that may genuinely need it later.
   The doubled class is the only trick here; do not add !important back. */
body.v2 ul.pagination.pagination {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    gap: 4px;
    flex-wrap: wrap;
}

body.v2 ul.pagination.pagination li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 32px;
    color: #8fa3c6;
    font-size: 14px;
}

body.v2 ul.pagination.pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #dfe7f0;
    border-radius: 6px;
    background: #fff;
    color: #1e4280;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
}

body.v2 ul.pagination.pagination li a:hover {
    background: #f0f4f9;
    border-color: #1e4280;
    color: #153366;
}

body.v2 ul.pagination.pagination li.active a,
body.v2 ul.pagination.pagination li.active span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #1e4280;
    border-radius: 6px;
    background: #1e4280;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: default;
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
    body.v2 .archive_pager {
        justify-content: flex-start;
    }

    /* doubled class for the same reason as the block above: markets.css sets
       44px on li a outside any media query, and a media query adds no
       specificity of its own */
    body.v2 ul.pagination.pagination li a,
    body.v2 ul.pagination.pagination li.active a,
    body.v2 ul.pagination.pagination li.active span {
        min-width: 36px;
        height: 36px;
    }

    body.v2 .dictionary_alphabet {
        gap: 5px;
    }

    body.v2 .dictionary_alphabet span.activedictionary a,
    body.v2 .dictionary_alphabet span.inactivedictionary {
        min-width: 36px;
        height: 36px;
    }

    body.v2 .inquiry_row {
        display: block;
    }

    body.v2 .inquiry_date {
        margin-bottom: 2px;
    }
}