/*
 Bootstrap 3 → 4 compatibility shims (frontend only)
 Purpose: allow old Bootstrap 3 class names to continue working after upgrading to Bootstrap 4.6.2.
 Scope: common renames and utilities that can be approximated in CSS.
 Note: Not a full theme. For complex components (navbar, input groups), prefer updating markup and keep both old and new classes (e.g., class="panel card").
*/

/* Images */
.img-responsive { max-width: 100%; height: auto; }
.img-rounded { border-radius: .25rem; }
.img-circle { border-radius: 50%; }

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

/* Labels → Badges */
.label { display: inline-block; padding: .35em .65em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; }
.label-default { background-color: #6c757d; } /* ~secondary */
.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; }

/* Deprecated btn-default → btn-secondary */
.btn-default { color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-default:hover { color: #fff; background-color: #5c636a; border-color: #565e64; }

/* Wells (approximate with a light card) */
.well { min-height: 20px; padding: 1rem; margin-bottom: 1rem; background-color: #f8f9fa; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; }
.well-lg { padding: 1.5rem; border-radius: .3rem; }
.well-sm { padding: .5rem; border-radius: .2rem; }

/* Thumbnails (approximate) */
.thumbnail { display: block; padding: .25rem; background-color: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; }
.thumbnail > img, .thumbnail a > img { margin-left: auto; margin-right: auto; display: block; max-width: 100%; height: auto; }

/* Panels → Cards (approximate mapping) */
.panel { position: relative; display: block; background-color: #fff; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; margin-bottom: 1rem; }
.panel + .panel { margin-top: 1rem; }
.panel-heading { padding: .5rem 1rem; border-bottom: 1px solid rgba(0,0,0,.125); background-color: #f8f9fa; border-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px); }
.panel-title { margin-bottom: 0; font-size: 1rem; }
.panel-body { padding: 1rem; }
.panel-footer { padding: .5rem 1rem; background-color: #f8f9fa; border-top: 1px solid rgba(0,0,0,.125); border-bottom-right-radius: calc(.25rem - 1px); border-bottom-left-radius: calc(.25rem - 1px); }

/* Contextual panel colors (rough approximations) */
.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-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; }

/* Badges: keep .badge as-is, alias .label-* already above; add .badge-default alias */
.badge-default { background-color: #6c757d; }

/* Forms */
.help-block { display: block; margin-top: .25rem; font-size: .875em; color: #6c757d; }
.control-label { margin-bottom: .5rem; font-weight: 600; }

/* Input groups spacing (BS3 had .input-group-btn) */
.input-group-btn > .btn { position: relative; }
.input-group .form-control { width: 1%; flex: 1 1 auto; }

/* Input group addon alias (BS3 .input-group-addon ≈ BS4 .input-group-text) */
.input-group-addon {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding: .375rem .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: .25rem;
}
.input-group .input-group-addon + .form-control,
.input-group .form-control + .input-group-addon { border-left: 0; }

/* Text utilities (already present in BS4, but keep aliases) */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }

/* Visibility utilities (basic) */
.hidden { display: none !important; }
.show { display: block !important; }

/* Responsive visibility helpers (Bootstrap 3 semantics)
   Breakpoints (BS3):
   - xs: <768px
   - sm: ≥768px and <992px
   - md: ≥992px and <1200px
   - lg: ≥1200px
   Behavior rules below mirror BS3 .hidden-* and .visible-*-{block,inline,inline-block}
*/

/* Reset helpers to default hidden state to avoid cascade surprises */
[class*="visible-"] { display: none !important; }

/* xs */
@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; }
  /* In BS3, .hidden-xs hides ONLY on extra‑small (<768px) */
  .hidden-xs { display: none !important; }
}

/* sm */
@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; }
  /* In BS3, .hidden-sm hides ONLY on small (≥768px and <992px) */
  .hidden-sm { display: none !important; }
}

/* md */
@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; }
  /* In BS3, .hidden-md hides ONLY on medium (≥992px and <1200px) */
  .hidden-md { display: none !important; }
}

/* lg */
@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; }
  /* In BS3, .hidden-lg hides ONLY on large (≥1200px) */
  .hidden-lg { display: none !important; }
}

/* Print visibility (BS3 compatibility) */
@media print {
  .visible-print { display: block !important; }
  .visible-print-block { display: block !important; }
  .visible-print-inline { display: inline !important; }
  .visible-print-inline-block { display: inline-block !important; }
}
@media not print {
  .visible-print,
  .visible-print-block,
  .visible-print-inline,
  .visible-print-inline-block { display: none !important; }
}
@media print { .hidden-print { display: none !important; } }

/* Nav pills/ tabs spacing */
.nav-pills > li { display: inline-block; }
.nav-pills > li + li { margin-left: .25rem; }
.nav-tabs > li { display: inline-block; }
.nav > li > a { display: block; padding: .5rem 1rem; }

/* Pagination size aliases */
.pagination-lg .page-link { padding: .75rem 1.5rem; font-size: 1.25rem; }
.pagination-sm .page-link { padding: .25rem .5rem; font-size: .875rem; }

/* Button size alias: .btn-xs (closest to BS4 .btn-sm) */
.btn-xs { padding: .25rem .5rem; font-size: .75rem; line-height: 1.5; border-radius: .2rem; }

/* Tables */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td { padding: .3rem; }

/* Form control sizing aliases */
.input-sm, .form-control.input-sm { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem; }
.input-lg, .form-control.input-lg { height: calc(1.5em + 1rem + 2px); padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; }
.form-group-sm .form-control { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem; }
.form-group-lg .form-control { height: calc(1.5em + 1rem + 2px); padding: .5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: .3rem; }

/* Alerts (ensure .alert-dismissable still works) */
.alert-dismissable, .alert-dismissible { padding-right: 3rem; }
.close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; }
.close:hover { color: #000; text-decoration: none; opacity: .75; }

/* Inline lists (spacing like BS3) */
.list-inline { padding-left: 0; margin-left: -5px; list-style: none; }
.list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; }

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

/* Deprecated .badge-inverse alias */
.badge-inverse { background-color: #343a40; }

/* Glyphicons were removed in BS4 – no CSS shim provided */
/* Minimal shim: map commonly used glyphicons to Font Awesome (v4) equivalents */
.glyphicon { font-family: "FontAwesome"; font-style: normal; }
.glyphicon-search:before { content: "\f002"; }
.glyphicon-filter:before { content: "\f0b0"; }
