/*
 * Bootstrap 3 -> Bootstrap 5 Compatibility Shim
 * -----------------------------------------------
 * Maps BS3 class names to BS5-equivalent visuals so existing
 * templates continue working after the framework swap.
 * Remove this file once all templates are migrated to native BS5 classes.
 */

/* ===== PANELS -> CARDS ===== */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.375rem;
  margin-bottom: 1rem;
}

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

.panel-heading {
  padding: 0.75rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0;
}

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

.panel-footer {
  padding: 0.75rem 1rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0 0 calc(0.375rem - 1px) calc(0.375rem - 1px);
}

.panel-body.panel-footer {
  border-top: none;
  background-color: #fff;
}

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

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

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

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

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

/* Panel as table (used in some builtin pages) */
.panel.table {
  display: table;
}


/* ===== GRID: col-xs-* -> col-* ===== */
/*
 * Use :where() for zero specificity so BS5's responsive col-sm-*/col-md-*/col-lg-*
 * (specificity 0,1,0 inside media queries) naturally override these base rules,
 * just like they overrode col-xs-* in BS3's own CSS via source order.
 */
:where(.col-xs-1)  { flex: 0 0 auto; width: 8.333333%; }
:where(.col-xs-2)  { flex: 0 0 auto; width: 16.666667%; }
:where(.col-xs-3)  { flex: 0 0 auto; width: 25%; }
:where(.col-xs-4)  { flex: 0 0 auto; width: 33.333333%; }
:where(.col-xs-5)  { flex: 0 0 auto; width: 41.666667%; }
:where(.col-xs-6)  { flex: 0 0 auto; width: 50%; }
:where(.col-xs-7)  { flex: 0 0 auto; width: 58.333333%; }
:where(.col-xs-8)  { flex: 0 0 auto; width: 66.666667%; }
:where(.col-xs-9)  { flex: 0 0 auto; width: 75%; }
:where(.col-xs-10) { flex: 0 0 auto; width: 83.333333%; }
:where(.col-xs-11) { flex: 0 0 auto; width: 91.666667%; }
:where(.col-xs-12) { flex: 0 0 auto; width: 100%; }


/* ===== GRID OFFSETS ===== */
.col-md-offset-1  { margin-left: 8.333333%; }
.col-md-offset-2  { margin-left: 16.666667%; }
.col-md-offset-3  { margin-left: 25%; }
.col-md-offset-4  { margin-left: 33.333333%; }
.col-md-offset-5  { margin-left: 41.666667%; }
.col-md-offset-6  { margin-left: 50%; }
@media (max-width: 767.98px) {
  .col-md-offset-1, .col-md-offset-2, .col-md-offset-3,
  .col-md-offset-4, .col-md-offset-5, .col-md-offset-6 {
    margin-left: 0;
  }
}

.col-sm-offset-1  { margin-left: 8.333333%; }
.col-sm-offset-2  { margin-left: 16.666667%; }
.col-sm-offset-3  { margin-left: 25%; }
@media (max-width: 575.98px) {
  .col-sm-offset-1, .col-sm-offset-2, .col-sm-offset-3 {
    margin-left: 0;
  }
}


/* ===== FLOAT UTILITIES ===== */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }


/* ===== NAVBAR ===== */
/*
 * BS3 navbar layout: .navbar > .container > .navbar-header + .navbar-collapse
 * BS5 navbar layout: .navbar.navbar-expand-* > .container > .navbar-brand + .navbar-toggler + .navbar-collapse
 *
 * Key difference: BS5 requires navbar-expand-* for horizontal layout.
 * We replicate that behavior for BS3-structured navbars below.
 */

/* Override BS5's default .navbar which sets flex-wrap:wrap and breaks BS3 layout */
.navbar {
  flex-wrap: nowrap;
}

/* The .navbar-header div doesn't exist in BS5 - make it inline */
.navbar-header {
  display: flex;
  align-items: center;
  margin-right: auto;
}

