/* ---------------------------------------
 *  Core utilities that changed / vanished
 * ------------------------------------- */

/* Floats & centering */
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Simple text alignment aliases */
.text-left  { text-align: left  !important; }
.text-right { text-align: right !important; }

/* Clearfix helper (if you still float things) */
.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}

/* Block buttons */
.btn-block {
  display: block;
  width: 100%;
}
.btn-block + .btn-block {
  margin-top: 0.5rem;
}

/* Extra‑small button size (.btn-xs) */
.btn-xs {
  padding: 0.125rem 0.25rem;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

/* Bootstrap 3 .btn-default → neutral button */
.btn-default {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #ced4da;
}
.btn-default:hover,
.btn-default:focus {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}

/* ---------------------------------------
 *  Responsive images
 * ------------------------------------- */

.img-responsive,
.thumbnail > img,
.thumbnail a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.img-rounded {
  border-radius: 0.25rem;
}
.img-circle {
  border-radius: 50%;
}

/* ---------------------------------------
 *  Labels → badge‑like pills
 * ------------------------------------- */

.label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.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; }

/* ---------------------------------------
 *  Panels (approximate with card‑like UI)
 * ------------------------------------- */

.panel {
  margin-bottom: 1.5rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.panel-heading {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  font-weight: 500;
}

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

.panel-body {
  padding: 1.25rem;
}

.panel-footer {
  padding: 0.75rem 1.25rem;
  background-color: #f7f7f7;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

/* Panel contextual colors */
.panel-default  { border-color: #dee2e6; }
.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-default  > .panel-heading { background-color: #f7f7f7; color: #212529; }
.panel-primary  > .panel-heading { background-color: #0d6efd; color: #fff; }
.panel-success  > .panel-heading { background-color: #198754; color: #fff; }
.panel-info     > .panel-heading { background-color: #0dcaf0; color: #000; }
.panel-warning  > .panel-heading { background-color: #ffc107; color: #000; }
.panel-danger   > .panel-heading { background-color: #dc3545; color: #fff; }

/* ---------------------------------------
 *  Wells & thumbnails
 * ------------------------------------- */

.well {
  min-height: 20px;
  padding: 20px;
  margin-bottom: 1.5rem;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 0.25rem;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well-sm {
  padding: 9px;
}

/* Old .thumbnail helper */
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 1.5rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
}
.thumbnail .caption {
  padding: 9px;
  color: #212529;
}

/* ---------------------------------------
 *  Forms
 * ------------------------------------- */

/* Classic .form-group */
.form-group {
  margin-bottom: 1rem;
}

/* .control-label for horizontal forms */
.control-label {
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* .help-block under inputs */
.help-block {
  display: block;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.875em;
  color: #6c757d;
}

/* Validation states on .form-group */
.has-success .form-control,
.has-success .form-select {
  border-color: #198754;
}
.has-warning .form-control,
.has-warning .form-select {
  border-color: #ffc107;
}
.has-error .form-control,
.has-error .form-select {
  border-color: #dc3545;
}

.has-success .help-block,
.has-success .control-label {
  color: #198754;
}
.has-warning .help-block,
.has-warning .control-label {
  color: #856404;
}
.has-error .help-block,
.has-error .control-label {
  color: #dc3545;
}

/* Input groups: bring back .input-group-addon */
.input-group-addon {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0;
  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.25rem;
}

/* Checkboxes & radios containers */
.checkbox,
.radio {
  position: relative;
  display: block;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.checkbox label,
.radio label {
  margin-bottom: 0;
  font-weight: 400;
}

/* ---------------------------------------
 *  Navbar (Bootstrap 3 style)
 * ------------------------------------- */

/* Generic navbar spacing: BS5 uses flex; this just fixes old selectors */
.navbar {
  border-width: 1px;
  border-style: solid;
  border-radius: 0.25rem;
}

/* Default navbar */
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
  color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
}
.navbar-default .navbar-nav > li > a {
  color: #777;
  padding: 0.5rem 1rem;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}

/* Inverse navbar */
.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}
.navbar-inverse .navbar-brand {
  color: #9d9d9d;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
}
.navbar-inverse .navbar-nav > li > a {
  color: #9d9d9d;
  padding: 0.5rem 1rem;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #080808;
}

/* Old left/right alignment helpers on navbars */
.navbar-left {
  margin-right: auto;
}
.navbar-right {
  margin-left: auto;
}

/* Toggle button styling (visual only; JS still needs updating) */
.navbar-toggle {
  display: none;
  padding: 0.25rem 0.75rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #888;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}
@media (max-width: 767.98px) {
  .navbar-toggle {
    display: block;
  }
}

/* ---------------------------------------
 *  Page header
 * ------------------------------------- */

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

/* ---------------------------------------
 *  Visibility helpers (Bootstrap 3 style)
 * ------------------------------------- */

/* Start hidden, enable per breakpoint */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
  display: none !important;
}

/* xs: <768px */
@media (max-width: 767.98px) {
  .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; }
  .hidden-xs { display: none !important; }
}

/* sm: ≥768px and <992px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .visible-sm { display: block !important; }
  .visible-sm-block { display: block !important; }
  .visible-sm-inline { display: inline !important; }
  .visible-sm-inline-block { display: inline-block !important; }
  .hidden-sm { display: none !important; }
}

/* md: ≥992px and <1200px */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .visible-md { display: block !important; }
  .visible-md-block { display: block !important; }
  .visible-md-inline { display: inline !important; }
  .visible-md-inline-block { display: inline-block !important; }
  .hidden-md { display: none !important; }
}

/* lg: ≥1200px */
@media (min-width: 1200px) {
  .visible-lg { display: block !important; }
  .visible-lg-block { display: block !important; }
  .visible-lg-inline { display: inline !important; }
  .visible-lg-inline-block { display: inline-block !important; }
  .hidden-lg { display: none !important; }
}

/* ---------------------------------------
 *  Grid: reintroduce Bootstrap 3 col-*-*
 *  on top of Bootstrap 5
 * ------------------------------------- */

/* Base column behavior for all old grid classes */
[class^="col-xs-"],
[class*=" col-xs-"],
[class^="col-sm-"],
[class*=" col-sm-"],
[class^="col-md-"],
[class*=" col-md-"],
[class^="col-lg-"],
[class*=" col-lg-"] {
  position: relative;
  box-sizing: border-box;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-left:  calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  flex: 0 0 auto; /* no basis here, so we don't fight Bootstrap's widths */
}

/* XS – always active (like Bootstrap 3) */
.col-xs-1  { width: 8.33333333%;  max-width: 8.33333333%; }
.col-xs-2  { width: 16.66666667%; max-width: 16.66666667%; }
.col-xs-3  { width: 25%;          max-width: 25%; }
.col-xs-4  { width: 33.33333333%; max-width: 33.33333333%; }
.col-xs-5  { width: 41.66666667%; max-width: 41.66666667%; }
.col-xs-6  { width: 50%;          max-width: 50%; }
.col-xs-7  { width: 58.33333333%; max-width: 58.33333333%; }
.col-xs-8  { width: 66.66666667%; max-width: 66.66666667%; }
.col-xs-9  { width: 75%;          max-width: 75%; }
.col-xs-10 { width: 83.33333333%; max-width: 83.33333333%; }
.col-xs-11 { width: 91.66666667%; max-width: 91.66666667%; }
.col-xs-12 { width: 100%;         max-width: 100%; }

/* SM – Bootstrap 3 breakpoint: ≥ 768px */
@media (min-width: 768px) {
  .col-sm-1  { width: 8.33333333%;  max-width: 8.33333333%; }
  .col-sm-2  { width: 16.66666667%; max-width: 16.66666667%; }
  .col-sm-3  { width: 25%;          max-width: 25%; }
  .col-sm-4  { width: 33.33333333%; max-width: 33.33333333%; }
  .col-sm-5  { width: 41.66666667%; max-width: 41.66666667%; }
  .col-sm-6  { width: 50%;          max-width: 50%; }
  .col-sm-7  { width: 58.33333333%; max-width: 58.33333333%; }
  .col-sm-8  { width: 66.66666667%; max-width: 66.66666667%; }
  .col-sm-9  { width: 75%;          max-width: 75%; }
  .col-sm-10 { width: 83.33333333%; max-width: 83.33333333%; }
  .col-sm-11 { width: 91.66666667%; max-width: 91.66666667%; }
  .col-sm-12 { width: 100%;         max-width: 100%; }
}

/* MD – Bootstrap 3 breakpoint: ≥ 992px */
@media (min-width: 992px) {
  .col-md-1  { width: 8.33333333%;  max-width: 8.33333333%; }
  .col-md-2  { width: 16.66666667%; max-width: 16.66666667%; }
  .col-md-3  { width: 25%;          max-width: 25%; }
  .col-md-4  { width: 33.33333333%; max-width: 33.33333333%; }
  .col-md-5  { width: 41.66666667%; max-width: 41.66666667%; }
  .col-md-6  { width: 50%;          max-width: 50%; }
  .col-md-7  { width: 58.33333333%; max-width: 58.33333333%; }
  .col-md-8  { width: 66.66666667%; max-width: 66.66666667%; }
  .col-md-9  { width: 75%;          max-width: 75%; }
  .col-md-10 { width: 83.33333333%; max-width: 83.33333333%; }
  .col-md-11 { width: 91.66666667%; max-width: 91.66666667%; }
  .col-md-12 { width: 100%;         max-width: 100%; }
}

/* LG – Bootstrap 3 breakpoint: ≥ 1200px */
@media (min-width: 1200px) {
  .col-lg-1  { width: 8.33333333%;  max-width: 8.33333333%; }
  .col-lg-2  { width: 16.66666667%; max-width: 16.66666667%; }
  .col-lg-3  { width: 25%;          max-width: 25%; }
  .col-lg-4  { width: 33.33333333%; max-width: 33.33333333%; }
  .col-lg-5  { width: 41.66666667%; max-width: 41.66666667%; }
  .col-lg-6  { width: 50%;          max-width: 50%; }
  .col-lg-7  { width: 58.33333333%; max-width: 58.33333333%; }
  .col-lg-8  { width: 66.66666667%; max-width: 66.66666667%; }
  .col-lg-9  { width: 75%;          max-width: 75%; }
  .col-lg-10 { width: 83.33333333%; max-width: 83.33333333%; }
  .col-lg-11 { width: 91.66666667%; max-width: 91.66666667%; }
  .col-lg-12 { width: 100%;         max-width: 100%; }
}


/* Offsets */
.col-xs-offset-1  { margin-left: 8.33333333%;  }
.col-xs-offset-2  { margin-left: 16.66666667%; }
.col-xs-offset-3  { margin-left: 25%;          }
.col-xs-offset-4  { margin-left: 33.33333333%; }
.col-xs-offset-5  { margin-left: 41.66666667%; }
.col-xs-offset-6  { margin-left: 50%;          }
.col-xs-offset-7  { margin-left: 58.33333333%; }
.col-xs-offset-8  { margin-left: 66.66666667%; }
.col-xs-offset-9  { margin-left: 75%;          }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }

/* ---------------------------------------
 *  Misc utilities
 * ------------------------------------- */

/* Old .text-muted already exists; .bg-* mostly kept.
   Bring back some often‑used helpers just in case. */

.text-muted {
  color: #6c757d !important;
}

/* Bootstrap 3 .badge was pill‑shaped; keep it that way */
.badge {
  border-radius: 10rem;
}

/* Glyphicons note: Bootstrap 5 ships without the font.
   This only prevents ugly fallback glyphs. */
.glyphicon {
  font-style: normal;
}



@media (min-width: 576px) {
  .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%; }
  .col-sm-offset-7  { margin-left: 58.33333333%; }
  .col-sm-offset-8  { margin-left: 66.66666667%; }
  .col-sm-offset-9  { margin-left: 75%; }
  .col-sm-offset-10 { margin-left: 83.33333333%; }
  .col-sm-offset-11 { margin-left: 91.66666667%; }
}

@media (min-width: 768px) {
  .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%; }
  .col-md-offset-7  { margin-left: 58.33333333%; }
  .col-md-offset-8  { margin-left: 66.66666667%; }
  .col-md-offset-9  { margin-left: 75%; }
  .col-md-offset-10 { margin-left: 83.33333333%; }
  .col-md-offset-11 { margin-left: 91.66666667%; }
}

@media (min-width: 992px) {
  .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%; }
  .col-lg-offset-7  { margin-left: 58.33333333%; }
  .col-lg-offset-8  { margin-left: 66.66666667%; }
  .col-lg-offset-9  { margin-left: 75%; }
  .col-lg-offset-10 { margin-left: 83.33333333%; }
  .col-lg-offset-11 { margin-left: 91.66666667%; }
}