/**
 * Bootstrap 5 Compatibility CSS
 * Provides backward-compatible styles for BS4 classes removed in BS5.
 * Load AFTER vendor.min.css.
 */

/* .form-group was removed in BS5 - restore its margin behavior */
.form-group {
    margin-bottom: 1rem;
}

/* .btn-xs was removed in BS3 - provide an extra-small button size */
.btn-xs {
    padding: 0.15rem 0.4rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    border-radius: 0.2rem !important;
    margin: 0 !important;
    border: 0 !important;
    height: auto !important;
}

/* .form-row was removed in BS5 - restore as row with tighter gutters */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

/* Fix stacking: header-background (position:fixed) was overlapping content and sidebar.
   Push it behind static content (CSS paint order: z-index:-1 paints below static blocks).
   Sidebar (position:fixed;z-index:5) and header-container stay above naturally. */
.wrapper .main-container.dashboard .header-background {
    z-index: -1;
}
.wrapper .main-container.dashboard .header-container {
    z-index: 10;
}

/* Fix login page: pseudo-elements and background-dots (position:fixed) overlap
   the login form. Push them behind and elevate block-container above. */
.login-background:before {
    z-index: -2 !important;
}
.login-background:after {
    z-index: -3 !important;
}
.login-background .background-dots {
    z-index: -1 !important;
}
.login-background .block-container {
    position: relative;
    z-index: 1;
}

/* Fix layout: BS5 .row uses flex-wrap:wrap. The custom width overrides on
   .main-column (calc-based) + .right-column (fixed 340px) can exceed parent
   width, causing right-column to wrap to next row. Prevent wrapping on desktop.
   Below 1280px the right-column goes full-width (stacked), so wrapping is needed. */
@media screen and (min-width: 1280px) {
    .wrapper .main-container.dashboard .inner-container > .container-fluid > .row {
        flex-wrap: nowrap;
    }
}

/* Fix submit buttons: .row.justify-content-end used as button/text wrapper.
   BS5 .row makes children flex items with width:100%. These aren't real grid
   columns, just alignment wrappers — children should be auto-width. */
.row.justify-content-end > .btn,
.row.justify-content-end > p,
.row.justify-content-end > a.btn {
    width: auto;
    flex: 0 0 auto;
}

/* DataTables pagination: base DT uses .paginate_button, not BS .page-item/.page-link.
   Style them to look like Bootstrap 5 pagination buttons. */
.dataTables_wrapper .dataTables_paginate {
    text-align: right;
    padding-top: 0.75em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    margin-left: 2px;
    text-decoration: none !important;
    cursor: pointer;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    color: #0091b3 !important;
    background-color: #fff;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    background-color: #0091b3;
    border-color: #0091b3;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #fff !important;
    background-color: #0091b3;
    border-color: #0091b3;
    font-weight: 600;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #6c757d !important;
    background-color: #fff;
    border-color: #dee2e6;
    opacity: 0.65;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
    display: inline-block;
    padding: 0.375rem 0.5rem;
    color: #6c757d;
}

/* DataTables length selector and search input: style as BS5 form controls */
.dataTables_wrapper .dataTables_length select {
    display: inline-block;
    width: auto;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    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 16'%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 #dee2e6;
    border-radius: 0.375rem;
    appearance: none;
    margin: 0 0.5rem;
}
.dataTables_wrapper .dataTables_length select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
.dataTables_wrapper .dataTables_filter input {
    display: inline-block;
    width: auto;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-left: 0.5rem;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #0091b3;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0,145,179,.25);
}
/* DataTables length + filter on same row, filter right-aligned */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 0.75rem;
}
.dataTables_wrapper .dataTables_length {
    float: left;
}
.dataTables_wrapper .dataTables_filter {
    float: right;
}

/* Fix table row selection: BS5 uses inset box-shadow on td to paint backgrounds,
   which covers tr background-color. Override the box-shadow on selected rows. */
.table-selectable tr.selected > td,
.table-selectable tr.selected > th {
    --bs-table-bg-state: #b2dae9;
    --bs-table-accent-bg: #b2dae9;
    background-color: #b2dae9 !important;
    box-shadow: inset 0 0 0 9999px #b2dae9 !important;
}

/* Fix .form-check: BS4 had position:relative, BS5 does not.
   Needed for absolutely-positioned children like .car-check .circle-selector */
.form-check {
    position: relative;
}

/* Fix table row colors: BS5 sets background-color on each td via --bs-table-bg (white),
   which hides inline background-color on tr elements. Set to transparent so tr
   backgrounds show through. Tables sit inside white .main-content-wrapper so
   the visual result is identical for non-colored rows. */
.table {
    --bs-table-bg: transparent;
}