/* Navbar brand */
.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Navbar nav - horizontal on desktop */
.navbar-nav {
  display: flex;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav > li {
  list-style: none;
}

.navbar-nav > li > a {
  display: block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

/* navbar-right floats to the right */
.navbar-nav.navbar-right {
  margin-left: auto;
}

/* Navbar inverse (dark) */
.navbar-inverse {
  background-color: #343a40;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
}

.navbar-inverse .navbar-nav > li > a {
  color: rgba(255, 255, 255, 0.8);
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Navbar default (light) */
.navbar-default {
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.navbar-default .navbar-nav > li > a {
  color: #212529;
}

/* Fixed top */
.navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/* Navbar collapse - visible on desktop, hidden on mobile.
 * BS5's .collapse sets display:none. On desktop we MUST override this
 * for .navbar-collapse since BS3 navbars don't have navbar-expand-*. */
@media (min-width: 768px) {
  .navbar .navbar-collapse.collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 1;
    align-items: center;
  }
}

/* On mobile: collapse behavior */
@media (max-width: 767.98px) {
  .navbar .navbar-collapse.collapse:not(.show):not(.in) {
    display: none !important;
  }
  .navbar .navbar-collapse.collapse.show,
  .navbar .navbar-collapse.collapse.in,
  .navbar .navbar-collapse.collapsing {
    display: block !important;
  }
  .navbar .navbar-collapse .navbar-nav {
    flex-direction: column;
  }
  .navbar .navbar-collapse .navbar-nav.navbar-right {
    margin-left: 0;
  }
  .navbar > .container {
    flex-wrap: wrap;
  }
  .navbar .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
  }
}

/* BS3 navbar-toggle (hamburger button) */
.navbar-toggle {
  display: none;
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .navbar-toggle {
    display: block;
  }
}

/* BS3 icon-bar hamburger lines */
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0.75);
}

.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

/* Navbar form (removed in BS5) */
.navbar-form {
  padding: 0.5rem 0;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}


/* ===== ACCESSIBILITY ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


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


/* ===== BUTTONS ===== */
.btn-xs {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}


/* ===== LABELS -> BADGES ===== */
.label {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.375rem;
}

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


/* ===== TABLES ===== */
/*
 * BS5 tables use .table > :not(caption) > * > * at specificity 0,1,1 which
 * overrides custom single-class selectors (0,1,0) for background-color, etc.
 * BS3 used lower-specificity rules that custom classes could easily override.
 *
 * Fix: Neutralize BS5's background-color enforcement on table cells and
 * set padding/vertical-align to match BS3 defaults.
 */

/*
 * BS5 uses .table > :not(caption) > * > * { background-color: var(--bs-table-bg) }
 * at specificity 0,1,1, which overrides single-class selectors (0,1,0) like .sdTH.
 * BS3 used lower-specificity rules that custom classes could easily override.
 *
 * Fix: Match BS3 padding/alignment, and boost custom table class specificity
 * so they win over BS5's high-specificity cell rules.
 */
.table > :not(caption) > * > * {
  padding: 8px;
  vertical-align: middle;
}

/* Re-apply BS3-style border between header and body */
.table > thead > tr > th,
.table > thead > tr > td {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

/* BS5 adds a thick border-top on tbody — remove it to match BS3 */
.table > tbody {
  border-top-width: 0;
}

/* Ensure bordered table cells get clean 1px borders like BS3 */
.table-bordered > :not(caption) > * > * {
  border-width: 1px;
}

/* Boost custom table styling to override BS5's 0,1,1 specificity table rules.
   These classes are defined in default.css at 0,1,0 but lose to BS5. Restating
   them here at 0,2,0 or higher so they win. */
.table .sdTH {
  background-color: #6da6f3;
  color: white;
  border: 0 white solid;
  border-right-width: 5px;
  text-align: center;
}

.sdContent .table tr {
  background-color: aliceblue;
}

.sdContent .table td:nth-child(1) {
  font-weight: bold;
}


/* ===== WELL ===== */
.well {
  min-height: 20px;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
}


/* ===== LIST-INLINE ===== */
.list-inline > li {
  display: inline-block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}


/* ===== FORMS ===== */
/*
 * BS3 .form-horizontal uses .form-group as a row, with .col-*-N children
 * for labels and inputs. BS5 removed both .form-horizontal and .form-group.
 * Make .form-group inside .form-horizontal behave like BS5's .row.
 */
.form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-0.5 * 1.5rem);
  margin-left: calc(-0.5 * 1.5rem);
  margin-bottom: 1rem;
}

