/*
 * Bootstrap 2 → Bootstrap 5 Compatibility Shim
 * Maps BS2 class names to BS5 equivalents
 * This file should be loaded AFTER bootstrap.min.css
 */

/* === Grid System: BS2 row-fluid + span{N} === */

.row-fluid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.row-fluid > [class*="span"] {
    position: relative;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

.span1  { flex: 0 0 auto; width: 8.333333%; }
.span2  { flex: 0 0 auto; width: 16.666667%; }
.span3  { flex: 0 0 auto; width: 25%; }
.span4  { flex: 0 0 auto; width: 33.333333%; }
.span5  { flex: 0 0 auto; width: 41.666667%; }
.span6  { flex: 0 0 auto; width: 50%; }
.span7  { flex: 0 0 auto; width: 58.333333%; }
.span8  { flex: 0 0 auto; width: 66.666667%; }
.span9  { flex: 0 0 auto; width: 75%; }
.span10 { flex: 0 0 auto; width: 83.333333%; }
.span11 { flex: 0 0 auto; width: 91.666667%; }
.span12 { flex: 0 0 auto; width: 100%; }

/* BS2 offset classes */
.offset1  { margin-left: 8.333333%; }
.offset2  { margin-left: 16.666667%; }
.offset3  { margin-left: 25%; }
.offset4  { margin-left: 33.333333%; }
.offset5  { margin-left: 41.666667%; }
.offset6  { margin-left: 50%; }
.offset7  { margin-left: 58.333333%; }
.offset8  { margin-left: 66.666667%; }
.offset9  { margin-left: 75%; }
.offset10 { margin-left: 83.333333%; }
.offset11 { margin-left: 91.666667%; }

/* === Forms === */

/* BS2 auto-styled inputs; BS5 requires .form-control */
input:not([type]):not(.form-control),
input[type="text"]:not(.form-control):not(.datepicker):not(.datepicker2),
input[type="email"]:not(.form-control),
input[type="password"]:not(.form-control),
input[type="number"]:not(.form-control),
input[type="tel"]:not(.form-control),
input[type="search"]:not(.form-control),
input[type="url"]:not(.form-control),
textarea:not(.form-control) {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

input:not([type]):not(.form-control):focus,
input[type="text"]:not(.form-control):focus,
input[type="email"]:not(.form-control):focus,
input[type="password"]:not(.form-control):focus,
input[type="number"]:not(.form-control):focus,
input[type="tel"]:not(.form-control):focus,
input[type="search"]:not(.form-control):focus,
input[type="url"]:not(.form-control):focus,
textarea:not(.form-control):focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Inline inputs (inside .form-inline or with span sizing) should not be full width */
.form-inline input:not(.form-control),
.form-inline textarea:not(.form-control),
input.span1, input.span2, input.span3, input.span4, input.span5, input.span6,
input.input-small, input.input-mini, input.input-medium, input.input-large {
    display: inline-block;
    width: auto;
}

/* BS2 auto-styled selects; BS5 requires .form-select */
select:not(.form-select):not([multiple]):not([size]) {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

select:not(.form-select):not([multiple]):not([size]):focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Inline selects (inside .form-inline) should not be full width */
.form-inline select:not(.form-select) {
    display: inline-block;
    width: auto;
}

/* Selects inside control-groups should fill their container */
.control-group .controls select {
    width: 100%;
}

.control-group {
    margin-bottom: 1rem;
}

.control-group::after {
    content: "";
    display: table;
    clear: both;
}

.control-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.form-horizontal .control-label {
    text-align: right;
    float: left;
    width: 160px;
    padding-top: 5px;
}

.form-horizontal .controls {
    margin-left: 180px;
}

.controls {
    position: relative;
}

.help-inline {
    display: inline-block;
    padding-left: 5px;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875em;
    vertical-align: middle;
}

.help-block {
    display: block;
    margin-top: 0.25rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875em;
}

.form-actions {
    padding: 19px 20px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-top: 1px solid #e5e5e5;
}

.form-actions::after {
    content: "";
    display: table;
    clear: both;
}

/* BS2 input sizing via span classes */
input.span1, select.span1, textarea.span1 { width: 60px; }
input.span2, select.span2, textarea.span2 { width: 150px; }
input.span3, select.span3, textarea.span3 { width: 220px; }
input.span4, select.span4, textarea.span4 { width: 300px; }
input.span5, select.span5, textarea.span5 { width: 380px; }
input.span6, select.span6, textarea.span6 { width: 460px; }
input.span7, select.span7, textarea.span7 { width: 540px; }
input.span8, select.span8, textarea.span8 { width: 620px; }
input.span9, select.span9, textarea.span9 { width: 700px; }
input.span10, select.span10, textarea.span10 { width: 780px; }
input.span11, select.span11, textarea.span11 { width: 860px; }
input.span12, select.span12, textarea.span12 { width: 100%; }

/* === Navbar === */

.navbar-inner {
    /* Absorbed into .navbar in BS5 */
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.nav-collapse {
    /* Equivalent to .navbar-collapse in BS5 */
}

.divider-vertical {
    display: none;
}

.navbar .nav > li > a {
    padding: 10px 15px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
    color: #fff;
}

/* === Utilities === */

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

.muted {
    color: var(--bs-secondary-color, #6c757d) !important;
}

.hidden,
.hide {
    display: none !important;
}

.unstyled {
    list-style: none;
    padding-left: 0;
}

/* === Removed Components === */

.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: 0.3rem;
}

.jumbotron h1 {
    font-size: 3.5rem;
    font-weight: 300;
}

.jumbotron .lead {
    font-size: 1.25rem;
    font-weight: 300;
}

.jumbotron.subhead {
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.well {
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 0.25rem;
}

.well-small {
    padding: 9px;
    border-radius: 0.2rem;
}

.well-large {
    padding: 24px;
    border-radius: 0.3rem;
}

.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #eee;
}

.hero-unit {
    padding: 60px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
}

/* === Alerts === */

.alert-error {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/* === Text Utilities === */

.text-error {
    color: #dc3545 !important;
}

/* === Button Sizes (BS2 names) === */

.btn-mini {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
}

.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

.btn-large {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

/* === Table === */

.table-condensed > :not(caption) > * > * {
    padding: 0.25rem;
}

/* === Labels (BS2 used .label for badges) === */

.label:not(label) {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background-color: #6c757d;
}

.label-success:not(label) { background-color: #198754; }
.label-warning:not(label) { background-color: #ffc107; color: #000; }
.label-important:not(label) { background-color: #dc3545; }
.label-info:not(label) { background-color: #0dcaf0; color: #000; }
.label-inverse:not(label) { background-color: #212529; }

/* === Pagination === */

/* BS2 pagination: <ul class="pagination"><li class="active"><a>1</a></li>... */
/* BS5 pagination: <ul class="pagination"><li class="page-item active"><a class="page-link">1</a></li>... */

/* Support both BS2 (direct li children) and BS2 wrapped (ul > li) */
.pagination ul {
    display: flex;
    padding-left: 0;
    list-style: none;
}

.pagination > li,
.pagination ul > li {
    /* Act as page-item */
}

.pagination > li > a,
.pagination > li > span,
.pagination ul > li > a,
.pagination ul > li > span {
    position: relative;
    display: block;
    padding: 0.375rem 0.75rem;
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #dee2e6;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.pagination > li:first-child > a,
.pagination ul > li:first-child > a {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.pagination > li:last-child > a,
.pagination ul > li:last-child > a {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.pagination > li > a:hover,
.pagination ul > li > a:hover {
    z-index: 2;
    color: var(--bs-link-hover-color, #0a58ca);
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination ul > .active > a,
.pagination ul > .active > span {
    z-index: 3;
    color: #fff;
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
}

.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > span {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* === Caret (BS2 dropdown arrow) === */

/* Hide BS2 .caret inside .dropdown-toggle — BS5 adds its own arrow via ::after */
.dropdown-toggle > .caret {
    display: none;
}

/* Keep .caret visible when used outside dropdown-toggle */
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* === Form Inline === */

.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.form-inline .control-group {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    margin-right: 0.5rem;
}

.form-inline .control-label {
    margin-bottom: 0;
    margin-right: 0.5rem;
}

.form-inline input,
.form-inline select,
.form-inline textarea {
    display: inline-block;
    width: auto;
}

/* === Form Vertical (BS2 default) === */

.form-vertical .control-group {
    margin-bottom: 1rem;
}

/* === Pager === */

.pager {
    display: flex;
    padding-left: 0;
    list-style: none;
    justify-content: center;
}

.pager li > a,
.pager li > span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
}

/* === Popover Content (BS2 class name) === */

.popover-content {
    /* BS5 uses .popover-body, alias for compat */
    padding: 0.5rem 0.75rem;
}

/* === Close Button (BS2 used .close, BS5 uses .btn-close) === */

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    opacity: .5;
}

button.close:hover {
    opacity: .75;
}

/* === Nav Tabs (BS2 → BS5 compat) === */

/* BS2 tabs: <li class="active"><a href="#tab" data-bs-toggle="tab">Tab</a></li> */
/* BS5 tabs: <li class="nav-item"><a class="nav-link active" ...>Tab</a></li> */

.nav-tabs > li {
    margin-bottom: -1px;
}

.nav-tabs > li > a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
    background: none;
    border: 1px solid transparent;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.nav-tabs > li.active > a,
.nav-tabs > li > a.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

/* === Dropdown Items (BS2 → BS5 compat) === */

/* BS2 dropdown items: <li><a href="#">Item</a></li> */
/* BS5 dropdown items: <li><a class="dropdown-item" href="#">Item</a></li> */
.dropdown-menu > li > a:not(.dropdown-item) {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-menu > li > a:not(.dropdown-item):hover,
.dropdown-menu > li > a:not(.dropdown-item):focus {
    color: #1e2125;
    background-color: #e9ecef;
}

/* === Dropdown Dividers (BS2 → BS5 compat) === */

.dropdown-menu > li.divider,
.dropdown-menu > .divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    padding: 0;
    opacity: 1;
}

.dropdown-menu > li.divider > a {
    display: none;
}

/* === Badge Variants (BS2/BS3 → BS5 compat) === */

.badge-success { background-color: #198754 !important; color: #fff !important; }
.badge-warning { background-color: #ffc107 !important; color: #000 !important; }
.badge-important,
.badge-danger { background-color: #dc3545 !important; color: #fff !important; }
.badge-info { background-color: #0dcaf0 !important; color: #000 !important; }
.badge-inverse { background-color: #212529 !important; color: #fff !important; }

/* === Breadcrumb (BS2 style with .divider spans) === */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef;
    border-radius: 0.375rem;
}

.breadcrumb > li {
    display: flex;
    align-items: center;
}

.breadcrumb > li > a {
    color: var(--bs-link-color, #0d6efd);
    text-decoration: none;
    padding: 0.15rem 0.25rem;
}

.breadcrumb > li > a:hover {
    color: var(--bs-link-hover-color, #0a58ca);
    text-decoration: underline;
}

.breadcrumb > li > .divider {
    padding: 0 0.35rem;
    color: #6c757d;
}

.breadcrumb > li.active > a {
    color: #fff;
    background-color: var(--bs-primary, #0d6efd);
    border-radius: 0.25rem;
    text-decoration: none;
}

/* === Input Append/Prepend (BS2 input groups) === */

.input-append,
.input-prepend {
    display: flex;
    width: 100%;
}

.input-append > input,
.input-prepend > input {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-append > .btn,
.input-append > .add-on {
    flex: 0 0 auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.input-prepend > .btn,
.input-prepend > .add-on {
    flex: 0 0 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -1px;
}

.input-prepend > input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

.add-on {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

/* === Default Button (BS2 .btn without variant → BS5 btn-light) === */

.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark):not(.btn-close):not(.btn-clear):not(.dropdown-toggle) {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark):not(.btn-close):not(.btn-clear):not(.dropdown-toggle):hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

/* === Input sizes (BS2 .input-small, .input-mini, etc) === */

.input-mini {
    width: 60px;
}

.input-small {
    width: 90px;
}

.input-medium {
    width: 150px;
}

.input-large {
    width: 210px;
}

.input-xlarge {
    width: 270px;
}

.input-xxlarge {
    width: 530px;
}

/* === Inline list (BS2) === */
.inline > li,
ul.inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}