/*
 * Bootstrap 3 → Bootstrap 5 Compatibility Shim
 *
 * Provides CSS aliases for classes removed or renamed in BS5.
 * Load AFTER bootstrap5.min.css, BEFORE quividi-style.min.css.
 *
 * Does NOT aim to be pixel-perfect — just keeps removed classes
 * functional while templates are migrated app-by-app (Phase 4).
 */

/* ============================================================
   Grid — col-xs-* handled by JS shim (adds equivalent col-* class)
   so BS5's native cascade order works correctly.
   ============================================================ */

/* col-xs-offset-* handled by JS shim (adds equivalent offset-* class) */

/* col-sm-offset-* (BS3 sm = 768px, BS5 sm = 576px — use BS3 value) */
@media (min-width: 768px) {
    .col-sm-offset-0 {
        margin-left: 0;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }
}

@media (min-width: 992px) {
    .col-md-offset-0 {
        margin-left: 0;
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }
}

@media (min-width: 1200px) {
    .col-lg-offset-0 {
        margin-left: 0;
    }

    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-lg-offset-3 {
        margin-left: 25%;
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-lg-offset-6 {
        margin-left: 50%;
    }
}

/* ============================================================
   Visibility utilities — using BS3 breakpoints
   (xs < 768, sm 768–991, md 992–1199, lg ≥ 1200)
   ============================================================ */
.hidden-xs {
    display: none !important;
}

@media (min-width: 768px) {
    .hidden-xs {
        display: revert !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

.visible-xs,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-xs {
        display: block !important;
    }

    .visible-xs-block {
        display: block !important;
    }

    .visible-xs-inline {
        display: inline !important;
    }

    .visible-xs-inline-block {
        display: inline-block !important;
    }
}

.visible-sm {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm {
        display: block !important;
    }
}

.visible-md {
    display: none !important;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important;
    }
}

.visible-lg {
    display: none !important;
}

@media (min-width: 1200px) {
    .visible-lg {
        display: block !important;
    }
}

/* ============================================================
   Float / block utilities
   ============================================================ */
.pull-left {
    float: left !important;
}

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

.center-block {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   Panels → card-like styling
   ============================================================ */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.panel-default {
    border-color: rgba(0, 0, 0, .125);
}

.panel-primary {
    border-color: #0d6efd;
}

.panel-success {
    border-color: #198754;
}

.panel-info {
    border-color: #0dcaf0;
}

.panel-warning {
    border-color: #ffc107;
}

.panel-danger {
    border-color: #dc3545;
}

.panel-heading {
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
}

.panel-primary > .panel-heading {
    background-color: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.panel-success > .panel-heading {
    background-color: #198754;
    color: #fff;
    border-color: #198754;
}

.panel-info > .panel-heading {
    background-color: #0dcaf0;
    color: #000;
    border-color: #0dcaf0;
}

.panel-warning > .panel-heading {
    background-color: #ffc107;
    color: #000;
    border-color: #ffc107;
}

.panel-danger > .panel-heading {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

.panel-title {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
}

.panel-title > a,
.panel-title > small,
.panel-title > .small {
    color: inherit;
}

.panel-body {
    padding: 1rem;
    flex: 1 1 auto;
}

.panel-footer {
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, .03);
    border-top: 1px solid rgba(0, 0, 0, .125);
    border-bottom-right-radius: calc(0.375rem - 1px);
    border-bottom-left-radius: calc(0.375rem - 1px);
}

/* ============================================================
   Well
   ============================================================ */
.well {
    min-height: 20px;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 0.375rem;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.well-sm {
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.well-lg {
    padding: 1.5rem;
    border-radius: 0.5rem;
}

/* ============================================================
   Labels (Bootstrap label component, not <label> elements)
   ============================================================ */
.label {
    display: inline-block;
    padding: 0.25em 0.45em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

a.label:focus,
a.label:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.label-default {
    background-color: #6c757d;
}

.label-primary {
    background-color: #0d6efd;
}

.label-success {
    background-color: #198754;
}

.label-info {
    background-color: #0dcaf0;
    color: #000;
}

.label-warning {
    background-color: #ffc107;
    color: #000;
}

.label-danger {
    background-color: #dc3545;
}

/* ============================================================
   Button aliases
   ============================================================ */
/* .btn-default — styled by Inspinia (quividi-style.css), no shim needed */

/* ============================================================
   Images
   ============================================================ */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-circle {
    border-radius: 50% !important;
}

.img-rounded {
    border-radius: 0.25rem !important;
}

/* ============================================================
   Input group — input-group-addon → input-group-text
   ============================================================ */
.input-group-addon {
    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;
    border-radius: 0.375rem;
}

.input-group > .input-group-addon:not(:last-child) {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-addon:not(:first-child) {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ============================================================
   Close button (× character style, BS3 .close)
   ============================================================ */
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
    opacity: 0.75;
}

.modal-header .close {
    margin: -1rem -1rem -1rem auto;
    padding: 1rem;
}

/* ============================================================
   Breadcrumb — plain <li> children (no breadcrumb-item class)
   ============================================================ */
.breadcrumb > li {
    display: inline-block;
}

.breadcrumb > li + li::before {
    padding: 0 5px;
    color: #6c757d;
    content: "/\00a0";
}

.breadcrumb > li.active {
    color: #6c757d;
}

/* ============================================================
   Caret
   ============================================================ */
/* BS3 templates that have explicit <b class="caret"> don't need BS5's
   auto-generated .dropdown-toggle::after.  Only suppress the auto-caret
   on toggles that contain a .caret child (marked with .has-caret by JS). */
.dropdown-toggle.has-caret::after {
    display: none !important;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.dropup .caret {
    border-top: 0;
    border-bottom: 4px solid;
}

/* ============================================================
   Page header
   ============================================================ */
.page-header {
    padding-bottom: 0.5rem;
    margin: 2rem 0 1rem;
    border-bottom: 1px solid #dee2e6;
}

/* ============================================================
   Form group (removed in BS5)
   ============================================================ */
.form-group {
    margin-bottom: 1rem;
}

/* ============================================================
   Fieldset / Legend — crispy-forms Fieldset layout objects
   BS3: legend had border-bottom separator, margin-bottom spacing,
        and body-size font (h5 inside controlled size).
   BS5: legend uses float:left + calc(1.275rem + .3vw) font-size,
        no border.  Restore BS3 appearance.
   ============================================================ */
fieldset {
    /* Contain the negative margins from the BS5 .row inside */
    overflow: hidden;
}

legend {
    font-size: 1rem;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
}

/* h5 inside crispy Fieldset legend — keep at Inspinia's body-text size */
legend h5 {
    font-size: 14px;
    margin: 0;
    font-weight: 500;
}

/* BS3 styled all <label> elements bold by default.
   BS5 removed this — restore it for form labels. */
label {
    font-weight: bold;
}

/* Checkbox/radio labels should not be bold, and prevent accidental
   text selection when clicking the checkbox */
.form-check-label {
    font-weight: normal;
    user-select: none;
}

/* Checkboxes inside grid columns need a small left indent to align
   with the text fields above (which have gutter padding). */
.row .form-check {
    margin-left: 4px;
}

/* BS3 .help-block — crispy-bootstrap3 renders field help_text inside
   <span class="help-block">. Styled separately in inspinia-bs5-compat.css */

/* ============================================================
   Dropdown — old <li><a> structure inside .dropdown-menu
   ============================================================ */
.dropdown-menu > li > a {
    display: block;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    text-decoration: none;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #1e2125;
    background-color: #f8f9fa;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #0d6efd;
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    color: #adb5bd;
    pointer-events: none;
    cursor: default;
}

.dropdown-menu > .divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar-form {
    padding: 0.5rem 1rem;
}

.navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

/* ============================================================
   Thumbnail
   ============================================================ */
.thumbnail {
    display: block;
    padding: 4px;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .075);
    transition: border 0.2s ease-in-out;
}

/* ============================================================
   Hidden utility (BS3 .hidden = display:none, removed in BS5)
   ============================================================ */
.hidden {
    display: none !important;
}

.hide {
    display: none !important;
}

/* ============================================================
   Glyphicons — BS3 icon font removed in BS5.
   Map the few remaining usages to FontAwesome equivalents.
   ============================================================ */
.glyphicon {
    font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free", FontAwesome;
    font-weight: 900;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}

.glyphicon-resize-vertical::before {
    content: "\f338";
    margin-right: 4px;
}

/* fa-arrows-alt-v */
.glyphicon-chevron-left::before {
    content: "\f053";
}

/* fa-chevron-left */
.glyphicon-chevron-right::before {
    content: "\f054";
}

/* fa-chevron-right */
.glyphicon-time::before {
    content: "\f017";
}

/* fa-clock */
.glyphicon-arrow-left::before {
    content: "\f060";
}

/* fa-arrow-left */
.glyphicon-arrow-right::before {
    content: "\f061";
}

/* fa-arrow-right */

/* ============================================================
   Text alignment utilities (BS5 renamed these with -start/-end)
   Keep old names working.
   ============================================================ */
.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}