/* Children of form-group need gutter padding like .row > * in BS5 */
.form-horizontal .form-group > * {
  padding-right: calc(0.5 * 1.5rem);
  padding-left: calc(0.5 * 1.5rem);
}

/* BS3 .form-control-static for plain text display in horizontal forms */
.form-control-static {
  padding-top: calc(0.375rem + 1px);
  margin-bottom: 0;
  min-height: auto;
}

.form-horizontal .control-label {
  padding-top: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-weight: 600;
  text-align: right;
}

@media (max-width: 767.98px) {
  .form-horizontal .control-label {
    text-align: left;
  }
}

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

/* Validation states */
.has-error .form-control {
  border-color: #dc3545;
}
.has-error .form-control:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.has-error .control-label,
.has-error .help-block {
  color: #dc3545;
}

.has-success .form-control {
  border-color: #198754;
}
.has-success .form-control:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}
.has-success .control-label,
.has-success .help-block {
  color: #198754;
}

.has-warning .form-control {
  border-color: #ffc107;
}

/* input-group-addon -> input-group-text equivalent */
.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;
}

/* Inline radios/checkboxes */
.radio-inline,
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
  margin-right: 0.75rem;
  cursor: pointer;
}

.radio-inline input[type="radio"],
.checkbox-inline input[type="checkbox"] {
  margin-right: 0.375rem;
}


/* ===== NAV / TABS / PILLS ===== */
/*
 * BS3 pattern: <ul class="nav nav-tabs"><li role="presentation" class="active"><a href="#..." data-toggle="tab">
 * BS5 pattern: <ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab">
 * We need to make the BS3 pattern work visually under BS5.
 */

/* Ensure .nav is a proper flex container with no list styling */
ul.nav,
ol.nav,
.nav {
  display: flex !important;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

/* BS3 nav > li needs to be a flex item, no bullets */
.nav > li {
  list-style: none;
}

/* Nav tabs - horizontal tab bar with bottom border */
.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs > li {
  margin-bottom: -1px;
}

.nav-tabs > li > a {
  display: block;
  padding: 0.5rem 1rem;
  color: #0d6efd;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  cursor: pointer;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  border-color: #e9ecef #e9ecef #dee2e6;
  isolation: isolate;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

/* BS3 uses "in" class for visible tab panes, BS5 uses "show" */
.tab-pane.fade.in,
.tab-pane.fade.in.active,
.tab-pane.fade.active.in {
  opacity: 1;
}

/* Nav pills (BS3 pattern) */
.nav-pills > li > a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 0.375rem;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #0d6efd;
}


/* ===== LIST-GROUP ===== */
/*
 * BS5 changed list-group markup. BS3 uses <ul class="list-group"><li class="list-group-item">.
 * BS5 list-group-item removes bullets/padding by default but some BS3 patterns may need help.
 */
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.list-group-item {
  list-style: none;
}


/* ===== TAB PANE VISIBILITY ===== */
/*
 * Reinforce that only active tab panes are visible.
 * BS5 has .tab-content > .tab-pane { display: none } and .tab-content > .active { display: block }
 * but cascading overrides can break this. These rules ensure correct behavior.
 */
.tab-content > .tab-pane:not(.active) {
  display: none !important;
}

.tab-content > .tab-pane.active {
  display: block !important;
}


/* ===== GLYPHICONS -> Bootstrap Icons shim ===== */
/* Maps BS3 glyphicons to Bootstrap Icons font (already loaded via CDN) */
/* Only the homepage uses these - they'll be replaced in Step 3 */
.glyphicon {
  display: inline-block;
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Map commonly used glyphicons to Bootstrap Icons codepoints */
.glyphicon-ok:before        { content: "\F26E"; }  /* bi-check-lg */
.glyphicon-cloud:before     { content: "\F2A8"; }  /* bi-cloud */
.glyphicon-download-alt:before { content: "\F128"; } /* bi-download */
.glyphicon-th-large:before  { content: "\F3E6"; }  /* bi-grid-3x3-gap */
.glyphicon-chevron-right:before { content: "\F285"; } /* bi-chevron-right */

.feature-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.5rem;
  color: #0d6efd;
}


/* ===== JUMBOTRON (removed in BS5) ===== */
.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.5rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}


