/*
 * Bootstrap 5 compatibility shim for the legacy NYPTI layout.
 * This file is loaded AFTER all other CSS to patch the specific BS3→BS5
 * breaking changes without rewriting the legacy Site.css / StyleSheet.css
 * / Search.css files.
 */

/* ── 1. Restore float-based layout for tabs-left sidebar ───────────────────
   BS5 changed .nav from float-based to display:flex.
   The sidebar uses .tabs-left > .nav-tabs which relies on float:left.
   Restore display:block so Site.css's float rules take effect again.
   ──────────────────────────────────────────────────────────────────────── */
.tabs-left > .nav.nav-tabs {
    display: block !important;
    border-bottom: 0;
}

/* ── 2. Restore float-based grid columns inside .tabbable ─────────────────
   BS5 dropped float from .col-md-*. Columns now need a .row flex parent.
   The layout uses .col-md-2 and .col-md-10 directly inside .tabbable
   (no .row wrapper). Restore floats so the sidebar and content panel
   sit side-by-side as they did in BS3.
   ──────────────────────────────────────────────────────────────────────── */
.tabbable > .col-md-2 {
    float: left !important;
    width: 16.66667%;
}

.tabbable > .col-md-10 {
    float: left !important;
    width: 83.33333%;
}

/* BS3 columns used 15px side paddings; BS5 defaults differ via gutters. */
.tabbable > .col-md-2,
.tabbable > .col-md-10 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Clearfix so .tabbable contains its floated children */
.tabbable::after {
    content: "";
    display: table;
    clear: both;
}

/* ── 3. Active tab pane visibility ────────────────────────────────────────
   BS5 requires both .show and .active to display a tab-pane.
   Site.css's rule (.tab-content > .active { display: block }) handles the
   .active case, but BS5's own rule (.tab-pane:not(.show) { display: none })
   has higher specificity and hides it again. Override here.
   ──────────────────────────────────────────────────────────────────────── */
.tab-content > .tab-pane.active {
    display: block !important;
}

/* ── 4. input-group-append: BS5 removed this helper class ─────────────────
   Buttons that are direct children of .input-group are styled by BS5,
   so this is mainly for any leftover .input-group-append wrappers.
   ──────────────────────────────────────────────────────────────────────── */
.input-group > .input-group-append {
    display: contents;
}

/* ── 5. Left sidebar nav box look ─────────────────────────────────────────
   In BS3 the sidebar links were styled by .nav-tabs > li > a in Site.css:
     height:90px, border:1px solid #949494, colour #003a69.
   In BS5 the anchor has class="nav-link" and BS5's own rules
   (.nav-tabs .nav-link { border: 1px solid transparent }) override
   Site.css with higher specificity, removing the visible border/box.
   Restore here using .nav-link-specific selectors that beat BS5.
   ──────────────────────────────────────────────────────────────────────── */
.tabs-left > .nav-tabs .nav-link {
    display: block !important;
    height: 90px !important;
    border: 1px solid #949494 !important;
    border-radius: 4px 0 0 4px !important;
    margin-right: -1px !important;
    margin-bottom: 3px !important;
    min-width: 74px !important;
    padding: 6px 8px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    color: #003a69 !important;
    background-color: #fff !important;
    font-size: medium !important;
    letter-spacing: .3px !important;
}

.tabs-left > .nav-tabs .nav-link:hover,
.tabs-left > .nav-tabs .nav-link:focus {
    border-color: #949494 !important;
    background-color: #eee !important;
    color: #003a69 !important;
}

/* Active box: white text on navy, right border transparent to merge with content */
.tabs-left > .nav-tabs .nav-link.active,
.tabs-left > .nav-tabs .nav-link.active:hover,
.tabs-left > .nav-tabs .nav-link.active:focus {
    border-color: #949494 transparent #949494 #949494 !important;
    color: #fff !important;
    background-color: #003a68 !important;
}

/* ── 6. Pagination ────────────────────────────────────────────────────────
   BS5 makes .pagination a flexbox and expects .page-item / .page-link
   classes. The site partials use plain <li><a> without those classes.
   Restore the BS3-style inline-block pagination look so the existing
   Search.css rules for .pagination .disabled and .current-page still work.
   ──────────────────────────────────────────────────────────────────────── */
ul.pagination {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    list-style: none;
    margin: 10px 0;
}

ul.pagination > li {
    display: inline-block;
}

ul.pagination > li > a {
    display: block;
    padding: 6px 12px;
    line-height: 1.42857;
    color: #003a68;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
}

ul.pagination > li > a:hover,
ul.pagination > li > a:focus {
    color: #003a68;
    background-color: #eee;
    border-color: #ddd;
    text-decoration: none;
}

ul.pagination > li:first-child > a {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

ul.pagination > li:last-child > a {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}