/*
 * 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).
 */

/* ============================================================
   Collapse — .in → .show
   BS3/metisMenu use .collapse.in for visible collapsed content.
   BS5 uses .collapse.show and hides .collapse:not(.show).
   Treat .in the same as .show so metisMenu sidebar keeps working.
   ============================================================ */
.collapse.in {
  display: block !important;
}

/* ============================================================
   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: 2px;
  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 5 Pro", "Font Awesome 5 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; }