/* ===== MISC ===== */
/* caret for dropdowns (BS3 had a .caret class) */
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

/* text-center on parent for centering (BS3 pattern) */
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* BS3 .close button (BS5 uses .btn-close) */
button.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;
}

button.close:hover {
  opacity: 0.75;
}

/* hide/show classes */
.hidden {
  display: none !important;
}

/* BS3 .visible-xs, .visible-sm etc - minimal support */
@media (max-width: 575.98px) {
  .hidden-xs { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .hidden-sm { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hidden-md { display: none !important; }
}
@media (min-width: 992px) {
  .hidden-lg { display: none !important; }
}


/* =============================================================
   SWEEPING STYLE UPDATE — Added 2026-04-02
   CSS-only improvements for all builtin pages. No HTML changes.
   To revert: delete everything below this comment block.
   ============================================================= */

/* ===== ALERTS (BS3 -> BS5 normalization) ===== */
/* BS3 alerts without .alert base class (e.g. bare .alert-warning) */
.alert-warning:not(.navbar) {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #ffc107;
  border-radius: 0.375rem;
  background-color: #fff3cd;
  color: #664d03;
}

.alert-info:not(.navbar) {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #0dcaf0;
  border-radius: 0.375rem;
  background-color: #cff4fc;
  color: #055160;
}

.alert-danger:not(.navbar) {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #dc3545;
  border-radius: 0.375rem;
  background-color: #f8d7da;
  color: #842029;
}

.alert-success:not(.navbar) {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #198754;
  border-radius: 0.375rem;
  background-color: #d1e7dd;
  color: #0f5132;
}

/* Ensure .alert base class also gets proper styling */
.alert {
  position: relative;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

/* Alert headings */
.alert h3, .alert h4 {
  color: inherit;
  margin-top: 0;
}


/* ===== CONTEXTUAL TABLE ROW CLASSES (BS3) ===== */
/* BS3 used .success/.danger/.warning/.info on <tr>, BS5 uses .table-success etc. */
.table > :not(caption) > tr.success > td,
.table > :not(caption) > tr.success > th {
  background-color: #d1e7dd !important;
}

.table > :not(caption) > tr.danger > td,
.table > :not(caption) > tr.danger > th {
  background-color: #f8d7da !important;
}

.table > :not(caption) > tr.warning > td,
.table > :not(caption) > tr.warning > th {
  background-color: #fff3cd !important;
}

.table > :not(caption) > tr.info > td,
.table > :not(caption) > tr.info > th {
  background-color: #cff4fc !important;
}


/* ===== LEGACY ICON CLASSES (pre-BS3) ===== */
/* password/show.html uses icon-coffee and icon-chevron-left */
.icon-coffee:before,
.icon-chevron-left:before {
  font-family: "Font Awesome 4 Compat", "FontAwesome", sans-serif;
}

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

.icon-chevron-left:before { content: "\f053"; }
.icon-coffee:before { content: "\f0f4"; }


/* ===== INLINE ERRORS (validation) ===== */
.inline-errors {
  color: #dc3545;
  font-size: 0.85em;
  margin-top: 0.25rem;
  display: block;
}

/* ===== dl-horizontal mobile stacking ===== */
@media (max-width: 767.98px) {
  .dl-horizontal dt {
    float: none;
    width: auto;
    text-align: left;
    margin-bottom: 0.25rem;
  }
  .dl-horizontal dd {
    margin-left: 0;
    margin-bottom: 1rem;
  }
}